@charset "utf-8";

html{
overflow-x:hidden;
}

body {
line-height: 1.8;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif';
color:#fff;
background: #000;
}

body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-size:cover;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

@-moz-keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

@-webkit-keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

.fadein_00 {
opacity : 0;
transform : translate(0, 10px);
transition : all 1500ms;
}

.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03_sp {
animation:show 0s both;
opacity : 0;
transform : translate(0, -50px);
transition : all 1500ms;
}
.fadein03_sp.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.center{
text-align:center;
}

.pc{
display:block;
}

.sp{
display:none;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fLft {
float:left;
}

.fRgt {
float:right;
}

.title{
float:left;
}

.blocklink {
display:block;
}


/* rought form styles for when JS is disabled */

#language-select form {
width: 160px;
padding: 0;
}

#language-select select,
#language-select input {
display: inline;
padding: 0;
margin: 0;
}


/* JS-created definition list */

#language-select .dropdown dd { position: absolute; }

dt {
line-height: 11px!important;
}

dd {
line-height: 16px!important;
}

#language-select .dropdown{
margin:0;
float:right;
}

#language-select .dropdown a {
text-decoration: none;
outline: 0;
font-size: 11px;
display: block;
width: 65px;
text-align:center;
overflow: hidden;
}

#language-select .dropdown dt a {
background: #28231c; 
border: 2px solid #875533;
padding: 3px 10px 4px 10px;
color: #fff;
}

#language-select .dropdown dt a.activemode {
background: #25172A;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
box-shadow: 0 1px 7px rgba(0,0,0,.2);
color: #fff;
}

#language-select .dropdown dd ul {
background: #28231c;
border: 2px solid #875533;
color: #fff;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: -40px;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 2px 6px rgba(0,0,0,.5);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.5);
box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

#language-select .dropdown dd ul li a {
padding: 2px 10px;
}

#language-select .dropdown dd ul li a span,
#language-select .dropdown dt a span {
width: 16px;
height: 11px;
margin: 2px 6px 0 0;
background-repeat: no-repeat;
cursor: pointer;
}

#language-select .dropdown dd ul li a em,
#language-select .dropdown dt a em {
font-style: normal;
width: 65px;
cursor: pointer;
}

#language-select .dropdown dd ul li a em {
color: #fff;
}

#language-select .dropdown dd ul li a:hover {background-color:#fff;}
#language-select .dropdown dd ul li a:hover em { color:#25172A; }

li.lang {
font-size: 0.6em;
width: 33%;
}

#social_buttons {
max-height: 20px;
text-align: right;
}

.fb-like {
display:inline-block!important;
float:right;
margin:0px;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}

.logo-right img{
transition: 0.3s ;
}

.logo-right img:hover{
opacity: 0.5 ;
}


/*PAGETOP */

#pageTop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer
}

#pageTop img {
opacity: .4;
filter: alpha(opacity=40)
}

#pageTop img:hover {
opacity: 1;
filter: alpha(opacity=100)
}

#pageTop {
display: none
}

/* headder */

#basicheader {
background: #f29b76;
color: #FFF;
height: 35px;
font-size: 13px;
}

.contentsizer {
width:1160px;
margin:0px auto;
padding:6px 0;
}

.header-right{
float:right;
width:310px;
}

a:hover img.overwhite{
cursor:pointer;
filter: alpha(opacity=80);        /* ie lt 8 */
-ms-filter: "alpha(opacity=80)";  /* ie 8 */
-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.8;              /* Safari 1.x */
opacity:0.8;
zoom:1;
}

h1{
margin: 0;
font-size: 12px;
font-weight: normal;
color: #000;
}

h2{
margin:0;
}

h3{
margin:0;
}

/* main_area */

.main_area{
background: url('../images/img_main_bg.jpg') center 0 no-repeat;
width:100%;
height:487px;
}

.main_area_inner{
width:1160px;
margin:0 auto;
position:relative;
}

.main_area_inner .main_product{
position:absolute;
top:0%;
left:23%;
z-index:10;
overflow-x:hidden;
}

.main_area_inner .main_crest{
position:absolute;
top:0;
right:0%;
margin-top:30px;
z-index:1;
}

.main_area_inner .main_name{
position:absolute;
top:0;
left:0;
margin-top:30px;
}

.main_area_inner p.main_txt{
position:absolute;
top:0%;
margin-top:260px;
left:0%;
line-height: 23px;
font-size: 14px;
text-shadow: 0px 0px 5px rgb(0 0 0), 2px 4px 10px rgb(0 0 0);
}

