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

/************************************
** 子テーマ用のスタイル
************************************/
/* ページ全体の背景設定 */
body {
  background: white;
}

/* コンテンツ部の余白設定 */
.content {
  margin: 0;
}
.main{
  padding: 0;
}
.entry-content{
  margin: 0;
}
.date-tags{
  margin: 0;
}

/* コンテンツの幅設定 */
.content-in {
  width: 100%;
}

/* 各セクションの設定 */
.section-title {
  text-align: center;
  background-color: transparent !important;
  margin: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.section-block {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.section-block-top {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1200px;
  width: 100%;
}

/* パディング設定（余白なし） */
.padding-0 {
  padding: 0 !important;
}

/* マージン設定（余白なし） */
.margin-0 {
  margin: 0 !important;
}
.margin-b0 {
  margin-bottom: 0 !important;
}

/*******************************************************************
** ヘッダーメニューの設定
********************************************************************/
/* ヘッダーの設定（スクロールが最上部にある時） */
body:not(.single-post):not(.error404):not(category) .header-container:not(.fixed-header) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.7) !important;
  transition: background-color 0.3s ease;
}

/* ヘッダーの背景設定（スクロールされた時） */
.header-container.fixed-header {
  background-color: #ffffff !important;
  transition: background-color 0.3s ease;
}

/* ヘッダー（会社名）のフォント設定 */
.site-name-text {
  font-weight: bold;
}

/* ヘッダーロゴの横にテキストを表示 */
.site-name-text {
  display: flex;
  align-items: center;
}

.site-name-text::after {
  content: "有限会社 宇佐システム開発";
  font-size: 1rem;
  font-weight: bold;
  margin-left: 10px;
  color: #0b1619;
  text-shadow: 0 0 1px #76ddff;
}

/* グローバルナビゲーションの背景設定 */
#navi {
  background-color: transparent !important;
}

/* グローバルナビゲーションの各メニュー間に区切り線を追加 */
#navi .navi-in > ul {
  margin-right: 5px;
}

#navi .navi-in > ul > li {
  position: relative;
}

#navi .navi-in > ul > li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2.3em;
  border-right: 1px solid #949495;
}

/* 最初のメニュー項目には左側にも区切り線を表示する */
#navi .navi-in > ul > li:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2.3em;
  border-left: 1px solid #949495;
}

/* グローバルナビゲーションのフォント設定 */
#navi .item-label {
  font-weight: bold;
}

/* グローバルナビゲーションのリンク（aタグ）設定 */
#navi ul.menu-header > li > a {

}
#navi ul.menu-header > li > a:hover {
  color: #4078c0 !important;
  background-color: transparent !important;
  border: none !important;
  text-decoration: none !important;
}

/* Cocoon仕様（スクロール時にサブメニューが表示されない）に対する対策 */
.fixed-header .has-sub {
    display: flex;
}
.fixed-header .navi-in > ul li:hover > ul  {
    display: block;
}

/* グローバルナビゲーションの下矢印アイコンの設定 */
#navi ul > li.menu-item-has-children > a div.has-icon {
  display: none;
}

/* サブメニュー全体の設定 */
.navi ul.sub-menu {
  background-color: #fff;
  opacity: 0.9;
}

/* サブメニューリストの設定 */
.navi ul.sub-menu > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* サブメニューのアイコン設定 */
.navi ul.sub-menu > li::before {
  content: "\f105";
  font-family: "FontAwesome";
  padding-left: 10px;
  font-size: 0.9em;
}

/* サブメニューのホバー設定 */
.navi ul.sub-menu > li:hover,
.navi ul.sub-menu > li > a:hover {
  color: #FFF !important;
  background-color: #19448e;
  opacity: 0.85;
}


/*******************************************************************
** トップ画像の設定
********************************************************************/
/* カバー（トップ画像）の設定 */
.top-cover{
  height: auto !important;
}
.top-cover img{
  opacity: 0.5;
}

/* カバー（トップ画像）上の文字列アニメーション設定（フェードイン表示） */
.fadein-page-title{
  font-size: 1.7em;
  font-weight: bold;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: .5s;
  text-shadow: 1px 1px 2px #808080;
}

/* 企業スローガン全体の設定 */
.fadein-slogan {
  display: flex;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: .5s;
  color: white;
  text-shadow: 1px 1px 2px #808080;
}

/* 企業スローガン テキストグループの設定 */
.slogan-text-group {
  display: table;
}
.slogan-text-group h2 {
  background-color: transparent !important;
  white-space: nowrap;
}

/* 企業スローガン メインテキストの設定 */
.slogan-text {
  font-size: 4vw !important;
  font-weight: bold;
  margin: 0 0 .2vw 0 !important;
  padding: 0 !important;
}

/* 企業スローガン サブテキストの設定 */
.slogan-sub-text {
  font-size: 2vw !important;
  font-weight: bold;
  margin: 0 !important;
  padding: 0 !important;
}

/*******************************************************************
** フェードイン表示の設定
********************************************************************/
/* フェードイン表示の設定 */
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition-property: transform, opacity;
  transition-duration: 1.5s;
  transition-delay: 0s;
}
.fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* 固定ページ編集画面でfadeinクラスを適用したブロックを表示するための対策 */
body.wp-admin .fadein,
body.wp-block-editor .fadein {
  opacity: 1 !important;
  transform: none !important;
}

