/*
Theme Name: st_web
Author: Yukari Kawahara
Description: 
Version: 1.0
License: Don't use.
*/


/*---------------------------------------
    FORM               
-----------------------------------------*/

select,input,textarea{
width:100%;
}

@media(min-width:768px) {
    body {
        padding-top: 100px;
    }
    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}


body {
  width: 100%;
  height: 100%;
  padding-top: 70px; 
  background: #edfdff;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  overflow-x: hidden;
  color: #002838;
}
body#others {
  background: #fff;
}
html {
  width: 100%;
  height: 100%;
}




@media (min-width: 768px) {
  p {
    margin: 0 0 35px;
    font-size: 17px;
    line-height: 1.8;
letter-spacing:0.05em;
  }
  #facts p {
  line-height: 1.4;
  letter-spacing:0;
  }
  #feeling p {
  font-size:16px;
  line-height: 1.9;
  }
  #concept p {
  font-size:19px;
  line-height: 1.9;
  }
}


a {
  color: #;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #;
  border-bottom:2px;
  background:none;
}
.light {
  font-weight: 400;
}

.sans-serif{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
}


/*---------------------------------------
    General               
-----------------------------------------*/
.container{text-align:;}
p,h4,h5{text-align:;}
.none{display:none;}
.right{text-align:right;}
.center{margin:0 auto; text-align:center;}
section{padding:60px 0;}

.fontL{
font-size:110%;
font-weight:bold;
}
.fontLL{
font-size:19px;
font-weight:bold;
line-height:2em;
}
.fontM{
font-size:14px;
}
/*---------------------------------------
  PAGE             
-----------------------------------------*/

section#page {font-size:16px;}


@media (min-width:768px) {
section#page #faq,
section#page_about .container,
section#contact .container{
width:896px;
margin:0 auto;
}

section#page_about_top,
section#page #faq,
#contact{
margin-top:80px;
  }

#about_box {
margin:30px;
padding:30px;
}
#about_box p{
margin:0!important;
padding:;
}
#about_box img{
vertical-align:middle;
}

#company #company_box{
margin:60px 30px 30px;
}
}





section#page #faq h1{
text-indent:-9999px;
}

section#page #faq h3,
#company h3,
#contact h2{
border-bottom:solid 1px #444;
padding-left:0.5em;
}

#faq_nav{
margin:20px 10px 30px 10px;
}
#faq_nav a{
margin:7px;
}

#faq_list th{
border:none;
font-size:18px;
padding-top:0.9em;
padding-bottom:2em;
}

#faq_list td{
border:none;
padding-top:0.9em;
padding-bottom:4em;
}


#faq_list .question{
width:53px;
height:53px;

text-indent:-9999px;
background:url(../image/faq_q.png) no-repeat top center ;
  }

#faq_list .answer{
width:53px;
height:53px;
text-indent:-9999px;
background:url(../image/faq_a.png) no-repeat top center ;
  }

#faq ul.np {
    padding: 0;
}

#faq ul.np li {
    list-style-type: none;
    margin: 50px 0 20px;
    padding: 0 0 5px 15px;
    border-bottom: 1px solid #ccc;
    border-left: 5px solid #0e68dc;
}

#faq ul.np p {
    margin-top: 3%;
    font-size: 0.9em;
}

#faq ul.np span {
    color: #ff0000;
}

section#page_about_top{
background:url(../image/about_top.jpg) no-repeat top center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:425px;
  }
  
section#page_about_top img{
margin-top:120px;
    -webkit-filter: drop-shadow(3px 0 2px rgba(0, 0, 0, 0.1));
}
#about_box{
background:rgba(200, 234, 255, 0.2);
padding:15px;
}


div#wanttotell{
margin:30px;
line-height:2em;
}

#company_box th{
text-align:right;
}
#company_box th,
#company_box td{
padding:1em;}

.contact_form{
margin:50px 40px;
line-height:2em;
text-align:center;
}
#contact p{
text-align:left;
}


/*---------------------------------------
  ABOUT             
-----------------------------------------*/

section#about{
background:url(../image/bg01.jpg) no-repeat top center ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }


#about #feeling{
  margin-top: 60px;
  padding-top: 30px;
  padding-bottom: 50px;
  background:url(../image/contC_bg.jpg) no-repeat bottom left #404e75;
  color:#fff;

}

/*---------------------------------------
  DETAIL             
-----------------------------------------*/
#details {
text-align:center;

}

#details .panel {
background-color: #fff;
border:solid 1px #f2becb;
width:;
}
#details .panel-heading{
border:none; background:none;
}
#details .panel-heading h4{
line-height:1.5em;
font-weight:;
}
#details .panel-body{
color:#ff4940;
border-top:solid 1px;

}
#details .panel-body p{
font-weight:bold;
font-size:21px;
}
/*---------------------------------------
  HOWTO             
-----------------------------------------*/

section#howto {
  background:url(../image/howto_bg.jpg) no-repeat center #e7e9e6;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section#howto p{
margin-bottom:2em;
font-size:17px;
}
.page-header{border:none;}


#monitor_30days{margin:30px 0;}
/*---------------------------------------
  FACTS             
-----------------------------------------*/

section#facts {
  background:#fff;
}
section#facts p{
font-size:90%;
margin:1em 0;
}
section#facts h5{
border:solid 1px;
padding:0.2em;
display:inline;
}
/*---------------------------------------
  CONCEPT             
-----------------------------------------*/