.main_area_inner p.main_txt_en{
position:absolute;
top:0%;
margin-top:285px;
left:0%;
line-height: 23px;
font-size: 14px;
text-shadow: 0px 0px 5px rgb(0 0 0), 2px 4px 10px rgb(0 0 0);
}

.main_area_inner .main_name_sp{
display:none;
}

.main_area_inner .online_btn_sp{
display:none;
}	


.main_area_inner .online_btn_sp_02{
display:none;
}	


/* content_area */

.content_area{
background:#000 url('../images/img_content_bg.jpg') 20px bottom repeat-x;
}

.content_area_inner{
width:1014px;
margin:0 auto;
padding:50px 0;
height:2150px;
background:#000 url('../images/img_content_inner_bg.png') -130px -532px no-repeat;
position:relative;
}

/* point_area */

.point{
background-image:url(../images/bg_circle.png);
width:275px;
height:275px;
position:relative;
z-index:100;
}

.point .point_img{
position:absolute;
top:-20px;
left:-200px;
}

.point .point_txt{
position:absolute;
top:35px;
left:80px;
font-size: 12px;
line-height: 20px;
letter-spacing: .5px;
text-shadow: 0px 1px 1px rgba(60, 60, 60, 0.8), 0px 2px 2px rgba(60, 60, 60, 0.8), 0px 3px 3px rgba(60, 60, 60, 0.8);
}

.point .point_txt p{
margin:10px 0 0 5px;
width:300px;
}

.point_txt_sp{
display:none;
}

.content_area_inner .first{
position:absolute;
top:0;
margin-top:60px;
left:120px;
}

.content_area_inner .second{
position:absolute;
top:0;
margin-top:400px;
}

.content_area_inner .third{
position:absolute;
top:0;
margin-top:740px;
left:120px;
}

.content_area_inner .fourth{
position:absolute;
top:0;
margin-top:1080px;
left:240px;
}

.point_h_sp{
display:none;
}

/* spin_area */

.spin_area {
position:relative;
top: 1460px;
}

.spin_panel{
float:left;
margin:0 0 0 85px;
}

.spin_panel_sp{
display:none;
}

#spinner {
position:relative
}

.threesixty .spinner {
width:60px;
display:block;
margin:0 auto;
height:30px;
background:#333;
background:rgba(0,0,0,0.7);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
z-index:60;
position:relative
}

.threesixty .spinner span {
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFF;
text-align:center;
line-height:30px;
display:block;
top:60px
}

#load_img {
position:absolute;
margin:0 auto;
top:0;
left:340px;
z-index:4;
width:427px;
}

.threesixty {
position:absolute;
margin:0 auto;
top:0;
left:340px;
cursor:move;
cursor:grab;
cursor:-moz-grab;
cursor:-webkit-grab;
z-index:5;
width:100%;
}

.threesixty .threesixty_images {
display:none;
list-style:none;
margin:0;
padding:0
}

.threesixty .threesixty_images img {
position:absolute;
top:0;
width:100%;
height:auto
}

.threesixty .threesixty_images img.previous-image {
visibility:hidden;
width:0
}

.threesixty .threesixty_images img.current-image {
visibility:visible;
width:427px;
}

.threesixty .spinner {
width:60px;
display:block;
margin:0 auto;
height:30px;
background:#333;
background:rgba(0,0,0,0.7);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
z-index:60;
position:relative;
top: 150px;
left: -300px;
}

.threesixty .spinner span {
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFF;
text-align:center;
line-height:30px;
display:block;
top:60px
}

.spin_instruct {
position:absolute;
top:610px;
left:340px;
font-size:14px
}


/* bonus_area */

.bonus_area{
background-color:#B34422;
padding-bottom:50px;
}

.bonus_area_inner{
width:1014px;
margin:0 auto;
}

.bonus_area_inner p{
margin:0;
}

.bonus_area_inner .bonus_area_img{
float:right;
margin:0;
width:41%;
}

.bonus_area_inner .bonus_area_img img{
width:100%;
}

.bonus_notice{
font-size:12px;
}

.bonus_area_inner .bonus_area_img p{
margin:0;
}

.bonus_area_inner .bonus_txt_01{
width:48%;
float:left;
font-size:15px;
}

.bonus_area_inner .bonus_txt_01 img{
width:auto;
}

.bonus_area_inner .bonus_txt_02{
width:48%;
font-size:15px;
font-weight:bold;
}

.bonus_area_inner .bonus_txt_02 .date{
font-size:14px;
}

