@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*--------------------------------------------------------------
# 初期化
--------------------------------------------------------------*/
/*初期化（これやらないとフッター上に隙間出来る）*/
#main {
  margin: 0;
  padding: 0;
}
.content {
  margin-top: 0;
}
.footer {
  margin-top: 0px;
}
/*投稿日を非表示にする*/
.post-date {
  display: none;
}
/*更新日を非表示にする*/
.post-update{
  display: none;
}
/*横スクロール削除*/
.body{
  overflow-x: hidden;
}
/*コンテンツ背景色*/
.main{
    background-color: #66CCFF;
}

/*h2見出しカスタマイズ*/
.entry-content h2 {
  border-image: linear-gradient(to right, #0066FF 0%, #66CCFF 100%);
  border-image-slice: 8 fill;
  border-style: solid;
}
/*ボタン*/
.button a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 10px 20px;
  width: 230px;
  color: white;
  font-size: 26px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  background-color: blue;
  transition: 0.3s;
  text-decoration: none;
  border: solid 1px blue;
}
.button a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid white;
  border-right: 3px solid white;
  transform: rotate(45deg);
}
.button a:hover {
  text-decoration: none;
  background-color: #66CCFF;
  border: solid 1px #0066FF;
}
/*お知らせカードのサムネイル枠*/
.entry-card-thumb img{
  padding: 2px;
  border: 2px solid #5472cd;
}
/*--------------------------------------------------------------
# ローディング
--------------------------------------------------------------*/
@keyframes slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
#loader-slide-1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 51;
  background-color: white;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#loader-slide-1 p{
  color: #0066FF;
  font-size: 18px;
  font-weight: bold;
}
#loader-slide-1.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}

/*--------------------------------------------------------------
# スライダー
--------------------------------------------------------------*/
/* vegas style */
.header-cover {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  background: #fff;
}

.slider {
  width: 100%;
  height: 600px;/* 画像の高さ */
  background-position:center center;
  background-size: cover;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-inner {
  width: 100%;
  height: 600px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
}
.slider-inner-item {
  margin: 0;
  padding: 0;
  padding-left: 10px;
  color: white;
  font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック","メイリオ","Meiryo", "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 30px;
  font-weight: bold;
  text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}

/*--------------------------------------------------------------
# 会社案内、設備紹介
--------------------------------------------------------------*/
#about-section{
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 300px;
}
#kaisya-box, #setubi-box{
  display: inline-block;
  width: 45%;
  height: 300px;
  text-align: center;
  margin-top: -100px;
  background: url(images/gaikan01.jpg) center center / cover no-repeat;
}
#setubi-box{
  background: url(images/cln01.jpg) center center / cover no-repeat;
}
.msg-box{
  display: inline-block;
  position: relative;
  top: 200px;
  width: 90%;
  height: 250px;
  background: rgba(0,102,255,0.9);
  overflow: hidden;
  border: solid 1px #0066FF;
}
.about-title{
  padding-top: 15px;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 36px;
  color: white;
}
.sub-p{
  color: blue;
  font-size: 16px;
  font-weight: bold;
  margin-top: -10px;
  font-family: 'Roboto', sans-serif;
}
.sub-str{
  color: white;
  font-size: 18px;
  margin-bottom: 20px;
}
.sankaku{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #0066FF transparent;
}

/*--------------------------------------------------------------
# 制作実績
--------------------------------------------------------------*/
#works-section{
  position: relative;
  width: 100vw;
  height: 500px;
  margin: 0 calc(50% - 50vw);
  margin-top: 100px;
}
#works-loop_wrap{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}
.loopSlide-elm-1{
  min-width: 3000px;
  height: 300px;
  animation: slide1 60s -30s linear infinite;
}
.loopSlide-elm-2{
  min-width: 3000px;
  height: 300px;
  animation: slide2 60s linear infinite;
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

#works-section-box{
  position: relative;
  top: -300px;
  width: 100%;
  height: 300px;
  text-align: center;
}
.msg-box-3{
  width: 50%;
}

/*--------------------------------------------------------------
# 部門
--------------------------------------------------------------*/
#service-section{
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
}

