@charset "utf-8";

@media only screen and (min-width: 341px) and (max-width: 640px){
img{
  max-width: 100%;
  height: auto;
  width /***/:auto;　
}

～以下、画面の横幅が640pxまでの場合のスタイル記入～

#headerbox{
  width : 100%;
  height : 90px;
}

#header{
  color : #663715;
  height : 80px;
  font-size : 12px;
}

#head1{
  margin-top: 5px;
  height : 90px;
  float : left;
  text-align : center;
}

#head1 img{
  height : 40px;
}

#head01,
#head02,
#head03{
  display: none;
}


#head2{
  width : 1px;
  height : 70px;
  float : left;
}


#head3{
  display: none;
}

#head4{
  padding-right: 1px;
  padding-top: 10px;
  float : right;
  font-family : HGP平成明朝体W9;
  color : #666666;
  text-align : right;
}
#head4 img{
  padding-left: 1px;
  float: left;
}

#mokuji{
  padding-left: 5px;
  font-size: 12px;
  color: #7a5121;
}

#mokuji a{
  text-decoration: none;
}

#mokuji a:hover{
  opacity: 0.6;
}


#main-barbox{
  margin : 0px auto;
  width : 100%;
  clear : both;
}

#main-bar{
  width : 100%;
  margin-top : 0px;
  margin-right : auto;margin-left : auto;
 }

#campaign-box{
  margin : 0px;
  width : 100%;
  clear : both;
  background-color: #f7f3f0;
}

#campaign{
    background-color : transparent;
    height : 100%;
    margin-top : 0px;
    width : 100%;
    margin-right : auto;margin-left : auto;
    text-align : center;
    border-collapse: collapse;
}

.newsmoji td{
  font-weight : normal;
  color : #666666;
  line-height: 1.8;
 }

.campaign-title{
  text-align : center;
  background-color : transparent;
  width : 100%;
  clear : both;
}

.campaign-title th{
  font-weight : normal;
  color : #7a5121;
  font-size : 22px;
  padding-top : 5px;
  letter-spacing : 1px;
}

.campaign-title td{
  font-weight : normal;
  color : #7a5121;
  font-size: 12px;
}

.campaign-moji th{
  padding-top : 10px;
  padding-left : 6px;
  padding-right : 0px;
  padding-bottom : 5px;
  color : #400000;
  background-color : transparent;
  font-weight : normal;
  text-align : right;
}

.campaign-moji td{
  padding-top : 10px;
  padding-left : 6px;
  padding-right : 0px;
  padding-bottom : 5px;
  color : #666666;
  background-color : transparent;
  font-weight : normal;
  text-align : right;
}

.campaign-moji{
  width : 100%;
  font-size : 15px;
}

#setbox{
  margin: auto;
  width: 100%;
  background-color: #fff;
}

#set{
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
}

.tablet_img{
  width: 100%;
}

#sample{
  padding-top: 20px;
}

.thumbnail{
}

.hoge {
    width: 130px;
    height: 130px;
    margin: 5px;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

#sample img:hover{
  opacity: 0.5;
  text-decoration : none;
      -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}

.setumei{
  font-size: 12px;
  color: #000;
  text-align: left;
  margin-left: 15%;
  margin-top: 5px;
}

.campaign-title1 th{
  font-weight : normal;
  color : #e6166a;
  font-size : 22px;
  padding-top : 5px;
 }

.campaign-title1 td{
  font-size: 12px;
  font-weight : normal;
  color : #e6166a;
}

.campaign-title1{
  text-align : center;
  background-color : transparent;
  width : 100%;
  clear : both;
}

#setbox1{
  margin: auto;
  width: 100%;
  background-color: #fff;
}

#set1{
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
  background-color: #fff;
  font-size: 13px;
}

#shichigosan-set{
  text-align : center;
  background-color : transparent;
  width : 100%;
  clear : both;
}

#shichigosan-set p{
  clear: both;
  text-align: left;
  font-size: 13px;
  padding-left: 30px;
  padding-top: 20px;
   color: #7c7c7c;
}

#shichigosan-set img{
  padding-top: 10px;
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}  