.bonus_area_inner .bonus_txt_02 span{
color:#EAD440;
}


.bonus_area_inner .bonus_txt_02 img{
margin:5% 0 0;
width:92%;
transition: 0.3s ;
}


.bonus_area_inner .bonus_txt_02 img:hover{
opacity: 0.8 ;
}

.bonus_area_inner .space{
margin:2% 0;
}

.blacktriangle {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 60px 0;
border-color: #000 transparent transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
margin: 0 auto;
}

.bonus_area_inner .space span.date br{
display:none;
}

/* footer */

footer{
background:#000;
padding:25px 0;
}

footer p{
margin:0;
}

footer .footer-inneer{
width:1014px;
margin:0 auto;
}

footer .footer-inneer .logo-right{
float:right;
}

footer .footer-inneer .logo-right ul{
padding:0;
width:50%;
}

footer .footer-inneer .logo-right ul li{
float:right;
}

.copy{
float:left;
width:60%;
text-align:left;
font-size:12px;
}


@media screen and (max-width: 1400px) {

footer .footer-inneer{
width:90%;
}

}

@media screen and (max-width: 1300px) {

.contentsizer {
width:94%;
margin:0 3%;
}

}


@media screen and (max-width: 1024px) {

.main_area_inner{
width:98%;
margin:0 auto;
position:relative;
}

.content_area_inner{
width:85%;
}

.content_area_inner .first{
left:15%;
}

.content_area_inner .second{
left:15%;
}

.content_area_inner .third{
left:15%;
}

.content_area_inner .fourth{
left:15%;
}

/* bonus_area */

.bonus_area_inner{
width:94%;
margin:0 auto;
}

}

@media screen and (max-width: 1200px) {

.main_crest{
display: none;
}

}
@media screen and (max-width: 1000px) {

footer .footer-inneer{
text-align:center;
}

footer .footer-inneer .logo-right{
width:100%;
float:none;
}

footer .footer-inneer .logo-right img{
margin-bottom:10px;
}

footer .footer-inneer .logo-right ul{
padding:0;
width:50%;
}

.copy{
float:none;
width:100%;
text-align:center;
}

}

@media screen and (max-width: 870px) {
.title span{
display:none;
}

}


/*SP*/

@media screen and (max-width: 820px) {

.pc{
display:none;
}

.sp{
display:block;
}

#pageTop {
width: 50px;
right: 50px;
}



#twitter-widget-0{
height: 27px !important;
}

/* main_area */

.main_area{
width:100%;
padding-top: 177.864%;
background: url('../images/sp/img_main_bg_sp.jpg') no-repeat ;
background-size: contain;
height: auto;
position:relative;
}

.main_area .main_area_inner{
width:100%;
position: static;
top:0;
}
.main_area_inner .main_product{
width:80%;
margin-left:14%;
position:absolute;
top:2%;
left:1%;
z-index:1;
overflow-x:hidden;
}

.main_area_inner .main_crest{
display:none;
}

.main_area_inner .main_name{
display:none;
}

.main_area_inner p.main_txt{
position: static;
width:90%;
z-index:100;
margin:0 auto 25%;
}

.main_area_inner p.main_txt_en{
position: static;
width:90%;
z-index:100;
margin:0 auto 25%;
}

.main_area_inner .main_name_sp{
display:block;
width:94%;
position:absolute;
top:0;
left:3%;
margin-top:90%;
z-index:2;
}

.main_area_inner .name_en_mt{
margin-top:80%;
}

.main_area_inner .online_btn_sp{
display:block;
width:74%;
position:absolute;
top:0%;
left:13%;
margin-top:136%;
z-index:2;
}

.main_area_inner .online_btn_sp_02{
display:block;
width:74%;
position:absolute;
top:0%;
left:13%;
margin-top:153%;
z-index:2;
}	

/* content_area */

.content_area{
width:100%;
background:#000;
}

.content_area_inner{
width:90%;
padding: 0;
height: auto;
background:#000;
}

/* point_area */

.point{
background:none;
width:100%;
height:auto;
position: static;
}

.point .point_img{
width:100%;
padding-top: 46.359%;
background: url('../images/sp/img_bg_point_sp.png') 0 0 no-repeat;
background-size: contain;
position: relative;
margin:10% auto;
left:auto;
top:auto;
}

.point .point_img img{
width:50%;
left:25%;
position:absolute;
top:0;
}

.point .point_txt{
position: static;
font-size: 14px;
line-height: 24px;
text-shadow: none;
}

.point .point_txt br{
display:none;
}

