@charset "UTF-8";
/*
Theme Name: TRILOGY.JP
Description: Corporate site
Theme URI:
Author: Shingo Takahashi by Trilogy Corporation
Author URI:
Version:1.0
License:
License URI: */

/*
---------------------------------------------------------------------------
Trilogy Corporation 共通スタイルシート
---------------------------------------------------------------------------
*/

/* Font Awesomeの読み込み */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" media="print" onload="this.media='all'");

/*
---------------------------------------------------------------------------
調整スタイル
---------------------------------------------------------------------------
*/
/* 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; }
/* 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 !imporant;}
.alnR {text-align:right !important;}
.alnC {text-align:center !important;}

.noB

/*
---------------------------------------------------------------------------
基本スタイル
---------------------------------------------------------------------------
*/
/* アクセントカラーの定義 */
: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 {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  opacity: 1;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
  /* font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}*/
  font-size: 16px;
  -webkit-text-size-adjust: none;
  color: #333; /* 基本の文字色 */
  line-height: 1.6; /* 基本の行間 */
  opacity: 0.01; /* ほぼ透明だけど完全0ではない */
  animation: fadeIn 1.5s ease-in forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0.01;
    }
    1% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
      }
    }



/* 他のページのh1, h2 スタイルは残す */
/*:not(.top) h1 {
  font-size: 2.5rem;
  color: #0068b7;
  margin-bottom: 20px;
  text-align: left;
}

:not(.top) h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}*/

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%にする */
}

/*---------------------------
一覧へ戻るボタン
---------------------------*/
.return-list {
  margin-top: 80px;
}

.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;
}

/*
---------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------
*/
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 {
  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: 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 {
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: baseline; /* center */
}

.breadcrumb li {
  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%;
}

/******************************************
 feature-box&sitemap-item アニメーション 
*******************************************/
/* 各辺の線を担当する疑似要素の共通設定 */
.feature-box::before, .feature-box::after,
.feature-box .dynamic-lines::before, .feature-box .dynamic-lines::after,
.sitemap-item::before, .sitemap-item::after, /* sitemap-item 自身の疑似要素 (上下の線) */
.sitemap-item .dynamic-lines::before, .sitemap-item .dynamic-lines::after /* sitemap-item 内の dynamic-lines の疑似要素 (左右の線) */
{
    content: '';
    position: absolute;
    background: #0068b7;
    transition: transform 0.3s ease-out;
    z-index: 3;
}

/* 上辺 */
.feature-box::before, .sitemap-item::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateX(-100%);
}

/* 下辺 */
.feature-box::after, .sitemap-item::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: translateX(100%);
}

/* 左右の辺のためのラッパー要素 */
.feature-box .dynamic-lines, .sitemap-item .dynamic-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* ★これが非常に重要 */
}

/* 右辺 */
.feature-box .dynamic-lines::before, .sitemap-item .dynamic-lines::before {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    transform: translateY(-100%);
}

/* 左辺 */
.feature-box .dynamic-lines::after, .sitemap-item .dynamic-lines::after {
    bottom: 0;
    left: 0;
    width: 2px;
    height: 100%;
    transform: translateY(100%);
}

/* 各 sitemap-item の基本スタイル */
.sitemap-item {
    position: relative; /* 疑似要素の位置の基準 */
    overflow: hidden; /* ★上下の線がはみ出さないように */
    /* ここに sitemap-item 自体の幅、高さ、padding などを設定 */
    /* 例: */
    /* width: calc(33.333% - 20px);  グリッドレイアウトの場合 */
    /* height: 80px; */
    /* padding: 15px; */
    /* margin: 10px; */
    box-sizing: border-box; /* paddingやborderを幅に含める */
}

/* リンクテキストのスタイル */
.sitemap-item p {
    position: relative; /* リンクテキストが線の上に表示されるように */
    z-index: 4; /* 線より高いz-indexを設定 */
    text-align: center; /* リンクテキストを中央寄せにする場合 */
    /* リンクテキストのpaddingも考慮して線の表示範囲を調整 */
    padding: 10px; /* 例 */
}
.sitemap-item p a {
    display: block; /* リンク全体をクリック可能にする */
    text-decoration: none; /* 下線削除 */
    color: inherit; /* 親から色を継承 */
}


/* 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 { /* ここも .dynamic-lines::before で合っているか確認 */
    transform: translateY(0%);
}

.feature-box:hover .dynamic-lines::after, .sitemap-item:hover .dynamic-lines::after { /* ここも .dynamic-lines::after で合っているか確認 */
    transform: translateY(0%);
}

/*
---------------------------------------------------------------------------
コンタクトバナー
---------------------------------------------------------------------------
*/
/* 未使用にしたコンタクトバナー */
/*.contact-banner {
  background: none;
  padding: 30px 0px;
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

.contact-banner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* transition: opacity 0.3s ease;
}

.contact-banner a:hover img {
  /* opacity: 0.7; 
  transform: scale(1.1); /* ホバー時に画像を1.1倍に拡大 
  transition: transform 0.3s ease-in-out; /* 拡大アニメーションを0.3秒かけて滑らかに 
}*/

.contact-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 {
  display: block;
  max-width: 100%;
}

.contact-banner a:hover {
  opacity: 1;
}

.contact-banner a:hover img {
  transform: scale(1.03); /* ホバー時に画像を1.03倍に拡大 */
  transition: transform 0.3s ease-in-out; /* 拡大アニメーションを0.3秒かけて滑らかに */
}

.contact-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; /* 通常時のアニメーション設定 */
}

/*
---------------------------------------------------------------------------
フッター
---------------------------------------------------------------------------
*/
footer {
  padding: 20px 0 0 0;
  text-align: center;
  font-size: 0.8rem;
  width: 100%;
  box-sizing: border-box;
}

.footer-menu {
  margin: 0;
  padding: 20px;
  border-top: solid 1px #ddd;
}

.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-menu li a {
  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 {
  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: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
}

.pagetop a:hover {
  opacity: 0.7;
}

/*
---------------------------------------------------------------------------
トップページ固有スタイル
---------------------------------------------------------------------------
---------------------------------------------------------------------------
トップページヘッダーイメージ
---------------------------------------------------------------------------
*/
.img-top-head {
  position: relative;
  margin-top: 100px;
  height: 500px;
  overflow: hidden;
}

.img-top-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /*filter: contrast(80%); /* コントラストを80%に下げる（値を調整） */
}

