/*------------------------------*/
/*tag*/
/*------------------------------*/
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,u, ul, var, video,a {font-family: 'Trebuchet MS', Arial, Verdana,"メイリオ", Meiryo,"游ゴシック","Yu Gothic",'ヒラギノ角ゴ Pro W3';margin: 0;padding: 0;border: 0;outline: 0;background: transparent; font-weight:normal;}
article, aside, details, figcaption, figure, footer, header, hgroup,menu, nav, section, main {display: block;}
h1,h2,h3,h4,h5,p,dl,dt,dd,table,th,td,ol,ul,li,input,textarea,select{font-size: 14px; line-height: 1.6; }
em, strong, dt, th{ font-style:normal;font-weight:bold;}
small{font-size: 12px;}
img{max-width:100%; vertical-align: bottom;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table { border-collapse: collapse;border-spacing: 0;}

input[type="text"],input[type="submit"],textarea{-webkit-appearance: none;}
input[type="text"],textarea, select{ border: #C5E1A5 1px solid; padding: 8px; }
select{height:36px}
input[type="text"],textarea{box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset;background:#fff;}
input[type="submit"]{border-style: none;}

a{color: #333;}
a:hover{text-decoration: none;}
nav a{color:#333; text-decoration: none;}
a, a img, .btn{ transition: all 0.3s linear; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; }
a:hover img{ filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
/*main .title, main p, main li,th,td,dt,dd{text-shadow:0 1px 0 #fff;}*/
p,li,th,td,dt,dd,h1,h2,h3,h4,h5{color:#333; }
hr{border :none;border-top: #DCEDC8 1px solid;height: 1px;}

.clearfix:after { content: ""; clear: both; display: block; }
.clearfix { *zoom: 1; }


/*------------------------------*/
/*class*/
/*------------------------------*/
.green{color: #4CAF50}
.font{font-family: 'Amatic SC', cursive; font-weight: bold;color: #4CAF50; font-size:16px;}
.list li{list-style:circle; margin-left: 1.5em; }
.numlist li{list-style:decimal; margin-left: 1.5em; }
.inline li{ display:inline;}
.small{ font-size: 12px;}
.clear{ clear:both;}
.overflow{overflow: hidden;}
.red, .req, .error li{color:#e57373;}
.req{font-size: 85%; font-weight: bold;margin-left: 3px;}
.square{ display: inline-block; width: 20px;height: 20px; background: #4CAF50; color: #fff;text-align: center;margin-right: 8px;}
.btn{ display: inline-block; padding: 5px 16px; background: #4CAF50;color: #fff;text-align: center;text-decoration: none;min-width: 200px;text-shadow:0 -1px 0 #394; cursor: pointer;}
.btn:hover{background: #8bc34a;}
.contact{border-top: #DCEDC8 1px solid;padding-top: 16px;text-align: center;}
main p, .list, .numlist{margin-bottom: 1em;}
.tablearea{margin-bottom: 1em;}
.dlarea{ margin-bottom: 1em;}
.dlarea dl{ border-bottom: #DCEDC8 1px solid;padding: 8px 0;}
.price em{font-size: 120%}
.label{display: inline-block; font-size: 80%;text-align: center;}
.margintop{margin-top: 30px !important;}

.colgroup .col .subtitle{margin: 0 0 8px;border-bottom: #DCEDC8 1px solid;}
.panel{background: #fff;border: #DCEDC8 1px solid; padding:8px;text-decoration: none;display: block;overflow: hidden;width: 100%;}

.frame{ position: relative;padding: 10px }
.frame img{ border: #DCEDC8 1px solid;}
.frame:before{ content:"";display: inline-block; width: 45px; height: 45px;background: url(../img/common/frame_top.png) no-repeat; position: absolute;top:0; left:0;}
.frame:after{ content:"";display: inline-block; width: 45px; height: 45px;background: url(../img/common/frame_bottom.png) no-repeat; position: absolute;bottom:0; right:0;}



/*2columns only*/
@media screen and ( min-width : 768px ) {
  hr{margin-top: 40px}
  .flright{float: right;}
  .flleft{float: left;}

	.section{clear:both;overflow: hidden;margin-top: 60px;}
	.visible-xs{display: none !important;}

	.dlarea dl{ overflow: hidden;}
	.dlarea dt{ float: left; width: 150px}
	.dlarea dd{	padding-left: 160px;}

	.colgroup{ overflow: hidden;}
  .colgroup .col{ float: left;padding: 0 10px 10px}
  .colgroup .col img{ margin: 0 0 5px;}
  .colgroup .col p{margin: 0;}

  .colgroup .colhalf{ width: 50%; }
	.colgroup .col3{ width: 33.3%; }
	.colgroup .col3:nth-of-type(3n+1){ clear: both;}
	.colgroup .col4{ width: 25%;}
	.colgroup .col4:nth-of-type(4n+1){ clear: both;}
  .colgroup .col6{ width: 16.6%; }
  .colgroup .col6:nth-of-type(6n+1){ clear: both;}
  /*.colgroup .col8{ width: 12.5%; }
  .colgroup .col8:nth-of-type(8n+1){ clear: both;}*/
  .indexcategory{margin-top: 20px;}

  .box{overflow: hidden;}
  .box .boxcontents{width: 65%;}
  .box .boximg{width: 33%;}

  .fleximg{display: flex;margin: 0 50px 20px;}

	.title{font-size:26px;margin: 0 0 24px;}
	.title .font{margin-left: 16px;font-size: 20px}
  .subtitle{font-size:20px;margin: 16px 0; }
  .minititle{font-size:16px;margin: 16px 0; font-weight: bold;}
  .btn-lg{ padding: 16px;min-width: 300px;font-size: 110%}

  input[type="text"],select{ width: 300px;}
  textarea{ width: 600px;}
}

/*1column only*/
@media screen and ( max-width : 767px ) {
  hr{margin-top: 24px}
	.section{margin-top: 30px;}
	.hidden-xs{ display: none;}

  .colgroup .col{margin: 0 0 10px;}
  .colgroup .col6:nth-of-type(3n+1){ clear: both;}
	.colgroup .col img{float: left; width: 90px;margin-right: 10px;}
  .colgroup .col p{margin: 0; font-size: 13px;overflow: hidden; }

  .indexcategory .col img{float: none; width: 100%;margin: 0 0 5px;}



	.title{font-size: 20px;margin: 0 0 16px; font-weight: bold;}
	.title .font{margin-left: 8px;}
  main .title{background:url(../img/common/bg_lgreen.png); margin:0 -10px 16px; padding: 5px 10px;border-top: #DCEDC8 1px solid;border-bottom: #DCEDC8 1px solid;}
  .subtitle{font-size:16px;margin: 16px 0;font-weight: bold;}
  .minititle{font-size:15px;margin: 8px 0; font-weight: bold;}
  .btn-lg{ padding: 10px;width: 100%;font-size: 110%;}

  input[type="text"],select,textarea{ width: 100%;}
}


/*------------------------------*/
/*structure*/
/*------------------------------*/
body{background: url(../img/common/bg_main.png);}
header{ background: #fff;border-bottom: #DCEDC8 1px solid;}
.gnav li small{color: #4CAF50}

.cover{border-bottom: #DCEDC8 1px solid;background:url(../img/cover/basic.jpg) fixed top center;}
.cover .title{color:#fff;text-align: left;}

/*title background*/
/*.cover-index{background:url(../img/cover/index.jpg) fixed top center no-repeat;}*/
.cover-index{background:url(../img/cover/index2.jpg) fixed top center no-repeat;}
.cover-about{background:url(../img/cover/about.jpg) fixed top center no-repeat;}
.cover-staff{background:url(../img/cover/staff.jpg) fixed top center no-repeat;}
.cover-service{background:url(../img/cover/service.jpg) fixed top center no-repeat;}
.cover-locale{background:url(../img/cover/locale.jpg) fixed top center no-repeat;}
.cover-rec{background:url(../img/cover/rec.jpg) fixed top center no-repeat;}
.cover-pa{background:url(../img/cover/pa.jpg) fixed top center no-repeat;}
.cover-edit{background:url(../img/cover/edit.jpg) fixed top center no-repeat;}
.cover-pr{background:url(../img/cover/pr.jpg) fixed top center no-repeat;}
.cover-movie{background:url(../img/cover/movie.jpg) fixed top center no-repeat;}
.cover-dtp{background:url(../img/cover/dtp.jpg) fixed top center no-repeat;}
.cover-web{background:url(../img/cover/web.jpg) fixed top center no-repeat;}
.cover-data{background:url(../img/cover/data.jpg) fixed top center no-repeat;}

.pankuzu{margin: 8px 0;}
.pankuzu li{font-size: 12px}
.pankuzu li:after{content:"/";margin: 0 0 0 5px;}
.pankuzu li:last-child:after{content:none;}

footer{background:url(../img/common/bg_lgreen.png);border-top: #DCEDC8 1px solid; }
.ftop{ position: relative;}
.hatoyon{position: absolute; top:-10px; right:0;display: inline-block; background: url(../img/common/hatoyon.png); background-size: 50px 50px; width: 50px; height: 50px; color:#fff;padding-top:22px;text-align: center; text-decoration: none;}
.bottom{background: url(../img/common/bg_footer.png) center top;padding-top: 32px;text-align: center;}
.bottom li{margin: 0 2px;}
.bottom li a{ background: #fff;display: inline-block; height: 32px; width: 32px; text-align: center; border-radius:16px;font-size: 20px; padding-top: 2px;color: #4CAF50}
.bottom .copy{color:#fff;padding-bottom: 10px;}


/*2columns only*/
@media screen and ( min-width : 768px ) {
	.inner{ max-width: 960px;margin: 0 auto;}
	.col1{ float: left; width: 73%; padding: 40px 0 80px;}
	.col2{ float: right; width: 23%;padding: 40px 0 80px;}

	header{height: 60px; position: fixed; width: 100%;z-index:100;}
	.logo{width: 180px; float: left;margin-top: 8px;}
	.gnav{ text-align: right;}
	.gnav li{display: inline; text-align: center; margin-left: 10px;}
	.gnav li a{display: inline-block;padding: 12px 8px 0; height: 60px;}
	.gnav li span{display: block;}

	.cover{ height: 400px;}
	.cover .title{font-size: 40px;padding-top: 330px;}
	.cover-index{ height: 560px;}
  .cover-index .catch{ padding-top: 150px; margin-left: -50px;}

	main{padding-bottom: 80px;}
	
	.fnav{margin: 16px 0;}
	footer h5{font-size: 22px !important;margin: 16px 0 8px;}
	.bottom .copy{margin-top: 24px;}



}

/*1column only*/
@media screen and ( max-width : 767px ) {
	.inner{max-width: 100%; margin:0 10px;}
	.col1{ padding: 20px 0 40px;}
	.col2{ padding: 0 0 20px;}

	header{height: 60px; }
	.logo{width: 150px;margin-top: 10px;float: left;}
	/*.gnavbtn{float: right;margin-top: 12px; display: inline-block; border:#4CAF50 1px solid; padding: 8px 3px; color:#4CAF50; text-decoration: none;}*/
  .gnavbtn{float: right;margin-top: 12px;display: inline-block; border:#4CAF50 1px solid;padding: 8px 3px;text-decoration: none;color:#4CAF50; }
	.sidr {display: none;position: absolute;position: fixed;top: 0;height: 100%;z-index: 999999;width: 260px;overflow-x: none;overflow-y: auto;background: #fff;border-left: #DCEDC8 1px solid;}
	.sidr.right {left: auto;right: -260px;}
  .gnav li{padding: 0;border-bottom: #DCEDC8 1px solid;}
	.gnav li a{padding: 10px; display: block;}
	.gnav li span{margin-left: 8px;}

	.cover{height: 120px; background-size: auto 120px !important; background-attachment: scroll;}
  .cover .title{font-size: 18px; padding-top: 90px;}
  .cover-index{ height: 200px;background-size: auto 200px !important;}
  .cover-index .catch img{ width: 160px;padding-top: 15px;}

  main{padding-bottom: 48px;}


	footer .colgroup .col3{padding: 0 0 16px;}
	.fnav li a{display: block;border-bottom: #DCEDC8 1px solid;padding: 8px 0;text-decoration: none;}
	.bottom .copy{margin-top: 8px; font-size: 12px}


}

/*column width*/
@media screen and ( max-width : 970px ) and ( min-width : 768px ) {
	.inner{ max-width:100%;margin:0 10px;}
}


/*------------------------------*/
/*page*/
/*------------------------------*/
.blogfeed .label{ width: 60px;color:#fff;font-size:11px; margin-right: 5px;}
.blogfeed .label-blog{ background: #4CAF50;}
.blogfeed .label-works{ background: #333;}
.blogfeed .label-kicca{background: #4ac;}

.facebookfeed .fbimg{ background-size:cover !important; background-position:50% 25% !important;display: block; margin-bottom: 8px;}
.facebookfeed .fbimg a{ display: block; overflow: hidden;text-decoration: none;}
.facebookfeed .fbimg p{font-size: 85%;text-shadow:none; padding: 4px;}
.facebooklikebox{ border-top: #DCEDC8 1px solid; padding-top: 16px;overflow: hidden;}

.gmap{height: 400px;border:#e0d9d3 1px solid;}
.gmap img{max-width: none;}

.contactform p{margin: 5px 0 0;}

.staff dt{font-family: 'Amatic SC', cursive; font-weight: bold;color: #4CAF50; font-size:16px;}


@media screen and ( min-width : 768px ) {
  .blogfeed .feedimg{ height: 160px;width: 100%; background-size: cover !important;background-position: 50% 25% !important;margin: 5px 0;}
  .facebookfeed .fbimg a{height: 140px;}
  .facebookfeed .fbimg a p{filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;height: 140px;color:#fff; }
  .facebookfeed .fbimg a:hover p{ background: rgba(76,175,80,0.5); -webkit-transition: all .3s ease;-ms-transition: all .3s ease;filter: alpha(opacity=1); -moz-opacity: 1; opacity: 1;}

  .staff .profile{width: 65%;}
  .staff .photo{width: 32%;padding-top: 8px;}
  .staff .dlarea dt{width: 100px;}
  .staff .dlarea dd{padding-left: 100px;}

  /*.blogfeed h3{ max-height:40px; overflow: hidden;text-overflow: ellipsis;}*/
  

}

@media screen and ( max-width : 767px ) {
  .blogfeed .feedimg{ float: right;height: 80px;width: 80px; background-size: cover !important;background-position: 50% 25% !important;margin: 0 0 0 5px;}
  .blogfeed p{margin:5px 0 !important}
  
  .facebookfeed{overflow: hidden;text-align: center;}
  .facebookfeed .col6{width: 33%; float: left; margin:0; padding: 1%;}
  .facebookfeed .fbimg a{ height: 90px; overflow: hidden;}
  .facebookfeed p{display: none;}

	.gmap{height: 280px;}
  .staffindex{overflow: hidden;}
  .staffindex .col{ width: 33%; float: left; margin:0; padding: 1%;}
  .staffindex .col p{overflow: visible; margin: 0;}
}





/*------------------------------*/
/*hover*/
/*------------------------------*/
@media screen and ( min-width : 768px ) {
/* Underline From Left */
.gnav li a ,.underline{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.gnav li a:before ,.underline:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #4CAF50;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.gnav li a:hover:before, .gnav li a:focus:before, .gnav li a:active:before,.underline:hover:before, .underline:focus:before, .underline:active:before  {
  left: 0;
  right: 0;
}


}