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

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



/*トップページ黄色のエリアスマホ用ズレ防止-start---------*/

@media screen and (max-width: 768px) {

  html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden !important; /* 横スクロール強制防止 */
  }

  .new-entry-card {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    /* background-color: #ff0000;*/
  }

  .new-entry-card-thumb,
  .new-entry-card-thumb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    box-sizing: border-box !important;
  }

  .new-entry-card-content {
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .swiper-wrapper {
    transform: none !important; /* 変なズレ防止 */
    width: 100% !important;
  }

  .swiper-slide {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .new-entry-card-content {
    padding: 0 40px !important;
    box-sizing: border-box !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .new-entry-card-content * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    word-break: break-word;
  }

  .new-entry-card-content p,
  .new-entry-card-content h1,
  .new-entry-card-content h2,
  .new-entry-card-content h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/*トップページ黄色のエリアスマホ用ズレ防止-end---------*/









/* =====■■■■■ヘッダーナビSTART■■■■■===== */


:root{
  --wrap-w: 1200px;
  --header-h: 132px;
  --nav-navy:#0f2a55;
  --menu-gap:22px;
  --sns-gap:8px;
  --drop-top:40px;
  --dropdown-gap: 0px;/*下層メニューの上部隙間*/
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:#fff}

/* ===== 外枠：左右に白余白があっても中身は縮まない ===== */
.site-header{
  display:flex;
  justify-content:center;
  padding:0px 10px; /* ここが白余白 */
}
.header-wrap{
  width:100%;                 /* 画面幅いっぱいを基準に  */
  max-width:var(--wrap-w);    /* ただし最大1200pxに制限 */
  height:var(--header-h);
  position:relative;
  border-radius:18px;
  overflow:visible;
  background:var(--nav-navy) url("https://yojigenkun.com/new-official/wp-content/uploads/gmenuwall.png") center/cover no-repeat;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
/* 以前の transform: scale(...) は完全撤去 */

/* ===== 内部レイアウト ===== */
.inner{
  position:absolute;
  inset:0;
  padding: clamp(10px,1.6vw,16px) clamp(12px,2vw,20px);
  display:grid;
  grid-template-columns:auto 1fr; /* 左：ロゴ／右：3段 */
  align-items:center;
  column-gap: clamp(16px,2vw,24px);
}

/* 左：ロゴ */
.brand img{
  display:block;
  height:min(100px, calc(var(--header-h) - 20px));
  width:auto; margin-top: -5px;   /* ←ここを追加 */
}

/* 右：3段 */
.right{
  height:100%;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:start;
  row-gap:9px;/*縦方向の隙間*/
}

/* 1段目：SNS */
.sns{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:var(--sns-gap);
}
.sns a img{
  display:block;height:28px;width:auto;transition:opacity .15s ease;
}
.sns a:hover img{opacity:.85}

/* 2段目：CTA */
.cta{justify-self:end;padding-top:3px;padding-bottom:5px; }
.cta img{
  display:block;height:32px;width:auto;
  transition:transform .08s ease,opacity .15s ease;
}
.cta:hover img{transform:translateY(-1px);opacity:.95}

/* 3段目：メニュー（PC） */
.mainnav{align-self:end;justify-self:end;position:relative}
.mainnav ul,.mainnav li{list-style:none;margin:0;padding:0}
.mainnav>ul{display:flex;align-items:center;gap:var(--menu-gap)}
.mainnav li{position:relative;padding:0 2px}
.mainnav li>a{display:inline-block}
.mainnav a img{
  display:block;height:27px;width:auto;transition:opacity .15s ease;
}
.mainnav a:hover img{opacity:.85}

/* ===== ドロップダウン ===== */
.submenu{
  position:absolute;
  left:0;
   top: calc(100% - 8px); /* ← 8px 上に引き上げる */
  width:max-content; min-width:0; max-width:60ch; white-space:nowrap;
  padding:3px;
  background:#ffe07a;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:grid; gap:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:50;
}
.submenu li{border-top:1px solid rgba(0,0,0,.08);padding:2px 10px 2px 20px}
.submenu li:first-child{border-top:none}
/*ドロップダウンサブメニュー.submenu aでデザインの調整*/
.submenu a{
  display:block; padding:3px 12px 3px 0; color:#0f2a55;
  text-decoration:none; background:transparent; border-radius:0;
  font-size: 0.85rem;
}
/*.submenu a:hover{background:rgba(255,255,255,.25)}*/
.submenu a::before{
  content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900;
  display:inline-block; margin-right:8px;
  position:absolute; left:5px; top:50%; transform:translateY(-50%);
}
/* 開閉＆隙間対策 */
.has-sub:hover>.submenu,.has-sub:focus-within>.submenu{
  opacity:1;visibility:visible;pointer-events:auto;
}

/* ===== レスポンシブ：ここからメニュー撤収（ハンバーガーはテーマ側に任せる） ===== */
@media (max-width:1120px){
  .mainnav{display:none}     /* これだけでOK（Cocoon等のハンバーガーに切替） */
  /* 余裕がなければCTAも多少縮める */
  .cta img{height:28px}
  .sns a img{height:26px}
}

/* 補助：超狭幅でロゴを自動微縮 */
@media (max-width:420px){
  .brand img{height:84px}
}

/* 固定ヘッダーの中央配置と食い込み防止 */



.header-wrap {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--wrap-w); /* 1200px */
  width: 100%; /* これを外すか、必要に応じて調整 */
  z-index: 9999;
}


/* 下のコンテンツにヘッダー分の余白を追加 */
body {
  margin-top: var(--header-h); /* 132px */
}



.submenu {
  transform: translateY(-4px);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.has-sub:hover .submenu {
  transform: translateY(0);
  opacity: 1;
}


/* =====■■■■■ヘッダーナビEND■■■■■===== */



/* =====〇〇〇〇〇スマホナビSTART〇〇〇〇〇===== */

/* ===== PCでは必ずモバイルヘッダーを消す（強制） ===== */
@media (min-width: 1100px){
  .simple-mobile-header{ display: none !important; }
  .mobile-menu{ display: none !important; }   /* 念のため */
}

/* ---- PC (1100px以上)：従来の固定ヘッダーのまま ---- */
@media (min-width: 1100px){
  .header-wrap{
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--wrap-w);
    width: 100%;
    z-index: 9999;
  }
  body{ margin-top: var(--header-h); } /* PCは相殺余白が必要 */
}

/* ---- スマホ/タブレット（～1099px）：流れる自作ヘッダーのみ ---- */
@media (max-width: 1099px){
  /* テーマ標準ヘッダーは非表示（重複防止） */
  .header-wrap{ display: none !important; }

  /* 自作モバイルヘッダーを通常フローで表示 */
  .simple-mobile-header{
    display: block !important;
    position: static;      /* ←流れる配置 */
    background: #fff;
    border-bottom: 1px solid #ccc;
    z-index: 10;
  }

  /* 余白の原因になる相殺マージンを消す */
  body{ margin-top: 0 !important; }

  /* ロゴ＆ハンバーガー行（お好みで） */
  .mobile-header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
  }
  .mobile-logo img{ height: 40px; }

  /* ハンバーガー */
  .hamburger{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px; height: 24px; cursor: pointer;
  }
  .hamburger span{
    display: block; height: 3px; background: #fff; border-radius: 2px;
  }

  /* メニューはデフォ非表示 → .activeで表示 */
  .mobile-menu{ display: none; background:#fff; border-top:1px solid #ccc; line-height: 1.2; }
  .mobile-menu.active{ display: block; }
  .mobile-menu ul{ margin:0; padding:0; list-style:none; }
  .mobile-menu li{ border-bottom:1px solid #eee; }
  .mobile-menu a{ display:block; padding: 20px 3px 3px 3px; text-decoration:none; color:#333; }

  /* 参考：超狭幅でロゴ微縮 */
  @media (max-width: 420px){
    .mobile-logo img{ height: 36px; }
  }
}

.mobile-menu {
  max-height: 80vh; /* 画面の80%までに制限 */
  overflow-y: auto; /* 縦スクロールを許可 */
  transition: max-height 0.3s ease;
}

.mobile-menu.active {
  display: block;
}

/*コンパクトメニュー*/
.compact-menu li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  margin-left: 3px;
}

.compact-menu a {
  display: inline-block;
  padding: 6px 10px;
  font-size: 14px;
  background: #f5f5f5;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
}

.bluebtn a {
  font-size: 1.0em;
  border: 1px solid white;       /* ← 修正ポイント */
  font-weight: bold;
  color: #fff;
  background: #1D2E58;
}

/*「ブログ」だけリンクなし*/
.bluebtn_nolink{
  font-size: 1.0em;
  border: 1px solid white; 
  font-weight: bold;
  color: #fff;
  background: #1D2E58;
  display: inline-block;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

/* =====〇〇〇〇〇スマホナビEND〇〇〇〇〇===== */


/* ▼▼▼▼▼作品集作成時の追加ｃｓｓ　start　20250830▼▼▼▼▼ */

.alignwide img {
  display: block;
  margin: 0 auto;
 $00A0max-width: 1100px; $00A0 $00A0 /* wrap-wと統一 */
  width: 90vw;           /* 画面幅の90%まで広がる */
  height: auto;
}


/*画面の余白ゼロ*/
.main {padding:0;}

/* スマホだけメイン上の余白を詰める */
@media (max-width: 768px) {
  /* メイン領域の上パディングを小さく */
  main#main.main {
    padding-top: 8px !important;   /* 0～12pxで好み調整 */
  }

  /* 本文の最初のブロックの上マージンを消す（画像やグループ等） */
  .entry-content > *:first-child {
    margin-top: 0 !important;
  }

  /* スライダー/メイン画像のラッパーを使っている場合は保険で */
  .slider-wrapper,
  .simple-slider {
    margin-top: 0 !important;
  }
}




/*基本のタグのcss*/


/*サイドバーの文字*/
.widget-sidebar {font-size:smaller;}
.list-item-caption{margin:0;padding:0;}
.widget-sidebar a{padding:1px!important;}


/* Instagram埋め込みを中央寄せ＆レスポンシブ start*/
.entry-content .wp-block-embed-instagram,
.entry-content .wp-block-embed-instagram .wp-block-embed__wrapper {
  display: flex;
  justify-content: center;
}

.entry-content .instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;   /* 親幅に合わせる */
}

/* Instagram & Twitter 共通：中央寄せ＋幅制限 */
.entry-content .instagram-media,
.entry-content .twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 400px !important; /* インスタと同じ幅にする */
}
/* Instagram埋め込みを中央寄せ＆レスポンシブ end*/





/*スマホ　カテゴリーページ　テキスト隙間*/
@media screen and (max-width: 1099px) {
  .category-page-content p {
    padding: 0 20px 0 20px;
  }
}

/*スマホメニュー背景---------start*/
@media screen and (max-width: 1099px) {
  .simple-mobile-header {
    /*background-image: url('https://yojigenkun.com/new-official/wp-content/uploads/gmenuwall.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2px; /* 必要に応じて調整 */
    /*border-radius: 20px;  任意。丸みつけたい場合 */
    background-color: transparent !important; /* Cocoonデフォルトを打ち消す */
  }
}



/*トップページコピー---------start*/
.content-wrapper {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 16px;
}
.content-wrapper h2 {
  max-width: 1100px;
  margin: 10px auto;
  padding: 10px 10px 5px;
}

/*スマホボタン---------start*/
.sp-button-grid {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
    margin-top: 50px;
  }

  .sp-btn {
    width: 100%;
    aspect-ratio: 4 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .sp-btn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
    display: block;
  }

  .sp-btn:hover img {
    transform: scale(1.05);
  }
}
/*スマホボタン---------end*/


/*トップ画面　トップ画像　スマホ用調整*/
@media screen and (max-width: 768px) {
  .simple-slider img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  .simple-slider {
    overflow: visible !important;
    height: auto !important;
  }
}

/*トップ画面　メインテキスト　スマホ用調整*/
@media screen and (max-width: 768px) {
  .wp-block-column p {
    padding: 0 15px;
  }
}

/* スマホヘッダー部分の色*/
/*
@media screen and (max-width: 768px) {
  .header-container,
  .simple-mobile-header {
    background-color: #FFF !important;
  }
}

*/

/* トップページの日付を削除*/
.page .post-date,
.page .entry-date,
.page .published {
  display: none;
}

/* すべてのボタンをホバー時に少し上に移動 */
.wp-block-button__link {
  transition: transform 0.2s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  color: #ddff22 !important;
}



/* ボタン削除 */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* お客様の声 */
.voice {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: nowrap;
}
.voice img {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}
.voice p {
  line-height: 1.6;
  margin: 0;
  display: block;
  max-width: 600px;
}
@media screen and (max-width: 600px) {
  .voice {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .voice p {
    max-width: 100%;
  }
}



/*フッタの会社情報をスマホでも表示*/
@media screen and (max-width: 834px) {
  .footer-widgets {
    display: block !important;
  }
}

/*トップ　メインイメージスライド*/
.simple-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.simple-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
}

/*メニュー切り替え*/
@media screen and (max-width: 1099px) {
  .custom-header {
    display: none;
  }
}
@media screen and (min-width: 1100px) {
  .mobile-header {
    display: none;
  }
}
.mobile-header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 80px;
	background-image: url('https://yojigenkun.com/new-official/wp-content/uploads/smp-menu-wall.png');
}
.mobile-logo {
  display: block;
}
.mobile-logo img {
  height: 70px !important;
}
.hamburger {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* 更新日タグを非表示*/
.post-update {
  display: none;
}

/*幅1100　カテゴリー*/
#list {
  max-width: 1100px;
  margin: 0 auto;
}