.img-top-head h1 {
  display: flex; /* 子要素を横並びにする */
  white-space: nowrap; /* DX / が改行されないように */
  line-height: 1; /* h1自体の行間を詰める */
  color: #fff;
  position: absolute;
  top: 15%;
  left: 5%;
  font-size: 4.5rem;

  /* 後日検討↓
  /* フォントサイズをvwベースにし、clampで最小・最大を制御 */
  /*font-size: clamp(32px, 4.5vw, 72px); 
  /* パディングもvwベースにすると、h1のブロック自体も相対的に伸縮する */
  /*padding: 1vw 2vw;*/
 
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  text-align: center;
}

.img-top-head .dx {
  font-size: 8rem; /* DX / のフォントサイズ */
  margin-right: 0.2em; /* DX / と Digital の間のスペース */
  
}

.img-top-head .digital-transformation {
  display: flex;
  flex-direction: column; /* 子要素を縦並びにする */
  justify-content: space-between; /* 上下を均等に配置 */
  height: 8.0rem; /* DX / の font-size と同じ高さに設定 */
  font-size: 4.0rem;
  text-align: left;
}

.img-top-head .digital {
  display: block; /* span をブロック要素にする */
}

.img-top-head .transformation {
  display: block; /* span をブロック要素にする */
}

.img-top-head p.first-txt {
  color: #fff;
  position: absolute;
  bottom: 35%;/* top: 48%; */
  left: 6%;
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
}

.img-top-head p.second-txt {
  color: #fff;
  position: absolute;
  bottom: 10%;/* top: 60%; */
  left: 6%;
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.5); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
}

/*
---------------------------------------------------------------------------
トップページ概要幅
---------------------------------------------------------------------------
*/
.top-overview {
  max-width: 1300px;
  margin: 50px auto; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px;*/
  box-sizing: border-box;
}

/*
---------------------------------------------------------------------------
トップページキャッチコピー
---------------------------------------------------------------------------
*/
.top-overview .catch {
  text-align: center;
  padding: 0;
  background: none;
  max-width: 1300px;
  margin: 50px auto;
}

.top-overview .catch h2 {
  font-size: 300%;
  font-weight: bold;
  color: #0068b7;
  margin: 30px auto;
  padding: 0;
  text-align: center;
  border: none;
}

.top-overview .catch p {
  line-height: 2.0
}

/*
---------------------------------------------------------------------------
トップページ height300px Box共通
---------------------------------------------------------------------------
*/
.top-service, .top-recruit, .top-partner {
  /* max-width: 1300px; */
  margin: 0 auto 50px;
  padding: 0 ;
  box-sizing: border-box;
}

.top-service .feature-box, .top-recruit .feature-box, .top-partner .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;
}

/* 各辺の線を担当する疑似要素 */
/* セレクタを .box から .top-corp .feature-box に変更 */
.top-service .feature-box::before,.top-service .feature-box::after,.top-service .feature-box .dynamic-lines::before,.top-service .feature-box .dynamic-lines::after,
.top-corp .feature-box::before,.top-corp .feature-box::after,.top-corp .feature-box .dynamic-lines::before,.top-corp .feature-box .dynamic-lines::after,
.top-recruit .feature-box::before,.top-recruit .feature-box::after,.top-recruit .feature-box .dynamic-lines::before,.top-recruit .feature-box .dynamic-lines::after,
.top-partner .feature-box::before,.top-partner .feature-box::after,.top-partner .feature-box .dynamic-lines::before,.top-partner .feature-box .dynamic-lines::after {
  content: ''; /* 疑似要素には必須 */
  position: absolute;
  background: #0068b7; /* ボーダーの色 */
  transition: transform 0.3s ease-out; /* transform の変化にtransitionを設定 */
  z-index: 3; /* 他の要素より手前に表示するため */
}

/* 上辺 */
.top-service .feature-box::before, .top-corp .feature-box::before, .top-recruit .feature-box::before, .top-partner .feature-box::before { /* セレクタを変更 */
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(-100%); /* 初期状態は左に隠しておく */
}

/* 下辺 */
.top-service .feature-box::after, .top-corp .feature-box::after, .top-recruit .feature-box::after, .top-partner .feature-box::after { /* セレクタを変更 */
  bottom: 0;
  right: 0; /* 右から左へ表示するため */
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(100%); /* 初期状態は右に隠しておく */
}

/* 左右の辺のためのラッパー要素 */
/* セレクタを .box から .top-service .feature-box に変更 */
.top-service .feature-box .dynamic-lines, .top-corp .feature-box .dynamic-lines, .top-recruit .feature-box .dynamic-lines, .top-partner .feature-box .dynamic-lines {
  position: absolute; /* この要素自体も absolute にしておく */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* この要素には overflow: hidden; は不要です */
}

/* 右辺 */
.top-service .feature-box .dynamic-lines::before, .top-corp .feature-box .dynamic-lines::before, .top-recruit .feature-box .dynamic-lines::before, .top-partner .feature-box .dynamic-lines::before { /* セレクタを変更 */
  top: 0;
  right: 0; /* 右端に配置 */
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(-100%); /* 初期状態は上に隠しておく */
}

/* 左辺 */
.top-service .feature-box .dynamic-lines::after, .top-corp .feature-box .dynamic-lines::after, .top-recruit .feature-box .dynamic-lines::after, .top-partner .feature-box .dynamic-lines::after { /* セレクタを変更 */
  bottom: 0; /* 下端に配置 */
  left: 0;
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(100%); /* 初期状態は下に隠しておく */
}

/* hover時のアニメーション */
/* セレクタを .box から .top-service .feature-box に変更 */
.top-service .feature-box:hover::before, .top-corp .feature-box:hover::before, .top-recruit .feature-box:hover::before, .top-partner .feature-box:hover::before {
  transform: translateX(0%); /* 左から右へ */
}

.top-service .feature-box:hover::after, .top-corp .feature-box:hover::after, .top-recruit .feature-box:hover::after, .top-partner .feature-box:hover::after {
  transform: translateX(0%); /* 右から左へ */
}

.top-service .feature-box:hover .dynamic-lines::before, .top-corp .feature-box:hover .dynamic-lines::before, .top-recruit .feature-box:hover .dynamic-lines::before, .top-partner .feature-box:hover .dynamic-lines::before {
  transform: translateY(0%); /* 上から下へ */
}

.top-service .feature-box:hover .dynamic-lines::after, .top-corp .feature-box:hover .dynamic-lines::after, .top-recruit .feature-box:hover .dynamic-lines::after, .top-partner .feature-box:hover .dynamic-lines::after {
  transform: translateY(0%); /* 下から上へ */
}

.top-service .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;
  /* clip-path: polygon(70 0, 70% 0, 100% 100%, 0% 100%); /* 反対側にはpolygon指定しない */
  display: flex;
  align-items: center;
}

