body{
	background:#f3f3f3 url(../images/body_bg.gif) center top repeat-y;
	font:13px/20px "游ゴシック","メイリオ",Georgia, "Times New Roman", Times, serif;
	filter: sepia(50%);
}

a, a:link{
	color:#cf5e1b;
	text-decoration:none;
}
a:hover{
	color:#000;
}

/*wrap*/
#wrap{
	width:880px;
	margin:0 auto;
	padding:40px;
}


/*logo*/
#header #logo{
	width:200px;
	height:36px;
	text-indent:-999999px;
	float:left;
}

#header h1{
	margin:0 10px;
}

/*search*/
#search{
	float:right;
	width:auto;
}
#s{
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#c8c9be;
	padding:6px 30px 6px 8px;
	background:none;
	border:1px solid #f0f0ed;
	width:217px;
}
#s:focus{
	border:1px solid #d6d6d6;
	color:#000;
}
#search .go{
	position:absolute;
	margin:9px 0 0 -26px;
}

/*home*/
/*one column page or wide page*/
body#home #content,
body#gallery #content,
body#portfolio #content{
	width:100%;
	float:left;
	padding-bottom:20px;
	padding-top:8px
}

/*two column page*/
body#about #content, 
body#services #content,
body#clients #content,
body#blog #content,
body#news #content,
body#testimonial #content,
body#contact #content{
	float:left;
	width:580px;
	padding-top:8px;
	padding-bottom:20px;
}
#sidebar{
	float:right;
	width:260px;
	padding:12px 0 20px 0;
	color:#6d6e64;	
}


#features{
	/*height:450px;*/
	padding:0 0 10px 0;
	background:url(../images/lines_bg.gif) repeat-x bottom left;
	font-weight: bold;
}

.hide { display: none; }
.show { display: block; } 

.banner{
	text-align:left;
	background:#fff;
	height:390px;
	margin-top:0.063em;
	position:relative;
	text-align:left;
	width:100%;
}

.banner img{
	float:left;
	margin:0px 50px 0 0;
}


.banner h2{
	color:#0e0e0e;
	font:40px/45px normal Arial, Helvetica, sans-serif;
	margin:30px 0 10px 0;
}
.banner h2 strong{
	font-weight:bold;
	color:#de5e11;
}
.banner p{
	margin-bottom:20px;
	color:#6d6e64;
}
.banner .button a, .button a{
	float:left;
	padding:1px; 
	border:1px solid #ddddd7;
	text-decoration:none;
}
.banner .button a span, .button a span{
	float:left;
	display:block;
	padding:8px 14px;
	background:#de5e11;
	font:Georgia, "Times New Roman", Times, serif;
	color:#fff;
	text-transform:uppercase;
}
.banner .button{
	font-size:14px;
}
.button{
	margin-bottom:10px;
	font-size:12px;
}
.button a span{
	padding:4px 14px;
}
.banner .button a:hover, .button a:hover{
	border:1px solid #a8a89b;
	cursor:pointer;
}
.banner .button a:hover span, .button a:hover span{
	background:#a8a89b;
	cursor:pointer;
}

.feature_nav.selected{
	color:#3e2f2f;
}

a.feature_nav{
	padding-left:0.1875em;
}

#feature-select a{
	text-decoration:none;
}

#feature-select a.next{
	margin-left:0.25em;
	padding-left:0.375em;
}
#feature-select{
	color:#ded9ce;
	padding-top:1em;
	padding-bottom:40px;
	text-align:right;
	margin-right:0.6875em;
}
#content{
	color:#6d6e64;
}
#content h1, #content h2, #sidebar h2, 
#content h3, #sidebar h3,
#content h4, #sidebar h4, 
#content h5, #sidebar h5,
#content h6{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#content h1{
	color:#404135;
	font-size:30px;
}
#content h2{
	color:#404135;
	font-size:25px;
	padding-top:2px;
	background:url(../images/lines_bg.gif) repeat-x bottom left;
	margin-bottom:30px;
	padding-bottom:10px;
	float:left;
	width:100%;
}

#content h3{
	color:#404135;
	font-size:18px;
	line-height:26px;
	
}
#sidebar h3{
	background:url(../images/lines_bg.gif) repeat-x bottom left;
	font-size:18px;
	padding-left:10px;
	margin-bottom:20px;
	padding-bottom:10px;
	line-height:18px;
	color:#404135;
}


/*subscribe newsletter*/
#sidebar .block{
	padding-left:10px;
	padding-bottom:20px;
}

