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

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

/*フッターロゴサイズと位置*/
.footer-bottom-logo img {
	height: auto;
	width: 250px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

/* テーブルの自動ストライプを無効化 */
table tr:nth-of-type(2n + 1) {
    background-color: inherit !important;
}

/* テーブルの1列目（左端）の背景色を指定 */
table th:first-child, 
table td:first-child {
    background-color: #F2ECC9 !important; /* 好みの色コードに変更してください */
}

/* テーブルのセル内の余白を広くする */
table th, 
table td {
    padding: 15px 20px !important; /* 上下15px、左右20pxの余白 */
}
	

/* 
* ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示
*/
div#header-in {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
  flex-direction: row;
}
.header-in .logo-header {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
  margin-right: auto;
}
.header-contact {
  /* 問い合わせボタンにパディングを追加（見た目を整える） */
  padding: 20px 8px 8px 8px ;
}
  /* 電話番号部分の見た目を整える */
.my-custom-btn {
    background-color: #ac2f4c !important; /* 好みのカラーコード */
    padding: 20px 20px 0px 8px ;
}

/************************************
** アコーディオン(トグル)の設定
************************************/

.toggle-button {
    background: #F2ECC9;
    text-align: left;
    font-weight: bold;
    box-shadow: 0 2px 6px 0px #ddd;
    border: 1px;
    padding: 1em;
}

.toggle-button::before,
.toggle-checkbox:checked~.toggle-button::before {
    display: none;
}

.toggle-button::after,
.toggle-checkbox:checked~.toggle-button::after {
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    color: #bdb76b;
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    right: 2em;
    transition: 0.3s;
}

.toggle-checkbox:checked~.toggle-button::after {
    transition: 0.3s;
    transform: rotate(180deg) translateY(3px);
}

.toggle-checkbox:checked~.toggle-content {
    background: #fff;	
    margin-top: 10px;
    border: none;
    padding: 1em;
}

.toggle-checkbox:checked~.toggle-content p:first-of-type::before {
    display: none;
}
	
/************************************
** ここまで
************************************/


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

/************************************
** ヘッダーを固定する
************************************/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }
}
	
/* ロゴの親要素：縦中央揃えを適用 */
.header-container-in.hlt-top-menu .logo-header {
  display: flex !important;
  align-items: center !important; /* 縦中央に配置 */
  padding: 20px 20px;
}

/* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100% !important;
  height: auto !important;         /* 縦横比の崩れを防止 */
  max-width: 210px !important;
  vertical-align: middle !important;
  margin: 0px 20px !important;
}

#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
}

.site-name-text-link {
  color: #fff;
}

/* ナビゲーションメニュー：縦中央に配置 */
.navi {
  display: flex;
  align-items: center; /* グローバルメニューもロゴと高さを揃えて縦中央にする */
}

.navi-in > ul .sub-menu {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}

.navi-in > ul li {
  width: auto;
  height: auto;
}

.navi-in a {
  font-size: 17px;
  position: relative;
  display: flex;
  text-decoration: none;
  color: #333;
  padding: 20px 20px !important;
}

.navi-in a:hover {
  background-color: #fcecef;
  color: #ac2f4c;
}

/* 下線の初期状態 */
.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 0px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #ac2f4c;
  transform: scaleX(0);
  transform-origin: center;
  transition: 0.4s;
}

.navi-in a:hover:before {
  transform: scaleX(1);
}

.navi-in > ul .sub-menu a {
  color: #000;
  font-size: 12px;
}

.navi-in > ul .sub-menu a:before {
  background: #42d5e7;
}

/* スクロール時の設定 */
.header-small {
  opacity: 0.9;
}

.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 130px;
  margin: 0 !important; /* スクロール時も上下マージンを0にして中央維持 */
}

/* メインコンテンツの押し下げ（ヘッダーの高さに合わせて微調整してください） */
#container {
  padding-top: 120px; /* ヘッダーが厚くなった分、潜り込まないように */
}

[id^="toc"]:target {
  padding-top: 120px; /*上のpadding-topに合わせて調整 */
  margin-top: -120px;
}

/*フッターロゴサイズ*/
.footer-bottom-logo img {
	height: auto;
	width: 200px;
	display: flex;
	align-items: center;
}

/* モバイル用 */
@media screen and (max-width: 959px) {

/************************************
** モバイルスライドインメニュー編集
************************************/

/*メニュー全体変更*/
.navi-menu-content{
	background-color: #ffffff; /*全体背景色*/
	padding: 15px 30px 15px 30px; /*全体上下左右余白*/
}
.menu-content .menu-drawer {
	padding: 30px 0px 0px 0px; /*メニュー部分上下左右余白*/
}

/*メニューリンク変更*/
.menu-item a {
	font-size: 20px; /*文字サイズ*/
	color: #525252; /*文字色*/
	padding: 30px 0px 5px 0px; /*上下左右余白*/
	border-bottom: solid; /*下線の種類*/
	border-color: #ac2f4e; /*下線の色*/
	border-width: 1px; /*下線の太さ*/
}

/*閉じるアイコン変更*/
.menu-close-button {
	color: #ac2f4e; /*閉じるアイコン色*/
	padding: 15px 0px 15px 0px; /*閉じる上下左右余白*/
	text-align: left; /*閉じるアイコン位置*/
	font-size: 20px; /*閉じるアイコンサイズ*/
}
	
/*フッターメニューの文字サイズ*/
.navi-footer-in .menu-footer li,
.navi-footer-in .menu-footer li a {
  font-size: 12px !important;
}
	
｝
	
/************************************
** モバイルスライドインメニュー編集ここまで
************************************/
	
/* ヘッダー全体を非表示にする場合 */
  header,
  .site-header,
  #header-container,
  .l-header {
    display: none !important;
  }
/* メインコンテンツの押し下げ（ヘッダーの高さに合わせて微調整してください） */
  #container {
  padding-top: 0px; /* ヘッダーが厚くなった分、潜り込まないように */
}
/* ヘッダーロゴのサイズ */
.logo img {
    padding: 10px !important; 
}
	

	
	
body {
  　margin: 0;
}
body {
 　margin: 0;
}