.top-service .feature-text-left, .top-recruit .feature-text-left, .top-partner .feature-text-left {
  width: 100%;
  padding-left: 80px;
}

.top-service .feature-text-left h3, .top-recruit .feature-text-left h3, .top-partner .feature-text-left h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0068b7;
}

.top-service .feature-text-left p, .top-recruit .feature-text-left p, .top-partner .feature-text-left p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.top-service .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%);  /* 反対側にはpolygon指定しない */
}

/* PC表示時の画像スタイル */
.top-service .feature-image img, .top-recruit .feature-image img, .top-partner .feature-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* 「詳しく見る」ボタンのスタイル */
.top-service .btn-detail, .top-recruit .btn-detail, .top-partner .btn-detail {
  display: inline-block;
  margin-top: 40px;
  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;
}

.btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}

.btn-detail .arrow {
  /*color: #0068b7;*/
  margin-left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: middle;
}

/*
---------------------------------------------------------------------------
トップページ 会社情報 height420px Box
---------------------------------------------------------------------------
*/
.top-corp {
  /* max-width: 1300px; */
  margin: 0 auto 50px;
  padding: 0 ;
  box-sizing: border-box;
}

.top-corp .feature-box {
  position: relative;
  width: 100%;
  height: 420px;
  margin-bottom: 30px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
  /* cursor: pointer; */
  display: flex;
  align-items: stretch;
}

.top-corp .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;
   /* clip-path: polygon(70 0, 70% 0, 100% 100%, 0% 100%); /* 反対側にはpolygon指定しない */
  display: flex;
  align-items: center;
}

.top-corp .feature-text-left {
  width: 100%;
  padding-left: 80px;
}

.top-corp .feature-text-left h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0068b7;
}

.top-corp .feature-text-left h4 {
  font-size: 2.0rem;
  font-weight: bold;
  color: #000;
  margin: 10px 0;
}

.top-corp .feature-text-left ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-corp .feature-text-left p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.top-corp .feature-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.9;
  clip-path: polygon(44.8% 0, 100% 0, 100% 100%, 0% 100%);  /* 反対側にはpolygon指定しない */
}

/* PC表示時の画像スタイル */
.top-corp .feature-image.top-corp-image .top-corp-image-content {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* 「詳しく見る」ボタンのスタイル */
.top-corp .btn-detail {
  display: inline-block;
  margin-top: 30px;
  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;
  cursor: pointer; /* .dynamic-lines との組み合わせ対策 */
}

.btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}

.btn-detail .arrow {
  /*color: #0068b7;*/
  margin-left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: middle;
}

/* 未使用にした横並びBOX */
/* .services {
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1300px;
  margin: 0 auto;
}

.services h2 {
  color: #4C4948;
  font-weight: bold;
  font-size: 1.8rem;
  margin: 30px 0 30px 8px;
}

.services h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.service-boxes {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

figure.service-box {
  position: relative;
  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;
}

figure.service-box a {
  text-decoration: none;
}

figure.service-box a:hover {
  opacity: 0.6;
}

figure.service-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.service-box figcaption a {
  color: #0068b7;
  font-size: 1.2rem;
}

figure.service-box img {
  width: 100%;
  height: auto;
}

figure.service-box h3 {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

figure.service-box h3 a {
  color: #4c4948;
  text-decoration: none;
}

.service-box hr {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #6795b4;
}

.service-description {
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 0;
}
*/
/*
---------------------------------------------------------------------------
ニュース一覧（トップページ）
---------------------------------------------------------------------------
*/
.news {
  max-width: 100%;
  /* max-width: 1300px; */
  margin: 0 auto 50px;
  padding: 20px 60px 10px 60px;
  /*padding-bottom: 30px;*/
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.news h2 {
  /*padding: 40px 60px 10px 60px;*/
  color: #0068b7;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
}

.news h2 small {
  float: right;
  padding-top: 10px;
  color: #333;
  font-weight: normal;
  font-size: 0.5em;
  margin-right: 0.5rem;
}

 .news p {
  font-size: 0.95rem;
  line-height: 1.6;
  /* padding-left: 60px; */
  /* margin-bottom: 25px;*/
}

.news ul {
  list-style: none;
  padding: 0 0;
  margin: 0;
}

.news li {
  /*padding: 10px 0;
  border-bottom: 1px solid #ddd;*/
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}

.news li:last-child {
  border-bottom: none;
}

.news .news-date {
  /* font-size: 0.9rem;
  color: #777;
  margin-right: 10px; */
  width: auto;
  flex-shrink: 0;
  color: #777;
  margin-right: 20px;
}

.news .news-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: normal;
}

.news .news-title a {
  /* color: #333;
  text-decoration: none;
  font-weight: bold; */
  color: #0068b7;
  text-decoration: none;
  position: relative;
  overflow: hidden; /* 追加: アニメーションがはみ出さないように */
}

.news .news-title a:hover {
  /* text-decoration: underline; */
  text-decoration: none;
  opacity: 1;
}

.news .news-title a::after {
  content: '';
  position: absolute;
  width: 0; /* 初期状態は非表示 */
  height: 2px;
  bottom: -3px;
  left: 0; /* 初期位置は左端 */
  background-color: #0068B7;
  transition: width 0.3s ease;
}

.news .news-title a:hover::after {
  width: 100%; /* ホバー時に幅を広げる */
}

.news .news-category {
  /* font-size: 0.9rem;
  color: #0068b7;
  display: inline-block;
  margin-right: 10px; */
  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;
}

/*
---------------------------------------------------------------------------
サービスページ固有スタイル
---------------------------------------------------------------------------
*/
.service-head {
  position: relative; /* 親要素に relative を追加 */
}

.service-head-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.service-head h1 {
  font-size: 3.5rem;
  color: #fff;
  /* margin: 40px auto; 
  text-align: left; */
  text-align: center;
  position: absolute;
  top: 50%; /* 25%;*/
  left: 50%; /*16.3%;*/
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.1); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.service-overview {
  max-width: 1300px;
  margin: 80px auto 50px !important; /* 上マージンをパンくずリストの下に合わせる */
  padding: 0 !important;
  box-sizing: border-box;
}

.service-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;
}

.service-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.service-details {
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0 ;
  box-sizing: border-box;
}

/* .service-details {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}*/

/*.service-features {
  padding: 0 20px;
  max-width: 1300px;
  margin: 0 auto;
}*/

.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;
}

/*-----------------------------------------------------
グラデーションは保留要素
------------------------------------------------------*/
/*.gradation {
    position: relative;
}

.gradation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}*/

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
.service-head-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

.service-head 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;
  }

.service-overview {
    max-width: 100%;
    margin: 50px auto;
    padding: 0 10px !important;
  }

