@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){
  /*必要ならばここにコードを書く*/
}


.mobile-menu-buttons {
background: #333333;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

.content-top {
margin: 0px;
padding: 0px;
}

  /*見出し更新*/
/* 見出しリセット */
.article h2{
background:none;
padding: 0;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
.sidebar h3{
background:none;
padding: 0;
}
.sidebar h3{
background:none;
padding: 0;
}
/* SP：上=テキスト / 下=画像（画像は60vh・トリミングなし） */
@media (max-width: 980px){
  .fv-area{ height:auto !important; margin:0 !important; padding:0 !important; }
  .fv-area .fv-wrap{ flex-direction:column !important; height:auto !important; }

  /* 並び順を指定：テキスト(1) → 画像(2) */
  .fv-area .fv-left{ 
    order: 1 !important;
    padding:28px 20px !important; gap:16px !important;
    display:flex !important; flex-direction:column !important;
    justify-content:center !important; align-items:center !important; text-align:center !important;
    color:#333333 !important;
  }
  .fv-area .fv-catch{ font-size:44px !important; line-height:1.05 !important; }
  .fv-area .fv-ctas{ justify-content:center !important; }
  .fv-area .fv-ctas a{ width:100% !important; max-width:320px !important; min-width:unset !important; text-align:center !important; }

  /* 画像は下に、60vhでcontain表示（切れない） */
  .fv-area .fv-right{
    order: 2 !important;
    position:relative !important; overflow:hidden !important;
    height:60vh !important; min-height:320px !important; max-height:80vh !important;
    margin:0 !important; padding:0 !important; background:transparent !important;
  }
  .fv-area .fv-right .fv-img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:contain !important; object-position:center !important;
  }
}

/* 極小端末で見出しをさらに縮小（任意） */
@media (max-width: 360px){
  .fv-area .fv-catch{ font-size:38px !important; }
}

/* 見出し2 */
.article h2 {
 color: #333333;/*文字色*/
  border: solid 5px #333333;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  background: #E9ED2C;/*背景透明に*/
  border-radius: 0.5em;/*角丸*/
}
.article h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #333333;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #333333;/*左線*/
}

.sidebar h3 {
	  /*線の種類（実線） 太さ 色*/
	  color: #333333;/*文字色*/
  border-bottom: solid 5px  #333333;
}

.content-bottom h2{
  /*線の種類（実線） 太さ 色*/
	  color: #333333;/*文字色*/
  border-bottom: solid 5px  #333333;
}

.metaslider_328 {
	  border: solid 5px #333333;/*線色*/
  background: #E9ED2C;/*背景透明に*/
  border-radius: 0.5em;/*角丸*/
	
}

.footer h3{
	  /*線の種類（実線） 太さ 色*/
	  color: white;/*文字色*/
  border-bottom: solid 5px  #E9ED2C;

}

#navi .navi-in{
 font-weight:bold;
}
.navi-in .menu-header .item-label{
font-size: 15px;
}
/*******************************
* バッジの色
********************************/
/* 必須マーク */
.must {
	background: #FF1A00;
}

/* 任意マーク */
.free {
	background: #999;
}

.must,
.free {
	color: #FFF;
	border-radius: 3px;
	font-size: 12px;
	margin-right: 10px;
	margin-top: 10px;
	padding: 5px 5px;
	letter-spacing: 0.2em;
}

/*******************************
* フォームの設定
********************************/
/* フォーム入力項目 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea  {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 3px solid #999999; /* 太線に変更 */
	border-radius: 0.5em;       /* 角丸 */
	box-sizing: border-box;
}

/* 送信ボタン */
input.sub-btn {
	width: 250px;
	height: 60px;
	background: #e60033;         /* ご指定の色 */
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 5px solid #333333;   /* 太線に変更 */
	border-radius: 0.5em;        /* 角丸 */
	transition: 0.3s;
	cursor: pointer;
}

/* 送信ボタンホバー */
input.sub-btn:hover {
	background-color: white;
	color: #e60033;              /* 背景色に合わせて文字色変更してもOK */
}

/* 送信ボタン中央寄せ */
.center {
	text-align: center;
}

