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

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

/* =========================
   クスリサーチ 共通調整
========================= */

/************************************
** ヘッダー
************************************/

#header {
  background: #ffffff;
  border-bottom: none;
}

/* ロゴ画像 */
.site-logo-image {
  display: block;
  width: 24%;
}

/* ロゴ上の小さい説明文 */
.tagline {
  font-size: 11px;
  color: #222222;
  margin-bottom: 4px;
}

/* ロゴまわり */
.logo-header {
  padding: 14px 0 10px;
}

.logo {
  text-align: left;
}

.logo-text {
  font-size: 30px;
  font-weight: 800;
  color: #3c6ff0;
  line-height: 1.2;
}

/* ヘッダー右上リンク用：今は空 */
.header-container {
  position: relative;
}

.header-container::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 12px;
  color: #333333;
}

/************************************
** グローバルナビ：全ページ共通
************************************/

#navi {
  height: 64px !important;
  min-height: 64px !important;
  background: #ffffff !important;
  border-top: 1px solid #e8edf5 !important;
  border-bottom: 1px solid #e8edf5 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#navi .navi-in {
  height: 64px !important;
  min-height: 64px !important;
}

/* メニュー中央寄せ */
#navi .navi-in > ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* メニュー項目 */
#navi .navi-in > ul > li {
  width: auto !important;
  height: 64px !important;
  line-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* メニューリンク */
#navi .navi-in > ul > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 64px !important;
  line-height: 64px !important;
  padding: 0 !important;
  color: #111111 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ホバー */
#navi .navi-in > ul > li > a:hover {
  color: #2f6fec !important;
  background: transparent !important;
}

/* 現在ページ */
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current-menu-parent > a,
#navi .navi-in > ul > li.current_page_item > a,
#navi .navi-in > ul > li.current_page_parent > a,
#navi .navi-in > ul > li.current-post-ancestor > a {
  color: #2f6fec !important;
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 現在ページの下線：ナビ内側に収める */
#navi .navi-in > ul > li.current-menu-item > a::after,
#navi .navi-in > ul > li.current-menu-parent > a::after,
#navi .navi-in > ul > li.current_page_item > a::after,
#navi .navi-in > ul > li.current_page_parent > a::after,
#navi .navi-in > ul > li.current-post-ancestor > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0 !important;
  width: 64px;
  height: 3px;
  background: #2f6fec;
  transform: translateX(-50%);
}

/* Cocoon標準の余計な下線・余白を無効化 */
#navi .item-label {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/************************************
** アピールエリア
************************************/

/* アピールエリア全体 */
.appeal {
  min-height: 360px !important;
  background-position: center right !important;
  background-size: cover !important;
}

/* アピールエリアの中身 */
#appeal .appeal-in,
.appeal .appeal-in {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
}