.service-overview h2 {
    font-size: 1.5rem !important;
  }

.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; /* 中央揃え */
  }

  .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; /* ボタンを中央に配置 */
  }

  .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
    margin-bottom: 0;
  }

/* 未使用にした横並びBOX */
/* 
  .services h2 {
    margin: 20px 0;
    font-size: 1.5rem;
  }

  .service-boxes {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 100%;
    padding: 0;
  }

  figure.service-box {
    width: 100%;
    margin: 0;
  }

  figure.service-box figcaption {
    font-size: 1rem;
    padding: 5px;
    top: 5px;
    left: 5px;
    right: 5px;
  }
*/
} /* @madeia screen and ( max-width: 768px ) end */

/*
---------------------------------------------------------------------------
ITコンサルティング固有スタイル
---------------------------------------------------------------------------
*/
.consul-head {
    position: relative; /* 子要素（h1と画像）の絶対配置の基準となる */
    /*margin-top: 100px; /* トップページに合わせて調整（必要であれば） */
    height: auto; /* ★ビューポート60vwの高さの60%に設定。これでどのディスプレイでも適切な高さを維持しやすくなります */
    /*max-height: 500px; /* PCなど大きい画面で高くなりすぎないように最大高さを制限 */
    overflow: hidden; /* コンテンツがsectionから溢れないように */
}

/* 画像を囲むdivは、親（.consul-head）の高さいっぱいに広げます */
.consul-head-image {
    width: 100%;
    height: 100%; /* 親要素.consul-headの高さいっぱい */
}

/* 画像自体も、親要素.consul-head-imageの高さいっぱいにする */
.consul-head-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングして領域いっぱいに表示 */
    object-position: center;
}

/* ★★★ h1のセレクタを修正 ★★★ */
/* h1は.consul-head の2番目の子divの中にあるので、正しいセレクタを指定します */
.consul-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: nowrap; は削除！ */
    white-space: normal; /* ★h1内のテキストは改行を許可 */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    width: 100%; /* 親要素に対して幅を設定（例: 90%） */
    max-width: 800px; /* テキストが広がりすぎないように最大幅を設定 */
    
    font-size: 3.5rem; /* ★ビューポートの幅に応じてフォントサイズを調整（レスポンシブ対応） */
    /*min-font-size: 24px; /* 最小フォントサイズを設定して小さくなりすぎないように（必要であれば） */
    /*max-font-size: 56px; /* 最大フォントサイズを設定して大きくなりすぎないように（必要であれば） */
}

/* ★★★ h1内のspan（キャッチコピー）のスタイルを修正 ★★★ */
.consul-head > div:last-of-type h1 .catch {
    display: block; /* ★spanをブロック要素にして、「ITコンサルティング」の下で改行させる */
    font-size: 1.5rem; /* ★ビューポートの幅に応じてフォントサイズを調整 */
    line-height: 1.4; /* 行間 */
    margin-top: 0.5em; /* メインタイトルとの間に余白 */
    font-weight: normal; /* 太さを調整（必要であれば） */
    white-space: normal; /* 強制的に改行を許可 */
    text-align: center; /* キャッチコピーも中央寄せ */
}

.consul-overview {
  max-width: 1300px;
  margin: 80px auto 50px !important; /* 上マージンをパンくずリストの下に合わせる */
  padding: 0 !important;
  box-sizing: border-box;
}

.consul-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;
}

.consul-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

/* 画像と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; /* 画像より上に */
}

.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-details {
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0 ;
  box-sizing: border-box;
}

/* .consul-details {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}*/

/*.consul-features {
  padding: 0 20px;
  max-width: 1300px;
  margin: 0 auto;
}*/

.consul-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;
}

.consul-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;
}

.consul-details .feature-text-left {
  display: inline-block;
  width: 100%;
  padding-left: 0;
}

.consul-details .feature-text-left h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
  color: #0068b7;
}

.consul-details .feature-text-left p {
  font-size: 1.0rem;
  line-height: 0.7;
  margin-bottom: 30px;
}

.consul-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指定しない */
}

.consul-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表示時の画像スタイル */
.consul-details .feature-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* 「詳しく見る」ボタンのスタイル */
.consul-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;
}

.consul-details .btn-detail:hover {
  background-color: #0068b7;
  color: #fff;
  opacity: 1;
}

.consul-details .btn-detail .arrow {
  /*color: #0068b7;*/
  margin-left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  display: inline-block;
  vertical-align: middle;
}

/*-----------------------------------------------------
グラデーションは保留要素
------------------------------------------------------*/
/*.gradation {
    position: relative;
}

.gradation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}*/

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
.consul-head-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

.consul-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;
  }

.consul-head > div:last-of-type h1 .catch {
    font-size: 1.4rem;
}

.consul-overview {
    max-width: 100%;
    margin: 50px auto;
    padding: 0 10px !important;
  }

.consul-overview h2 {
    font-size: 1.5rem !important;
  }

.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;
  }


/* その他の要素のレスポンシブ調整例 */
/* 必要

.consul-details .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%;
    /*box-shadow: none; /* スマートフォンでは影を削除 */
    border-radius: 0; /* スマートフォンでは角丸を削除 */
  }

.consul-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; /* 中央揃え */
  }

  .consul-details .feature-text-left {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    /*text-align: center; /* テキスト中央揃え */
    margin-bottom: 0; /* 画像との間に余白を追加 */
    padding: 20px;
  }

  .consul-details .feature-text-left h3 {
    font-size: 1.3rem;
  }

  .consul-details .feature-text-left p {
    line-height: 1.8;
}

  .consul-details .feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: 230px;
    margin-top: 0;
    margin-bottom: 0;
    clip-path: none; /* クリップパスを解除 */
    /* object-fit: contain; */
  }

  .consul-details .feature-image img {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: 230px;
    margin-top: 0;
    margin-bottom: 0;
    clip-path: none; /* クリップパスを解除 */
  }

   .consul-details .btn-detail {
    margin-top: 0;
    margin-right: 0;
    float: right;
    /* margin: 0 auto; /* ボタンを中央に配置 */
  }

  .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
    margin-bottom: 0;
  }

/* 未使用にした横並びBOX */
/* 
  .consuls h2 {
    margin: 20px 0;
    font-size: 1.5rem;
  }

  .consul-boxes {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 100%;
    padding: 0;
  }

  figure.consul-box {
    width: 100%;
    margin: 0;
  }

  figure.consul-box figcaption {
    font-size: 1rem;
    padding: 5px;
    top: 5px;
    left: 5px;
    right: 5px;
  }
*/
} /* @madeia screen and ( max-width: 768px ) end */


