/*
Theme Name: Understrap Child 02
Theme URI: https://understrap.com
Template: understrap
Author: Howard Development & Consulting
Author URI: https://howarddc.com
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,translation-ready,block-styles,wide-blocks,editor-style,threaded-comments,accessibility-ready
Version: 1.2.4.1757464058
Updated: 2025-09-10 09:27:38
*/


/* === Brand / Base === */
:root{
  --brand:#001eff; /* 仮のブランド色（後で正式色に） */
}
body{ font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","YuGothic","Meiryo",sans-serif; }
a{ text-underline-offset: .2em; }
.btn-primary,.bg-primary{ background-color:var(--brand)!important; border-color:var(--brand)!important; }
.btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
a:hover{ opacity:.9; }

@media (min-width: 1200px) {
	header,.nv-hero,#main,#colophone{
        max-width: 1280px !important;
		margin:0 auto;
    }
}

/*
ユーティリティメニュー－
 */
 
.topbar{
	background-color: var(--brand);
	color:white;
	padding:5px 0 10px!important;
	font-size:1.0rem;
}
@media (max-width: 991.98px) {
.topbar{
	font-size:1rem;
	}
}

@media (max-width: 500px) {
.topbar{
	font-size:1.2rem;
	}
}

.utility-nav {
  margin-left: auto;
}
.utility-nav a {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0.75rem;
  transition: all 0.3s ease;
}

.utility-nav a:hover {
  color: #ffffcc!important;
}

.utility-nav a::after {
	position: absolute;
	left: 0.75rem;
	content: '';
	width: 100%;
	height: 2px;
	background: #ffffcc!important;
	bottom:4px!important;
	opacity: 0;
	visibility: hidden;
  	transition: width 0.6s ease;
}

.utility-nav a:hover::after {
  width: calc(100% - 1.5rem);
  visibility: visible;
  bottom: 12px;
  opacity: 1;  
}




/*------------------------------------------------------------
アンカーで飛んできた要素」にだけ適用
-------------------------------------------------------------*/
:target {
  scroll-margin-top: 150px; /* ← ヘッダーの高さに合わせる */
}

/*------------------------------------------------------------
右サイドバー
-------------------------------------------------------------*/
/* モバイル時 */
/* ▼ 991.98px 以下（＝タブレット以下）のとき */
@media (max-width: 991.98px) {

  /* col-md-3 → 幅固定を解除して 100% に */
  .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;      /* 任意：下に余白 */
  }

  /* col-md-9 → こちらも 100% */
  .col-md-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px;      /* 任意：余白 */
  }

  /* 必要なら共通の余白設定も */
  .col-md-3,
  .col-md-9 {
    padding-left: 20px;
    padding-right:20px;
  }
}

#right-sidebar h3.widget-title{
	margin-top:20px;
	color:white;
	padding:10px 5px;
	background-color:#001eff;
	border:solid 1px #330099;
	font-size: 1.12rem;
}
/* サイドバーのメニュー共通設定 */
#right-sidebar .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各 li の基本設定 */
#right-sidebar .menu li {
  border-bottom: 1px solid #ccc;  /* 下線 */
/*  height: 70px;                   /* 高さ統一 */
/*  line-height: 70px;              /* テキスト縦中央 */
  padding: 5px 0px 5px 12px;             /* 左余白 */
  transition: all 0.2s ease;
}

/* リンクの装飾 */
#right-sidebar .menu li a {
  display: block;
  text-decoration: none;
  color: #333;
}

/* ホバー時 */
#right-sidebar .menu li:hover {
  background-color: #f5f5f5;
}

/* 現在ページ（current-menu-item） */
#right-sidebar .menu li.current-menu-item {
  border-left: 6px solid #0072ce;  /* 太めの青ライン */
  background-color: #f0f8ff;       /* うっすら青背景（任意） */
  font-weight: bold;               /* 強調 */
  padding-left: 6px;               /* ライン分調整 */
}

/*------------------------------------------------------------
1、align・・・文字の横位置
-------------------------------------------------------------*/

.al-c{ text-align: center; }/*中央寄せ*/
.al-r{ text-align: right; }/*右寄せ*/
.al-l{ text-align: left; }/*左寄せ*/


/*------------------------------------------------------------
2、valign・・・文字の縦位置
-------------------------------------------------------------*/

.vl-t{ vertical-align: top; }/*上寄せ*/
.vl-m{ vertical-align: middle; }/*中央寄せ*/
.vl-b{ vertical-align: bottom; }/*下寄せ*/


/*------------------------------------------------------------
3、float・・・左右の回り込み
-------------------------------------------------------------*/

.fl-r{ float: right; }/*右に回り込み*/
.fl-l{ float: left; }/*左に回り込み*/
.fl-c{ clear: both; }


/*------------------------------------------------------------
4、margin・・・周りのブロックからの距離
-------------------------------------------------------------*/

.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/

