body {
  font-family: Raleway, Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #333;
  margin: 0
}

.gray {
  color: #F7F7F7
}

.bg-gray {
  background-color: #F7F7F7
}

* {
  font-weight: normal
}

h1,
.h1 {
  font-size: 2em;
  line-height: 1.5em
}

h2,
.h2 {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 600
}

h3,
.h3 {
  font-size: 1.2em;
  line-height: 1em
}

h4,
.h4 {
  font-size: 1em;
  line-height: 0.75em
}

p,
.p,
th,
td {
  font-size: 0.9em
}

small,
.small,
textarea,
address {
  font-size: 0.7em;
  line-height: 0.5em
}

small {
  margin: 0;
  line-height: 0.5em
}

b {
  font-weight: 600
}

th {
  width: 20%;
  line-height: 0.5em
}

td {
  padding: 1% 1% 1% 4%;
  line-height: 0.5em
}

a {
  text-decoration: none;
  color: #333
}

.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 1em
}

.list-tb-padding li {
  padding-top: 2%;
  padding-bottom: 2%
}

@media screen and (min-width: 768px) {
  h1,
  .h1 {
    font-size: 3em;
    line-height: 1.5em
  }
  h2,
  .h2 {
    font-size: 2em;
    line-height: 1.25em;
    font-weight: 600
  }
  h3,
  .h3 {
    font-size: 1.5em;
    line-height: 1em
  }
  h4,
  .h4 {
    font-size: 1em;
    line-height: 0.75em
  }
  p,
  .p,
  th,
  td {
    font-size: 1em
  }
  small,
  .small,
  textarea,
  address {
    font-size: 0.8em;
    line-height: 0.5em
  }
}

img {
  max-width: 100%
}

.sp-menu-button {
  display: block;
  color: #F08309
}

.pc {
  display: none
}

main {
  margin: 0 auto 10%;
  width: 90%
}

@media screen and (min-width: 768px) {
  .sp-menu-button {
    display: none
  }
  .pc {
    display: block
  }
  main {
    width: 95%;
    max-width: 1024px
  }
}

.css-bar {
  display: inline-block;
  position: relative;
  margin: 0 5px 2px 0;
  padding: 0;
  background: #F08309
}

.css-bar,
.css-bar:before,
.css-bar:after {
  width: 14px;
  height: 2px
}

.css-bar:before,
.css-bar:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #F08309
}

.css-bar:before {
  margin-top: -6px
}

.css-bar:after {
  margin-top: 4px
}

.here {
  border-bottom: 1px #F08309 solid
}

.top0 {
  margin-top: 0;
  padding-top: 0
}

.bottom0 {
  margin-bottom: 0;
  padding-bottom: 0
}

.t-center {
  text-align: center
}

.t-right {
  text-align: right;
  padding-right: 5%
}

.t-left {
  text-align: left;
  padding-left: 5%
}

.c-wrapper {
  padding: 2% 2.5%;
  margin: 1%;
  overflow: hidden
}

.c-wrapper2 {
  padding: 4% 5%;
  margin: 2%;
  overflow: hidden
}

.c-wrapper3 {
  padding: 8% 10%;
  margin: 3%;
  overflow: hidden
}

.c-wrapper-resp {
  padding: 0;
  margin: 0;
  overflow: hidden
}

.c-wrapper2-resp {
  padding: 0;
  margin: 0;
  overflow: hidden
}

.c-wrapper3-resp {
  padding: 0;
  margin: 0;
  overflow: hidden
}

.c-title {
  border-bottom: 1px solid gray;
  text-shadow: lightgray 3px 3px 3px;
  box-shadow: lightgray 0px 6px 10px -5px
}

.c-title-green {
  border-bottom: 1px solid #096A09;
  text-shadow: lightgray 3px 3px 3px;
  box-shadow: lightgray 0px 6px 10px -5px
}

.br-man {
  display: inline
}

#contact-form input,
#contact-form textarea {
  width: 100%
}

.nav-box {
  text-align: center
}

.nav-box li {
  display: inline-block;
  font-size: 0.8em;
  line-height: 4em;
  margin: 0 0.3em
}

