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

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

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

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

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

/************************************
** 固定ページのスタイル：お知らせの前にcontent、そのため少し下に余白
************************************/
.page-content {
    padding: 20px; /* 余白をつける */
    font-size: 16px; /* 文字サイズ調整 */
    color: #333; /* 文字色を見やすく */
    margin-bottom: 30px; /* 下に余白をつける */
}


/************************************
** ニュースのスタイル設定
************************************/
/* 更新履歴・お知らせタイトル */
.news-title {
    font-size: 16px; /* フォントサイズを少し大きくする */
    font-weight: bold;
    text-align: left; /* 左寄せに変更 */
    color: #008DB7;
    margin: 0;
}

/* お知らせの全体の背景と枠線 */
.news-items {
    background-color: #A7D4E9; /* 背景色を#A7D4E9に設定（#008DB7より少し明るいグレー寄り） */
    border: 2px solid #008DB7; /* 枠を#008DB7に設定 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 各お知らせ記事のスタイル */
.news-item {
    padding: 10px 15px; /* 上下のパディングを減らして、左右の余白を少し増やす */
    margin-bottom: 15px; /* 下のマージンを少し減らす */
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 15px; /* 要素間のスペースを少し縮める */
    justify-content: flex-start; /* 左寄せに変更 */
    flex-wrap: wrap; /* 複数行に分けるために必要 */
    background-color: white; /* 日付、タイトル、抜粋の背景色を白に変更 */
    border-radius: 5px; /* 角を丸める */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 記事同士に軽い影をつける */
}

/* 日付のスタイル */
.news-date {
    font-size: 16px; 
    color: #555;
    white-space: nowrap; /* 改行を防ぐ */
}

/* 記事抜粋のスタイル */
.news-excerpt {
    font-size: 16px; /* 抜粋のフォントサイズも少し小さくする */
    color: #555;
    margin: 0;
    text-align: left; /* 抜粋を左寄せ */
}

/* 記事抜粋と日付の間に「|」を追加 */
.news-excerpt::before {
    content: " | "; /* 「|」を追加 */
    margin: 0 8px; /* 「|」の前後のスペースを縮める */
    font-size: 16px;
    color: #008DB7;
}

/* リンクのスタイル - 下線を消す */
.news-title a {
    text-decoration: none; /* リンクの下線を消す */
    color: #008DB7; /* リンクの色 */
}

/* リンクのホバー時のスタイル */
.news-title a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}



/************************************
** グローバルメニュー（お知らせの青系と統一）
************************************/
/* ヘッダーの背景色 */
#header-container {
  background-color: #fff !important;
  border-bottom: 1px solid #008DB7;
}

.navi {
  background-color: #fff;
}

.navi-in {
  background-color: #fff !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  border-bottom: 2px solid #008DB7;
}

.navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  position: relative;
}

.navi-in > ul li:hover {
  background-color: #A7D4E9;
}

.navi-in > ul .caption-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}

.navi-in > ul .caption-wrap > div {
  width: 100%;
}

.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  width: 240px;
  list-style: none;
  padding: 0;
  background-color: #A7D4E9;
  z-index: 99;
  text-align: left;
}

.navi-in > ul .sub-menu li {
  width: auto;
  background-color: #A7D4E9;
}

.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}

.navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}

.navi-in a {
  position: relative;
  color: #008DB7;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

.navi-in a:hover {
  background-color: #008DB7;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

/* PCではモバイルメニューを完全非表示 */
@media screen and (min-width: 768px) {
  .menu-mobile {
    display: none !important;
  }
}

/* モバイルではPCメニューを完全非表示 */
@media screen and (max-width: 767px) {
  .menu-pc {
    display: none !important;
  }
}

#footer {
  background-color: #A7D4E9;
}

/************************************
** footer　エリア
************************************/
/* footerウィジェットエリア幅調整 */
.footer-widgets {
  display: flex;
  justify-content: space-between;
  gap: 0;
}

.footer-left { 
  width: 30%; 
  flex-shrink: 0;
}

.footer-center { 
  width: 10%; 
  flex-shrink: 0;
}

.footer-right { 
  width: 60%; 
  flex-shrink: 0;
}

/* 1028px以下は各エリアを100%に */
@media (max-width: 1028px) {
  .footer-widgets {
    flex-direction: column;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
  }
}



/************************************
** 訪看ヘッダー・フッター　（固定ID：14）キーカラー：＃FFa100
************************************/
/* ページID 14 ヘッダー背景画像*/
.page-id-14 .header {
    background-image: url('https://kei-ai.jp/wp-content/uploads/2025/03/b9d35d2459660b3d462a8e4393c7c3ff.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/************************************
** 固定ページID14用のグローバルメニュー
************************************/
/* 追随でナビ色おかしくなるためheader-container の背景色を強制的に変更*/
/* 固定ページID14用のグローバルメニュー */
.page-id-14 #header-container {
  background-color: #fff !important;
  border-bottom: 1px solid #FF8C00;
}

.page-id-14 .navi {
  background-color: #fff;
}

.page-id-14 .navi-in {
  background-color: #fff !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.page-id-14 .navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  border-bottom: 2px solid #FF8C00;
}

.page-id-14 .navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  position: relative;
}

.page-id-14 .navi-in > ul li:hover {
  background-color: #FFF3E0;
}

.page-id-14 .navi-in > ul .caption-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}

