@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

:root {
  --jp-bg: #fdfdfb;
  --jp-primary: #1c2e3d;   /* 藍色 */
  --jp-accent: #6a8a82;    /* 和の落ち着いた緑 */
  --jp-muted: #4b5563;
    --reveal-distance: 24px;
    --reveal-duration: 800ms;
    --reveal-ease: cubic-bezier(.2,.9,.2,1);
}

body{
	font: 15px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
  	background: linear-gradient(to bottom right, #eaf6ff, #ffffff);
	opacity: 0;
	transition: opacity 0.8s ease-in-out, background 2s ease-in-out;
}

body.night {
  background: radial-gradient(
    circle at 50% 20%,
    #1a2b5c 0%,     /* 夜空の中心に近い明るめの青 */
    #132155 40%,    /* 少し濃い群青 */
    #0c1738 80%,    /* 深めの青 */
    #020819 100%    /* 外縁は黒に近いが青みを残す */
  );
  transition: background 3s ease;
  position: relative;
  overflow-x: hidden;
}

/* 夜モード時の文字色を明るくする */
body.night h1,
body.night h2,
body.night h3,
body.night p,
body.night span,
body.night button,
body.night footer {
  color: #e8f0ff;
}

body.fade-in {
      opacity: 1;
}

/* ===============================
    ページ遷移時のフェードアウト
=============================== */
body.fade-out {
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
}



a{
	color: #fff; /* 白 */
	/* 黒い影を濃くして可読性アップ */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
	text-decoration: none;
	font-size: 1rem;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

/* ヘッダー
------------------------------------------------------------*/
#header{
    position: relative;
    overflow:hidden;
    width:100%;
    height:568px;

}

#header .slideshow {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 568px;
  overflow: hidden;
}

#header .slideshow img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 568px;
  object-fit: cover; /* 縦横比を崩さずに全体に収める */
  opacity: 0;  /* ← デフォルトで透明 */
  transform: translateX(10px) scale(1.05); /* 右に少しずれて拡大 */
  transition: opacity 1.5s ease-in-out, transform 2.5s ease-in-out;
  z-index: 0; /* すべての画像のデフォルト */
}

#header .slideshow img.active {
  opacity: 1;
  transform: translateX(0) scale(1); /* 中央で元のサイズ */
  z-index: 1; /* アクティブ画像を最前面に */
}

#slogan{
	position: absolute;
	z-index: 10; /* スローガンを前面に */
  	top: 50%;
	width: 100%;
	-webkit-transform: translate(0, -50%);
  	transform: translate(0, -50%);
	color: #fff;
	line-height: 1.2;
	text-align: center;
}

#slogan h1{
	font-size: 40px;
	font-family: 'Pacifico', cursive;
	margin-bottom: 20px;
	font-weight:normal;
}

#slogan h2{
	font-size: 24px;
	font-weight:normal;
}

.bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.bubbles div {
  position: absolute;
}

/* シャボン玉 */
.bubbles span {
  display: block;
  width: var(--size, 60px);
  height: var(--size, 60px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.9),
    var(--color1, rgba(173,216,230,0.4)),
    var(--color2, rgba(255,182,193,0.35)),
    rgba(255,255,255,0.05)
  );
  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.8),       /* 内側のハイライトを強め */
    inset -5px -5px 20px rgba(255,255,255,0.2),  /* 立体感の強化 */
    0 0 10px rgba(255,255,255,0.3),
    0 0 25px var(--color1, rgba(135,206,250,0.5)), /* 外側のカラー光を強化 */
    0 0 35px var(--color2, rgba(255,182,193,0.4)),
    0 0 45px rgba(255,255,0,0.25);               /* 黄色系光を少し強め */
    border: 1px solid rgba(255,255,255,0.3);
    background-clip: padding-box;
    opacity: 0;
    transform: scale(var(--scale,1)) translate(0,0);
    will-change: transform, opacity;
}

/* 親要素：左下移動 */
@keyframes bubbleMove {
  0%   { transform: translate(0, 0); opacity: 0; }
  5%   { opacity: 1; }
  100% { transform: translate(var(--translateX), var(--translateY)); opacity: 0; }
}

/* 子要素：左右ふわふわ揺れ */
@keyframes bubbleSway {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(var(--swayX)) translateY(var(--swayY)); }
  75%      { transform: translateX(calc(var(--swayX) * -1)) translateY(calc(var(--swayY) * -1)); }
}

/* 光り方 */
@keyframes bubbleGlow {
  0%, 100% { opacity: 0.7; filter: brightness(1.1); }
  50%      { opacity: 1; filter: brightness(1.6); }
}

.day-particle {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,180,0.6), rgba(255,220,180,0.3), rgba(255,255,255,0));
  box-shadow: 0 0 10px rgba(255,255,200,0.5), 0 0 20px rgba(255,220,180,0.3);
  mix-blend-mode: screen;
  will-change: transform, top;
}

/* 文字コントラストコンテナ */
.auto-contrast {
  color: #fff;
  text-shadow: 
    0 0 4px rgba(200,200,255,0.6),
    0 0 8px rgba(180,180,255,0.5),
    0 0 12px rgba(160,160,255,0.4),
    0 0 16px rgba(140,140,255,0.3),
    0 0 20px rgba(120,120,255,0.2);
  transition: text-shadow 0.5s ease;
  animation: shadowBreath 4s ease-in-out infinite alternate;
}