/* 目次 */
.toc{
  font-size: 1em;
  font-weight:bolder;
  padding: 1em 2em;
  background-color: white;
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

.sidebar .author-box {
	  border:solid 4px #999999;
	  border-radius: 0.5em;/*角丸*/
}

.author-box{
	  border:solid 4px #999999;
	  border-radius: 0.5em;/*角丸*/
}

.author-thumb img {
	  border:solid 4px #999999;
	  border-radius: 0.5em;/*角丸*/
}

.pagination-next-link {
  background-color: #333333;
  color: #fff;
  border: none;
  border-radius: 0.5em;/*角丸*/
}
.pagination-next-link:hover {
  background-color: #333333;
  transition: all 0.5s ease;
  color: #fff;
}

.page-numbers {
  color: #333333;
  border: 4px solid  #333333;
  border-radius: 0.5em;;
}
.pagination .current {
  background-color:  #333333;;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color:#333333;
  color: #fff;
}


.search-edit {
  border: 4px solid 333333;
}

.banner {
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向中央揃え */
  background-color: #f0f0f0; /* 背景色 */
  padding: 20px;
  border-radius: 10px; /* 角を丸くする */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつける */
}

.banner img {
  width: 120px; /* 画像の幅 */
  height: 120px; /* 画像の高さ */
  object-fit: cover; /* 画像を枠内に収める */
  border-radius: 50%; /* 画像を丸くする */
  margin-right: 20px; /* 画像とテキストの間隔 */
}

.banner-content h2 {
  margin: 0 0 10px 0;
}

.banner-content p {
  margin: 0;
  line-height: 1.6; /* 行間 */
}

.banner-content a {
  color: #007bff; /* リンクの色 */
  text-decoration: none;
}

.page .date-tags {
display: none;
}

.info-list-caption{
	display:none;
}


.info-list.is-style-frame-border {
  border: none;
  border-radius: none;
}

.info-list.is-style-frame-border {
  border: 4px solid 333333;
	  border-radius: 0.5em;/*角丸*/
  
}

blockquote{
border:none;
padding: 0;
}
pre.wp-block-code{
border:none;
padding: 0;
}

blockquote {
  border: 4px solid #ccc;
  padding: 20px; /* 必要に応じて調整 */
}

pre.wp-block-code {
  padding: 20px; /* 必要に応じて調整 */
}

.eye-catch {
  padding: 0;
  border: 5px solid #333333;
  border-radius: 1em;
  overflow: hidden;
  box-sizing: border-box;

}

.eye-catch img {
  margin: 0;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5em;
}

.entry-title {
  color: #333333; /* 文字色 */
  border: solid 5px #333333; /* 線色 */
  padding: 0.5em; /* 文字周りの余白 */
  background: #E9ED2C; /* 背景色 */
  border-radius: 0.5em; /* 角丸 */
  text-align: center; /* 中央揃え */
}

/* 不要な :before を非表示 */
.archive-title:before {
  display: none;
}

.archive-title {
  color: #333333; /* 文字色 */
  border: solid 5px #333333; /* 線色 */
  padding: 0.5em; /* 文字周りの余白 */
  background: #E9ED2C; /* 背景色 */
  border-radius: 0.5em; /* 角丸 */
  text-align: center; /* 中央揃え */
}

.entry-card {
  font-size: 1em;
  font-weight:bolder;
  padding: 4px;
  background-color: whitesmoke;
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

.entry-card img {
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

.sidebar img {
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

.widget-entry-cards  img {
  border:solid 4px #333333;
  background: #E9ED2C;
  border-radius: 0.5em;/*角丸*/
}

.flex-viewport {
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

#metaslider_container_4606 img {
  border: solid 4px #333333;
  border-radius: 0.5em;
}

input.search-edit{
  border:solid 4px #999999;
  border-radius: 0.5em;/*角丸*/
}

.footer img{
  border:solid 4px #333333;
  border-radius: 0.5em;/*角丸*/
}

.custom-html-widget iframe {
  border:solid 4px #999999;
  border-radius: 0.5em;/*角丸*/
}

.entry-content table {
    border-collapse: collapse; /* collapseに変更で余白除去 */
    width: 100%;
    border: 4px solid #333333;
    border-radius: 0.5em;
    overflow: hidden;
}

.entry-content thead {
    background-color: #333333;
}

.entry-content thead th {
    padding: 10px 15px;
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.1em;
    border: 4px solid #333333;
}

.entry-content tbody td {
    padding: 10px 15px;
    border: 4px solid #333333;
    background-color: #ffffff;
    color: #333333;
    text-align: left; 
}

.entry-content tr td:first-child {
    background-color: lightgray; /* 控えめなピンクグレー調 */
    color: #333333;
    font-weight: bold;
}

/* 角丸を明示（collapse時は不要かつ余白出ないが保険として） */
.entry-content thead tr:first-child th:first-child {
    border-top-left-radius: 0.5em;
}

.entry-content thead tr:first-child th:last-child {
    border-top-right-radius: 0.5em;
}

.entry-content tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.5em;
}

.entry-content tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.5em;
}
/* 画面幅834pxより小さい場合でも横並び
@media screen and (max-width: 834px) {
  .container .column-wrap {
    flex-direction: row;
  }
}
*/

/* ==== Company Carousel (no JS) ==== */
/* 速度や間隔は変数で調整 */
/* —— 基本設定 —— */
.ccl{
  --ccl-gap: 2.4rem;
  --ccl-height: clamp(48px, 6vw, 80px);
  --ccl-speed: 60s;
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}
.ccl__mask{ overflow: hidden; position: relative; }
.ccl__track{
  display:flex;               /* ←これが無いと横並びにならない */
  align-items:center;
  gap:var(--ccl-gap);
  will-change:transform;
  animation:ccl-scroll var(--ccl-speed) linear infinite;
}
.ccl:hover .ccl__track{ animation-play-state:paused; }
.ccl__slide{ list-style:none; flex:0 0 auto; }
.ccl__slide img{
  height:var(--ccl-height);
  width:auto;
  display:block;
  object-fit:contain;
  opacity:.9;
  transition:transform .2s ease, opacity .2s ease;
}
.ccl__slide img:hover{ transform:translateY(-2px) scale(1.04); opacity:1; }
@keyframes ccl-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); } /* 同じ並びを2回入れている前提 */
}
@media (prefers-reduced-motion: reduce){
  .ccl__track{ animation:none; }
}
/* Cocoonのimg制御に負けないように */
.ccl__slide img{ max-width:none; }

