@charset "utf-8";

/* -----------------------------------------------------------------
reset
----------------------------------------------------------------- */

*{ margin: 0;padding: 0}
ul, ol { list-style : none}
img { vertical-align : middle}


/* -----------------------------------------------------------------
fluid-image
----------------------------------------------------------------- */

img { max-width : 100%}


/* -----------------------------------------------------------------
html 
----------------------------------------------------------------- */

html {
/*
  font-family : verdana, sans-serif;
  font-family: 'Hiragino Kaku Gothic Pro',"ＭＳ Ｐゴシック",'Yu Gothic',Meiryo, Helvetica,'Segoe UI','Trebuchet MS',Verdana,Arial,sans-serif;
  font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'Yu Gothic', Helvetica,'Segoe UI','Trebuchet MS',Verdana,Arial,sans-serif;
*/
  font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";

  color : #666666;
}

body{
  margin-left: auto;
  margin-right: auto;
}


/* -----------------------------------------------------------------
font 
----------------------------------------------------------------- */

h1 {
  margin-bottom : 0; 
}

h2 {
  font-size : 1.25em; /* 16px-1.2520px */
  line-height : 1.5; /* 30px */
  font-weight : bold;
  color : #05662d;

  background: -moz-linear-gradient(top, #f0fff0 0%, #fcfffc 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0fff0), color-stop(100%,#fcfffc)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f0fff0 0%,#fcfffc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f0fff0 0%,#fcfffc 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom, #f0fff0 0%,#fcfffc 100%); /* W3C */

  position: relative;
  padding: .6em 0 .6em .75em;
  border-left: 10px solid #269956;

  margin-bottom : 1em;
  margin-top : 2em;
} 

h2:nth-child(1) {
  margin-top : 0em;
}

h2::before {
  position: absolute;
  left: -10px;
  bottom: 0;
  content: '';
  width: 10px;
  height: 50%;
  background-color: #05662d;
}

h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

h3 {
  font-size : 1.25em; /* 18px */
  line-height : 1.5; /* 27px */
  font-weight : bold;
  color : #105DA0;
  background: -moz-linear-gradient(top, #e0f0ff 0%, #f7faff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f0ff), color-stop(100%,#f7faff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e0f0ff 0%,#f7faff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e0f0ff 0%,#f7faff 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom, #e0f0ff 0%,#f7faff 100%); /* W3C */
  position: relative;
  padding: .3em 0 .3em .75em;
  border-left: 6px solid #3C76D4;
  margin-bottom : 1em;
  margin-top : 1em;
} 

/*
h3:nth-child(0) {
  margin-top : 0em;
}
*/

h3::before {
  position: absolute;
  left: -6px;
  bottom: 0;
  content: '';
  width: 6px;
  height: 50%;
  background-color: #145289;
}

h3::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

h4 {
  font-size : 1em; /* 16px */
  line-height : 1.5; /* 24px */
  margin-bottom : 1em;
  border-bottom: 1px solid #ccc;
}


h5 {
  font-size : 0.75em; /* 12px */
  line-height : 1.5; /* 18px */
  margin-bottom : 1em;
}

h6 {
  font-size : 0.625em; /* 10px */
  line-height : 1.5; /* 15px */
  margin-bottom : 1em;
}

/* -----------------------------------------------------------------
banner
----------------------------------------------------------------- */

.banner {
  overflow : hidden;
  font-size : 1.125em; /* 18px */
  line-height : 1.5; /* 27px */
  padding: 0 0;

  text-align : center;
  margin-bottom : 1.5em;
  border-radius: 8px;
  border: 2px solid #6d3275;

  background: -moz-linear-gradient(top, #6d3275 0%, #96459c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d3275), color-stop(100%,#96459c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6d3275 0%,#96459c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6d3275 0%,#96459c 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom, #6d3275 0%,#96459c 100%); /* W3C */
}
.banner a {
  display : block;
  padding : 0.8em 1em;
  text-decoration : none;
}
.banner a:link {
  color: #ffffff;
}
.banner a:hover {
  color:#ffffff;
  background-color : #96459c;
}
.banner a:visited {
  color: #ffffff;
}

#contents .bannerarea_sub{
  width: 100%;
  margin-bottom : 3.0em;
}

#contents .bannerarea_main{
  width: 100%;
}


/* -----------------------------------------------------------------
header
----------------------------------------------------------------- */

#header { 
  text-align : center;
  background-color : #ffffff;
}