@keyframes shadowBreath {
  0% {
    text-shadow: 
      0 0 4px rgba(200,200,255,0.4),
      0 0 8px rgba(180,180,255,0.35),
      0 0 12px rgba(160,160,255,0.3),
      0 0 16px rgba(140,140,255,0.25),
      0 0 20px rgba(120,120,255,0.2);
  }
  50% {
    text-shadow: 
      0 0 6px rgba(220,220,255,0.7),
      0 0 12px rgba(200,200,255,0.6),
      0 0 18px rgba(180,180,255,0.5),
      0 0 24px rgba(160,160,255,0.4),
      0 0 30px rgba(140,140,255,0.3);
  }
  100% {
    text-shadow: 
      0 0 4px rgba(200,200,255,0.4),
      0 0 8px rgba(180,180,255,0.35),
      0 0 12px rgba(160,160,255,0.3),
      0 0 16px rgba(140,140,255,0.25),
      0 0 20px rgba(120,120,255,0.2);
  }
}

  /* ベース（初期は隠す） */
  .reveal{
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-ease),
                transform var(--reveal-duration) var(--reveal-ease);
    will-change: opacity, transform;
  }

  /* 表示時のクラス */
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* オプション：遅延を簡単に設定 */
  .reveal[data-delay="100"]{ transition-delay: 100ms; }
  .reveal[data-delay="200"]{ transition-delay: 200ms; }
  .reveal[data-delay="300"]{ transition-delay: 300ms; }
  /* 必要に応じて増やす */

  /* アクセシビリティ：モーション制限がある場合はアニメを無効化 */
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 0 50px 0;
	text-align: center;
	font-size: 12px;
	font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif !important; /* bodyのclassで指定されたfont-familyを無視 */
}

/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

img{
	max-width: 100%;
	width: 100%;
	height: auto;
}

rt {
  font-size: 0.7em;   /* 小さめにする */
  color: #666;        /* 落ち着いた色に */
}

section{clear:both;}

section h1{
	font-size: 25px;
	font-weight:normal;
	text-align: center;
}

section h2{
	font-size: 15px;
	font-weight:normal;
	text-align: center;
	margin-top: -5px;
}


body.washi-page {
  background-color: #fdfaf3; /* 和紙のベースカラー */
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  line-height: 1.8;
  position: relative;
  min-height: 100vh; /* bodyに高さを持たせる */
  overflow-x: hidden;
}

body.washi-page::before {
  content: "";
  position: fixed; /* スクロールしても固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景として表示 */
  pointer-events: none;

  /* 和紙風の模様を複数重ねる */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.05) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%);
  background-size: 12px 12px, 18px 18px, 40px 40px, 40px 40px;
  opacity: 0.5;

  animation: washiMove 60s linear infinite;
}

@keyframes washiMove {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40px, -20px); }
  100% { transform: translate(0, 0); }
}

.inner {
  margin: 0 auto;   /* ← これを追加で中央寄せ */
}

/* PC版: col2 を横並び */
.inner .col2 {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 左右の余白 */
}

.inner .col2 li {
  width: calc(50% - 10px); /* gapを考慮して2カラムに収める */
  margin: 0;
}

.txt{
  z-index: 5;
}

.txt h2{
	padding: 0 0 20px !important;
}

.jp-style {
  background: var(--jp-bg);
  padding: clamp(48px, 6vw, 80px) 20px;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  color: var(--jp-primary);
  line-height: 1.8;
}

/* 見出しラッパー */
.heading {
  position: relative;
  height: 180px; /* 見出しの高さ */
  text-align: center;
}

/* 背景文字 */
.heading h1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-size: 4vw;               /* 画面幅に応じて自動縮小 */
  max-width: 90vw;              /* はみ出し防止 */
  line-height: 1.1;
  overflow: hidden;
  font-weight: bold;
  color: rgba(0,0,0,0.05);
  z-index: 1;
  margin: 0;
  white-space: nowrap;
  animation: floatText1 3s ease-in-out infinite alternate;
}

/* 前面文字 */
.heading h2 {
  position: absolute;
  top: 55%;
  left: 52%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 600;
  color: #333; /* 濃いブルー */
  text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
  margin: 0;
  animation: floatText2 4s ease-in-out infinite alternate;
  white-space: nowrap; /* 折り返し防止 */
}

/* アニメーション */
@keyframes floatText1 {
  0% { transform: translate(-50%, -50%) rotate(-7deg) translateY(0px); }
  50% { transform: translate(-50%, -50%) rotate(-7deg) translateY(-5px); }
  100% { transform: translate(-50%, -50%) rotate(-7deg) translateY(0px); }
}

@keyframes floatText2 {
  0% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(5px); }
  100% { transform: translate(-50%, -50%) translateY(0px); }
}

.service-list_company,
.service-list_contents,
.service-list_recruit {
  position: relative;
  margin-top: 90px;
  Margin-bottom: 150px;
  padding: 270px 20px;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  color: #2c3e50;
  overflow: hidden;
  z-index: 0;
  /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  深みのあるブルーグラデーション背景 */
}

