@charset "UTF-8";
/*
Theme Name:   TRILOGY.JP
Theme URI:    
Author:       Shingo Takahashi
Author URI:   https://shingo-takahashi.com
Description:  Corporate site
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  trilogy.jp
*/
/*
---------------------------------------------------------------------------
Trilogy Corporation 共通スタイルシート
---------------------------------------------------------------------------
*/
/*
---------------------------------------------------------------------------
リセットcss / グローバル基本スタイル
---------------------------------------------------------------------------
*/
/* アクセントカラーの定義 */
:root {
  --accent-color: #0068b7; /* 青系の色 */
    /*--accent-color-dark: #0056b3; /* 少し濃い青系 */
}
/* 段落内の<b>タグの文字色を変更 */
/*p b {
  color: var(--accent-color); /* アクセントカラーを適用 */
  /* text-decoration: underline; も追加すると、より強調されることも */
/*}
/* 箇条書き内の<b>タグの文字色を変更 */
ul li b,ol li b {
  color: var(--accent-color); /* アクセントカラー（少し濃いめなど）を適用 */
  /* もしくは p b と同じ色でもOK */
}
/* 基本スタイルの一番上、またはbodyの設定箇所に */
*, *::before, *::after {
  box-sizing: border-box; /* 全ての要素に適用 */
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "Helvetica Neue", "Noto Sans JP", Verdana, sans-serif;
  opacity: 1;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1.5s;
  font-size: 16px;
  -webkit-text-size-adjust: none;
  color: #333; /* 基本の文字色 */
  line-height: 1.6; /* 基本の行間 */
}
h1,h2,h3,h4,h5 {
  font-family: "Noto Sans JP", sans-serif;
}
h2 small, h3 small {
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
a {
  color: #0068b7; /* 基本のリンク色 */
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}
/* リンクの基本スタイル */
.underline-effect {
  position: relative; /* ★重要: 疑似要素の基準位置とするため */
  color: #0068b7; /* 例: ブランドカラー */
  text-decoration: none; /* デフォルトの下線を消す */
  /* その他のリンクスタイル（font-size, font-weight など） */
}
a.underline-effect:hover {
  opacity: 1;
}
/* 疑似要素（初期状態：見えない線） */
.underline-effect::after {
  content: ''; /* 疑似要素には content プロパティが必須 */
  position: absolute;
  width: 0; /* 初期状態では幅が0なので見えない */
  height: 1px; /* 線の太さ */
  bottom: -3px; /* リンクテキストの下から3pxの位置 */
  left: 0; /* 左端から開始 */
  background-color: #0068b7; /* 線の色 */
  transition: width 0.3s ease; /* ★重要: ホバー時の幅の変化を0.3秒かけて滑らかに */
}
/* ホバー時のスタイル（線が伸びる） */
.underline-effect:hover::after {
  width: 100%; /* ホバー時に幅を100%にする */
}
strong {
  font-weight:inherit;
}
/*
---------------------------------------------------------------------------
ユーティリティクラス / ヘルパークラス（調整スタイル）
---------------------------------------------------------------------------
*/
/* margin_top */
.mgt0{margin-top:0 !important; }
.mgt5{margin-top:5px !important; }
.mgt10{margin-top:10px !important; }
.mgt15{margin-top:15px !important; }
.mgt18{margin-top:18px !important; }
.mgt20{margin-top:20px !important; }
.mgt25{margin-top:25px !important; }
.mgt30{margin-top:30px !important; }
.mgt35{margin-top:35px !important; }
.mgt40{margin-top:40px !important; }
.mgt45{margin-top:45px !important; }
.mgt50{margin-top:50px !important; }
.mgt55{margin-top:55px !important; }
.mgt60{margin-top:60px !important; }
.mgt65{margin-top:65px !important; }
.mgt70{margin-top:70px !important; }
.mgt75{margin-top:75px !important; }
.mgt80{margin-top:80px !important; }
.mgt85{margin-top:85px !important; }
.mgt90{margin-top:90px !important; }
.mgt95{margin-top:95px !important; }
.mgt100{margin-top:100px !important; }
.mgt200{margin-top:200px !important; }
/* margin_bottom */
.mgb0{margin-bottom:0 !important; }
.mgb5{margin-bottom:5px !important; }
.mgb10{margin-bottom:10px !important; }
.mgb15{margin-bottom:15px !important; }
.mgb20{margin-bottom:20px !important; }
.mgb25{margin-bottom:25px !important; }
.mgb30{margin-bottom:30px !important; }
.mgb35{margin-bottom:35px !important; }
.mgb40{margin-bottom:40px !important; }
.mgb45{margin-bottom:45px !important; }
.mgb50{margin-bottom:50px !important; }
.mgb55{margin-bottom:55px !important; }
.mgb60{margin-bottom:60px !important; }
.mgb65{margin-bottom:65px !important; }
.mgb70{margin-bottom:70px !important; }
.mgb75{margin-bottom:75px !important; }
.mgb80{margin-bottom:80px !important; }
.mgb85{margin-bottom:85px !important; }
.mgb90{margin-bottom:90px !important; }
.mgb95{margin-bottom:95px !important; }
.mgb100{margin-bottom:100px !important; }
/* margin_left */
.mgl0{margin-left:0 !important; }
.mgl5{margin-left:5px !important; }
.mgl10{margin-left:10px !important; }
.mgl15{margin-left:15px !important; }
.mgl20{margin-left:20px !important; }
.mgl25{margin-left:25px !important; }
.mgl30{margin-left:30px !important; }
.mgl35{margin-left:35px !important; }
.mgl40{margin-left:40px !important; }
.mgl45{margin-left:45px !important; }
.mgl50{margin-left:50px !important; }
/* margin_right */
.mgr0{margin-right:0 !important; }
.mgr5{margin-right:5px !important; }
.mgr10{margin-right:10px !important; }
.mgr15{margin-right:15px !important; }
.mgr20{margin-right:20px !important; }
.mgr25{margin-right:25px !important; }
.mgr30{margin-right:30px !important; }
.mgr35{margin-right:35px !important; }
.mgr40{margin-right:40px !important; }
.mgr45{margin-right:45px !important; }
.mgr50{margin-right:50px !important; }
/* padding_top */
.pdt0{padding-top:0 !important; }
.pdt5{padding-top:5px !important; }
.pdt10{padding-top:10px !important; }
.pdt15{padding-top:15px !important; }
.pdt20{padding-top:20px !important; }
.pdt25{padding-top:25px !important; }
.pdt30{padding-top:30px !important; }
.pdt35{padding-top:35px !important; }
.pdt40{padding-top:40px !important; }
.pdt45{padding-top:45px !important; }
.pdt50{padding-top:50px !important; }
/* padding_bottom */
.pdb0{padding-bottom:0 !important; }
.pdb5{padding-bottom:5px !important; }
.pdb10{padding-bottom:10px !important; }
.pdb15{padding-bottom:15px !important; }
.pdb20{padding-bottom:20px !important; }
.pdb25{padding-bottom:25px !important; }
.pdb30{padding-bottom:30px !important; }
.pdb35{padding-bottom:35px !important; }
.pdb40{padding-bottom:40px !important; }
.pdb45{padding-bottom:45px !important; }
.pdb50{padding-bottom:50px !important; }
/* padding_left */
.pdl0{padding-left:0 !important; }
.pdl5{padding-left:5px !important; }
.pdl10{padding-left:10px !important; }
.pdl15{padding-left:15px !important; }
.pdl20{padding-left:20px !important; }
.pdl25{padding-left:25px !important; }
.pdl30{padding-left:30px !important; }
.pdl35{padding-left:35px !important; }
.pdl40{padding-left:40px !important; }
.pdl45{padding-left:45px !important; }
.pdl50{padding-left:50px !important; }
/* padding_right */
.pdr0{padding-right:0 !important; }
.pdr5{padding-right:5px !important; }
.pdr10{padding-right:10px !important; }
.pdr15{padding-right:15px !important; }
.pdr20{padding-right:20px !important; }
.pdr25{padding-right:25px !important; }
.pdr30{padding-right:30px !important; }
.pdr35{padding-right:35px !important; }
.pdr40{padding-right:40px !important; }
.pdr45{padding-right:45px !important; }
.pdr50{padding-right:50px !important; }
/* color */
.colorSB{color:#0068b7 !important;}
.colorFE{color:#6795B4 !important;}
.colorWH{color:#FFFFFF !important;}
.colorBL{color:#000000 !important;}
.clrDefa{color:#333333 !important;}
/* other */
ul.listN {list-style-type:none !important;}
/*ul.listN li{display:block;}*/
.floL {float:left !important;}
.floR {float:right !important;}
.alnL {text-align:left !important;}
.alnR {text-align:right !important;}
.alnC {text-align:center !important;}
/* Font */
.fontHN {font-family: "Helvetica Neue";}
.fontNoto {font-family: "Noto Sans JP";}

/*
---------------------------------------------------------------------------
サイト全体の共通レイアウト設定
---------------------------------------------------------------------------
*/
.main-contents {
  max-width: 1300px; /* 主要コンテンツの最大幅を1300pxに固定 */
  margin: 50px auto;
}
.service-overview,.consul-overview,.onenet-overview,
.systemDev-overview,.systemST-overview,.web_EC-overview,
.company-overview,.philosophy-overview,.message-overview,
.founder-overview,.recruit-overview,.partner-overview,
.contact-overview,.policy-overview,.terms-overview,
.sitemap-overview,.error-overview,
.news-overview,.category-news-overview,.single-news-overview,
.column-overview,.category-column-overview,.single-column-overview {
  margin: 80px auto 50px; /* 上マージンをパンくずリストの下に合わせる */
  padding: 0;
}
.single-column-overview,.philosophy-overview,.message-overview {
  margin-top: 30px;
}
/*.error-overview {
  margin: 40px auto;
}*/
.service-head,.consul-head,.onenet-head,
.systemDev-head,.systemST-head,.web_EC-head,
.company-head,.philosophy-head,.message-head,
.founder-head,.recruit-head,.partner-head,
.contact-head,.policy-head,.terms-head,
.sitemap-head,
.news-head,.single-news-head,
.column-head,.single-column-head {
  position: relative; /* 子要素（h1と画像）の絶対配置の基準となる */
  height: auto;
  overflow: hidden;
}
.service-head-image,.consul-head-image,.onenet-head-image,
.systemDev-head-image,.systemST-head-image,.web_EC-head-image,
.company-head-image,.philosophy-head-image,.message-head-image,
.founder-head-image,.recruit-head-image,.partner-head-image,
.contact-head-image,.policy-head-image,.terms-head-image,
.sitemap-head-image,
.news-head-image,.single-news-image,
.column-head-image,.single-column-image {
  width: 100%;
  height: 100%; /* 親要素.-headの高さいっぱい */
}
.philosophy-head-image,.message-head-image,.founder-head-image {
  /*border-bottom: solid 1px #888;*/
}
.service-head-image img,.consul-head-image img,.onenet-head-image img,
.systemDev-head-image img,.systemST-head-image img,.web_EC-head-image img,
.company-head-image img,.philosophy-head-image img,.message-head-image img,
.founder-head-image img,.recruit-head-image img,.partner-head-image img,
.contact-head-image img,.policy-head-image img,.terms-head-image img,
.sitemap-head-image img,
.news-head-image img,.single-news-image img,
.column-head-image img,.single-column-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center; /* (consul) */
  height: auto;  /* (consul,recruit:100%) */
}
.service-head > div:last-of-type h1,.consul-head > div:last-of-type h1,.onenet-head > div:last-of-type h1,
.systemDev-head > div:last-of-type h1,.systemST-head > div:last-of-type h1,.web_EC-head > div:last-of-type h1,
.company-head > div:last-of-type h1,.philosophy-head > div:last-of-type h1,.message-head > div:last-of-type h1,
.founder-head > div:last-of-type h1,.recruit-head > div:last-of-type h1,.partner-head > div:last-of-type h1,
.contact-head > div:last-of-type h1,.policy-head > div:last-of-type h1,.terms-head > div:last-of-type h1,
.sitemap-head > div:last-of-type h1,
.news-head > div:last-of-type h1,.single-news-head > div:last-of-type h1,
.column-head > div:last-of-type h1,.single-column-head > div:last-of-type h1 {
  display: flex; /* h1をFlexコンテナにする */
  flex-direction: column; /* ★h1内の要素（「ITコンサルティング」と「キャッチコピー」）を縦に並べる */
  justify-content: center; /* 縦方向の中央揃え */
  align-items: center; /* 横方向の中央揃え */
  color: #fff;
  /*line-height: 1.2; /* 行間を調整 */
  text-align: center; /* h1全体のテキストを中央寄せ */
  position: absolute; /* 親要素 (.consul-head) に対して絶対配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻すことで完全に中央に配置 */
  margin: 0; /* 不要なマージンをリセット */
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* テキストの影 */
  background-color: rgba(128, 128, 128, 0.1); /* 背景の透過グレー */
  padding: 5px 20px;
  border-radius: 5px;
  white-space: normal; /* ★h1内のテキストは改行を許可 */
  box-sizing: border-box; /* paddingを含めて幅を計算 */
  width: auto; /* 親要素に対して幅を設定*/
  max-width: 800px; /* テキストが広がりすぎないように最大幅を設定 */
  font-size: 3.5rem; /* ★ビューポートの幅に応じてフォントサイズを調整（レスポンシブ対応） */
}
.philosophy-head > div:last-of-type h1,.message-head > div:last-of-type h1,.founder-head > div:last-of-type h1 {
  color: #111;
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
}
/* ★★★ h1内のspan（キャッチコピー）のスタイルを修正 ★★★ */
.service-head > div:last-of-type h1 .catch,.consul-head > div:last-of-type h1 .catch,.onenet-head > div:last-of-type h1 .catch,
.systemDev-head > div:last-of-type h1 .catch,.systemST-head > div:last-of-type h1 .catch,.web_EC-head > div:last-of-type h1 .catch,
.company-head > div:last-of-type h1 .catch,.philosophy-head > div:last-of-type h1 .catch,.message-head > div:last-of-type h1 .catch,
.founder-head > div:last-of-type h1 .catch,.recruit-head > div:last-of-type h1 .catch,.partner-head > div:last-of-type h1 .catch,
.contact-head > div:last-of-type h1 .catch,.policy-head > div:last-of-type h1 .catch,.terms-head > div:last-of-type h1 .catch,
.sitemap-head > div:last-of-type h1 .catch,
.news-head > div:last-of-type h1 .catch,.single-news-head > div:last-of-type h1 .catch,
.column-head > div:last-of-type h1 .catch,.single-column-head > div:last-of-type h1 .catch {
  display: block; /* ★spanをブロック要素にして、「ITコンサルティング」の下で改行させる */
  font-size: 1.5rem; /* ★ビューポートの幅に応じてフォントサイズを調整 */
  line-height: 1.4; /* 行間 */
  margin-top: 0.5em; /* メインタイトルとの間に余白 */
  margin-bottom: 0.3em;
  font-weight: normal; /* 太さを調整（必要であれば） */
  white-space: normal; /* 強制的に改行を許可 */
  text-align: center; /* キャッチコピーも中央寄せ */
}
.philosophy-head > div:last-of-type h1 .catch,.message-head > div:last-of-type h1 .catch,.founder-head > div:last-of-type h1 .catch {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.75rem;
  font-weight: bold;
}
.service-overview h2,.consul-overview h2,.onenet-overview h2,
.systemDev-overview h2,.systemST-overview h2,.web_EC-overview h2,
.company-overview h2,.philosophy-overview h2,.founder-overview h2,
.recruit-overview h2,.partner-overview h2,
.contact-overview h2,.policy-overview h2,.terms-overview h2,
.sitemap-overview h2,
.news-overview h2,.category-news-overview h2,.single-news-overview h2,
.column-overview h2,.category-column-overview h2,.single-column-overview h2 {
  font-size: 1.8rem !important;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}
.category-column-overview h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.service-overview h2 small,.consul-overview h2 small,.onenet-overview h2 small,
.systemDev-overview h2 small,.systemST-overview h2 small,.web_EC-overview h2 small,
.company-overview h2 small,.philosophy-overview h2 small,.founder-overview h2 small,
.recruit-overview h2 small,.partner-overview h2 small,
.contact-overview h2 small,.policy-overview h2 small,.terms-overview h2 small,
.sitemap-overview h2 small,
.news-overview h2 small,.category-news-overview h2 small,
.column-overview h2 small,.category-column-overview h2 small,.single-column-overview h2 small {
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}
.category-column-overview h2 small {
  margin-left: auto;
  padding-top: 0;
}
.sp {
  display: none;
}
/*
-----------------------------------------------------------------------------------------
共通のボーダーアニメーションスタイル（全タイプに適用される基本設定）/ top,inquiry,sitemap
-----------------------------------------------------------------------------------------
*/
/* 各辺の線を担当する疑似要素の共通設定 */
/* .feature-box, .sitemap-item, .select-box に共通して適用 */
.feature-box::before,.feature-box::after,
.feature-box .dynamic-lines::before,.feature-box .dynamic-lines::after,
.sitemap-item::before,.sitemap-item::after,
.sitemap-item .dynamic-lines::before,.sitemap-item .dynamic-lines::after,
.select-box::before,.select-box::after,
.select-box .dynamic-lines::before,.select-box .dynamic-lines::after {
  content: ''; /* 疑似要素には必須 */
  position: absolute;
  background: #0068b7; /* ボーダーの色 */
  transition: transform 0.3s ease-out; /* transform の変化にtransitionを設定 */
  z-index: 3; /* 他の要素より手前に表示するため */
  /* pointer-events: none; は hover の z-index との兼ね合いがあるので、個別に設定する方が安全 */
}
/* 上辺 */
.feature-box::before,.sitemap-item::before,.select-box::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(-100%); /* 初期状態は左に隠しておく */
}
/* 下辺 */
.feature-box::after,.sitemap-item::after,.select-box::after { 
  bottom: 0;
  right: 0; /* 右から左へ表示するため */
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(100%); /* 初期状態は右に隠しておく */
}
/* 左右の辺のためのラッパー要素 */
/* .feature-box, .sitemap-item, .select-box の子要素として共通化 */
.feature-box .dynamic-lines,.sitemap-item .dynamic-lines,.select-box .dynamic-lines {
  position: absolute; /* この要素自体も absolute にしておく */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* ★これが非常に重要 */
  /* z-index: 1; は hover の z-index との兼ね合いがあるので、個別に設定する方が安全 */
  /* pointer-events: none; は hover の z-index との兼ね合いがあるので、個別に設定する方が安全 */
}
/* 右辺 */
.feature-box .dynamic-lines::before,.sitemap-item .dynamic-lines::before,.select-box .dynamic-lines::before {
  top: 0;
  right: 0; /* 右端に配置 */
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(-100%); /* 初期状態は上に隠しておく */
}
/* 左辺 */
.feature-box .dynamic-lines::after,.sitemap-item .dynamic-lines::after,.select-box .dynamic-lines::after {
  bottom: 0; /* 下端に配置 */
  left: 0;
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(100%); /* 初期状態は下に隠しておく */
}

/*
---------------------------------------------------------------------------
各要素固有の追加設定
---------------------------------------------------------------------------
*/

/* select-box 固有の z-index と pointer-events */
.select-box::before,
.select-box::after,
.select-box .dynamic-lines, /* .dynamic-lines 本体にも適用 */
.select-box .dynamic-lines::before,
.select-box .dynamic-lines::after {
  z-index: 1; /* z-indexをリンクより低い値に設定 */
  pointer-events: none; /* これが重要！この要素自身がクリックイベントを受け付けないようにする */
}

/*
---------------------------------------------------------------------------
hover時のアニメーション（各タイプごとに記述）
---------------------------------------------------------------------------
*/
/* .feature-box と .sitemap-item の hover アニメーション */
.feature-box:hover::before,.sitemap-item:hover::before {
  transform: translateX(0%);
}
.feature-box:hover::after, .sitemap-item:hover::after {
  transform: translateX(0%);
}
.feature-box:hover .dynamic-lines::before, .sitemap-item:hover .dynamic-lines::before {
  transform: translateY(0%);
}
.feature-box:hover .dynamic-lines::after, .sitemap-item:hover .dynamic-lines::after {
  transform: translateY(0%);
}
/* .select-box の hover アニメーション（親要素のホバーで発動） */
.select-box-link:hover .select-box::before {
  transform: translateX(0%);
}
.select-box-link:hover .select-box::after {
  transform: translateX(0%);
}
.select-box-link:hover .select-box .dynamic-lines::before {
  transform: translateY(0%);
}
.select-box-link:hover .select-box .dynamic-lines::after {
  transform: translateY(0%);
}

/*
---------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------
*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.7));
  background-color: #fff;
  /*-webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .13));
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .13));*/
  color: #0068B7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  z-index: 1000;
  box-sizing: border-box;
}
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
}
.logo img {
  height: 70px;
  vertical-align: middle;
}
.logo a:hover img {
  opacity: 0.7;
}
.company-name {
  padding-top: 26px;
  font-size: 1.2rem;
  font-weight: 700;
}
nav {
  position: relative;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  letter-spacing: 0.1em;
}
nav a {
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
  font-size: 1.03rem;
  color: #777;
  text-decoration: none;
  font-weight: 700;
  position: relative;
}
nav ul li:first-child a, nav ul li:last-child a {
  color: #0068B7;
}
nav ul li:last-child a {
  border: 1px solid #0068B7;
  padding: 10px 30px; /* 6px 12px */
  border-radius: 5px;
  transition: all 0.3s;
  overflow: hidden;
}
nav a:hover {
  opacity: 1;
}
nav ul li:last-child a:hover {
  background-color: #0068B7;
  color: #fff;
}
nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #0068B7;
  transition: width 0.3s ease;
}
nav ul li:not(:last-child) a:hover::after {
  width: 100%;
}
nav ul li:last-child a::after {
  content: none;
}
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 1100;
}
.menu-toggle span {
  height: 3px;
  width: 25px;
  background: #0068b7;
  margin: 4px 0;
}

