/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@charset "utf-8";

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

#container{
width:100%;
}


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
font:12px optima,verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5; color:#655a53;
-webkit-text-size-adjust: none;
}


/* リンク設定
------------------------------------------------------------*/
a{color:#655a53;text-decoration:none;}/* 元の色#337db6-------*/

a:hover{
color:#655a53;
}
a:active, a:focus{outline:0;}


html{
background-image: url("images/bg_01.gif")
}


/* 全体
------------------------------------------------------------*/
#wrapper{
color:#655a53;
margin:0 auto;
padding:0 1%;
}

.inner{
width:100%;
text-align:center;
}


/*************
/* フロート解除
*************/
.clear {
clear:both;　/*floatの解除、ここがポイント*/
}

/*************
/* ヘッダー
*************/
#header{
padding:15px 15px 15px 10px;
overflow:hidden;
}


#header h1{
font-weight:normal;
}


/*************
/* ロゴ
*************/
#header .logo{
margin: 0px 400px 5px 0px;
padding:10px 30px 0px 20px;
}

.logo a{
font-size:30px;
font-weight:bold;
line-height:1;
color:#655a53;
}

.logo span{
font-size:11px;
font-weight:normal;
}

hr.hr1 {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*************
/* TOP バナー
*************/
#banner p{
text-align:center;
margin: 25px 0px 0px 0px;
}


/*************
/* Topに戻る
*************/
.btn_top{
margin-left:470px;
text-align:right;
border-bottom:dashed 1px #cecece;
}

.btn_top:hover{
margin-left:470px;
text-align:right;
border-bottom:dashed 1px #ffb7be;
cursor: pointer;
}

.btn_sample{
}

.btn_sample:hover{
cursor: pointer;
background-image: url("images/icon/ic_blog_01.png");
background-position: 145px -20px;		/* 左上から右に20px, 下に30px */
background-repeat: no-repeat;
    }

/**************************
/* トップナビゲーション
**************************/
ul#topnav{
float:center;
overflow:hidden;
}

ul#topnav li{
float:left;
margin:0 10px 0 0;
text-align:center;
}

ul#topnav a{
font-size:20px;
display:block;
padding:15px 15px;
;
}

ul#topnav a:hover{
background-image: url("images/bg_menu.png");
background-size:contain;
background-repeat: no-repeat;
background-position: 40px 0px;/* 左上から右に20px, 下に30px */
}


/**************************
/* アイコンナビ
**************************/
ul#iconnav{
margin:-25px 90px 0 0;
float:right;
width:130px;
overflow:hidden;
}

* html ul#iconnav{
height:1%;
}

ul#iconnav li{
display:none;
}

ul#iconnav a{
font-size:18px;
display:block;
padding:10px 10px;
color:#333;
}

ul#iconnav .twitter a:hover{
padding:-25px 0px 0px 0px;
background-image: url("images/icon/ic_twitter_02.png");
background-repeat:no-repeat;
}
ul#iconnav .blog a:hover{
padding:-25px 0 0 0;
margin-left:4px;
background-image: url("images/icon/ic_blog_02.png");
background-repeat:no-repeat;
}

ul#topnav span{
color:#cdcdcd;
font-size:10px;
}

ul#iconnav li.active a,
ul#iconnav a:hover{
color:#000;
margin:0;
}

ul#iconnav li.active a,
ul#iconnav a:hover{
color:#000;
padding:0 0 10px 0;
margin:10px 0 0 10px;
text-align:center;
}



/**************************
/* メイン画像（トップページ+サブページ）
**************************/

.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:0;
left:0;
padding:15px 20px;
line-height:1.4;
background:url(images/tp2.png);
}

*/
/* サブページ スローガンの背景・黒*/
.subImg .slogan{background:url(images/tp2.png);}

/**************************
/* 画像関係(works, about)
**************************/

ul#worksimg{
padding:10px 0 15px 0;
overflow:hidden;
border-radius:10px;
}

ul#worksimg li{
padding:25px 0 0 120px;
margin-left: 30px;
float:left;
text-align:center;
}

ul#worksimg li img{
border-radius:10px;
}

ul#worksimg li a:hover{
	opacity: 0.8;/* Chrome Firefox Opera 1.0=100% */
	-ms-filter: "alpha( opacity=80 )";/* OldIE 100=100%*/
	filter: alpha( opacity=80 );/* IE7~ 100=100%*/
}

p#aboutimg{
text-align:center;
margin:5px 0 20px -10px;
max-width:840px;
overflow:hidden;
border-radius:10px;
}
p#aboutimg img{
padding:5px 10px 5px 10px;
float:left;
text-align:center;
border-radius:10px;
}


/**************************
 グリッド
**************************/
.gridWrapper{
text-align:center;
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}
	
.grid{
text-align:center;
float:left;
border-radius:5px;
background:#fff;
}

.grid h3{
padding:15px 5px;
border-radius:5px 5px 0 0;
}

.grid p{
padding:5px 10px;
}

.gridWrapper img{
max-width:100%;
height:auto;
}

/*************
メイン コンテンツ
*************/
section.content{
margin-left: 10px;
margin-right: 10px;
padding-left: 3px;
padding-right: 3px;
font-size:12px;
margin-bottom:15px;
background-color:#fefefe;
border-radius:20px;
text-align:center;
}

* html section.content{height:1%;}

section.content p{
width: auto;
padding-left:14px;
margin:15px 30px 0px 5px;
border-bottom:1px dotted #9c9c9c;
}