/* 背景画像を設定（ぼかし＆暗めオーバーレイ） */
.service-list_company::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      135deg,
      rgba(15, 32, 39, 0.6),
      rgba(32, 58, 67, 0.5),
      rgba(44, 83, 100, 0.4)
    ),
    url("../images/company.jpg") center/cover no-repeat;
  background-blend-mode: overlay; /* グラデと画像を融合 */
  filter: blur(3px) brightness(1.5);
  transform: scale(1.2); /* ぼかしの縁を防ぐため拡大 */
  z-index: -2;
}
.service-list_contents::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      135deg,
      rgba(15, 32, 39, 0.6),
      rgba(32, 58, 67, 0.5),
      rgba(44, 83, 100, 0.4)
    ),
    url("../images/contents.jpg") center/cover no-repeat;
  background-blend-mode: overlay; /* グラデと画像を融合 */
  filter: blur(2px) brightness(1);
  transform: scale(1.2); /* ぼかしの縁を防ぐため拡大 */
  z-index: -2;
}
.service-list_recruit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(
      135deg,
      rgba(15, 32, 39, 0.6),
      rgba(32, 58, 67, 0.5),
      rgba(44, 83, 100, 0.4)
    ),
    url("../images/recruit.jpg") center/cover no-repeat;
  background-blend-mode: overlay; /* グラデと画像を融合 */
  filter: blur(2.5px) brightness(1);
  transform: scale(1.2); /* ぼかしの縁を防ぐため拡大 */
  z-index: -2;
}

/* 光のグラデーションを上に重ねる */
.service-list_company::after,
.service-list_contents::after,
.service-list_recruit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(135, 206, 250, 0.25), transparent 70%),
              radial-gradient(circle at 80% 70%, rgba(173, 216, 230, 0.2), transparent 70%);
  z-index: -1;
}

/* 装飾効果：淡い光
.service-list::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 40%, rgba(135, 206, 250, 0.35), transparent 70%),
              radial-gradient(circle at 80% 60%, rgba(173, 216, 230, 0.25), transparent 70%);
  backdrop-filter: blur(60px);
  z-index: 0;
}
 */

.service-list__inner {
  max-width: 960px;
  margin: 0 auto;
}

.service-list__head {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 0 0 10px;
}

/* 背景的な大見出し（半透明＆下側） */
.service-list__head h1 {
  Font-family: 'Montserrat', sans-serif;
  font-size: 10rem;
  font-weight: bold;
  Font-style: italic;
  color: rgba(0, 150, 170, 0.55); /* 濃いスカイブルー */
  letter-spacing: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, 10%); /* 中央より少し下に配置 */
  width: auto;
  Text-align: center;
  pointer-events: none;
  user-select: none;
  line-height:0.9em;
}

.service-list__head h2 {
  position: relative;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #fff; /* 白文字でコントラストUP */
  margin-bottom: 20px;
  display: inline-block;
  Text-shadow: 15px 10px 20px rgba(0, 0, 0, 50%);
  transform: translate(0%, 10%); /* 中央より少し下に配置 */
}

.service-list__head h2::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, #4b6cb7, #00c6ff);
  margin-top: 8px;
  border-radius: 2px;
}

.service-list__items {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 28px;
  padding-top: 40px;
  Padding-right:40px;
}

.service-list__items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding-left: 16px;
  margin-bottom: 60px;
}

/* 矢印（三角形） */
.service-list__items li::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--jp-accent);
  animation: arrowRelay 3s infinite;
  opacity: 0.5;
  transition: border-top-color 0.5s ease;
}

/* 01, 02, 03 で時間差をつける */
.service-list__items li:nth-child(1)::after {
  animation-delay: 0s;
}
.service-list__items li:nth-child(2)::after {
  animation-delay: 1s;
}
.service-list__items li:nth-child(3)::after {
  animation-delay: 2s;
}

/* 矢印のリレーアニメーション */
@keyframes arrowRelay {
  0%   { border-top-color: var(--jp-accent); opacity: 0.5; }
  20%  { border-top-color: var(--accent); opacity: 1; }
  40%  { border-top-color: var(--jp-accent); opacity: 0.5; }
  100% { border-top-color: var(--jp-accent); opacity: 0.5; }
}

/* 最後の li は矢印なし */
.service-list__items li:last-child::after {
  content: none;
}