/*
---------------------------------------------------------------------------
パンくずリスト
---------------------------------------------------------------------------
*/
.breadcrumb-container {
  margin: 100px auto 0;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #0068b7;
  width: 100%;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: baseline; /* center */
}
.breadcrumb li {
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  position: relative;
  /*align-items: baseline;*/
}
.breadcrumb li i {
  margin-right: 5px;
}
.breadcrumb li:first-child a::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  margin-right: 5px;
  color: #fff;
}
.breadcrumb li:not(:last-child)::after {
  content: "＞";
  margin: 0 10px;
  color: #fff;
}
.breadcrumb li a {
  color: #fff;
  text-decoration: none;
  position: relative;
}
.breadcrumb li a:hover {
  opacity: 1;
}
.breadcrumb li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #fff;
  transition: width 0.3s ease-out;
}
.breadcrumb li a:hover::after {
  width: 100%;
}

/*
---------------------------------------------------------------------------
お問い合わせバナー/製品・サービスバナー
---------------------------------------------------------------------------
*/
.contact-banner,.service-banner {
  max-width: 1300px;
  width: 1300px;
  height: auto;
  overflow: hidden;
  margin: 40px auto;
  /* padding: 0 20px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-banner a,.service-banner a {
  display: block;
  max-width: 100%;
}
.contact-banner a:hover,.service-banner a:hover {
  opacity: 1;
}
.contact-banner a:hover img,.service-banner a:hover img {
  transform: scale(1.03); /* ホバー時に画像を1.03倍に拡大 */
  transition: transform 0.3s ease-in-out; /* 拡大アニメーションを0.3秒かけて滑らかに */
}
.contact-banner img,.service-banner img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  /* border-radius: 5px; */
  transition: transform 0.3s ease-in-out; /* 通常時のアニメーション設定（必要に応じて） */
}
.zoom {
  display: block;
  width: 100%;
  height: 100%;
}
.zoom:hover img {
  transform: scale(1.03); /* ホバー時に画像を1.03倍に拡大 */
  transition: transform 0.3s ease-in-out; /* 拡大アニメーションを0.3秒かけて滑らかに */
}
.zoom img {
  width: 100%; /* 画像をコンテナいっぱいに表示 */
  height: 100%;
  object-fit: cover; /* 画像がアスペクト比を保ちつつコンテナを覆うように表示 */
  transition: transform 0.3s ease-in-out; /* 通常時のアニメーション設定 */
}

