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

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

/*グローズグリーンのアンダーラインマーカー*/
.marker-under-green{
background:linear-gradient(transparent 60%, #ccff00 60%);
}

/* リンクの下線を消すCSS */
a {
    text-decoration: none;
}


/*グリッドエリアの作成*/
.grid-container{display: grid; /*グリッド*/
	grid-template-columns: 550px  200px 200px; /*カラム3列*/
	grid-gap: 10px; /*グリッドの隙間幅*/
	justify-content: space-between; /*コンテナを中央*/
	
}
.grid-container div:nth-child(1) {grid-row: 1/2; grid-column: 1/2;} 
.grid-container div:nth-child(2) {grid-row: 1/2; grid-column: 2/3;} /*2番目div要素を縦1～2,横2～3で作成*/
.grid-container div:nth-child(3) {grid-row: 1/2; grid-column: 3/4;}

/*グリッドアイテムを中央に配置*/
.item-center {display: grid;
	      place-items: center;}

/*問い合わせボタン*/
.toi-buttan {border: solid 2px;
             border-radius: 5px;
             padding: 10px;}





/************************************
**　　グローバルナビメニュー 
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #ccff00;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#333333; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#ccff00; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}

/*見出しデザイン*/
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
color: #333;
line-height: 1.5;
}

.article h1 {
padding: 0;
font-size: 32px;
font-weight: 400;
}

.article h2 {
position: relative;
padding: 16px 25px 16px 25px;
border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
border-bottom: 4px solid #f2ec83;
border-right: 4px solid #f2ec83;
background: #6abfc4;
color: #fff;
}

.article h3 {
position: relative;
width: 100%;
margin: 1.8em 0 1.2em;
padding: 12px 10px 10px 10px;
border: none;/* Cocoon親テーマCSSリセットのため */
}
.article h3:after {
content: "";
position: absolute;
width: 100%;
height: 5px;
left: 0;
background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #6abfc4 3px, #6abfc4 6px, white 6px, white 9px, #f2ec83 9px, #f2ec83 12px);
background: repeating-linear-gradient(135deg, #fff, #fff 3px, #6abfc4 3px, #6abfc4 6px, white 6px, white 9px, #f2ec83 9px, #f2ec83 12px);
bottom: -4px;
}

.article h4 {
margin: 1.8em 0 1em;
border-top: none;/* Cocoon親テーマCSSリセットのため */
border-bottom: solid 2px #ccff00;
}

.article h5 {
margin: 1.5em 0 1em;
padding: 0.25em 0.5em;/* 上下 左右の余白 */
border-bottom: none;/* Cocoon親テーマCSSリセットのため*/
border-left: solid 8px #ccff00;/* 左線 */
	border-bottom: solid 2px #ccff00;
}

.article h6 {
margin: 1.5em 0 1em;
padding: 0.2em 0.5em;/* 上下 左右の余白 */
border-bottom: none;/* Cocoon親テーマCSSリセットのため */
border-left: solid 4px #666;/* 左線 */
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

}

/*834px以下*/
@media screen and (max-width: 834px){

}

/*480px以下*/
@media screen and (max-width: 480px){

}