/* 縦のラインを和風アクセントに */
.service-list__line {
  display: inline-block;
  width: 4px;
  height: 100%;  /* ← これを追加 */
  background: var(--jp-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.service-list__num {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

/* 見出し */
.service-list__content h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.service-list__content p {
  margin: 0;
  color: var(--jp-muted);
  font-size: 15px;
}

/* mainnav
------------------------------------------------------------*/

#mainnav.changeNav{
	background: rgba(255,255,255,.9);
	border-bottom: 1px solid #d1d1d1;
}

.company-name{
	float: left;
	margin-left: 10px;
  	display: none; /* 最初は非表示 */
  	transition: opacity 0.4s ease;
}

.company-name li{
	margin-bottom: -8px;
}

.company-name img{
	max-width: 110px;
	height: auto;
	display: block;
	margin: -15px auto;
}

/* SEC01 MAIN_MESSAGE
------------------------------------------------------------*/

.main_message{
	width: 87%;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 40px;
	text-align: center;
}

/* 虹色テキスト（グラデーションが右→左に流れる） */
.rainbow-text {
  /* 基本レイアウト */
  font-weight: 400;                 /* 見出しらしく */
  background: linear-gradient(
    90deg,
    #ff004d 0%,
    #00d4ff 30%,
    #00d4ff 60%,
    #4b3cff 90%,
    #ff004d 100%
  );
  background-size: 300% 100%;       /* 幅を大きくして左右に移動させる */
  -webkit-background-clip: text;    /* 文字でグラデをクリップ（Safari/Chrome） */
  background-clip: text;            /* 標準 */
  -webkit-text-fill-color: transparent; /* 文字色を透明にして背景を文字に見せる */
  color: transparent;               /* フォールバック */
  animation: rainbow-slide 50s linear infinite;
  /* 見た目微調整 */
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* 少し立体感 */
}

/* アニメーション（背景位置を左→右へ移動） */
@keyframes rainbow-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* アクセシビリティ: 動きを抑えたいユーザー対策 */
@media (prefers-reduced-motion: reduce) {
  .rainbow-text {
    animation: none;
    -webkit-text-fill-color: #1c2e3d; /* アクセント色にフォールバック */
    color: #1c2e3d;
    -webkit-background-clip: unset;
    background-clip: unset;
    background: none;
    text-shadow: none;
  }
}

/* SEC01 MESSAGE
------------------------------------------------------------*/

#sec01{
	background-image: url("../images/messageback.png");
	background-size: cover;      /* 画面いっぱいに拡大・縮小 */
    	background-position: center; /* 中央に配置 */
   	background-repeat: no-repeat;/* 繰り返しをなくす */
}

#sec01 .padding-top {
	padding-top: 30px;
}

#sec01 .vision{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}

#sec01 h2{
	padding: 0 0 20px !important;
}


/* SEC02 CONTENTS
------------------------------------------------------------*/

.flex{
	display:flex;
	flex:1;
}

.wrap{
    	align-items: stretch;   /* 高さを揃える */
	clear: both;
	width: 100%;
}

.bg{
	line-height: 0;
}

.view-more-btn {
	margin-top: 20px;
	padding: 12px 26px;
	min-width: 120px;  /* 最小幅 */
  	max-width: 180px;  /* 最大幅 */
	background: transparent;
	color: #1e1e1e;
	border: 2px solid #fff;
	border-radius: 30px;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	float: right;
}

.view-more-btn i {
      margin-left: 10px; /* 矢印とテキストの間にスペースを作る */
}

.view-more-btn:hover {
      background-color: #fff;
      color: #1e1e1e;
      transform: translateY(-2px);
}

/* SEC04 STORY & SUCCESS
------------------------------------------------------------*/
#secInfo{
  position: relative;
  background: none;
  overflow: hidden;
  padding:20px 0;
  color: #ffffff;
  text-shadow: 
    0 1px 2px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3),
    0 4px 8px rgba(0,0,0,0.2);
}

/* 昼背景 */
.secInfo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220%; /* スクロール余白 */
    background-image: url("../images/bgSec04.png");
    background-size: cover;
    background-position: center center;
    z-index: -1;
    will-change: transform;
}

/* 夜背景 */
#secInfo.night .secInfo-bg {
    background-image: url("../images/bgSec04_night.png");
}

#secInfo img{
	width: 50%;
	height: auto;
}

#secInfo.profile{ 
	margin: 20px 20px 20px auto;
}

#secInfo .profile h2{
	text-align:left;
	margin-left:10px;
	font-family: 'Noto Sans JP', sans-serif;
	/* 黒い影を濃くして可読性アップ */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

#secInfo .profile p{
	text-align:left;
	margin-left:10px;
	font-family: 'Noto Sans JP', sans-serif;
	/* 黒い影を濃くして可読性アップ */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.left-rail {
  position: relative;  /* フロー内に収める */
  width: 100%;
  Margin-top:25px;

  /* 水色背景に馴染む淡い半透明背景 */
  background: rgba(255, 255, 255, 0.1); /* 白の淡い透過 */
  backdrop-filter: blur(3px); /* 背景をぼかして文字を際立たせる */
  border-radius: 8px;         /* 角丸 */
  padding: 15px 0;         /* 内側余白 */
  box-sizing: border-box;
}

/* リスト配置 */
.left-rail__list{
  list-style: none;   /* ●を消す */
  margin: 0;
  padding-left: 5px; /* 箇条書きの余白 */
  display: flex;     /* 縦並び */
}

/* 個々のリンク */
.left-rail__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;             /* 白文字 */
  background: none;        /* 背景なし */
  padding: 0;              /* 余白も消す */
  border-radius: 0;
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  /* 黒い影を濃くして可読性アップ */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  box-shadow: none;        /* 影なし */
  transition: color .2s;
}

/* ホバー / フォーカス効果 */
.left-rail__link:hover,
.left-rail__link:focus {
  color: #fff;
  background: none;
  transform: none;
  box-shadow: none;
}

/* キーボードフォーカスの明示 */
.left-rail__link:focus {
  box-shadow: 0 0 0 3px rgba(106,138,130,0.18), 0 8px 20px rgba(43,74,74,0.12);
}


/* サブリスト */
.left-rail__sublist {
  list-style: disc;       /* 箇条書きマーク */
  padding-left: 15px;     /* 親よりインデント */
  margin: 6px 0 0 0;

}

.left-rail__sublist a {
   white-space: nowrap; /* 折り返さない */
 }