/* 白いボックスを消してテキストを左寄せ */
#appeal .appeal-content,
.appeal .appeal-content {
  width: 560px !important;
  max-width: 560px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 0 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* 見出し */
#appeal .appeal-title,
.appeal .appeal-title {
  color: #111111 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 26px !important;
  text-align: left !important;
}

/* メッセージ */
#appeal .appeal-message,
.appeal .appeal-message {
  color: #333333 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  text-align: left !important;
}

/************************************
** アピールエリア内 検索ボックス
************************************/

.ks-appeal-search {
  display: flex;
  width: 100%;
  max-width: 560px;
  height: 54px;
  margin-top: 30px;
  border: 1px solid #d8e2f0;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

.ks-appeal-search input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: none;
  background: #ffffff;
  font-size: 15px;
  box-sizing: border-box;
}

.ks-appeal-search input:focus {
  outline: none;
}

.ks-appeal-search button {
  width: 96px;
  border: none;
  background: #2f80ed;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.ks-appeal-search button:hover {
  background: #1f6fd6;
}

/************************************
** 横スクロール防止
************************************/

html,
body {
  overflow-x: hidden;
}

/************************************
** タブレット・スマホ調整
************************************/

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

  /* ロゴ */
  .site-logo-image {
    width: 42%;
  }

  /* グローバルナビ */
  #navi,
  #navi .navi-in {
    height: 56px !important;
    min-height: 56px !important;
  }

  #navi .navi-in > ul {
    gap: 40px !important;
  }

  #navi .navi-in > ul > li,
  #navi .navi-in > ul > li > a {
    height: 56px !important;
    line-height: 56px !important;
  }

  #navi .navi-in > ul > li > a {
    font-size: 15px !important;
  }

  #navi .navi-in > ul > li.current-menu-item > a::after,
  #navi .navi-in > ul > li.current-menu-parent > a::after,
  #navi .navi-in > ul > li.current_page_item > a::after,
  #navi .navi-in > ul > li.current_page_parent > a::after,
  #navi .navi-in > ul > li.current-post-ancestor > a::after {
    width: 56px !important;
    bottom: 0 !important;
  }

  /* アピールエリア */
  .appeal {
    min-height: 430px !important;
    height: auto !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  #appeal .appeal-in,
  .appeal .appeal-in {
    justify-content: center !important;
    align-items: center !important;
    padding: 40px 20px !important;
  }

  #appeal .appeal-content,
  .appeal .appeal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #appeal .appeal-title,
  .appeal .appeal-title {
    font-size: 34px !important;
    line-height: 1.35 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
  }

  #appeal .appeal-message,
  .appeal .appeal-message {
    font-size: 16px !important;
    line-height: 1.9 !important;
    text-align: center !important;
  }

  .ks-appeal-search {
    width: 100% !important;
    max-width: 360px !important;
    height: 54px !important;
    margin: 28px auto 0 !important;
  }

  .ks-appeal-search input {
    font-size: 14px !important;
    padding: 0 14px !important;
  }

  .ks-appeal-search button {
    width: 86px !important;
    font-size: 14px !important;
  }
}

/************************************
** 小さいスマホ調整
************************************/

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

  /* ロゴ */
  .site-logo-image {
    width: 56%;
  }

  /* グローバルナビ */
  #navi .navi-in > ul {
    gap: 28px !important;
  }

  #navi .navi-in > ul > li > a {
    font-size: 14px !important;
  }

  #navi .navi-in > ul > li.current-menu-item > a::after,
  #navi .navi-in > ul > li.current-menu-parent > a::after,
  #navi .navi-in > ul > li.current_page_item > a::after,
  #navi .navi-in > ul > li.current_page_parent > a::after,
  #navi .navi-in > ul > li.current-post-ancestor > a::after {
    width: 52px !important;
  }

  /* アピールエリア */
  .appeal {
    min-height: 420px !important;
  }

  #appeal .appeal-in,
  .appeal .appeal-in {
    padding: 36px 16px !important;
  }

  #appeal .appeal-title,
  .appeal .appeal-title {
    font-size: 30px !important;
    line-height: 1.35 !important;
  }

  #appeal .appeal-message,
  .appeal .appeal-message {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .ks-appeal-search {
    max-width: 340px !important;
    height: 52px !important;
  }

  .ks-appeal-search button {
    width: 82px !important;
  }
}

/************************************
** 固定ページ：投稿日・Feedly非表示
************************************/

/* 投稿日・更新日 */
.page .date-tags,
.page .post-date,
.page .post-update,
.page .entry-date,
.page .date-tag {
  display: none !important;
}

/* SNSフォロー・Feedly */
.page .sns-follow,
.page .sns-follow-buttons,
.page .feedly-button,
.page .feedly-page,
.page .footer-sns-buttons {
  display: none !important;
}

/************************************
** 記事ページの記事内画像のサイズ変更
************************************/
.wp-block-image img {
    width: 100%;
}

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

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

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