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

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



:root {
  /* メインカラー・アクセントカラー */
  --gph-color-main: #2CA76E;       /* メインカラー（淡いグリーン） */
  --gph-color-accent: #52ABCB;     /* アクセントカラー（さわやかブルー） */

  /* 背景 */
  --gph-color-bg: #ffe4e1;         /* サイト全体の背景（淡いピーチ） */
  --gph-color-bg-content: #ffffff; /* 記事本文の背景 */

  /* テキスト */
  --gph-color-text: #666666;       /* 通常の文字色 */
}



/*　色の設定　*/
body.public-page {
  background-color: var(--gph-color-bg);
  color: var(--gph-color-text);
}

/* 本文の色 */
.article, #main {
  background-color: var(--gph-color-bg-content);
}

/* h2,h3の背景色と文字の色 */
.article h2 {
  background-color: var(--gph-color-main);
  color: white;
}

/* アクセントカラーを背景にするクラス */
#main .gph-accent-color-bg {
  background-color: var(--gph-color-accent);
}

/* メインカラーを背景に設定するクラス */
#main .gph-main-color-bg {
  background-color: var(--gph-color-main);
}

/* アクセントカラーを枠線にするクラス */
#main .gph-accent-border-color {
  border-color: var(--gph-color-accent);
}

/* メインカラーを枠線に設定するクラス */
#main .gph-main-border-color {
  border-color: var(--gph-color-main);
}

/* テキストカラーをアクセントカラーにするクラス */
#main .gph-accent-text-color {
  color: var(--gph-color-accent);
}

/* テキストカラーをメインカラーに設定するクラス */
#main .gph-main-text-color {
  color: var(--gph-color-main);
}




/*

=========================| フォント設定 |=========================

*/
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-black {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
}


/*

=========================| 施設一覧ページ |=========================

*/

/* カード hover 効果：画像を少し拡大 */
a.block:hover img {
  transform: scale(1.05);
  transition: transform .4s;
}

/* スペック表：行ごとに薄い横罫線 */
table tr {
  border-bottom: 1px solid #e5e7eb; /* Tailwind の gray-200 相当 */
}

/* 見出しセルを左寄せ & 太字（念押し） */
table th {
  font-weight: 600;
  text-align: left;
}




/*

=========================| サイドバー設定 |=========================

*/
/* --- PC 幅（1024px 以上） --- */
@media (min-width: 1024px) {

  /* サイドバーを左端に貼り付けて、ウィンドウ高いっぱいスクロール可に */
  #sidebar {
    position: fixed;      /* 常に表示 */
    top: 0;               /* 画面上端 */
    left: 0;              /* 画面左端 */
    width: 220px;         /* サイドバーの幅 */
    height: 100vh;        /* ビューポート高＝常に全高 */
    overflow-y: visible; /* スクロールバーは非表示 */
    margin: 0;
    padding: 0;
    z-index: 1000;        /* ほか要素より前面に */
    background: #fff;     /* 白で塗りつぶし */
    box-shadow: 4px 0 4px rgba(0,0,0,0.1); /* 薄い影で段差感 */
  }
}

#sidebar #custom_html-2 a,p {
  display: block;                 /* 行全体がリンク領域 */
  padding: 6px 12px;
  font-size: 18px;              /* 上下12px 左右20px：指でも押しやすい */
  font-weight: 500;                /* ほんのり太字で視認性UP */
  color: #666666;                  /* ダークグレー（黒より柔らかい） */
  text-decoration: none;           /* 下線を外す */
  border-left: 4px solid transparent; /* アクセント用プレースホルダ */
  transition: all .25s ease;
}

#sidebar p {
  font-size: 16px;         
}

/* ホバーで光る */
#custom_html-2 a:hover{
  background: var(--gph-color-bg);            
}

/* サイドバーのHTML群の一番下のマージンを0にする */
#custom_html-2 {
  margin-bottom: 0px;
}

#text-2 {
  margin-bottom: 0px;
}

/* サイドバー下部のの画像の位置調整 */
#media_image-2 {
  text-align: center;
  margin: 0px;
  img {
    padding: 20px;
  }
}

#media_image-3 {
  text-align: center;
  img {
    width: 50%;
  }
}


/* --- モバイル幅（1023px 以下） --- */
@media (max-width: 1023px) {

  /* サイドバーを消す */
  #sidebar { display: none; }
}



/*

=========================| フッター設定 |=========================

*/
#footer {
  position: fixed;
  bottom: 0;
  z-index: 900; 
  padding: 0px;
  margin-left: 220px;                
  width: calc(100% - 220px);         
  overflow-x: hidden;  
}

#footer-in {
  margin: 0px;
  width: 100%;
  .footer-bottom {
    margin: 0px;
    padding: 0px;
  }
  
  .footer-bottom-content {
    background-color: var(--gph-color-accent);
  }
}

#navi-footer {
  width: 100%;
}

#menu-gph-footer-navi {
  display: flex;
  flex-wrap: nowrap;

  li {
    font-size: 14px;
    width: 33.333%;
    line-height: 3em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    background-color: var(--gph-color-accent);
	
	a {
		font-size: 14px;
		color: white;
	  }
  }
}
  
#go-to-top {
  margin-bottom: 50px;
  

}

