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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*ページタイトルを中心にする*/
.article h1{
	text-align: center;
	padding-bottom: 20px;
}

/*メインコンテンツ*/
#content{
	margin-top: 0;
	background-color: #fff;
}

/*メインコンテンツの上マージンをゼロにする*/
#footer{
	margin-top: 0;
}

/*見出しh2のデザイン
.article h2 {
	color: #666666;/*文字色
	border: solid 3px #c3e1ec;/*線色
	padding: 7px;/*文字周りの余白
	border-radius: 0.5em;/*角丸
	background-color: transparent;
	text-align: center;
}*/

.article h2{
	font-size: 1.5em;
	background-color: transparent;
	text-align: center;
	margin-bottom: 10px;
}

/*ボタンに影をつける*/
.btn{
	border: none;
	border-bottom: 4px solid #a9a9a9;
}
.btn-l::after{
	display: none;
}

/*メニュー関係*/
#navi{
	margin-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
}

/*ナビメニューの項目の左右のマージンと下ボーダーの設定*/
#navi .item-label{
	margin-right: 10px;
	margin-left: 10px;
	border-bottom: solid 3px #7dc9bd;
}
/*ホバー時の挙動をリセット*/
#navi .navi-in a, #navi .navi-in a:hover{
	background-color: unset;
	transition: none;
}
/*ホバー時に下ボーダーの色が変わる設定*/
#navi .item-label:hover{
	border-bottom: solid 3px #f8bf5c;
	transition: all 0.3s;
}
/*ナビの間隔設定*/
.navi-in > ul{
	justify-content: space-evenly;
}


/*テーブルヘッダーの下ボーダーの設定*/
.wp-block-table thead{
	border-bottom: 1px solid #666666;
}

/*テーブルの見出しの設定*/
.wp-block-table thead th{
	background-color: #e6efdf;
	border-right: solid 1px white;
}
.wp-block-table thead th:last-of-type{
	border-right:1px solid var(--cocoon-x-thin-color);
}

/*パンくずリストのカテゴリーを非表示にする*/
#breadcrumb > div.breadcrumb-item, #breadcrumb > div.breadcrumb-home > span{
	display: none;
}

/*固定ページの投稿日を非表示にする*/
.type-page .date-tags{
	display: none;
}

/*フッターの背景に画像を設定してグラデーションを*/
#footer{
	height: 200px;
	background: linear-gradient(to top, transparent 0%, transparent 50%, #fff 100%), url(https://office-kuramochi.com/wp-content/uploads/2024/10/header-image4-scaled.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/*ヘッダーに住所テキストを追加する*/
/*ヘッダーをグリッドレイアウトにする*/
.head-grid-container{
	display: grid;
	grid-template-columns: 40% 40%;
	justify-content: center;
	padding-bottom: 20px;
}
.head-grid-container div:nth-child(1) {
	grid-row: 1/1; grid-column: 1/2;
}
.head-grid-container div:nth-child(2) {
	grid-row: 1/1; grid-column: 2/2;
}
/*サイトロゴの調整*/
.logo-image{
	display: grid;
	align-items: center;
	justify-items: left;
}
.site-name{
	padding: 0;
}
/*住所テキストの調整*/
.head-info{
	text-align: right;
	/*font-weight: bold;*/
	color: #000;
}
.head-info > a{
	color:#000;
	text-decoration: none;
}

/*お問い合わせパターン*/
/*3カラムのリンク文字の色を変えて下線を消す*/
.otoiawase > div > div > p > a{
color: #666666;
text-decoration: none;
}
/*3カラムの画像下のマージン設定*/
.otoiawase .column-wrap > div > *:first-child{
margin-bottom: 5px;
}
/*3カラムの画像のhover設定*/
.otoiawase img:hover{
opacity: 0.7;
transition: all 0.4s;
}
/*問い合わせのLINEの外部リンクマークを消す*/
.otoiawase > div > .wp-block-cocoon-blocks-column-right > p > a > svg{
display: none;
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*ナビメニューの調整*/
	#navi .item-label{
		max-width: 75%;
		margin: 0 auto;
		border-bottom: solid 3px #7dc9bd;
	}
	#navi .navi-in > .menu-mobile li{
		margin-top: 5px;
	}
	/*モバイルヘッダーを非表示にする設定*/
	#menu-mobile{
		display: none;
	}
	body{
		margin-top: 0;
	}
	/*フッターの文字を白くする*/
	#footer, .navi-footer-in a{
		color: white;
	}
	
		
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*メインロゴのサイズ設定*/
	#header-in > div.logo.logo-header.logo-image > a > span > img{
		height: unset;
		width: 80%;
	}
	
	/*フッターメニューを横並びにするための調整*/
	.navi-footer-in > .menu-footer li.menu-item{
		width: unset;
	}
	
	/*test*/
	.head-info{
		font-size: 80%;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*メインロゴのサイズ設定*/
	#header-in > div.logo.logo-header.logo-image > a > span > img{
		height: unset;
		width: 100%;
	}
	
	/*モバイルスライドインメニューを右スライドに設定*/
	.navi-menu-content{
		left: auto;
		right: 0;
		background-color: #1e7cd1;
		transform: translateX(101%);
	}
	/*モバイルスライドインメニューの背景色と行高さ*/
	.navi-menu-content{
		background-color: rgba(255,255,255,0.95);
		line-height: 2;
	}
	/*モバイルスライドインメニューの特定項目を太字にする*/
	#navi-menu-content > ul > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-718 > a,
	#navi-menu-content > ul > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-719 > a,
	#navi-menu-content > ul > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-721 > a,
	#navi-menu-content > ul > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-720 > a,
	#navi-menu-content > ul > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-721{
		font-weight: bold;
	}
	/*モバイルヘッダーを再表示させる設定*/
	#menu-mobile{
		display: flex;
	}
	.home{
		margin-top: unset;
	}
	/*モバイルヘッダーの設定あれこれ*/
	#menu-mobile{
		background-color: transparent;
	}
	.mobile-menu-buttons, .menu-button{
		box-shadow: none;
		margin: 3px 3px 0 auto;
		width: 53px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.2);
    	border-radius: 20px;
	}
	#navi{
		display: none;
	}
	
	/*ヘッダーの住所テキストを非表示にする*/
	.head-info{
		display: none;
	}
	.head-grid-container{
		display: block;
		padding-bottom: 0;
	}
	.logo-image{
		display: block;
		align-items: center;
		justify-items: center;
	}
	#header{
		height: 100%;
	}
	.logo-header img{
		width: 85%;
	}
	#header-in > div.head-grid-container > div.logo.logo-header.logo-image{
		padding-top: 30px;
	}
	
	
}