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

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

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

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

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


/* ============================================
   SEA LIFE AGRI Portal - ポータルデザイン
   ============================================ */

:root {
  --portal-green: #2d7a4f;
  --portal-green-dark: #1f5c3a;
  --portal-green-light: #e8f5ee;
  --portal-bg: #f0f4f1;
  --portal-card: #ffffff;
  --portal-text: #2c3e50;
  --portal-border: #d4e8db;
}

body { background-color: var(--portal-bg) !important; color: var(--portal-text) !important; }

#header, .header, #site-header, .header-container, #header .header-container {
  background: var(--portal-green) !important;
  border-bottom: 3px solid var(--portal-green-dark) !important;
}
#site-name-text, #site-name a, .site-name { color: #ffffff !important; font-weight: 700 !important; }
#site-name a:hover { color: #c8e6c9 !important; text-decoration: none !important; }
#site-catch, .site-catch { color: #c8e6c9 !important; font-size: 0.8rem !important; }

#navi, .navi, #header-navi, .header-navi, .navi-in > ul, #navi .navi-in > ul {
  background: var(--portal-green-dark) !important;
}
#navi .navi-in > ul > li > a, nav.navi ul li a {
  color: #ffffff !important; font-size: 0.85rem !important; font-weight: 600 !important;
  padding: 12px 16px !important; transition: background 0.2s !important;
}
#navi .navi-in > ul > li > a:hover, nav.navi ul li a:hover {
  background: var(--portal-green) !important; text-decoration: none !important;
}
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current_page_item > a {
  background: #ffffff !important; color: var(--portal-green-dark) !important;
}

.entry-card, .a-wrap {
  background: var(--portal-card) !important; border-radius: 10px !important;
  border: 1px solid var(--portal-border) !important;
  box-shadow: 0 2px 8px rgba(45,122,79,0.08) !important;
}
.entry-card:hover, .a-wrap:hover {
  transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(45,122,79,0.15) !important;
}

.entry-content, #content, .content {
  background: var(--portal-card) !important; border-radius: 10px !important;
  border: 1px solid var(--portal-border) !important;
  box-shadow: 0 2px 8px rgba(45,122,79,0.08) !important; padding: 28px 32px !important;
}

.entry-title, h1.entry-title {
  color: var(--portal-green-dark) !important;
  border-left: 5px solid var(--portal-green) !important;
  padding-left: 14px !important; font-weight: 700 !important;
}

.entry-content h2 {
  background: var(--portal-green) !important; color: #ffffff !important;
  padding: 10px 16px !important; border-radius: 6px !important; border: none !important;
}
.entry-content h3 {
  color: var(--portal-green-dark) !important;
  border-bottom: 2px solid var(--portal-green) !important; padding-bottom: 6px !important;
}

a { color: var(--portal-green) !important; }
a:hover { color: var(--portal-green-dark) !important; }

.portal-nav-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important; margin: 1.5rem 0 !important;
}
.portal-nav-card {
  background: var(--portal-card) !important; border: 1px solid var(--portal-border) !important;
  border-radius: 10px !important; padding: 22px 16px !important; text-align: center !important;
  transition: all 0.2s !important; box-shadow: 0 2px 8px rgba(45,122,79,0.08) !important;
  display: block !important; text-decoration: none !important;
}
.portal-nav-card:hover {
  background: var(--portal-green-light) !important; border-color: var(--portal-green) !important;
  transform: translateY(-3px) !important; text-decoration: none !important;
}
.portal-nav-card .nav-icon { font-size: 2.2rem !important; display: block !important; margin-bottom: 10px !important; }
.portal-nav-card .nav-label { font-size: 1rem !important; font-weight: 700 !important; color: var(--portal-green-dark) !important; display: block !important; }
.portal-nav-card .nav-desc { font-size: 0.75rem !important; color: #7f8c8d !important; display: block !important; margin-top: 5px !important; }

.portal-welcome {
  background: linear-gradient(135deg, var(--portal-green), var(--portal-green-dark)) !important;
  color: #ffffff !important; padding: 20px 24px !important;
  border-radius: 10px !important; margin-bottom: 1.5rem !important;
}
.portal-welcome strong { color: #ffffff !important; font-size: 1.2rem !important; display: block !important; }
.portal-welcome span { color: #c8e6c9 !important; font-size: 0.875rem !important; }

#footer, .footer { background: var(--portal-green-dark) !important; color: #c8e6c9 !important; border-top: 3px solid var(--portal-green) !important; }
#footer a, .footer a { color: #c8e6c9 !important; }

#sidebar, .sidebar, #widget-area { display: none !important; }
#main, .main, #content-area, .content-area { width: 100% !important; max-width: 100% !important; float: none !important; }

@media (max-width: 768px) {
  .portal-nav-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .entry-content { padding: 16px !important; }
}
@media (max-width: 480px) { .portal-nav-grid { grid-template-columns: 1fr !important; } }


/* ---- Googleカレンダー レスポンシブ ---- */
.portal-calendar-wrap {
  position: relative !important;
  width: 100% !important;
  padding-top: 75% !important; /* 4:3 アスペクト比 */
  height: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(45,122,79,0.12) !important;
  border: 1px solid var(--portal-border) !important;
}

.portal-calendar-wrap iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 10px !important;
}

@media (max-width: 768px) {
  .portal-calendar-wrap {
    padding-top: 100% !important;
  }
}