/*
---------------------------------------------------------------------------
会社概要ページ固有スタイル
---------------------------------------------------------------------------
*/
.company-head {
  position: relative; /* 親要素に relative を追加 */
}

 .company-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.company-head h1 {
  font-size: 3.5rem;
  color: #fff; /*#3155a6;*/
  text-align: center;
  position: absolute;
  top: 50%; /* 30%; */
  left: 50%; /* 76%; */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.3); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.company-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  padding: 0 0;
  box-sizing: border-box;
}

.company-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.company-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.company-details {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
}

.history-details {
    border-left: 5px solid #0068b7; /* あなたの望むボーダーのスタイル */
    padding-left: 10px;             /* ボーダーと内容の間に余白 */
}

.company-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 {
  /* border-bottom: none; */
}

.company-details .detail-item dt {
  
  padding-left:0;
  font-weight: 600;
  color: #333;
  width: 300px;
  flex-shrink: 0;
  margin-right: 20px;
}

.company-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 {
  margin: 0;
  color: #333;
  flex-grow: 1;
}

.company-details .detail-item dd ul {
  list-style: none;
  padding-left: 0;
}

.arrow {
  /*color: #0068b7;*/
  margin-left: 10px;
  font-size: 1.0rem;
}

.philosophy-container {
    display: flex; /* Flexboxを有効にする */
    justify-content: space-between; /* 子要素間にスペースを均等に入れる */
    align-items: stretch; /* 上端で揃える */
    flex-wrap: nowrap; /* デフォルトは折り返さない */
    max-width: 1300px; /* 必要であればコンテナ全体の最大幅を制限 */
    margin: 0 auto; /* 中央寄せにする場合 */
}

.philosophy-text-content {
    flex: 3; /* ここを '3' に変更 (60% 相当) */
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
}

/* 画像コンテナに背景画像として設定 */
.philosophy-image-content {
    flex: 2; /* ここを '2' に変更 (40% 相当) */
    min-width: 0;
    padding: 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 {
    max-width: 100%; /* 親要素の幅に合わせて画像を縮小 */
    /*height: auto; /* アスペクト比を維持 */
    /*display: block; /* imgの下にできる余白を消すため */
    /*border: 2px solid #0068b7;
}*/

.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;
}

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
.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) の高さに合わせる */
}

.company-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
  }
.company-head h1 {
    /* display: flex;
    white-space: nowrap;
    line-height: 1; */
    font-size: 2.0rem;
    position: absolute;
    top: 50%; /* 18%; */
    left: 50%; /* 38%; */
    color: #fff;transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
  }

.company-overview {
    margin-top: 70px;
    padding: 0 10px;
  }

.company-overview h2 {
    font-size: 1.5rem;
  }

  .company-details {
    display: block; /* モバイルでは縦 ?? ???? */
  }

  .company-details .detail-item {
    padding: 15px 0;
    flex-direction: column;
    align-items: flex-start;
  }

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

  .company-details .detail-item dd {
    padding: 5px 10px;
  }
  .company-details .detail-item dd.map {
    padding: 0;
}

  .philosophy-container {
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 中央に配置 */
  }

  .philosophy-text-content,
  .philosophy-image-content {
    width: 100%; /* スマホでは幅を100%にする */
  }

  .philosophy-image-content {
    /*padding:0;
    margin-bottom:0;
    height: 350px; /* 例：スマホで表示させたい画像の高さを固定 */
    display: none;
  }

  .company-details .detail-item.map-container iframe {
    width: 768px; /* モバイルで全幅表示 */
    max-width: 100%;
    height: 300px; /* モバイルでの高さ */
  }
} /* @madeia screen and ( max-width: 768px ) end */

/*
---------------------------------------------------------------------------
採用情報 ／ パートナー募集固有スタイル
---------------------------------------------------------------------------
*/
.recruit-head, .partner-head {
  position: relative; /* 親要素に relative を追加 */
}

/* .recruit-image, .partner-image {
  margin-bottom: 30px;
} */

.recruit-image img, .partner-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.recruit-head h1, .partner-head h1 {
  /* max-width: 1300px; */
  font-size: 3.5rem;
  color: #fff; /*#3155a6;
  /* margin-bottom: 20px;*/
  text-align: center;
  position: absolute;
  top: 50%; /* 28%; */
  left: 50%; /* 12.3%;*/
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.2); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.recruit-overview, .pertner-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px; */
  box-sizing: border-box;
}

.recruit-overview h2, partner-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.recruit-overview h2 small, partner-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

/*.select {
  padding-top: 30px;
  padding-bottom: 30px;
  max-width: 1300px;
  margin: 0 auto;
}

.select-boxes {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

figure.select-box {
  position: relative;
  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;
}

figure.select-box a {
  text-decoration: none;
}

figure.select-box a:hover {
  opacity: 0.6;
}

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 figcaption a {
  color: #0068b7;
  font-size: 1.2rem;
}

figure.select-box img {
  width: 100%;
  height: auto;
}

figure.select-box h3 {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

figure.select-box h3 a {
  color: #4c4948;
  text-decoration: none;
}

.select-box hr {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #6795b4;
}

.select-description {
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 0;
}*/

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .recruit-image img, .partner-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

  .recruit-head h1, .partner-head h1 {
    /* display: flex;
    white-space: nowrap;
    line-height: 1; */
    font-size: 2.0rem;
    position: absolute;
    top: 50%; /* 18%; */
    left: 50%; /* 38%; */
    transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
  }

  .recruit-overview, .partner-overview {
    margin-top: 70px;
    padding: 0 10px;
  }

  .recruit-overview h2, .partner-overview h2 {
    font-size: 1.5rem;
  }
}

/*
---------------------------------------------------------------------------
問い合わせ固有スタイル
---------------------------------------------------------------------------
*/
.contact-head {
  position: relative; /* 親要素に relative を追加 */
}

.contact-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.contact-head h1 {
  font-size: 3.5rem;
  color: #fff; /*#3155a6; */
  text-align: center;
  position: absolute;
  top: 50%; /* 28%; */
  left: 50%; /* right: 12.3%; */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.2); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.contact-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  padding: 0 0;
  box-sizing: border-box;
}

.contact-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.contact-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.flow {
	display: flex;
	justify-content: center;
}
.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;
  width: 300px;
  flex-shrink: 0;
  margin-right: 20px;
}

.contact-details .detail-item dd {
  margin: 0;
  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に設定 */
  opavicy: 1;
}

/*figure.select-box a {
  text-decoration: none;
  display: block;
}*/

