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


/* ==================================================
   ふれあい訪問看護ステーション
   カスタムCSS
================================================== */


/* ==================================================
   1. ヘッダー：PC基本表示
================================================== */

#header-in.header-in {
  display: grid !important;

  grid-template-columns: auto auto;
  grid-template-areas:
    "logo main"
    "logo sub";

  align-items: center;
  justify-content: center;

  column-gap: 18px;
  row-gap: 6px;

  max-width: 980px;

  margin: 0 auto;
  padding: 30px 20px;
}


/* ロゴ */

#header-in > .logo-header {
  grid-area: logo;

  width: auto !important;

  margin: 0 !important;

  align-self: center;
}

#header-in > .logo-header img {
  width: 320px !important;
  max-width: 320px !important;
  height: auto !important;
}


/* メインコピー */

#header-in > .main-copy-area {
  grid-area: main;

  align-self: end;

  text-align: left;

  color: #3f7655;
}

.fureai-main-copy {
  font-size: 24px;
  font-weight: 600;

  line-height: 1.5;

  letter-spacing: 0.04em;
}

.fureai-main-copy span {
  display: inline-block;

  margin-top: 2px;

  font-size: 32px;
  font-weight: 700;
}


/* サブコピー */

#header-in > .sub-copy-area {
  grid-area: sub;

  width: 100%;

  box-sizing: border-box;

  margin-top: 0;
  padding-top: 10px;

  border-top: 2px dotted rgba(63, 118, 85, 0.5);

  text-align: left;

  color: #3f7655;

  font-size: 14px;

  line-height: 1.8;

  letter-spacing: 0.03em;
}


/* ==================================================
   2. ヘッダー：PC微調整
================================================== */

@media screen and (min-width: 835px) {

  #header-in.header-in {
    column-gap: 5px !important;
    row-gap: 0 !important;
  }

  #header-in > .main-copy-area {
    transform: translate(-20px, -10px);

    margin-bottom: -20px !important;
  }

  #header-in > .sub-copy-area {
    transform: translate(-20px, -18px);
  }

}


/* ==================================================
   3. ヘッダー：834px以下
================================================== */

@media screen and (max-width: 834px) {

  #header-in.header-in {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 25px 15px 28px !important;

    gap: 14px !important;

    box-sizing: border-box !important;
  }


  /* ロゴ */

  #header-in .logo-header {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    transform: none !important;
  }

  #header-in .logo-header img,
  #header-in img.site-logo-image {
    display: block !important;

    width: 140px !important;
    max-width: 140px !important;

    height: auto !important;

    margin: 0 auto !important;
  }


  /* メインコピー */

  #header-in > .main-copy-area {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    transform: none !important;
  }

  #header-in .fureai-main-copy {
    margin: 0 !important;

    font-size: 16px !important;

    line-height: 1.45 !important;

    letter-spacing: 0 !important;
  }

  #header-in .fureai-main-copy span {
    display: block !important;

    margin-top: 2px !important;

    font-size: 21px !important;

    line-height: 1.4 !important;
  }


  /* 点線＋サブコピー */

  #header-in > .sub-copy-area {
    width: 85% !important;
    max-width: 420px !important;

    margin: 0 auto !important;

    padding: 9px 0 0 !important;

    text-align: center !important;

    transform: none !important;

    font-size: 11px !important;

    line-height: 1.7 !important;
  }


  /* PC用ナビは非表示 */

  #navi,
  .navi {
    display: none !important;
  }

}


/* ==================================================
   4. ヘッダー：スマホ480px以下
================================================== */

@media screen and (max-width: 480px) {

  html,
  body {
    max-width: 100% !important;

    overflow-x: hidden !important;

    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }


  /* スマホ専用背景 */

  #header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 420px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;

    background-image:
      url("https://fureai-houmon.com/wp-content/uploads/2026/08/98bcb2038b7dfe6ec9921d16a9de498d.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }


  /* ヘッダー内部 */

  #header-in.header-in {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 420px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 25px 15px !important;

    gap: 12px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    left: auto !important;
    right: auto !important;

    /* ヘッダー内容全体を少し上へ */
    transform: translateY(-20px) !important;
  }


  /* ヘッダー内3要素 */

  #header-in > .logo-header,
  #header-in > .main-copy-area,
  #header-in > .sub-copy-area {
    position: static !important;

    float: none !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* ロゴ */

  #header-in > .logo-header {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    transform: none !important;
  }

  #header-in .logo-header img,
  #header-in img.site-logo-image {
    display: block !important;

    width: 250px !important;
    max-width: 250px !important;

    height: auto !important;

    margin: 0 auto !important;
  }


  /* メインコピー */

  #header-in > .main-copy-area {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    padding-top: 0 !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;

    text-align: center !important;

    /* コピー部分だけさらに上へ */
    transform: translateY(-20px) !important;
  }

  #header-in .fureai-main-copy {
    margin: 0 !important;

    font-size: 16px !important;

    line-height: 1.45 !important;

    letter-spacing: 0 !important;
  }

  #header-in .fureai-main-copy span {
    display: block !important;

    margin-top: 3px !important;

    font-size: 21px !important;

    line-height: 1.4 !important;
  }


  /* 点線＋サブコピー */

  #header-in > .sub-copy-area {
    width: 82% !important;
    max-width: 320px !important;

    margin: 2px auto 0 !important;

    padding-top: 9px !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;

    border-top:
      2px dotted rgba(63, 118, 85, 0.5) !important;

    text-align: center !important;

    font-size: 11px !important;

    line-height: 1.7 !important;

    /* 点線＋サブコピーも上へ */
    transform: translateY(-20px) !important;
  }

}