/* サブリンク */
.left-rail__sublink {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: normal;
  font-family: 'Noto Sans JP', sans-serif;
  /* 黒い影を濃くして可読性アップ */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.left-rail__sublink:hover {
  color: #ccc;
}

/* company.html
------------------------------------------------------------*/

#sec01_company{
	margin-top:-90px;
	padding-bottom:90px;
}

#sec02_company .padding-top {
	padding-top: 30px;
}


#sec02_company{
	background-image: url("../images/visionback.jpg");
	background-size: cover;      /* 画面いっぱいに拡大・縮小 */
    	background-position: center; /* 中央に配置 */
   	background-repeat: no-repeat;/* 繰り返しをなくす */
}

#sec02_company .vision{
	width: 55%;
	margin: 0 auto;
	padding-bottom: 80px;
}

/* 背景画像を設定 */
#sec03_company .wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 半透明オーバーレイで文字を見やすく */
#sec03_company .overlay {
  inset: 0; /* top:0; bottom:0; left:0; right:0; と同義 */
  background: rgba(0, 60, 100, 0.5); /* 青系半透明 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

/* テキスト中央配置 */
#sec03_company .txt {
  max-width: 800px;
  color: #fff;
}

#sec03_company .timeline {
  margin: 0 auto;
  padding-left: 0;
}

#sec03_company .timeline-item {
  position: relative;
  margin: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 15px;
}
#sec03_company .timeline-item:last-child {
  border-bottom: none;
}

#sec03_company .timeline-item span.date {
  font-weight: bold;
  color: #00ffff; /* アクセントカラー */
  font-size: 1.2em;
  display: block;
  margin-bottom: 5px;
}

#sec03_company .timeline-item p {
  font-size: 1.1em;
  color: #f0f0f0;
  margin: 0;
}

#sec04_company{
  width: 85%;
  Max-width:800px;
  margin: 0 auto;
  padding-top: 50px;
}

#sec04_company dl{
  margin: 0;
  padding: 0;
}

#sec04_company img{
	width: 20%;
	height: auto;
}

#sec04_company dt,
#sec04_company dd {
  margin: 0;
  padding: 20px 0;
  font-size: 15px;
  line-height: 1.6em;
  display: inline-block;
  vertical-align: top;
}

#sec04_company dt{
  width: 35%;
  margin-right: 10%;
  text-align: right;
  font-weight: bold;
}

#sec04_company dd{
  width: 55%;
  text-align: left;
}

/* dt+dd のペアをラップして仕切り線を引く */
#sec04_company dl > div {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
}

/* 最後のペアだけ線を消す */
#sec04_company dl > div:last-child {
  border-bottom: none;
}

#sec04_company header{
	display: none;
}

/* 代表取締役エリア */
#sec04_company .ceo-info {
  display: flex;
  align-items: center;
  gap: 20px; /* 名前と写真の間隔 */
  flex-wrap: wrap; /* スマホで折り返し */
}

#sec04_company .ceo-info img {
  width: 120px; /* 適度なサイズ */
  height: auto;
  border-radius: 50%; /* 丸く表示 */
  flex-shrink: 0;
}

#sec05_company{
	padding-top: 50px;
	width: 100%;
	margin: 0 auto;
  	text-align: center; /* タイトルを中央揃え */
	padding-bottom:100px;
}

#map{
  max-width: 1200px;   /* 大きめの上限を設定 */
  margin: 0 auto;      /* 中央寄せ */
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9; /* ← これだけでOK */
}

#map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.profile-top{
	position: relative;	
}

/* contents.html
------------------------------------------------------------*/

#sec01_contents{
	margin-top:-90px;
	padding-bottom:90px;
}

#sec03_contents{
	margin-top:90px;	
}

/* グリッド全体の枠 */
.grid-block {
  margin: 40px 0;
  padding: 0 16px; /* スマホ時の左右余白 */
}

.grid-block h3 {
  margin-bottom: 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a3c66; /* 深いブルー */
  text-align: left;
}