#service-section-box{
  display: grid;
  grid-template-areas:
    "bumon-1 msg bumon-3"
    "bumon-2 msg bumon-4";
  grid-template-columns: 0.5fr 500px 0.5fr;
}
.section-title{
  font-size: 24px;
  text-align: center;
  line-height: 300px;
  color: white;
  font-weight: bold;
  text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}
.service-mini-box-1{
  grid-area: bumon-1;
  background: url(images/kikai.jpg) center center / cover no-repeat;
  height: 300px;
}
.service-mini-box-2{
  grid-area: bumon-2;
  background: url(images/seikan.jpg) center center / cover no-repeat;
  height: 300px;
}
.service-mini-box-3{
  grid-area: bumon-3;
  background: url(images/yuso.jpg) center center / cover no-repeat;
  height: 300px;
}
.service-mini-box-4{
  grid-area: bumon-4;
  background: url(images/doboku.jpg) center center / cover no-repeat;
  height: 300px;
}
.service-msg-box{
  grid-area: msg;
  padding: 10px 10px 50px 10px;
  text-align: center;
  background-color: white;
}
.bumon-title{
  padding-top: 100px;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 36px;
  color: black;
}
.service-section-button{
  margin-top: 100px;
}


/*--------------------------------------------------------------
# 製品紹介
--------------------------------------------------------------*/
#work-products-section{
  text-align: center;
  margin-bottom: 100px;
}
#work-products-section-box{
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 100px;
}
/*--------------------------------------------------------------
# 制作実績カード
--------------------------------------------------------------*/
.work-entry-cards{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.work-entry-card-link{
  margin-bottom: 50px;
  max-width: 320px;
  text-decoration: none;
  border: solid 1px #66CCFF;
}
.work-entry-card-link:hover{
  opacity: 0.7;
}
.widget-entry-card-works {
  margin-top: 0 !important;
  margin-left: 0;
}
.widget-entry-card-works img {
  padding: 2px;
  border: 2px solid #5472cd;
}
.work-entry-card-title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 18px;
  background-color: #0066FF;
  color: white;
  width: 100%;
  margin-left: 0px;
  text-align: center;
}
.taxonomy_genre_ribon {
  text-align: left;
  margin-top: 10px;
}
.genre_icon {
  display: inline-block;
  margin: 0 5px 5px 5px;
  padding: 5px 15px;
  background: white;
  color: #66CCFF;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px 5px 5px 5px;
}

/*--------------------------------------------------------------
# 新着情報
--------------------------------------------------------------*/
#information-section{
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
  margin-top: 100px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
}
#information-left-box{
  width: 50%;
  background-color: white;
  text-align: center;
}
#information-right-box{
  width: 50%;
  padding: 10px;
}
.button-information{
  margin-top: 100px;
  margin-bottom: 100px;
}
.information-entry-card-link{
  text-decoration: none;
}
.information-entry-card{
  margin-bottom: 10px;
}
.information-entry-card-date{
  background-color: #0066FF;
  width: 150px;
  color: white;
  text-align: center;
}

/*--------------------------------------------------------------
# お問合せ
--------------------------------------------------------------*/
#contact-link-section{
  position: relative;
  text-align: center;
  background-color: rgba(102,204,255,0.8);
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
}
#contact-link-section-filter{
  position: absolute;
  background: url(images/gaikan01.jpg) center center / cover no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#contact-link-section-box{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
  padding-bottom: 100px;
}

/*--------------------------------------------------------------
# ページヘッダー
--------------------------------------------------------------*/
.page-title-box{
  position: relative;
  width: 100%;
  height: 300px;
}
.page-title-box{
  background: url(images/gaikan01.jpg) center / cover;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
}
.page-title-box-in{
  width: 100%;
  height: auto;
  text-align: center;
  background-color: rgba(102,204,255,0.6);
}
.headtitle{
  padding: 0 10px;
  color: white;
  font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック","メイリオ","Meiryo", "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 36px;
  font-weight: bold;
  text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
}
.headsubtitle{
  color: blue;
  padding: 0 10px;
  font-size: 26px;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}