/*---------------------------
一覧へ戻るボタン
---------------------------*/
.return-list {
  margin-top: 100px;
  margin-bottom: 30px;
}
.return-list .btn-detail {
  display: inline-block;
  padding: 10px 30px;
  background-color: #fff;
  color: #0068b7;
  border: 1px solid #0068b7;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.0rem;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.2;
}
.return-list .btn-detail:hover {
  background-color: #0068b7;
  /* border: 1px solid #0f52ba; */
  color: #fff;
  opacity:1;
}
.return-list .btn-detail::before {
  display: inline-block;
  vertical-align: middle;
  content: "\21BC"; /* 左向き矢印 */
  margin-right:20px;
  font-size: 1.5em;
  font-weight: bold;
}

/*
---------------------------------------------------------------------------
フッター
---------------------------------------------------------------------------
*/
footer {
  padding: 20px 0 0 0;
  text-align: center;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}
.footer-menu {
  margin: 0;
  padding: 20px;
  border-top: solid 1px #ddd;
}
.footer-group h3 {
  color: #0068b7;
  font-weight: bold;
}
.footer-menu ul {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-menu li a {
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
  color: #777;
  text-decoration: none;
  font-weight: normal;
  position: relative;
  display: inline-block;
}
.footer-menu li a:hover {
  opacity: 1;
  color: #0068b7;
}
.footer-menu li a span {
  padding: 3px 0 0 3px;
  color: #0f52ba;
  font-size: 150%;
  font-weight: bold;
  /*vertical-align: bottom;*/
}
.footer-menu li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 3px;
  left: 0;
  background-color: #0068b7;
  transition: width 0.3s ease;
}
.footer-menu li a:hover::after {
  width: 100%;
}
.footer-logo {
  padding: 15px 0;
  font-weight: bold;
  border-top: solid 1px #ddd;
}
.footer-logo a:hover img {
  opacity: 0.7;
}
.copyright {
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
  display: block;
  padding: 20px 0;
  background: #0068b7;
  color: #fff;
}
.copyright a {
  color: #fff;
  text-decoration: none;
}
.copyright a:hover {
  opacity: 0.7;
}

/*
---------------------------------------------------------------------------
ページトップボタン
---------------------------------------------------------------------------
*/
.pagetop-show {
  display: block;
}
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  position: fixed;
  right: 100px;
  bottom: 65px;
  color: #fff;
  font-size: 1.5rem;
  background: #0068b7;
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
}
.pagetop a:hover {
  opacity: 0.3;
}

/*
---------------------------------------------------------------------------
トップページ固有スタイル
---------------------------------------------------------------------------
---------------------------------------------------------------------------
トップページヘッダーイメージ
---------------------------------------------------------------------------
*/
.top-mv {
  position: relative;
  margin-top: 100px;
  height: 500px;
  overflow: hidden;
}
.top-mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mv-text-wrapper {
  position: absolute; /* 親要素に対して絶対配置 */
  top: 50%; /* 縦方向の中央に一旦配置 */
  left: 5vw; /* 左端からの余白はvwで柔軟に */
  transform: translateY(-50%); /* 中央寄せの微調整 */
  display: flex;
  flex-direction: column; /* 縦並び */
  justify-content: center; /* 縦方向の中央寄せ (必要であれば flex-start などに変更) */
  align-items: flex-start; /* 左寄せ */
  max-width: 768px;
  width: 90%; /* 小さい画面での幅 */
  color: #fff;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5);
  z-index: 2; /* 画像より手前に表示されるように */
}
.mv-text-wrapper h1 {
    display: flex;
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    margin: 0; /* 親要素のFlexboxで間隔を制御するため、マージンをリセット */
}
.mv-text-wrapper .dx {
    font-size: clamp(4rem, 8vw, 8rem);
    margin-right: 0.2em;
}
.mv-text-wrapper .digital-transformation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto; /* Flexboxを使うのでheight固定は不要 */
    font-size: clamp(2rem, 4vw, 4rem);
    text-align: left;
}
.mv-text-wrapper p {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.5; /* 段落内の行間 */
    margin: 0; /* Flexboxで間隔を制御するため、マージンをリセット */
    margin-top: 1em;
}
/*.top-mv h1 {
  display: flex;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
  position: absolute;
  top: 15%;
  left: 5%;
  font-size: 4.5rem;
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5);
}
.top-mv .dx {
  font-size: 8rem;
  margin-right: 0.2em;
}
.top-mv .digital-transformation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 8.0rem;
  font-size: 4.0rem;
  text-align: left;
}
.top-mv .digital {
  display: block;
}
.top-mv .transformation {
  display: block;
}
.top-mv p.first-txt {
  color: #fff;
  position: absolute;
  bottom: 35%;
  left: 6%;
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5);
}
.top-mv p.second-txt {
  color: #fff;
  position: absolute;
  bottom: 10%;
  left: 6%;
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5);
}*/

/*
---------------------------------------------------------------------------
トップページキャッチコピー
---------------------------------------------------------------------------
*/
.top-catch {
  text-align: center;
  padding: 0;
  background: none;
  margin: 50px auto;
}
.top-catch h2 {
  font-size: 3.0rem;
  font-weight: bold;
  color: #0068b7;
  margin: 30px auto;
  padding: 0;
  text-align: center; /* 継続。h2内のテキストを中央揃えにするため */
  border: none;
}
.top-catch p {
  line-height: 2.0;
}
.top-catch h3 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}
/*
---------------------------------------------------------------------------
トップページ Height:300px,420px Feature-Box共通
---------------------------------------------------------------------------
*/
.top-service,.top-corp, .top-recruit, .top-partner {
  margin: 0 auto 50px;
}
.top-service .feature-box, .top-corp .feature-box, .top-recruit .feature-box, .top-partner .feature-box {
  position: relative;
  width: 100%;
  height: 300px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.top-corp .feature-box {
  height: 420px;
  margin-bottom: 30px;
}

.top-service .feature-content, .top-corp .feature-content, .top-recruit .feature-content, .top-partner .feature-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
}
.top-service .feature-text-left,.top-corp .feature-text-left,.top-recruit .feature-text-left,.top-partner .feature-text-left {
  width: 100%;
  padding-left: 40px;
}
.top-service .feature-text-left h2,.top-corp .feature-text-left h2,.top-recruit .feature-text-left h2,.top-partner .feature-text-left h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0068b7;
}
.top-service .feature-text-left h2 small,.top-corp .feature-text-left h2 small,.top-recruit .feature-text-left h2 small,.top-partner .feature-text-left h2 small {
  font-weight: normal;
  font-size: 0.6em;
  padding-top: 10px;
  margin-left: 3.5rem;
  color: #333;  
}

.top-corp .feature-text-left h3 {
  font-size: 2.0rem;
  font-weight: bold;
  color: #000;
  margin: 10px 0;
  margin-top: 30px;
}
.top-corp .feature-text-left ul {
  font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  list-style: none;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
.top-service .feature-text-left h3, /*.top-corp .feature-text-left p,*/ .top-recruit .feature-text-left h3, .top-partner .feature-text-left h3 {
  font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 1.0rem;
  font-weight: normal;
  line-height: 1.6;
  margin-top: 30px;
  /*margin-bottom: 25px;*/
}
.top-service .feature-image, .top-corp .feature-image, .top-recruit .feature-image, .top-partner .feature-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0% 100%);
}
.top-corp .feature-image {
  clip-path: polygon(44.8% 0, 100% 0, 100% 100%, 0% 100%);
}
/* PC表示時の画像スタイル */
.top-service .feature-image img, .top-corp .feature-image img.top-corp-image, .top-recruit .feature-image img, .top-partner .feature-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.top-corp .feature-image img.top-corp-image {
  height: 420px;
}
/* 「詳しく見る」ボタンのスタイル */
.top-service .btn-detail, .top-corp .btn-detail, .top-recruit .btn-detail, .top-partner .btn-detail {
  display: inline-block;
  margin-top: 35px;
  padding: 12px 40px;
  border: 1px solid #0068b7;
  background-color: #fff;
  color: #0068b7;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.2;
}
.top-corp .btn-detail {
  margin-top: 55px;
  /*cursor: pointer;*/
}
.btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}
.btn-detail .arrow {
  margin-left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: middle;
}
/*
---------------------------------------------------------------------------
トップページコラム一覧
---------------------------------------------------------------------------
*/
.top-column {
  max-width: 100%;
  margin: 0 auto 50px;
  /*padding: 20px 60px 10px 60px;*/
  /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);*/
}
.top-column h2 {
  color: #0068b7;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}
.top-column h2 small {
  float: right;
  padding-top: 10px;
  color: #333;
  font-weight: normal; /* `normal`がデフォルト値であれば冗長だが、意図的なリセットとして残す */
  font-size: 0.5em;
  margin-right: 0.5rem;
}
/* 上記以外はWordPress部分のスタイルを使用 */
/*
---------------------------------------------------------------------------
トップページニュース一覧
---------------------------------------------------------------------------
*/
.top-news {
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 20px 60px 10px 60px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.top-news h2 {
  color: #0068b7;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}
.top-news h2 small {
  float: right;
  padding-top: 10px;
  color: #333;
  font-weight: normal; /* `normal`がデフォルト値であれば冗長だが、意図的なリセットとして残す */
  font-size: 0.5em;
  margin-right: 0.5rem;
}
.top-news p {
  font-size: 0.95rem;
  line-height: 1.6;
}
.top-news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-news li {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}
.top-news li:last-child {
  border-bottom: none;
}
.top-news .news-date {
  width: auto;
  flex-shrink: 0;
  color: #777;
  margin-right: 20px;
}
.top-news .news-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: normal; /* `normal`がデフォルト値であれば冗長だが、意図的なリセットとして残す */
}
.top-news .news-title a {
  color: #0068b7;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.top-news .news-title a:hover {
  text-decoration: none;
  opacity: 1;
}
.top-news .news-title a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #0068B7;
  transition: width 0.3s ease;
}
.top-news .news-title a:hover::after {
  width: 100%;
}
.top-news .news-category {
  width: auto;
  flex-shrink: 0;
  color: #6795b4;
  border: solid 1px #6795b4;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  margin-right: 20px;
  padding: 5px 30px;
  font-size: 1rem;
  font-weight: normal; /* `normal`がデフォルト値であれば冗長だが、意図的なリセットとして残す */
}
/*
---------------------------------------------------------------------------
サービスページ固有スタイル
---------------------------------------------------------------------------
*/
.service-details {
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0 ;
  box-sizing: border-box;
}
.service-details .feature-box {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 30px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.service-details .feature-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 0 30px 40px;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 2;
  /* clip-path: polygon(70 0, 70% 0, 100% 100%, 0% 100%); /* 反対側にはpolygon指定しない */
  /* display: flex;*/
  align-items: center;
}
.service-details .feature-text-left {
  display: inline-block;
  width: 100%;
  padding-left: 0;
}
.service-details .feature-text-left h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
  color: #0068b7;
}
.service-details .feature-text-left p {
  font-size: 1.0rem;
  line-height: 0.7;
  margin-bottom: 30px;
}
.service-details .feature-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0% 100%); /* 反対側にはpolygon指定しない */
}
.service-details .feature-image img {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 0% 100%);  /* 反対側にはpolygon指定しない */
}
/* PC表示時の画像スタイル */
.service-details .feature-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
/* 「詳しく見る」ボタンのスタイル */
.service-details .btn-detail {
  display: inline-block;
  margin-top: 0;
  padding: 12px 40px;
  border: 1px solid #0068b7;
  background-color: #fff;
  color: #0068b7;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.2;
}
.service-details .btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}
.service-details .btn-detail .arrow {
  /*color: #0068b7;*/
  margin-left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: middle;
}

