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

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

/* Drama Hodoku: common navigation and search */
.dh-visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#header-container { background:#fff; color:#202a3a; }
#header-container-in #header-in {
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
  max-width:1200px; min-height:104px; height:auto; padding:16px 24px; gap:8px 32px;
}
#header-container-in #header-in::after { display:none; }
#header-container-in .tagline {
  width:100%; margin:0; padding:0; text-align:left;
  color:#536579; font-size:12px; line-height:1.5; letter-spacing:.06em;
}
#header-container-in .logo-header { margin:0; padding:0; text-align:left; font-size:28px; line-height:1.4; }
#header-container-in .site-name-text-link { display:inline-block; padding:0; color:#20344e; font-weight:700; letter-spacing:.08em; }
.dh-header-search { display:flex; align-items:stretch; width:360px; max-width:100%; margin:0; }
.dh-header-search input {
  flex:1; min-width:0; width:auto; border:1px solid #9caebc; border-right:0;
  border-radius:6px 0 0 6px; background:#fff; color:#202a3a;
  padding:10px 12px; font-size:14px; line-height:1.5; height:44px;
}
.dh-header-search input::placeholder { color:#596b7c; opacity:1; }
.dh-header-search button {
  min-width:64px; border:1px solid #304d70; border-radius:0 6px 6px 0;
  padding:8px 14px; color:#fff; background:#304d70; font-size:14px; font-weight:700;
  cursor:pointer;
}
.dh-header-search button:hover { background:#20344e; }
#navi { background:#eef4f8; border-top:1px solid #dce5ec; border-bottom:1px solid #dce5ec; }
#navi-in { max-width:1200px; padding:0 24px; }
#navi .menu-header { display:flex; align-items:stretch; justify-content:flex-start; flex-wrap:wrap; }
#navi .menu-header > li { width:auto; height:auto; min-width:0; margin:0; }
#navi .menu-header > li > a {
  padding:14px 25px; height:auto; color:#20344e; font-size:15px; font-weight:700; line-height:1.6;
}
#navi .menu-header > li > a:hover { background:#dce8f0; }
#navi .menu-header .current-menu-item > a { background:#dce8f0; }
#header-container a:focus-visible, #header-container input:focus-visible,
#header-container button:focus-visible, .mobile-menu-buttons a:focus-visible,
#navi-footer a:focus-visible {
  outline:3px solid #4b7295; outline-offset:3px;
}
#footer { background:#eef4f8; color:#20344e; border-top:1px solid #dce5ec; margin-top:36px; padding:28px 20px 24px; }
#footer-in { max-width:1200px; }
#footer .logo-footer { text-align:center; margin:0 0 18px; padding:0; }
#footer .site-name-text-link { color:#20344e; font-size:20px; font-weight:700; }
#footer .footer-bottom { display:flex; flex-direction:column; align-items:center; gap:14px; }
#navi-footer .menu-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 8px; }
#navi-footer .menu-footer li { border:0; margin:0; }
#navi-footer .menu-footer a { display:block; color:#20344e; padding:10px 12px; font-size:13px; line-height:1.6; }
#navi-footer .menu-footer a:hover { text-decoration:underline; background:transparent; }
#footer .copyright { float:none; color:#536579; font-size:12px; margin:0; }
:is(.page-id-174,.page-id-175,.page-id-176,.page-id-177) .sns-share,
:is(.page-id-174,.page-id-175,.page-id-176,.page-id-177) .sns-follow { display:none; }
:is(.page-id-174,.page-id-175,.page-id-176,.page-id-177) .main { margin-left:auto; margin-right:auto; }
@media (max-width:1023px) {
  #header-container-in #header-in { padding:16px 20px; gap:8px 20px; }
  #navi .menu-header > li > a { padding:13px 20px; }
}
@media (max-width:834px) {
  .dh-header-search { display:none; }
  #navi .menu-header { display:none; }
  .mobile-header-menu-buttons {
    background:#fff; color:#20344e; border-bottom:1px solid #dce5ec;
    box-shadow:0 2px 8px rgba(32,52,78,.05);
  }
  .mobile-header-menu-buttons .menu-button-in { color:#20344e; min-height:52px; }
  .mobile-header-menu-buttons .menu-caption { font-size:11px; color:#20344e; }
  .mobile-header-menu-buttons .logo-menu-button .site-name-text { font-size:18px; font-weight:700; letter-spacing:.04em; }
  #navi-menu-content .menu-drawer a { color:#20344e; padding:15px 20px; line-height:1.6; font-size:16px; }
  #footer { margin-top:24px; padding:24px 12px 20px; }
  #navi-footer .menu-footer { gap:2px 0; }
  #navi-footer .menu-footer a { padding:12px 10px; }
}


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

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

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