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

  /*--------------------------------------------
  サイト基本設定　ここの設定はサイト依存
  --------------------------------------------*/
  
  /* フォントファミリーを指定 */
  body, html, input, textarea {
  font-family: "メイリオ", Meiryo, "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Sans", 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic Pro, Hiragino Kaku Gothic ProN, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  } 
  

  /*  全体の設定 */

  body {
  min-width: 100%; /* 画面の最小幅を指定 */
  color: #4d4e4e; /* 文字色を指定 */
  font-size: 14px; /* フォントサイズを指定 */
  line-height: 1.5; /* 行の高さを指定 */
  letter-spacing: 0.05em; /* 文字間隔を指定 */
  width: 100%; /* 画面の幅を指定 */
  font-family: "メイリオ", Meiryo, "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Sans", 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic Pro, Hiragino Kaku Gothic ProN, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* フォントファミリーを指定 */
  }

  body {
  -webkit-text-size-adjust: 100%; /* Webkitベースのブラウザで、文字サイズの調整を有効にする */
  }

  a {
  text-decoration:none; /* 下線を消去 */
  color:#4d4e4e; /* リンクの色を指定 */
  }

  a[href^="tel"]{
  color:inherit; /* 電話番号のリンクの色を継承 */
  }

  table {
  width:100%; /* 表の幅を100%に設定 */
  }

  img {
  max-width: 100%; /* 画像の最大幅を100%に設定 */
  height:auto; /* 画像の高さを自動に設定 */
  }

  /* clearfix */

  .cf:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  }

  :root .cf::after { /* IE9用 */
  content: ""\9;
  clear: both\9;
  display: block\9;
  height: 0\9;
  }

  .for_pc {
  display:none; /* PC向けの表示を非表示にする */
  }

  /*--------------------------------------------
   ヘッダー
  --------------------------------------------*/	
  #header {
	  border-bottom: solid 1px #dadde0; /* ヘッダーの下部に1pxの境界線を追加 */
	  color: #4d4e4e; /* ヘッダー内のテキストカラーを指定 */
	  padding: 0; /* ヘッダーの余白をゼロに指定 */
  }

  #header h1 {
	  text-align:center; /* ヘッダーの中央にタイトルを配置 */
  }

  #header h1 a {
	  display: block; /* タイトルをブロック要素として表示 */
  }

  #header h1 a img{
	  width:auto; /* タイトルの画像の幅を自動調整 */
	  height:100px; /* タイトルの画像の高さを100pxに指定 */
  }	

  #header .hdr_right {
	/* 特にスタイルを指定しない */
  }

  #header #hdr_sp{
	  padding:10px; /* スマホ版ヘッダーの余白を10pxに指定 */
  }	

  #header #hdrInner {
  	width: 1200px; /* ヘッダーの幅を1200pxに指定 */
  	margin: 0 auto; /* ヘッダーを中央に配置 */
  }

  #header .secinner {
  	margin-bottom: 20px; /* セクション間の余白を20pxに指定 */
  }

  #header .head_box h1{
	  text-align: center; /* タイトルを中央に配置 */
  }

  #header .head_box .catch{
	float:left; /* キャッチフレーズを左に寄せる */
	padding-top: 100px; /* キャッチフレーズの上部に100pxの余白を追加 */
	width:33%; /* キャッチフレーズの幅を33%に指定 */
  }

  #header .head_box .logo {
	  width:33%; /* ロゴの幅を33%に指定 */
  }

  #header .head_box .logo img {
	  width:200px; /* ロゴ画像の幅を200pxに指定 */
  }

  #header .head_box .info{
	/* 特にスタイルを指定しない */
  }

  #header .head_box .info ul{
	/* 特にスタイルを指定しない */
  }

  #header .head_box .info ul li{
  	/* 特にスタイルを指定しない */
  }

  #header .head_box .info ul .text{
  	font-weight:bold; /* テキストの太さをboldに指定 */
  	color: #04a67e; /* テキストカラーを指定 */
  	padding: 10px 10px 10px 0; /* テキストの余白を指定 */
  }

  #header .head_box .mail {
  	font-size: 14px; /* メールアドレスのフォントサイズを14pxに設定 */
	  font-weight: bold; /* メールアドレスに太字を設定 */
  	text-align: center; /* メールアドレスを中央揃えに設定 */
	  margin-bottom: 20px; /* メールアドレスの下に20pxの余白を追加 */
	  float: right; /* メールアドレスを右寄せに設定 */
  }

  #header .head_box i {
	  margin-right: 5px; /* アイコンとテキストの間に5pxの余白を追加 */
	  font-size: 18px; /* アイコンのフォントサイズを18pxに設定 */
  }