.go-to-top .go-to-top-button {
   background-color: var(--gph-color-main);
   color: white;
}

.copyright {
  margin: 0px;
}


@media (max-width: 1023px) {
  .mobile-footer-menu-buttons {
    display: none;
  }
  #footer {
    margin-left: 0px;                
    width: 100%; 
  }

  #go-to-top .go-to-top-button {
    display: block;
  }
}



/*

=========================| ヘッダー設定 |=========================

*/
/* PC 幅（1024px 以上）では既存ヘッダーを非表示に */
@media (min-width: 1024px) {
  #header { display: none; }   /* ★ ← 追加するだけ！ */
  #navi {display: none; }
  #mobile-head { display: none; }  /* モバイル用ヘッダーも当然 OFF */


}

/* ヘッダーのサイト名を消す */
#header-container .site-name-text {
  display: none;
}

/* --- モバイル幅（1023px 以下） --- */
@media (max-width: 1023px) {

  
  #navi-in ul {
    display: flex;        /* 横並び */
    flex-wrap: wrap;      /* 行が足りなければ折り返す */
    padding: 0px;       /* 上下ちょい余白、左右はゼロ */
    margin: 0;
    list-style: none;
  }
  /* ヘッダーのナビを2列4行に */
  #navi-in ul li {
    width: 33%;           /* ← 100 / 3 = 33% で常に 3 列 */
    text-align: center;   /* 見出し中央寄せ */
    background-color: var(--gph-color-main);
	  
	  a {
		font-size: 14px;
		color: white;
		font-weight: 900;
	  }
  }

  #navi {
    position: fixed;   /* ← sticky を fixed に置換 */
    top: 0;
    left: 0;
    right: 0;          /* 幅いっぱい */
    z-index: 1000;     /* ほぼ最前面で安心 */
    
    #menu-gph-grobal-navi {
      background-color: var(--gph-color-main);
	  box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    }
  }
}



/* 

リンク装飾

*/
/* リンクのアンダーバーを消す */
a {
    text-decoration: none;
}
#navi .navi-in a:hover,
#footer a:hover{
  background-color: rgba(255,255,255,.15);  /* 0〜1 で濃さ調整 */
  opacity: 0.3;
}



/*

=========================| 施設 |=========================

*/
.gph-facility-table-accent {
  
  table tr > :first-child {
    background: var(--gph-color-accent);
    font-weight: 600;
    border-color: white;
    color: white;
    width: 40%;
  }

  table tr td {
    background: white;
    font-weight: 600;
    border-color: var(--gph-color-accent);
  }
}

.gph-facility-table-main {
  
  table tr > :first-child {
    background: var(--gph-color-main);
    font-weight: 600;
    border-color: white;
    color: white;
    width: 40%;
  }

  table tr td {
    background: white;
    font-weight: 600;
    border-color: var(--gph-color-main);
  }
}



/*

=========================| 本文調整 |=========================

*/
/* 本文の一番上位の要素 */
#content-in {
  padding: 0 50px;
  width: calc(100% - 220px);/* ウィンドウの幅からサイドバー幅を引いたものを横幅に設定する */
  margin-left: 220px;/* サイドバーの幅の分マージンをとる。 */
  display: block;/*  */
  #main {
    width: 100%;/* content-inの幅いっぱい広げる */
    
    margin: 0px;
	border: 0px;
  }
}



#main .article {
  margin-bottom: 0px;
  
  .gph-fp-bottom-image {
    margin-bottom: 0px;
  }
}


.article img {
  margin: auto;
}

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

/* 本文下のテンプレ */
.article-footer {
    background-color: var(--gph-color-bg);
    margin: 0px -30px;
}

#text-3 {
	margin-bottom: 0px;
}

#text-4 {
  margin-bottom: 0px;
  padding-top: 100px;
}

/* テンプレート本文下の画像 */
.gph-fp-bottom-image img {
  width: 100%;
}

/* --- モバイル幅（1023px 以下） --- */
@media (max-width: 1023px) {
  #content-in {
    margin-left: 0px;
    width: 100%;
    margin-top: 104px;
  }
}





/* 

ボタン装飾 

*/
.gh-btn-type1 a {
  /*box-shadow: 4px 4px 4px rgba(0,0,0,0.1);*/
}
.gh-btn-type1 .wp-block-button__link{
  display: inline-block;
  padding: 12px 26px;
  font-weight: 500;
  color: #fff;
  background: var(--gph-color-accent);
  border-radius: 60px;          /* まるっこい */
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);  /* なめらか */
}

/* --------------- ホバー＆フォーカス ---------------- */
.gh-btn-type1  .btn:hover,
.gh-btn-type1  .wp-block-button__link:hover,
.gh-btn-type1  .btn:focus-visible,
.gh-btn-type1  .wp-block-button__link:focus-visible{
  transform: translateY(-3px) scale(1.04);       /* ふわっ & ちょい拡大 */
}

/* --------------- 活性化（押してる間） ---------------- */
.gh-btn-type1 .btn:active,
.gh-btn-type1 .wp-block-button__link:active{
  transform: translateY(-1px) scale(0.98);       /* ちょい沈む */
}


/* バッジ非表示 */
.grecaptcha-badge { visibility: hidden; }


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

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

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