/*---メイン画像---*/
section#top{
  width: calc(100% - 170px);
  padding: 0 85px;
  background: url(../img/index/bg_main.jpg) center top / cover no-repeat;
}
section#top>div{
  padding-bottom: 20px;
}
  section#top .message{
    padding: 155px 0 80px 0;
    margin: 0 auto;
    /*max-width: 450px;*/
    font-size: 16px;
    line-height: 2em;
    text-align: center;
    color: #fff;
  }
    section#top .message .companyName{
      color: #b8312b;
      font-weight: bold;
      font-size: 18px;
    }
@media screen and (max-width:500px){
  section#top .message{
    padding: 115px 10px 40px 10px;
    font-size: 14px;
  }
  section#top .message p{
    display: inline;
  }
}

section#top ul{
  display: flex;
  justify-content: center;
}
  section#top li{
    width: calc(33.333333% - 110px);
    margin: 0 14px;
    padding: 40px;
    background-color: rgba(0,0,0,0.3);
    border: solid 1px rgba(255,255,255,0.5);
  }
    section#top li h3{
      color: #fff;
      font-size: 16px;
      text-align: center;
      padding: 15px 0 45px 0;
    }
    section#top li p{
      color: #fff;
      line-height: 2em;
    }
@media screen and (max-width:1000px){
  section#top{
    width: calc(100% - 20px);
    padding: 0 10px;
  }
  section#top li{
    width: calc(33.333333% - 102px);
    margin: 0 10px;
  }
}
@media screen and (max-width:819px){
  section#top{
    width: calc(100% - 40px);
    padding: 0 20px;
  }
  section#top ul{
    flex-wrap: wrap;
  }
  section#top li{
    width: calc(100% - 82px);
    margin: 0 0 20px 0;
  }
  section#top li:last-child{
    margin-bottom: 0;
  }
}


/*---各セクションのタイトル---*/
section h2{
  width: 100%;
  height: 176px;
  text-align: center;
  overflow: hidden;
}
  section h2 .title{
    position: relative;
    top: -25px;
    margin: 0 auto;
    color: #fff;
    background-color: rgba(66,66,66,0.6);
    border: solid 1px rgba(255,255,255,0.4);
    border-radius: 50%;
    height: 224px;
    width: 224px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  }
    section h2 .title .jp{
      font-size: 30px;
      width: 100%;
      line-height: 1em;
      padding: 5px 0 15px 0;
    }
    section h2 .title .en{
      font-size: 20px;
      width: 100%;
      line-height: 1em;
      padding-bottom: 20px;
    }
/*----- バララックス -----*/
section h2 .title.delighter{
  transition: all 1.5s ease-out;
  transform: translateY(-25%);
  opacity: 0;
}
section h2 .title.delighter.started{
  transform: none;
  opacity: 1;
}
section h2 .title.delighter.ended{
  transform: none;
  opacity: 1;
}
/*----------------------*/


/*---経営理念---*/
section#philosophy h2{
  background: url(../img/index/title_philosophy.jpg) center center / cover no-repeat;
  border-top: solid 1px #fff;
}
  section#philosophy .content{
    width: 100%;
    margin: 40px auto;
  }
    section#philosophy li{
      display: flex;
      justify-content: center;
      width: 100%;
      margin-bottom: 40px;
    }
    section#philosophy li:last-child{
      margin-bottom: 0;
    }
      /*イメージ画像*/
      section#philosophy li .photo{
        width: 45%;
        max-width: 286px;
        z-index: 1;
      }
        section#philosophy li .photo .square{
          width: 100%;
          padding-top: 100%;
        }
      section#philosophy li.philosophy01 .photo{
        background: url(../img/index/image_philosophy_01.jpg) center center / cover no-repeat;
      }
      section#philosophy li.philosophy02 .photo{
        background: url(../img/index/image_philosophy_02.jpg) center center / cover no-repeat;
      }
      section#philosophy li.philosophy03 .photo{
        background: url(../img/index/image_philosophy_03.jpg) center center / cover no-repeat;
      }
      /*アイキャッチ*/
      section#philosophy li .bar{
        width: 5%;
        max-width: 44px;
        background-color: #b3b3b3;
        z-index: 2;
      }
        section#philosophy li .bar .eyeCatch{
          width: 100%;
          height: 53px;
          background-color: #b8312b;
        }
      /*説明文*/
      section#philosophy li .text{
        width: calc(50% - 20px);
        padding: 15px 0 20px 20px;
        color: #424242;
      }
        section#philosophy li .text h3{
          font-size: 17px;
          margin-bottom: 30px;
        }
        section#philosophy li .text div{
          line-height: 1.8em;
        }
          section#philosophy li .text h4{
            font-size: 14px;
            color: #b8312b;
          }
