@charset "utf-8";

/* CSS Document */

/* ----------------------------------------------------------------------
main
---------------------------------------------------------------------- */
body {
    text-align:center;
    position:relative;
    
    min-width: 1140px;
}

#bg{background:#000 url(../images/common/bg.png) repeat-y center top;}

#bg_image{background:url(../images/common/bg_image.jpg) no-repeat center -30px;}

/*#bg_side{background:url(../images/common/bg_side.png) repeat-y center top;}*/

#contents a:link,#contents a:visited  {	color: #1991E6 !important; font-weight: bold;}
#contents a:hover{	color: #85CBFE !important;}
.fadeeffect{
    opacity:1.0;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:opacity;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:opacity;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function: ease-out;
    transition-property:opacity;
    transition-duration:0.2s;
    transition-timing-function: ease-out;
}
.fadeeffect:hover{    opacity:0.7;   }

/* ----------------------------------------------------------------------
opacityeffect
---------------------------------------------------------------------- */
.opacityeffect{
    position:relative;
    display:block;
}

.opacityeffect .base{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1; 
}

.opacityeffect .effect{
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
    display:none;
}

/* ----------------------------------------------------------------------
pagetop
---------------------------------------------------------------------- */
#button_pagetop {
    position:fixed;
    right:-10px;
    bottom:20px;
    z-index:8000;
}

#button_pagetop a{
    position:fixed;
    right:-144px;
    bottom:20px;	
    display:block;
	width:120px;
	height: 38px;
    background-image:url(../images/common/button_pagetop.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    overflow:hidden;
    text-decoration:none;
	background-position: 0 -0px;
}

#button_pagetop a{    background-position:0px 0px;   }
#button_pagetop a:hover{background-position: 0 -38px;}

/* ----------------------------------------------------------------------
background
---------------------------------------------------------------------- */
#page_background{
    position:absolute; 
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
}

#page_background .background_wrapper{
    position:absolute;
    width:1300px;
    height:100%;
    left:50%;
    top:0;
    z-index:1;
    margin-left:-650px;
}

.bg_effect{    opacity: 0;}


#page_background .background_image{
    position:absolute;
    left:0px;
    top:-30px;
    z-index:1;
    width:1300px;
    height:850px;
}

#page_background #bg_side{
    position:absolute;
    width:1634px;
    height:100%;
    left:50%;
    top:0;
    z-index:10;
    margin-left:-817px;
    background:url(../images/common/bg_side.png) repeat-y center top;
}

/* ----------------------------------------------------------------------
template edited
---------------------------------------------------------------------- */
#wp{
    width:100%;   
    z-index:10;
    overflow-x: hidden;
    margin: 0 auto;
}

#contents{
    z-index:100;
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    position:relative;
    width: 100%;
    overflow-x: hidden;
    background:none !important;
}

#sqexFooter{
    position:relative;
    overflow:hidden;
    z-index: 1000;
}

#logo{margin: 0 auto 50px;}

/* ----------------------------------------------------------------------
base
---------------------------------------------------------------------- */
.container{
    margin:0 auto;
    position: relative;
    color: #fff;
}

.sectioninner{ 
    width: 1140px;
    position: relative;
    margin:0 auto;
    /*background-color:rgba(200,200,200,0.5);*/
}

/* socialicon */
.sharebuttonlist{
    position:absolute;
    top:15px;
    right:0;
    text-align:left;
    z-index: 1000;
}
.sharebuttonlist ul{    font-size:0px;    line-height:0px;}
.sharebuttonlist li{    display:inline-block;    margin-right:10px;}
.sharebuttonlist li:last-child{    margin-right:0px;}

.br_pc,.pc_show{ display: block;}
.br_sp,.sp_show{ display: none;}


/* ----------------------------------------------------------------------
ネジ
---------------------------------------------------------------------- */
#box_screw1 {  
    left: 50%;    top: -100px; position: fixed;
    width: 1800px;  margin-left: -900px;
}
#box_screw2 {  
    right: 50%;    top: -100px; position: fixed;
    width: 1800px;  margin-right: -900px;
}

.screw1{    
    height: 302px;  width: 302px;   
    background:url(../images/common/screw1.png) no-repeat left top;
    top: 0; position: absolute;
}
#box_screw1 .screw1{  left: 15px;}
#box_screw2 .screw1{  right: 15px;}