/* グリッド配置 */
.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 最小150px～最大4列 */
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 個別のliをカード風に */
.grid-list li {
  border: 1px solid #d6e4f0;
  padding: 18px 15px;
  text-align: center;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a3c66;
  background: #f8fbfd; /* デフォルト薄ブルー */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ブルー・グリーン系のグラデーションカラー */
.grid-list li:nth-child(4n+1) { background: #f0f7fc; } /* 薄いブルー */
.grid-list li:nth-child(4n+2) { background: #eafaf5; } /* 薄いグリーン */
.grid-list li:nth-child(4n+3) { background: #f5faff; } /* さらに淡いブルー */
.grid-list li:nth-child(4n+4) { background: #edf9f3; } /* さらに淡いグリーン */

/* ulリスト全体のスタイル */
.magic-list {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 800px;
}

/* li 魔法風の文字エフェクト */
.magic-list li {
  font-size: 1.2rem;
  text-align: center;
  margin: 12px 0;
  position: relative;
  opacity: 0;
  animation: magicFade 1.5s forwards;
}

/* 順番に出てくる */
.magic-list li:nth-child(1) { animation-delay: 0.2s; }
.magic-list li:nth-child(2) { animation-delay: 0.4s; }
.magic-list li:nth-child(3) { animation-delay: 0.6s; }
.magic-list li:nth-child(4) { animation-delay: 0.8s; }
.magic-list li:nth-child(5) { animation-delay: 1s; }
.magic-list li:nth-child(6) { animation-delay: 1.2s; }
.magic-list li:nth-child(7) { animation-delay: 1.4s; }

/* 魔法っぽい光の演出 */
@keyframes magicFade {
  0% {
    opacity: 0;
    text-shadow: 0 0 10px rgba(255,255,200,0.7), 0 0 20px rgba(255,200,150,0.5);
    transform: scale(1.2);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255,255,200,0.9), 0 0 30px rgba(255,200,150,0.7);
    transform: scale(1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 5px rgba(255,255,200,0.4), 0 0 10px rgba(255,200,150,0.2);
  }
}

/* recruit.html
------------------------------------------------------------*/

#sec01_recruit{
  margin-top: -90px;
  padding-bottom:90px;
}

#sec03_recruit,
#sec04_recruit,
#sec05_recruit{
  margin-top: 20px;
}

.job-container h1 {
    text-align: center;
    margin-bottom: 20px;
}

.job-container h2 {
    text-align: center;
    margin-bottom: 30px;
}

.job-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.job-item:last-child {
    border-bottom: none;
}

.job-item .label {
  flex: 0 0 140px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--jp-accent);
}

.job-item .label i {
    margin-right: 8px;
    color: #007bff;
}

.job-item .content {
  flex: 1;
  font-size: 0.95rem;
  color: #444;
}

/* 複数行の内容を整形 */
.job-item .content p {
    line-height: 1.6;
}

/* job-container とフォームは適度に最大幅を設s定 */
.job-container,
#sec05_recruit form {
  box-sizing: border-box;
}

.ready-block {
　width:100%;
  display: flex;
  align-items: center;
  text-align: center; /* ← 念のため追加 */
  justify-content: center;
  align-items: center;
  height: 60vh;
  background: #111;
  color: #fff;
  font-size: 2.2rem;
  letter-spacing: 0.2em;
  font-family: "Noto Serif JP", serif;
}

.ready-block p {
  position: relative;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

@keyframes floatText {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-8px); opacity: 0.8; }
}

#sec04_recruit {
	background: #fafafa;
	text-align: center;
	font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
	color: #333;
	padding-left: 29px;
	padding-right: 29px;
}

/* ---------- h3デザイン ---------- */
#sec04_recruit h3 {
	font-size: 1.55rem;
	font-weight: 600;
	display: inline-block;
	position: relative;
	padding-bottom: 12px;
	margin: 40px 0 30px;
	background: linear-gradient(to right, #0078ff, #00bcd4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: fadeUp 0.8s ease-out both;
}

/* 下線をグラデーションに */
#sec04_recruit h3::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 80px;
	height: 3px;
	background: linear-gradient(to right, #0078ff, #00bcd4);
	border-radius: 3px;
}

/* ---------- pデザイン ---------- */
#sec04_recruit p {
	font-size: 1rem;
	line-height: 2;
	color: #555;
	max-width: 680px;
	margin: 0 auto;
	opacity: 0;
	animation: fadeIn 1.2s ease-out 0.4s forwards;
}

/* ---------- アニメーション ---------- */
@keyframes fadeUp {
	from {opacity: 0; transform: translateY(20px);}
	to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

#sec05_recruit {
  color: #fff;
  overflow: hidden; /* 子の絶対配置を親内に収める */
  padding: 100px 0;
  text-align: center;
  position: relative;
}

/* 背景アニメーション：ゆるやかに動くグラデーション */
#sec05_recruit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #001f3f, #004d7a, #008793, #00bf72, #a8eb12);
  background-size: 400% 400%;
  animation: gradientMove 20s ease infinite;
  z-index: 0;
  filter: brightness(0.6);
}

/* 光の粒子アニメーション */
#sec05_recruit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* 背景グラデより前、headingより後ろ */
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.3), transparent 10%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.25), transparent 10%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.2), transparent 10%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.15), transparent 10%),
    radial-gradient(circle at 90% 30%, rgba(255,255,255,0.2), transparent 10%);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: shimmerMove 6s linear infinite;
filter: blur(15px);
opacity: 0.6; /* shimmerMove内の0.9を1に変更してもOK */
}

/* グラデーション移動アニメーション */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 光が揺れる＆位置がゆらめく */
@keyframes shimmerMove {
  0%, 100% { opacity: 0.4; }
  25% { opacity: 0.8; }
  50% { opacity: 0.2; }
  75% { opacity: 1; }
}

#sec05_recruit .heading {
	z-index: 5; /* ← 背景より前に出す */
}

#sec05_recruit .heading h1 {
	color: rgba(255,255,255,0.15); /* 白ベースで薄く */
	z-index: 1;
}

#sec05_recruit .heading h2 {
	color: #fff;
	z-index: 2;
	left: 50%;
}

/* ===============================
   エントリーカード
================================ */
.entry-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  z-index: 5;
}

.entry-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 40px 30px;
  width: 340px;
  transition: all 0.4s ease;
  backdrop-filter: blur(8px);
  z-index: 4;
}

.entry-card:hover {
  transform: translateY(-6px);
  background: rgba(0, 200, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 200, 255, 0.25);
}

.entry-card h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
  color: #00c6ff;
}

.entry-card p {
  font-size: 0.95rem;
  color: #e0e0e0;
  margin-bottom: 20px;
  white-space: nowrap;
}