@media screen and (max-width:600px){
  section#philosophy .content{
    margin-top: 20px;
  }
  section#philosophy li{
    flex-wrap: wrap;
  }
  /*イメージ画像*/
  section#philosophy li .photo{
    width: 100%;
    max-width: 100%;
  }
    section#philosophy li .photo .square{
      padding-top: 40%;
    }
  /*アイキャッチ*/
  section#philosophy li .bar{
    width: 100%;
    max-width: 100%;
    height: 45px;
  }
    section#philosophy li .bar .eyeCatch{
      width: 53px;
      height: 45px;
    }
  /*説明文*/
  section#philosophy li .text{
    width: 100%;
    padding: 15px 0;
  }
    section#philosophy li .text h3{
      margin-bottom: 8px;
    }
}
/*----- バララックス -----*/
@media screen and (min-width:601px){
  section#philosophy li .photo.delighter{
    transition: all 1s ease-out;
    transform: translateX(20%);
    opacity: 0;
  }
  section#philosophy li .photo.delighter.started{
    transform: none;
    opacity: 1;
  }
  section#philosophy li .photo.delighter.ended{
    transform: none;
    opacity: 1;
  }
  
  section#philosophy li .bar .eyeCatch.delighter{
    transition: all 1s ease-out;
    height: 0;
    opacity: 1;
  }
  section#philosophy li .bar .eyeCatch.delighter.started{
    transform: none;
    height: 45px;
    opacity: 1;
  }
  section#philosophy li .bar .eyeCatch.delighter.ended{
    transform: none;
    opacity: 1;
  }
  
  section#philosophy li .text.delighter{
    transition: all 1s ease-out;
    transform: translateY(20%);
    opacity: 0;
  }
  section#philosophy li .text.delighter.started{
    transform: none;
    opacity: 1;
  }
  section#philosophy li .text.delighter.ended{
    transform: none;
    opacity: 1;
  }
}
@media screen and (max-width:600px){
  section#philosophy li .photo.delighter{
    transition: all 1s ease-out;
    transform: translateX(-20%);
    opacity: 0;
  }
  section#philosophy li .photo.delighter.started{
    transform: none;
    opacity: 1;
  }
  section#philosophy li .photo.delighter.ended{
    transform: none;
    opacity: 1;
  }
  
  section#philosophy li .bar .eyeCatch.delighter{
    transition: all 1s ease-out;
    width: 0;
    opacity: 1;
  }
  section#philosophy li .bar .eyeCatch.delighter.started{
    transform: none;
    width: 53px;
    opacity: 1;
  }
  section#philosophy li .bar .eyeCatch.delighter.ended{
    transform: none;
    opacity: 1;
  }
  
  section#philosophy li .text.delighter{
    transition: all 1s ease-out;
    transform: translateX(20%);
    opacity: 0;
  }
  section#philosophy li .text.delighter.started{
    transform: none;
    opacity: 1;
  }
  section#philosophy li .text.delighter.ended{
    transform: none;
    opacity: 1;
  }
}
/*----------------------*/