.nav-box li>a {
  width: 100%;
  display: block
}

.btn-circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.title-box {
  width: 150px;
  height: 150px;
  background-color: #ffd700;
  text-align: center;
  line-height: 4.5em;
  margin: 1em auto
}

.com-header {
  text-align: right
}

.header-logomark {
  width: 33%;
  margin: 2px;
  max-width: 180px
}

@media screen and (min-width: 768px) {
  .c-wrapper,
  .c-wrapper-resp {
    padding: 2% 2.5%;
    margin: 1%;
    overflow: hidden
  }
  .c-wrapper2,
  .c-wrapper2-resp {
    padding: 4% 5%;
    margin: 2%;
    overflow: hidden
  }
  .c-wrapper3,
  .c-wrapper3-resp {
    padding: 8% 10%;
    margin: 3%;
    overflow: hidden
  }
  .br-man {
    display: none
  }
  .nav-box {
    text-align: center
  }
  .nav-box li {
    display: inline-block;
    font-size: 1em;
    line-height: 6;
    margin-left: 1em
  }
  .btn-circle {
    width: 85px;
    height: 85px
  }
  .title-box {
    width: 180px;
    height: 180px;
    line-height: 3.8em
  }
  .inner-main {
    width: 95%;
    max-width: 600px;
    margin: 0 auto
  }
}

.box-shadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 5px;
  background: white
}

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

.title {
  line-height: 0
}

.f-right {
  float: right
}

.f-left {
  float: left
}

.under-line {
  border-bottom: solid 1px lightgray
}

.upper-line {
  border-top: solid 1px lightgray
}

.nonstyle {
  list-style: none
}

.list-bottom-box {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-align-items: stretch;
  -webkit-justify-content: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  color: white
}

.list-bottom-box li {
  flex-grow: 1;
  font-size: 10px;
  line-height: 1.4em;
  padding: 1em 0
}

.list-bottom-box li:hover {
  background-color: #0B708D;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  opacity: 1
}

.btn-rect-header {
  text-align: center
}

.btn-rect-header span {
  background: #F08309;
  height: 34px;
  border: none;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  font-size: 14px;
  padding: 0.5em;
  text-align: center;
  border-radius: 5px;
  color: white
}

.btn-rect {
  text-align: center
}

.btn-rect span {
  display: inline-block;
  background: burlywood;
  width: 40%;
  height: 2em;
  border: none;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  font-size: 14px;
  padding-top: 0.2em;
  text-align: center;
  border-radius: 10px;
  color: white
}

.more-info {
  height: 0
}

.simple-table {
  width: 100%;
  border-top: 1px solid lightgray
}

.simple-table th {
  border-right: 1px solid lightgray
}

.simple-table th,
.simple-table td {
  border-bottom: 1px solid lightgray
}

.row-per,
.row-per-top {
  letter-spacing: -1em
}

.row-per:after,
.row-per-top:after {
  display: block;
  clear: both;
  content: "";
  font-size: 0
}

.col-10 {
  width: 10%
}

.col-20 {
  width: 20%
}

.col-30 {
  width: 30%
}

.col-40 {
  width: 40%
}

.col-50 {
  width: 49.2%
}

.col-60 {
  width: 60%
}

.col-70 {
  width: 70%
}

.col-80 {
  width: 80%
}

.col-90 {
  width: 90%
}

.col-100 {
  width: 100%
}

.col-10,
.col-20,
.col-30,
.col-40,
.col-50,
.col-60,
.col-70,
.col-80,
.col-90,
.col-100 {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  letter-spacing: normal
}

.row-per-top .col-10,
.row-per-top .col-20,
.row-per-top .col-30,
.row-per-top .col-40,
.row-per-top .col-50,
.row-per-top .col-60,
.row-per-top .col-70,
.row-per-top .col-80,
.row-per-top .col-90,
.row-per-top .col-100 {
  vertical-align: top
}

.rogomark {
  margin: 7% auto 3%;
  width: 50%;
  max-width: 350px
}

.about-block{
  width:320px; 
}

/*# sourceMappingURL=giraffe.css.map */