@charset "utf-8";

/****共通
*******************************************************/

html,body{
     margin:0;
     padding:0;
  font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
     font-size:16px;
     color:#000;
     height: 100%;
}



div,p,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,img{
     margin:0;
     padding:0;
}

ul,li{list-style:none;}

img {max-width : 100%}

.inner {
  width: 80%;
  margin: 0 auto;
}

/* ----------------------------------------
 * header
 * ---------------------------------------- */
#header #logo{
  text-align: center;
  margin: 30px 0;
}

#main .inner{
  width: 100%;
/*  min-width: 1200px;*/
  margin: 0 auto;
}

#main img{
  width: 100%;
/*  width: 1200px;
  height: 466px;*/
  text-align: center;
}

/* ----------------------------------------
 * about
* ---------------------------------------- */
#about{
  width:90%;
  margin:30px 5%;
  background-size: cover;
  background-image: url(img/about_bg01.jpg);
  background-repeat: no-repeat;
  
 }
#about .inner{
  text-align: left;
  padding:40px 0;
}

#about h3{
text-align:center;
}
#about h2{
  padding-top: 30px;
  text-align: center;  
  padding-bottom: 40px;
}
 #about h2 img{
  width: auto;
  height: 100px;
 }

#about .inner{
  width: 90%;
}
 #about h3{
  font-size: 30px;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  line-height: 1.7;
  padding-top: 60px;
  padding-bottom: 40px;
 }

 #about p{
  padding: 20px 0;
  font-size: 23px;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  font-weight: 600;
  line-height: 1.7;
 }


/* ----------------------------------------
 * message2
* ---------------------------------------- */
#message2{
  width:90%;
  margin:30px 5%;
  background-size: cover;
  background-repeat: no-repeat;
  
 }
#message2 .inner{
  text-align: left;
  padding:20px 0;
}

#message2 h2{
  padding-top: 25px;
  padding-bottom: 40px;
  font-size:30px;
}

#message2 .inner{
  width: 90%;
}
 #message2 h3{
  font-size: 22px;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  line-height: 1.7;
  padding-top: 60px;
  padding-bottom: 10px;
 }

 #message2 p{
  padding:0;
  font-size: 13px;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  font-weight: 600;
  line-height: 1.7;
 }
.massagetitle{
 padding:0 5%;
 overflow:hidden;
 text-aling:left;
 	border-bottom:2px solid #333333;
 }

/* ----------------------------------------
 * message
* ---------------------------------------- */
#message{
  width:90%;
  margin:30px 5%;
  background-size: cover;
  background-repeat: no-repeat;
 }

#message .inner{
  text-align: left;
  padding:40px 0;
}

#message h2{
  padding-top: 30px;
  padding-bottom: 20px;
}

#message h4{
padding-top:10px;
 margin-left:30px;
}

#message p{
margin-left:30px;
margin-right:30px;
padding-top:10px;
}

#month {
 float:right;
 padding-left:30px;
}
#name {
padding-top:60px;
 float:right;
}


.clear {
    clear:both;　/*floatの解除、ここがポイント*/
}
#pic img{
width:20%;
}
 #message p{
  padding: 20px 0;
  font-size: 23px;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  font-weight: 600;
  line-height: 1.7;
 }

/* ----------------------------------------
 * banner
 * ---------------------------------------- */
 .subtitle{
 padding:0 5%;
 overflow:hidden;
 	border-bottom:2px solid #333333;
 }
 .subtitle h3{
  float:left;
 }
 .subtitle h4{
  float:right;
 }
 .banner{
  float: left;
  width: 40%;
  margin: 0 5%;
  padding-top: 30px;
 }
 .banner2{
  width: 40%;
  margin: 0 auto;
  padding-top: 30px;
 }

/* ----------------------------------------
 * footer
 * ---------------------------------------- */

#footer {
/*  height: 150px;*/
width: 100%;
clear: both;
padding-top: 20px;
}

#footer .copyright {
  text-align: center;
 /* padding-top: 60px;
  padding-bottom: 40px;*/
  font-size: 15px;
  font-weight: bold;
/*  color: rgb( 128, 128, 128 );*/
  line-height: 1.818;
  font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
/*#footer .copyright a{
  text-decoration: none;
  color: rgb( 128, 128, 128 );
}*/
#footer .copyright img{
  height: 20px;
  width: auto;
  vertical-align: top;
}

/* ----------------------------------------
 * hidden
 * ---------------------------------------- */

#hidden {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  top:0;
  display: none;
}

#hidden .navi {
  height: 90px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

#hidden .navi ul {
  list-style: none;
  width: 100%;
  padding-top: 20px;
}