/* select-box 内の全ての<a>タグを最前面に表示 */
/*figure.select-box a {
  position: relative; /* z-indexが効くようにpositionを設定 */
  /*z-index: 10; /* アニメーション要素よりも高いz-indexを設定 */
  /*display: block; /* リンクのクリック範囲を広げるため */
  /*height: 100%; /* 親要素いっぱいに広げる */
/*}*/

/* 画像とテキストのdivもposition: relative; と z-index を設定 */
/*figure.select-box > div {
  /*position: relative;
  z-index: 5; /* リンクよりは低いが、アニメーション要素よりは高くする */
/*}*/
/*
figure.select-box a:hover {
  opacity: 1;
}*/

/*figure.select-box a:hover img {
  transform: scale(1.03); /* ホバー時に画像を1.03倍に拡大 */
  /*transition: transform 0.3s ease-in-out; /* 拡大アニメーションを0.3秒かけて滑らかに */
/*}*/

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 figcaption a {
  color: #0068b7;
  font-size: 1.2rem;
}*/

/*figure.select-box img {
  width: 100%;
  height: auto;
}*/

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 h3 a {
  text-decoration: none;
  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; /*#6495ed;*/ /*#7065A3;*/ /*#6795b4; */
}

figure.select-box .select-description {
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 0;
}

.select-box-link {
    display: block; /* <a>タグをブロック要素にし、親要素の幅いっぱいに広げる */
    text-decoration: none; /* デフォルトの下線を消す */
    color: inherit; /* テキストの色を親から継承させる (必要であれば) */
    height: 100%; /* select-box-link の高さを確保 */
    opacity: 1; /* デフォルトのaタグのopacityを上書きして100%不透明にする */
    transition: opacity 0.3s ease; /* マウスオーバー時のopacity変化を滑らかにする（必要であれば） */
}

/* select-box-link にホバーした時の opacity を調整 (必要であれば) */
.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%;
  box-sizing: border-box; /* paddingやborderをheight/widthに含める場合 */
}

/* ========================================================= */
/* ボーダーアニメーション */
/* ========================================================= */
/* 各辺の線を担当する疑似要素 */
.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: 1; /* z-indexをリンクより低い値に設定 */
  pointer-events: none; /* これが重要！この要素自身がクリックイベントを受け付けないようにする */
}

/* 上辺 */
.select-box::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(-100%); /* 初期状態は左に隠しておく */
}

/* 下辺 */
.select-box::after {
  bottom: 0;
  right: 0; /* 右から左へ表示するため */
  width: 100%;
  height: 2px; /* ボーダーの太さ */
  transform: translateX(100%); /* 初期状態は右に隠しておく */
}

/* 左右の辺のためのラッパー要素 */
.select-box .dynamic-lines {
  position: absolute; /* この要素自体も absolute にしておく */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* z-indexをリンクより低い値に設定 */
  pointer-events: none; /* これが重要！この要素自身がクリックイベントを受け付けないようにする */
}

/* 右辺 */
.select-box .dynamic-lines::before {
  top: 0;
  right: 0; /* 右端に配置 */
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(-100%); /* 初期状態は上に隠しておく */
}

/* 左辺 */
.select-box .dynamic-lines::after {
  bottom: 0; /* 下端に配置 */
  left: 0;
  width: 2px; /* ボーダーの太さ */
  height: 100%;
  transform: translateY(100%); /* 初期状態は下に隠しておく */
}

/* 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%); /* 下から上へ */
}

.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;
    /*height: 200px; /* 例えば、画像の表示領域の高さを固定する */
    /* width: 100%; は通常、ブロック要素なので不要 */
}

.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);
}

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .contact-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

  .contact-head h1 {
    /* display: flex;
    white-space: nowrap;
    line-height: 1; */
    font-size: 2.0rem;
    /* margin: 30px auto;
    padding: 0 10px; */
    position: absolute;
    top: 50%; /* 18%; */
    left: 50%; /* 38%; */
    color: #fff;
    transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
}

  .contact-overview {
    max-width: 100%;
    margin: 50px auto;
    padding: 0 10px !important;
  }

  .contact-overview h2 {
    font-size: 1.5rem;
  }

  .contact-details {
    display: block; /* モバイルでは縦 ?? ???? */
  }

  .contact-details .detail-item {
    padding: 15px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-details .detail-item dt {
    width: 96%;
    margin-bottom: 5px;
    margin-right: 0;
  }

  .contact-details .detail-item dd {
    width: 96%;
    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;
  }
}
/*
---------------------------------------------------------------------------
ポリシーページ固有スタイル
---------------------------------------------------------------------------
*/
.policy-head {
  position: relative; /* 親要素に relative を追加 */
}

.policy-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.policy-head h1 {
  /* max-width: 1300px; */
  font-size: 3.5rem;
  color: #fff; /*#3155a6; */
  text-align: center;
  position: absolute;
  top: 50%; /* 28%; */
  left: 50%; /* 12.3%; */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.1); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

/* .policy-image {
  margin-bottom: 30px;
}*/ 

.policy-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px; */
  box-sizing: border-box;
}

.policy-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.policy-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.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;
}

/*
---------------------------------------------------------------------------
利用規約ページ固有スタイル
---------------------------------------------------------------------------
*/
/* .terms-page {
  max-width: 1300px;
  margin: 80px auto 40px;
  * padding: 0 20px;
  box-sizing: border-box;
}*/

/* .terms-image {
  margin-bottom: 30px;
}*/

.terms-head {
  position: relative; /* 親要素に relative を追加 */
}

.terms-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.terms-head h1 {
  /* max-width: 1300px; */
  font-size: 3.5rem;
  color: #fff; /*#3155a6; */
  text-align: center;
  position: absolute;
  top: 50%; /* 28%; */
  left: 50%; /* 12.3%; */
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.1); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.terms-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px; */
  box-sizing: border-box;
}

.terms-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.terms-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .policy-image img, .terms-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

  .policy-head h1, .terms-head h1 {
    /* display: flex;
    white-space: nowrap;
    line-height: 1; */
    font-size: 2.0rem;
    position: absolute;
    top: 50%; /* 18%; */
    left: 50%; /* 38%; */
    color: #fff;
    transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
  }

  .policy-overview, .terms-overview {
    margin-top: 70px;
    padding: 0 10px;
  }

  .policy-overview h2, .terms-overview h2 {
    font-size: 1.5rem;
  }
}

/*
---------------------------------------------------------------------------
サイトマップページ固有スタイル
---------------------------------------------------------------------------
*/
.sitemap-head {
  position: relative; /* 親要素に relative を追加 */
}

.sitemap-image img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: auto;
}