/*
---------------------------------------------------------------------------
ITコンサルティング（製品・サービス詳細各ページ一部共通）固有スタイル
---------------------------------------------------------------------------
*/
/* 画像とH3をまとめるコンテナ */
.image-caption {
    position: relative; /* H3のabsolute位置の基準とする */
    width: 100%;
    height: 461px; /* padding-bottomと併用してアスペクト比を維持 */
    /*padding-bottom: 56.25%; /* 例: 16:9のアスペクト比。画像に合わせて調整 */
    overflow: hidden;
    /*margin-top: 20px; /* H2との間に適切な余白 */
    /*margin-bottom: 30px; /* 説明文との間に適切な余白 */
}
.image-caption img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1; /* H3より下に */
}
/* 画像の上に重ねるH3 */
.image-caption h3 {
    position: absolute;
    top: 50%; /* 中央に配置 */
    left: 50%;
    transform: translate(-50%, -50%); /* 自身のサイズを考慮して完全な中央へ */
    color: #fff; /* 画像の上で見やすい色に */
    margin: 0; /* 不要なマージンをリセット */
    text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6); /* テキストの影 */
    background-color: rgba(255, 255, 255, 0.3);
    padding: 5px 20px;
    border-radius: 5px;
    /* white-space: nowrap; は削除！ */
    white-space: normal; /* ★h1内のテキストは改行を許可 */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    width: auto; /* 親要素に対して幅を設定（例: 90%） */
    max-width: 800px; /* テキストが広がりすぎないように最大幅を設定 */
    font-size: 2.5rem;
    z-index: 2; /* 画像より上に */
}
.onenet-overview h4,.systemDev-overview h4 {
  color: #0068b7;
}
.consul-overview p strong,.consul-overview ul li strong,.consul-overview ol li strong,
.onenet-summary p strong,.onenet-features p strong,.onenet-flow p strong,
.systemDev-summary p strong,.systemDev-features p strong,.systemDev-range p strong,
.systemST-overview p strong,.systemST-overview ul li strong,
.web_EC-overview p strong,.web_EC-overview ul li strong,.web_EC-overview ol li strong {
  background-image: linear-gradient(
  transparent 60%,  /* 60%までは透明 */
  #ffff80 60%       /* 60%から黄色 */
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline; /* インライン要素のままにする */
  padding: 0 2px;  /* 左右に少し余白をつける */
}
.consul-overview ul,.consul-overview ol {
  padding: 0;
}
.consul-overview ul li,.consul-overview ol li {
  list-style: none;
  line-height: 1.6; /* 例: 1.6em 程度の値。文字サイズに合わせて調整 */
  margin-bottom: 1em; /* 各リスト項目の下に余白を追加して、区切りを明確に */
}
.consul-overview ul li span,.consul-overview ol li span {
  line-height: 1.5; 
}
/*.consul-overview p strong,.consul-overview ul li strong,.consul-overview ol li strong {
  font-weight: bold;
}*/
/*.consul-overview ul li strong,.consul-overview ol li strong {
  color: var(--accent-color);
}*/
/*
---------------------------------------------------------------------------
OneNET販売管理　固有スタイル
---------------------------------------------------------------------------
*/
.onenet-flow .flow {
  display: block;
  max-width: 80%;
  margin: 0 auto;
  margin-top: 20px;
}
.onenet-flow .flow p
  text-align: center;
}
.env-details {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}
.env-details .detail-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.env-details .detail-item:last-child {
  /* border-bottom: none; */
}
.env-details .detail-item dt {
  padding-left:0;
  font-weight: 600;
  color: #333;
  width: 300px;
  flex-shrink: 0;
  margin-right: 20px;
}
.env-details .detail-item dt .dt-label {
  display: inline-block; /* インライン要素、ボーダーとパディングを正確に適用するためにブロック特性を持たせる */
  border-left: 5px solid #0068b7; /* 望むボーダーのスタイルを指定 */
  padding-left: 10px; /* ボーダーとテキストの間の余白 */
  /* line-height: 1.2; などで文字の高さ自体を微調整 */
}
.env-details .detail-item dd {
  margin: 0;
  color: #333;
  flex-grow: 1;
}
/*
---------------------------------------------------------------------------
業務システム開発　固有スタイル
---------------------------------------------------------------------------
*/
.systemDev-approach ol {
  list-style: none;
  padding: 0;
}
.systemDev-range .range-list ul {
  list-style: none;
  padding-left:15px;
}
.systemDev-range .range-list li {
  padding: 5px 0
}
.systemDev-range .range-list ul li span i {
  color: #0068b7;
}
.systemDev-range .range-list ul li span {
  margin-right: 15px;
}
/*
---------------------------------------------------------------------------
システムサポート　固有スタイル
---------------------------------------------------------------------------
*/
.systemST-overview ul {
  list-style: none;
  padding: 0;
}
.systemST-overview ul li {
  line-height: 1.6;
  margin-bottom: 1em;
}
.systemST-overview ul li b {
  color: var(--accent-color);
}
/*
---------------------------------------------------------------------------
Webサイト・ECサイト制作　固有スタイル
---------------------------------------------------------------------------
*/
.web_EC-overview ul,.web_EC-overview ol {
  list-style: none;
  padding: 0;
}
.web_EC-overview ul li,.web_EC-overview ol li {
  line-height: 1.6;
  margin-bottom: 1em;
}
.web_EC-overview ul li b, web_EC-overview ol li b {
  color: var(--accent-color);
}
/*
---------------------------------------------------------------------------
会社概要ページ固有スタイル
---------------------------------------------------------------------------
*/
.button-container,.button-container-bottom {
  display: flex;
  flex-direction: row;
  gap: 100px;
  margin-bottom: 150px;
}
.button-container-bottom {
  margin-top: 150px;
}
.button-container a.btn-detail,.button-container-bottom a.btn-detail {
  flex-grow: 1;
  width: 350px;
  padding: 20px 40px;
  border: 1px solid #0068b7;
  background-color: #fff;
  color: #0068b7;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.2;
}
/*.button-container-bottom a.btn-detail {
  flex-grow: 0;
}*/
.button-container a.btn-detail:hover,.button-container-bottom a.btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}
.button-container a.btn-detail .arrow,.button-container-bottom a.btn-detail .arrow {
  margin-left: 50px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: baseline;
  float: right;
}
.message-container,.philosophy-container-top,.philosophy-container-bottom {
  display: flex; /* Flexboxを有効にする */
  flex-direction: row; /* PCでは横並び */
  justify-content: space-between; /* 子要素間にスペースを均等に入れる */
  align-items: stretch; /* 上端で揃える */
  flex-wrap: nowrap; /* デフォルトは折り返さない */
  max-width: 1300px; /* 必要であればコンテナ全体の最大幅を制限 */
  margin: 0 auto; /* 中央寄せにする場合 */
}
.message-container {
  max-width: 1024px;
  align-items: center;
}
.message-text-content,.philosophy-text-content-top,.philosophy-text-content-bottom {
  flex: 3.3; /* ここを '3' に変更 (60% 相当) */
  min-width: 0;
  padding: 10px;
  box-sizing: border-box;
}
.philosophy-text-content-top .detail-item {
  /*font-size: 1.05rem;*/
  margin-left: 30px;
}
.philosophy-text-content-top .detail-item h3 {
  font-size: 1.3rem;
}
.philosophy-text-content-top .detail-item h4 {
  font-size: 1.2rem;
  color: #0068b7;
  margin-top: 0;
  margin-bottom: 0;
}
.philosophy-text-content-top .detail-item p {
  margin-top: 0;
}
.philosophy-text-content-bottom {
  flex: 4.2;
  /*font-size: 1.05rem;*/
}
.philosophy-text-content-bottom {
  margin-left: 80px;
  margin-right: 40px;
}
.message-text-content {
  flex: 3.7;
}
.message-text-content h2 {
  text-align: center;
  color: #005bac;
  font-size: 3.0rem !important;
  border: none;
}
.message-text-content-main {
  padding: 0 138px;
}
.message-text-content-main h3 {
  text-align:center;
  color:#333;
  font-size:2.0rem
}
/* 画像コンテナに背景画像として設定 */
.message-image-content,.philosophy-image-content-top,.philosophy-image-content-bottom {
  flex: 1.7; /* ここを '2' に変更 (40% 相当) */
  min-width: 0;
  padding: 27px 20px 20px;
  box-sizing: border-box;
  background-image: url('../images/philosophy.jpg'); /* ★画像のパスを指定 */
  background-size: contain; /* コンテナに合わせて画像を拡大・縮小し、トリミング */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  /* 画像タグはHTMLから削除 */
  /*display: flex; 
  align-items: center;
  justify-content: center;*/
  min-height: 300px; /*最低限表示させたい高さを指定。画像の縦横比やデザインに合わせて調整*/
  margin-bottom: 30px;
  /*border: solid 2px #0068b7;*/
}
.philosophy-image-content-bottom {
  flex: 0.8;
  background-image: none;
  min-height: 100px; /*最低限表示させたい高さを指定。画像の縦横比やデザインに合わせて調整*/
  margin-left: 10px;
  margin-bottom: 0;
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: flex-start;
}
.philosophy-image-content-bottom img {
  width: 160px;
  height: auto;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}
.message-image-content {
  flex: 1.52;
  background-image: none;
  min-height: 200px;
  margin-bottom: 0;
}
.message-image-content img {
  width: 280px;
  height: auto;
  object-fit: cover;
}
.founder-overview .profile {
  padding: 0 50px;
}
.company-details,.founder-details {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}
.history-details {
  border-left: 5px solid #0068b7; /* あなたの望むボーダーのスタイル */
  padding-left: 10px;             /* ボーダーと内容の間に余白 */
}
.company-details .detail-item,.founder-details .detail-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.company-details .detail-item:last-child,.founder-details .detail-item:last-child {
  /* border-bottom: none; */
}
.company-details .detail-item dt,.founder-details .detail-item dt {
  padding-left:0;
  font-weight: 600;
  color: #333;
  width: 300px;
  flex-shrink: 0;
  margin-right: 20px;
}
.philosophy-text-content .company-details .detail-item dt {
  width: 180px;
  }
