@charset "utf-8";

/* =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: inherit;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;}

.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}    
.clearfix { display: inline-table; }  
.clear{clear: both;}
  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  

/* -------------------------------------------------------------- */

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

html{background:#ffa500;}

/* リンク設定
------------------------------------------------------------*/
a{color:#d3381c;text-decoration:none;}
a:hover{color:#444;}
a:active, a:focus{outline:0;}


/* 全体
------------------------------------------------------------*/
.wrapper{margin:0;padding:0;width:100%;position:relative; overflow:hidden;}
.inner{margin:0 auto;width:96%;max-width: 1040px; clear: both; overflow:hidden;}


/*************
/* ヘッダー
*************/
h1{font-size:13px;line-height:1.6;font-weight:normal;background:#665a1a;color:#fff;}
#header{overflow:hidden;padding:5px 0 15px;}

* html #header{height:1%;}

#header .logo{float:left;padding:25px 0 0;}
#header .logo img{ width:100%; max-width:475px;}
.info{float:right;padding:15px 0 0;}

ul.header_contact li { display: inline-block;text-align:center; margin:3px 0; }
.header_contact li a { background:#00a3af; color:#fff; font-size:15px; display:block; padding:14px 12px;}
.header_contact li a:hover {background:#f5e56b;display:block; color:#5a544b !important;}

/**************************
/* トップナビゲーション
**************************/
#menu {background:#F6AC19;}
ul#topnav{overflow:hidden;margin:10px 0 0 0; }

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

ul#topnav li{float:left;text-align:center;width:16.5%;border-left:1px solid #ea5532; }
ul#topnav a{width:100%;font-size:15px;line-height:1.4;display:block;padding:12px 0;color:#fff;background:#ffa500;}
ul#topnav li span { font-size:17px;}

ul#topnav li:last-child {border-right:1px solid #ea5532;}
ul#topnav li:first-child a,ul#topnav li:last-child a{width:100%;}
ul#topnav li.active a,ul#topnav a:hover{background:#ED6D46;}


/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{clear:both;margin:0 auto 20px; background: url(../images/index/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 275px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	position:relative;
}

.slogan{position:absolute;top:210px; left:0; right:0; height:auto; margin:0px auto;padding:14px 0 5px 0;line-height:1.2;z-index:100;background: #665a1a; text-align:center;
filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;}
.slogan h2{padding-bottom:10px;color:#fff;font-size:30px;}
.slogan p{font-size:14px;color:#eee;}

/**************************
/* メイン画像（下層ページ）
**************************/
.mainBanner-inner { position:relative;width:100%;max-width:1040px;padding:0;margin:0 auto;}	
#mainBanner-cont{ position:relative; clear:both;margin:0 auto 20px auto; background: url(../images/shear/visualin2.jpg)  no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 185px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.slogan02{position:absolute; top:60px; left:0;max-width:100%; width:300px;height:auto; margin:10px auto;padding:5px 15px;line-height:1.4;z-index:100;background: url(../images/index/tp2.png);}
.slogan02 h2{padding-bottom:5px;color:#fff;font-size:24px;}
.slogan02 p{font-size:18px;color:#eee;}


@media only screen and (max-width:480px){
	.slogan02{ top:30px; left:10px;}
}

/**************************
/* グリッド
**************************/
.gridWrapper {clear:both; padding:30px 0;overflow:hidden;}
.gridWrapper02{clear:both; background:#f5f5f5; margin:0;padding:30px 0;overflow:hidden;}

* html .gridWrapper{height:1%;}
	
.grid{float:left;}

.colDark,.colLight{padding-bottom:5px;}

.colDark h3,.colLight h3{ margin:10px 0 10px 5px;font-size:14px;font-weight:bold;}
.colDark a,.colLight a {display:block;padding:3px 5px;border-radius:5px;color:#fff;background:#00a3af;}

.colDark a:hover , .colLight a:hover {background:#f5e56b; color:#5a544b;}
.grid p{padding:5px 10px; font-size:16px;}
.grid ul{margin:5px 10px;}
.grid li{padding:5px 0;list-style:inside;border-bottom:1px dashed #ebebeb;}
.gridWrapper img, .gridWrapper02 img {max-width:100%;height:auto;}

.readmore a {display:block;padding:3px 5px;border-radius:3px;background:#f5e56b; color:#5a544b;}
.readmore a:hover {background:#665a1a; color:#fff;}


/*************
メイン コンテンツ
*************/
section.content{margin-bottom:40px;/*font-size:14px;*/overflow:hidden; position:relative; }

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

section.content p{margin-bottom:1em;}

section h3 { font-size:24px; font-weight:700;}

.col2_R h3 ,.col4 h3{padding:5px 0;margin-bottom:10px;font-size:18px;font-weight:700;}

/*page_title*/
.heading {
  margin: 0 0 24px 0;
}
.page_title .heading {
  position: relative;
  height: 50px;
  padding: 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 2px solid #00a3af;
  line-height: 50px;
}
.page_title .heading .caption{
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 25px;
  padding-right: 40px;
  background:#00a3af;
  color: #fff;
  font-size:19px;
  font-weight:bold;
}
.page_title .heading .caption:before{
  display: block;
  content: ' ';
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  right: 99.9%;
  top: 0;
  border: 0 solid transparent;
  border-width: 50px 37px 0 0;
  border-right-color:#00a3af;
}
.page_title .heading .title{
  float: left;
  padding-left: 20px;
  font-size:26px;
}

.midashi {
	border-left:8px solid #f8b500; 
	padding-left:18px;
	font-size:20px;
	font-weight:bold;
	margin:12px 0 24px 0;
}

.midashi_voice {
	border-bottom:2px solid #67b5b7;
	font-size:20px;
	font-weight:bold;
	margin:12px 0 24px 0;
}

/* 円の基本形 */
.maru-su {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column; 
  vertical-align: top;
  width: 32px;
  height: 32px;
  margin:0px 12px 8px 0;
font-size:18px;
  line-height: 1.5em;
  background: #ff6900;
  color:#fff;
  font-weight: 600;
font-family: helvetica;
}

.alignleft{float:left;clear:left;margin:10px 24px 24px 0px;}
.alignright{float:right;clear:right;margin:10px 0px 24px 24px;}

img.frame,#gallery img{
border:2px 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 .gridWrapper{padding:0;}
#gallery img{margin:5px;}
section#gallery{overflow:visible;}

#gallery .caption { display:block; font-size:13px; text-align:center; color:#7d7d7d; margin-bottom:10px;}

@media only screen and (max-width:480px){
section h3 { font-size:22px; font-weight:700;}
.maru-su {
  width: 28px;
  height: 28px;
  margin:0px 12px 8px 0;
font-size:17px;
  line-height: 1.5em;
}
.page_title .heading .caption{
  padding-left: 16px;
  padding-right: 18px;
  font-size:17px;
}
	
}

/*************
/* side
*************/
#sub p { margin-bottom:6px;}
#sub h3 {height:auto; margin:0 auto 10px auto;padding:5px 15px;line-height:1.6;background:#00a3af; color:#fff; font-size:15px;}
#sub ul {margin:5px 0; padding:0;}
#sub li { list-style:none;padding:5px 0;border-bottom:1px dashed #ccc; }
#sub ul li a { display:block;background: #F9F9D0; color:#333; border:1px solid #eee; font-size:17px;}
#sub ul li a:hover { background: #F9F9D0; color:#B11012;}

#sub img { display:inline-block; width:140px; height:auto; border:1px solid #ccc; vertical-align:middle; margin-right:10px;}	

#sub ol {
margin: 12px 0;
padding: 0;
list-style: none;
counter-reset: yourDefinition;
clear:both;
}
#sub ol li {
padding-left: 30px;
text-indent: -30px;
margin:12px 0;
}
#sub ol li:before {
counter-increment: yourDefinition;
content: counter(yourDefinition);
display: inline-block;
margin-right: 10px;
width: 25px;
height: 25px;
text-align: center;
color: white;
font-family: helvetica;
text-indent: 0;
background: #ff6900;
border-radius: 100%;
}
#sub ol li a { color:#333;}
#sub ol li a:hover { color:#d3381c;}

/*************
/* カルテ
*************/
.karute_area { margin-bottom:40px;}
.karute { width:95%; margin:0 auto 20px auto; padding:12px; border:2px dashed #ccc;}
.karute_img, .karute_text { display:inline-block; vertical-align:middle; margin-bottom:0 !important;}
.karute_img { width:40%; height:auto; border:1px solid #eee; padding:1px; margin-right:2%;}
.karute_img img { width:100%;}
.karute_text { width:56%; }
.karute p { margin-bottom:0 !important;}

.arrow img { width:45px !important; height:auto;}

.waku { margin:10px; padding:18px; border:2px solid #F6686A;}
.waku h3 { font-size:18px !important;}

.alignL60{float:left;margin:12px; width:60%;}
.alignR{float:right;margin:12px; }

@media only screen and (max-width:800px){
	.karute_img, .karute_text { display:block; vertical-align:middle; margin-bottom:6px !important;}
	.karute_img { width:90%; height:auto;  margin:0 !important;}
	.karute_text { width:100%; font-size:17px;}
	
	.alignL60{float:none;margin:12px 0; width:100%;}
	.alignR{float:none;margin:12px 0; }
}

/*************
会社概要
*************/
.about_area .alignR img { width:210px !important;}
.about_area th { width:114px;}


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

table.table th,table.table td{
padding:5px 10px;
border:1px solid #67b5b7;
font-size:16px;
}

table.table tr:first-child th,table.table tr:first-child td{
border-top:#25b7c0 4px solid
}

table.table th{
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
background:#e6eae6;
 width:20%;
}


/*************
/* フッター
*************/
#footer{clear:both;padding: 20px 0;overflow:hidden;background:#5C5025;border-top:1px solid #663300;}

* html #footer{height:1%;}

/* フッター内のグリッド(3カラム) */
#footer .grid,#footer .col3{color:#fff;background:transparent;}
#footer .col3 ul{margin:0 0 10px 5px; width:100%;}
#footer .col3 li{
padding:0 6px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border-right:1px solid #fff;
font-size:14px;
}

.footer_contact { display:block; background:#00a3af;text-align:center;padding:35px 18px; }
.footer_contact a { color:#fff; font-size:22px; display:block; }
.footer_contact a:hover {color:#5a544b !important;display:block; }
.footer_contact:hover {background:#f5e56b; }

#footer a{color:#fff;}
#footer a:hover{color:#fff; text-decoration:underline;}
#footer .logo span { font-size:120%; line-height:2.5;}

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

/* page top */
div.pageTop  { clear:both;position: fixed;bottom: 10px; right: 10px;cursor:pointer; z-index:1000;}



/* PC用 */
@media only screen and (min-width:961px){
	ul#topnav{max-width:1040px; margin:0 auto;padding:0;}	
	#main{float:right; width:70%;margin-top:20px; margin-bottom:40px;}
	#sub{float:left;width:27%;margin-top:20px;overflow:hidden; font-size:15px;}
		
		
	/* グリッド */
	.grid{width:30%; margin-right:25px; font-size:18px;}
	.grid:last-child {margin-right:0px;}	
	
	.col2{width:60%; float:left;}
	.col2_R { width:38%; float:right;}
	.col3{width:60%; float:right;}
	
	.col4 { width:47%; float:left; margin-right:6%;}
	.col4:last-child { margin-right:0;}
	.col4 img { width:240px; height:auto;}
	
	#gallery .grid{width:240px; margin-right:15px;}
	#gallery .grid img { height:230px;}
	 #sub .grid{width:100%;float:none;padding-bottom:30px;}
	 
	#fb { width:50%; margin:20px 0; float:left;}
	#g_map { width:50%; margin:20px 0; float:right;}
	.inner_btn { width:780px; margin:auto;}
	.inner_btn img { margin:5px;}
	
}


/* モニター幅960px以下 */
@media only screen and (max-width:960px){
	#main{float:none; width:100%; margin-top:20px; margin-bottom:40px;}
	#sub{float:none;width:100%;margin-top:20px;overflow:hidden; font-size:15px;}
	h1 p.inner{padding:0 2%;width:96%}
	#header .logo{padding-left:10px;}
	#header .info{padding-right:10px;}
	
	ul#topnav{clear:both;width:100%;}
	ul#topnav li{
	width:33%;
	margin:0 0 5px;
	border-right:1px solid #739938;
	box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
	}
	ul#topnav li:nth-child(3n){border-right:0;width:34%;}
	ul#topnav li a{width:100%;border-top:0;}
	ul#topnav li:first-child a,ul#topnav li:last-child a{width:100%;}
	
	.slogan{width:82%;height:auto;}
	
	.gridWrapper {width:96%; margin:0 auto;}	
	.gridWrapper02 .inner {width:96%; margin:0 auto;}
	
	.grid{width:48%;margin:1%;}
	
	.col4 { width:95%; float:none; margin:5px auto 30px auto;}
	.col4:last-child { margin-bottom:0px;}
	.col4 img { width:100%; height:auto;}
	
	.inner_btn { width:94%; margin:auto;}
	
	#gallery .grid{
	width:31%;
	margin:0 1%;
	padding:0;
	}
	
	#gallery .grid img{
	float:none;
	}
	
	section.content{padding:0 10px;}
	
	#main{float:none;width:100%; }
	#sub{float:none;width:98%; margin:auto;}
		
	#footer{padding:0;}
	
	#footer .grid{float:none;width:100%;margin-bottom:5px;text-align:center;}
	#fb { width:100%; margin:20px 0; float:none;}
	#g_map { width:100%; margin:20px 0; float:none;}
}


/* iPad 縦 */
@media only screen and (max-width:768px){
	#mainBanner{padding:3px;}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	.grid{width:100% !important;margin:12px auto;}
	.col2{width:100%;}
	.grid .col2_R { width:100%; float:none;}
	.col3{width:100%;}
	
	.col4 { width:95%; float:none; margin:5px auto 30px auto;}
	.col4:last-child { margin-bottom:0px;}
	.col4 img { width:100%; height:auto;}
	
	.grid img{float:none;margin:10px auto;}
	
	.grid p{text-align:left;}
	
	img.frame,#gallery img{border-width:2px;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px auto;
	}
		
	#footer .grid p,.copyright {text-align:center;}
	
	.inner_btn { width:98%; margin:auto;}
	.inner_btn img { margin:1px; width:200px;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#header .logo{ float:none; margin:auto; padding:10px; text-align:center;}
	.info { width:100% !important; margin:0; padding: 0!important; text-align:center;}
  .info li{ width:80%; margin:auto; }
  
	ul#topnav li{width:50%;}
	ul#topnav li:nth-child(3n) {border-right:1px solid #739938;width:50%;}	
	ul#topnav li:nth-child(2n),ul#topnav li:nth-child(6n){border-right:0;}
	
	#mainBanner{margin-left:1px;}
		
	.inner_btn { width:235px; margin:auto;}
	.inner_btn img { margin:5px; width:100%;}
		
	#gallery img{ width:210px !important; height:auto; margin-left:14%;}
	
	#main img { width:100%;}

}

/* 汎用クラス
*************************************************************/
.mb0 { margin-bottom:0px !important;}
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb45 { margin-bottom:45px !important; }
.mb50 { margin-bottom:50px !important; }
.mb80 { margin-bottom:80px !important; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }

.ml15 { margin-left:15px !important; }
.mr15 { margin-right:15px !important; }
.mr25 { margin-right:25px !important; }

.mt-35 { margin-top:-35px; }
.mt-20 { margin-top:-20px; }

.pb20 { padding-bottom:20px !important; }

.pt10 { padding-top:10px !important; }
.pt20 { padding-top:20px !important; }

.w20p { width:20%;}

.ssmall { font-size:85%; line-height:1.4 !important;}
.small { font-size:95%; line-height:1.4 !important;}
.medium { font-size:110%;}
.big { font-size:120%;}
.strong { font-weight:bold;}
.hr {border-bottom:dotted 1px #6D5639; }

.red { color:#b7282e}
.olive { color:#808000;}
.blue { color: #00afcc;}
.orenge { color:#f08300;}
.darkblue { color:#008899;}

.center { text-align:center;}
.text_left { text-align:left; display:block;}
/*.img { width:100%; height:auto;}*/

ol {
margin: 18px 0 18px 0;
padding: 0;
list-style: none;
counter-reset: yourDefinition;
clear:both;
}
ol li {
padding-left: 30px;
text-indent: -30px;
margin:12px 0;
}
ol li:before {
counter-increment: yourDefinition;
content: counter(yourDefinition);
display: inline-block;
margin-right: 10px;
width: 25px;
height: 25px;
text-align: center;
color: white;
font-weight: 600;
font-family: helvetica;
text-indent: 0;
background: #ff6900;
border-radius: 100%;
}
ol li.red { color:#783c1d;}

table {
	border: 1px solid #d9d9d9;
	border-top-width: 0;
	margin: 0 0 2.083em 0;
	text-align: left;
	width: 100%;
}
th {background:#f8f4e6;width: 18%;padding: 6px;vertical-align: middle;border-top: 1px solid #d9d9d9; vertical-align:middle;}
td {
	border-top: 1px solid #d9d9d9;
  	border-width: 1px 0 0 1px;
	padding: 6px;
}

input[type="text"],
textarea {
    padding: 0.8em;
    outline: none;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 16px;
}
textarea {
    width: 80%;
}

input[type="submit"] {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #ff7f00;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #ff7f00;    /* 枠の指定 */
}
input[type="submit"]:hover {
  color         : #ff7f00;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

input[type="reset"] {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #ffffff;     /* 背景色     */
  color         : #ff7f00;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #ff7f00;    /* 枠の指定 */
}

input[type=""reset"]:hover {
  color         : #ffffff;     /* 背景色     */
  background    : #ff7f00;     /* 文字色     */
}

@media only screen and (min-width:481px){
	.sp { display:none;}
}

@media only screen and (max-width:980px){	
	ol {margin: 18px 0 18px 0;}
	ol li {
padding-left: 30px;
text-indent: -30px;
margin:12px 0;
font-size:16px;
}
}