@charset "UTF-8";
/*@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);*/
@import url(http://fonts.googleapis.com/css?family=Lobster);

* {
  margin: 0;
  padding: 0;
  border: 0;
  letter-spacing: 0.05em;
  font-family:  'ITCJohnston', 'Avenir Next', Avenir, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "Droid Sans", sans-serif;
}

body { margin: 0; padding: 0; color: #898989; font-size : 12px; background: #FFFFFF;  }

/* MENU */

#rogo-box {
   margin: auto 0;
   text-align:center;
}

/* 横並び用
#menu-box:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
} 
*/

#menu-box {
 background: #8ec31e;
 height:44.3px;
}

#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#menu li {
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; 
}
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #8ec31e;
  color: #393939;
  text-align: center;
  text-decoration: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8ec31e', endColorstr = '#fafad2');
  /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
  /*Element must have a height (not auto)*/
  /*All filters must be placed together*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8ec31e', endColorstr = '#fafad2')";
  /*Element must have a height (not auto)*/
  /*All filters must be placed together*/
  background-image: -moz-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -ms-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -o-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#8ec31e), to(#fafad2));
  background-image: -webkit-linear-gradient(top, #8ec31e, #fafad2);
  background-image: linear-gradient(top, #8ec31e, #fafad2);
  /*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}
#menu li a:hover{
  background: #FFFFFF;
  color:#DAA520;
}

#menu-botton,#menu-none-botton {
    border-left: 1px solid #8ec31e;
    border-right: 1px solid #8ec31e;
    border-bottom: 3px solid #8ec31e;
}

#menu-non-botton {
  height:44.3px;;
  background-color:#8ec31e ;

}


#toggle{ 
 display: none;
}

/* TABLET */
@media only screen and (max-width: 768px) {
    #menu li{
    width: 25%;
  }
}

    
#wrapper {
   height: 100%;
   width: 100%; 
    margin: 0 auto;  
    text-align: left;
}

#header header,
#contents .main,
#navi nav,
article,
#footer footer {
	width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#heder-grp {
    position: fixed;
/*    height: 70px;*/
}

#header {
	background: #fff;
/*    height: 100px;*/
    clear:both;
}

#contents {
 clear:both;
 margin: :0px;
}

#map {
 width:100%; 
 height:350px; 
 margin:0 auto;   
}

.catch {
 position: absolute;
 margin-top: -480px;
 text-align: left;
 color: #393939; 
 font-size : 32px;
}

.site-image {
    position: relative;
    background: rgba(0, 0, 0, 0) url("/img/top5.jpg") no-repeat ;
    background-position: center center;
    width: 100%;
    max-width: 100%;
    height:0;
    margin:0px;
    -webkit-background-size: cover;
    background-size: cover;
   /* padding-top:40.08%; */
    padding-top: 450px;
    max-height: 450px;
}

.article1 {
    padding-top:5%;
    padding-bottom:5%;
    background: #ffffff;
    margin:0px;
    border-bottom: 1px solid #00a33e;
}

.article2 {
    padding-top:5%;
    padding-bottom:5%;
    background: #ffffff;
    margin:0px;
    border-bottom: 1px solid #00a33e;
}

.article3 {
    padding-top:5%;
    padding-bottom:5%;
    background: #ffffff;
    margin:0px;
    border-bottom: 1px solid #00a33e;
}

.article4 {
    padding-top:5%;
    padding-bottom:5%;
    background: #ffffff;
    margin:0px;
    border-bottom: 1px solid #00a33e;
    background:#00a33e; 
}

.article5 {
    padding-top:5%;
    padding-bottom:5%;
    background: #ffffff;
    margin:0px;
    border-bottom: 1px solid #00a33e;
}


#footer {
	margin: 0 0 0 0;
    clear: both;
	border-top: 2px solid #8ec31e;
    background:#8ec31e;
    height: 30px;
    
}

#footer footer {
	margin: 0 auto;
    background:#8ec31e;
    color: #000000;
}

/* 見出し */
h2 {
   margin-bottom: 2%;
   letter-spacing: 0.2em;
   font-size:44px;
}

h3.h3bg {
    background:#99CC33;
    font-size:24px;
    color: #393939;
    display: inline;
}