.company-details .detail-item dt .dt-label,.founder-details .detail-item dt .dt-label {
  display: inline-block; /* インライン要素、ボーダーとパディングを正確に適用するためにブロック特性を持たせる */
  border-left: 5px solid #0068b7; /* 望むボーダーのスタイルを指定 */
  padding-left: 10px; /* ボーダーとテキストの間の余白 */
  /* line-height: 1.2; などで文字の高さ自体を微調整 */
}
.company-details .detail-item dd,.founder-details .detail-item dd {
  margin: 0;
  color: #333;
  flex-grow: 1;
}
.company-details .detail-item dd ul,.founder-details .detail-item dd ul {
  list-style: none;
  padding-left: 0;
}
.company-details .detail-item .biography {
  padding-left: 200px;
}
.company-details .detail-item .biography::before {
  content: "[ ";
}
.company-details .detail-item .biography::after {
  content: " ]";
}
.company-details .detail-item .biography a {
  color: inherit;
  text-decoration: none;
}
.company-details .detail-item .biography a:hover {
  opacity: 0.8;
  color: #0068b7;
  text-decoration: none;
}
.circ-tri-arrow {
  /*color: #0068b7;*/
  margin-left: 10px;
  font-size: 1.0rem;
}
.company-details .map-container {
  position: relative;
  width: 100%;
  max-width: 1300px;
}
.company-details .map-container iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 450px;
}
.company-details .detail-item.map-container dt {
  align-self: flex-start;
}
/* Message Page */
.message-text-content-main .detail-item {
  margin-top: 100px;
}
.message-guidelines {
  /* Flexboxコンテナとして設定 */
  display: flex;
  /* 左右のカラム間に少しスペースを空ける */
  gap: 10px;
  align-items: center;
}
.guidelines-title {
  flex-shrink: 0;
  flex-grow: 0;
  width: 150px;
  font-size: 1.25rem;
  text-align-last: justify;
}
.guidelines-title h4,.guidelines-description p {
  margin-top: 0;
  margin-bottom: 5px;
}
.guidelines-title h4 {
  color: #0068b7;
}
.guidelines-description {
  flex: 1;
}
.message-text-content-main p.president {
  margin-top: 50px;
  text-align: right;
}
.slogan {
  text-align: center;
  font-weight: bold;
  margin-top: 100px;
}
.slogan .jp {
  font-size: 25px;
  margin-top: 0;
  margin-bottom: 10px;
}
.slogan .en {
  font-size: 60px;
  margin-top: 0;
}
.slogan .en span {
  color:#005bac;
}
/*
---------------------------------------------------------------------------
採用情報 ／ パートナー募集固有スタイル
---------------------------------------------------------------------------
*/
.intro {
display: block;
margin: 0 auto;
text-align: center;
margin-top: 30px;
}
.intro-text,intro-text2 {
text-align: center;
}
.job-list-container {
max-width: 1300px;
margin-bottom: 2rem;
padding: 1rem;
}
.job-list-container > div + div {
margin-top: 2rem;
}
.section-heading {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: #0068b7; /*#4338ca;*/
margin-bottom: 10px;
border-bottom: solid 1px #ddd;
padding-bottom: 0.5rem;
}
.job-item {
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
border-bottom: dotted 1px #ddd;
}
.job-title {
width: 400px;
font-size: 1.1rem;
line-height: 1.75rem;
font-weight: 600;
color: #111827;
margin-bottom: 0.5rem;
flex-shrink: 0;
}
.job-description {
width: auto;
color: #374151;
font-size: 1rem;
line-height: 1.5rem;
padding-left: 50px;
}
.job-description-heading {
font-size: 1.0rem;
font-weight: 700;
color: #0068b7;
margin-bottom: 0.25rem;
}
.job-description ul {
list-style: none;
/*list-style-position: inside;*/
padding-left: 15px;
}
.job-description ul li + li {
margin-top: 0.25rem;
}
.language-highlight {
font-weight: 500;
/* color: #4f46e5; */
}

/*
---------------------------------------------------------------------------
お問い合わせトップ / 各お問い合わせフォーム 固有スタイル (PC版)
一部採用情報共通 / .select-contact .select-boxes PHP Mailer版
---------------------------------------------------------------------------
*/
/* 各お問い合わせフォーム用お問い合わせフロー */
.contact-here, .flow {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.flow img {
    display: block;
    width: 100%;
    height: auto;
}
.contact-details {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}
.contact-details .detail-item {
    padding: 20px 0;
    border-bottom: none;
    display: flex;
    align-items: baseline; /* テキストのベースラインに揃える */
}
.contact-details .detail-item:last-child {
    /* border-bottom: none; */
}
.contact-details .detail-item dt {
    padding: 10px;
    font-weight: bold;
    color: #555;
    flex-basis: 200px; /* ラベルの基準幅を調整 */
    flex-shrink: 0;
    margin-right: 20px;
    text-align: right; /* ラベルのテキストを右寄せに */
}
.contact-details .detail-item dd {
    margin: 0;
    padding-right: 10px;
    color: #333;
    flex-grow: 1; /* 残りのスペースを全て利用 */
}
.select-contact {
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 50px;
}
.select-contact h2 {
    color: #4C4948;
    font-weight: bold;
    font-size: 1.8rem;
    margin: 30px 0 30px 8px;
}
.select-contact h2 small {
    float: right;
    padding-top: 10px;
    font-weight: normal;
    font-size: 0.6em;
    margin-right: 0.5rem;
}
.select-boxes { /* 採用情報共通 */
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    flex-direction: row; /* PCでのデフォルトを明示的にrowに設定 */
    opacity: 1;
}
figure.select-box figcaption { /* 採用情報共通 */
    position: absolute;
    top: 50px;
    left: 0px;
    right: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    z-index: 10;
    border-radius: 5px;
    margin: 0;
}
figure.select-box h3 {
    width: 100%;
    color: #0068b7;
    font-weight: bold;
    font-size: 1.0rem;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
}
figure.select-box hr {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 5px;
    border: 1px solid #ddd;
}
figure.select-box .select-description {
    font-size: 0.95rem;
    text-align: left;
    margin-bottom: 0;
}
.select-box-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.select-box-link:hover {
    opacity: 1;
}
figure.select-box { /* 採用情報共通 */
    position: relative;
    overflow: hidden;
    flex: 1;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
    background: linear-gradient(#fff, rgba(255, 255, 255, 0.7));
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}
.select-box img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.select-box .image-container {
    overflow: hidden;
}
.select-box .image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}
.select-box-link:hover .select-box .image-container img {
    transform: scale(1.03);
}
*/

/*
---------------------------------------------------------------------------
ポリシーページ / 利用規約ページ固有スタイル
---------------------------------------------------------------------------
*/
.policy-content,.privacy-policy-content,.term-content {
  line-height: 1.6;
  margin-bottom: 30px;
}
.policy-content ol,.privacy-policy-content ol,.term-content ol {
  list-style-type: decimal;
  padding-left: 20px;
  margin-bottom: 20px;
}
.policy-content li,.privacy-policy-content li,.term-content li {
  margin-bottom: 10px;
}

/*
---------------------------------------------------------------------------
サイトマップページ固有スタイル（一部404error共通）
---------------------------------------------------------------------------
*/
.sitemap-body {
  padding: 0 0;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}
.sitemap-body h3.sitemap-cat {
  border-left: solid 5px #0068b7;
  font-weight: bold;
}
.sitemap-body h3.sitemap-cat span {
  margin-left: 10px;
}
.sitemap-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.sitemap-item {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 5px;
  padding: 0;  /*10px 25px; /*15px*/
  box-sizing: border-box;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.15);
}
.sitemap-item p {
  position: relative; /* リンクテキストが線の上に表示されるように */
  z-index: 4; /* 線より高いz-indexを設定 */
  text-align: center;
  padding: 10px;
  font-size: 1.0rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.sitemap-item p a {
  display: block; /* <a>をブロック要素のように扱う */
  width: 100%;    /* 親要素の幅いっぱいに広げる */
  height: 100%;   /* 親要素の高さいっぱいに広げる */
  color: inherit; /* 親要素から色を継承 */
  text-decoration: none;
  /* position: relative;*/
  padding: 0;
  box-sizing: border-box; /* paddingを含めて幅と高さを計算 */
}
.sitemap-item p a::before {
  /*content: "";*/
  color: #0068b7;
  margin-right: 8px;
  font-weight: bold;
}
.sitemap-item p a:hover {
  opacity: 1;
}
.sitemap-item p a:hover::after {
  width: 100%;
}
.sitemap-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 20px; /* 子リストのインデント */
}
.sitemap-item ul li a {
  color: #555;
  text-decoration: none;
}
.sitemap-item ul li a::before {
  content: "";　/* \021C0 */
  color: #777;
  margin-right: 5px;
}