#shichigosan-set img:hover{
  opacity: 0.5;
  text-decoration : none;
}

#shichigosan-set1 img{
 display: none;
}  

#tanpin_link{
  text-align: center;
  float: right;
  width: 250px;
  height: 25px;
  clear: both;
  letter-spacing: 1px;
  color: #7c7c7c;
  border-radius: 5px;
  background-color: #dbdbdb;
  padding-top: 5px;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 14px;
}

#tanpin_link a{
  text-align: center;
  font-size: 14px;
  text-decoration: none;
 color: #7c7c7c;
}

#option_box{
  margin: auto;
  width: 100%;
  background-color: #fff;
}

#option{
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
}

#kimono_infobox{
  margin: auto;
  padding-top: 20px;
  text-align: center;
}

#kimono_info{
  margin: auto;
  width : 100%;
  padding-top: 10px;
  text-align: left;
  color: #7c7c7c;
  font-size: 14px;
}


#kimono_info h2{
 text-align: center;
 color: #7c7c7c;
}

#kimono_info h6{
 text-align: right;
 color : #7c7c7c; 
 text-decoration: none;
 font-size: 14px;
 font-weight : normal;
    margin-top : 1px;
    margin-right : 20px;
  }

#muryou_box{
  margin-top: 10px;
  border-radius: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  background-color: #f1fff2;
  padding-bottom: 20px;
 width: 315px;
 height: 50px;
 text-align: center;
 border-style : solid;
 border-color : #77b392;
 border-width : 1px;
  }  

#hair_box{
  margin: auto;
  width: 100%;
}

#hair{
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
}

#hair_infobox{
  margin: auto;
  padding-top: 20px;
  text-align: center;
}

#hair_info{
  margin: auto;
  width : 100%;
  padding-top: 10px;
  text-align: left;
  color: #7c7c7c;
  font-size: 14px;
}


#hair_info h2{
 text-align: center;
 color: #7c7c7c;
}

#hair_info h6{
 text-align: right;
 color : #7c7c7c; 
 text-decoration: none;
 font-size: 14px;
 font-weight : normal;
    margin-top : 1px;
    margin-right : 20px;
  }

#hair_info p{
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  }

#price_box{
  clear: both;
  margin: auto;
  width: 100%;
  text-align: center;
}

#price {
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
}

.price-moji1 td{
  padding-top : 1px;
  padding-left : 6px;
  padding-right : 0px;
  padding-bottom : 1px;
  color : #666666;
  font-size: 12px;
  background-color : transparent;
  font-weight : normal;
  text-align : right;
}

.price-moji,
.price-moji_tablet,
.price-moji_smart{
  display: none;
}



#odekake_box{
  margin: auto;
  width: 100%;
  background-color: #fff;
}

#odekake{
  font-size: 14px;
  margin: auto;
  width : 100%;
  clear : both;
  padding-bottom : 10px;
}

#odekake p{
  margin-left: 5px;
  text-align: left;
  font-size: 13px;
  color: #8e8881;
}

#mainbox{
  display: block;
 margin-left: auto;
 margin-right: auto;
  width: 100%;
}

#newsbox1{
  display: block;
 margin-left: auto;
 margin-right: auto;
  width: 100%;
  background-color: #fff;
  border-radius: 30px 30px 30px 30px;
}

#photo{
 width: 320px;
 padding-top: 20px;
 margin-left: auto;
 margin-right: auto;
 align:center;
}

#main_pc,
#main_tablet{
  display: none;
}

#facebook_tablet{
  display: none;
}


#mapbox{
  clear: both;
  width : 100%;
  text-align : center;
}

#map{
    background-color : transparent;
    margin-top : 0px;
    width : 100%;
    margin-right : auto;margin-left : auto;
    text-align : center;
    border-collapse: collapse;
}

.smartmini{
display: none;
}

#gmapbox{
  clear: both;
  width : 100%;
  height : 500px;
  text-align : center;
}

#gmap{
  background-color : transparent;
  height : 480px;
  margin-top : 20px;
  width : 98%;
  margin-right : auto;margin-left : auto;
  text-align : center;
}