/*---運用レポート---*/
section#report h2{
  background: url(../img/index/title_performanceReport.jpg) center center / cover no-repeat;
}
  section#report .content{
    width: 100%;
    max-width: 510px;
    margin: 30px auto;
  }
    section#report .list{
      margin-bottom: 15px;
    }
      section#report .list li{
        width: 100%;
        text-align: center;
        -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
                border-radius: 10px;
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
      }
        section#report .list li a{
          display: block;
          width: calc(100% - 20px);
          padding: 10px;
          font-size: 18px;
        }
  
      section#report li.monthly{
        border: solid 1px rgba(97,111,118,0.5);
        margin-bottom: 5px;
        background: url(../img/common/arrow_blue_right.svg) 15px 15px no-repeat;

        background-color: #fff;
        background-image: url(../img/common/arrow_blue_right.svg);
        background-repeat: no-repeat;
        background-position: 15px 13px;
        background-size: 11px 21px;
      }
      section#report li.monthly:hover{
        background-color: #eee;
        background-position: 20px 13px;
      }
        section#report li.monthly a:link   { text-decoration:none; color: #414141; }
        section#report li.monthly a:visited{ text-decoration:none; color: #414141; }
        section#report li.monthly a:active { text-decoration:none; color: #414141; }
        section#report li.monthly a:hover  { text-decoration:none; color: #414141; }
  
      section#report li.archive{
        border: solid 1px #98bec9;
        color: #fff;

        background-color: #98bec9;
        background-image: url(../img/common/arrow_white_right.svg);
        background-repeat: no-repeat;
        background-position: 15px 13px;
        background-size: 11px 21px;
      }
      section#report li.archive:hover{
        background-color: #8cafb9;
        background-position: 20px 13px;
      }
        section#report li.archive a:link   { text-decoration:none; color: #ffffff; }
        section#report li.archive a:visited{ text-decoration:none; color: #ffffff; }
        section#report li.archive a:active { text-decoration:none; color: #ffffff; }
        section#report li.archive a:hover  { text-decoration:none; color: #ffffff; }
  
      section#report .attention h3{
        font-size: 12px;
        color: #708c94;
        margin-bottom: 5px;
      }
      section#report .attention ul{
        list-style: disc;
        margin-left: 1.5em;
      }
        section#report .attention li{
          font-size: 10px;
          color: #3f3f3f;
        }
/*----- バララックス -----*/
section#report .list li:nth-child(2n).delighter{
  transition: all 1s ease-out;
  transform: translateX(-20px);
  opacity: 0;
}
section#report .list li:nth-child(2n).delighter.started{
  transform: none;
  opacity: 1;
}
section#report .list li:nth-child(2n).delighter.ended{
  transform: none;
  opacity: 1;
}

section#report .list li:nth-child(2n-1).delighter{
  transition: all 1s ease-out;
  transform: translateX(20px);
  opacity: 0;
}
section#report .list li:nth-child(2n-1).delighter.started{
  transform: none;
  opacity: 1;
}
section#report .list li:nth-child(2n-1).delighter.ended{
  transform: none;
  opacity: 1;
}

section#report .attention.delighter{
  transition: all 2s ease-out;
  transform: translateY(50px);
  opacity: 0;
}
section#report .attention.delighter.started{
  transform: none;
  opacity: 1;
}
section#report .attention.delighter.ended{
  transform: none;
  opacity: 1;
}
/*-----------------------*/


/*---会社概要---*/
section#about h2{
  background: url(../img/index/title_aboutUs.jpg) center center / cover no-repeat;
}
  section#about table{
    border-collapse: separate;
    border-spacing: 5px;
    max-width: 650px;
    font-size: 16px;
    margin: 35px auto;
  }
    section#about th,
    section#about td{
      -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
              border-radius: 10px;
    }
    section#about th{
      text-align: center;
      vertical-align: middle;
      width: 90px;
      padding: 15px;
      color: #fff;
      background-color: #b8312b;
    }
    section#about td{
      text-align: center;
      padding: 15px 20px;
      background-color: #fff;
    }
@media screen and (max-width:650px){
  section#about table{
    font-size: 14px;
  }
}
@media screen and (max-width:500px){
  section#about table{
    width: 100%;
    max-width: 100%;
  }
  section#about th,
  section#about td{
    display: block;
  }
  section#about th{
    width: calc(100% - 30px);
    margin-bottom: 5px;
  }
  section#about td{
    width: calc(100% - 40px);
    margin-bottom: 5px;
  }
}
/*----- バララックス -----*/
section#about th.delighter{
  transition: all 1s ease-out;
  transform: translateX(-20px);
  opacity: 0;
}
section#about th.delighter.started{
  transform: none;
  opacity: 1;
}
section#about th.delighter.ended{
  transform: none;
  opacity: 1;
}