.content #midasi{
text-align:center;
font-size:17px;
padding-top:5px;
margin-bottom:10px;
background:url(images/bn.png)
}


.emi{
padding:3px 5px 8px 5px ;
margin-top:-5px;
border-radius:70px;
}

.tensen{
border-bottom:1px dotted #9c9c9c;
}


/*************
ニュース
*************/
li#news{
text-indent:1em;
padding-left:15px;
margin-bottom:5px;
border-bottom:3px dotted #9c9c9c;
color:#ff0000;

}

h3.heading{
padding-left:7px;
margin-bottom:10px;
border-left:5px solid #e4e4e4;
}

section.content img{
max-width:90%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}

img.frame,#gallery img{
border:4px solid #fff;
box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
}

#gallery .grid{padding:5px 0 0;}


/**************************
works
**************************/
.one-column2{
background:#fcfcfc;
padding:10px 0 10px 15px;
margin:0 0 10px -10px;
width:200px;
overflow:hidden;
border-radius:10px;
float:left;
}

p#bi_catefory{
border-left: 8px solid #ffb7be;/*文字の横に付箋のようなマークを入れる*/
padding:10px 0 5px 10px;
font-size:110%;
color:#655a53;
border-bottom:dotted 1px #ffb7be;/*文字の下に点線を入れる設定*/
margin-right:20px;
}


.one-column3{
background:#fcfcfc;
padding:10px 0 15px 15px;
margin:0 68px 10px -30px;
width:600px;
float:right;
text-align:center;
overflow:hidden;
border-radius:10px;
}

.one-column3 #li_category{
background:#fcfcfc;
margin-right:20px;
}

.one-column3 #li_category li#li_category2{
text-align:left;
font-size:120%;
border-left: 8px solid #ffb7be;/*文字の横に付箋のようなマークを入れる*/
border-bottom:dotted 1px #ffb7be;/*文字の下に点線を入れる設定*/
width:515px;/*見出しの横幅*/
line-height: 26px;/*h3の高さ設定*/
padding-left: 10px;/*文字の左にスペース*/
margin-bottom: 10px;/*文字の左にスペース*/
color:#655a53; /*文字の色*/}
}

.one-column3 #li_category li#li_category2 .kaisya{
color:#ff0000;
}

.kaisya{
text-align:left;
}

#wed_text{
border:3px dashed #fefefe;
border-radius:5px;
width:815px;
margin:5px 0 20px 0;
}

#wed_text p{
color:#ff888d;
padding:10px 10px;
border-bottom:1px dashed #ebebeb;
}

hr{
width:810px;
margin-top:5px;
margin-bottom:10px;
margin-left:10px;
}


/**************************
オーダーフォーム
**************************/
.one-column{
padding:10px 0 0 20px;
margin:0 0 10px -10px;
max-width:840px;
overflow:hidden;
border-radius:10px;
}

#divfield input{
color:#ff0000;
}
#sc-contact-form,
#contactForm,
#commentform,
#contactForm{
	margin-bottom: 18px;
}

#sc-contact-form input,
#sc-contact-form textarea,
.admin-form input,
.admin-form textarea,
#contactForm input,
#contactForm textarea,
#commentform input,
#commentform textarea{
	padding: 10px 15px;
	background: #fff;
	border: 0px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#sc-contact-form input,
.admin-form input,
#contactForm input,
#commentform input{
width: 282px;
}

#sc-contact-form textarea,
.admin-form textarea,
#contactForm textarea,
#commentform textarea{
	width: 380px;
}

#sc-contact-form #submit,
.admin-form #submit,
#contactForm #submit,
#commentform input#submit{
	width: 76px;
	margin: 21px 0px;
	padding: 5px 0px;
}

#sc-contact-form #submit:hover,
.admin-form #submit:hover,
#contactForm #submit:hover,
#commentform input#submit:hover{
	background: #655a53;
	color: #f1f1f1;
}

#sc-contact-form input,
#sc-contact-form textarea,
.admin-form input,
.admin-form textarea,
#contactForm input,
#contactForm textarea,
#commentform input,
#commentform textarea{
	background:url(images/pink.png);
	color: #ffffff;
	font-size: 14px;
}

#sc-contact-form label,
.admin-form label,
#contactForm label,
#commentform label{
	display: block;
	font-size: 14px;
	line-height: 2.5em;
	font-weight: light;
}



/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:100%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px;
border:1px solid #cacaca;
}

table.table th{
text-align:right;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
background:#f3f3f3;
}

table.table td{border-left:#48370d;}



/*************
サブ（フッター前）コンテンツ
*************/
#sub ul{padding:10px;}

#sub li{
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dashed #ebebeb;
}

#sub li:last-child{
border:0;
margin-bottom:0;
}

#sub li a{display:block;}

#sub ul.list{padding-bottom:7px;}

#sub ul.list li{
clear:both;
margin-bottom:5px;
padding:5px 0;
overflow:hidden;
}

* html #sub ul.list li{height:1%;}

#sub ul.list li img{
float:left;
margin-right:10px;
}

#sub ul.list li{
font-size:12px;
line-height:1.35;
}


/*************
/* フッター
*************/
#footer{
clear:both;
padding:20px 0 40px;
overflow:hidden;
}

* html #footer{
height:1%;
}

#footer a{
color:#333;
}
#footer a:hover{color:#888;}

#footer .copyright{
font-size:11px;
}


}