.ccl__track{ display:flex; align-items:center; gap:2.4rem; flex-wrap:nowrap; }
.ccl__slide{ list-style:none; flex:0 0 auto; }

/* === ストップ対策パッチ === */

/* 1) スマホの“擬似ホバー”で止まらないように：hover一時停止はPCだけに限定 */
@media (hover: hover) and (pointer: fine) {
  .ccl:hover .ccl__track { animation-play-state: paused; }
}
/* 念のためデフォルトは常に走らせる */
.ccl .ccl__track { animation-play-state: running !important; }

/* 2) 外部CSSで折り返されないように強制 */
.ccl__track { display: flex !important; flex-wrap: nowrap !important; }

/* 3) 画像読み込み前後で幅ブレしても止まらないように最低高さを確保 */
.ccl__slide img { height: var(--ccl-height); width: auto; object-fit: contain; }

/* 4) 継ぎ目の段差対策（ギャップの計算差を吸収） */
.ccl__track { gap: var(--ccl-gap); }

/* ==== Company ichiran (no JS) ==== */

.ccl {
  --ccl-gap: 2.4rem;
  --ccl-height: clamp(48px, 6vw, 80px); /* 大きめ表示 */
  --ccl-speed: 5s;
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}
.ccl__mask { overflow: hidden; position: relative; }
.ccl__track {
  display: flex;
  align-items: center;
  gap: var(--ccl-gap);
  will-change: transform;
  animation: ccl-scroll var(--ccl-speed) linear infinite;
}
.ccl:hover .ccl__track { animation-play-state: paused; }
.ccl__slide { list-style: none; flex: 0 0 auto; }
.ccl__slide img {
  height: var(--ccl-height);
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.9;
  transition: transform .2s ease, opacity .2s ease;
}
.ccl__slide img:hover {
  transform: translateY(-2px) scale(1.04);
  opacity: 1;
}
@keyframes ccl-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ccl__track { animation: none; }
}
.ccl__slide img { max-width: none; }


/* 共通：ロゴグリッド */
.logo-grid {
  width: 100%;
}

.logo-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0 !important;

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央寄せ */
  gap: 12px;
}

.logo-grid__item {
  margin: 0 !important;
  float: none !important;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent; /* 枠も背景もなし */
  box-sizing: border-box;
}

.logo-grid__item img {
  display: block;
  max-width: 100%;
  height: 50px;  /* ロゴの縦サイズを統一 */
  object-fit: contain;
}

/* PC: 3列 */
@media (min-width: 769px) {
  .logo-grid__item {
    flex: 0 0 calc((100% - 24px) / 3); /* gap=12px → 2個分=24px */
    max-width: calc((100% - 24px) / 3);
  }
}