p.text {
    line-height: 2;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
}

p.qa-text {
    line-height: 1;
    margin-bottom: 6px;
    font-size: 18px;
}

p.middle {
    font-size: 24px;
    font-weight: bolder;
}

p.small {
    font-size: 11px;
}

p.text-big {
   line-height: 2;
   margin-top: 20px;
   margin-bottom: 20px;
   font-size:54px;
   font-weight: bolder;
}


p.center {
   text-align: center;   
}

#gold{
 color: #00a33e;
}
#gray{
 color: #5f5f5f;
}

.rsep {
 font-family: 'Lobster', cursive;   
}

/* Grid */
.mb24 {
    text-align: center;
    color: black; 
    font-size : 24px;
}

.describ_area {
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
/*    max-width: 1100px;*/
    width: 100%;
    word-wrap: break-word;
}

.describ {
    color: black; 
    font-size : 14px; 
}

.clearfix {
    display: inline-block;
}


.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0.1em;
    height: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}

.leftbox {
    float: left;
    max-width: 540px;
    width: 50%;
}

.rightbox {
    float: right;
    max-width: 540px;
    width: 50%;
}

dt {
    float: left;
    width: 100px;
    font-weight: bolder;
}
dd {
    padding-left: 120px;
    margin-bottom: 20px;
}

#rogo-sp {
  display: none;   
}


/* ** 768px */
@media only screen and (max-width: 768px) {
    .catch {
        margin-top: -100px;
        width: 100%;
        text-align: center;
        color: #393939; 
        font-size : 11px;
    }
    .leftbox {
        float:left;
        padding-left: 2%;
        padding-right: 2%;
        margin: 0 auto;
        width: 96%;
    }
    .rightbox {
          float:left;
        padding-left: 2%;
        padding-right: 2%;
        margin: 0 auto;
        width: 96%;
    }
    
    h2 {
        font-size: 28px;
        letter-spacing: 0.2em;
        margin-bottom: 2%;
    }

}


###
table.company {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 12px;
}
 
table.company th,
table.company td {
    padding: 10px;
}
 
table.company th {
    background: #8ec31e;
    vertical-align: middle;
    text-align: left;
    width: 120px;
    overflow: visible;
    position: relative;
    color: #393939;
    font-weight: normal;
    font-size: 15px;
}
 
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #8ec31e;
    border-width: 10px;
    margin-top: -10px;
}

/* firefox */
@-moz-document url-prefix() {
    table.company th::after {
        display:none;
        float: right;
        padding: 0;
        left: 25%;
        top: 50%;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #8ec31e 10px solid;
        margin-top: -10px;
    }
}
 
table.company td {
    background: #f8f8f8;
    padding-left: 10px;
}

### INPUT

.parent {
  display: table;
  width: 800px;
}

.child1  {
  display: table-cell;
  width: 300px;
  color: #393939;
  background: #8ec31e;
  border: 1px solid #8ec31e;
  font-weight: normal;
  font-size: 15px;
  vertical-align: middle;
  text-align: left;
  overflow: visible;
}

.child2 {
  display: table-cell;
  width: 300px;
  border: 1px solid #898989;
      display: inline-block;
}

#table {
    display:table; 
    }

.row {
    display:table-row;
    }

.row>div {
    display:table-cell;
    margin:10px;
    padding:15px;
    color: black;
    font-weight: normal;
    font-size: 15px;
    vertical-align: middle;
}

textarea,input {
    border:0; 
    border-color: #898989;
    padding:10px; 
    font-size:1.3em; 
    color:#000; 
    border:solid 1px #898989; 
    margin:0 0 10px; 
    width:420px;
}

input:focus { 
    border:solid 1px #8ec31e;
    outline:none;
}

textarea:focus { 
    border:solid 1px #8ec31e;
    outline:none;
}

#btn_confirm {
    border:solid 1px #393939; 
    padding:15px 30px; 
    margin:0 0 20px; 
    font-size:1.2em;
    text-transform:uppercase;
    font-weight:bold;
     background: light-gray;
    color:#393939;
    cursor:pointer;
    width: 280px;
    }

textarea#field07 {
    min-width:  100px;
    min-height: 200px;
    max-width:  600px;
    max-height: 300px;
}