section#concept {
  background:url(../image/concept_bg.jpg) no-repeat center #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-bottom:500px;
}
section#concept p{
text-align:center;
color:404e75;
font-weight:;
line-height:2em;
}

@media (max-width:768px) {
section#concept {
padding-bottom:300px;
}
section#concept p{
text-align:left;
}
}
@media (max-width:480px) {
section#concept {
padding-bottom:30px;
}
}


/*---------------------------------------
  POLICY             
-----------------------------------------*/

ul.policy {
    width: 90%;
    margin: 3.0em auto 0;
    padding: 0;
    list-style-type: none;
}

ul.policy li {
    font-size: 1.4em;
    margin: 2.0em 0 1.2em;
    border-bottom: 1px dashed #ccc;
}


/*---------------------------------------
  LEGAL             
-----------------------------------------*/

table.legal {
  border-collapse: collapse;
  width: 100%;
  margin-top: 3.0em;
  font-size: 1.2em;
}
table.legal th,
table.legal td {
  padding: 2%;
  border: 1px solid #999;
}
table.legal th {
  background-color: #eee;
  text-align: center;
  width: 30%;
}

@media screen and (max-width: 400px) {
  table.legal {
    border-top: 1px solid #999;
  }
  table.legal td {
    display: block;
    text-align: center;
  }
  table.legal th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
  }
}



/*---------------------------------------
  NAV             
-----------------------------------------*/


.navbar-fixed-top .nav {
padding: 0 0 10px 0;
font-weight:bold;
font-size:19px;

}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}


#navtop{
border-left:1px solid;
}

nav{
background:#edfdff;
z-index:9999;
}
#others nav{
background:#fff;
}


@media (min-width: 768px) {
  .navbar-custom {
    padding: 30px 0 10px;
    border-bottom: none;
    letter-spacing: 1px;
    background: #edfdff;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

.navbar-fixed-top .nav {

}

.navbar-nav > li > a{
padding:10px 20px ;
color:#000;
border-right:solid 1px;
display:block;
}
}


/*---------------------------------------
  TOP section             
-----------------------------------------*/

.top{
margin-top:110px;
}

@media (max-width: 768px) {
.top{margin-top:100px;}
}

@media (max-width: 578px) {
.top{margin-top:40px;}
}

@media (max-width: 348px) {
.top{margin-top:60px;}
}

/*---------------------------------------
  BANNER             
-----------------------------------------*/


section#banner01 a {

}

section#banner01 a:hover {

    }


/*---------------------------------------
  contAB              
-----------------------------------------*/
#contA{
background:url(../image/contA_bg.png) no-repeat left top;
padding:0 10px;
}

#contB{
background:url(../image/contB_bg.png) no-repeat right top;
padding:0 10px;
}

#contA .panel,
#contB .panel{
border:solid 3px rgba(255, 255, 255, 0.3);
margin:135px 0 0 0;
padding:60px 45px;
background:rgba(255, 255, 255, 0.8);
}



@media (max-width: 980px) {

#contA,#contB{
border:solid 1px rgba(255, 255, 255, 0.0);
}
#contA .panel,
#contB .panel{
margin:135px 0 0 0;
padding:30px 15px;
}
}




#contA .panel {
}
#contA .panel-heading,
#contB .panel-heading{
border:none; background:none;
}


#contA .panel-body,
#contB .panel-body{
padding:0 10px;
}

#contA .panel-body p,
#contB .panel-body p{
padding:0 ;
margin:0;
}
h5.panel-title{
border:solid 1px;
display:inline;
padding:0.2em;
}


#contA,#contB{
margin:0;
}


#contA_h01 p,
#contB_h01 p{
margin:0;
font-weight:bold;
font-size:19px;
}




#parts_01{
background:url(../image/parts_01.png) no-repeat left top ;
border-radius: 74px;
height:148px;
width:148px;
}

#parts_02{
background:url(../image/parts_02.png) no-repeat left top;
border-radius: 74px;
height:148px;
width:148px;
}
#parts_03{
background:url(../image/parts_03.png) no-repeat left top ;
border-radius: 74px;
height:148px;
width:148px;
}

#parts_04{
background:url(../image/parts_04.png) no-repeat left top;
border-radius: 74px;
height:148px;
width:148px;
}





/*---------------------------------------
  ページトップへ             
-----------------------------------------*/

#arrow_top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}


#arrow_top a {
    background:rgba(0,40,56,0.8);
    color: #fff;
    width: 60px;
    height: 60px;
    padding: 4px 0;
    text-align: center;
    display: block;
    border-radius: 30px;
}
#arrow_top a:hover {
    text-decoration: none;
    background: rgba(0,40,56,0.5);
}

@media (max-width: 580px) {
#arrow_top {
    bottom: 10px;
    right: 10px;
}
#arrow_top a {
    width: 50px;
    height: 50px;
    padding: 4px 0;
    border-radius: 25px;
}
}

/*---------------------------------------
  slider            
-----------------------------------------*/
/* .viewer
------------------------- */
.viewer {
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.viewer ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.viewer ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}
.viewer ul li img {
    width: 100%;
}
 
/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 101;
}
.viewer .btnPrev {
    left: 10px;
    background: url(../image/btnPrev.png) no-repeat center center; 
}
.viewer .btnNext {
    right: 10px;
    background:  url(../image/btnNext.png) no-repeat center center;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.viewer ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.viewer ul {
    display: inline-block;
    overflow: hidden;
}




#pay,#delivery,#return {
    margin-top: -150px;
    padding-top: 150px;
}