.screw2{    
    height: 216px;  width: 216px;   
    background:url(../images/common/screw2.png) no-repeat left top;
    top: 230px; position: absolute;
}
#box_screw1 .screw2{  left: 0px;}
#box_screw2 .screw2{  right: 0px;}


.screw3{    
    height: 132px;  width: 132px;   
    background:url(../images/common/screw3.png) no-repeat left top;
    top: 235px; position: absolute;
}
#box_screw1 .screw3{  left: 175px;}
#box_screw2 .screw3{  right: 175px;}

.screwrotate1{
  -webkit-animation: screwrotate1 15s infinite linear; /* Safari 4+ */
  -moz-animation:    screwrotate1 15s infinite linear; /* Fx 5+ */
  -o-animation:      screwrotate1 15s infinite linear; /* Opera 12+ */
  animation:         screwrotate1 15s infinite linear; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes screwrotate1 {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes screwrotate1 {  0% { -moz-transform: rotate(0deg); }  100% { -moz-transform: rotate(360deg); } }
@-o-keyframes screwrotate1 {  0% { -o-transform: rotate(0deg); }  100% { -o-transform: rotate(360deg); } }
@keyframes screwrotate1 {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); } }


.screwrotate2{
  -webkit-animation: screwrotate2 15s infinite linear; /* Safari 4+ */
  -moz-animation:    screwrotate2 15s infinite linear; /* Fx 5+ */
  -o-animation:      screwrotate2 15s infinite linear; /* Opera 12+ */
  animation:         screwrotate2 15s infinite linear; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes screwrotate2 {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes screwrotate2 {  0% { -moz-transform: rotate(0deg); }  100% { -moz-transform: rotate(-360deg); } }
@-o-keyframes screwrotate2 {  0% { -o-transform: rotate(0deg); }  100% { -o-transform: rotate(-360deg); } }
@keyframes screwrotate2 {  0% { transform: rotate(0deg); }  100% { transform: rotate(-360deg); } }

.device_ipad #box_screw1 div,
.device_ipad #box_screw2 div{display: block;}

.device_ipad #box_screw1{  left: -120px;    top:-150px;}   
.device_ipad #box_screw2{  right: -120px;   top:-150px;}  


@media only screen and (max-width:1300px){
    #box_screw1 div,#box_screw2 div{display: none;}
}

/* ----------------------------------------------------------------------
text
---------------------------------------------------------------------- */
.sectiontitle{  margin:80px auto 40px;}

/* ----------------------------------------------------------------------
header
----------------------------------------------------------------------  */
#header{
    padding: 25px 0 80px;
    text-align: center;
}

#pagetitle{
    margin: 560px auto 0;
    opacity: 0;
  /*  width: 927px;
    height: 314px;
    /*position: relative;
    */
}
/*
#pagetitle img{position: absolute;  left: 0;    top: 0;}

.pagetitle1,.pagetitle3{z-index:3;}
.pagetitle2{z-index:1;}

/* ----------------------------------------------------------------------
section01
----------------------------------------------------------------------  */
#section01{
    height: 560px;
    background:url(../images/section/section01.png) no-repeat center top;
    padding-top: 90px;
} 

#section01 .image01{    bottom:0; left:60px;    position: absolute;}
#section01 .image02{    bottom:0; right:30px;    position: absolute;}

/* ----------------------------------------------------------------------
section02
----------------------------------------------------------------------  */
.frame{
    width: 1140px;
    padding: 53px 53px 0;
    position: relative;
}

#section02 .frame {
    height: 460px;
    margin-top: 10px;
    background:url(../images/section/frame02.png) no-repeat center top; 
}

/* ----------------------------------------------------------------------
section03
----------------------------------------------------------------------  */
#section03{
    height: 1040px;
    width: 1300px;
    margin: 0 auto;
    background:url(../images/section/section03.png) no-repeat center 280px;
} 

#section03 .mg20top{ margin-left: 20px;}

/* ----------------------------------------------------------------------
section04
----------------------------------------------------------------------  */
#section04 .frame{
    height: 890px;
    background:url(../images/section/frame04.png) no-repeat center top;
}

#section04 .sectiontitle{  margin:80px auto 10px;}
#section04 .interview:nth-child(2){margin-top: 26px;}