/*
---------------------------------------------------------------------------
404ページ固有スタイル
---------------------------------------------------------------------------
*/
.error-head h1 {
  max-width: 1300px;
  font-size: 3.5rem;
  color: #000; /*#0087af; /*#3155a6;
  /* margin-bottom: 20px;*/
  margin: 100px auto 30px; 
  text-align: center;
  /* position: absolute;
  top: 20%;
  left: 20%;*/
  /* font-size: 4.5rem;*/
  /*margin: 0;*/
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
}
.error-head p {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 100px;
  font-size: 1.2rem;
  text-align: center;
  line-height: 2.4;
}
/*
---------------------------------------------------------------------------
WordPress / ニュース一覧 / カテゴリーページ固有スタイル
---------------------------------------------------------------------------
*/
.category-news-overview h2 span.head {
  margin-right: 20px;
}
.news-list {
  border-bottom: 2px solid #ddd;
}
.news-items {
  list-style: none;
  padding: 0 10px;
  margin: 0;
}
.news-item {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}
.news-item:last-child {
  /*border-bottom: 2px solid #ddd;*/
  border-bottom: none;
}
.news-date {
  width: auto;
  flex-shrink: 0;
  color: #777;
  margin-right: 20px;
}
.news-category {
  width: auto;
  flex-shrink: 0;
  color: #6795b4;
  border: solid 1px #6795b4;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  margin-right: 20px;
  padding: 5px 30px;
  font-size: 1rem;
  font-weight: normal;
}
.news-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: normal;
}
li.news-item span.arrow {
  color: #6795b4;
  float: right;
}
.news-title a {
  color: #0068b7;
  text-decoration: none;
  position: relative;
  overflow: hidden; /* 追加: アニメーションがはみ出さないように */
}
.news-title a:hover {
  /*color: #777;*/
  text-decoration: none;
  opacity: 1;
}
.news-title a::after {
  content: '';
  position: absolute;
  width: 0; /* 初期状態は非表示 */
  height: 2px;
  bottom: -3px;
  left: 0; /* 初期位置は左端 */
  background-color: #0068B7;
  transition: width 0.3s ease;
}
.news-title a:hover::after {
  width: 100%; /* ホバー時に幅を広げる */
}
/*
---------------------------------------------------------------------------
WordPressニュース　シングルページ固有スタイル
---------------------------------------------------------------------------
*/
.single-news-content {
  padding: 0 10px;
  border-bottom: 2px solid #ddd;
}
.news-meta {
  margin-bottom: 60px;
  font-size: 1rem;
  color: #777;
}
.news-body {
  line-height: 1.8;
  color: #333;
}
.news-body p {
  margin-bottom: 20px;
}
/*
---------------------------------------------------------------------------
WordPress / コラム一覧 / カテゴリーページ固有スタイル
---------------------------------------------------------------------------
*/
/* --- インデックスページ --- */
h1 {
  text-align: center;
  margin-bottom: 40px;
}
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  flex: 1 1 calc(33.333% - 20px); /* 3枚横並びの基本設定 */
  box-sizing: border-box;
  max-width: 413px; /* カードの最大幅を固定 */
}
.card-link:hover {
  opacity: 1;
}
.card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 10px rgba(0, 104, 183, 0.5); /*box-shadow: 0 0 20px rgba(0, 104, 183, 0.6);*/
}
.card-image-wrapper {
  width: 100%;
  aspect-ratio: 16/10; /* 画像のアスペクト比を保持 */
  overflow: hidden;
}
.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がコンテナを埋めるように調整 */
}
.card-content {
  padding: 20px;
}
.card:hover .card-content {
  background-color: #fafafa;
}
.card-title {
  min-height: 2.8em; /* 2行分の高さ */
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.4;
}
.card-title,.card-meta {
  color: #777;
}
.card-meta {
  margin-top: 50px;
  padding-top: 15px;
  border-top: solid 1px #eee;
}
.card-meta span.card-date i,.card-meta span.card-date {
  margin-right: 10px;
}
.card-category,.card-tag {
  display: inline-block;
  background-color: #0068b7; /* #d6eaf8; */
  color: #fff;
  border-radius: 5px;
  padding: 5px 30px;
  float: right;
}
.card-tag {
  background-color: #0095A6;
}
.card-excerpt {
  font-size: 0.9rem;
  color: #777;
}
/*
---------------------------------------------------------------------------
WordPressコラム　シングルページ固有スタイル
---------------------------------------------------------------------------
*/
.single-column-content {
  /*padding: 0 10px;*/
  border-bottom: 2px solid #ddd;
}
.single-column-content h1 {
  color: #555;
  font-size: 1.8rem;
  margin-top: 30px;
  margin-bottom: 30px;
  /* border-bottom: solid 2px #ddd;*/
  text-align: center;
}
.single-column-content .column-meta {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 1rem;
  color: #777;
  border-bottom: solid 2px #ddd;
}
.single-column-content .column-date {
  width: auto;
  flex-shrink: 0;
  color: #777;
  /*margin-right: 20px;*/
}
.single-column-content .column-date i {
  margin-right: 10px;
}
.single-column-content .column-category {
  display: inline-block;
  width: auto;
  flex-shrink: 0;
  border-radius: 5px;
  text-align: center;
  margin-right: 30px;
  /*padding: 5px 30px;
  background-color: #0068b7; /*#d6eaf8;
  color: #fff; /* #6795b4;*/
}
.single-column-content a.button {
  font-size: 1rem;
}
.single-column-content .column-category a.button {
  display: inline-block;
  padding: 5px 30px;
  background-color: #0068b7; /*#d6eaf8;*/
  box-shadow: 0 3px 6px rgba(0, 104, 183, 0.25);
  color: #fff; /* #6795b4;*/
  border-radius: 3px;
}
.single-column-content .column-category a.button:hover {
  opacity: 0.85;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.single-column-content .tags ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  list-style: none;
  padding: 0;
}
.single-column-content .tags ul li {
  margin-right: 10px;
}
/*.column-tag {
  display: inline-block;
  justify-content: right;
  margin-right: 15px;
  border-radius: 5px;
  padding: 5px 30px;
  background-color: #d6eaf8;
  color: #777;
  
}*/
.single-column-content .column-tag a.button {
  display: inline-block;
  padding: 5px 30px;
  color: #fff;
  background-color: #0095A6; /*#008080; /*#00a968; /* #d6eaf8; */
  border-radius: 3px;
}
.single-column-content .column-tag a.button:hover {
  box-shadow: 0 3px 6px rgba(0, 149, 166, 0.25);
  opacity: 0.85;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.single-column-content .column-tag:last-child {
  margin-right: 0;
}
.featured-image-wrapper {
  width: 100%;
    /*aspect-ratio: 16/9;  アイキャッチ画像のアスペクト比 */
  overflow: hidden;
  margin-bottom: 10px;
}
/* 画像がコンテナからはみ出さないように設定 */
.featured-image-wrapper img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.featured-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.post-content {
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.8;
  flex-grow: 1; /* 余白を埋めるように幅を広げる */
}
/*.post-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
}*/
.post-body p,
.post-body ul,
.post-body ol {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.post-body .toc {
  list-style: none;
  counter-reset: my-counter; /* カウンターをリセット */
  padding-left: 20px;
}
.post-body .toc li {
  counter-increment: my-counter; /* 項目ごとにカウントアップ */
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px; /* ナンバリングのスペースを確保 */
}
/* 疑似要素でナンバリングを挿入 */
.post-body .toc li::before {
  content: counter(my-counter) "．"; /* ナンバーとピリオドを挿入 */
  font-weight: bold;
  color: #0068b7; /* アクセントカラーを適用 */
  position: absolute;
  left: 0;
}
.post-body ul.toc li::before {
  color: #333;
}
.post-body li a {
  text-decoration: underline;
}
.post-body ul.toc .text {
  padding-left: 0;
}
.post-body ul,.post-body ol {
  list-style: none;
}
.post-body p {
  margin-top: 0;
}
.post-body p.lead {
  background: #e3f2ff; /*#c0e0ff;*/
  color: #555;
  /*border-radius: 3px;*/
  letter-spacing: 0.05em;
  padding: 20px;
}
.post-body strong {
  background-image: linear-gradient(
  transparent 60%,  /* 60%までは透明 */
  #ffff80 60%       /* 60%から黄色 */
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline; /* インライン要素のままにする */
  padding: 0 2px;  /* 左右に少し余白をつける */
}
.post-body h2 {
  font-size: 1.8rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.post-body h3 {
  color: #0068b7;
  font-size: 1.2rem;
  padding-left: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.post-body li span.step,.post-body li span.number {
  display: inline-block;
  color: #0068b7;
  font-weight: bold;
}
.post-body li span.number {
  color: #333;
}
.post-body li span.text {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-right: 20px;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
}
/* Wordpress Popular Posts Plug-in */
.popular-posts-list,.wpp-list {
  padding-left: 0;
}
.wpp-title {
  margin-top: 0;
  color: #0068b7;
  font-size: 1.0rem;
  font-weight: bold;
}
.popular-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.popular-posts-list .wpp-list {
  display: flex;
  justify-content: space-between;
  flex-basis: calc(20%);
  gap: 20px;
  box-sizing: border-box;
}
.popular-posts-list .wpp-list li {
  display: flex;
}
.wpp-thumbnail {
  margin-right: 5px !important;
}
.wpp-info {
  width: 120px;
}
.wpp-date {
  margin-bottom: 0;
}
/*
---------------------------------------------------------------------------
WordPressコラム　カテゴリー＆タグページ固有スタイル
---------------------------------------------------------------------------
*/
/*.category-column-overview h2 span.head {
  margin-right: 0;
}*/
.column-category-title {
  /*display: inline-block;
  background-color: #0068b7; /* #d6eaf8; */
  color: #0068b7;
  /*border-radius: 5px;
  padding: 1px 40px;*/
}
.column-tag-title {
  color: #0095A6;
}
/*.column-list {
  border-bottom: 2px solid #ddd;
}
.column-items {
  list-style: none;
  padding: 0 10px;
  margin: 0;
}
.column-item {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}
.column-item:last-child {
  border-bottom: 2px solid #ddd;
  border-bottom: none;
}
/*.column-date {
  width: auto;
  flex-shrink: 0;
  color: #777;
  margin-right: 20px;
}
.column-category {
  width: auto;
  flex-shrink: 0;
  color: #6795b4;
  border: solid 1px #6795b4;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  margin-right: 20px;
  padding: 5px 30px;
  font-size: 1rem;
  font-weight: normal;
}
.column-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: normal;
}
li.column-item span.arrow {
  color: #6795b4;
  float: right;
}
.column-title a {
  color: #0068b7;
  text-decoration: none;
  position: relative;
  overflow: hidden; 
}
.column-title a:hover {
  color: #777;
  text-decoration: none;
  opacity: 1;
}
.column-title a::after {
  content: '';
  position: absolute;
  width: 0; 
  height: 2px;
  bottom: -3px;
  left: 0; 
  background-color: #0068B7;
  transition: width 0.3s ease;
}
.column-title a:hover::after {
  width: 100%;
}*/

/*
---------------------------------------------------------------------------
WordPressページネーション固有スタイル
---------------------------------------------------------------------------
*/
.single-post-navigation {
  margin: 60px 0;
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
}
.return-list {
  margin-top: 100px;
  margin-bottom: 30px;
}
.single-post-navigation .button,.return-list .button {
  display: inline-block;
  padding: 8px 30px;
  background-color: #fff;
  color: #6795b4;
  border: 1px solid #6795b4;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
}
.single-post-navigation .button:hover,.return-list .button:hover {
  background-color: #0f52ba;
  border: 1px solid #0f52ba;
  color: #fff;
}
.single-post-navigation .previous-post .button::before, .return-list .button::before {
  content: "\21BC "; /* 左向き矢印 */
  margin-right: 15px;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif; /* 例: より多くのウェイトを持つフォント */
  vertical-align: sub;
}
.single-post-navigation .next-post {
   text-align: right;
}
.single-post-navigation .next-post .button::after {
  content: " \21C0"; /* 右向き矢印 */
  margin-left: 15px;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif; /* 例: より多くのウェイトを持つフォント */
  vertical-align: sub;
}

/*
---------------------------------------------------------------------------
レスポンシブデザイン / max-width: 768px
---------------------------------------------------------------------------
---------------------------------------------------------------------------
リセットcss / グローバル基本スタイル
---------------------------------------------------------------------------
*/
@media screen and (max-width: 768px) {
  body {
    /*font-size: 1.0rem;*/
    font-size: 0.9375rem;
    line-height: 1.5;
  }

/*-----------------------------------------------------
サイト全体の共通レイアウト設定
------------------------------------------------------*/
  .main-contents {
    max-width: 100%;
    padding: 0 10px;
  }
  .service-overview,.consul-overview,.onenet-overview,
  .systemDev-overview,.systemST-overview,.web_EC-overview,
  .company-overview,.philosophy-overview,.message-overview,
  .founder-overview,.recruit-overview,.partner-overview,
  .contact-overview,.policy-overview,.terms-overview,
  .sitemap-overview,
  .news-overview,.category-news-overview,.single-news-overview,
  .column-overview,.category-column-overview,.single-column-overview {
    margin: 50px auto; /* company recruit partner 70px？*/
  }
  .single-column-overview {
    margin-top: 30px;
  }
  .philosophy-overview,.message-overview,.founder-overview {
    margin-top: 0;
  }
/*  .company-head {
   /* ★ここを修正: スマホ時の company-head の高さを明示的に指定 */
/*    position: relative; /* 既に設定済みですが念のため */
/*    height: 200px; /* 画像の高さと同じにする */
/*    overflow: hidden; /* はみ出したコンテンツを非表示にする */
/*  }
  .company-image {
   /* ★ここを修正: company-head の中で絶対配置し、親要素いっぱいに広げる */
/*    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親 (company-head) の高さに合わせる */
/*  }*/
  .service-head-image img,.consul-head-image img,.onenet-head-image img,
  .systemDev-head-image img,.systemST-head-image img,.web_EC-head-image img,
  .company-head-image img,.philosophy-head-image img,.message-head-image img,
  .founder-head-image img,.recruit-head-image img,.partner-head-image img,
  .contact-head-image img,.policy-head-image img,.terms-head-image img,
  .sitemap-head-image img,
  .news-head-image img,
  .column-head-image img {
   width: 100%;
   height: 200px; /* company height: 100%;? */
   object-fit: cover;
  }
  .service-head > div:last-of-type h1,.consul-head > div:last-of-type h1,.onenet-head > div:last-of-type h1,
  .systemDev-head > div:last-of-type h1,.systemST-head > div:last-of-type h1,.web_EC-head > div:last-of-type h1,
  .company-head > div:last-of-type h1,.philosophy-head > div:last-of-type h1,.message-head > div:last-of-type h1,
  .founder-head > div:last-of-type h1,.recruit-head > div:last-of-type h1,.partner-head > div:last-of-type h1,
  .contact-head > div:last-of-type h1,.policy-head > div:last-of-type h1,.terms-head > div:last-of-type h1,
  .sitemap-head > div:last-of-type h1,
  .news-head > div:last-of-type h1,.single-news-head > div:last-of-type h1,
  .column-head > div:last-of-type h1,.single-column-head > div:last-of-type h1 {
   /* display: flex;
   white-space: nowrap;
   line-height: 1; */
   font-size: 2.0rem;
   position: absolute;
   top: 50%;
   left: 50%;
    /* color: #4682b4; */
    transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
    width: 95%;
    max-width: 728px;
  }
  .philosophy-head > div:last-of-type h1,.message-head > div:last-of-type h1,.founder-head > div:last-of-type h1 {
    font-size: 1.3rem;
  }
  .service-head > div:last-of-type h1 .catch,.consul-head > div:last-of-type h1 .catch,.onenet-head > div:last-of-type h1 .catch,
  .systemDev-head > div:last-of-type h1 .catch,.systemST-head > div:last-of-type h1 .catch,.web_EC-head > div:last-of-type h1 .catch,
  .company-head > div:last-of-type h1 .catch,.philosophy-head > div:last-of-type h1 .catch,.message-head > div:last-of-type h1 .catch,
  .founder-head > div:last-of-type h1 .catch,.recruit-head > div:last-of-type h1 .catch,.partner-head > div:last-of-type h1 .catch,
  .contact-head > div:last-of-type h1 .catch,.policy-head > div:last-of-type h1 .catch,.terms-head > div:last-of-type h1 .catch,
  .sitemap-head > div:last-of-type h1 .catch,
  .news-head > div:last-of-type h1 .catch,.single-news-head > div:last-of-type h1 .catch,
  .column-head > div:last-of-type h1 .catch,.single-column-head > div:last-of-type h1 .catch {
    font-size: 1.3rem;/* 1.4 */
  }
  .philosophy-head > div:last-of-type h1 .catch,.message-head > div:last-of-type h1 .catch,.founder-head > div:last-of-type h1 .catch {
    font-size: 2.6rem;
  }
/* 仕様変更につきおそらく未使用になる想定
  .service-head h1,.company-head h1 {
    font-size: 2.0rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 自身の幅と高さの半分だけ戻す
    align-items: center;
    padding: 5px 15px;
  }
*/
  .service-overview h2,.consul-overview h2,.onenet-overview h2,
  .systemDev-overview h2,.systemST-overview h2,.web_EC-overview h2,
  .company-overview h2,.philosophy-overview h2,.founder-overview h2,
  .recruit-overview h2,.partner-overview h2,
  .contact-overview h2,.policy-overview h2,.terms-overview h2,
  .sitemap-overview h2,
  .news-overview h2,.category-news-overview h2,.single-news-overview h2,
  .column-overview h2,.category-column-overview h2,.single-column-overview h2 {
    font-size: 1.5rem !important;
  }
/*  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }
*/
  .sp {
    display: block !important;
  }
/*
---------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------
*/
  header {
    padding: 5px 15px;
    height: 60px;
    margin: 0;
  }
  .logo img {
    width: 80%;
    height: 80%;
  }
  .company-name {
    display: none;
  }
  nav ul {
    position: fixed;
    top: 60px;
    right: 0;
    background: #0068b7;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: stretch;
    display: none;
    padding: 0px;
    gap: 0;
    transition: transform 0.3s ease-in-out; /* transformプロパティの変化を0.3秒かけて滑らかに */
    transform: translateY(-100%); /* 最初は上に隠しておく */
    box-sizing: border-box;
  }
  nav ul li {
    border-bottom: 1px dotted #fff;
    text-align: center;
  }
  nav a,
  nav ul li:first-child a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 20px;
  }
  nav ul li:last-child a {
    color: #0068B7;
    background: #fff;
    border: 1px solid #fff;
    padding: 6px 12px;
    border-radius: 5px;
    transition: all 0.3s;
    overflow: hidden;
    margin: 20px;
  }
  nav ul.active {
    display: flex; /* ← activeクラスが付与されたら表示 */
    transform: translateY(0%); /* 上からスライドイン */
  }
  .menu-toggle {
    display: flex;
  }
  .menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px auto;
    background: #0068b7;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(9px, -9px);
  }

/*
---------------------------------------------------------------------------
パンくずリスト
---------------------------------------------------------------------------
*/
  .breadcrumb-container {
    margin: 60px 0 0 0;
    padding: 0 5px;
  }
  .breadcrumb {
    margin: 0;
    padding: 5px 0;
    padding-left: 5px;
  }
  .breadcrumb li:first-child {
    margin-left: -5px;
  }
/*
---------------------------------------------------------------------------
お問い合わせバナー/製品・サービスバナー
---------------------------------------------------------------------------
*/
  .contact-banner,.service-banner {
    width: 100%;
    height: auto;
    /* padding: 0 10px;*/
    gap: 10px;
  }
  .contact-banner img,.service-banner img {
    border-radius: 0;
  }
/*---------------------------
一覧へ戻るボタン
---------------------------*/

/*
---------------------------------------------------------------------------
フッター
---------------------------------------------------------------------------
*/
  footer {
    /*font-size: 0.7rem;*/
    padding-top: 10px;
  }
  .footer-menu ul {
    display: block;
  }
  .footer-menu li {
    margin-bottom: 10px;
  }
  .footer-logo {
    padding: 10px 0;
  }
  .copyright {
    padding: 15px 0;
    font-size: 0.7rem;
  }

/*
---------------------------------------------------------------------------
ページトップボタン
---------------------------------------------------------------------------
*/
  .pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  position: fixed;
  right: 10px;
  bottom: 50px;
  }

/*
---------------------------------------------------------------------------
トップページ固有スタイル
---------------------------------------------------------------------------
---------------------------------------------------------------------------
トップページヘッダーイメージ
---------------------------------------------------------------------------
*/
  .top-mv {
    margin-top: 60px;
    height: 300px;
  }
  .top-mv img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    /* object-position: center;*/
  }
  .mv-text-wrapper {
    top: 50%; /* モバイルでも中央に寄せるか、上部に寄せるか調整 */
    left: 5vw;
    transform: translateY(-50%);
    width: 96%; /* モバイルでのテキストブロックの幅 */
    padding-right: 5vw; /* 右側にも少し余白があると良い */
    }
  .mv-text-wrapper h1 {
    display: flex;
    white-space: nowrap; 
    line-height: 1; 
    align-items: center;
    /*
    iPhone SE (375px) で2.2rem、XR (414px) 以降で3.0remになるように調整
    clamp(最小値, 画面幅に比例した値, 最大値)
    */
    font-size: clamp(2.2rem, calc(2.2rem + (3.0 - 2.2) * ((100vw - 375px) / (414 - 375))), 3.0rem);
  }
  .mv-text-wrapper .dx {
    /* 
    iPhone SE (375px) で2.7rem、XR (414px) 以降で3.0remになるように調整
    calc() を使用して、特定の画面幅間で正確にスケーリング
    */
    font-size: clamp(2.7rem, calc(2.7rem + (3.0 - 2.7) * ((100vw - 375px) / (414 - 375))), 3.0rem);
  }
  .mv-text-wrapper .digital-transformation {
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: auto;
    /*
    iPhone SE (375px) で1.3rem、XR (414px) 以降で1.5remになるように調整
    */
    font-size: clamp(1.3rem, calc(1.3rem + (1.5 - 1.3) * ((100vw - 375px) / (414 - 375))), 1.5rem);
    text-align: left;
  }
  .mv-text-wrapper p {
    /*
    iPhone SE (375px) で1.2rem、XR (414px) 以降で1.4remになるように調整
    */
    font-size: clamp(1.2rem, calc(1.2rem + (1.4 - 1.2) * ((100vw - 375px) / (414 - 375))), 1.4rem);
    margin-top: 50px;
  }
/*  .top-mv h1 {
    display: flex;
    white-space: nowrap; 
    line-height: 1; 
    align-items: center;
  }
  .top-mv .dx {
    font-size: 3.0rem; 
    margin-right: 0.2em;
  }
  .top-mv .digital-transformation {
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: 3.0rem; 
    font-size: 1.5rem;
    text-align: left;
  }
  .top-mv p.first-txt {
    position: absolute;
    font-size: 1.4rem;
  }
  .top-mv p.second-txt {
    font-size: 1.4rem;
  }*/

/*
---------------------------------------------------------------------------
トップページキャッチコピー
---------------------------------------------------------------------------
*/
  .top-catch {
    max-width: 100%;
    margin: 0 auto 50px;
    padding: 0 20px;
  }
  .top-catch h2 {
    font-size: 1.7rem;
  }
  .top-catch p {
    font-size: 100%;
    line-height: 2.0;
    padding: 0 10px;
  }
  .top-catch h3 {
    font-size: 1.3rem;
  }

/*
---------------------------------------------------------------------------
トップページ  Feature-Box共通
---------------------------------------------------------------------------
*/
 .top-service,.top-corp,.top-recruit,.top-partner {
    max-width: 100%;
   /*  padding: 0 10px; /* スマートフォン表示では左右のpaddingを10pxに */
  }
  .top-service .feature-box,.top-corp .feature-box,.top-recruit .feature-box,.top-partner .feature-box,.main-contents .feature-box,.feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%; /* ← これを確認または追加 */
    /*box-shadow: none;*/
    border-radius: 0;/* スマートフォンでは角丸を削除 */
  }
  .top-service .feature-content,.top-corp .feature-content,.top-recruit .feature-content,.top-partner .feature-content,.main-contents .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    padding: 0;
    /*box-sizing: border-box;*/
    clip-path: none; /* クリップパスを解除 */
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* 中央揃え */
    margin-bottom: 10px;
  }
  .top-service .feature-text-left,.top-corp .feature-text-left,.top-recruit .feature-text-left,.top-partner .feature-text-left {
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* 画像との間に余白を追加 */
    padding-left: 20px;
    padding-right: 20px;
  }
  .top-service .feature-text-left h2,.top-corp .feature-text-left h2,.top-recruit .feature-text-left h2,.top-partner .feature-text-left h2 {
    font-size: 1.5rem;
  }
  .top-service .feature-text-left h2 small,.top-corp .feature-text-left h2 small,.top-recruit .feature-text-left h2 small,.top-partner .feature-text-left h2 small {
    float: right;
    margin-left: 0;
    margin-right: 0px;
  }
  .top-service .feature-image,.top-corp .feature-image,.top-recruit .feature-image,.top-partner .feature-image,.feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
  }