/* SmartPhone */
@media only screen and (max-width: 480px) {
    img.banr_blog {
	width; 380px;
    }
    #header {
        border-top: none;
    }
    #menu{
        display: none;
    }
    #menu li{
        width: 100%;
    }
    #toggle{
      display: block;
      position: relative;
      font-size: 18px;
      font-weight: bolder;
      width: 100%;
      background: #fafad2;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8ec31e', endColorstr = '#fafad2');
  /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
  /*Element must have a height (not auto)*/
  /*All filters must be placed together*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8ec31e', endColorstr = '#fafad2')";
  /*Element must have a height (not auto)*/
  /*All filters must be placed together*/
  background-image: -moz-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -ms-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -o-linear-gradient(top, #8ec31e, #fafad2);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#8ec31e), to(#fafad2));
  background-image: -webkit-linear-gradient(top, #8ec31e, #fafad2);
  background-image: linear-gradient(top, #8ec31e, #fafad2);
  /*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
    }
    #toggle a{
      display: block;
      position: relative;
      padding: 12px 0 10px;
      border-bottom: 1px solid #8ec31e;
      color: #393939;
      text-align: center;
      text-decoration: none;
    
    }
    #toggle:before{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        background: #393939;
    }
    #toggle a:before, #toggle a:after{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 10px;
        width: 20px;
        height: 4px;
        background: #8ec31e;
    }
    #toggle a:before{
        margin-top: -6px;
    }
    #toggle a:after{
        margin-top: 2px;
    }
    .row>div {
        display:block;
        padding:1px
    }
}

/* ** 480px */
@media only screen and (max-width: 640px) {
    #rogo {  
     display: none;
    }
    #rogo-sp {
     width:100%;   
     display: block;
     border-top: 3px solid #00a33e;
     border-bottom: 1px solid #00a33e;
    }
    .catch {
         margin-top: -140px;
         width: 100%;
         text-align: center;
         color: #393939; 
        font-size : 11px;
    }
    .leftbox {
          float:left;
        padding-left: 5%;
        margin-right: 5%;
        margin: 0 auto;
        width: 90%;
    }
    .rightbox {
        float:left;
        padding-left: 5%;
        margin-right: 5%;
        margin: 0 auto;
        width: 90%;
    }
    h2 {
        font-size: 28px;
        letter-spacing: 0.2em;
        margin-bottom: 2%;
    }
    #map {
        height: 240px;   
    }
    dt {
    float: left;
    width: 100%;
    font-weight: bolder; 
    }
    dd {
    padding-left:  0px;
    margin-bottom: 10px;
    }
    textarea#field07 {
        max-width:  260px;
        max-height: 200px;
    }
    input#field01 {
        width:  260px;
    }
    p.text-big {
       line-height: 2;
       font-size:28px;
       font-weight: bolder;
    }
    img.banr_blog {
	width; 380px;
    }
}

table.info{
    width: 100%;   
}

th.date {
    text-align: left;
    font-size: 18px;
    border-bottom: 2px dotted #8ec31e;
    border-right: 2px dotted  #8ec31e; 
}
td.info-description {
    text-align: left;
    border-bottom: 2px dotted #8ec31e;
}

hr.text_line {
  border-top: 2px dotted #8ec31e;
  margin-top: 20px;
  margin-bottom: 20px;
}

#footer {
    bottom: 0;
    width: 100%;
}

.screen-reader-response, .wpcf7-response-output {
	color:blue;
}

.wpcf7-validation-errors,.wpcf7-not-valid-tip {
color :  red;
}
.screen-reader-response ul>li>a {
color :  red;
}

.wpcf7-mail-sent-ok, .wpcf7-validation-errors {
	display:none;
	visibility:hidden;
}

footer>p {
	text-align:center;
}

.title2 {
border-bottom: 1px solid #8ec31e;
border-left: 10px solid #8ec31e;
text-align: left;
background-color: #fff;
font-size: 14px;
color: #000;
margin: 0px;
padding: 2px 2px 2px 15px;
min-width: 80%;
margin-bottom:20px;
}

ul  {
   padding-left:20px;
}

.error {
   color:red;
   font-weight:bold; 
  display: block;
}