#hidden .navi li {
  /*margin: 30px;*/
  float: left;
  width: 25%;
  text-align: center;
}

#hidden .navi a{
  display: inline-block;
  font-size: 18px;
  color: #333;
  font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  font-weight: bold;
}

#hidden .navi a:hover img{
  opacity: 0.6;
}

#footer .fb-page {
  text-align: center;
  align:center;
  margin-left: 250px;

}

.facebook-page-plugin{
  text-align: center;
}

/* ----------------------------------------
 * top
 * ---------------------------------------- */
 #header{
  height: 150px;
 }
 #header img{
  height: 150px;
 }
#message h5{
margin:30px;
}
@media (max-width:768px){
  #about h2{
    padding-top: 30px;
  }
  #about h3{
    font-size: 20px;
  }
  #about p{
    font-size: 16px;
  }
  .banner{
    padding-top: 20px;
    width: 90%;
    margin: 0 5%;
    
  }
  .banner2{
    padding-top: 20px;
    width: 90%;
    margin: 0 5%;
    
  }
  #name {
 float:right;
 padding-top:20px;
}

  #message h2{
    padding-top: 30px;
  }
  #message h3{
    font-size: 20px;
  }
  #message p{
   margin:10px;
    font-size: 16px;
  }
  .banner{
    padding-top: 20px;
    width: 90%;
    margin: 0 5%;
    
  }
  #pic img{
  width:90%;
  }

    /*header menu*/
  　/*nav要素は絶対位置指定にして、ビューの外側に置いて見えなくします。
  　　nav の中の ul li は横並びを解除して縦組みにレイアウトし直します。*/
  header nav {
      position: absolute; /*bodyに対しての絶対位置*/
      right:0;
      top: -300px; /*通常時はビュー外*/
      background:rgba(255,255,255,.7);
      width:50%;
      padding:0 10px;
      -webkit-transition:.5s ease-in-out; /*transitionで動きを*/
      -moz-transition:.5s ease-in-out;
      transition:.5s ease-in-out;
      text-align:left}
  header ul {margin:0}
  header ul li {
      display:block;
      margin:0;
      border-bottom:dotted 1px #fff;
      line-height:3}
  header ul li a {display:block}
  header ul li::after {content:''}
  header ul li:last-child {border-bottom:none}
   
  /* Toggle(Button) */
  /*display:noneだったボタンを display:blockにして表示します*/
  #navToggle {display:block}
   
  /* Click Toggle(Button) */
  　/*ここから jQueryで header要素に付けた「.openNav」を利用します*/
  　/*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
  　/*最初のspanをマイナス45度に*/
  .openNav #navToggle span:nth-child(1) {
      top: 11px;
      -webkit-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      transform:rotate(-45deg)}
  　/*2番目と3番目のspanを45度に*/
  .openNav #navToggle span:nth-child(2),
  .openNav #navToggle span:nth-child(3) {
      top: 11px;
      -webkit-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      transform:rotate(45deg)}
   
  /*header menu*/
  　/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
  .openNav nav {
      -moz-transform: translateY(351px);
      -webkit-transform: translateY(351px);
      transform: translateY(351px)}
  
}
#footer .sns{
  text-align:center;

}
#footer .sns img{
  height: 60px;
  width: auto;
  vertical-align: top;
}

/* ----------------------------------------
 * fbpage
* ---------------------------------------- */
#fbpage .inner{
  text-align: center;
  padding-top:50px;
}

#fbpage{
  clear: both;
  margin-bottom: 20px;
  height: 350px;
}

#fbpage h2{
  padding-top: 20px;
  padding-bottom: 20px;
}
.fair{
margin-top:20px;
margin-bottom:30px;
}

.artisan{
  background-size: cover;
  background-image: url(img/about_bg01.jpg);
  background-repeat: no-repeat;

 }
 
 .artisan h2{
 padding-top:20px;
   margin-top:20px;
margin-bottom:30px;
 }
 
 .left_photo{
 float:left;
 width:40%;
 padding-right:30px;
 }
 .center_photo{
 width:35%;

margin: 0 auto;
 }
 .right_photo{
 float:right;
 width:40%;
 padding-left:30px;
 }
 
 .space{
 padding-bottom:100px;
 }
 
  .space_top{
 padding-top:100px;
 }
 @media screen and (max-width: 480px) {
 .left_photo{
 width:100%;
margin: 0 auto;
 }
 .center_photo{
 width:100%;
margin: 0 auto;
 }
 .right_photo{
 width:100%;
 padding-left:20px;
 margin: 0 auto;
 }
  .space{
 padding-bottom:50px;
 }
 }
 
#christmas{
background-color:#B81C22;
color:#FFFFFF;
font-size:19px;
}