#sidebar blockquote p{
	font-style:italic;
}
#sidebar .subscribe .e{
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#c8c9be;
	background:none;
	border:1px solid #f0f0ed;
	width:205px;
	padding:6px 30px 6px 8px;

}
#sidebar .subscribe .e:focus{
	border:1px solid #d6d6d6;
	color:#000;
}
.subscribe .go{
	position:absolute;
	margin:10px 0 0 -30px;
}


/*column3*/
.column3, .column2{
	float:left;
	width:100%;
}
.column3 div, .column3 .first, .column2 div, .column2 .first{
	float:left;
	width:260px;
	margin-left:46px;
}
.column3 img, .column2 img{
	float:left;
	border:1px solid #c8c9be;
	padding:2px;
	margin-bottom:0px;
}
.column3 .first, .column2 .first{
	margin-left:0;
}



.subcontent{
	margin:20px 0 20px 0;
}

#footer{
	clear:both;
	padding:40px 0 0 0;
	width:880px;
	background:url(../images/lines_bg.gif) repeat-x top center;
}
#footer p{
	text-align:center;
	font-size:11px;
	color:#6d6e64;
	margin:0;
	padding:0;
}
#footer p a,
#footer p a:link{
	color:#383b1f;
}
#footer p a:hover{
	color:#383b1f;
}


em{
	font-style:italic;
}


.side_nav{
	margin-bottom:0px;
}
.latest_news, .blog, .popularpost{
	padding-bottom:20px;
}
.side_nav li, .latest_news li, .blog li, .popularpost li{
	display:block;
	margin:0;
	list-style:none;
}
.side_nav li a{
	display:block;
	width:210px;
	padding:8px 0 8px 10px;
	border-bottom:1px solid #ced0bf;
}
.side_nav li a:hover{
	border-bottom:1px solid #ced0bf;
	background:#d6d8cb;
}




/*news*/
.latest_news li, .blog li{
	padding-bottom:20px;
}
.popularpost li{
	padding-bottom:6px;
}
.latest_news li.last, .blog li.last{
	padding-bottom:0px;
}
.latest_news li .title, .blog li .title, .popularpost li .title{
	font-size:17px;
	display:block;
	padding-bottom:6px;
	font-family:Arial, Helvetica, sans-serif;
}
.latest_news li .date, .blog li .date{
	display:block;
	font-size:11px;
	color:#959481;
	
}
.latest_news li .date em, .blog li .date em{
	color:#cfcebe;
}
.latest_news li .date a, .blog li .date a{
	color:#959481;
	text-decoration:underline;
}
.latest_news li .date a:hover, .blog li .date a:hover{
	color:#575645;
	text-decoration:underline;
}


/*portfolio */
.portfolio img, .clients img{
	margin-bottom:10px;
}
.portfolio div{
	padding-bottom:30px;
}
* html .portfolio div{
	margin-left:45px;
}
* html .portfolio .first{
	margin-left:0;
}

/*services , clients*/

.services div, .clients div{
	margin-bottom:30px;
	float:left;
}


/*tabs*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #bec0b2;
	border-left: 1px solid #bec0b2;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #bec0b2;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #d6d8cb;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 13px;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ced0bf;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

/*tab container*/
.tab_container {
	border: 1px solid #bec0b2;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
	margin-bottom:40px;
}
.tab_content {
	padding: 20px;
}



/*blog*/
.entry{
	padding-bottom:40px;
	float:left;
}

.entry_meta{
	float:left;
	width:141px;
	text-align:right;
	padding-right:6px;
	border-right:1px solid #bebfba;
	margin-left:2px;
	font-size:11px;
}

.entry_meta span{
	display:block;
}
.entry_excerpt{
	float:right;
	width:399px;
	border-left:1px solid #f0f0ed;
	padding-left:30px;
	margin:0 0 0 -1px;
}
.navigation{
	float:left;
	width:100%;
	background:url(../images/lines_bg.gif) repeat-x top left;
	padding:30px 0 0 0;
}


/*news*/
.news_entry{
	padding-bottom:40px;
	clear:both;
}
.news_entry h3{
	padding-bottom:0;
	margin-bottom:0;
}
.news_meta{
	padding-bottom:10px;
}


/*testimonial*/
.testimonial_entry{
	padding-bottom:40px;
	padding-left:40px;
	background:url(../images/start_quote.gif) no-repeat left top;
	float:left;
}
.testimonial_entry blockquote{
	font-style:italic;
}
.testimonial_entry blockquote .q{
	background:url(../images/end_quote.gif) no-repeat bottom right;
}
.testimonial_entry blockquote .author{
	font-family:Arial, Helvetica, sans-serif;
}
.testimonial_entry h3{
	padding-bottom:0;
	margin-bottom:0;
}