#footer{
  color : white;
  margin-right : auto;
  margin-left : auto;
}
#footer img{
  margin-right: auto;
  margin-left: auto;
}

#footerbox{
  display: block;
  margin: auto;
  clear : both;
  height: 1100px;
  background-color : #64402f;
}

#footerbottom-box{
  margin : 0px;
  width : 100%;
  clear : both;
  background-color : black;
}

#footbottom{
  color : white;
  height : 100px;
  width : 100%;
  margin-right : auto;margin-bottom : 0px;margin-left : auto;
  background-color : black;
  font-family : "Meiryo UI";
  font-size : 11px;
  font-weight : bold;
  text-align : right;
}

h1{
  font-family : "Meiryo UI";
  font-size : 7px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color : black;
}

#footer li{
  list-style-type : none;
  font-size : 13px;
  color : white;
  margin-top : 5px;
  margin-left : -10px;
  margin-bottom : 5px;
  letter-spacing : 1px;
  font-family : "Meiryo UI";
  text-decoration : none;
  line-height : 18px;
}

#child{
  float: left;
  clear: both;
  padding-top : 70px;
  padding-left: 10px;

  }

#family{
  float: left;
  padding-top : 70px;
  padding-right: 10px;
}

#footmenu{
  float : left;
  clear : none;
  padding-top : 20px;
  padding-left: 10px;
}

#footer a:hover{
  opacity: 0.5;
  text-decoration : none;
}

#footer a{
  color: white;
  text-decoration : none;
}


#tel{
  float : left;
  color : white;
  margin-top : 5px;
  margin-left : 0px;
  margin-right : 10px;
  margin-bottom : 10px;
}

#footer-logo{
  margin-top : 10px;
  margin-right : 10px;
  margin-bottom : 20px;
}

#toiawase0{
  position: relative;
  left: 40%;
  clear : both;
  padding-top: 10px;
  padding-left: 10px;
}

#toiawase1{
  position: relative;
  left: 20%;
  clear : both;
  margin-top: -10px;
}
#toiawase2{ 
  position: relative;
  left: 50%;
  clear : both;
  margin-top:10px;
}

#telicon{
  padding-top: 10px;
  float : left;
}

#telnumber{
  padding-bottom: 10px;
  padding-top: 10px;
  float : left;
  font-size : 18px;
  margin-bottom : 10px;
  line-height: 25px;
}

.copyright{
  color : #959595;
  text-align : right;
  margin-right : 20px;
}

.campagin_smart{
  display: none;
  }

.in-main{
  width : 100%;
  font-size : 15px; 
  background-color : transparent; 
  color : fuchsia;
  margin-top : 5px;
  margin-left : 5px;
  margin-right : 5px;
  margin-bottom : 5px;
  clear : both;
}

.headmenu{
  text-align : right;
  width : 100%;
  clear : right;
  margin-top : 15px;
  height : 80%;
}


.photocamp1,
.photocamp2,
.photocamp3,
.photocamp4,
.photocamp5,
.photocamp6,
.photocamp7,
.photocamp8,
.photocamp9{ 
  margin-left: 3px;
  float: left;
}


.photocamp1 img,
.photocamp2 img,
.photocamp3 img,
.photocamp4 img,
.photocamp5 img,
.photocamp6 img,
.photocamp7 img,
.photocamp8 img,
.photocamp9 img{
  width: 150px;
  height:150px; 
}



.pagetop{
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
}
.pagetop a{
    display: block;
    font-size : 25px;
    text-decoration: none;
    padding: 10px 10px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.pagetop a:hover{
    display: block;
    text-decoration: none;
    padding:10px 10px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

#lean_overlay{
  position: fixed; z-index:100; 
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}
#div787{
  background: none repeat scroll 0 0 #FFFFFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  display: none;
  padding: 30px;
  width: 780px;
 }
.modal_close{
   
  position: absolute;
  top: 12px;
  right: 12px;
  display: block; 
  width: 14px;
  height: 14px; 
  background : url(../img/close.png) 0% 0% / auto auto repeat scroll padding-box border-box transparent;
  z-index: 2;
}
}