/*   header-top */

#header-top {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align : left;
  background-color : #ffffff;
}

#header-top {
  display: table;
  content: "";
  clear: both;
}


/* -----------------------------------------------------------------
main image
----------------------------------------------------------------- */

#mainimage {
  margin-bottom : 1em;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  background-color : #033317;
}

#mainimage img{
  width: 100%;
}


/* -----------------------------------------------------------------
nav
----------------------------------------------------------------- */

nav {
  font-size : 0.875em; /* 14px */
  line-height : 1.2; /* 14px */
  margin-bottom : 0em;
  background: -moz-linear-gradient(top, #05662d 0%, #269956 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05662d), color-stop(100%,#269956)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #05662d 0%,#269956 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #05662d 0%,#269956 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom, #05662d 0%,#269956 100%); /* W3C */
}

nav ul li{
  border-left: 1px solid #59637e;
  border-right: 1px solid #033317;
  border-top: 1px solid #59637e;
  border-bottom: 1px solid #033317;
}


nav ul {
  overflow : hidden;
  max-width:1200px;
  margin-left: auto;
  margin-right: auto;
}

nav ul li a {
  display : block;
  text-decoration : none;
}

nav ul li a:link {
  color : white;
}

nav ul li a:hover {
  color : white;
  background-color : #05662d;
}

nav ul li a:visited {
  color : white;
}

nav ul:after{
	display: table;
	content: "";
	clear: both;
}

#pan {
  width : 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom : 1em;
  text-align : left;
}

#pan p { 
  font-size : 0.75em; /* 12px */
  line-height : 1.5; /* 18px */
}

#pan a {
  text-decoration : none;
}
#pan a:link {color: #112299}
#pan a:visited {color: #112299}
#pan a:hover {color:#D8261F}

/* -----------------------------------------------------------------
contents
----------------------------------------------------------------- */

#contents {
  max-width:1152px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom : 60px;
  text-align : left;
}

#contents:after {
  content: "";
  display: block;
  clear: both;
}

#contents p { 
  font-size : 1em; /* 16px */
  line-height : 1.5; /* 18px */
  margin-bottom : 0em;
  text-align : left;
}

#contents .cap { 
  font-size : 0.625em; /* 10px */
  line-height : 1.5; /* 15px */
  margin-bottom : 0em;
  text-align : left;
}

#contents #main{
  /*
  width : 100%;
  */
  margin: 0px 0px 30px 0px;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#contents #sub {
  /*
  width : 100%;
  */
  margin: 0px 0px 50px 0px;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-img img{
  margin-bottom : 0.2em; 
}

#main .cmt-img{
  width : 25%; /* 120-580 */
  text-align : left;
  float : left;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-txt{
  width : 70%; /* 440-580 */
  margin: 0;
  float : right;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-img2 img{
  margin-bottom : 0em; 
}

#main .cmt-img2{
  width : 100%;
  margin-bottom : 1.0em;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-txt2{
  width : 100%;
  margin-bottom : 1.0em;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .comment{
  width: 100%;
  margin-bottom : 1.0em;
}

#main .comment2{
  margin-bottom : 2.0em;
  width: 100%;
}

#sub .comment{
  width: 100%;
  margin-bottom : 1.0em;
}

#main .comment:after {
  content: "";
  display: block;
  clear: both;
}

#main .comment a {
  text-decoration : none;
}
#main .comment a:link {color: #003ae6}
#main .comment a:visited {color: #003ae6}
#main .comment a:hover {color:#D8261F}

#main .comment2:after {
  content: "";
  display: block;
  clear: both;
}

#main .comment2 a {
  text-decoration : none;
}
#main .comment2 a:link {color: #003ae6}
#main .comment2 a:visited {color: #003ae6}
#main .comment2 a:hover {color:#D8261F}

/*
#main .comment2 a:link {color: #112299}
#main .comment2 a:visited {color: #112299}
*/