/*--------------------------------------------------------------
# 会社案内
--------------------------------------------------------------*/
.daihyou{
  text-align: right;
  font-size: 26px;
  font-weight: bold;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.column-1{
  text-align: left;
  width: 150px;
  background-color: #0066FF !important;
  color: white;
}
/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#googlemap{
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
}


/*--------------------------------------------------------------
# 製作実績種類選択メニュー
--------------------------------------------------------------*/
.works-navi-wrap{
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
  background-color: blue;
}

.works-navi{
  width: 1023px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  list-style: none;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.works-navi-btn{
  width: 150px;
  text-align: center;
  border: solid blue 1px;
}
.works-navi-btn:hover{
  background-color: #66CCFF;
}
.works-navi-btn a{
  text-decoration: none;
  color: white;
  display: block;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------
# お問合せフォーム
--------------------------------------------------------------*/
/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width: 480px){
  .inquiry th,.inquiry td {
    display:block!important;
    width:100%!important;
    border-top:none!important;
    -webkit-box-sizing:border-box!important;
    -moz-box-sizing:border-box!important;
    box-sizing:border-box!important;
  }
  .inquiry tr:first-child th{
    border-top:1px solid #d7d7d7!important;
  }
  /* 必須・任意のサイズ調整 */
  .inquiry .haveto,.inquiry .any {
    font-size:10px;
    }}
    /*見出し欄*/
    .inquiry th{
      text-align:left;
      font-size:14px;
      color:#444;
      padding-right:5px;
      width:30%;
      background:#f7f7f7;
      border:solid 1px #d7d7d7;
    }
    /*通常欄*/
    .inquiry td{
      font-size:13px;
      border:solid 1px #d7d7d7;
    }
    /*横の行とテーブル全体*/
    .entry-content .inquiry tr,.entry-content table{
      border:solid 1px #d7d7d7;
    }
    /*必須の調整*/
    .haveto{
      font-size:7px;
      padding:5px;
      background:#ff9393;
      color:#fff;
      border-radius:2px;
      margin-right:5px;
      position:relative;
      bottom:1px;
    }
    /*任意の調整*/
    .any{
      font-size:7px;
      padding:5px;
      background:#93c9ff;
      color:#fff;
      border-radius:2px;
      margin-right:5px;
      position:relative;
      bottom:1px;
    }
    /*ラジオボタンを縦並び指定*/
    .verticallist .wpcf7-list-item{
      display:block;
    }
    /*送信ボタンのデザイン変更*/
    #formbtn{
      display: block;
      padding:1em 0;
      margin-top:30px;
      width:100%;
      background:blue;
      border: solid 1px blue;
      color:white;
      font-size:18px;
      font-weight:bold;
    }
    /*送信ボタンマウスホバー時*/
    #formbtn:hover{
      background:#66CCFF;
      border: solid 1px blue;
    }


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  .works-navi{
    width: 100%;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  #about-section{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: column;
    height: auto;
    width: 90%;
    margin: 0 auto;
  }
  #kaisya-box, #setubi-box{
    width: 100%;
  }
  #setubi-box{
    margin-top: 200px;
    margin-bottom: 100px;
  }
  .sub-str{
    font-size: 16px;
  }
  .msg-box-3{
    width: 80%;
  }
  #service-section-box{
    display: grid;
    grid-template-areas:
      "bumon-1 bumon-2"
      "msg msg"
      "bumon-3 bumon-4";
    grid-template-columns: 0.5fr 0.5fr;
  }
  .section-title{
    line-height: 200px;
  }
  .service-mini-box-1,.service-mini-box-2,.service-mini-box-3,.service-mini-box-4{
    height: 200px;
  }
  .section-title{
    font-size: 20px;
  }
  .work-entry-cards{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  #information-section{
    display: block;
    width: 100%;
    margin: 0;
  }
  #information-left-box{
    width: 100%;
    padding-bottom: 10px;
  }
  #information-right-box{
    width: 100%;
  }
  .button-information{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #contact-link-section-box{
    display: block;
    width: 100%;
  }
  .button-contact-tel{
    margin-bottom: 50px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}