/*gallery*/
.gallery{
	padding:0 0 20px 0;
	margin:0;
	float:left;
}
.gallery li{
	list-style:none;
	padding:0;
	margin-left:12px;
	margin-bottom:12px;
	display:inline;
	float:left;
}
.gallery li.row{
	margin-left:0px;
}
.gallery li a{
	padding:2px;
	float:left;
	display:block;
	border:1px solid #c8c9be;
}
.gallery li a:hover{
	border:1px solid #404138;
}

.gallery li a img{
	float:left;
}


/*navigation*/

.navi{
	padding:0!important;
	margin: 0 0 -30px 0!important; 
	float:right;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
}
.navi li{
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
}
.navi li a{
	border-right:1px solid #c8c9be;	
	float:left;
	padding:0px 10px;
}
.navi li.last a{
	border-right:none;	
}


/*contact-form*/
#contact-form{
	padding:0;
	margin:0;
}
#contact-form label{
	float:left; 
	width:120px;
	font-size:14px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#name,
#email,
#subject,
#message{
	border:1px solid #dddddd;
	padding:8px;
	color:#5e5e5e;
	font-size:14px;
	font-family:Georgia, "Times New Roman", Times, serif;
}


#name:focus,
#email:focus,
#subject:focus,
#message:focus{
	border:1px solid #acacac;
	padding:8px;
}

#name,
#email,
#subject{
	width:285px;
}
#message{
	width:350px;
	height:200px;
}

.send_btn{
	border:none;
	padding:10px 20px;
	background:#a8a89b;
	text-transform:uppercase;
	color:#f1f1e8;
	font-size:18px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#main_content #content .errorMsg h3{
	color:red;
}
#main_content #content .infoMsg h3{
	color:green;
}


/*social_network*/
.social_network{
	margin:0;
	padding:0 0 20px 0;
}
.social_network li{
	list-style:none;
	margin:0;
	padding:0;
	display:inline;
}


/*common styles*/
.clearfix{
	clear:both;
}
h1, h2, h3, h4, h5, h6, h7,p,pre,ol,ul,dl{
	padding-bottom:20px;
	
}
p{
	color:#585858;
}
li{
	list-style:outside;
	margin-left:20px;
}
ul.styledlist{
	clear:both;
	margin:0;
	padding:0 0 20px 0;
}
ul.styledlist li{
	background:url(../images/arrow.gif) no-repeat left 0.4em;
	padding-left:17px;
	list-style:none;
	margin-left:5px;
	margin-left:5px;
	line-height:22px;
}
ol li{
	list-style:decimal;
	margin-left:20px;
}
dl dt{
	font-weight:bold;
	padding-bottom:10px;
}
dl dd{
	padding-bottom:10px;
	margin-left:0px;
}