/*--------------------------------------------
   ハンバーガーメニュー
--------------------------------------------*/
	
  #header #hdr_sp .hdr_right #menu_btn {
   display: block;  /* メニューボタンを表示する */
    position: absolute;  /* 絶対位置指定 */
    top: 23px;  /* 上から23pxの位置に配置 */
    right: 4%;  /* 右から4%の位置に配置 */
   width: 28px;  /* 幅は28px */
   padding: 0;  /* paddingは0 */
  }

  #header #hdr_sp .hdr_right #menu_btn .b1,
  #header #hdr_sp .hdr_right #menu_btn .b2,
  #header #hdr_sp .hdr_right #menu_btn .b3 {
   width: 28px;  /* 幅は28px */
    height: 4px;  /* 高さは4px */
    margin: 0 auto;  /* 中央揃え */
    -webkit-transition-timing-function: ease-in-out;  /* WebKitブラウザ向けのtransition-timing-function指定 */
    -moz-transition-timing-function: ease-in-out;  /* Mozilla Firefox向けのtransition-timing-function指定 */
    transition-timing-function: ease-in-out;  /* トランジションタイミング関数を指定 */
    -webkit-transition-duration: 0.3s;  /* WebKitブラウザ向けのtransition-duration指定 */
    -moz-transition-duration: 0.3s;  /* Mozilla Firefox向けのtransition-duration指定 */
    transition-duration: 0.3s;  /* トランジションが実行される時間を指定 */
    -webkit-transition-property: all;  /* WebKitブラウザ向けのtransition-property指定 */
    -moz-transition-property: all;  /* Mozilla Firefox向けのtransition-property指定 */
    transition-property: all;  /* トランジションを実行するプロパティを指定 */
    background-color: #128754;  /* バーガーメニューの線の色を指定 */
  }

  #header #hdr_sp .hdr_right #menu_btn .b2,
  #header #hdr_sp .hdr_right #menu_btn .b3 {
    margin: 5px auto 0;  /* メニューボタンのバーを上下に5pxずつ移動 */
  }

  .drawer-open #header #hdr_sp .hdr_right #menu_btn .b1,
  .drawer-open #header #hdr_sp .hdr_right #menu_btn .b2,
  .drawer-open #header #hdr_sp .hdr_right #menu_btn .b3 {
    background-color: #128754;  /* バーガーメニューの線の色を変更 */
  }

  .drawer-open #header #hdr_sp .hdr_right #menu_btn .b1 {
    -webkit-transform: rotate(225deg) translate3d(-5px, -5px, 0);
    -moz-transform: rotate(225deg) translate3d(-5px, -5px, 0);
    -ms-transform: rotate(225deg) translate3d(-5px, -5px, 0);
    transform: rotate(225deg) translate3d(-5px, -5px, 0)
  }

  .drawer-open #header #hdr_sp .hdr_right #menu_btn  .b2 {
   opacity: 0;
   -moz-opacity: 0;
   filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
  }

  .drawer-open #header #hdr_sp .hdr_right #menu_btn .b3 {
    -webkit-transform: rotate(-225deg) translate3d(-7px, 8px, 0);
    -moz-transform: rotate(-225deg) translate3d(-7px, 8px, 0);
    -ms-transform: rotate(-225deg) translate3d(-7px, 8px, 0);
    transform: rotate(-225deg) translate3d(-7px, 8px, 0)
  }

  .drawer-nav {
   background: #fffef0; /* ナビゲーションバーの背景色を設定 */
  }

  .drawer-menu {
    padding: 10%; /* ナビゲーションバー内のリストメニューのpaddingを設定 */
  }

  .drawer-menu li{
	  border-bottom:dotted 3px #4d4e4e; /* リストメニューの各項目の下に点線の境界線を引く */
  }

  .drawer-menu li a{
	  color:#4d4e4e; /* リストメニューの各項目の文字色を設定 */
	      display: inline-block; /* リストメニューの各項目をインラインブロックとして表示 */
  }




  /*--------------------------------------------
	  TOPへ戻るボタン
  --------------------------------------------*/

  #totop {
    position: fixed; /* 要素を画面固定位置に配置する */
    bottom: 10px; /* 要素を画面下端から10px上に配置する */
    right: 10px; /* 要素を画面右端から10px左に配置する */
  }

  #totop a {
    height: 70px; /* 要素の高さを70pxに指定する */
    width: 70px; /* 要素の幅を70pxに指定する */
    display: inline-block; /* 要素をインラインブロック要素として表示する */
    opacity: 0.8; /* 要素の透明度を0.8に指定する */
  }

  /*--------------------------------------------
   フッター
  --------------------------------------------*/	

  /* #footerセレクタ */
  #footer {
	  background:url(../Image/bg03.jpg); /* 背景画像の設定 */
	  color: #fff; /* フッターの文字色を白に設定 */
	  text-align: center; /* 中央揃えに設定 */
	  padding: 30px 20px 0; /* 上下左右の余白を設定 */
	  background-size: cover; /* 背景画像を全画面表示にする */
  }

  /* ロゴ画像の枠のクラス */
  #footer .img_box{
	  width: auto; /* 横幅の自動調整 */
	  height: 60px; /* 縦幅を60pxに固定 */
	  margin-bottom:10px; /* 下マージンを10pxに設定 */
  }

  /* テキストのクラス */
  #footer .txt_box{
	  color:#fff; /* 文字色を白に設定 */
	  font-size:12px; /* フォントサイズを12pxに設定 */
  }	

  /* リストのクラス */
  #footer .list_box{
	  display:none; /* リストを非表示にする */
  }	

  /* コピーライトのセレクタ */
  #footer #copy{
	  font-size:10px; /* フォントサイズを10pxに設定 */
	  color:#fff; /* 文字色を白に設定 */
  }

  /* フッター内部のdiv要素 */
  div#ftrInner {
	  margin-bottom: 20px; /* 下マージンを20pxに設定 */
  }

	
	
}