@charset "UTF-8";
/*===============================================================================
リセット
===============================================================================*/
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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

strong {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

img {
  border: 0;
  max-width: 100%; }

.article ul,
.article ol {
  margin: 0px;
  padding: 0px; }

.clear {
  overflow: hidden; }

@font-face {
  font-family: number;
  src: local("Hiragino Mincho ProN");
  unicode-range: U+0030-0039; }

/*===============================================================================
ベース
===============================================================================*/
/*===============================================================================
共通レイアウト
===============================================================================*/
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: url("../img/bk01.png") center 100px repeat-y;
  background-size: 100% auto;
  line-height: 1.4em; }
  @media (max-width: 768px) {
    body {
      background: url("../img/bk01_sp.png") center 200px repeat-y; } }

@media (max-width: 768px) {
  .container {
    padding: 0px 30px; } }

body.service {
  background: url("../img/bk02.png") center 200px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.service {
      background: url("../img/bk02_sp.png") center 200px repeat-y; } }

body.idea {
  background: url("../img/bk01.png") center 800px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.idea {
      background: url("../img/bk01_sp.png") center 150px repeat-y; } }

body.example {
  background: url("../img/bk02.png") center 1100px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.example {
      background: url("../img/bk02_sp.png") center 200px repeat-y; } }

body.flow {
  background: url("../img/bk01.png") center 1000px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.flow {
      background: url("../img/bk01_sp.png") center 200px repeat-y; } }

body.overview {
  background: url("../img/bk02.png") center 200px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.overview {
      background: url("../img/bk02_sp.png") center 200px repeat-y; } }

body.news {
  background: url("../img/bk01.png") center 1500px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.news {
      background: url("../img/bk01_sp.png") center 200px repeat-y; } }

body.inquiry {
  background: url("../img/bk02.png") center -100px repeat-y;
  background-size: 100% auto; }
  @media (max-width: 768px) {
    body.inquiry {
      background: url("../img/bk02_sp.png") center 200px repeat-y; } }

@media (max-width: 992px) {
  body,
  body.service,
  body.idea,
  body.example,
  body.flow,
  body.overview,
  body.news,
  body.inquiry {
    background-size: 100% auto; } }

section:nth-child(even) {
  background: rgba(255, 255, 255, 0.2); }

.wrap70 {
  width: 70%;
  margin: 0px auto; }
  @media (max-width: 768px) {
    .wrap70 {
      width: 100%; } }

#contents p {
  color: #5c5c5c; }