/* SP: 2列 */
@media (max-width: 768px) {
  .logo-grid__item {
    flex: 0 0 calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
  }
}



/* ===== CTA（資料請求/お問い合わせ）統合版 ===== */

/* 変数：SPのバー高さ（どのメディアクエリの外＝全体で1回だけ） */
:root { --cta-bar-h: 56px; }

/* 初期状態は非表示。JSで .is-visible を付与して表示 */
.side-cta {
  position: fixed;
  z-index: 9999;
  display: none;
}
.side-cta.is-visible {
  display: flex !important; /* PCは縦並び、SPは横並び（各メディアクエリで切替） */
}

/* 共通ボタン体裁 */
.side-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 4px solid #333333;
  font-weight: 700;
}
/* バリエーション */
.side-cta__btn--request { background: #E9ED2C; color: #333333; }
.side-cta__btn--contact { background: #333333; color: #FFFFFF; }

/* ===== SP（768px以下）：下部固定の横並びバー ===== */
@media (max-width: 768px) {
  /* ノッチ等のセーフエリア確保 */
  body {
    padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom));
  }

  .side-cta {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: calc(var(--cta-bar-h) + env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateZ(0); /* モバイル描画の安定化 */
  }

  .side-cta__btn {
    flex: 1 1 50%;
    height: var(--cta-bar-h);
    border-radius: 0;  /* バー状 */
    margin: 0;
    text-align: center;
  }

  .side-cta__btn span {
    writing-mode: horizontal-tb;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    display: block;
  }
}

/* ===== PC（769px以上）：右サイド縦並び固定 ===== */
@media (min-width: 769px) {
  .side-cta {
    right: max(12px, env(safe-area-inset-right));
    top: 22vh;
    bottom: 120px; /* reCAPTCHA等と被らない下限 */
    flex-direction: column;
    gap: 18px;
  }

  .side-cta__btn {
    width: 72px;
    height: 240px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
  }

  .side-cta__btn span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .2em;
  }
}

/* ===== Floating Modal (SEO Diagnosis) — 強化版 ===== */
:root{
  --pirates-black:#333333;
  --pirates-yellow:#E9ED2C;
  --modal-w:min(920px,92vw);
  --modal-pad:clamp(16px,2.5vw,24px);
  --modal-radius:12px;
  --shadow:0 12px 32px rgba(0,0,0,.35);
  --z-modal:100000;
}

/* オーバーレイ */
#seoDiagOverlay.seo-modal__overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:var(--z-modal);
}

/* 本体サイズを調整 */
#seoDiagModal.seo-modal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(.98);
  width: min(720px, 90vw);     /* ← 最大幅を720px、画面幅の90%以下 */
  max-height: 90vh;            /* ← 高さが画面をはみ出さないように */
  overflow-y: auto;            /* ← 高すぎたらスクロールできるように */
  border: 5px solid #333333;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  z-index: 100001;
}

/* 内部レイアウトを比率調整 */
.seo-modal__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* ← 左右比率を少し右広めに */
  min-height: unset;
}

/* 左の画像部分 */
.seo-modal__left img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 400px;  /* ← 左カラムの画像が大きくなりすぎないよう制限 */
}

/* スマホ用（768px以下）は縦並びで画面幅にフィット） */
@media (max-width: 768px){
  #seoDiagModal.seo-modal {
    width: min(95vw, 480px);  /* ← スマホは画面の95% or 480pxまで */
    max-height: 90vh;
  }
  .seo-modal__inner{
    grid-template-columns: 1fr;
  }
  .seo-modal__left img{
    max-height: 200px;
  }
}

