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

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

/* --- PCのみ表示する要素を指定するためのクラス（ここから）--- */
.for-pc
{
	display:initial; /* displayのデフォルト値 */
}

.for-mobile
{
	display:none;
}
/* --- PCのみ表示する要素を指定するためのクラス（ここまで）--- */

#header-container /* メニューまで含む */
{
	/* メニューを固定するための指定 */
	position:sticky;
	top:0;
	z-index:calc(infinity);
}

#header /* header要素が他にもあるので、idで指定 */
{
	border-top:8px solid rgba(0, 134, 210, 1);
	margin-bottom:13px; /* 「メールでのお問い合わせ」ボタンとメニュー間の余白 */
}

/* --- ロゴを左端に、問い合わせボタンなどを右端に表示する（ここから）--- */
#header-in 
{
	flex-direction:row; /* ロゴと問い合わせボタンなどを横並びにする */
}

.logo 
{
	margin-right:auto; /* ロゴと問い合わせボタンなどを両端にする */
}
/* --- ロゴを左端に、問い合わせボタンなどを右端に表示する（ここまで）--- */

/* --- 問い合わせボタンなど（ここから）--- */
#contact
{
	text-align:right;
}

#phone
{
	font-size:30px;
}

#mail img
{
	width:224px;
}
/* --- 問い合わせボタンなど（ここまで）--- */

.menu-item a:hover
{
	/* メニューにカーソルを乗せた時のアニメーション */
	background:#9ed8ff !important;
	transition:all 0.5s ease;
}

.menu-item .item-label
{
	font-size:14px; /* メニュー（日本語部分）のフォントサイズ */
}

.navi-in > ul li
{
	width:156px !important; /* メニュー項目が増え、Cocoonデフォルトの176pxだと折り返されたため縮小 */
}

/* --- メインコンテンツの上下の余白を小さくする（ここから）--- */
main
{
	padding-top:0px !important;
	padding-bottom:0px !important;
}

article
{
	margin-bottom:0px !important;
}

.entry-content
{
	margin-top:0px;
	margin-bottom:0px;
}

.footer-bottom
{
	margin-top:0px;
}
/* --- メインコンテンツの上下の余白を小さくする（ここまで）--- */

table
{
	margin: 0 auto; /* 中央寄せ */
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
/* --- スマホのみ表示する要素を指定するためのクラス（ここから）--- */
.for-pc
{
	display:none;
}

.for-mobile
{
	display:initial; /* displayのデフォルト値 */
}
/* --- スマホのみ表示する要素を指定するためのクラス（ここまで）--- */

#header-container
{
	position: static; /* メニューの固定を解除（positionのデフォルト値） */
}
	
/* --- 「ロゴを左端に、問い合わせボタンなどを右端に表示する」を戻す（ここから）--- */
/* これをやっておかないと、問い合わせボタンなどを非表示にしていても、ロゴが真ん中から少しずれる */
#header-in 
{
	flex-direction:column; /* cocoonのデフォルト値 */
}

.logo 
{
	margin-right:0; /* cocoonのデフォルト値 */
}
/* --- 「ロゴを左端に、問い合わせボタンなどを右端に表示する」を戻す（ここまで）--- */

/* --- スマホ版メニューのデザイン（ここから）--- */
.menu-drawer a 
{
	line-height:26px;
	border-bottom:solid 1px #e6e6e6;
}

.navi-menu-content 
{
	background-color:#eff9ff;
	opacity:0.8 !important;
}
/* --- スマホ版メニューのデザイン（ここまで）--- */

/* --- 各ページのトップにある「代表挨拶」などの画像のデザイン（ここから）--- */
.page-title-img
{
	/* cocoonだと、なぜかカバーブロックに「min-height:430px」が設定されている。 */
	/* これだと大き過ぎたので、固定ページの編集画面で「min-height:300px」を指定している。 */
	/* スマホだと、これでも大きいので、min-heightを最小にしている。 */
	min-height:0px !important;
}

.page-title-img .has-large-font-size
{
	font-size:var(--wp--preset--font-size--medium) !important; /* largeだと「情報セキュリティ基本方針」がはみ出すのでmediumにする。 */
}
/* --- 各ページのトップにある「代表挨拶」などの画像のデザイン（ここまで）--- */
	
/* --- 基本中央寄せ、表の中身のみ左寄せにする（ここから）--- */
p, figure, h2
{
	text-align:center !important;
}

figure img
{
	display:inline !important;
}
	
td
{
	text-align:left !important;	
}

form td p /* 問い合わせフォームの中身は、tdの指定だけでは反映されなかったので個別に指定 */
{
	text-align:left !important;
}
/* --- 基本中央寄せ、表の中身のみ左寄せにする（ここまで）--- */

td:first-child
{
	/* 1列目のみ折り返しをしない */
    width:0px;
    white-space:nowrap;
}

h2
{
	font-size:18px !important; /* 20pxだと「個人情報の第三者への開示・提供の禁止」が2行になるのでmediumにする。 */	
}