.sitemap-head h1 {
  font-size: 3.5rem;
  color: #fff; /*#0087af; /*#3155a6; */
  text-align: center;
  position: absolute;
  top: 50%; /* 55%;*/
  left: 50%; /* 43%;*/
  transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
  margin: 0;
  text-shadow: 3px 5px 3px rgba(0, 0, 0, 0.3); /* 水平方向の影、垂直方向の影、ぼかし、色 */
  /* background-color: rgba( 255, 255, 255, 0.3); /* 黒色の透過（透明度はお好みで調整） */
  white-space: nowrap; /* テキストが改行されないように */
  background-color: rgba(128, 128, 128, 0.1); /* グレーの50%透過 */
  padding: 5px 20px; /* 文字と背景ブロックの間の余白 */
  border-radius: 5px;
}

.sitemap-overview {
  max-width: 1300px;
  margin: 80px auto 40px; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px; */
  box-sizing: border-box;
}

.sitemap-overview h2 {
  font-size: 1.8rem;
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  text-align: left;
}

.sitemap-overview h2 small {
  float: right;
  padding-top: 10px;
  font-weight: normal;
  font-size: 0.6em;
  margin-right: 0.5rem;
}

.sitemap-body {
  padding: 0 0;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sitemap-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.sitemap-item {
  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);
  position: relative;
  overflow: hidden;
}

.sitemap-item p {
  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::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #0068b7;
  transition: width 0.3s ease-out;
}*/

.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;
}

/*-----------------------------------------------------
レスポンシブデザイン / max-width: 768px
------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .sitemap-image img {
   width: 100%;
   height: 200px;
   object-fit: cover;
  }

  .sitemap-head h1 {
    /* display: flex;
    white-space: nowrap;
    line-height: 1; */
    font-size: 2.0rem;
    position: absolute;
    top: 50%; /*29%;*/
    left: 50%; /*38%;*/
    transform: translate(-50%, -50%); /* 自身の幅と高さの半分だけ戻す */
    align-items: center;
    padding: 5px 15px;
  }



  .sitemap-overview {
    margin-top: 70px;
    padding: 0 10px;
}

  /*.sitemap-overview h1 {
    font-size: 2rem;
    margin-bottom: 15px;
  }*/

  /*.sitemap-overview .sitemap-image {
    margin-bottom: 20px;
  }*/
  .sitemap-overview h2 {
  font-size: 1.5rem;
  }

  .sitemap-body {
    padding: 0 0;
  }

  .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: 1300px;
  font-size: 3.5rem;
  color: #000; /*#0087af; /*#3155a6;
  /* margin-bottom: 20px;*/
  margin: 50px 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;
}

.error-overview {
  max-width: 1300px;
  margin: 40px auto; /* 上マージンをパンくずリストの下に合わせる */
  /* padding: 0 20px; */
  box-sizing: border-box;
}

/*
---------------------------------------------------------------------------
レスポンシブデザイン / max-width: 768px
---------------------------------------------------------------------------
*/
@media screen and (max-width: 768px) {
  .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;
  }

}

/*
---------------------------------------------------------------------------
レスポンシブデザイン / max-width: 768px
---------------------------------------------------------------------------
*/
/*
---------------------------------------------------------------------------
基本スタイル / max-width: 768px
---------------------------------------------------------------------------
*/

@media screen and (max-width: 768px) {
  body {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

  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;
    /*opacity: 0.9;*/
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;*/
    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: 0;
    /*padding-left: 5px;*/
  }

  .img-top-head {
    margin-top: 60px;
    height: 300px;
  }

  .img-top-head img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    /* object-position: center;*/
  }

  .img-top-head h1 {
    display: flex; /* 子要素を横並びにする */
    /* align-items: flex-start; /* 上端を揃える */
    white-space: nowrap; /* DX / が改行されないように */
    line-height: 1; /* h1自体の行間を詰める */
    /* font-size: 1.8rem; */
    /* top: 15%;
    left: 5%; */
    align-items: center;
  }

.img-top-head .dx {
  font-size: 3.0rem; /* DX / のフォントサイズ */
  margin-right: 0.2em; /* DX / と Digital の間のスペース */
  
}

.img-top-head .digital-transformation {
  display: flex;
  flex-direction: column; /* 子要素を縦並びにする */
  justify-content: space-between; /* 上下を均等に配置 */
  height: 3.0rem; /* DX / の font-size と同じ高さに設定 */
  font-size: 1.5rem;
  text-align: left;
}

  .img-top-head p.first-txt {
    position: absolute;
    font-size: 1.4rem;
    /* top: 40%;
    left: 5%; */
}

  .img-top-head p.second-txt {
    font-size: 1.4rem;
    /*top: 53%;
    left: 5%; */
}

/*
---------------------------------------------------------------------------
トップページ概要幅
---------------------------------------------------------------------------
*/
  .top-overview {
    padding: 0 10px;
  }

/*
---------------------------------------------------------------------------
トップページキャッチコピー
---------------------------------------------------------------------------
*/
  .top-overview .catch {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  .top-overview .catch h2 {
    font-size: 140%;
  }

  .top-overview .catch p {
    font-size: 100%;
    line-height: 2.0;
    padding: 0 10px;
  }

/* 未使用
  .services {
    padding: 20px;
  }
*/

/*
---------------------------------------------------------------------------
トップページ  Box共通
---------------------------------------------------------------------------
*/
  .top-overview .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%; /* ← これを確認または追加 */
    /*box-shadow: none;
    border-radius: 0;*/
  }

  .top-service .feature-image img, .top-recruit .feature-image img, .top-partner .feature-image img {
      height: 230px !important; /* スマホでは高さを自動に */
      object-fit: cover !important; /* スマホでもカバーで良いか、containが良いか確認 */
  }


  .top-overview .feature-img {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
  }
/* .top-overview .feature-image img {
    vertical-align: bottom;
}*/

  .top-overview .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    /* height: auto;*
    clip-path: none; /* クリップパスを解除 */
    /*border: solid 1px #eee;
    border-radius: 5px;*/
    margin-bottom: 10px;
  }

  .top-service, .top-recruit, .top-partner {
    max-width: 100%;
   /*  padding: 0 10px; /* スマートフォン表示では左右のpaddingを10pxに */
  }

  .top-service .feature-box, .top-recruit .feature-box, .top-partner .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%;
    /*box-shadow: none; /* スマートフォンでは影を削除 */
    border-radius: 0; /* スマートフォンでは角丸を削除 */
  }

  .top-service .feature-content, .top-recruit .feature-content, .top-partner .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; /* 中央揃え */
  }

  .top-service .feature-text-left, .top-recruit .feature-text-left, .top-partner .feature-text-left {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    /*text-align: center; /* テキスト中央揃え */
    margin-bottom: 20px; /* 画像との間に余白を追加 */
    padding-left: 20px;
  }

  .top-service .feature-text-left h3, .top-recruit .feature-text-left h3, .top-partner .feature-text-left h3 {
    font-size: 1.5rem;
  }

  .top-service .feature-image, .top-recruit .feature-image, .top-partner .feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
  }

  .top-service .feature-image img, .top-recruit .feature-image img, .top-partner .feature-image img {
    width: 100%;
    height: auto;
    object-fit: contain; /* 画像が全て表示されるように */
  }

  .top-service .btn-detail, .top-recruit .btn-detail, .top-partner .btn-detail {
    margin-top: 10px;
    margin-right: 20px;
    float: right;
    /* margin: 0 auto; /* ボタンを中央に配置 */
  }