strong{
	font-weight:bold;
}
em, code{
	font-style:italic;
}
ul, ul li {
	list-style-type:disc;
}
ol, ol li {
	list-style-type:decimal;
}
table {
	margin-bottom:1.4em;
	width:100%;
}
th {
	font-weight:bold;
}
th, td, caption {
	padding:4px 10px 4px 5px;
}
tfoot {
	font-style:italic;
}
sup, sub {
	line-height:0;
}
abbr, acronym {
	border-bottom: 1px dotted;
	cursor:help;
}
address {
	margin:0 0 1.5em;
	font-style:italic;
}
del {
	text-decoration: line-through;
}
pre {
	white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.border{
	border:1px solid #c8c9be;
	padding:2px;
}
img.alignright {
	display: inline;
	margin:0 0 10px 12px;
}
img.alignleft {
	display: inline;
	margin:0 12px 10px 0px;

}
.alignright {
	float: right;
	width:auto;
}
.alignleft {
	float: left;
	width:auto;
}
/* ==========================================================================
   スマホ・タブレット用設定（トップページ完成版）
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* 1. すべての要素の横幅計算を「画面からはみ出さない設定」に統一 */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* 2. メニュー「以外」のすべてのブロックを強制的に縦並びにする */
  div, section, article, aside, header, footer {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;       /* 高さを自動にして重なりを解消 */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

 /* 3. 【デザイン変更版】myslidemenuを白ベースの爽やかなボタン風にする */
  #myslidemenu, 
  .jqueryslidemenu {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 15px 0 25px 0 !important; /* 上下に少し余裕を持たせる */
    padding: 0 !important;
    overflow-x: auto !important;       /* 横スクロール */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    
    /* 【デザイン変更】全体の背景と枠線 */
    background: #ffffff !important;     /* メニュー全体の背景を「白」に */
    border-top: 1px solid #e0e0e0 !important;   /* 上に薄い区切り線 */
    border-bottom: 2px solid #333333 !important;/* 下にアクセントの太めの線 */
  }

  /* メニューの「中のリスト（ul）」 */
  #myslidemenu ul,
  .jqueryslidemenu ul {
    display: flex !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 5px !important;
    list-style: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;       /* PC版の背景をクリア */
  }

  /* 各メニュー項目（li） */
  #myslidemenu ul li,
  .jqueryslidemenu ul li {
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background: none !important;       /* PC版の背景をクリア */
  }

  /* 【最重要】文字とボタンの見た目（a） */
  #myslidemenu ul li a,
  .jqueryslidemenu ul li a {
    display: block !important;
    font-size: 14px !important;         /* スマホで見やすい文字サイズ */
    font-weight: bold !important;       /* 文字を太字にしてクッキリと */
    color: #333333 !important;          /* 文字の色（濃いグレー） */
    padding: 14px 22px !important;      /* タップしやすいように上下左右にゆとりを */
    white-space: nowrap !important;     /* 絶対に改行させない */
    text-decoration: none !important;   /* 下線を消す */
    
    /* 【デザイン変更】項目ごとの区切り線 */
    border-right: 1px solid #e0e0e0 !important; /* ボタンの間に薄い縦線を入れる */
  }

  /* 一番最後のボタンの右側の縦線を消す */
  #myslidemenu ul li:last-child a,
  .jqueryslidemenu ul li:last-child a {
    border-right: none !important;
  }

  /* 4. 【決定版】スライドショーの動きと表示を完全に封じ込める */
  #sample-image,
  #sample-image *,        /* スライドショーの中にあるすべての画像やタグ */
  .navigation,
  #feature-select {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    position: absolute !important; /* 画面の配置計算から完全に除外して暴れさせない */
    top: -9999px !important;       /* 画面の外のはるか彼方に吹き飛ばす */
    pointer-events: none !important; /* タップなども一切反応させない */
  }

/* 5. 【完全固定版】3つのサービスブロックの重なり・ガタつきを完全に封じる */
  #features {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    left: 0 !important;            /* プログラムによる横ズレ（leftの書き換え）を強制リセット */
    transform: none !important;     /* プログラムによるスライドの動きを完全に無効化 */
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #features > div,
  #features .box,
  #features .feature-item {
    float: none !important;
    display: block !important;     /* 縦一列に並べる */
    width: 100% !important;        /* 横幅を画面いっぱいに */
    height: auto !important;       /* 高さを自動にして中身を収める */
    
    /* プログラムが無理やり位置を動かそうとするのを完全に固定する命令 */
    position: relative !important; 
    left: 0 !important;            /* 絶対に横に動かさせない */
    top: 0 !important;             /* 絶対に縦に動かさせない */
    opacity: 1 !important;         /* プログラムが勝手にフェードアウト（透明に）させるのを防止 */
    visibility: visible !important;
    
    margin-bottom: 40px !important; /* ブロックの間にしっかり隙間をあける */
    padding: 10px !important;
  }

  /* 6. 画像が画面からはみ出るのを絶対に防ぐ */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 15px auto !important;
  }

 /* 7. 文字（タイトルや文章）が画面からはみ出すのを防ぐ */
  h1, h3, h4, h5, h6, p, span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 【修正版】 <h2>の位置を上下に正しく配置し、1行で中央揃えにする設定 */
  #features h2,
  h2 {
    display: block !important;         /* 前後に強制改行を入れ、上下で独立させる */
    clear: both !important;            /* 左右の回り込み（float）を完全にリセット */
    float: none !important;            /* 横並びの性質を消す */
    width: 100% !important;            /* 横幅を画面いっぱいに広げて中央を取りやすくする */
    white-space: nowrap !important;   /* 絶対に自動改行させない */
    font-size: 24px !important;        /* 文字サイズ固定 */
    letter-spacing: -0.5px !important; /* 文字間隔を少し詰める */
    text-align: center !important;     /* 文字を中央揃えにする */
    margin: 20px auto !important;      /* 上下に20pxの隙間をあけ、左右は自動中央 */
    padding: 0 !important;
  }
  /* 8. 画面の左右ガタつきを禁止 */
  body {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

}
/* ==========================================================================
   貼り付けここまで
   ========================================================================== */