/*******************************************************************
** ショートコード[info_list]の設定
********************************************************************/
/* 各アイテムの設定 */
#info-list > div.info-list-item {
  border-top: 1px solid #ddd;
  padding: 1em;
}
#info-list > div.info-list-item:last-child {
  border-bottom: 1px solid #ddd;
}

/* カテゴリー名の設定 */
.info-list .entry-category {
  display: inline-block;
  color: #fff;
  padding: 0.1em 1.2em;
  border-radius: .3em;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* カテゴリー名「お知らせ」の設定 */
.info-list .cat-label-5 {
  background-color: #007acc;
}

/* カテゴリー名「イベント」の設定 */
.info-list .cat-label-6 {
  background-color: #8bc34a;
}

/* 投稿記事タイトルの設定 */
.info-list .info-list-item-content {
  font-weight: bold;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}
.info-list .info-list-item-content a {
  color: #2c6ebd;
}

/*******************************************************************
** 「投稿」、「カテゴリー」、「404 NOT FOUND」の設定
********************************************************************/
/* ページ全体の設定 */
body.single-post .content,
body.category .content,
body.error404 .content {
  max-width: 1000px;
  width: 100%;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* カテゴリーページの設定 */
body.category .content {
  padding-top: 60px;
}

/* ヘッダーメニューバーの設定 */
body.single-post .header-container,
body.category .header-container,
body.error404 .header-container {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/*******************************************************************
** パッケージ導入サービスの設定
********************************************************************/
/* 導入サービスのタイトル */
.install-service-title {
  display: inline-block;
  margin: .5em 0 0 0 !important;
  padding: .5em 2em !important;
  font-size: .9em !important;
  text-align: center;
}
.color-wordpress {
  background-color: #f0f6fc !important;
  border: 3px solid #0073aa;
}
.color-redmine {
  background-color: #fff5f5 !important;
  border: 3px solid #b00000;
}
.color-spd {
  background-color: #e8f5e9 !important;
  border: 3px solid #4CAF50;
}

/* SPDのタイトル設定 */
.spd-title {
  margin-bottom: 0 !important;
  padding-bottom: 0.5em !important;
  background-color: transparent !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /* ヘッダメニュー非表示 */
  .header-container {
    display: none !important;
  }
  
  /* コンテンツの余白設定 */
  body.single-post .content,
  body.error404 .content,
  body.category .content {
    padding-top: 5px;
  }
  
  /* モバイルヘッダーの設定 */
  .mobile-menu-buttons {
    display: flex;
    align-items: stretch;
    flex-direction: row-reverse;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* モバイルヘッダーのヘッダーロゴの横にテキストを表示 */
  .logo-menu-button a.menu-button-in {
    display: flex;
    align-items: center;
  }
  
  .logo-menu-button a.menu-button-in::after {
    content: "有限会社 宇佐システム開発";
    font-size: .9rem;
    font-weight: bold;
    margin-left: 10px;
    color: #0b1619;
    text-shadow: 0 0 1px #76ddff;
  }
  
  
  /* モバイルヘッダーのメニューボタンの設定 */
  .mobile-menu-buttons .navi-menu-button{
  }
  
  /* モバイルヘッダーの会社名の設定 */
  .mobile-menu-buttons .logo-menu-button{
    justify-content: left !important;
  }
  
  /* モバイルヘッダーの検索ボタンを非表示 */
  .mobile-menu-buttons .search-menu-button {
    display: none !important;
  }
  
  /* モバイルメニューの×アイコン位置 */
  #navi-menu-content .menu-close-button {
    padding-top: 15px;
    padding-right: 25px;
    padding-bottom: 30px;
    text-align: right;
    font-size: 1.3em;
  }
  
  /* モバイルメニューのボーダー設定 */
  #navi-menu-content ul.menu-drawer > li {
    border-bottom: 1px solid #ddd;
  }
  #navi-menu-content ul.menu-drawer > li:first-of-type {
    border-top: 1px solid #ddd;
  }
  #navi-menu-content ul.menu-drawer > li ul.sub-menu > li {
    border-top: 1px solid #ddd;
  }
  
  /* モバイルメニューの余白設定 */
  #navi-menu-content ul.menu-drawer li {
    font-size: 0.9em;
    line-height: 1.6em;
    padding: 0 .5em;
  }
  #navi-menu-content ul.menu-drawer a {
    padding: 1.5em 0;
  }
  
  /* モバイルメニューのアイコン設定 */
  #navi-menu-content ul.menu-drawer a::before {
    content: "\f105";
    font-family: "FontAwesome";
    margin-right: 15px;
  }
}
 
/*834px以下*/
@media screen and (max-width: 834px){
  /* ページ全体の余白設定 */
  .main {
    padding: 0 !important;
  }
  
  /* フッターの設定（縦表示） */
  .navi-footer ul {
    flex-direction: column;
    align-items: center;
  }
  
  
  /* 企業スローガン メインテキストの設定 */
  .slogan-text {
    font-size: 7vw !important;
  }
  /* 企業スローガン サブテキストの設定 */
  .slogan-sub-text {
    background-color: transparent !important;
    font-size: 3vw !important;
  }
}

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