.page-id-14 .navi-in > ul .caption-wrap > div {
  width: 100%;
}

.page-id-14 .navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  width: 240px;
  list-style: none;
  padding: 0;
  background-color: #FFF3E0;
  z-index: 99;
  text-align: left;
}

.page-id-14 .navi-in > ul .sub-menu li {
  width: auto;
  background-color: #FFF3E0;
}

.page-id-14 .navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}

.page-id-14 .navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}

.page-id-14 .navi-in a {
  position: relative;
  color: #FF8C00;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

.page-id-14 .navi-in a:hover {
  background-color: #FF8C00;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

/* PCではモバイルメニューを完全非表示 */
@media screen and (min-width: 768px) {
  .page-id-14 .menu-mobile {
    display: none !important;
  }
}

/* モバイルではPCメニューを完全非表示 */
@media screen and (max-width: 767px) {
  .page-id-14 .menu-pc {
    display: none !important;
  }
}

.page-id-14 #footer {
  background-color: #FFF3E0;
}

/* リンクタイトル */
/* シンプルで洗練された見出しデザイン（左寄せ、オレンジライン） */
.page-id-14 .is-style-light-box.has-box-style > span {
  font-size: 32px;  /* さらに視認性を高める */
  font-weight: bold;
  color: #002147;  /* 濃紺で落ち着いた印象 */
  text-align: left;
  display: block;
  padding-bottom: 8px;
  border-bottom: 3px solid #FF8C00; /* より強調したオレンジライン */
}

/* キャッチフレーズ */
/* キャッチフレーズボックス（影のみで強調） */
.page-id-14 .is-style-square-brackets-box.has-box-style {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a; /* 視認性の高い濃いめの黒 */
  text-align: center;
  padding: 18px 28px; /* 余白を確保 */
  background: rgba(255, 255, 255, 0.6); /* 透明感のある白 */
  border: none; /* 枠線なし */
  border-radius: 8px; /* ほんの少し丸み */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 影でさりげなく強調 */
  display: inline-block;
}

/* ホバー時のエフェクト（少し明るく、影を強調） */
.page-id-14 .is-style-square-brackets-box.has-box-style:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}

/* 自動追加される「」を削除 */
.page-id-14 .is-style-square-brackets-box.has-box-style::before,
.page-id-14 .is-style-square-brackets-box.has-box-style::after {
  content: none !important;
}

/* 強みのグループ設定 */
/* 見出しのデザイン（背景色を削除） */
.page-id-14 .wp-block-group .wp-block-heading {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background: none; /* 背景色を削除 */
  padding-bottom: 8px;
  margin-bottom: 16px;
  display: block;
  position: relative;
  width: 100%;
}

/* 見出しのオレンジ下線（グループ幅いっぱい） */
.page-id-14 .wp-block-group .wp-block-heading::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #FF8C00;
  position: absolute;
  bottom: -5px;
  left: 0;
}

/* グループ全体の枠線・背景を削除 */
.page-id-14 .wp-block-group {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 各コンテンツの枠・背景・影を維持（修正） */
.page-id-14 .wp-block-group .wp-block-group {
  background-color: #fff3e0 !important;
  border: 2px solid rgba(255, 140, 0, 0.6) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
}

.page-id-14 .article h2 {
  background-color: #FF8C00; /* h2の背景色をオレンジに変更 */
}

/* 見出しボーダー色変更 */
.page-id-14 .article h3 {
  border-left: 7px solid #FF8C00;
  border-right: 1px solid #FF8C00;
  border-top: 1px solid #FF8C00;
  border-bottom: 1px solid #FF8C00;
}

.page-id-14 .article h4 {
  border-top: 2px solid #FF8C00;
  border-bottom: 2px solid #FF8C00;
}

.page-id-14 .article h5 {
  border-bottom: 2px solid #FF8C00;
}

.page-id-14 .article h6 {
  border-bottom: 1px solid #FF8C00;
}

@media (max-width: 768px) { 
  .column-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .column-wrap > * {
    width: 100% !important;
  }
}



/************************************　
** 固定ID：393　居宅　キーカラー　＃FF356b
************************************/
/* ページID 393 背景画像*/
.page-id-393 .header {
    background-image: url('https://kei-ai.jp/wp-content/uploads/2026/04/careplan.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;


/************************************
** 固定ページID393用のグローバルメニュー
************************************/
/* 追随でナビ色おかしくなるためheader-container の背景色を強制的に変更*/
/* 固定ページID393用のグローバルメニュー */
.page-id-393 #header-container {
  background-color: #fff !important;
  border-bottom: 1px solid #FF6F91; /* 優しいピンク */
}

.page-id-393 .navi {
  background-color: #fff;
}

.page-id-393 .navi-in {
  background-color: #fff !important;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.page-id-393 .navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  border-bottom: 2px solid #FF6F91;
}

.page-id-393 .navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  position: relative;
}

.page-id-393 .navi-in > ul li:hover {
  background-color: #FFE4EC;
}

.page-id-393 .navi-in > ul .caption-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}