/* スマホ表示時の画像高さ調整 */
  .top-service .feature-image img,.top-corp .feature-image img,.top-recruit .feature-image img,.top-partner .feature-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
  }
  .top-corp .feature-image img.top-corp-image {
    height: 300px;
  }
/* 「詳しく見る」ボタンのスタイル */
  .top-service .btn-detail, .top-corp .btn-detail, .top-corp .btn-detail, .top-recruit .btn-detail, .top-partner .btn-detail {
    margin-top: 10px;
    /*margin-right: 0;*/
    float: right;
    /* margin: 0 auto; /* ボタンを中央に配置 */
  }
  .top-corp .btn-detail {
    margin-top: 30px;
  }

/*
---------------------------------------------------------------------------
トップページニュース一覧
---------------------------------------------------------------------------
*/
  .top-news {
    position: static;
    width: 100%;
    box-sizing: border-box;
    clip-path: none;
    display: flex;
    flex-direction: column;
    padding: 0 20px 10px 20px;
  }
  .top-news h2 {
    padding-bottom: 10px;
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 15px;
  }
  .top-news ul {
    list-style: none;
    padding: 0 0;
    margin: 0;
  }
  .top-news li {
    flex-direction: column; /* まずは縦並びを維持 */
    align-items: flex-start;
    padding: 10px 0;
  }

/* 未使用要素
  .top-news .news-item-header { 
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
    width: 100%;
  }
*/
  .top-news .news-date {
    margin-right: 10px; /* カテゴリーとの間にスペース */
    margin-bottom: 10px; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }
  .top-news .news-title {
    font-size: 0.9rem;
    line-height: 2.0;
    margin-bottom: 0; /* 下マージンは不要 */
    width: 100%; /* 親要素の幅いっぱいに表示 */
  }
  .top-news .news-category {
    margin-right: 0; /* タイトルとのスペースは親要素で行う */
    margin-bottom: 10px; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }

/*-----------------------------------------------------
サービスページ固有スタイル
------------------------------------------------------*/
  .service-details .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%;
    /*box-shadow: none; /* スマートフォンでは影を削除 */
    border-radius: 0; /* スマートフォンでは角丸を削除 */
  }
  .service-details .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    padding: 0;
    box-sizing: border-box;
    clip-path: none; /* クリップパスを解除 */
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* 中央揃え */
  }
  .feature-content {
    margin-bottom: 0;
  }
  .service-details .feature-text-left {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    /*text-align: center; /* テキスト中央揃え */
    margin-bottom: 0; /* 画像との間に余白を追加 */
    padding: 20px;
  }
  .service-details .feature-text-left h3 {
    font-size: 1.3rem;
  }
  .service-details .feature-text-left p {
    line-height: 1.8;
  }
  .service-details .feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: 230px;
    margin-top: 0;
    margin-bottom: 0;
    clip-path: none; /* クリップパスを解除 */
    /* object-fit: contain; */
  }