/*幅1100　固定ページ　お問合専用*/
.page-id-118 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
}





/*トップ　最新リスト６*/
.home .wp-block-latest-posts__list {
  width: 1000px;
}
.home .wp-block-latest-posts__list img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}



/* サムネイル枠 */
.entry-card .entry-card-thumb img,
.widget-entry-card .entry-card-thumb img,
.related-entry-card-thumb img {
  /*border: 1px solid #f3b700;*/
  border-radius: 16px;
  box-sizing: border-box;
}


/* テゴリサムネイル群の下の隙間 */
#list {
  padding-bottom: 40px;
}
/*カテゴリーラベル*/
.cat-label {
  position: absolute;
  top: 8px !important;
  left: 8px !important;
 $00A0background-color:#f3b700!important;
 $00A0color: #fff;
  padding: 4px 12px 2px 12px;
  font-size: 0.75rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.new-entry-card-thumb img {
  border-radius: 12px;
}




/* フッター設定 */
#footer,
#footer-in,
.footer-widgets,
.footer-left,
.footer-info,
.footer-info li,
.footer-left * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}
.footer-left {
  padding: 15px 0 0 0px !important;
}
.footer-left li {
  line-height: 1.5 !important;
  margin: 0 0 0 9px !important;
  font-size: 0.8em;
}
.footer-left strong {
  font-size: 1.2em !important;
}

/*SNSアイコン*/
.social-icons {
  margin-top: 5px !important;
  margin-left: 11px !important;
  display: flex;
  gap: 12px;
}
.social-icons img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s;
}
.social-icons img:hover {
  opacity: 0.7;
}

/*パンくずリスト*/
#breadcrumb {
  max-width: 1150px;
  margin: 30px auto 0px auto;
  text-align: right;
  padding-right: 20px;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* H1周辺の余白を詰める */
.article-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.entry-title {
  margin-top: 5px !important;
  padding-top: 0 !important;
}
.category-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.archive-title {
  margin-top: 5px !important;
  padding-top: 0 !important;
}

