@charset "UTF-8";

/* UMIACK Jpapan */

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

:root {
	--color-theme-dark: #1a1c1e; /* サイト全体のベース背景色 */
	--color-primary: #ff2800;    /* ブランド・アクセント */
	--color-text-light: #fff;	 /* 背景上のテキスト */
}

html {
	background-color: var(--color-theme-dark);
}

/* 固定ページの日付非表示 */
.page .date-tags {
	display: none;
}

/*
 * ヘッダー・フッターメニュー
 */
 
 /* PC header and footer menu bar */
 #header-container .navi,
 #footer {
	background-color: var(--color-theme-dark) !important;
	color: var(--color-text-light) !important;
}
#footer {
	position: relative;
	z-index: 1;
}

/*
 * Mobile header menu bar
 */
.mobile-header-menu-buttons,
.mobile-menu-buttons {
    box-shadow: none !important;
}
 
.mobile-header-menu-buttons,
.mobile-header-menu-buttons > li,
.mobile-menu-buttons {
background-color: var(--color-theme-dark) !important;
color: var(--color-text-light) !important;
}

/* Hide header text logo "UMIACK" in  mobile header */
.logo-menu-button.menu-button {
    display: none !important;
}
/* Hide header text logo "UMIACK" in  PC header */
.site-name-text {
    display: none !important;
}

/* Add red vertical line (border) to the left of "Global Site" in the PC header menu */
.menu-header .global-site-btn {
    border-left: 1px solid #ff2800;  /* Use your brand red color */
    padding-left: 24px;              /* Padding for nice spacing */
}
.menu-header .global-site-btn .item-label {
    font-size: 18px !important;
}

/* Mobile footer menu bar */
.mobile-footer-menu-buttons,
.mobile-footer-menu-buttons > li {
background-color: var(--color-theme-dark) !important;
color: var(--color-text-light) !important;
}

/* All icons and text inside mobile header/footer */
.mobile-header-menu-buttons *,
.mobile-footer-menu-buttons * {
color: var(--color-text-light) !important;
}

/*
 * Side Menu (Drawer)
 */

/* サイドメニュー(ドロワー)にごく控えめな影を付与 */
.navi-menu-content {
	border-top-right-radius: 24px;
	border-bottom-right-radius: 24px;
	box-shadow: 0 6px 32px 0 rgba(0,0,0,0.14), 0 1.5px 8px 0 rgba(0,0,0,0.09);
}

/* Side menu (drawer) background and text color */
.navi-menu-content,
.navi-menu-content .menu-drawer {
	background-color: var(--color-theme-dark) !important;
	color: var(--color-text-light) !important;
}

/* Side menu item styling */
.navi-menu-content .menu-drawer li {
	padding: 14px 0 14px 24px;    /* Top/bottom/left padding */
	margin: 0;
	border: none;
	font-size: 16px !important;  /* Base font size for the entire sidebar */
	line-height: 1.6;
}

/* "Global Site" in the side menu */
.navi-menu-content .menu-drawer .global-site-btn {
	border-top: 1px solid var(--color-primary);
	width: calc(100% - 48px);
	margin-left: 24px;
	font-size: 17px  !important;
	margin-top: 22px;
	padding-top: 22px;
}

/* Ensure all text and icons remain visible */
.navi-menu-content *,
.navi-menu-content .menu-drawer * {
	color: var(--color-text-light) !important;
}

/* Menu link hover/active effect for better UX */
.navi-menu-content .menu-drawer a:hover,
.navi-menu-content .menu-drawer a:active {
	background-color: rgba(255, 40, 0, 0.12) !important; /* Brand color tint on hover */
	color: var(--color-text-light) !important;
	border-radius: 4px;
	transition: background 0.2s;
}

/* Side menu close "X" button */
.navi-menu-content .navi-menu-close-button .fa-close {
	font-size: 32px;
	line-height: 1;
}
.navi-menu-content .navi-menu-close-button {
	padding: 22px 0 18px 24px;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/*
 * PC/desktop main menu (header menu)
 */
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current_page_item > a,
.navi-in > ul > li.current-menu-ancestor > a {
	background-color: var(--color-primary) !important;    /* Active tab background (brand color) */
	color: var(--color-text-light) !important;            /* Text color white */
	border-radius: 6px;
	transition: background 0.2s;
}
.navi-in > ul > li > a:hover,
.navi-in > ul > li:hover > a {
	background-color: rgba(255, 40, 0, 0.13) !important;
	color: var(--color-text-light) !important;
	border-radius: 6px !important;
	transition: background 0.18s !important;
}
/* Add large left margin only to the global site button */
.global-site-btn {
	margin-left: 40px !important;
}

/* Side menu (drawer): highlight the active/current page
   NOTE: Always keep this at the very end for specificity! */
.menu-drawer .current-menu-item > a,
.menu-drawer .current_page_item > a,
.menu-drawer .current-menu-ancestor > a {
	background-color: var(--color-primary) !important;
	color: var(--color-text-light) !important;
	border-radius: 6px;
	transition: background 0.2s;
}

.global-site-btn svg {
  vertical-align: middle;       /* または baseline, text-bottom も試す */
  margin-right: 6px;            /* テキストとの間隔 */
  /* アイコンが小さい/高すぎる場合は下記も試す */
  position: relative;
  top: -2px;                     /* プラス方向:下に動かす、マイナス:上に */
}

/* Title */
.title {
	position: relative;
	font-size: min(5vw, 26px);
	text-align: center;
	text-shadow: 2px 2px 3px black; 
	font-weight: bold;
	color: White;
	background-color: #303747;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 50px;
}

p {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* Selection notice: Japan or Global site */
#notice-area {
	padding-top: 20px;
	padding-bottom: 20px;
	display: block;
    position: relative;
    z-index: 1;
    background: #232323;
    border-bottom: 2px solid var(--color-primary);
}
/* 言語選択Noticeの閉じるボタン */
#notice-area .fa-close {
	font-size: 26px;
	position: relative;
    top: 2px;
}
/* 言語選択Noticeのメッセージ */
#notice-area #message {
    display: inline-block;
	margin-right: 40px;
	font-size: 12px;
}
/* 言語選択の国名 */
#notice-area #country {
	font-size: 20px;
	margin-right: 40px;
}
#notice-area #country {
    color: var(--color-primary);
    text-decoration: underline;
}
#notice-area #country:hover {
    color: gray;
}
#notice-area #country:active {
    color: white;
}
#notice-area #country:visited {
    color: var(--color-primary);
}

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 3カラム表示にする
**********************************************/
.new-entry-cards.large-thumb {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
}

.new-entry-cards.large-thumb a {
    width: 50%;
}

/*768px以下*/
@media screen and (max-width: 768px){
  .new-entry-cards.large-thumb a {
      width: 50%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .new-entry-cards.large-thumb a {
      width: 100%;
  }
} 

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
		
}

/*834px以下*/
@media screen and (max-width: 834px){
	
}

/*480px以下*/
@media screen and (max-width: 480px){

	#notice-area {
		padding-top: 26px;
	}
	/* 言語選択Noticeのメッセージ */
	#notice-area #message {
		font-size: 12px;
		margin-right: 30px;
		margin-top: 2px;
	}
	/* 言語選択の国名 */
	#notice-area #country {
		font-size: 18px;
		margin-right: 30px;
	}
	
}