section#about td.delighter{
  transition: all 1s ease-out;
  transform: translateX(20px);
  opacity: 0;
}
section#about td.delighter.started{
  transform: none;
  opacity: 1;
}
section#about td.delighter.ended{
  transform: none;
  opacity: 1;
}
/*-----------------------*/


/*---お問い合わせ---*/
section#contact{
  background: url(../img/index/bg_contactUs.jpg) center top / cover no-repeat;
}
section#contact h2{
  background-color: rgba(66,66,66,0.6);
}
  section#contact .cage{
    margin: 100px auto;
  }
  /*フォーム*/
  section#contact #input_form{
    max-width: 420px;
    margin: 0 auto;
  }
  section#contact #input_form input,
  section#contact #input_form textarea{
    width: calc(100% - 22px);
    border: solid 1px #a9aaa4;
    background-color: #fdfff0;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #666;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "平成ゴシック", arial, helvetica, clean, sans-serif;
  }
  section#contact #input_form .err{
    width: calc(100% - 20px);
    color: #fff;
    background-color: #ff3939;
    padding: 5px 10px;
    margin: 0 auto 5px auto;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
  }
  /*確認画面*/
  section#contact #confirmation{
    max-width: 420px;
    margin: 0 auto;
  }
  section#contact #confirmation p{
    text-align: center;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: bold;
    background-color: rgba(255,255,255,0.5);
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
  }
  section#contact #confirmation dl{
    width: 100%;
    font-size: 18px;
    text-align: left;
    margin: 20px auto 0 auto;
  }
  section#contact #confirmation dt{
    padding: 10px;
    color: #fff;
    background-color: #9f978b;
    border: solid 1px #9f978b;
    -webkit-border-top-left-radius : 5px;
    -webkit-border-top-right-radius: 5px;
       -moz-border-top-left-radius : 5px;
       -moz-border-top-right-radius: 5px;
            border-top-left-radius : 5px;
            border-top-right-radius: 5px;
  }
  section#contact #confirmation dd{
    padding: 10px;
    background-color: #fff;
    border: solid 1px #9f978b;
    margin-bottom: 20px;
    -webkit-border-bottom-left-radius : 5px;
    -webkit-border-bottom-right-radius: 5px;
       -moz-border-bottom-left-radius : 5px;
       -moz-border-bottom-right-radius: 5px;
            border-bottom-left-radius : 5px;
            border-bottom-right-radius: 5px;
  }
  section#contact #confirmation dd:last-child{
    margin-bottom: 0;
  }
  /*送信完了画面*/
  section#contact #sended_info{
    text-align: left;
    width: calc(100% - 40px);
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255,255,255,0.5);
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
  }
  section#contact #sended_info h3{
    font-size: 20px;
    margin-top: 2em;
    padding-bottom: 5px;
    border-bottom: solid 1px #999;
  }
  section#contact #sended_info h4{
    font-size: 17px;
    margin-top: 1em;
  }
  section#contact #sended_info p{
    font-size: 14px;
    margin-top: 1em;
  }
  /*ボタン共通*/
  section#contact .btn{
    width: 140px;
    margin: 0 auto;
    padding: 5px 0 0 0;
    color: #fff;
    text-align: center;
    font-size: 15px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
  }
  section#contact .btn:hover{
    background-color: #666;
  }
  section#contact .btn a{
    display: block;
    padding: 5px;
    /*font-size: 14px;*/
  }
  section#contact .btn a:link   { text-decoration:none; color: #ffffff; }
  section#contact .btn a:visited{ text-decoration:none; color: #ffffff; }
  section#contact .btn a:active { text-decoration:none; color: #ffffff; }
  section#contact .btn a:hover  { text-decoration:none; color: #ffffff; }
  /*確認ボタン*/
  section#contact .check{
    background-color: #b8312b;
  }
  section#contact .check:hover{
    background-color: #666;
  }
  /*戻るボタン*/
  section#contact .back{
    background-color: #8c8d84;
    margin-right: 5px;
  }
  section#contact .back:hover{
    background-color: #666;
  }
  /*送信ボタン*/
  section#contact .send{
    background-color: #b8312b;
  }
  section#contact .send:hover{
    background-color: #666;
  }
  /*戻るボタン と 送信ボタン*/
  section#contact ul.btn_set{
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
  section#contact ul.btn_set li{
    display: inline-block;
  }