.entry-btn {
  display: inline-block;
  Max-width: 130px;
  padding: 12px 28px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s;
}

.entry-btn:hover {
  background: linear-gradient(90deg, #0094ff, #0056b3);
}

#sec05_recruit fieldset {
    border: none;
    padding-bottom: 60px;
    margin: 0;
}

#sec05_recruit legend {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}

#sec05_recruit label {
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}

#sec05_recruit input, textarea, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

#sec05_recruit input:focus, textarea:focus {
    border-color: #66afe9;
    outline: none;
}

#sec05_recruit button {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
}

#sec05_recruit button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}



/* RESPONSIVE 設定(スマホ対応)
------------------------------------------------------------*/

/* ===== Extra Small スマホ（〜480px） ===== */
@media (max-width: 480px) {
	.heading {
		height: 120px;
	}
	.heading h1 {
    		font-size: 8vw;   /* 幅が狭い機種でさらに縮小 */
		top: 30%;
	}
	.heading h2 {
		font-size: 2rem;
		top: 48%;
		left: 50%;
	}
	.service-list__head {
    		padding: 100px 5% 80px;
  	}
}

/* ===== Small スマホ（〜600px） ===== */
@media (max-width: 600px) {
	#sec03 h1 {
		font-size: 2rem;
	}

	#sec03 h2 {
		font-size: 1.4rem;
	}

	#sec03 .timeline-item span.date {
		font-size: 1em;
	}

	#sec03 .timeline-item p {
		font-size: 0.95em;
	}

	#map iframe{
	  width: 96% !important;
	  height:280px;
	  left: 2%;
	}

	.rainbow-text {
		font-size: 1.4rem; /* 必要に応じて調整 */
		line-height: 1.2;
		padding-left:3px;
	}

	#secInfo .inner .col2 {
		flex-direction: column; /* 縦積み */
	}

	#sec02_company .vision{
		width: 90%;
	}

	#sec06_company .inner .col2 {
		flex-direction: column; /* 縦積み */
	}

	.inner {
		padding-bottom:30px;
	}

	/* 右側が空いてしまう原因怪しい */
	.inner .col2 li {
		width: 100%;
	}

	.left-rail__list {
		flex-direction: row;
		gap: 12px;
		justify-content: center;
		margin-left: 20px;
		padding-right: 0;
	}

	.job-container,
	#sec05_recruit form {
		max-width: 100%; /* 画面幅いっぱいに */
		padding: 20px;   /* 内側余白を少し小さく */
	}

	.col2 {
		display: block;
		width: 100%;
	}

	.col2 li {
		width: 100%;            /* li を画面幅いっぱいに */
		margin: 10px 0;         /* 上下の隙間 */
	}

	.job-item {
		flex-direction: column; /* 縦並び */
	}

	.job-item .label {
		flex: 0 0 auto;   /* 固定幅解除 */
		margin-bottom: 5px; /* ラベルとコンテンツの間のスペース */
	}

	.job-item .content {
		flex: 1 1 auto;
	}

	.recruit-hero {
		padding: 60px 16px;
	}

	#sec05_recruit {
		padding: 60px 20px;
	}

	.entry-links {
 		flex-direction: column;
		gap: 30px;
		align-items: center;
	}

	.entry-card {
		width: 90%;
		padding: 30px 20px;
		Padding-right:10px;
	}

	.entry-card h3 {
		font-size: 1.4rem;
	}

	.entry-card p {
		font-size: 0.9rem;
	}

	.entry-btn {
		width: 100%;
	}

	.service-list_company::before,
	.service-list_contents::before,
	.service-list_recruit::before {
		background-size: contain; /* ← 画像を全体表示 */
  		aspect-ratio: 16 / 9; /* ← 背景画像に合わせて高さを自動調整 */
	}

	.service-list_company,
	.service-list_contents,
	.service-list_recruit {
  		aspect-ratio: 16 / 9; /* ← 背景画像に合わせて高さを自動調整 */
		margin-bottom:0;
		padding:10px !important;
	}

	.service-list__head {
		padding-top:20px !important;
	}

	.service-list__head h1 {
		position: relative !important; /* 絶対配置を無効化 */
		left: 0 !important;
		transform: translate(0%, 170%) !important; /* 中央より少し下に配置 */
		font-size: clamp(2.5rem, 14vw, 5.5rem) !important;
	}
}


/* ===== Medium スマホ横・小型タブレット（〜768px） ===== */
@media (max-width: 768px) {
	a{
		color: #000; /* 黒 */
		text-shadow: none;
	}
 	.heading {
		height: 140px;
	}
	.heading h1 {
    		font-size: 10vw;   /* スマホでさらに縮小 */
		top: 35%;
	}
	.heading h2 {
		font-size: 1.4rem;
		top: 50%;
		left: 50%;
	}
	.left-rail {
		margin-top:0px;
	}

	.service-list_company,
	.service-list_contents, 
	.service-list_recruit{
		padding: 0;
	}
	.service-list_company::before,
	.service-list_contents::before,
	.service-list_recruit::before {
		background-size: contain; /* ← 画像を全体表示 */
	}

	#slogan h1{
		font-size: 31px;
	}

	#slogan h2{
		font-size: 16px;
	}

  	a#menu{
  		display: inline-block;
  		position: relative;
  		width: 40px;
  		height: 40px;
  		margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 60px;
		z-index: 100;
	}

	#mainnav{
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav .company-name{
		padding-top: 25px;
		max-width: 90px;
	}

	#mainnav .panel ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav .panel li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		font-weight: 400;
	}

	#mainnav .panel li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#mainnav.changeNav #menuBtn{
  		background: #000;
	}

	#mainnav.changeNav #menuBtn:before, #mainnav.changeNav #menuBtn:after{
  		background: #000;
	}

	.col3 li{
		margin: 0 auto;
		display: block;
		max-width: 288px;
	}

    	.secInfo-bg {
        	height: 140%;           /* ← もっと縦を大きくする（重要） */
        	background-position: 98% 90%; /* ← 下側を最大表示 */
        	background-size: auto 140%;     /* ← 縦サイズだけ伸ばす */
    	}
}