.btn {
  display: flex;
  justify-content: center;
  align-items: center; }
  .btn ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center; }
  .btn li {
    list-style: none; }
    @media (max-width: 768px) {
      .btn li {
        width: 100%;
        min-width: inherit;
        margin: 0px; } }
  .btn a,
  .btn input {
    display: block;
    padding: 15px;
    margin: 10px;
    text-align: center;
    border: solid 1px #fd8984;
    min-width: 300px;
    border-radius: 0px;
    font-size: 14px;
    transition: .5s ease-in-out;
    background: #fd8984;
    color: #FFF;
    border-radius: 100px; }
    .btn a:hover,
    .btn input:hover {
      background: #00913a;
      text-decoration: none;
      color: #FFF;
      border: solid 1px #00913a; }

.error_message {
  background: linear-gradient(transparent 50%, yellow 50%); }

table tr {
  background: #FFF; }
  table tr:nth-child(even) {
    background: #f7f7f7; }
  table tr th,
  table tr td {
    padding: 20px;
    font-size: 14px; }
    @media (max-width: 768px) {
      table tr th,
      table tr td {
        display: block;
        width: 100%; } }
  table tr th {
    text-align: center;
    vertical-align: top; }
    @media (max-width: 768px) {
      table tr th {
        text-align: left;
        padding-bottom: 10px;
        border-bottom: solid 1px #ccc; } }
  table tr i {
    color: #00913a;
    margin-right: 10px; }

section:nth-child(even) table tr {
  background: #f7f7f7; }
  section:nth-child(even) table tr:nth-child(even) {
    background: #FFF; }

section:nth-child(even) table th,
section:nth-child(even) table td {
  padding: 20px;
  font-size: 14px; }

section:nth-child(even) table th {
  text-align: center; }

.title {
  flex-wrap: wrap-reverse;
  display: flex;
  margin-top: 50px; }
  .title h2,
  .title p {
    width: 100%;
    text-align: center; }
  .title p {
    font-size: 12px;
    margin: 0px;
    padding: 0px !important;
    font-family: "Aleo", serif;
    color: #00913a !important; }
  @media (max-width: 768px) {
    .title h2 {
      font-size: 18px; } }

h2 {
  font-size: 24px;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.4em; }

h3 {
  font-size: 18px;
  margin-bottom: 10px; }

p {
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.7em; }

ol {
  margin-left: 20px;
  margin-bottom: 30px; }
  ol li {
    font-size: 14px;
    margin-bottom: 10px;
    list-style: decimal;
    list-style-position: outside; }

.read {
  text-align: center;
  margin-bottom: 30px; }

@media (max-width: 768px) {
  .img {
    height: auto;
    width: auto; } }

.photo .wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }

.photo .cont {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  margin: 0 1% 2% 1%;
  width: calc(33% - 2%);
  color: #000;
  transition: .5s ease-in-out;
  background: #FFF; }
  @media (max-width: 992px) {
    .photo .cont {
      width: calc(50% - 2%); } }
  .photo .cont img {
    transition: .5s ease-in-out;
    width: 100%;
    height: auto;
    max-height: 180px;
    min-height: 180px;
    overflow: hidden;
    object-fit: cover; }
  .photo .cont .text h3 {
    padding: 10px 20px;
    text-align: left;
    margin-bottom: 0px;
    background: #f7f7f7;
    font-size: 18px; }
  .photo .cont .text p {
    text-align: left;
    padding: 10px 20px 20px 20px; }
  @media (max-width: 768px) {
    .photo .cont {
      width: 100%;
      margin: 0 2% 4% 2%; } }

.photo a.cont:hover {
  text-decoration: none; }
  .photo a.cont:hover img {
    filter: brightness(0.6);
    transform: scale(1.1); }

.photo .img {
  margin: 0px 0px -2px 0px;
  padding: 0px;
  line-height: 1em;
  overflow: hidden; }

.photo time {
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  display: block;
  font-size: 12px;
  background: rgba(205, 205, 205, 0.2); }
  @media (max-width: 768px) {
    .photo time {
      padding: 10px 10px 5px 10px;
      margin-bottom: 0px; } }
  .photo time::before {
    margin-right: 10px;
    content: " \f073";
    font-family: FontAwesome; }

.photo p {
  font-size: 14px;
  background: #FFF;
  text-align: left;
  padding: 0px 10px 10px 10px;
  margin: 0px; }
  @media (max-width: 768px) {
    .photo p {
      padding: 10px; } }

.photo.pain2 {
  margin: 30px 0px; }
  .photo.pain2 .cont {
    width: calc(50% - 2%); }
    @media (max-width: 768px) {
      .photo.pain2 .cont {
        width: 100%; } }
    .photo.pain2 .cont a {
      color: #000; }

.contactbox {
  background: rgba(205, 205, 205, 0.2);
  padding: 30px;
  margin: 50px auto 70px auto; }
  @media (max-width: 768px) {
    .contactbox {
      margin: 20px 0px 0px 0px;
      padding: 10px; } }
  @media (max-width: 768px) {
    .contactbox h2 {
      font-size: 18px; } }
  .contactbox p {
    margin-bottom: 0px; }
  .contactbox .box {
    display: flex;
    justify-content: center !important;
    flex-wrap: wrap; }
    .contactbox .box .logo {
      width: 22%;
      margin-right: 20px; }
      .contactbox .box .logo img {
        height: auto;
        width: 100%; }
      @media (max-width: 768px) {
        .contactbox .box .logo {
          width: 100%;
          text-align: center; }
          .contactbox .box .logo img {
            width: auto;
            margin-bottom: 20px; } }
    .contactbox .box .btn {
      width: 100%; }
      @media (max-width: 768px) {
        .contactbox .box .btn {
          margin-top: 20px; } }
      .contactbox .box .btn a {
        background: #FFF;
        color: #fd8984; }
        .contactbox .box .btn a:hover {
          background: #00913a;
          color: #FFF; }
    @media (max-width: 768px) {
      .contactbox .box .tel {
        width: 100%; } }
    .contactbox .box .tel p {
      font-size: 14px; }
      @media (max-width: 768px) {
        .contactbox .box .tel p {
          text-align: center; } }

.pager .wrap {
  display: flex;
  justify-content: center;
  align-items: center; }
  .pager .wrap a {
    color: #000; }
  .pager .wrap span {
    margin: 0px 5px; }
    .pager .wrap span a {
      display: block;
      background: #000;
      font-size: 14px;
      font-family: "Aleo", serif;
      color: #FFF;
      width: 40px;
      height: 40px;
      border-radius: 100px;
      display: flex;
      justify-content: center;
      align-items: center; }

.entry .title {
  padding: 10px 0px;
  margin: 0px 0px 20px 0px;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  display: block; }
  .entry .title p {
    margin-top: 10px;
    font-size: 14px;
    text-align: left; }
  .entry .title time {
    display: block;
    margin-bottom: 10px;
    font-size: 12px; }
    .entry .title time::before {
      margin-right: 10px;
      content: " \f073";
      font-family: FontAwesome; }
  .entry .title h1 {
    font-size: 22px;
    font-weight: bold; }

.entry .pic {
  text-align: center;
  margin-bottom: 20px; }

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 77%; }
  #page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px; }
    #page-top a::after {
      content: " \f077";
      font-family: FontAwesome;
      font-size: 16px; }
  #page-top a:hover {
    text-decoration: none;
    background: #999; }

/*===============================================================================
スクロール動き
===============================================================================*/
.flowlist .cont {
  opacity: 0; }

.newslist .cont {
  opacity: 0; }
  .newslist .cont:nth-child(1) {
    animation-delay: 0.5s; }
  .newslist .cont:nth-child(2) {
    animation-delay: 0.7s; }
  .newslist .cont:nth-child(3) {
    animation-delay: 0.9s; }
  .newslist .cont:nth-child(4) {
    animation-delay: 1.1s; }
  .newslist .cont:nth-child(5) {
    animation-delay: 1.3s; }
  .newslist .cont:nth-child(6) {
    animation-delay: 1.5s; }
  .newslist .cont:nth-child(7) {
    animation-delay: 1.7s; }
  .newslist .cont:nth-child(8) {
    animation-delay: 1.9s; }
  .newslist .cont:nth-child(9) {
    animation-delay: 2.1s; }
  .newslist .cont:nth-child(10) {
    animation-delay: 2.3s; }
  .newslist .cont:nth-child(11) {
    animation-delay: 2.5s; }
  .newslist .cont:nth-child(12) {
    animation-delay: 2.7s; }

.photo .cont,
.photo dl,
.photo a,
.hosyou .cont,
.hosyou dl,
.hosyou a {
  opacity: 0; }
  .photo .cont:nth-child(1),
  .photo dl:nth-child(1),
  .photo a:nth-child(1),
  .hosyou .cont:nth-child(1),
  .hosyou dl:nth-child(1),
  .hosyou a:nth-child(1) {
    animation-delay: 0.5s; }
  .photo .cont:nth-child(2),
  .photo dl:nth-child(2),
  .photo a:nth-child(2),
  .hosyou .cont:nth-child(2),
  .hosyou dl:nth-child(2),
  .hosyou a:nth-child(2) {
    animation-delay: 0.7s; }
  .photo .cont:nth-child(3),
  .photo dl:nth-child(3),
  .photo a:nth-child(3),
  .hosyou .cont:nth-child(3),
  .hosyou dl:nth-child(3),
  .hosyou a:nth-child(3) {
    animation-delay: 0.9s; }
  .photo .cont:nth-child(4),
  .photo dl:nth-child(4),
  .photo a:nth-child(4),
  .hosyou .cont:nth-child(4),
  .hosyou dl:nth-child(4),
  .hosyou a:nth-child(4) {
    animation-delay: 1.1s; }
  .photo .cont:nth-child(5),
  .photo dl:nth-child(5),
  .photo a:nth-child(5),
  .hosyou .cont:nth-child(5),
  .hosyou dl:nth-child(5),
  .hosyou a:nth-child(5) {
    animation-delay: 1.3s; }
  .photo .cont:nth-child(6),
  .photo dl:nth-child(6),
  .photo a:nth-child(6),
  .hosyou .cont:nth-child(6),
  .hosyou dl:nth-child(6),
  .hosyou a:nth-child(6) {
    animation-delay: 1.5s; }
  .photo .cont:nth-child(7),
  .photo dl:nth-child(7),
  .photo a:nth-child(7),
  .hosyou .cont:nth-child(7),
  .hosyou dl:nth-child(7),
  .hosyou a:nth-child(7) {
    animation-delay: 1.7s; }
  .photo .cont:nth-child(8),
  .photo dl:nth-child(8),
  .photo a:nth-child(8),
  .hosyou .cont:nth-child(8),
  .hosyou dl:nth-child(8),
  .hosyou a:nth-child(8) {
    animation-delay: 1.9s; }
  .photo .cont:nth-child(9),
  .photo dl:nth-child(9),
  .photo a:nth-child(9),
  .hosyou .cont:nth-child(9),
  .hosyou dl:nth-child(9),
  .hosyou a:nth-child(9) {
    animation-delay: 2.1s; }
  .photo .cont:nth-child(10),
  .photo dl:nth-child(10),
  .photo a:nth-child(10),
  .hosyou .cont:nth-child(10),
  .hosyou dl:nth-child(10),
  .hosyou a:nth-child(10) {
    animation-delay: 2.3s; }
  .photo .cont:nth-child(11),
  .photo dl:nth-child(11),
  .photo a:nth-child(11),
  .hosyou .cont:nth-child(11),
  .hosyou dl:nth-child(11),
  .hosyou a:nth-child(11) {
    animation-delay: 2.5s; }
  .photo .cont:nth-child(12),
  .photo dl:nth-child(12),
  .photo a:nth-child(12),
  .hosyou .cont:nth-child(12),
  .hosyou dl:nth-child(12),
  .hosyou a:nth-child(12) {
    animation-delay: 2.7s; }

/*===============================================================================
ヘッダー
===============================================================================*/
header {
  background: #FFF;
  padding: 20px 0px 0px 0px; }
  header .container {
    max-width: 1200px; }
    @media (max-width: 992px) {
      header .container {
        position: relative;
        z-index: 1; } }
  .second header {
    padding-bottom: 10px; }
    @media (max-width: 992px) {
      .second header {
        padding-top: 15px;
        padding-bottom: 0px; } }
  @media (max-width: 992px) {
    header {
      padding: 0px; } }
  header .cont {
    text-align: center; }
    .second header .cont h1 img {
      width: 160px;
      height: auto; }
    @media (max-width: 992px) {
      header .cont h1 img {
        width: 140px;
        height: auto;
        margin-bottom: 10px; } }
    header .cont p {
      margin: 10px;
      font-size: 14px;
      text-align: center; }
      @media (max-width: 576px) {
        header .cont p {
          font-size: 12px; } }
  header #nav-drawer input,
  header #nav-drawer label {
    display: none; }
  @media (max-width: 1010px) {
    .second header #nav-drawer {
      top: 20px; } }
  @media (max-width: 1010px) {
    header #nav-drawer {
      left: 10px;
      top: 30px;
      position: fixed;
      /*中身*/ }
      header #nav-drawer .nav-unshown {
        display: none; }
      header #nav-drawer #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
        margin: 0px 0px 0px 10px; }
      header #nav-drawer #nav-open span,
      header #nav-drawer #nav-open span:before,
      header #nav-drawer #nav-open span:after {
        position: absolute;
        height: 3px;
        /*線の太さ*/
        width: 25px;
        /*長さ*/
        border-radius: 3px;
        background: #00913a;
        display: block;
        content: '';
        cursor: pointer; }
      header #nav-drawer #nav-open span:before {
        bottom: -8px; }
      header #nav-drawer #nav-open span:after {
        bottom: -16px; }
      header #nav-drawer #nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out; }
      header #nav-drawer #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9998;
        width: 90%;
        max-width: 330px;
        height: 100%;
        background: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        order: -1;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%); }
      header #nav-drawer #nav-input:checked ~ #nav-close {
        display: block;
        opacity: .5; }
      header #nav-drawer #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); } }
  header nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0px 0px 0px;
    padding: 0px; }
    .second header nav ul {
      margin-top: 0px;
      padding-top: 10px; }
    header nav ul li {
      margin: 5px 5px 5px 5px;
      padding: 0px; }
      @media (max-width: 1010px) {
        header nav ul li {
          width: 100%; } }
      header nav ul li a {
        color: #000;
        display: block;
        text-decoration: none;
        font-size: 14px;
        padding: 5px 10px;
        position: relative;
        transition: all .3s ease; }
        header nav ul li a:hover {
          text-decoration: none;
          color: #00913a; }
        header nav ul li a::before, header nav ul li a::after {
          border-bottom: solid 2px #00913a;
          bottom: -2px;
          content: "";
          display: block;
          position: absolute;
          transition: all .3s ease;
          -webkit-transition: all .3s ease;
          width: 0; }
        header nav ul li a::before {
          left: 50%; }
        header nav ul li a::after {
          right: 50%; }
        header nav ul li a:hover::before, header nav ul li a:hover::after {
          width: 50%; }
        .toppage header nav ul li a.toppage,
        .service header nav ul li a.service,
        .idea header nav ul li a.idea,
        .example header nav ul li a.example,
        .flow header nav ul li a.flow,
        .overview header nav ul li a.overview,
        .news header nav ul li a.news,
        .inquiry header nav ul li a.inquiry {
          border-bottom: solid 2px #00913a;
          color: #00913a; }
        @media (max-width: 1010px) {
          header nav ul li a {
            font-size: 14px;
            padding: 10px 0px;
            text-align: center;
            margin-bottom: 10px; } }

/*===============================================================================
フッター
===============================================================================*/
footer {
  background: #FFF;
  border-top: solid 5px #f7f7f7;
  margin: 30px 0px 0px 0px;
  padding: 50px; }
  @media (max-width: 992px) {
    footer {
      padding: 30px 0px 30px 0px; } }
  footer .cont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    footer .cont p {
      margin-bottom: 0px; }
  footer .link {
    width: 70%; }
    @media (max-width: 992px) {
      footer .link {
        width: 100%; } }
    footer .link ul {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 20px; }
      @media (max-width: 992px) {
        footer .link ul {
          justify-content: center; } }
      @media (max-width: 992px) {
        footer .link ul.sns {
          justify-content: center; } }
      footer .link ul li {
        font-size: 14px; }
        @media (max-width: 768px) {
          footer .link ul li {
            font-size: 12px; } }
        footer .link ul li a {
          color: #000;
          display: inline-block;
          padding: 0px 20px;
          margin-bottom: 10px; }
          footer .link ul li a:nth-child(odd) {
            border-right: solid 1px #ccc; }
            @media (max-width: 992px) {
              footer .link ul li a:nth-child(odd) {
                border: none; } }
          @media (max-width: 992px) {
            footer .link ul li a {
              padding: 0px 10px; } }
        footer .link ul li.insta {
          padding: 0px 10px; }
          footer .link ul li.insta a {
            margin-left: 10px;
            border-right: none;
            padding: 0px; }
          footer .link ul li.insta a::before {
            margin-right: 10px;
            content: " \f16d";
            font-family: FontAwesome; }
        footer .link ul li.facebook a {
          margin-left: 10px;
          border-right: none;
          padding: 0px; }
        footer .link ul li.facebook a::before {
          margin-right: 10px;
          content: " \f230";
          font-family: FontAwesome; }
  @media (max-width: 992px) {
    footer .info {
      text-align: center;
      width: 100%;
      margin-bottom: 20px; } }
  footer .info span {
    font-size: 22px;
    font-weight: bold; }
  footer .copy {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    footer .copy p {
      margin: 0px 20px;
      font-size: 14px; }
      @media (max-width: 768px) {
        footer .copy p {
          font-size: 12px; } }
      footer .copy p a {
        color: #000;
        text-decoration: underline; }

/*===============================================================================
トップページ
===============================================================================*/
.toppage .topimg {
  min-height: 650px;
  position: relative;
  background: #FFF; }
  @media (max-width: 768px) {
    .toppage .topimg {
      min-height: 300px; } }
  .toppage .topimg .read {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 650px; }
    @media (max-width: 768px) {
      .toppage .topimg .read {
        min-height: 600px; } }
    @media (max-width: 768px) {
      .toppage .topimg .read img {
        width: 60%; } }
  .toppage .topimg .scrollbtn a {
    paddng-top: 60px;
    font-family: "Aleo", serif;
    color: #FFF;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 24px); }
  .toppage .topimg .scrollbtn a span {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;
    box-sizing: border-box; }

  .toppage .topimg .read {
  display: none;
  }
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0; } }

.toppage .linklist p.catch {
  font-size: 12px;
  margin: 0px;
  font-family: "Aleo", serif;
  color: #00913a !important;
  margin: 60px 0px 10px 0px; }

.toppage .linklist p {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px; }

@media (max-width: 768px) {
  .toppage .linklist .btn li {
    width: 100%;
    margin-bottom: 10px; } }

.toppage .insta h2 {
  font-family: "Aleo", serif; }

.toppage .insta .btn a::before {
  margin-right: 10px;
  content: " \f16d";
  font-family: FontAwesome;
  font-size: 20px; }

.toppage .insta ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px; }
  .toppage .insta ul li {
    list-style: none;
    margin: 10px;
    padding: 0px; }
    @media (max-width: 768px) {
      .toppage .insta ul li {
        width: calc(50% - 10px); } }
    .toppage .insta ul li img {
      width: 100%;
      height: auto; }

.toppage .news {
  margin-bottom: 30px; }
  .toppage .news .newslist {
    margin-bottom: 30px; }
  .toppage .news dl {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px;
    margin-bottom: 0px; }
    .toppage .news dl:nth-child(odd) {
      background: #f7f7f7; }
    .toppage .news dl dt {
      width: 20%; }
      @media (max-width: 768px) {
        .toppage .news dl dt {
          width: 100%; } }
    .toppage .news dl dd {
      width: calc(100% - 20%);
      margin-bottom: 0px; }
      @media (max-width: 768px) {
        .toppage .news dl dd {
          width: 100%; } }
      .toppage .news dl dd a {
        color: #000; }
      .toppage .news dl dd a::before {
        margin-right: 10px;
        content: " \f105";
        font-family: FontAwesome; }

/*===============================================================================
セカンド共通
===============================================================================*/
.second section {
  padding: 60px 0px; }
  .second section:nth-child(odd) {
    background: rgba(205, 205, 205, 0.2); }
  .second section p:last-child {
    margin-bottom: 0px; }

.second .secondtopimg {
  background: #00913a;
  padding: 0px 10px;
  background: linear-gradient(45deg, #00913a, #f4d31e, #fd8984);
  background-size: 600% 600%;
  animation: AnimationName 10s ease infinite;
  z-index: 2;
  min-height: 210px;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 768px) {
    .second .secondtopimg {
      min-height: 15px; } }

@keyframes AnimationName {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
  .second .secondtopimg .read {
    max-width: 500px;
    margin: 0px auto;
    padding: 40px 0px;
    color: #FFF; }
    .second .secondtopimg .read h1 {
      font-size: 24px;
      margin: 0px; }
    .second .secondtopimg .read p {
      margin-bottom: 0px;
      margin-top: 30px;
      color: #FFF !important; }

.second .textbox p {
  margin-bottom: 30px; }

/*===============================================================================
施工の流れ
===============================================================================*/
.flow .flowlist .cont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
  background: rgba(205, 205, 205, 0.2);
  padding: 20px;
  position: relative; }
  .flow .flowlist .cont::after {
    content: " \f078";
    font-family: FontAwesome;
    position: absolute;
    bottom: -35px;
    left: calc(50% - 20px);
    font-size: 40px;
    color: #00913a; }
  .flow .flowlist .cont:last-child::after {
    content: none; }
  .flow .flowlist .cont .img {
    width: 40%; }
    .flow .flowlist .cont .img img {
      width: 100%;
      height: auto; }
    @media (max-width: 768px) {
      .flow .flowlist .cont .img {
        width: 100%;
        text-align: center;
        margin-bottom: 10px; } }
  .flow .flowlist .cont dl {
    width: 58%; }
    @media (max-width: 768px) {
      .flow .flowlist .cont dl {
        width: 100%; } }
    .flow .flowlist .cont dl dt {
      font-size: 18px;
      margin-bottom: 10px;
      background: #00913a;
      color: #FFF;
      padding: 5px 10px 5px 5px;
      display: flex;
      justify-content: flex-start;
      align-items: center; }
      .flow .flowlist .cont dl dt span {
        background: #FFF;
        font-size: 14px;
        color: #00913a;
        margin-right: 10px;
        padding: 0px 10px;
        font-family: "Aleo", serif; }
    .flow .flowlist .cont dl dd {
      font-size: 14px; }

.flow .hosyou dl dt {
  font-size: 18px;
  margin-bottom: 10px;
  background: #00913a;
  color: #FFF;
  padding: 5px 10px 5px 5px;
  text-align: center; }

/*===============================================================================
事務所概要
===============================================================================*/
@media (max-width: 768px) {
  .overview .member .col-sm-6 {
    margin-bottom: 30px; } }

.overview .member h3 {
  font-size: 18px;
  margin-bottom: 10px;
  background: #00913a;
  color: #FFF;
  padding: 5px 10px 5px 5px;
  text-align: center; }

.overview .member h4 {
  margin-bottom: 20px; }

.overview #map {
  height: 400px;
  width: 100%; }

/*===============================================================================
お知らせ
===============================================================================*/
.news .newslist .cont {
  background: #f7f7f7;
  padding: 20px; }
  .news .newslist .cont:nth-child(even) {
    background: #FFF; }
  .news .newslist .cont time {
    font-size: 12px; }
    .news .newslist .cont time::before {
      margin-right: 10px;
      content: " \f073";
      font-family: FontAwesome; }
  .news .newslist .cont h1 a {
    color: #000;
    padding: 20px 0px;
    display: block; }
    .news .newslist .cont h1 a::before {
      margin-left: 10px;
      content: " \f105";
      font-family: FontAwesome;
      margin-right: 10px;
      font-size: 20px; }

/*===============================================================================
施工事例・お客様の声
===============================================================================*/
.example .box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .example .box .pic {
    width: 350px; }
    @media (max-width: 992px) {
      .example .box .pic {
        width: 100%;
        margin-bottom: 20px;
        text-align: center; } }
  .example .box .text {
    width: calc(100% - 370px); }
    @media (max-width: 992px) {
      .example .box .text {
        width: 100%; } }

.example .none {
  display: none; }

/*===============================================================================
お問い合わせ
===============================================================================*/
.inquiry table {
  width: 100%; }
  .inquiry table th {
    text-align: left; }

.inquiry .text02 {
  width: 80%; }

.inquiry .text01 {
  width: 100%;
  height: 300px; }
  
  
  
/*# sourceMappingURL=layout.css.map */