/* ----------------------------------------------------------------------
    footer
---------------------------------------------------------------------- */
#button_campaign .opacityeffect,
#button_campaign .opacityeffect img{
    width: 686px;
    height:126px;
    margin: 20px auto 0;
}

#button_officialsite{
    margin: 50px auto 80px;
}

/* ----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
for smartphone
----------------------------------------------------------------------
----------------------------------------------------------------------
---------------------------------------------------------------------- */
@media only screen and (max-width:640px){
    /* ----------------------------------------------------------------------
    main
    ---------------------------------------------------------------------- */
    html{
        -webkit-text-size-adjust: 100%;
        min-width:640px;
    }

    body {
        min-width:640px;
        font-size: 18px;
        overflow-x: hidden;
    }

    #bg_image{background-position:center 0px;}
    
    /* ----------------------------------------------------------------------
    pagetop
    ---------------------------------------------------------------------- */
    #button_pagetop a{
        width:144px;
        height: 46px;
        background-position:0 -76px;
    }
    #button_pagetop a:hover{background-position: 0 -122px;}
    
    /* ----------------------------------------------------------------------
    background
    ----------------------------------------------------------------------
    #page_background .background_wrapper{
        position:absolute;
        width:640px;
        height:100%;
        margin-left:0;
        top: 120px;
        left: 0;
    }
*/
    #page_background .background_image{
        top:0px;
    }
    
    #page_background #bg_side,
    #box_screw1,#box_screw2{display: none;}
    /* ----------------------------------------------------------------------
    template edited
    ---------------------------------------------------------------------- */
    #contents{
        min-width:640px;
        font-size: 18px;
    }
    
    img.fullimage{width: 100%;  height: auto;}
    
    /* ----------------------------------------------------------------------
    base
    ---------------------------------------------------------------------- */
    .container{
        width: 640px;
    }
    
    .sectioninner{
        width: 580px;
        margin: 0 auto;
    }
    
    
    /* socialicon */
    .sharebuttonlist{right: -15px;}
    .sharebuttonlist li img{    height: 40px;   width: auto;}

    .br_pc,.pc_show{ display: none;}
    .br_sp,.sp_show{ display: block;}
    
    /* ----------------------------------------------------------------------
    text
    ---------------------------------------------------------------------- */
    .sectiontitle,#section04 .sectiontitle{margin-left:-90px;}

    /* ----------------------------------------------------------------------
    header
    ----------------------------------------------------------------------  */
    #header{        padding: 60px 0 50px;    }

    /*#pagetitle,#pagetitle img{
        width: 640px;
        height: 217px;
    }
    /* ----------------------------------------------------------------------
    section01
    ----------------------------------------------------------------------  */
    #section01{
        padding-top: 80px;
    background:url(../images/section/section01_sp.png) no-repeat center top;
    } 

/* ----------------------------------------------------------------------
section01
----------------------------------------------------------------------  */

    #section01 .text img{width: 579px;  height: 174px;}
    
    #section01 .image01,#section01 .image02{   display: none;}

    /* ----------------------------------------------------------------------
    section02
    ----------------------------------------------------------------------  */
    .frame{
        width: 620px;
        margin-left: -20px;
    }

    #section02 .frame {
        height: 870px;
        margin-top: 20px;
        background:url(../images/section/frame02_sp.png) no-repeat center top;         
    }

    #section02 .frame .fl_right{margin-top: 27px;}
    
    /* ----------------------------------------------------------------------
    section03
    ----------------------------------------------------------------------  */
    #section03 .sectiontitle{  margin-left:0;}

    #section03{
        width: 640px;
        height: 2400px;
        background:url(../images/section/section03_sp.png) no-repeat center bottom;
    } 
    
    #section03 .mg60top{    margin: 30px 0 630px -20px !important;}
    #section03 .mg20top{margin-left: 0;}
    
    /* ----------------------------------------------------------------------
    section04
    ----------------------------------------------------------------------  */
    #section04 .frame{
        height: 1290px;
        background:url(../images/section/frame04_sp.png) no-repeat center top;        
    }

    
    /* ----------------------------------------------------------------------
    footer
    ---------------------------------------------------------------------- */
    #button_campaign .opacityeffect,
    #button_campaign .opacityeffect img{
    width: 620px;
    height:114px;
    }

    
    #button_officialsite img{
        width: 218px;
        height: 160px;
    }
}