#main .image{
  width: 100%;
  margin-bottom : 2.0em;
}

#main .image:after {
  content: "";
  display: block;
  clear: both;
}

#sub .comment a {
  text-decoration : none;
}
#sub .comment a:link {color: ##003ae6}
#sub .comment a:visited {color: ##003ae6}
#sub .comment a:hover {color:#D8261F}

/* -----------------------------------------------------------------
footer
----------------------------------------------------------------- */

#footer {
  width : 100%;
  padding : 2em 0;
  color : white;
  text-align : center;
  background : url(../img/footer_bg.png);
}

#footer p{
  font-size : 0.75em; /* 12px */
  line-height : 1.5; /* 18px */
  width : 90%;
  margin-left: auto;
  margin-right: auto;
}

/* clear */
#contents #main .clear {
  clear:both;
}


/* -----------------------------------------------------------------
グリッドシステム
----------------------------------------------------------------- */

.row{
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}
.row:after{
  display: table;
  content: "";
  clear: both;
}

.sm-1-div, .sm-2-div, .sm-3-div, .sm-4-div{
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
  display: block;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
.sm-1-div{width: 100%;}
.sm-2-div{width:  50%;}
.sm-3-div{width:  33.33333333%;}
.sm-4-div{width:  25%;}

@media only screen and (min-width:768px) {
  .bg-1-div, .bg-2-div, .bg-3-div, .bg-4-div{
    box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
    display: block;
    float: left;
    padding: 0px 5px;
    margin-bottom : 10px; 
  }
  .bg-1-div{width: 100%;}
  .bg-2-div{width:  50%;}
  .bg-3-div{width:  33.33333333%;}
  .bg-4-div{width:  25%;}
}


/* -----------------------------------------------------------------
汎用クラス
----------------------------------------------------------------- */

/* 縦方向の間隔調整 */
.height-space{
  height: 0px;
  margin-bottom: 40px;
}

/* 小画面－内余白ゼロ */
@media only screen and (max-width:767px) {
  .sm-nopad{
    padding: 0;
    margin-bottom: 0px;
  }
}

/* 非表示 */
@media only screen and (max-width:767px) {
  .sm-hide{
    display: none;
  }
}
@media screen and (min-width : 768px) and(max-width:1023px){
  .md-hide{
    display: none;
  }
}
@media screen and (min-width : 1024px) {
  .lg-hide{
    display: none;
  }
}

/* 幅100%で表示 */
.width-full{
  maxwidth: 100%;
}


/* -----------------------------------------------------------------
drawr対応
----------------------------------------------------------------- */

.dbtn{
  display: none;
}

.drawr {
  display: none;
}


/* -----------------------------------------------------------------
form対応
----------------------------------------------------------------- */
#main .form-table{
  margin-bottom : 2.0em;
  font-size : 0.875em; /* 14px */
}


#main .form-table table{
  margin-top : 0px;
  box-sizing : border-box;

  border-top-width : 1px;
  border-left-width : 1px;
  border-top-style : solid;
  border-left-style : solid;
  border-top-color : #cccccc;
  border-left-color : #cccccc;
  border-collapse : collapse;
  border-spacing : 0px 0px;
  width : 100%;
}

#main .form-table th{
  font-weight : normal;
  background-color : #f4f4f4;
  text-align : right;
  padding: 10px 10px 12px 10px;
  border-right-width : 1px;
  border-bottom-width : 1px;
  border-right-style : solid;
  border-bottom-style : solid;
  border-right-color : #cccccc;
  border-bottom-color : #cccccc;

  width :40%;
  line-height : 1.0;
}

#main .form-table td{
  background-color : #ffffff;
  padding: 10px 10px 10px 10px;
  border-right-width : 1px;
  border-bottom-width : 1px;
  border-right-style : solid;
  border-bottom-style : solid;
  border-right-color : #cccccc;
  border-bottom-color : #cccccc;

  width : 60%;
  line-height : 2.0;
}

#main .form-table textarea{
  margin : 10px 0px 5px 0px;
  padding: 5px;

}

#main form-table .paragraph {
  font-size : 1em;
  margin-bottom : 2em;
}