/* 付箋デザイン */
.fusen-box {
  position: relative;
  width: 90%;
  max-width: 600px;
  margin: 2em auto;
  padding: 1.2em 1em;
  background: #f8b600;
  border: 1px solid #f0e68c;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  line-height: 1.6;
  box-sizing: border-box;
  animation: fuwafuwa 3.5s ease-in-out infinite;
  transform-origin: top center;
}
.fusen-tape {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  width: 60px;
  height: 20px;
  background: rgba(200, 200, 200, 0.6);
  transform: rotate(-5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
@keyframes fuwafuwa {
  0% {
    transform: rotate(-0.5deg);
  }
  50% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(-0.5deg);
  }
}
/* --- YouTubeを中央＆レスポンシブに --- */

/* アーカイブページ、作品カテゴリーだけサイドバーを非表示 start*/
/* body.categoryid-3 .sidebar,
body.archive .sidebar{
  display: none;
}

body.categoryid-3 .main,
body.archive .main{
  width: 100%;
}

*/
/* アーカイブページ、作品カテゴリーだけサイドバーを非表示 end*/


/*サイドバーありメインエリアの上部隙間削除*/
.main{padding-top:0px;}
.breadcrumb{margin-top:10px!important;}
/*フッターコンテンツの幅*/
.footer-in{width:100%;}





/* ▲▲▲▲▲作品集作成時の追加ｃｓｓ　end　▲▲▲▲▲ */




/*サイドバーメニュー*/
/*ブログのアーカイブタイトル位置調整*/
.widget-sidebar-title{margin:0 0 5px 0 !important;padding:2px 0 0 12px!important;font-size:1.0em;}
.sidebar aside{margin-bottom:5px!important;}

.sidebar a img:hover {
    transform: scale(1.02); /* 1.02倍 */
}


/* ページ送りナビの左右を反転 start---------*/
.pager-post-navi{
    display: flex!important;
    flex-direction: row-reverse!important;
}
.fa-chevron-left,.fa-chevron-right{visibility: hidden;}



/* 右側のボタン右端に移動 */
.pager-post-navi .prev-post .prev-post-thumb {order: 1; }
/* 右のボタン（古い記事）のテキストを右寄せにする */
.pager-post-navi .prev-post-title {
    text-align: right !important; /* テキストを右寄せに強制 */
    width: 100%; /* タイトル要素の幅を親要素いっぱいにする */
}

.pager-post-navi .next-post .next-post-thumb {order: 1; /* flexアイテムの順番を一番最初（左端）にする */
}

/* 左側のボタン（新しい記事、元の .next-post）の配置を左寄せにする */
.pager-post-navi .next-post {
    text-align: left !important; /* テキストを左寄せに */
    justify-content: flex-start !important; /* コンテンツを左端に詰める */
}


/* 左のボタン（新しい記事）内のタイトル要素を左寄せにする */
.pager-post-navi .next-post-title {
    text-align: left !important; /* テキストを左寄せに */
    width: 100%; /* タイトル要素の幅を親要素いっぱいにする（重要） */
}

/* 左のボタン（新しい記事、元の .next-post）のコンテンツ配置を調整 */
.pager-post-navi .next-post {
    /* これまでの設定に含まれる可能性があるため、再度確認 */
    justify-content: flex-start !important;
}
/* ページ送りナビの左右を反転 end---------*/







/*リクルートページ*/
.wp-block-cocoon-blocks-sticky-box{
	margin:20px auto;
	width:90%!important;
}
.page .rec_p{
width:85%!important;
	margin:4px auto!important; 
}
/*フッターのメニュー*/
.sitemap-banner-in{font-size:0.8em;}
/*流れstart-----------------------*/
.na-card-container {
  display: flex; width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1050px; /* 4枚並べられる最大幅に制限 */
  margin: 0 auto;
	margin-bottom:40px;
	  gap: 22px;
}


.na-card {
  width: 110px;
  overflow: hidden;
}

.na-card img {
  width: 90%;
  height: auto;
  display: block;
}

.na-card p {
padding:13px 25px 0 15px;
font-size: 0.9em;
margin: 14px;
line-height: 1.5;
}


/* 4列（デスクトップ） */
.na-card {
  width: calc(20% - 18px);
}


/*スマートフォンレイアウト*/
.step-box {
  border-radius: 12px;
  margin: 16px auto;
  max-width: 100%;
  box-sizing: border-box;
	background-color:#fefef;
  padding: 10px 10px 0px 10px;
	font-size:0.9em;
	  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);border: 1px solid #eee;
}

.step-title {
background-color:#0F214E;
border-radius: 8px;
padding:5px 5px 5px 4px;
}

.step-title img {
  display: block;
  max-width: 100%;
  height: auto;
 
}
.step-box p {
	font-size:;0.8em;
  padding:5px 0 0 10px;
	line-height: 1.6;
  color: #000000;
}


/*事業内容-流れ-PCとスマホ切り替え----------*/

/* PC表示用（1100px以上） */
@media screen and (min-width: 1100px) {
  .na-card-container {
    display: flex; /* ← 元のレイアウトを維持 */
    gap: 20px;     /* 任意：カード間の余白 */
  }

  .step-box-all {
    display: none;
  }
}
/* 事業内容スマホ表示用（1099px以下） */
@media screen and (max-width: 1099px) {
.na-card-container {
    display: none;
  }
.step-box-all {
    display: block;
  }
/*サイドバーを中央に*/
.sidebar {text-align: center;
}
}





/*実績の納品先・制作物の表---------*/
.tbl-common01 {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 16px;
  max-width: 800px;
  margin: 1em auto;
  font-family: sans-serif;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
	background-color:#ffffff;
}

.tbl-common01 dt {
  font-weight: nomal;
  color: #333;padding-left:5px;
  text-align: center;border-radius: 5px;
	background-color:#eeeeee;}

.tbl-common01 dd {
  margin: 0;
  color: #555;
}


/*メールフォーム 必須*/
.hissu{ font-weight:bold;
color:#ff0000;}

/*グラフで見る--------*/
.page-id-4247 .wp-block-columns{
width:94%;
margin:0 auto;
}



/* スマホ対応：画面幅が480px以下のときは縦並びに */
@media screen and (max-width: 480px) {
  .tbl-common01 {
    grid-template-columns: 1fr;
  }

  .tbl-common01 dt {
    margin-top: 1em;
  }

  .tbl-common01 dd {
    margin-bottom: 0.5em;
  }
}


/*事業内容start--------------*/

.ji-card-container {
  display: flex; width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
	  max-width: 1050px; /* 4枚並べられる最大幅に制限 */
  margin: 0 auto;
	  gap: 22px;
}


.ji-card {
  width: 210px;
  overflow: hidden;
}

.ji-card img {
  width: 90%;
  height: auto;
  display: block;
}

.ji-card p {padding:19px 10px 0 10px;
  font-size: 0.9em;
  margin: 14px;
   line-height: 1.5;
	
}



/* 4列（デスクトップ） */
.ji-card {
  width: calc(25% - 18px);
}

/* 3列（中型画面） */
@media (max-width: 1024px) {
  .ji-card {
    width: calc(33.333% - 16px);
  }
}

/* 2列（タブレット・小型画面） */
@media (max-width: 1024px) {
  .ji-card {
    width: calc(50% - 12px);
  }
}


.ji-card p img {
	float: left;
  width: 60px; /* アイコンのサイズ調整 */
  height: auto;
  margin-right: 12px; 
  margin-bottom: 4px;
}

.ji-card p {
  margin: 0;
  padding: 12px 10px 0 10px;
  font-size: 0.95em;
  line-height: 1.5;
  color: #555;
}




/*私たちの強み------------*/
.ji-feature-grid {
 width:950px;  width: 100%;
	display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
 padding: 0;
	margin:0 auto;
 }

.ji-feature-card {
  width: calc(33.333% - 16px); /* PC表示：3列 */
  padding: 20px;
  text-align: center;
}

.ji-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.ji-feature-icon {
  margin-bottom: 0; 
  line-height: 0;
}

.ji-feature-icon img {
  width: 200px;
}

.ji-feature-text  {
  margin: 10px 0 0 0;
  padding: 10px;
  line-height: 1.5;
  color: #555;
	font-size: 0.9em;text-align: left; 

}
@media (max-width: 1024px) {
  .ji-feature-card {
    width: calc(50% - 12px); /* 2列表示に切り替え */
  }
}



/*事業内容end--------------*/


h1 {
	font-family: 'Arial Black', sans-serif;font-weight:bold!important;}

/*画像の下の謎の隙間削除*/
.se-image-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

/*h3 問い合わせボタン用*/
.h3-inf{padding:6px 0 0 0;
	background-color:#0F214E!important;
	text-align:center!important;
color:white;letter-spacing:0.3em;border-radius: 7px; /* ←ここが角丸 */

	}
.ji-icon {
  float: left;
  width: 10px; /* アイコンのサイズ調整 */
  height: auto;
  margin-right: 12px; /* テキストとの余白 */
  margin-bottom: 4px; /* 下の行との余白 */
}

/*利用シーンメインページ start------------------*/
/*追加画像ギャラリー*/
.page-id-7392 .wp-block-gallery,
.page-id-7398 .wp-block-gallery,
.page-id-7401 .wp-block-gallery,
.page-id-7403 .wp-block-gallery
{width:80%!important;
margin:0 auto;margin-bottom:20px;}

.se-image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
	margin-bottom:40px;
}

.se-image-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* スマホ対応：2列に切り替え */
@media screen and (max-width: 768px) {
  .se-image-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
  }
	}

