/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.0.1
*/


/* ナビ均等配置 - @layer外で最優先 */
#navi { display: block !important; }
#navi .navi-in.wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#navi .navi-in .menu-pc,
#navi .navi-in ul.menu-pc {
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#navi .navi-in .menu-pc > li {
  flex: 1 1 0 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 44px !important;
  line-height: 44px !important;
}
#navi .navi-in .menu-pc > li > a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}
#navi .navi-in .menu-pc .item-label {
  overflow: visible !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  display: inline !important;
}

@media screen and (min-width: 1024px) {
  #header { background-size: 680px 680px !important; height: 680px !important; }
}
@media screen and (max-width: 767px) {
  h1.logo-text { top: 2px !important; width: 92% !important; }
  .site-name-text { font-size: 9px !important; white-space: normal !important; }
  .logo-text a.site-name-text-link { padding: 8px 12px 6px !important; }
  .logo-text a.site-name-text-link::after { font-size: 6px !important; margin-top: 4px !important; padding-top: 4px !important; }
  #navi .navi-in .menu-pc > li { height: 38px !important; line-height: 38px !important; }
  #navi .navi-in .menu-pc > li > a { height: 38px !important; line-height: 38px !important; font-size: 12px !important; }
}
.widget_author_box .author-box { display: block !important; }
.article .author-box, .entry-content ~ .author-box, .content-in > .author-box { display: none !important; }

/* サブタイトル（キャッチフレーズ）を写真の下に表示 */
#header { height: 745px !important; background-position: center top !important; background-repeat: no-repeat !important; }
.header-in { position: relative; height: 100%; }
.tagline { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(110, 65, 155, 0.62); font-size: 14px; letter-spacing: 7px; }
/* サイトタイトルも左右の縦書きと同じ薄紫デザインに */
h1.logo.logo-header .site-name-text,
.header .logo-header .site-name-text,
.logo.logo-header a.site-name-text-link {
  color: rgba(110, 65, 155, 0.62) !important;
  font-size: 14px !important;
  letter-spacing: 7px !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}
@media screen and (max-width: 767px){ .tagline, .site-name-text { font-size: 12px !important; letter-spacing: 4px !important; } }


/* タイトル文字を親リンクの薄紫を継承させる（訪問済みリンク色対策） */
.logo.logo-header .site-name-text {
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
}
.logo.logo-header a.site-name-text-link,
.logo.logo-header a.site-name-text-link:link,
.logo.logo-header a.site-name-text-link:visited,
.logo.logo-header a.site-name-text-link:hover {
  color: rgba(110, 65, 155, 0.62) !important;
  font-size: 14px !important;
  letter-spacing: 7px !important;
  text-shadow: none !important;
}


/* スマホ：タイトル・写真・サブタイトルを縦に並べる */
@media screen and (max-width: 767px){
  body #header { height: calc(100vw + 106px) !important; background-size: 100vw 100vw !important; background-position: center 58px !important; }
  body #header .header-in { position: relative !important; height: 100% !important; }
  body h1.logo.logo-header { margin: 0 !important; padding: 0 !important; position: absolute !important; top: 20px !important; left: 0 !important; right: 0 !important; width: auto !important; transform: none !important; max-height: none !important; text-align: center !important; }
  body .logo.logo-header a.site-name-text-link { font-size: 11px !important; letter-spacing: 2px !important; padding: 0 !important; margin: 0 !important; color: rgba(110,65,155,0.62) !important; text-shadow: none !important; }
  body .logo.logo-header .site-name-text { color: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-shadow: none !important; }
  body .header-in .tagline { display: block !important; position: absolute !important; top: calc(100vw + 70px) !important; bottom: auto !important; left: 0; right: 0; font-size: 11px !important; letter-spacing: 2px !important; color: rgba(110,65,155,0.62) !important; margin: 0 !important; }
  body #navi .navi-in > ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; height: auto !important; }
  body #navi .navi-in > ul > li { width: auto !important; height: auto !important; flex: 0 0 auto !important; }
  body #navi .navi-in > ul > li > a { padding: 0 13px !important; font-size: 12px !important; letter-spacing: 1px !important; line-height: 34px !important; height: 34px !important; }
}