/*
---------------------------------------------------------------------------
トップページ 会社情報  Box
---------------------------------------------------------------------------
*/
  .top-corp {
    /* padding: 0 10px; /* スマートフォン表示では左右のpaddingを10pxに */
  }

  .top-corp .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%;
    /*box-shadow: none; /* スマートフォンでは影を削除 */
    border-radius: 0; /* スマートフォンでは角丸を削除 */
  }

  .top-corp .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; /* 中央揃え */
  }

  /* 新しく追加した会社概要画像のクラスに対する指定（より詳細度を上げる場合） */
  .top-corp .feature-image img {
     width: 100%;
     /* height: auto;
     /*object-fit: contain; /* 画像が全て表示されるように */
     height: 300px !important; /* スマホでは高さを自動に */
     object-fit: cover !important; /* スマホでもカバーで良いか、containが良いか確認 */
  }

  .top-corp .feature-text-left {
    width: 100%;
    box-sizing: border-box;
    /*text-align: center; /* テキスト中央揃え */
    margin-bottom: 20px; /* 画像との間に余白を追加 */
    padding-left: 20px;
  }

  .top-corp .feature-text-left h3 {
    font-size: 1.5rem;
  }

  .top-corp .feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
  }

  /*.top-corp .feature-image.top-corp-image .top-corp-image-content {
    width: 100%;
    height: auto;
    object-fit: contain; /* 画像が全て表示されるように */
  /*}*/

  .top-corp .btn-detail {
    margin-top: 30px;
    margin-right: 20px;
    float: right;
    /* margin: 0 auto; /* ボタンを中央に配置 */
  }

.feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: auto;     /* ★★★ 親コンテナの高さを自動に */
    clip-path: none;  /* クリップパスを解除 */
  }

/*.feature-image img, 
  .top-overview .feature-image img { /* .top-overview内のfeature-image imgも同様のスタイルを適用 */
/*  vertical-align: bottom; /* 既存のスタイル */
/*    height: auto !important; /* ★★★ 画像自体の高さを自動にし、PC用スタイルを確実に上書き */
/*    width: 100%;             /* ★★★ 幅を100%に */
/*    object-fit: contain;     /* ★★★ または unset / fill など、表示要件に応じて調整。coverだと高さautoで意図しない見え方になる可能性 */
                               /* object-fit: cover; のままで良い場合はそのままでも可 */
/*}*/

  /*.service-details .feature-image img {
    height: 230px !important; /* スマホでは高さを自動に */
    /*object-fit: cover !important; /* スマホでもカバーで良いか、containが良いか確認 
}*/

/*
---------------------------------------------------------------------------
ニュース一覧（トップページ）
---------------------------------------------------------------------------
*/
  .news {
    position: static;
    width: 100%;
    box-sizing: border-box;
    clip-path: none;
    display: flex;
    flex-direction: column;
    padding: 0 20px 10px 20px;
  }

  .news h2 {
    padding-bottom: 10px;
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 15px;
  }

  .news ul {
    list-style: none;
    padding: 0 0;
    margin: 0;
  }

  .news li {
    /*padding: 10px 0;
    border-bottom: 1px solid #ddd;*/
    flex-direction: column; /* まずは縦並びを維持 */
    align-items: flex-start;
    padding: 10px 0;
    /*display: flex;
    padding: 25px 0;
    border-bottom: 1px solid #eee;
    align-items: baseline;*/
  }

  .news-item-header { /* 新しいコンテナを作成 */
    display: flex;
    align-items: baseline; /* ベースラインで揃える */
    margin-bottom: 5px; /* タイトルとの間に少しスペース */
    width: 100%; /* 親要素の幅いっぱいに */
  }

  .news .news-date {
    /* font-size: 0.9rem;
    color: #777;
    margin-right: 10px; */
    margin-right: 10px; /* カテゴリーとの間にスペース */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }

  .news .news-title {
    font-size: 0.9rem;
    line-height: 2.0;
    margin-bottom: 0; /* 下マージンは不要 */
    width: 100%; /* 親要素の幅いっぱいに表示 */
  }

  .news .news-category {
    /* font-size: 0.9rem;
    color: #0068b7;
    display: inline-block;
    margin-right: 10px; */
    margin-right: 0; /* タイトルとのスペースは親要素で行う */
    margin-bottom: 0; /* 上段なので下マージンは不要 */
    font-size: 0.9rem;
    flex-shrink: 0; /* 幅が狭くなっても縮小しない */
  }

/* 未使用コンタクトバナー */
/* 
  .contact-banner {
    padding: 20px 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;
  }

/*  .service-page {
    padding: 0 10px;
}*/

  .feature-box {
    flex-direction: column; /* スマートフォンでは縦方向（上から下）に配置 */
    height: auto; /* 高さを自動調整 */
    width: 100%; /* ← これを確認または追加 */
    /*box-shadow: none;
    border-radius: 0;*/
  }

  .feature-image {
    position: static; /* 相対配置に戻す */
    width: 100%;
    max-width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
    /* object-fit: contain; */
  }
  .feature-image img, .top-overview .feature-image img {
    vertical-align: bottom;
  }

  .feature-content {
    position: static; /* 相対配置に戻す */
    width: 100%;
    height: auto;
    clip-path: none; /* クリップパスを解除 */
    /*border: solid 1px #eee;
    border-radius: 5px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }

  .philosophy-container {
    flex-direction: column;
    padding: 0 10px;
  }

  .philosophy-text {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .philosophy-text .company-details {
    position: static;
    transform: translateY(0);
    width: 100%;
  }

  .philosophy-text .company-details dd h3 {
    font-size: 1rem;
  }

  .philosophy-text .company-details dd p {
    font-size: 0.9rem;
  }

  .contact-banner {
    width: 100%;
    height: auto;
    /* padding: 0 10px;*/
    gap: 10px;
  }
  .contact-banner img {
    border-radius: 0;
  }
}