/*利用シーンメインページ end------------------*/







/* 利用シーンレイアウト start--------- */

.ad-layout {
  width: 100%;
  max-width: 1050px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  margin: 0 auto;
}

.left-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 350px;
}

.headline-image img {
width: 100%;
max-width: 600px;
height: auto;
margin-bottom:10px;
}

.description p {
  font-size: 1em;
  line-height: 1.6;
}


/* リスト部分 */
.highlight-list {
  width: 100%;
  max-width: 950px;
  margin: 20px auto;
  list-style: none;
  padding: 0 16px;
  font-size: 1.0em;
  line-height: 1.6;
	padding-bottom:20px;
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* チェックマーク画像 */
.check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* マーカーのベース */
.marker {
  display: inline-block;
  font-weight: bold;
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0 2px;
  word-break: keep-all;
}
.check-icon {
margin-top: 6px;
}
/* 色別マーカー */

.marker-y {
  background: linear-gradient(transparent 60%, #fff176 60%); /* 黄色 */
}

.marker-b {
  background: linear-gradient(transparent 60%, #D3C7FC 60%); /* ペッツ紫 */
}

.marker-g {
  background: linear-gradient(transparent 60%, #9CE6FF 60%); /* キャラ水色 */
}

.marker-p {
  background: linear-gradient(transparent 60%, #FFCB87 60%); /* 鬼オレンジ */
}

/* レスポンシブ対応 */
/* 初期状態：PC用を表示、スマホ用を非表示 */
.sp-ad-layout {
  display: none;
}
/*スマホ--------------------*/
@media screen and (max-width: 700px) {
  .ad-layout {
    display: none;
  }
  .sp-ad-layout {
    display: block;
  }
/*追加画像ギャラリー*/
.page-id-7392 .wp-block-gallery,
.page-id-7398 .wp-block-gallery,
.page-id-7401 .wp-block-gallery,
.page-id-7403 .wp-block-gallery
{width:99%!important;
margin:0 auto;}	

	
}

.sp-left-image {margin:0 auto!important;text-align:center;}
.sp-left-image img{ width:85%;margin:20px auto;}
.sp-headline-image{text-align:center!important;margin-bottom:15px;}






/* 利用シーンレイアウト end--------- */

/* スマホ-コピーライト直前の余白を消す */
@media screen and (max-width: 1099px) {
  .footer-bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* 検索ボタンフッター内の検索フォーム全体の幅を制限 */
.widget_search .search-box {
  max-width: 360px;       /* 最大幅を指定（お好みで調整） */
  width: 70%;
  margin: 0 auto;         /* 中央寄せ */
  display: flex;
  align-items: center;
	padding:7px!important;
}

/* 検索ボタン入力欄のスタイル */
.footer-left .search-edit {
  width: calc(100% - 40px); /* ボタン分の幅を除く */
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

/* 検索ボタンのスタイル */
.footer-left .search-submit {
  width: 40px;
  height: 68%;
  background-color: #666;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 検索ボタンスマホ非表示 */
@media screen and (max-width: 1099px) {
  .footer-left .widget_search .search-box {
display:none;
  }
}




/*トップページ最新記事*/
@media (min-width: 1100px) {
.home .wp-block-latest-posts__list{width:880px; 
	margin:8px auto;}
.wp-block-latest-posts__list li {
  display: flex;
  align-items: center;
  gap: 0.5em; }
.wp-block-latest-posts__post-title,
.wp-block-latest-posts__post-date {
  display: inline;
  margin: 0;
}
}
.wp-block-latest-posts__post-date {
  font-size: 0.85em;
  color: #666;
}

@media (max-width: 1099px) {
	.home .wp-block-latest-posts__list{width:95%; 
	margin:0px auto;padding:0;}
}
.home .wp-block-image{padding:0;margin-bottom:0;}



/*英語ページ-----start*/
.eng-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap: 16px;
  margin: 20px 0;
}

.eng-item {
  text-align:left;
}

.eng-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.eng-item img:hover {
  transform: scale(1.05);
}
.eng-caption {
padding-top:0.5em;
font-size: 0.8em;
color: #333;
line-height:1.6;

}

.eng-gallery span{color:#0F214E;
font-weight:bold;background-color:#eee;}

/* スマホ：2列に切り替え */
@media (max-width: 800px) {
  .eng-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*英語ページ-----end*/



/* スマホ用固定メニューの色------*/
.mobile-menu-buttons {
  background: #1D2E58;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2); /* 影（任意） */
}
/* 各ボタンの文字色 */
.navi-menu-button,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button {
color: #ffffff!important; /* 白文字 */	
}
.mobile-menu-buttons .menu-icon,
.menu-caption{color: #ffffff!important;}


/*サイドバー----*/
/* サイドバー画像ボタンに動き*/
#sidebar .widget_media_image img:hover {
   transform: translateY(-3px); /* 上に3px移動 */
}


/*英語ページ----------*/
/*キャプションの改行調整*/
.page-id-7407 .wp-element-caption
{hyphens: auto;
word-break: keep-all;
}


/*フッター-------------*/
.image-buttons {
display: flex;
gap: 10px; /* ボタン間の余白 */
justify-content: left;
align-items: left;
margin-left:10px!important;
}
.image-buttons img {
max-height: 28px; /* 必要に応じてサイズ調整 */
height: auto;
}



/*工程-----start*/
.yojigen-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC：3列 */
  gap: 16px;
  margin: 20px 0;
}

.gallery-item {
  text-align:left;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}
.caption {
padding-top:0.5em;
font-size: 0.8em;
color: #333;
line-height:1.6;

}

.yojigen-gallery span{color:#0F214E;
font-weight:bold;background-color:#eee;}

/* スマホ：2列に切り替え */
@media (max-width: 800px) {
  .yojigen-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*工程-----end*/




.widget_media_image {
margin:0 0 8px 0!important;
padding:0!important;
}

/*p 段落の隙間*/
.page p{
	padding-left:0!important;
margin-left:0!important;
margin-bottom:1em;}



/*ギャラリー幅(実績ページ)*/
@media (min-width: 1099px) {
.wp-block-gallery
{
	margin:0 auto;width:90%;}
	
}



/*トップページメイン画像の位置調整*/
/*メイン画像が下すぎるのを調整*/
@media (min-width: 1099px) {
body.home {
  margin-top: 120px !important;
}
}
/*トップページ-コンタクトボタン３つ*/
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;           /* ボタン間の余白 */
  flex-wrap: wrap;     /* 画面が狭い時は折り返す */
  margin: 0px;
}

.cta-btn img {
  display: block;
  max-width: 100%;     /* 画像がはみ出さないように */
  height: auto;
  transition: transform 0.2s ease;
}
.cta-wall{
  margin: 0 auto !important;
  padding: 8px;
  background: #e6e5e2;
}
@media (max-width: 768px) {
  .cta-btn img {
 height: 50px;
  }
}



/*トップページ-サークルアイコン１段目*/
.circle-icon-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px 0;
}

.circle-icon-row img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #ffffff; /* 必要に応じて背景色調整 */
}
@media (max-width: 768px) {
  .circle-icon-row img {
 height: 150px; width: 150px;
		gap: 4px;
  }
}



/*目次*/
.toc{background-color:#F8B600;  border-radius: 12px;}


/* 投稿本文の最初の画像に角丸を適用 */
.single .entry-content img {
  border-radius: 12px;
}


/*メイン画像切り替え-------------*/
/* 初期状態：PC用画像を表示、スマホ用は非表示 */
.top-mainimg-sp {
  display: none;
}
.top-mainimg {
  display: block;
}

/* スマホ画面（767px以下）では逆にする */
@media screen and (max-width: 767px) {
  .top-mainimg {
    display: none !important;
  }
  .top-mainimg-sp {
    display: block !important;
  }
}




/* トップページ　a と img をブロック化して余白を完全にゼロへ */
.entry-content figure.wp-block-image.aligncenter.size-full .button-img{ 
  display: block; 
}
.entry-content figure.wp-block-image.aligncenter.size-full img{
  display: block;
  margin: 0 auto;
}



/*トップページ ワードプレス自動で挿入されるスマホボタンの直後のpを消す */

.sp-button-grid + p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* スマホ画面では、pcのグローバルメニュー分（固定）の隙間を埋める */
@media (max-width:1000px){
  .header-wrap{
    position: sticky;
    top: 0;              /* 管理バーとうまく共存 */
    left: auto;
    transform: none;
  }
  body{ margin-top: 0; } /* fixedをやめるので相殺用マージンも不要 */
}




/*フッター直前のメニュー*/

.sitemap-banner {
background-color: #EEEEEE;
position: relative;
left: 0;
right: 0;
padding: 2px 20px 0 0;
text-align: right;
margin: 0 auto;
box-sizing: border-box;
font-size:0.9em;
}



.sitemap-link {
  color: #000;
  text-decoration: none;
  font-size: 0.8em;
}

.sitemap-link:hover {
  text-decoration: underline;
}


/*リンクの色*/
a{color:#111111;}

a:hover {
  color: #148ecc!important; /* ロールオーバー時の色 */
}

/*サイトマップ-リスト*/
.page-id-7611 ul{margin-left:5%;}
li.li-sub{padding-left:20px;list-style: circle inside;}

/*YOUTUBE 全画面ページでの配置*/
.wp-block-embed__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px!important;
	margin:0px!important;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 760px; /* お好みで調整可能 */
	padding: 0px!important;
	margin:0px!important;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/*ボタン*/
.wp-block-buttons{margin:0 0 25px 0 !important;}




/*h1-------------------*/
h1.entry-title,
h1.archive-title{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem!important;
  font-weight: 500;
  text-align: left!important;
  letter-spacing: 0.3em;
  margin-bottom: 1.1em;
  position: relative;
	background-color:#0F214E;
	margin-top:25px!important;
  border-radius: 12px; /* ← ここが角丸の指定 */
padding-top: 0.1em!important;
	padding-left: 0.9em!important;
padding-bottom: 0.2em!important;
line-height: 1.6!important;
color:white;
	background-image: url("https://yojigenkun.com/new-official/wp-content/uploads/h2bg.jpg"); /* 画像のパスを指定 */
}

@media screen and (max-width: 768px) {
h1.entry-title,
h1.archive-title{
  font-size: 1.4rem!important;
	  font-weight: 300!important;
	 letter-spacing: 0.1em!important;
  }
 }

/*ブログ（サイドバーあり）のh1は文字小さめ*/
.single-post h1{
margin-top:35px!important;
font-size: 1.5rem!important;
letter-spacing: 0.2em;}

/*h2-------------------*/
.page h2{letter-spacing: 0.2em;
	font-size: 1.6rem!important;
  position: relative;
  padding: 12px 9px 12px 15px;
  background-color:#eeeeee!important;
	border-radius: 12px!important; /* ← ここが角丸の指定 */
	margin-top:45px!important;

}

.page h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #555;  
	border-radius: 12px!important; /* ← ここが角丸の指定 */	
}
@media screen and (max-width: 768px) {
.page h2{
font-size: 1.2rem!important;
font-weight: 300!important;
letter-spacing: 0.1em!important;
 }
 }


/*h3-------------------*/
.page h3 {letter-spacing: 0.2em;
	font-size: 1.5rem!important;
  position: relative;
  padding: 12px 9px 12px 4px;
	margin-top:50px!important; 
	margin-bottom:20px!important; 
	background-color:#eeeeee;
	border-radius: 12px!important; 
	margin-left:5px;
}

.page h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 768px) {
.page h3{
font-size: 1.2rem!important;
font-weight: 300!important;
letter-spacing: 0.1em!important;
margin-left:2px;
 }
 }


/*p-------------------*/
.page p{margin-left:20px;}
@media screen and (max-width: 768px) {
.page p{
margin-left:5px;
 }
 }
	
	
	
/*画像イメージロールオーバー*/
.button-img {
  display: inline-block;
  transition: transform 0.3s ease; 
}

.button-img:hover {
  transform: translateY(-3px); /* 上に3px移動 */
}

/*カテゴリーページサムネイル*/
h2.card-title{
margin-top:5px!important;
}


/*サイドバーカテゴリ*/
h3.widget-sidebar-title{
  padding: 5px 0 2px 9px;
  background-color: #0F214E !important;
  border-radius: 12px;
  color: white;
}
/*■■■■■■オフィシャルサイト　トップページ start■■■■■■*/
/*トップページメインイメージ-start--------*/
.top-mainimg {
  display: flex;
  justify-content: center;
  align-items: center;margin-top:0!important;
  padding: 3px 0!important;
}
.top-mainimg img {
  max-width: 1238px;     /* PCでの最大サイズ */
  width: 100vw;           /* 画面幅の90%まで広がる */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホ表示時は画面いっぱいに */
@media screen and (max-width: 768px) {
  .top-mainimg img {
    width: 100vw;
    max-width: 100%;
  }
}
/*トップページメインイメージ-end--------*/
/*トップページ　h1タイトル非表示--------*/
.home.page .entry-title {
  display: none;
}
/*トップページ上の隙間--------*/
.top-mainimg{margin:0!important;
	padding:0!important;}
.content{margin:0!important;padding:0!important;}

/* トップサムネイル 波 */
.wave-border { margin: 0;
  display: block;
  margin-top: -1px !important;
  padding-top: 0 !important;
  line-height: 0;
}

.wave-border img {  width: 100%;
  height: auto;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* カテゴリー説明文 */
.entry-content p:first-of-type {
  max-width: 1080px;
  margin: 0 auto;
}

/* ====== TOP　立体造形をつかって ====== */
.yoji-hero {
  --max-w: 1050px;          /* セクションの最大幅 */
	  padding: 20px 30px;
	margin-bottom:0!important;
  background: #e6e5e2;     
}

.yoji-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* 左やや大きめ */
  gap: var(--gap);
  align-items: center;
}

/* 左ビジュアル */
.yoji-hero__visual {
  margin: 0;
}
.yoji-hero__visual img {
  display: block;
 width: 90%;
  height: auto;
  /* 画像に余白がある場合の見栄え調整 */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.08));
}

.yoji-hero__visual {
  display: flex;
  justify-content: center; /* 水平方向中央寄せ */
  align-items: start;      /* 垂直方向上寄せ */
  flex-direction: column;  /* 子要素を縦に並べる（必要に応じて） */
  margin: 0;
}


/* 右コンテンツ */
.yoji-hero__content {
  display: grid;
  grid-template-rows: auto 1fr auto; /* タイトル / テキスト / CTA */
  gap: clamp(10px, 2vw, 18px);
  min-height: 100%;
}
.yoji-hero__title {
  max-width: min(100%, 680px);
  height: auto;
  display: block;
}

/* 本文 */
.yoji-hero__text {
  /*font-size: clamp(15px, 1.05vw + 12px, 16.5px);*/
  line-height: 1.9;
  color: #2b2b2b;
}
.yoji-hero__text p { margin: 0 0 0.9em; }

/* 右下のバナー（リンク） */
.yoji-hero__cta {
  justify-self: end;   /* 右下寄せ */
  align-self: end;
  display: inline-block;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.yoji-hero__cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
.yoji-hero__cta img { display: block; height: auto; width: min(100%, 420px); }

.yoji-hero__visual img,
.yoji-hero__title,
.yoji-hero__cta img {
  display: block;   /* インライン要素扱いによる下の隙間を消す */
  max-width: 100%;  /* レスポンシブ対応 */
  height: auto;
}


/* ====== レスポンシブ：スマホで縦積み ====== */
@media (max-width: 820px) {
  .yoji-hero__inner {
    grid-template-columns: 1fr;
  }
  .yoji-hero__visual {
    order: 1;
  }
  .yoji-hero__content {
    order: 2;
  }
  .yoji-hero__visual img {
    margin-inline: auto; /* 画像自体の中央寄せ */
		margin-bottom:10px;
  }
	
}
/* ====== TOP　立体造形をつかって END====== */


/*アニメーション　バウンス*/
.drop-bounce {
  opacity: 0;
  animation: dropBounce 1s ease-out forwards;
  transform-origin: top center;
}

@keyframes dropBounce {
  0%   { transform: translateY(-200px); opacity: 0; }
  60%  { transform: translateY(0); opacity: 1; }
  75%  { transform: translateY(-12px); }
  85%  { transform: translateY(0); }
  92%  { transform: translateY(-4px); }
  100% { transform: translateY(0); opacity: 1; }
}



/*アニメーション　フェードイン　上から*/
.gentle-fall {
  opacity: 0;
  transform: translateY(-16px);
  animation: gentleFall 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
  animation-fill-mode: forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 1.3s; }
.delay-4 { animation-delay: 1.6s; }

@keyframes gentleFall {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/*■■■■■■オフィシャルサイト　トップページ  end■■■■■■*/


/*20251106---------------------*/
/*サイドバーメニュー*/
/*ブログのアーカイブタイトル位置調整*/
.widget-sidebar-title{margin:0 0 5px 0 !important;padding:2px 0 0 12px!important;font-size:1.0em;}
.sidebar aside{margin-bottom:5px!important;}

.sidebar a img:hover {
    transform: scale(1.02); /* 1.02倍 */
}


/* ページ送りナビの左右を反転 start---------*/
.pager-post-navi{
    display: flex!important;
    flex-direction: row-reverse!important;
}
.fa-chevron-left,.fa-chevron-right{visibility: hidden;}



/* 右側のボタン右端に移動 */
.pager-post-navi .prev-post .prev-post-thumb {order: 1; }
/* 右のボタン（古い記事）のテキストを右寄せにする */
.pager-post-navi .prev-post-title {
    text-align: right !important; /* テキストを右寄せに強制 */
    width: 100%; /* タイトル要素の幅を親要素いっぱいにする */
}

.pager-post-navi .next-post .next-post-thumb {order: 1; /* flexアイテムの順番を一番最初（左端）にする */
}

/* 左側のボタン（新しい記事、元の .next-post）の配置を左寄せにする */
.pager-post-navi .next-post {
    text-align: left !important; /* テキストを左寄せに */
    justify-content: flex-start !important; /* コンテンツを左端に詰める */
}


/* 左のボタン（新しい記事）内のタイトル要素を左寄せにする */
.pager-post-navi .next-post-title {
    text-align: left !important; /* テキストを左寄せに */
    width: 100%; /* タイトル要素の幅を親要素いっぱいにする（重要） */
}

/* 左のボタン（新しい記事、元の .next-post）のコンテンツ配置を調整 */
.pager-post-navi .next-post {
    /* これまでの設定に含まれる可能性があるため、再度確認 */
    justify-content: flex-start !important;
}
/* ページ送りナビの左右を反転 end---------*/







/*リクルートページ*/
.wp-block-cocoon-blocks-sticky-box{
	margin:20px auto;
	width:90%!important;
}
.page .rec_p{
width:85%!important;
	margin:4px auto!important; 
}
/*フッターのメニュー*/
.sitemap-banner-in{font-size:0.8em;}
/*流れstart-----------------------*/
.na-card-container {
  display: flex; width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1050px; /* 4枚並べられる最大幅に制限 */
  margin: 0 auto;
	margin-bottom:40px;
	  gap: 22px;
}


.na-card {
  width: 110px;
  overflow: hidden;
}

.na-card img {
  width: 90%;
  height: auto;
  display: block;
}

.na-card p {
padding:13px 25px 0 15px;
font-size: 0.9em;
margin: 14px;
line-height: 1.5;
}


/* 4列（デスクトップ） */
.na-card {
  width: calc(20% - 18px);
}


/*スマートフォンレイアウト*/
.step-box {
  border-radius: 12px;
  margin: 16px auto;
  max-width: 100%;
  box-sizing: border-box;
	background-color:#fefef;
  padding: 10px 10px 0px 10px;
	font-size:0.9em;
	  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);border: 1px solid #eee;
}

.step-title {
background-color:#0F214E;
border-radius: 8px;
padding:5px 5px 5px 4px;
}

.step-title img {
  display: block;
  max-width: 100%;
  height: auto;
 
}
.step-box p {
	font-size:;0.8em;
  padding:5px 0 0 10px;
	line-height: 1.6;
  color: #000000;
}


/*事業内容-流れ-PCとスマホ切り替え----------*/

/* PC表示用（1100px以上） */
@media screen and (min-width: 1100px) {
  .na-card-container {
    display: flex; /* ← 元のレイアウトを維持 */
    gap: 20px;     /* 任意：カード間の余白 */
  }

  .step-box-all {
    display: none;
  }
}
/* 事業内容スマホ表示用（1099px以下） */
@media screen and (max-width: 1099px) {
.na-card-container {
    display: none;
  }
.step-box-all {
    display: block;
  }
/*サイドバーを中央に*/
.sidebar {text-align: center;
}
}





/*実績の納品先・制作物の表---------*/
.tbl-common01 {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 16px;
  max-width: 800px;
  margin: 1em auto;
  font-family: sans-serif;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
	background-color:#ffffff;
}

.tbl-common01 dt {
  font-weight: nomal;
  color: #333;padding-left:5px;
  text-align: center;border-radius: 5px;
	background-color:#eeeeee;}

.tbl-common01 dd {
  margin: 0;
  color: #555;
}


/*メールフォーム 必須*/
.hissu{ font-weight:bold;
color:#ff0000;}

/*グラフで見る--------*/
.page-id-4247 .wp-block-columns{
width:94%;
margin:0 auto;
}



/* スマホ対応：画面幅が480px以下のときは縦並びに */
@media screen and (max-width: 480px) {
  .tbl-common01 {
    grid-template-columns: 1fr;
  }

  .tbl-common01 dt {
    margin-top: 1em;
  }

  .tbl-common01 dd {
    margin-bottom: 0.5em;
  }
}


/*事業内容start--------------*/

.ji-card-container {
  display: flex; width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
	  max-width: 1050px; /* 4枚並べられる最大幅に制限 */
  margin: 0 auto;
	  gap: 22px;
}


.ji-card {
  width: 210px;
  overflow: hidden;
}

.ji-card img {
  width: 90%;
  height: auto;
  display: block;
}

.ji-card p {padding:19px 10px 0 10px;
  font-size: 0.9em;
  margin: 14px;
   line-height: 1.5;
	
}



/* 4列（デスクトップ） */
.ji-card {
  width: calc(25% - 18px);
}

/* 3列（中型画面） */
@media (max-width: 1024px) {
  .ji-card {
    width: calc(33.333% - 16px);
  }
}

/* 2列（タブレット・小型画面） */
@media (max-width: 1024px) {
  .ji-card {
    width: calc(50% - 12px);
  }
}


.ji-card p img {
	float: left;
  width: 60px; /* アイコンのサイズ調整 */
  height: auto;
  margin-right: 12px; 
  margin-bottom: 4px;
}

.ji-card p {
  margin: 0;
  padding: 12px 10px 0 10px;
  font-size: 0.95em;
  line-height: 1.5;
  color: #555;
}




/*私たちの強み------------*/
.ji-feature-grid {
 width:950px;  width: 100%;
	display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
 padding: 0;
	margin:0 auto;
 }

.ji-feature-card {
  width: calc(33.333% - 16px); /* PC表示：3列 */
  padding: 20px;
  text-align: center;
}

.ji-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.ji-feature-icon {
  margin-bottom: 0; 
  line-height: 0;
}

.ji-feature-icon img {
  width: 200px;
}

.ji-feature-text  {
  margin: 10px 0 0 0;
  padding: 10px;
  line-height: 1.5;
  color: #555;
	font-size: 0.9em;text-align: left; 

}
@media (max-width: 1024px) {
  .ji-feature-card {
    width: calc(50% - 12px); /* 2列表示に切り替え */
  }
}



/*事業内容end--------------*/


h1 {
	font-family: 'Arial Black', sans-serif;font-weight:bold!important;}

/*画像の下の謎の隙間削除*/
.se-image-grid {
  margin-bottom: 0 !important;
  padding-bottom: 0;
}

/*h3 問い合わせボタン用*/
.h3-inf{padding:6px 0 0 0;
	background-color:#0F214E!important;
	text-align:center!important;
color:white;letter-spacing:0.3em;border-radius: 7px; /* ←ここが角丸 */

	}
.ji-icon {
  float: left;
  width: 10px; /* アイコンのサイズ調整 */
  height: auto;
  margin-right: 12px; /* テキストとの余白 */
  margin-bottom: 4px; /* 下の行との余白 */
}

/*利用シーンメインページ start------------------*/
/*追加画像ギャラリー*/
.page-id-7392 .wp-block-gallery,
.page-id-7398 .wp-block-gallery,
.page-id-7401 .wp-block-gallery,
.page-id-7403 .wp-block-gallery
{width:80%!important;
margin:0 auto;margin-bottom:20px;}

.se-image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
	margin-bottom:40px;
}

.se-image-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* スマホ対応：2列に切り替え */
@media screen and (max-width: 768px) {
  .se-image-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
  }
	}

/*利用シーンメインページ end------------------*/







/* 利用シーンレイアウト start--------- */

.ad-layout {
  width: 100%;
  max-width: 1050px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  margin: 0 auto;
}

.left-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 350px;
}

.headline-image img {
width: 100%;
max-width: 600px;
height: auto;
margin-bottom:10px;
}

.description p {
  font-size: 1em;
  line-height: 1.6;
}


/* リスト部分 */
.highlight-list {
  width: 100%;
  max-width: 950px;
  margin: 20px auto;
  list-style: none;
  padding: 0 16px;
  font-size: 1.0em;
  line-height: 1.6;
	padding-bottom:20px;
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* チェックマーク画像 */
.check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* マーカーのベース */
.marker {
  display: inline-block;
  font-weight: bold;
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0 2px;
  word-break: keep-all;
}
.check-icon {
margin-top: 6px;
}
/* 色別マーカー */

.marker-y {
  background: linear-gradient(transparent 60%, #fff176 60%); /* 黄色 */
}

.marker-b {
  background: linear-gradient(transparent 60%, #D3C7FC 60%); /* ペッツ紫 */
}

.marker-g {
  background: linear-gradient(transparent 60%, #9CE6FF 60%); /* キャラ水色 */
}

.marker-p {
  background: linear-gradient(transparent 60%, #FFCB87 60%); /* 鬼オレンジ */
}

/* レスポンシブ対応 */
/* 初期状態：PC用を表示、スマホ用を非表示 */
.sp-ad-layout {
  display: none;
}
/*スマホ--------------------*/
@media screen and (max-width: 700px) {
  .ad-layout {
    display: none;
  }
  .sp-ad-layout {
    display: block;
  }
/*追加画像ギャラリー*/
.page-id-7392 .wp-block-gallery,
.page-id-7398 .wp-block-gallery,
.page-id-7401 .wp-block-gallery,
.page-id-7403 .wp-block-gallery
{width:99%!important;
margin:0 auto;}	

	
}

.sp-left-image {margin:0 auto!important;text-align:center;}
.sp-left-image img{ width:85%;margin:20px auto;}
.sp-headline-image{text-align:center!important;margin-bottom:15px;}






/* 利用シーンレイアウト end--------- */

/* スマホ-コピーライト直前の余白を消す */
@media screen and (max-width: 1099px) {
  .footer-bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* 検索ボタンフッター内の検索フォーム全体の幅を制限 */
.widget_search .search-box {
  max-width: 360px;       /* 最大幅を指定（お好みで調整） */
  width: 70%;
  margin: 0 auto;         /* 中央寄せ */
  display: flex;
  align-items: center;
	padding:7px!important;
}

/* 検索ボタン入力欄のスタイル */
.footer-left .search-edit {
  width: calc(100% - 40px); /* ボタン分の幅を除く */
  padding: 8px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

/* 検索ボタンのスタイル */
.footer-left .search-submit {
  width: 40px;
  height: 68%;
  background-color: #666;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 検索ボタンスマホ非表示 */
@media screen and (max-width: 1099px) {
  .footer-left .widget_search .search-box {
display:none;
  }
}




/*トップページ最新記事*/
@media (min-width: 1100px) {
.home .wp-block-latest-posts__list{width:880px; 
	margin:8px auto;}
.wp-block-latest-posts__list li {
  display: flex;
  align-items: center;
  gap: 0.5em; }
.wp-block-latest-posts__post-title,
.wp-block-latest-posts__post-date {
  display: inline;
  margin: 0;
}
}
.wp-block-latest-posts__post-date {
  font-size: 0.85em;
  color: #666;
}

@media (max-width: 1099px) {
	.home .wp-block-latest-posts__list{width:95%; 
	margin:0px auto;padding:0;}
}
.home .wp-block-image{padding:0;margin-bottom:0;}



/*英語ページ-----start*/
.eng-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap: 16px;
  margin: 20px 0;
}

.eng-item {
  text-align:left;
}

.eng-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.eng-item img:hover {
  transform: scale(1.05);
}
.eng-caption {
padding-top:0.5em;
font-size: 0.8em;
color: #333;
line-height:1.6;

}

.eng-gallery span{color:#0F214E;
font-weight:bold;background-color:#eee;}

/* スマホ：2列に切り替え */
@media (max-width: 800px) {
  .eng-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*英語ページ-----end*/



/* スマホ用固定メニューの色------*/
.mobile-menu-buttons {
  background: #1D2E58;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2); /* 影（任意） */
}
/* 各ボタンの文字色 */
.navi-menu-button,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button {
color: #ffffff!important; /* 白文字 */	
}
.mobile-menu-buttons .menu-icon,
.menu-caption{color: #ffffff!important;}


/*サイドバー----*/
/* サイドバー画像ボタンに動き*/
#sidebar .widget_media_image img:hover {
   transform: translateY(-3px); /* 上に3px移動 */
}


/*英語ページ----------*/
/*キャプションの改行調整*/
.page-id-7407 .wp-element-caption
{hyphens: auto;
word-break: keep-all;
}


/*フッター-------------*/
.image-buttons {
display: flex;
gap: 10px; /* ボタン間の余白 */
justify-content: left;
align-items: left;
margin-left:10px!important;
}
.image-buttons img {
max-height: 28px; /* 必要に応じてサイズ調整 */
height: auto;
}



/*工程-----start*/
.yojigen-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC：3列 */
  gap: 16px;
  margin: 20px 0;
}

.gallery-item {
  text-align:left;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}
.caption {
padding-top:0.5em;
font-size: 0.8em;
color: #333;
line-height:1.6;

}

.yojigen-gallery span{color:#0F214E;
font-weight:bold;background-color:#eee;}

/* スマホ：2列に切り替え */
@media (max-width: 800px) {
  .yojigen-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*工程-----end*/




.widget_media_image {
margin:0 0 8px 0!important;
padding:0!important;
}

/*p 段落の隙間*/
.page p{
	padding-left:0!important;
margin-left:0!important;
margin-bottom:1em;}



/*ギャラリー幅(実績ページ)*/
@media (min-width: 1099px) {
.wp-block-gallery
{
	margin:0 auto;width:90%;}
	
}



/*トップページメイン画像の位置調整*/
/*メイン画像が下すぎるのを調整*/
@media (min-width: 1099px) {
body.home {
  margin-top: 120px !important;
}
}
/*トップページ-コンタクトボタン３つ*/
.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;           /* ボタン間の余白 */
  flex-wrap: wrap;     /* 画面が狭い時は折り返す */
  margin: 0px;
}

.cta-btn img {
  display: block;
  max-width: 100%;     /* 画像がはみ出さないように */
  height: auto;
  transition: transform 0.2s ease;
}
.cta-wall{
  margin: 0 auto !important;
  padding: 8px;
  background: #e6e5e2;
}
@media (max-width: 768px) {
  .cta-btn img {
 height: 50px;
  }
}



/*トップページ-サークルアイコン１段目*/
.circle-icon-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px 0;
}

.circle-icon-row img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #ffffff; /* 必要に応じて背景色調整 */
}
@media (max-width: 768px) {
  .circle-icon-row img {
 height: 150px; width: 150px;
		gap: 4px;
  }
}



/*目次*/
.toc{background-color:#F8B600;  border-radius: 12px;}


/* 投稿本文の最初の画像に角丸を適用 */
.single .entry-content img {
  border-radius: 12px;
}


/*メイン画像切り替え-------------*/
/* 初期状態：PC用画像を表示、スマホ用は非表示 */
.top-mainimg-sp {
  display: none;
}
.top-mainimg {
  display: block;
}

/* スマホ画面（767px以下）では逆にする */
@media screen and (max-width: 767px) {
  .top-mainimg {
    display: none !important;
  }
  .top-mainimg-sp {
    display: block !important;
  }
}




/* トップページ　a と img をブロック化して余白を完全にゼロへ */
.entry-content figure.wp-block-image.aligncenter.size-full .button-img{ 
  display: block; 
}
.entry-content figure.wp-block-image.aligncenter.size-full img{
  display: block;
  margin: 0 auto;
}



/*トップページ ワードプレス自動で挿入されるスマホボタンの直後のpを消す */

.sp-button-grid + p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* スマホ画面では、pcのグローバルメニュー分（固定）の隙間を埋める */
@media (max-width:1000px){
  .header-wrap{
    position: sticky;
    top: 0;              /* 管理バーとうまく共存 */
    left: auto;
    transform: none;
  }
  body{ margin-top: 0; } /* fixedをやめるので相殺用マージンも不要 */
}




/*フッター直前のメニュー*/

.sitemap-banner {
background-color: #EEEEEE;
position: relative;
left: 0;
right: 0;
padding: 2px 20px 0 0;
text-align: right;
margin: 0 auto;
box-sizing: border-box;
font-size:0.9em;
}



.sitemap-link {
  color: #000;
  text-decoration: none;
  font-size: 0.8em;
}

.sitemap-link:hover {
  text-decoration: underline;
}


/*リンクの色*/
a{color:#111111;}

a:hover {
  color: #148ecc!important; /* ロールオーバー時の色 */
}

/*サイトマップ-リスト*/
.page-id-7611 ul{margin-left:5%;}
li.li-sub{padding-left:20px;list-style: circle inside;}

/*YOUTUBE 全画面ページでの配置*/
.wp-block-embed__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px!important;
	margin:0px!important;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 760px; /* お好みで調整可能 */
	padding: 0px!important;
	margin:0px!important;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/*ボタン*/
.wp-block-buttons{margin:0 0 25px 0 !important;}




/*h1-------------------*/
h1.entry-title,
h1.archive-title{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem!important;
  font-weight: 500;
  text-align: left!important;
  letter-spacing: 0.3em;
  margin-bottom: 1.1em;
  position: relative;
	background-color:#0F214E;
	margin-top:25px!important;
  border-radius: 12px; /* ← ここが角丸の指定 */
padding-top: 0.1em!important;
	padding-left: 0.9em!important;
padding-bottom: 0.2em!important;
line-height: 1.6!important;
color:white;
	background-image: url("https://yojigenkun.com/new-official/wp-content/uploads/h2bg.jpg"); /* 画像のパスを指定 */
}

@media screen and (max-width: 768px) {
h1.entry-title,
h1.archive-title{
  font-size: 1.4rem!important;
	  font-weight: 300!important;
	 letter-spacing: 0.1em!important;
  }
 }

/*ブログ（サイドバーあり）のh1は文字小さめ*/
.single-post h1{
margin-top:35px!important;
font-size: 1.5rem!important;
letter-spacing: 0.2em;}

/*h2-------------------*/
.page h2{letter-spacing: 0.2em;
	font-size: 1.6rem!important;
  position: relative;
  padding: 12px 9px 12px 15px;
  background-color:#eeeeee!important;
	border-radius: 12px!important; /* ← ここが角丸の指定 */
	margin-top:45px!important;

}

.page h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #555;  
	border-radius: 12px!important; /* ← ここが角丸の指定 */	
}
@media screen and (max-width: 768px) {
.page h2{
font-size: 1.2rem!important;
font-weight: 300!important;
letter-spacing: 0.1em!important;
 }
 }


/*h3-------------------*/
.page h3 {letter-spacing: 0.2em;
	font-size: 1.5rem!important;
  position: relative;
  padding: 12px 9px 12px 4px;
	margin-top:50px!important; 
	margin-bottom:20px!important; 
	background-color:#eeeeee;
	border-radius: 12px!important; 
	margin-left:5px;
}

.page h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 768px) {
.page h3{
font-size: 1.2rem!important;
font-weight: 300!important;
letter-spacing: 0.1em!important;
margin-left:2px;
 }
 }


/*p-------------------*/
.page p{margin-left:20px;}
@media screen and (max-width: 768px) {
.page p{
margin-left:5px;
 }
 }
	
	
	
/*画像イメージロールオーバー*/
.button-img {
  display: inline-block;
  transition: transform 0.3s ease; 
}

.button-img:hover {
  transform: translateY(-3px); /* 上に3px移動 */
}

/*カテゴリーページサムネイル*/
h2.card-title{
margin-top:5px!important;
}

/*カテゴリーページパンくず*/
.breadcrumb{
  display: none;
}
/*サイドバーカテゴリ*/
h3.widget-sidebar-title{
  padding: 5px 0 2px 9px;
  background-color: #0F214E !important;
  border-radius: 12px;
  color: white;
}
/*■■■■■■オフィシャルサイト　トップページ start■■■■■■*/
/*トップページメインイメージ-start--------*/
.top-mainimg {
  display: flex;
  justify-content: center;
  align-items: center;margin-top:0!important;
  padding: 3px 0!important;
}
.top-mainimg img {
  max-width: 1238px;     /* PCでの最大サイズ */
  width: 100vw;           /* 画面幅の90%まで広がる */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホ表示時は画面いっぱいに */
@media screen and (max-width: 768px) {
  .top-mainimg img {
    width: 100vw;
    max-width: 100%;
  }
}
/*トップページメインイメージ-end--------*/
/*トップページ　h1タイトル非表示--------*/
.home.page .entry-title {
  display: none;
}
/*トップページ上の隙間--------*/
.top-mainimg{margin:0!important;
	padding:0!important;}
.content{margin:0!important;padding:0!important;}

/* トップサムネイル 波 */
.wave-border { margin: 0;
  display: block;
  margin-top: -1px !important;
  padding-top: 0 !important;
  line-height: 0;
}

.wave-border img {  width: 100%;
  height: auto;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* カテゴリー説明文 */
.entry-content p:first-of-type {
  max-width: 1080px;
  margin: 0 auto;
}

/* ====== TOP　立体造形をつかって ====== */
.yoji-hero {
  --max-w: 1050px;          /* セクションの最大幅 */
	  padding: 20px 30px;
	margin-bottom:0!important;
  background: #e6e5e2;     
}

.yoji-hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* 左やや大きめ */
  gap: var(--gap);
  align-items: center;
}

/* 左ビジュアル */
.yoji-hero__visual {
  margin: 0;
}
.yoji-hero__visual img {
  display: block;
 width: 90%;
  height: auto;
  /* 画像に余白がある場合の見栄え調整 */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.08));
}

.yoji-hero__visual {
  display: flex;
  justify-content: center; /* 水平方向中央寄せ */
  align-items: start;      /* 垂直方向上寄せ */
  flex-direction: column;  /* 子要素を縦に並べる（必要に応じて） */
  margin: 0;
}


/* 右コンテンツ */
.yoji-hero__content {
  display: grid;
  grid-template-rows: auto 1fr auto; /* タイトル / テキスト / CTA */
  gap: clamp(10px, 2vw, 18px);
  min-height: 100%;
}
.yoji-hero__title {
  max-width: min(100%, 680px);
  height: auto;
  display: block;
}

/* 本文 */
.yoji-hero__text {
  /*font-size: clamp(15px, 1.05vw + 12px, 16.5px);*/
  line-height: 1.9;
  color: #2b2b2b;
}
.yoji-hero__text p { margin: 0 0 0.9em; }

/* 右下のバナー（リンク） */
.yoji-hero__cta {
  justify-self: end;   /* 右下寄せ */
  align-self: end;
  display: inline-block;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.yoji-hero__cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
.yoji-hero__cta img { display: block; height: auto; width: min(100%, 420px); }

.yoji-hero__visual img,
.yoji-hero__title,
.yoji-hero__cta img {
  display: block;   /* インライン要素扱いによる下の隙間を消す */
  max-width: 100%;  /* レスポンシブ対応 */
  height: auto;
}


/* ====== レスポンシブ：スマホで縦積み ====== */
@media (max-width: 820px) {
  .yoji-hero__inner {
    grid-template-columns: 1fr;
  }
  .yoji-hero__visual {
    order: 1;
  }
  .yoji-hero__content {
    order: 2;
  }
  .yoji-hero__visual img {
    margin-inline: auto; /* 画像自体の中央寄せ */
		margin-bottom:10px;
  }
	
}
/* ====== TOP　立体造形をつかって END====== */


/*アニメーション　バウンス*/
.drop-bounce {
  opacity: 0;
  animation: dropBounce 1s ease-out forwards;
  transform-origin: top center;
}

@keyframes dropBounce {
  0%   { transform: translateY(-200px); opacity: 0; }
  60%  { transform: translateY(0); opacity: 1; }
  75%  { transform: translateY(-12px); }
  85%  { transform: translateY(0); }
  92%  { transform: translateY(-4px); }
  100% { transform: translateY(0); opacity: 1; }
}



/*アニメーション　フェードイン　上から*/
.gentle-fall {
  opacity: 0;
  transform: translateY(-16px);
  animation: gentleFall 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) forwards;
  animation-fill-mode: forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 1.3s; }
.delay-4 { animation-delay: 1.6s; }

@keyframes gentleFall {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/*■■■■■■オフィシャルサイト　トップページ  end■■■■■■*/