.point .point_txt p{
margin:0 0 25% 0;
width:100%;
}

.point_txt_sp{
display: block;
background-color:#B34422;
text-align:center;
padding:10px;
margin-bottom:10%;
}

.point_txt_sp img{
vertical-align: middle;
}

.point_h_sp{
display:block;
width:100%;
margin-bottom:5%;
}

.content_area{
margin-bottom:20%;
}

.content_area_inner .first{
position:static;
margin-top:0;
}

.content_area_inner .second{
position:static;
margin-top:0;
}

.content_area_inner .third{
position:static;
margin-top:0;
}

.content_area_inner .fourth{
position:static;
margin-top:0;
}

/* spin_area */

.spin_area {
position:static;
width:100%;
}

.spin_panel{
float:none;
width:100%;
margin:0 auto 5%;
}

.spin_panel img{
width:78%;
margin:0 auto;
}

#spinner {
position:relative;
width:100%;
margin:0 auto;
padding-top: 139.5784%;
background-size: contain;
}

#spinner #load_img {
width:100%;
position:absolute;
margin:0 auto;
top:0;
left:0;
z-index:4;
}

#spinner .threesixty {
width:100%;
padding-top: 139.5784%;
background-size: contain;
position:absolute;
margin:0 auto;
top:0;
left:0;
cursor:move;
cursor:grab;
cursor:-moz-grab;
cursor:-webkit-grab;
z-index:5
}

.threesixty{
position:relative;
}

.threesixty .spinner {
position: absolute;
left: 0;
right: 0;
top:25%;
}

#spinner .spinnertk{
width:100%;
}

.threesixty .threesixty_images {
display:none;
list-style:none;
margin:0;
padding:0
}

.threesixty .threesixty_images img {
position:absolute;
top:0;
width:100%;
height:auto;
}

.threesixty .threesixty_images img.previous-image {
visibility:hidden;
width:0
}

.threesixty .threesixty_images img.current-image {
visibility:visible;
width:100%;
}

.threesixty .spinner span {
font-family:Arial,"MS Trebuchet",sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFF;
text-align:center;
line-height:30px;
display:block;
top:60px
}

.spin_instruct {
position:static;
font-size:14px;
margin-top:10px;
}

/* bonus_area */

.bonus_area_inner{
width:90%;
}

.bonus_area_inner .bonus_area_img{
float:none;
margin:5% auto;
width:100%;
}

.bonus_area_inner .bonus_area_img img{
width:100%;
}

.bonus_area_inner .bonus_txt_01{
width:100%;
float:none;
text-align:center;
}

.bonus_area_inner .bonus_txt_01 img{
margin-top:5%;
width:100%;
}

.bonus_area_inner .bonus_txt_02{
width:100%;
text-align:center
}

.bonus_area_inner .bonus_txt_02 img{
margin:0 auto;
width:80%;
}

.bonus_area_inner .space{
margin:2% 0 5%;
}

.bonus_area_inner .space span br{
display:none;
}

.blacktriangle {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 60px 0;
border-color: #000 transparent transparent;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
margin: 0 auto;
}

}

@media screen and (max-width: 670px) {

.title{
float:none;
text-align:center;
margin-bottom:10px;
font-size:12px;
}

#social_buttons {
float:none;
text-align: center;
margin-bottom:10px;
}

.fb-like {
display:inline-block!important;
float: none;
margin:0px;
}

.fb_iframe_widget > span { vertical-align: baseline !important; }	

#twitter-widget-0{
height: 27px !important;
}

.header-right{
width:330px;
margin:0 auto;
float:none;
text-align:center;
}

#basicheader {
height: auto;
}

}

@media screen and (max-width: 630px) {

/* footer */

footer{
height:auto;
}

footer .footer-txt{
width:305px;
float:none;
}

footer .footer-inneer{
width:90%;
margin:10px 5% 0; 
font-size:14px;
}

}


@media screen and (max-width: 414px) {

.threesixty .spinner {
top:15%;
}	

/* bonus_area */

.bonus_area_inner .bonus_area_img{
width:100%;
}

.bonus_area_inner .bonus_txt_01 img{
width:100%;
margin-top:15%;
}

.bonus_area_inner .bonus_txt_02 img{
margin:0 auto;
width:100%;
}

.bonus_area_inner .space span.date br{
display:block;
}


}

@media screen and (max-width: 375px) {

.threesixty .spinner {
top:12%;
}	
}

@media screen and (max-width: 320px) {

.threesixty .spinner {
top:8%;
}	
}