@charset "UTF-8";
/*------------------------------------------------------
 共通
-------------------------------------------------------*/
/*------------------------------------------------------
　メインビジュアル
-------------------------------------------------------*/
#mainvisual {
  height: 700px;
  position: relative;
  display: flex; }
  #mainvisual ul.slide-main {
    width: 65%;
    height: 100%; }
    #mainvisual ul.slide-main .slick-list {
      height: 100%; }
      #mainvisual ul.slide-main .slick-list .slick-track {
        height: 100%; }
        #mainvisual ul.slide-main .slick-list .slick-track img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
  #mainvisual .catchcopy {
    width: 35%;
    padding: 20px; }
    #mainvisual .catchcopy .inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      #mainvisual .catchcopy .inner h2 {
        line-height: 2;
        font-weight: bold;
        font-size: 190%; }
        #mainvisual .catchcopy .inner h2 span {
          color: #1DB4D4; }
        @media screen and (max-width: 1024px) {
          #mainvisual .catchcopy .inner h2 {
            font-size: 150%; } }
        @media screen and (max-width: 576px) {
          #mainvisual .catchcopy .inner h2 {
            font-size: 120%; } }
  @media screen and (max-width: 768px) {
    #mainvisual {
      height: auto;
      flex-wrap: wrap; }
      #mainvisual ul.slide-main {
        width: 100%;
        order: 1;
        height: 380px; }
      #mainvisual .catchcopy {
        width: 100%;
        order: 2;
        padding: 40px 0; } }

@keyframes fadezoom {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.2);
    /* 拡大率 */ } }
.add-animation {
  animation: fadezoom 15s 0s forwards; }

/*------------------------------------------------------
　工事事例
-------------------------------------------------------*/
section.about {
  background: #E5F9FE;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 2rem; }
  section.about .cycle-wrap {
    position: relative;
    padding: 140px 0; }
    @media screen and (max-width: 768px) {
      section.about .cycle-wrap {
        padding: 50% 0 25% 0; } }
    section.about .cycle-wrap .cycle {
      border-radius: 50%;
      border: 10px solid #fff;
      overflow: hidden;
      z-index: 0; }
      section.about .cycle-wrap .cycle img {
        width: 100%;
        vertical-align: bottom; }
      @media screen and (max-width: 768px) {
        section.about .cycle-wrap .cycle {
          border: 7px solid #fff; } }
      section.about .cycle-wrap .cycle.img_01 {
        position: absolute;
        bottom: 5%;
        left: 20%;
        width: 29%; }
        @media screen and (max-width: 768px) {
          section.about .cycle-wrap .cycle.img_01 {
            bottom: 2%;
            left: 50%;
            width: 40%; } }
      section.about .cycle-wrap .cycle.img_02 {
        position: absolute;
        bottom: 13%;
        left: -7%;
        width: 33%; }
        @media screen and (max-width: 768px) {
          section.about .cycle-wrap .cycle.img_02 {
            bottom: auto;
            top: 12%;
            left: 0;
            width: 50%; } }
      section.about .cycle-wrap .cycle.img_03 {
        position: absolute;
        top: 5%;
        left: 10%;
        width: 43%; }
        @media screen and (max-width: 768px) {
          section.about .cycle-wrap .cycle.img_03 {
            bottom: auto;
            top: 3%;
            left: auto;
            right: 0;
            width: 65%; } }
  section.about .case-box {
    position: relative;
    z-index: 2;
    padding: 70px 20px;
    display: flex;
    justify-content: center;
    background: #fff;
    max-width: 640px;
    margin: 0 0 0 auto; }
    @media screen and (max-width: 768px) {
      section.about .case-box {
        margin: 20px; } }
    section.about .case-box h3 {
      font-size: 280%;
      letter-spacing: 0.1em;
      margin-bottom: 0.7em; }
      section.about .case-box h3:before {
        content: "";
        display: block;
        border-bottom: 3px solid #1DB4D4;
        width: 2em;
        margin-bottom: 0.5em; }
      @media screen and (max-width: 768px) {
        section.about .case-box h3 {
          font-size: 200%; } }
    section.about .case-box p {
      line-height: 2; }
      @media screen and (max-width: 768px) {
        section.about .case-box p {
          font-size: 90%; } }
      section.about .case-box p span {
        color: #1DB4D4; }

section.contents {
  background: #A3DCE8; }
  section.contents img.wave-top {
    vertical-align: top;
    position: relative;
    margin-top: -2px;
    width: 100%; }
  section.contents img.wave-bottom {
    vertical-align: bottom;
    position: relative;
    margin-bottom: -2px;
    width: 100%; }

a.contents-summary {
  display: block;
  text-decoration: none;
  padding: 30px;
  color: #000;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all  0.25s;
  border-radius: 30px; }
  @media screen and (max-width: 768px) {
    a.contents-summary {
      padding: 15px; } }
  a.contents-summary:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(29, 180, 212, 0.2);
    border-radius: 30px; }
  a.contents-summary .contents-summary-image {
    border-radius: 20px;
    padding-bottom: 60%;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px; }
    a.contents-summary .contents-summary-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  a.contents-summary .contents-summary-title {
    display: flex;
    justify-content: center;
    align-items: center; }
    a.contents-summary .contents-summary-title h5 {
      flex: 1; }
      a.contents-summary .contents-summary-title h5:before {
        content: "";
        display: block;
        border-bottom: 2px solid #1DB4D4;
        width: 2em;
        margin-bottom: 0.5em; }
    a.contents-summary .contents-summary-title span.more {
      width: 25%;
      border-radius: 3em;
      display: block;
      text-align: center;
      padding: 0.3em 1em;
      background: #fff;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all  0.25s; }
      a.contents-summary .contents-summary-title span.more:hover {
        background: #1DB4D4;
        color: #fff; }

/*------------------------------------------------------
　お知らせ
-------------------------------------------------------*/
h2.top-title {
  padding-left: 1em; }
  h2.top-title span {
    display: block;
    color: #1DB4D4;
    margin-left: -1.5em;
    font-size: 70%; }
    h2.top-title span:before {
      content: "";
      display: inline-block;
      width: 2.5em;
      border-top: 2px solid #1DB4D4;
      margin-right: 0.8em;
      vertical-align: middle; }

section.news {
  padding: 100px 10px; }
  @media screen and (max-width: 768px) {
    section.news {
      padding: 60px 10px; } }