/* スマホ表示時の画像高さ調整 */
  .service-details .feature-image img {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: 230px;
    margin-top: 0;
    margin-bottom: 0;
    clip-path: none; /* クリップパスを解除 */
  }
/* 「詳しく見る」ボタンのスタイル */
   .service-details .btn-detail {
    margin-top: 0;
    margin-right: 0;
    float: right;
    /* margin: 0 auto; /* ボタンを中央に配置 */
  }

/*
---------------------------------------------------------------------------
ITコンサルティング（製品・サービス詳細各ページ共通）固有スタイル
---------------------------------------------------------------------------
*/
/* 未使用
  .consul-overview img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
*/
  .image-caption {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .image-caption img {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
  }
  .image-caption h3 {
    font-size: 1.3rem; /* h3のフォントサイズをさらに小さく */
    padding: 5px 10px;
    width: 90%; /* スマホでは画面幅いっぱいに近い形に */
    white-space: normal; /* 念のため、改行を許可 */
    text-align: center;
  }
/*-----------------------------------------------------
OneNET販売管理ページ固有スタイル
------------------------------------------------------*/
  .onenet-flow .flow {
    max-width: 100%;
  }
  .onenet-flow .flow p {
    text-align: left;
  }
  .env-details .detail-item {
    padding: 15px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .env-details .detail-item dt {
    width: auto;
    margin-bottom: 5px;
    margin-right: 0;
  }

  .env-details .detail-item dd {
    padding: 5px 10px;
  }

/*-----------------------------------------------------
会社概要ページ固有スタイル
------------------------------------------------------*/
  .button-container,.button-container-bottom {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 100px;
  }
  .button-container-bottom {
    margin-top: 100px;
  }
  .button-container a.btn-detail,.button-container-bottom a.btn-detail {
    width: 100%;
  }
  .message-container {
    flex-direction: column-reverse;
  }
  .message-image-content {
    margin-bottom: 0;
  }
  .message-image-content img {
    width: 210px;
  }
  .message-text-content h2 {
    font-size: 1.9rem !important;
    margin-top: 0;
  }
  .message-text-content-main {
    padding: 0 10px;
  }
  .message-text-content-main h3 {
    font-size: 1.3rem; /*1.5rem;*/
  }
  .message-text-content-main .detail-item {
    margin-top: 50px;
  }
  .message-guidelines {
    gap: 0;
    align-items: flex-start;
    flex-direction: column;
  }
  .message-text-content-main p.president {
    margin-top: 30px;
  }
  .slogan {
    margin-top: 50px;
  }
  .slogan .jp {
    font-size: 20px;
  }
  .slogan .en {
    font-size: 33px;
  }
  h2.philosophy {
    margin-top: 0;
    margin-bottom: 0;
  }
  .philosophy-container-top,.philosophy-container-bottom {
    flex-direction: column-reverse; /* 要素を縦に並べる */
    align-items: center; /* 中央に配置 */
  }
  .philosophy-container-bottom {
    flex-direction: column;
  }
  .philosophy-text-content-top,
  .philosophy-image-content-top {
    width: 100%; /* スマホでは幅を100%にする */
  }
  .philosophy-text-content-top .detail-item {
    margin-left: 0;
  }
  .philosophy-image-content-top {
    margin-top: 20px;
  }
  .philosophy-image-content-bottom {
    margin-top: 0;
    margin-left: 0;
  }
  .philosophy-text-content-top .detail-item,.philosophy-text-content-bottom {
    /*font-size: 1.05rem;*/
  }
  .philosophy-image-content-top {
    /*padding:0;
    margin-bottom:0;
    height: 350px; /* 例：スマホで表示させたい画像の高さを固定 */
    /*display: none;*/
    min-height: 400px;
  }
  .philosophy-image-content-bottom {
    padding: 0;
  }
  .philosophy-text-content-bottom {
    margin-left: 0;
    margin-right: 0;
  }
/*  .company-details {
    display: block; /* モバイルでは縦 ?? ???? 
  }*/
  .founder-overview .profile {
    padding: 0;
  }
  .company-details .detail-item,.founder-details .detail-item {
    padding: 15px 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .company-details .detail-item dt,.founder-details .detail-item dt {
    width: auto;
    margin-bottom: 5px;
    margin-right: 0;
  }
  .company-details .detail-item dd,.founder-details .detail-item dd {
    padding: 5px 10px;
  }
  .company-details .detail-item .biography {
    padding-left: 50px;
  }
  .philosophy-text-content-top .company-details .detail-item dd {
    padding: 5px 0;
  }
  .company-details .detail-item.map-container iframe {
    width: 768px; /* モバイルで全幅表示 */
    max-width: 100%;
    height: 300px; /* モバイルでの高さ */
  }
  .company-details .detail-item dd.map {
    padding: 0;
  }

/*
---------------------------------------------------------------------------
採用情報 ／ パートナー募集固有スタイル
---------------------------------------------------------------------------
*/
  .intro {
    text-align: left;
    margin-top: 10px;
  }
  .intro-text,intro-text2 {
    font-size: 0.95rem;
    line-height: 1.75rem;
    text-align: left;
  }
  .intro-text2 {
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .job-list-container {
    max-width: 100%;
    padding: 0;
  }
  .section-heading {
    font-size: 1.25rem;
    line-height: 1.0rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .job-item {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding: 0.75rem;
  }
  .job-title {
    max-width: 100%;
    font-size: 1.2rem;
    line-height: 1.0rem;
    margin-top: 0.5rem;
  }
  .job-description {
    font-size: 0.95rem;
    line-height: 1.0rem;
    padding-left: 0.1rem;
  }
  .job-description-heading {
    margin-top: 0.5rem;
  }
  .job-description ul {
    padding-left: 0;
    margin-left: 10px;
    margin-right: 10px;
  }
/*
---------------------------------------------------------------------------
お問い合わせトップ / 各お問い合わせフォーム 固有スタイル
一部採用情報共通 / .select-contact .select-boxes　PHPMailer版
---------------------------------------------------------------------------
*/
    /* お問い合わせトップ / 各お問い合わせフォーム 固有スタイル (スマホ版) */
    .contact-details {
        display: block;
    }
    .contact-details .detail-item {
        padding: 15px 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-details .detail-item dt {
        width: 100%;
        margin-bottom: 5px;
        margin-right: 0;
        text-align: left; /* スマホでは左寄せに戻す */
    }
    .contact-details .detail-item dd {
        width: 100%;
        padding: 5px 10px;
    }
    .select-contact {
        padding: 0;
    }
    .select-contact h2 {
        margin: 20px 0;
        font-size: 1.5rem;
    }
    .select-boxes {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 0;
    }
    figure.select-box {
        width: 100%;
        margin: 0;
    }
    figure.select-box figcaption {
        font-size: 1rem;
        padding: 5px;
        top: 5px;
        left: 5px;
        right: 5px;
    }

/*
---------------------------------------------------------------------------
ポリシーページ / 利用規約ページ固有スタイル
---------------------------------------------------------------------------
*/
/* 個別仕様なし */

/*
---------------------------------------------------------------------------
サイトマップページ固有スタイル（一部404error共通）
---------------------------------------------------------------------------
*/
  .sitemap-list-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
  }
  .sitemap-item p {
    font-size: 1.0rem;
    margin-bottom: 8px;
  }
  .sitemap-item p a::before {
    margin-right: 5px;
  }
  .sitemap-item ul {
    padding-left: 15px;
  }
  .sitemap-item ul li a::before {
    margin-right: 3px;
  }

/*
---------------------------------------------------------------------------
404ページ固有スタイル
---------------------------------------------------------------------------
*/
  .error-head h1 {
    max-width: 100%;
    display: flex;
    /* white-space: nowrap; */
    line-height: 1.5;
    font-size: 1.8rem;
    margin: 30px auto;
    padding: 0 15px;
    /*position: absolute;
    top: 29%;
    left: 38%;*/
    /* color: #fff;*/
    /* align-items: center;*/
    text-align: left;
  }
  .error-head p {
    max-width: 100%;
    text-align: left;
    padding: 0 20px;
    line-height: 1.8;
    font-size: 1.0rem;
  }
/*-----------------------------------------------------
WordPress / ニュース一覧 / カテゴリーページ固有スタイル
------------------------------------------------------*/
.news-item {
    flex-direction: column; /* まずは縦並びを維持 */
    align-items: flex-start;
    padding: 10px 0;
  }
.news-item-header { /* 新しいコンテナを作成 */
    display: flex;
    align-items: baseline; /* ベースラインで揃える */
    margin-bottom: 5px; /* タイトルとの間に少しスペース */
    width: 100%; /* 親要素の幅いっぱいに */
  }
.news-date {
    /*width: auto;*/
    margin-right: 10px; /* カテゴリーとの間にスペース */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }
.news-category {
    /*width: auto;*/
    margin-right: 0; /* タイトルとのスペースは親要素で行う */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }
.news-title {
    font-size: 0.9rem;
    line-height: 2.0;
    margin-bottom: 0; /* 下マージンは不要 */
    width: 100%; /* 親要素の幅いっぱいに表示 */
  }

/*
---------------------------------------------------------------------------
WordPressシングルニュースページ固有スタイル
---------------------------------------------------------------------------
*/

/*
---------------------------------------------------------------------------
WordPressコラム一覧　固有スタイル
---------------------------------------------------------------------------
*/
  .card-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .card-link {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .card-image-wrapper {
    aspect-ratio: auto;
  }
  .card {
    height: auto;
  }
  .post-title {
    font-size: 2rem;
  }
/*-----------------------------------------------------
WordPress / ニュース一覧 / カテゴリーページ固有スタイル
------------------------------------------------------*/
  .column-item {
    flex-direction: column; /* まずは縦並びを維持 */
    align-items: flex-start;
    padding: 10px 0;
  }
  .column-item-header { /* 新しいコンテナを作成 */
    display: flex;
    align-items: baseline; /* ベースラインで揃える */
    margin-bottom: 5px; /* タイトルとの間に少しスペース */
    width: 100%; /* 親要素の幅いっぱいに */
  }
  .column-date {
    /*width: auto;*/
    margin-right: 10px; /* カテゴリーとの間にスペース */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }
  .column-category {
    /*width: auto;*/
    margin-right: 0; /* タイトルとのスペースは親要素で行う */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }
  .column-title {
    font-size: 0.9rem;
    line-height: 2.0;
    margin-bottom: 0; /* 下マージンは不要 */
    width: 100%; /* 親要素の幅いっぱいに表示 */
  }
/*
---------------------------------------------------------------------------
WordPressコラム　シングルページ固有スタイル
---------------------------------------------------------------------------
*/
  .single-column-content img {
    max-width: 100%;
    height: auto;
    /*max-height: 250px;*/
    object-fit: cover;
  }
  .single-column-content .column-category {
    margin-right: 20px;
  }
  single-column-content .cat_date {
    margin-bottom: 10px;
  }
  single-column-content .column-meta {
    flex-direction: column; /* 要素を縦に並べる */
    align-items: end;
  }
  single-column-content .tags {
    margin-top: 15px;
  }
/* .featured-image-wrapper {
    max-height: 250px;
  }
  .featured-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を維持して、親要素を埋めるように表示 
  }*/
/* Wordpress Popular Posts Plug-in */
  .popular-posts-list .wpp-list {
    flex-direction: column;
  }
  .wpp-info {
    width: auto;
    max-width: 100%;
  }
  .wpp-date {
    margin-top: 40px;
  }
/*
---------------------------------------------------------------------------
WordPressページネーション固有スタイル
---------------------------------------------------------------------------
*/
  .single-post-navigation .button,.return-list .button {
    padding: 8px 20px;
  }
/*-----------------------------------------------------
@media screen and (max-width: 768px) END
------------------------------------------------------*/
}