/* 横向きスマホ向け（幅 600px 〜 900px） */
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
    #sec02 .wrap {
        display: flex;             /* 横並びに揃える */
        flex-direction: row;       /* 水平方向 */
        align-items: stretch;      /* 高さを揃える */
        gap: 10px;                 /* div同士の隙間を調整 */
    }

    #sec02 .txt {
        flex: 1;                   /* テキストを可能な限り広げる */
        min-width: 0;              /* overflow を防ぐ */
    }

    #sec02 .bg {
        flex: 1;                   /* 画像部分も同じ比率 */
        min-width: 0;
    }
}

/* ===== Large タブレット縦・横（〜1024px） ===== */
@media (max-width: 1024px) {
  .heading {
    height: 180px;
  }
  .heading h1 {
    font-size: 12vw;
  }
  .heading h2 {
    font-size: 1.8rem;
    top: 57%;
    left: 52%;
  }
  .service-list_company,
  .service-list_contents,
  .service-list_recruit {
    padding: 200px 40px; /* スマホより少し余裕を持たせる */
  }

  .service-list_company::before,
  .service-list_contents::before,
  .service-list_recruit::before {
    background-size: cover; /* ← 画面いっぱいに拡大 */
    background-position: center;

  }

  .service-list__head h1 {
    font-size: clamp(8rem, 12vw, 12rem);
    transform: translate(-50%, 15%);
  }

  .service-list__head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
  }

  .vMid {
	padding:0 10px;
  }

  .bg img {
    	width: auto;      /* 幅は自由 */
  	height: auto;
   	max-height: 100%; /* タブレット幅でもはみ出さない */
  	display: block;
 	object-fit: cover; /* JSで高さ変更時に伸び歪み防止 */
  }

}

/* ===== X-Large 小型PC・大型タブレット（〜1199px） ===== */
@media(max-width: 1199px){
	.inner {
		margin: 0 auto;
		box-sizing: border-box;
	}

	.job-item {
 		padding-left: 10px;  /* 左端の見え方を調整 */
		padding-right: 10px;
	}

	/* section h2{
		padding: 50px 0 20px 0;
	}*/
	#sec01 h2{
		padding: 70px 0 20px;
	}
	#sec02_recruit .inner{
		padding: 0 30px; /* ← 左右に余白を追加 */
	}
}

/* ===== PC以上（1200px〜） ===== */
@media(min-width: 1200px){
	.inner{
		width: 1024px;
	}
	/*section h2{
		padding: 70px 0 20px;
	}*/
	.txt h2{
		padding: 0 0 20px !important;
	}
	#sec04_recruit .inner {
		width: 1024px;
		padding-bottom: 120px;
	}
	#sec04_recruit h3 {
		font-size: 1.8rem;
	}
	#sec04_recruit p {
		font-size: 1.05rem;
	}
	.col2 li{
		width: 40%;
		padding: 0 3%;
		vertical-align: top;
	}
	.vMid{
		padding:0 110px;
	}
}

@media(min-width: 800px){
	body{
		font-size:14px;
	}
	
  	a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav{
		position:fixed;
		top: 0;
		width:100%;
		z-index:500;
	}

	#mainnav ul{
		text-align: right;
		padding-right: 30px;
	}

	#mainnav li{
		display: inline-block;
		padding: 45px 10px 20px;
		font-size: 14px;
		font-weight: 300;
	}

	
	#mainnav.changeNav li{
		padding: 20px 10px;
	}

	#mainnav.changeNav a{
		color: #000; /* 黒 */
		text-shadow:none;
	}

	/* SEC02 MESSAGE
	-----------------*/
	.txt, .bg{
		width: 50%;
		float: left;
		display: table;
	}

	#sec02_02 .txt, #sec02_02 .bg{
		float: right;
	}

	.vMid{
		display: table-cell;
		vertical-align: middle;
	}
	
	/* SEC03 SERVICE MESSAGE STORY
	-----------------*/
	.col3{
		text-align: center;
	}

	.col3 li{
		display: inline-block;
		width: 30%;
		padding: 0 1.5%;
		margin-bottom: 0;
		vertical-align: top;
		text-align: left;
	}
	
	/* SEC05 PROFILE
	-----------------*/
	#sec05{
		padding-top: 120px;
	}
	
  	#footer{
		padding: 30px 10px 70px 0;
	}

    	.secInfo-bg {
		height: 270%;           /* ← もっと縦を大きくする（重要） */
        	background-position: 0% 90%; /* ← 下側を最大表示 */
    	}

}