@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/***マウスオーバー時　下線が引かれる（アニメーション）****/
/*メインメニュー*/
.menu-header .menu-item{
  text-decoration: none;
  color: #5bc8ac;
}
.item-label{
  position: relative;
  z-index: 1;
}
.item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0%;/*初期状態・下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.menu-header .menu-item:hover .item-label:after{
 width: 100%;/*hover時に表示*/
}

/*サブメニュー*/
.sub-menu .item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0% !important;/*初期状態・下線非表示*/
  height: 2px;/*下線の太さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.sub-menu .menu-item:hover .item-label:after{
  width:80% !important;/*hover時に表示*/
  margin-left:-10px
}

/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
  table-layout: fixed;
}

.required-contactform7{
  padding: 5px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}

.unrequired-contactform7{
  padding: 5px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}

.table-contactform7 th{
  font-weight:bold;
}

.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}

/* cf7セレクトの枠線指定 */
.table-contactform7 select{
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #2b2b2b;
  padding: 8px 10px 7px;
}

select{
height: 50px;
}

.table-contactform7 input,
.table-contactform7 select{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.btn-cf7 {
  border-radius: 10px;
}

@media screen and (min-width: 900px){
  .table-contactform7 th{
    width:28%;
    }
}

@media screen and (max-width: 900px){
  .table-contactform7{
    display:block;
    }

      .table-contactform7 tbody,
      .table-contactform7 tr{
        display: block;
        width: 100%;
        }

          .table-contactform7 th{
            width:100%;
            display:block;
            margin: 0 auto;
            border:none;
        }

          .table-contactform7 td{
            display: list-item;
            list-style-type:none;
            margin:0;
            padding:0;
            width: 100%;
            border-top: none !important;
        }
}
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

/*見出しデザインを変える場合はこれより下に記載してください*/
.article h2 {
  color: #ffffff;
  background: #9eceff;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}
.article h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color:  #666666;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #9eceff;/*左線*/
}

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

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

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