/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015/10/19, 22:46:13
    Author     : monoitatsuya
*/

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

/* ----------------------------------------------------
 
    position
 
---------------------------------------------------- */
.center-position-sp{
    margin: 0 auto;
}



/* ----------------------------------------------------
 
    text
 
---------------------------------------------------- */
.ac {text-align: center !important;}
.ar {text-align: right !important;}
.al {text-align: left !important;}
 
.bold{font-weight:bold !important;}
 
.font10{font-size:10px !important;}
.font11{font-size:11px !important;}
.font12-sp{font-size:12px !important;}
.font13{font-size:13px !important;}
.font14{font-size:14px !important;}
.font15-sp{font-size:15px !important;}
.font16{font-size:16px !important;}
.font17{font-size:17px !important;}
.font18-sp{font-size:18px !important;}
.font19{font-size:19px !important;}
.font20-sp{font-size:20px !important;}
.font21{font-size:21px !important;}
.font22{font-size:22px !important;}
.font23{font-size:23px !important;}
.font24{font-size:24px !important;}
.font40-sp{font-size:40px !important;}
.font42-sp{font-size:42px !important;}
.font48-sp{font-size:48px !important;}

p { 
    line-height: 1.5em;
    font-size: 14px !important;
}

.gray-color{color: #7c7d7d;}

.br-sp{
    display:block;
}

.hidden-sp{
    display: none !important;
}

body{
    font-family: 
        "Hiragino Maru Gothic ProN",
        "ヒラギノ丸ゴ Pro", 
        "Meiryo", 
        "メイリオ", 
        "MS PGothic", 
        "MS Pゴシック", 
        "Webフォント", 
        sans-serif;
}

.space1-sp{letter-spacing: 1px !important;}

/* ----------------------------------------------------
 
    float
 
---------------------------------------------------- */
.fr {float: right !important;}
.fl {float: left !important;}
 
.clear {clear: both;}
 
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
 
.clearfix {
  min-height: 1px;
}
 
* html .clearfix {
  height: 1px;
  /*Â¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
 
/* ----------------------------------------------------
    clearfix の代用
    <div class="hr"><hr /></div>
---------------------------------------------------- */
 
div.hr { clear:both; }
div.hr hr { display:none; }
 
/* ----------------------------------------------------
 
    margin
 
---------------------------------------------------- */
 
.mt00 { margin-top:  0px !important; }
.mt05-sp { margin-top:  5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15-sp { margin-top: 15px !important; }
.mt20-sp { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30-sp { margin-top: 30px !important; }
.mt35-sp { margin-top: 35px !important; }
.mt40-sp { margin-top: 40px !important; }
.mt50-sp { margin-top: 50px !important; }
.mt60-sp { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80-sp { margin-top: 80px !important; }
.mt90-sp { margin-top: 90px !important; }
.mt100-sp { margin-top: 100px !important; }
.mt200-sp { margin-top: 200px !important; }
 
.mr00 { margin-right:  0px !important; }
.mr05 { margin-right:  5px !important; }
.mr10-sp { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
 
.mb00 { margin-bottom:  0px !important; }
.mb05-sp { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
 
.ml00 { margin-left:  0px !important; }
.ml05 { margin-left:  5px !important; }
.ml10-sp { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
 
/* ----------------------------------------------------
 
    padding
 
---------------------------------------------------- */
 
.pt00 { padding-top:  0px !important; }
.pt05 { padding-top:  5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt200 { padding-top: 200px !important; }
 
.pr00 { padding-right:  0px !important; }
.pr05 { padding-right:  5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
 
.pb00 { padding-bottom:  0px !important; }
.pb05 { padding-bottom:  5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb150 { padding-bottom: 150px !important; }
.pb200 { padding-bottom: 200px !important; }
.pb300 { padding-bottom: 300px !important; }
.pb350-sp { padding-bottom: 350px !important; }
.pb400 { padding-bottom: 400px !important; }
 
.pl00 { padding-left:  0px !important; }
.pl05 { padding-left:  5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }

/*-------------------------------------------------------------------
 
  width
 
-------------------------------------------------------------------*/
.w50{ width: 50px !important; }
.w100{ width: 100px !important; }
.w166-sp{ width: 166px !important; }
.w200-sp{ width: 200px !important; }
.w220-sp{ width: 220px !important; }
.w250-sp{ width: 250px !important; }
.w260-sp{ width: 260px !important; }
.w280-sp{ width: 280px !important; }
.w320-sp{ width: 320px !important; }
 
/*-------------------------------------------------------------------
 
  form
 
-------------------------------------------------------------------*/
 
.form_small {
    width:50px;
    height:14px;
    font-size:12px;
}
.form_middle {
    width:120px;
    height:14px;
    font-size:12px;
}
.form_long {
    width:260px;
    height:14px;
    font-size:12px;
}

/*-------------------------------------------------------------------
 
  img
 
-------------------------------------------------------------------*/

.img-responsive-overwrite{
    margin: 0 auto;
}

.img-center{
    width:54px;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-30px;
}



/*-------------------------------------------------------------------
 
  background
 
-------------------------------------------------------------------*/
body {
    margin:0; padding:0;
    background-color : #ffffff;
    background-image:url(../img/background_gray.png);
    background-size: 10px 700px;
    background-position:left 540px;
    background-repeat:repeat-x;
}

.background_white {
    background-color : #ffffff;
}

.background_gray {
    background-color : #f0f0f0;
}

/*-------------------------------------------------------------------
 
  block
 
-------------------------------------------------------------------*/
.block_left{
width:240px;
}

.block_right{
width:240px;
}

.center-block-sp{
    display:block;
    margin-right:auto;
    margin-left:auto
}

/*-------------------------------------------------------------------
 
  textbox
 
-------------------------------------------------------------------*/
.inputBox{
    border:0;
    padding:9px;
    font-size:1.1em;
    border:none;
    outline:none;
    width:260px;
    border-radius: 8px;
}
 
.inputBox:focus{
    border:none;
    outline:none;
    /*color:#00aced;*/
    color: #000000;
    box-shadow: 0 2px 13px 0 rgba(0,0,0,0.08);
}

.inputBox-l{
    border:0;
    padding:9px;
    font-size:1.1em;
    line-height: 1.5em;
    border:none;
    outline:none;
    width:260px;
    height: 160px;
    border-radius: 8px;
    resize: none;
}
 
.inputBox-l:focus{
    border:none;
    outline:none;
    color: #000000;
    box-shadow: 0 2px 13px 0 rgba(0,0,0,0.08);
}


/*-------------------------------------------------------------------
 
  slider
 
-------------------------------------------------------------------*/
.sliders{
    margin-top: 60px;
    width: 166px;
    height: 260px;
}

/*-------------------------------------------------------------------
 
  iphone-frame
 
-------------------------------------------------------------------*/
.iphone-img{
    position: relative;
    height: 470px;
}

.iphone-frame{
    width: 200px;
    position:absolute;
    /*top: 0px;*/
    left:50%;
    margin-left:-100px;
}


/*-------------------------------------------------------------------
 
  sns
 
-------------------------------------------------------------------*/

.twitter-color {
    background-color: #00aced;
}

.facebook-color {
    background-color: #3a589e;
}

.sns-off−color {
    background-color: #e7e7e7;
    cursor: auto !important;
    opacity: 1.0 !important;
}

.sns-link {
    cursor: pointer;

    width: 60px;
    height: 60px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
}

.sns-link img {
    width: 40px;
    margin: 10px;
}

.hover {
    opacity: 0.80 ;
}

/*-------------------------------------------------------------------
 
  mail
 
-------------------------------------------------------------------*/
.mail_form {
    position: relative;
}

.send-button {
    cursor: pointer;
}

.send-balloon {
    display: none;
    opacity: 0;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left:50%;
    margin-left:-100px;
    z-index: 500;
}

.send-balloon img {
    width: 200px;
}

/*-------------------------------------------------------------------
 
  description
 
-------------------------------------------------------------------*/

.description-sp p {
    margin: 0;
    line-height: 2.2em !important;
}


/*-------------------------------------------------------------------
 
  slick-dots-sp
 
-------------------------------------------------------------------*/

.slick-dots li button:before{
    font-size: 10px !important;
}

}