@media screen and (max-width : 767px){
  
  #main .form-table table{
    width : 100%;
  }
  
  #main .form-table th{
    display: block;
    width : auto;
    text-align : left;
  }
  
  #main .form-table td{
    display: block;
    width : auto;
  }
  
  #main .form-table textarea{
  }
}


/* -----------------------------------------------------------------
price対応
----------------------------------------------------------------- */
#main .price-table{
  width: 100%;
  margin-bottom : 2.0em;
  font-size : 1em; /* 16px */
}


#main .price-table table{
  margin-top : 0px;
  margin-bottom : 2.0em;
  box-sizing : border-box;

  border-top-width : 1px;
  border-left-width : 1px;
  border-top-style : solid;
  border-left-style : solid;
  border-top-color : #cccccc;
  border-left-color : #cccccc;
  border-collapse : collapse;
  border-spacing : 0px 0px;
  width : 100%;
}

#main .price-table th{
  font-weight : normal;
  background-color : #f4f4f4;
  text-align : center;
  padding: 5px 18px 5px 18px;
  border-right-width : 1px;
  border-bottom-width : 1px;
  border-right-style : solid;
  border-bottom-style : solid;
  border-right-color : #cccccc;
  border-bottom-color : #cccccc;
  width : 20%;
}

#main .price-table td{
  background-color : #ffffff;
  text-align : center;
  padding: 5px 18px 5px 18px;
  border-right-width : 1px;
  border-bottom-width : 1px;
  border-right-style : solid;
  border-bottom-style : solid;
  border-right-color : #cccccc;
  border-bottom-color : #cccccc;
  width : 33%;
}


@media screen and (max-width : 767px){
  
  #main .price-table table{
    width : 100%;
  }
  
  #main .price-table th{
    display: block;
    width : auto;
  }
  
  #main .price-table td{
    display: block;
    width : auto;
  }
  
  #main .price-table textarea{
  }
}


/* -----------------------------------------------------------------
brctl対応
----------------------------------------------------------------- */
@media screen and (min-width : 768px){
  #main .brctl{
    display: block;
  }
}
@media screen and (max-width : 767px){
  #main .brctl{
    display: none;
  }
}


/* ----------------------------------------------------------------------------------------------------------------------------------
スマホ用 
---------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width : 767px){

  html{
    font-size : 87.5%; /*レスポンシブタイプセッティングの指定 */
  }

  #logo{
    display: block;
    float: left;
    width: 280px;
/*
    width : 80%;
*/
    margin: 10px 0px 5px 10px;
  }

  #contents {
    width : 90%;
    margin : 0px auto 60px;
    text-align : left;
  }

  /* -----------------------------------------------------------------
  drawr
  ----------------------------------------------------------------- */

  #header-top {
    position: fixed;
    z-index: 100;
    top: 0px;
  }
  
  body{
    padding-top: 50px;
  }

  .dbtn {
    background: transparent url(../img/btn.png) no-repeat 0 0;
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    z-index: 200;
  }

  .dclose {
    background-position: -35px 0;
  }

  .drawr {
    display: none;
    background-color: rgba(240,240,240,1.0);
    position: absolute;
    top: 0px;
    right: 0;
    width: 45%;
    padding: 50px 0 20px 0px;
    z-index: 100;
  }
  .dmenu li {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 0.6em 0 0.6em 1em;
  }
  .dmenu li:last-child{
    border-bottom: 1px solid #ddd;
  }
  .dmenu li a {
    display: block;
    text-decoration : none;
  }

  .dmenu li a:link {color: #112299}
  .dmenu li a:visited {color: #112299}
  .dmenu li a:hover {color:#D8261F}


  /* -----------------------------------------------------------------
  nav
  ----------------------------------------------------------------- */

  nav ul li a {
    display : block;
    color : #d8c2a4;
    padding : 0.5em 0;
  }

  nav ul{
  width : 90%;
  margin : 0 auto;
  }
  nav li{
  width : 49.0%;
  float : left;
  }


  /* -----------------------------------------------------------------
 jump point
  ----------------------------------------------------------------- */

a.jump_point {height: 1px;
display: block;
padding-top: 30px;
margin-top: -30px;
}


} /* スマホ用 */





/* ----------------------------------------------------------------------------------------------------------------------------------
タブレット用 
 ---------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width : 768px) {

  html{
    font-size : 87.5%; /*レスポンシブタイプセッティングの指定 */
  }

  h2 {
    font-size : 1.25em; /* 20px */
    line-height : 1.5; /* 30px */
  }

  #contents {
    width : 90%;
    margin : 0 auto;
    text-align : left;
  }

  #logo{
    display: block;
    float: left;
    width: 480px;
    margin: 10px 0px 5px 20px;
  }


  /* -----------------------------------------------------------------
  banner
  ----------------------------------------------------------------- */

