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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
	font-family: "UD新ゴ R", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/*パソコンメニューにアニメーションを加える*/
#navi li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 3px solid #292d48; /*下線の太さ・色*/
	display: block;
}
#navi .navi-in a:hover:after {
	/*width: 100%;*/ /*下線のアニメーションが正常に動作しないためやむなくコメントアウト*/	
	border-bottom: 3px solid #292d48; /*下線の太さ・色*/
}
/*モバイルメニューの背景の色を変える*/
.slicknav_btn {
    background-color: #000000;
}
.slicknav_menu {
	background-color: #121f5c;
}
/*電話番号*/
#menu-item-1959 .item-label {
	font-size: 1.3em!important;
}
.access-title::after {
	margin-left: 0.8em;
	content: "お気軽にご連絡ください♪";
	font-size: 0.65em;
	font-family: "トーキング", serif;
	animation: fadeIn; /* アニメーションの種類 */
  	animation-duration: 0.5s; /* アニメーションの所要時間（速度） */
  	animation-delay: 3s; /* アニメーション開始までの遅延時間 */
  	animation-iteration-count: 2; /* アニメーションの繰り返し回数 */
}
.gmap {
    height: 0;
  	overflow: hidden;
  	padding-bottom: 56.25%;
  	position: relative;
}
.gmap iframe {
  	position: absolute;
  	left: 0;
  	top: 0;
  	height: 100%;
  	width: 100%;
}
/*サイドバーでは要素を縦に並べる*/
#sidebar * {
	flex-direction: column!important;
	width: 100%!important;
}
#sidebar .wp-block-cocoon-blocks-column-left {
	margin-bottom: 1.8em!important;
}
/*ホーム以外の全ページのフェードイン*/
/*ホームではページ下部（Access/お問い合わせ）をフェードイン*/
body:not(.home) #content, .widget-page-content-bottom {
	animation: fadeIn; /* アニメーションの種類 */
  	animation-duration: 1s; /* アニメーションの所要時間（速度） */
  	animation-delay: 1.5s; /* アニメーション開始までの遅延時間 */
  	animation-iteration-count: 1; /* アニメーションの繰り返し回数 */
	animation-fill-mode: both;
}

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

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

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