.page-id-393 .navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  width: 240px;
  list-style: none;
  padding: 0;
  background-color: #FFE4EC;
  z-index: 99;
  text-align: left;
}

.page-id-393 .navi-in > ul .sub-menu li {
  width: auto;
  background-color: #FFE4EC;
}

.page-id-393 .navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}

.page-id-393 .navi-in a {
  position: relative;
  color: #FF6F91;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

.page-id-393 .navi-in a:hover {
  background-color: #FF6F91;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.page-id-393 #footer {
  background-color: #FFE4EC;
}

.page-id-393 .is-style-light-box.has-box-style > span {
  font-size: 32px;
  font-weight: bold;
  color: #002147;
  text-align: left;
  display: block;
  padding-bottom: 8px;
  border-bottom: 3px solid #FF6F91;
}

.page-id-393 .is-style-square-brackets-box.has-box-style {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  text-align: center;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  display: inline-block;
}

.page-id-393 .wp-block-group .wp-block-heading {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background: none;
  padding-bottom: 8px;
  margin-bottom: 16px;
  display: block;
  position: relative;
  width: 100%;
}

.page-id-393 .wp-block-group .wp-block-heading::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #FF6F91;
  position: absolute;
  bottom: -5px;
  left: 0;
}

.page-id-393 .wp-block-group .wp-block-group {
  background-color: #FFE4EC !important;
  border: 2px solid rgba(255, 111, 145, 0.6) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
}

.page-id-393 .article h2 {
  background-color: #FF6F91;
}

.page-id-393 .article h3 {
  border-left: 7px solid #FF6F91;
  border-right: 1px solid #FF6F91;
  border-top: 1px solid #FF6F91;
  border-bottom: 1px solid #FF6F91;
}

.page-id-393 .article h4 {
  border-top: 2px solid #FF6F91;
  border-bottom: 2px solid #FF6F91;
}

.page-id-393 .article h5 {
  border-bottom: 2px solid #FF6F91;
}

.page-id-393 .article h6 {
  border-bottom: 1px solid #FF6F91;
}




/************************************
** 薬局ヘッダー　固定ID：280
************************************/
/************************************　
** 薬局ヘッダー・フッター　（固定ID：280）
************************************/
/* ページID 280 背景画像*/
.page-id-280 .header {
    background-image: url('https://kei-ai.jp/wp-content/uploads/2025/02/IMG_0054-scaled.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 追随でナビ色おかしくなるためheader-container の背景色を強制的に変更*/
.page-id-280 #header-container {
  background-color: #ceea52 !important;
}

.page-id-280 .navi {
  background-color: #ceea52; /* やさしい緑系 */
}

.page-id-280 .navi-in {
  background-color: #ceea52; /* やさしい緑系 */
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.page-id-280 .navi-in > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  background-color: #ceea52; /* やさしい緑系 */
}

.page-id-280 .navi-in > ul li {
  display: block;
  width: 176px;
  height: 60px;
  position: relative;
  background-color: #ceea52; /* やさしい緑系 */
}

.page-id-280 .navi-in > ul li:hover {
  background-color: #ceea52; /* ホバー時もサイズ変えずに背景色固定 */
}

.page-id-280 .navi-in > ul .caption-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}

.page-id-280 .navi-in > ul .caption-wrap > div {
  width: 100%;
}

.page-id-280 .navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  width: 240px;
  list-style: none;
  padding: 0;
  background-color: #ceea52; /* やさしい緑系 */
  z-index: 99;
  text-align: left;
}

.page-id-280 .navi-in > ul .sub-menu li {
  width: auto;
  background-color: #ceea52; /* やさしい緑系 */
}

.page-id-280 .navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}

.page-id-280 .navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}

.page-id-280 .navi-in a {
  position: relative;
  color: #fff;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

.page-id-280 .navi-in a:hover {
  background-color: #32CD32; /* やさしい緑系で少し濃いホバー */
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.page-id-280 #footer {
  background-color: #ceea52; /* やさしい緑系 */
}

@media screen and (min-width: 768px) {
  .page-id-280 .menu-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .page-id-280 .menu-pc {
    display: none !important;
  }
}