#contents .bannerarea_sub{
  width: 60%;
  margin-bottom : 3.0em;
}

#contents .bannerarea_main{
  width: 60%;
}

/* -----------------------------------------------------------------
nav
----------------------------------------------------------------- */

  nav ul li a {
    display : block;
    color : #d8c2a4;
    padding : 0.75em 0;
  }

  nav ul{
    width : 90%;
    margin : 0 auto;
  }

  nav li{
    width : 33.0%;
    float : left;
  }

  /* -----------------------------------------------------------------
  contents
  ----------------------------------------------------------------- */

#main .cmt-img2{
  width : 35%; /* 203-580 */
  text-align : left;
  float : left;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-txt2{
  width : 60%; /* 348-580 */
  margin: 0;
  float : right;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

  /* -----------------------------------------------------------------
 jump point
  ----------------------------------------------------------------- */

a.jump_point {

}



} /* タブレット用 */


/* ----------------------------------------------------------------------------------------------------------------------------------
PC用 
 ---------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) {

  html{
    font-size : 100%; /*レスポンシブタイプセッティングの指定 */
  }

  body{
    background-color: #fff8eb;
  }

  h2 {
    font-size : 1.25em; /* 20px */
    line-height : 1.5; /* 30px */
  }

  /*   header-top */

  #header-top {
    max-width:1280px;
  }

  #logo{
    display: block;
    float: left;
    width: 720px;
    margin: 10px 0px 5px 20px;
  }

  #mainimage img{
    max-width:1280px;
  }


  /* -----------------------------------------------------------------
  banner
  ----------------------------------------------------------------- */

#contents .bannerarea_sub{
  width: 100%;
  margin-bottom : 3.0em;
}

#contents .bannerarea_main{
  width: 60%;
}
  /* -----------------------------------------------------------------
  nav
  ----------------------------------------------------------------- */

  nav ul{
    width : 93.75%;/* 960-1024 */
    margin : 0 auto;
  }

  nav ul li a {
    display : block;
    color : #d8c2a4;
    padding : 1em 0;
  }

  nav li{
    width : 16.4%;
    float : left;
  }


  /* -----------------------------------------------------------------
  contents
  ----------------------------------------------------------------- */

  #contents {
    padding : 0;
    overflow : hidden;
    width : 93.75%; /* 960-1024 */
    margin-bottom : 100px;
    text-align : left;

  }

  #contents #main{ 
    width : 66%; /* 580-960 */
    margin: 0;
    float : left;
    padding : 2.08% 2.08%; /* 20-960 */
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 8px;
    box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
  }

  #contents #sub { 
    width : 32%; /* 260-960 */
    margin: 0;
    float : right;
    padding : 2.08% 2.08%; /* 20-960 */
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 8px;
    box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
  }

#main .cmt-img2{
  width : 35%; /* 203-580 */
  text-align : left;
  float : left;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}

#main .cmt-txt2{
  width : 60%; /* 348-580 */
  margin: 0;
  float : right;
  box-sizing: border-box; /*   ボックスのサイズをボーダーまで内包する */
}


  /* -----------------------------------------------------------------
 jump point
  ----------------------------------------------------------------- */

a.jump_point {

}




} /* PC用 */


  /* -----------------------------------------------------------------
  iphone5, 5sｒ対策
  ----------------------------------------------------------------- */

@media screen and (max-width : 349px) {
  .dbtn {
    display: none;
  ｝

}