/* 内部 */
.seo-modal__inner{
  display:grid; grid-template-columns:1fr 1.1fr;
  overflow:hidden; border-radius:calc(var(--modal-radius) - 4px);
}
.seo-modal__left{ background:#f7f7f7; display:grid; place-items:center; }
.seo-modal__left img{ display:block; width:100%; height:100%; object-fit:cover; }

.seo-modal__right{ padding:var(--modal-pad); display:flex; flex-direction:column; gap:12px; }
.seo-modal__title{
  margin:0; font-size:clamp(22px,2.8vw,28px); line-height:1.25;
  color:var(--pirates-black);
  border:5px solid var(--pirates-black); border-radius:8px;
  padding:.5em .7em; background:var(--pirates-yellow); text-align:center;
}
.seo-modal__lead{ margin:4px 0 8px; color:#333; font-weight:600; }

.seo-modal__form{ display:grid; gap:10px; }
.seo-modal__field{ display:grid; gap:6px; }
.seo-modal__field span{ font-size:14px; color:#444; }
.seo-modal__field input{
  width:100%; padding:10px 14px; border:3px solid #999; border-radius:8px; font-size:16px; box-sizing:border-box;
}
.seo-modal__submit{
  margin-top:6px; width:100%; height:52px; background:var(--pirates-black); color:#fff;
  border:5px solid var(--pirates-black); border-radius:10px; font-weight:700; letter-spacing:.08em; cursor:pointer;
}

.seo-modal__close{
  position:absolute; top:8px; right:10px; width:36px; height:36px;
  border-radius:50%; border:3px solid var(--pirates-black);
  background:#fff; color:var(--pirates-black); font-size:22px; display:grid; place-items:center; cursor:pointer;
}

/* SP */
@media (max-width:768px){
  .seo-modal__inner{ grid-template-columns:1fr; }
  .seo-modal__left img{ height:220px; object-fit:cover; }
}


@media (min-width:1025px){

  /* グロナビ内の該当リンクだけに適用（他には一切反映されない） */
  #navi .menu-item > a[href*="useful"],
  #navi .menu-item > a[href*="contact"] {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
    background: #e9ed2b !important;
    color: #333 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-weight: 700 !important;
    position: relative;
    top: 1px; /* ← ここが縦位置の微調整。違和感あれば 0 or 2 に変更 */
    z-index: 2;
  }

  /* 2つの間隔 */
  #navi .menu-item > a[href*="useful"]{
    margin-right: 10px !important;
  }
}

/* スマホ側 (#navi-mobile) は完全に無視 */
@media (max-width:1024px){
  #navi-mobile .menu-item > a[href*="useful"],
  #navi-mobile .menu-item > a[href*="contact"] {
    background: none !important;
    height: auto !important;
    padding: initial !important;
    border-radius: 0 !important;
  }
}

@media (min-width:1025px){
  #navi .menu-item > a[href*="useful"],
  #navi .menu-item > a[href*="contact"] {
    cursor: pointer !important; /* ← マウスカーソルをボタンっぽく */
    transition: transform .12s ease, opacity .12s ease;
  }

  /* hover */
  #navi .menu-item > a[href*="useful"]:hover,
  #navi .menu-item > a[href*="contact"]:hover {
    opacity: .85;
  }

  /* クリック時（押し込み感を出す） */
  #navi .menu-item > a[href*="useful"]:active,
  #navi .menu-item > a[href*="contact"]:active {
    transform: scale(0.94);   /* ← キュッと縮んで押した感じ */
    opacity: .75;
  }
}

@media (min-width:1025px){
  #navi .menu-item > a[href*="useful"] {
    margin-left: 14px !important; /* ← ここを 10〜20 の間で調整できる */
  }
}

@media (min-width:1025px){

  /* お問い合わせだけ色変更 */
  #navi .menu-item > a[href*="contact"] {
    background: #e60033 !important;
    color: #fff !important;
    border-radius: 18px !important; /* ← 現状に合わせてそのまま */
  }

  /* クリック/タップ時の押し込み感も維持 */
  #navi .menu-item > a[href*="contact"]:hover {
    opacity: .85 !important;
  }
  #navi .menu-item > a[href*="contact"]:active {
    transform: scale(0.94);
    opacity: .75;
  }
}



@media (min-width:1025px){
  /* アンカーを基準にしてバッジ配置 */
  #navi .menu-item > a[href*="contact"]{
    position: relative !important;
  }

  /* 通知ドット（常時表示） */
  #navi .menu-item > a[href*="contact"]::after{
    content: "";
    position: absolute;
    width: 10px;               /* ドット直径（8〜12で調整可） */
    height: 10px;
    background: #e60033;       /* 赤丸 */
    border: 2px solid #fff;    /* 白フチで視認性UP */
    border-radius: 50%;
    top: -4px;                 /* 位置調整：上方向 */
    right: -4px;               /* 位置調整：右方向 */
    box-shadow: 0 0 0 1px rgba(0,0,0,.06); /* ほんのり縁取り */
    z-index: 3;
    animation: badgePop .18s ease-out;
  }

  @keyframes badgePop{
    0%{ transform: scale(0); opacity: 0; }
    100%{ transform: scale(1); opacity: 1; }
  }
}