/* ==================================================
   5. PC追従ヘッダー
================================================== */

@media screen and (min-width: 835px) {

  /* 追従時は通常ヘッダーを非表示 */

  .fixed-header #header {
    display: none !important;
  }


  /* モバイルメニューは非表示 */

  .fixed-header #navi .menu-mobile {
    display: none !important;
  }


  /* PCメニュー */

  .fixed-header #navi .menu-pc {
    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;

    /* メニューを少し下へ */
    transform: translateY(8px) !important;
  }


  /* ナビ */

  .fixed-header #navi {
    display: block !important;

    width: 100% !important;

    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .fixed-header #navi .navi-in {
    width: 100% !important;

    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* メニュー項目 */

  .fixed-header #navi .menu-pc > li {
    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* メニューリンク */

  .fixed-header #navi .menu-pc > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 42px !important;

    padding: 0 18px !important;

    font-size: 14px !important;

    line-height: 1 !important;

    white-space: nowrap !important;
  }

}


/* ==================================================
   6. 求人・お問い合わせナビ
================================================== */

.menu-item.fureai-cta > a {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 7px 18px !important;

  margin: 0 5px !important;

  min-height: auto !important;

  box-sizing: border-box !important;

  background-color:
    rgba(255, 255, 255, 0.55) !important;

  color: #3f7655 !important;

  border: 1.5px solid #3f7655 !important;

  border-radius: 8px !important;

  line-height: 1.2 !important;

  transition: 0.2s ease !important;
}

.menu-item.fureai-cta > a:hover {
  background-color: #3f7655 !important;

  color: #ffffff !important;
}


/* ==================================================
   7. 求人Q&Aタイトル
================================================== */

.recruit-qa-title span {
  position: relative;

  top: -8px;

  border-bottom: none !important;

  padding-bottom: 0 !important;
}


/* ==================================================
   8. 行動指針：スマホ
================================================== */

@media screen and (max-width: 768px) {

  /* タイトル */

  .guideline-title-wrap {
    flex-wrap: nowrap !important;

    gap: 8px !important;

    margin-bottom: 24px !important;
  }

  .guideline-title-icon {
    height: 30px !important;

    margin-top: 4px !important;

    flex-shrink: 0;
  }

  .guideline-title {
    font-size: 1em !important;

    line-height: 1.45 !important;

    padding: 8px 10px 6px !important;
  }


  /* 行動指針3項目を1枚のパネル風に */

  .guideline-title-wrap ~ p {
    margin: 0 !important;

    padding: 20px 16px !important;

    background:
      rgba(255,255,255,0.82) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: left !important;

    line-height: 1.85 !important;
  }


  /* 最初の項目 */

  .guideline-title-wrap + p {
    border-radius:
      14px 14px 0 0 !important;
  }


  /* 区切り線 */

  .guideline-title-wrap + p + p,
  .guideline-title-wrap + p + p + p {
    border-top:
      1px solid #cfead6 !important;
  }


  /* 最後の項目 */

  .guideline-title-wrap + p + p + p {
    border-radius:
      0 0 14px 14px !important;
  }


  /* 各見出し */

  .guideline-title-wrap ~ p strong {
    display: block !important;

    text-align: center !important;

    margin-bottom: 2px !important;

    color: #3f6b4a !important;

    font-size: 1em !important;

    line-height: 1.5 !important;
  }

}


/* ==================================================
   9. サービス内容カード
================================================== */

.service-v3-card {
  height: 122px !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* ＋・−マークを非表示 */

.service-v3-card summary::after {
  display: none !important;

  content: none !important;
}


/* カード表示部分 */

.service-v3-card summary {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  height: 122px !important;
  min-height: 122px !important;

  padding: 18px 12px !important;

  box-sizing: border-box !important;
}


/* サービス名 */

.service-v3-name {
  width: 100%;

  text-align: center;
}


/* 開いた時 */

.service-v3-card[open] {
  height: auto !important;
}

.service-v3-card[open] summary {
  height: 122px !important;
}


/* ホバー */

.service-v3-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 7px 16px rgba(0,0,0,0.07);
}