.m10{ margin: 10px!important; }/*周りからのmarginを10pxに*/
.m10-t{ margin-top: 10px!important; }/*周りからのmarginを10pxに*/
.m10-r{ margin-right: 10px!important; }/*周りからのmarginを10pxに*/
.m10-b{ margin-bottom: 10px!important; }/*周りからのmarginを10pxに*/
.m10-l{ margin-left: 10px!important; }/*周りからのmarginを10pxに*/

.m20{ margin: 20px!important; }
.m20-t{ margin-top: 20px!important; }
.m20-r{ margin-right: 20px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m20-l{ margin-left: 20px!important; }

.m30{ margin: 30px!important; }
.m30-t{ margin-top: 30px!important; }
.m30-r{ margin-right: 30px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m30-l{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.m40-t{ margin-top: 40px!important; }
.m40-r{ margin-right: 40px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m40-l{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.m50-t{ margin-top: 50px!important; }
.m50-r{ margin-right: 50px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m50-l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60-t{ margin-top: 60px!important; }
.m60-r{ margin-right: 60px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m60-l{ margin-left: 60px!important; }


/*------------------------------------------------------------
5、padding・・・周りのブロックからの距離（padding）
-------------------------------------------------------------*/

.p0{ padding: 0!important; }
.p0-t{ padding-top: 0!important; }
.p0-r{ padding-right: 0!important; }
.p0-b{ padding-bottom: 0!important; }
.p0-l{ padding-left: 0!important; }

.p10{ padding: 10px!important; }
.p10-t{ padding-top: 10px!important; }
.p10-r{ padding-right: 10px!important; }
.p10-b{ padding-bottom: 10px!important; }
.p10-l{ padding-left: 10px!important; }

.p20{ padding: 20px!important; }
.p20-t{ padding-top: 20px!important; }
.p20-r{ padding-right: 20px!important; }
.p20-b{ padding-bottom: 20px!important; }
.p20-l{ padding-left: 20px!important; }

.p30{ padding: 30px!important; }
.p30-t{ padding-top: 30px!important; }
.p30-r{ padding-right: 30px!important; }
.p30-b{ padding-bottom: 30px!important; }
.p30-l{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.p40-t{ padding-top: 40px!important; }
.p40-r{ padding-right: 40px!important; }
.p40-b{ padding-bottom: 40px!important; }
.p40-l{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.p50-t{ padding-top: 50px!important; }
.p50-r{ padding-right: 50px!important; }
.p50-b{ padding-bottom: 50px!important; }
.p50-l{ padding-left: 50px!important; }

.p60{ padding: 60px!important; }
.p60-t{ padding-top: 60px!important; }
.p60-r{ padding-right: 60px!important; }
.p60-b{ padding-bottom: 60px!important; }
.p60-l{ padding-left: 60px!important; }


/* 1件分全体 */
.news-list-item {
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}



.entry-content h2 {
    font-size: 1.1rem;
}

.entry-content h2.wp-block-heading {
  font-weight: bold;
  border: 1px solid #001eff;
  border-top: 2px solid #001eff;
  padding: 0.2em 1em 0.2em calc(1em + 10px);
  position: relative;
  margin: 40px 0px 25px; 
}


.entry-content h2.wp-block-heading::before {
  content: '';
  background-color: #001eff;
  background: repeating-linear-gradient( -45deg, #001eff, #001eff 2px, #ffffff 2px, #ffffff 4px );
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}


.entry-header h1.entry-title {
    position: relative;
    padding: .3em 0 .2em 0.3em;
    border-bottom: 3px solid #2541d0;
    color: #333333;
	font-size: 1.25rem;
}

.toph2blue{
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #2541d0;
    color: #333333;
	font-size: 1.8rem;
}

.entry-header h1.entry-title::before ,.toph2blue::before{
    position: absolute;
    top: 0;
    left: -0.3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #2541d0;
    content: '';
}

.entry-header h1.entry-title::after ,.toph2blue::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: -0.6em;
    height: 8px;
    width: 8px;
    background: #2541d0;
    content: '';
}


/* ==========================
   共通フッター
========================== */
.nova-footer .nova-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
}

/* --- 4つのCTA --- */
.nova-footer-cta{
  background:transparent;  /* 背景画像はメイン側に乗る想定ならそのまま */
  padding:24px 0 0;
}
.nova-footer-cta-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
.nova-footer-cta-item a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:220px;
  height:80px;
  background:rgba(0,0,0,.55);
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  font-size:14px;
}
.nova-footer-cta-icon{
  font-size:22px;
  margin-bottom:4px;
}
.nova-footer-cta-item a:hover{
  background:rgba(0,0,0,.75);
}

/* --- 水色の会社情報エリア --- */
.nova-footer-main{
  background:#c5d8f0;   /* スクショに近い水色。お好みで調整 */
  padding:40px 0 32px;
}
.nova-footer-main-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
.nova-footer-logo img{
  max-width:200px;
  height:auto;
}
.nova-footer-name{
  margin:16px 0 4px;
  font-weight:700;
}
.nova-footer-address{
  margin:0;
  font-size:14px;
  line-height:1.7;
}

.nova-footer-links{
  margin-top:auto;
  font-size:14px;
  white-space:nowrap;
}
.nova-footer-links a{
  color:#333;
  text-decoration:none;
}
.nova-footer-links a:hover{
  text-decoration:underline;
}

/* --- コピーライト --- */
.nova-footer-bottom{
  background:#c5d8f0;
  border-top:1px solid rgba(0,0,0,.1);
  padding:8px 0 16px;
  text-align:center;
  font-size:12px;
}

/* --- 4つのCTA部分の背景画像 --- */
.nova-footer-cta{
  background: url('https://www.novaelec.co.jp/wp/wp-content/uploads/2025/11/fotter.png') center/cover no-repeat;
  padding: 40px 0;   /* 上下の余白は好みで調整 */
}

/* --- レスポンシブ調整 --- */
@media (max-width:767.98px){
  .nova-footer-main-inner,.nova-footer-company,.nova-footer-links
  {
    display:block;
    margin:20px auto;
  }
}


/*
メインメニュー
 */
.mainnav .container .navitem1 img{
	width:200px;
}
.mainnav .container{
  display: flex;
  flex-direction: row;
}

@media (max-width: 991.98px) {
.navitem2{
  display:none!important;
}
}

/* ================================================
   Modern Navigation for Nova Electronics
   モーションコントロール製品卸売り会社向けナビゲーション
   ================================================ */

.mainnav {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 0;
}

.mainnav .container {
  display: flex;
  align-items: stretch;
  padding: 0 !important;
}

/* ================================================
   Logo / Brand Area
   ================================================ */

.navitem1 {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-right: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.navbar-brand {
  margin: 0;
  padding: 0;
}

.navbar-brand img {
  height: auto;
  width: 200px;
}

/* ================================================
   Main Navigation Area
   ================================================ */

.navitem2 {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.navitem2 .navbar {
  padding: 0;
  width: 100%;
}

.navitem2 .navbar-collapse {
  padding: 0;
}

/* ================================================
   Primary Menu (Main Items) - 等幅配置
   ================================================ */

#menu-primary {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

#menu-primary > li {
  flex: 1;
  position: relative;
  display: flex !important;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

#menu-primary > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
}

/* ホバーエフェクト - インジケーターライン */
#menu-primary > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #0052cc, #0077ff);
  transition: width 0.3s ease;
}

#menu-primary > li > a:hover::after {
  width: 100%;
}

#menu-primary > li > a:hover {
  color: #0052cc;
}

/* ================================================
   Submenu Container
   ================================================ */

#menu-primary .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 2px solid #0052cc;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  margin: 0;
  padding: 12px 0;
  list-style: none;
  z-index: 1000;
  min-width: max-content;
}

#menu-primary > li:hover > .sub-menu {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================
   Submenu Items - 1行表示
   ================================================ */

#menu-primary .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

#menu-primary .sub-menu a {
  display: block;
  padding: 10px 24px;
  color: #4b5563;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

#menu-primary .sub-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0052cc;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

#menu-primary .sub-menu a:hover {
  color: #0052cc;
  background-color: #f3f4f6;
  padding-left: 28px;
}

#menu-primary .sub-menu a:hover::before {
  transform: scaleY(1);
}

/* ================================================
   アクティブ状態の追加スタイリング
   ================================================ */

#menu-primary > li.current-menu-item > a,
#menu-primary > li.current-menu-parent > a {
  color: #0052cc;
  font-weight: 700;
}

#menu-primary > li.current-menu-item > a::after,
#menu-primary > li.current-menu-parent > a::after {
  width: 100%;
  background: linear-gradient(90deg, #0052cc, #0077ff);
}

/*------------------------------------------------------------
PC全体幅　上書き
-------------------------------------------------------------*/
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1280px!important;
    }
}
#main{
	padding:0px 20px;
}


/* 上部メタ部分 */
.news-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.news-list-date {
  color: #555;
}

/* ラベルのまとまり */
.news-list-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 共通ラベルデザイン（［］枠っぽく） */
.news-label {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* カテゴリ別カラー */
.news-label-imp {
  color: #cc0000;          /* 重要：赤 */
  font-weight: bold;
}

.news-label-new {
  color: #e67e22;          /* 新着：オレンジ寄り */
  font-weight: bold;
}

.news-label-prod {
  color: #333333;          /* 製品情報：落ち着いた色 */
}

.news-label-info {
  color: #336699;          /* お知らせ：青系 */
}

/* タイトル */
.news-list-title {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.news-list-title a {
  color: #222;
  text-decoration: none;
}

.news-list-title a:hover {
  text-decoration: underline;
}

/* 抜粋部分 */
.news-list-excerpt {
  font-size: 0.95rem;
  color: #444;
}