@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 */ /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/ /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px){ /*必要ならばここにコードを書く*/ } /*834px以下*/ @media screen and (max-width: 834px){ /*必要ならばここにコードを書く*/ } /*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ } /************************************ ****　モバイル表示　ヘッダーメニュー・検索アイコン ************************************/ .mobile-menu-buttons{ height:50px; box-shadow: none; } .mobile-menu-buttons > li { padding-top:0; } .menu-button{ margin: auto; } .mobile-menu-buttons .menu-button:hover{ background-color:white; } span.fas.fa-search::before{ color:#90C31F;/*検索マーク色変更はこちら*/ margin-left:1em; } span.fas.fa-bars::before{ color:#90C31F;/*ハンバーガーメニュー色変更はこちら*/ margin-right:1em; } .navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{ display:none; } /* モバイルスライドインメニュー */ .fa-times { color: #000057;/* 閉じるボタンの色 */ font-size: 0.8em; } ul.menu-drawer:before { background-color: #000057;/* Menu背景色 */ font-size: 1.2em; } ul.menu-drawer:after { background-color: #fff; } .menu-drawer a { color: #333 !important;/* 文字色 */ font-size: 1.2em; font-weight: 900; } .menu-drawer a:hover { background-color: #eff8f9; } .menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab { margin-right: 3px; } .sub-menu li { font-size: 0.8em; } /* グローバルメニュー各項目間区切り線（両端区切り有）*/ .navi-in > ul > li{ border-right: 2px solid #c0c0c0; } .navi-in > ul > li:first-child{ border-left: 2px solid #c0c0c0; } /*グローバルメニュー（サブメニュー）の区切り線*/ .navi-in > ul .sub-menu li { border-bottom: 2px groove #f5f5f5; } .navi-in > ul .sub-menu a:hover{ opacity: 0.4; } /*グローバルメニュー（サブメニュー）の上下に区切り線*/ nav#navi, .menu-header .sub-menu{ border-bottom:2px solid #c0c0c0; border-top:2px solid #c0c0c0; } /*グローバルメニューのフォントサイズ等変更*/ .navi-in .menu-header .item-label{ font-size: 18px; font-weight: bold; } /*グローバルメニューに影*/ nav#navi, .menu-header .sub-menu{ box-shadow:0 5px 12px -5px rgba(0,0,0,.6); } /***マウスオーバー時　下線が引かれる（アニメーション）****/ /*メインメニュー*/ .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 } /*マウスオーバー時 背景色が変わる*/ #navi .navi-in a:hover{ background: #FFD5EC; transition: 0.8s ; }