/* サービス内容：スマホ */

@media screen and (max-width: 600px) {

  .service-v3-card {
    height: auto !important;
  }

  .service-v3-card summary {
    height: auto !important;
    min-height: 0 !important;

    flex-direction: row !important;

    justify-content: flex-start !important;

    padding: 13px 15px !important;
  }

  .service-v3-name {
    text-align: left;
  }

}

/* ==================================================
   PC：本文幅を少し狭くして
   左右の背景を見せる
================================================== */

@media screen and (min-width: 1024px) {

  #content-in,
  .content-in {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .main {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* ===================================
   背景の水彩を少し淡くする
=================================== */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.40);
  pointer-events: none;
  z-index: 0;
}

/* コンテンツを白フィルターより前に表示 */
#container {
  position: relative;
  z-index: 1;
}

/* ========================================
   サービス内容：イラストを背景内に収める
======================================== */

.service-v3-images {
  min-height: 190px !important;
  padding-bottom: 24px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

.service-v3-images img {
  max-height: 135px !important;
  max-width: 23% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ========================================
   PCメニュー：求人ドロップダウン
   通常時・追従時 共通
======================================== */

@media screen and (min-width: 835px) {

  /* 親メニュー */
  #navi .menu-item-has-children {
    position: relative !important;
    overflow: visible !important;
  }


  /* 子メニュー本体 */
  #navi .menu-item-has-children > ul.sub-menu {
    display: block !important;

    position: absolute !important;

    top: calc(100% + 4px) !important;
    left: 50% !important;

    width: 180px !important;
    min-width: 180px !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    transform: translateX(-50%) !important;

    background: #ffffff !important;

    border: 1px solid #cfead6 !important;
    border-radius: 10px !important;

    box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 9999999 !important;
  }


  /* 求人にマウスを乗せたら表示 */
  #navi .menu-item-has-children:hover > ul.sub-menu {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }


  /* 子メニューの各項目 */
  #navi .menu-item-has-children > ul.sub-menu > li {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
  }


  /* 子メニューのリンク */
  #navi .menu-item-has-children > ul.sub-menu > li > a {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    padding: 10px 15px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    color: #3f6b4a !important;

    font-size: 13px !important;
    font-weight: normal !important;

    line-height: 1.5 !important;

    text-align: center !important;

    white-space: nowrap !important;
  }


  /* 子メニューにマウスを乗せた時 */
  #navi .menu-item-has-children > ul.sub-menu > li > a:hover {
    background: #f2f8f4 !important;

    color: #3f6b4a !important;
  }


  /* ========================================
     追従メニュー対策
  ======================================== */

  .fixed-header,
  .fixed-header #navi,
  .fixed-header #navi .navi-in,
  .fixed-header #navi .menu-pc,
  .fixed-header #navi .menu-pc > li {
    overflow: visible !important;
  }


  /* 追従中も子メニューを確実に表示 */
  .fixed-header #navi .menu-item-has-children:hover > ul.sub-menu {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 9999999 !important;
  }

}

/* ========================================
   求人 子メニューの見た目
   通常メニュー用
======================================== */

@media screen and (min-width: 835px) {

/* 子メニュー全体 */
#navi .menu-item-has-children > ul.sub-menu {
  background: #bfe8a9 !important;
  border: none !important;
  border-radius: 10px !important;

  padding: 0 !important;

  box-shadow: 0 6px 12px rgba(0,0,0,0.08) !important;

  overflow: hidden !important;
}


  /* 各項目 */
  #navi .menu-item-has-children > ul.sub-menu > li {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: transparent !important;
  }


  /* 各リンク */
  #navi .menu-item-has-children > ul.sub-menu > li > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 60px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #3f6b4a !important;

    font-size: 13px !important;
    line-height: 1 !important;

    text-align: center !important;

    white-space: nowrap !important;
  }


  /* ホバー時 */
  #navi .menu-item-has-children > ul.sub-menu > li > a:hover {
    background: rgba(255,255,255,0.28) !important;

    color: #3f6b4a !important;
  }

}

/* ========================================
   スマホでも左右の水彩背景を見せる
======================================== */

@media screen and (max-width: 768px) {

  /* 背景画像の左右を切らない */
  body {
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: repeat-y !important;
  }

  /* 本文を少しだけ細くして左右に水彩を見せる */
  #content-in,
  .content-in {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 本文背景は少しだけ透けさせる */
  .main,
  article,
  .entry-content {
    background: rgba(255,255,255,0.92) !important;
  }

}