@charset "UTF-8";
/* Body */
body {
	font-family:  "Noto Sans JP", sans-serif;
	background-color: #f2f2f2;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: normal;
}
a {
  text-decoration: none;
}
/* Container */
.container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
}
.tit{
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-left: 6px solid #005B94;
	margin-bottom: 20px;
}

.tit h2{
	margin: 0;
    font-size: clamp(20px, 2vw, 28px);
	font-weight: 600;
	letter-spacing: 1px;	
}
.sub_tit {
	margin-left: 1%;
}
.sub_tit_pol {
}
/* Hero Section */
.hero{
	position:relative;
	z-index: 5;
}
.hero_img{
	width:100%;
	height:auto;
	display:block;
}
.hero_img_notxt{
	width:100%;
	height:auto;
	display:block;
	margin-top: -1%;
}
.hero_header{
    font-family: "Noto Serif JP", serif;position:absolute;
	transform:translate(-50%,-50%);
	color: #005B94;
	text-align: left;
	line-height: 50px;
	letter-spacing: 5px; 
}
.hero_pro{
    position:relative;
}

.hero_pro h1 {
    position:absolute;
    top:50%;
    right:3%;
    transform:translateY(-50%);
    color:#fff;
    letter-spacing:2px;
}
.hero_bc{
	background-color: #e4e4eb;
	margin-top: -300px;
	height: 500px;
    background-image: url("../../img/lighthouse.webp"); 
  /* [重要] 画像を右側・中央に配置する */
  background-position: right bottom; 
  background-repeat: no-repeat; 
  /* [重要] 縦横比を維持したまま、コンテナを隙間なく埋めるサイズにする */
  background-size: cover;	
}
/* Heroアニメ　*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.hero-container {
	position: relative;
	width: 100%;
	max-width: 100%; /* 1200px制限を解除し、画面幅100%に広げます */
	aspect-ratio: 1200 / 700; /* 絵コンテの比率（3:1）を維持しながら可変 */
    overflow: hidden;

}
/* 各画像要素の共通基本スタイル（コンテナ幅に完全一致） */
.anime-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;  /* コンテナの幅（100%）と完全に同じサイズにする */
      height: 100%; /* コンテナの高さ（100%）と完全に同じサイズにする */
      /* fill にすることで、画像のトリミング（切り取り）を発生させず、
         コンテナのサイズ＝画像の表示サイズ として完全に一致させます。
      */
      object-fit: fill; 
      pointer-events: none;
    }
/* ① 右からマークが表示される (1_mark.webp) */

 .layer-mark {
	opacity: 0;
	transform: translateX(100px); /* 初期位置：右にずらす */
	animation: slideInMark 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards;
}
@keyframes slideInMark {
to {
	opacity: 1;
	transform: translateX(0);
}
}
/* ② 1_markの下・右から左へ伸びる線 (2_line.webp) */

.layer-line {
	opacity: 0;
/* mask-image（または clip-path の代わり）として、
「右端から左端に向けて直線的に表示範囲を広げる」アニメーションを適用します。
これで画像自体の上下位置を壊さずに、右から左へ線が伸びる演出が可能です。
*/
	clip-path: inset(0 0 0 100%); /* 初期状態：左側を100%削る（＝何も見えない） */
	animation: drawLineFromRight 0.8s ease-out 1.0s forwards;
}
@keyframes drawLineFromRight {
0% {
	opacity: 0;
	clip-path: inset(0 0 0 100%); /* 右端（100%の位置）に縮んでいる状態 */
}
10% {
	opacity: 1;
		}
100% {
	opacity: 1;
	clip-path: inset(0 0 0 0%); /* 全開（左端 0% まで線が伸びきった状態） */
}
}
/* -----------------------------------------------

③ 左端に表示されるだけ (3_spark.webp)

----------------------------------------------- */
.layer-spark {
      z-index: 1;
      opacity: 0;
      /* 初期状態：左側（画面外方向）にマイナス50pxずらし、少し小さく(scale)しておく */
      transform: translateX(-1px) scale(0.7);
      /* cubic-bezierを使って、シュッと飛び出して少しだけ行き過ぎて戻るような勢いを表現 */
      animation: popSparkFromLeft 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.0) 1.7s forwards;
    }

@keyframes popSparkFromLeft {
      0% {
        opacity: 0;
        transform: translateX(1px) scale(0.7);
      }
50% {
opacity: 1;
/* 一瞬だけ元のサイズより少し大きくして弾ける感を出す */
transform: translateX(1px) scale(1.1); 
}
100% {
opacity: 1;
/* 本来の正しい位置・サイズにピタッと収まる */
transform: translateX(0) scale(1);
}
}
/* -----------------------------------------------

④ 文字が表示される (4_logo.webp)

----------------------------------------------- */
.layer-logo {
	opacity: 0;
	transform: scale(0.95);
	transform-origin: 30% 30%;
	animation: fadeInLogo 0.6s ease-out 2.0s forwards;
}
@keyframes fadeInLogo {
to {
	opacity: 1;
	transform: scale(1);
}
}	
/*breadcrum  */
.breadcrumb {
  margin-top : 0.25%;
  margin-left: 0.25%;
  margin-bottom: 2%;
  padding: 0;
  list-style: none;	
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: normal;
  font-size: 15px;	
}

.breadcrumb li:after {
  /* >を表示*/
  content: '▶';
  padding: 0 0.2em;
  color: #555;
  font-size: 10px;	
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: gray;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* Stats Gallery */
.gallery {
	clear: both;
	display: inline-block;
	background-color: #FFF;
	/* [disabled]min-width: 400px;
*/
	padding-top: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	display: flex;
	overflow: visible;
}
/* Stats Gallery */
.gallery_4 {
	clear: both;
	display: inline-block;
	background-color: #FFF;
	/* [disabled]min-width: 400px;
*/
	padding-top: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	display: flex;
	overflow: visible;
}
.thm1 {
	background-color: #53859D;
	position: relative;
    top: clamp(-120px, -10vw, -40px);
    margin: 0 auto;
	z-index: 8;
}
.thm4 {
	background-color: #53859D;
	width: calc(20% - 1.5%);
	float: left;
	margin-top: 35px;
	position: relative;
	z-index: 8;
}
.thm3 {
	background-color: #53859D;
	transition: all 0.3s ease;
	width: calc(20% - 1.5%);
	float: left;
	margin-top: 35px;
	position: relative;
	z-index: 8;
}
/* ==========================
   Scroll Animation
========================== */
.thm1,.thm3,.thm4{
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

/* 表示後 */
.thm1.show,
.thm3.show,.thm4.show{
    opacity: 1;
    transform: translateY(0);
}

.circle{
	text-align: center;
}
.circle4_img{
	width: 40%;
	margin-top: -20%;
}
.spec{
	color: #fff;
	border: 25px solid #53859D;
}	
.stats {
	font-size: 20px;
	height: 20px;
	display: flex;
	align-items: flex-end;   /* 下揃え */
	justify-content: center; /* 横中央 */
	border-bottom: 2px solid #fff;
	font-weight: bold;
	padding-bottom: 10px; /* ← こっちが自然 */
}
.desc{
	word-break: break-word;
	overflow-wrap: break-word;
	padding: 1.5%;
	text-align: left;
}
.fea_list{
	margin-top: 20px;
	margin-left: 10%;
	word-break: break-word;
    overflow-wrap: break-word;
	font-size: 12px;
}
.about_list{
	margin-top: 5px;
	margin-left: 10%;
	word-break: break-word;
    overflow-wrap: break-word;
}
.thm3:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
/* ===== 全体 ===== */
.pro_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ===== 背景 ===== */ 
.pv_bc { 
	position: absolute; 
	inset: 0; background:url("../../img/pro_bg.webp") center / cover no-repeat; 
	background-position: top 16% center; 
	z-index: 8; 
	background-color: #E4E5EA; 
}

/* ===== 中央配置 ===== */
.pv_inner,
.pv_inner_fiber{
  position: relative;
  z-index: 8;	
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== 製品（吹き出し込み） ===== */

.pv_pro_tab {
  width: 100%;
  height: auto;
  margin-top: -25%;	
}
.pv_pro_smp {
  width: 100%;
  height: auto;
  margin-top: 10%;
}
.pv_txt{
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 30px;
  color: #333;
  line-height: 1.8;
  text-align: left;
  font-weight:normal;
}
.pv_txt ol,ul{
	margin-left: 2%;
}
.pv_img{
  margin-top: 20%;
}
.fea_img{
	width:50%;
}
.txt{
	max-width: 900px;
	margin-top: 5%;
}
.txt_r{
	text-align: right;
}
.fea_txt{
	margin-right: 10%;
}

/* ===== Products　左右 ===== */
.pro_info {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ← 横2列 */
  width: 98%;
  margin: 0 1% 5% 1%;	  
  gap: 30px;
}
/* ===== 左カラム全体 ===== */
.pro_l .pro_r {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pro_img_big{
	background-color: #eee;
	width: 100%;
}
.pro_img_big img {
  width: 100%;
  height: auto;
  display: block;
}
.pro_img_sml_wrap {
  display: flex;
  gap: 10px;
}
.pro_area{
	margin: 0 1% 10px 1%;
}
.pro_img_sml {
  flex: 1;
  background: #fff;
  border: 1px solid #ddd;
}
.pro_img_sml img {
  width: 100%;
  margin: auto ;
  display: block;
}
/* 下のラベル */
.img_label {
  background: #005B94;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  margin: 0;
}


/* ===== ⑥ ヘッダー ===== */
.pro_mod_hed {
  background: #005B94;
  color: #fff;
  padding: 10px 15px;
  font-weight: bold;
  margin-bottom: 0;	
}
.pro_mod {
  background: #B3D9E8;
  color: #000;
  padding: 0.5% 2%;	
}

/* ===== ⑦ テキスト ===== */
.pro_txt {
  padding: 5px 5px;
  font-weight: normal;
}

.pro_txt ul {
  margin: 0;
  padding-left: 18px;
}

.pro_txt li {
  font-size: 20px;
  line-height: 1.6;
}

/* ===== ⑧ スペック表 ===== */
.pro_dit{
	margin-top: 5px;
	margin-bottom: 5px
}
.pro_dit table {
  width: 100%;
  border-collapse: collapse;
}

.pro_dit th,
.pro_dit td {
  border-bottom: 1px solid #ccc;	
  padding: 8px;	
}
.pro_dit td {
  border-left: 1px solid #ccc;
	font-weight: normal;
}
.pro_dit tr:first-child th,
.pro_dit tr:first-child td {
  border-top: 1px solid #ccc;
}
.pro_dit th {
  background: #f5f5f5;
  text-align: left;
  font-size: clamp(12px,2vw,15px);	
  width: 30%;
}

/* ===== ⑨ ボタン ===== */
.pro_btn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;		
}
.pro_btn_fom {
  display: block;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  transition: 0.3s;
  background: #53859D;
  color: #fff;
　font-weight: bolder;
}
.btn_contact {
  border: 3px solid #7fa5b5;
  color: #53859D;
  background: #eee;
}
/* hover */
.pro_btn_fom:hover{
  opacity: 0.8;
}
.pro_btn svg{
    width:16px;
    height:16px;
    margin-right:6px;
	margin-top:0.25px;
    vertical-align:middle;
}
/* News Section */
.news-wrapper {
  border: 1px solid #333; /* 枠線 */
  padding: 10px; /* 全体内側の余白 */
  margin-bottom: 50px;	
}
.news-container {
}
.news-link {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付&カテゴリーラベルと記事タイトルの横並び */
  padding-bottom: 10px; /* 内側下の余白 */
  padding-top: 10px; /* 内側上の余白 */
  transition: background-color .5s; /* 背景色をじんわり変化 */
}
.news-link:not(:first-of-type) {
  border-top: 1px solid #ccc; /* 記事リンク間の線 */
}
.news-info {
  align-items: center; /* 上下中央 */
  display: flex; /* 日付とカテゴリーの横並び */
  flex-shrink: 0; /* これが無いと日付・カテゴリーラベルが潰れる */
}
.news-date {
  color: #333; /* 日付の文字色 */
  font-size: 20px; /* 日付のフォントサイズ */
  padding-left: 10px;	
}
.news-news {
  background-color: #005B94;
  color: #fff; /* カテゴリーラベルの文字色 */
  font-size: 15px; /* カテゴリーラベルのフォントサイズ */
  font-weight: bold;	
  margin-left: 10px; /* カテゴリーラベル左の余白 */
  padding: 5px 8px; /* カテゴリーラベル内側の余白 */
}
.news-expo {
  background-color: #53859D;
  color: #fff; /* カテゴリーラベルの文字色 */
  font-size: 15px; /* カテゴリーラベルのフォントサイズ */
  font-weight: normal;	
  margin-left: 10px; /* カテゴリーラベル左の余白 */
  padding: 5px; /* カテゴリーラベル内側の余白 */
}
.news-tit {
  color: #333; /* 記事タイトルの文字色 */
  line-height: 1.5; /* テキストの行間 */
  margin-left: 10px; /* 記事タイトル左の余白 */
  font-size: 15px; /* カテゴリーラベルのフォントサイズ */	
}
.news-link:hover {
  background-color: #eee; /* ホバーした時の記事リンクの背景色 */
}
/* レイアウトのためのスタイル */
.inner {
  margin-inline: auto;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}
.news {
  margin-bottom: 20px;
  margin-top: 20px;
}
.pro_fea{
	margin-bottom: 0;
}
.pro_fea p{
	margin: 2%;
}
/* 導入事例ページ */
.pv_pro_map {
  position: relative;
  width: 100%;	
}

.pv_pro_map img {
  width: 100%;
  display: block;
}

/* 差し替え画像 */
.hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* 共通 */
.pv_pro_map{
    position:relative;
    width:100%;
}

.map-base{
    display:block;
    width:100%;
    height:auto;
}

.map-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:10;
}

.area{
    fill:rgba(0,91,148,0);
    transition:.3s;
    cursor:pointer;
}

.hover-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
.area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 91, 148, 0);
  transition: 0.3s;
}
/* エリアにマウスが乗ったら画像表示 */
.show-a .hover-a,
.show-b .hover-b,
.show-c .hover-c,
.show-d .hover-d,
.show-e .hover-e,
.show-f .hover-f
{
  opacity: 1;
}
.hover-img.show{
    opacity:1;
}

.mgn{
	margin: 50px 0;	
}

/* ===== 導入事例　左右 ===== */
.ex_pro_box {
	scroll-margin-top: 120px;
}
.ex_pro_box a{
	color:#000;
}
.ex_info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    width:95%;
    background:#eee;
	margin: 10% 2.5%;
}

.ex_l,
.ex_r{
    min-width:0;
}
.ex_img{
	margin-top: -5%;
	text-align: center;
}
.ex_r{
    display:flex;
    flex-direction:column;
    gap:20px;
	height:100%;
}

.ex_r .ex_pro_img{
    flex:0 0 50%;
}

.ex_r .ex_txt{
    flex:1;
    margin:0;
}

.ex_l .ex_txt,
.ex_r .ex_txt{
    overflow-wrap:break-word;
    word-break:break-word;
	margin: 2% 5%;
}
.ex_pro{
	flex:1;
	
    display:flex;
    align-items:center;
    gap:20px;

    background:#eee;
    border-radius:8px;
    padding:15px;

    color:#000;
    text-decoration:none;

    transition:.3s;
}

.ex_pro:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.ex_pro .ex_pro_img{
    flex:0 0 40%;
}

.ex_pro .ex_pro_img img{
    width:100%;
}

.ex_pro .ex_txt{
    flex:1;
    margin:0;
}
.ex_pro_img img{
    width:100%;
    height:auto;
    display:block;
}
/* ===== Topページ導入事例部分 ===== */
.ex {
	background-color: #53859D;
	padding-bottom: 50px;
}
.ex_tit {
	color: #FFF;
	text-align: right;
	padding-right: 50px;
	padding-top: 50px;
	letter-spacing: 2px;
	margin-top: 0px;
}
.ex_txt_r {
	color: #FFF;
	text-align: right;
	padding-right: 50px;
	width: 100%;
	float: right;
	font-weight:normal;
	line-height: 23px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	word-break: break-word;
	overflow-wrap: break-word;
}
.ex img{
	width: 100%;
}
.btn {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 6px;
  text-decoration: none;
}
.btn img {
  display: block;
  width: 100%;
  height: auto;
}
/* 光のライン */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.9s ease;
  z-index: 2;
}
/* hover */
.btn:hover img {
  filter: brightness(1.08);
}
.btn:hover::before {
  left: 135%;
}

/* カナレへ戻るボタン */
.bc_canare_pos{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.bc-canare {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 40px;
    border: 1px solid #999;
    color: #555;
    background: #fff;
    font-size: 14px;
    letter-spacing: .08em;
    transition: .3s;
}
.bc-canare a{
	color:#555;
}
.bc-canare:hover {
    background:#53859D;
    color:#fff;
    border-color:#53859D;
}

/* ===== カルーセル ===== */
.carousel {
  position: relative;
  width: 100%;
}
.carousel_item {
  flex: 0 0 calc(25% - 15px);
　display: flex;	
}
.carousel_view {
  overflow: hidden;
}
.carousel_track {
  display: flex;
  gap: 20px;
}
.cards{
	width: 100%;
	height: auto; 
	display: block;
}
/* ボタン */
.carousel_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 1;
}

.prev { left: 10px; }
.next { right: 10px; }

/* ドット */
.carousel_dots {
  text-align: center;
  margin-top: 15px;
}

.carousel_dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
}

.carousel_dots .active {
  background: #005B94;
}
.pro_car_tab {
	width: 100%;
	margin: 0;
	flex: 1;
	display: flex;
	text-align: center;
	float: left;
	background-color: #F8F8F8;
	padding-bottom: 20px;
	border-radius: 3px;
	padding-top: 20px;
	border-bottom: 4px solid #005B94;
	box-sizing: border-box;
	padding: 15px;
	flex-direction: column;
	transition: 0.3s ease;
	
}
.pro_car_tab th{
	background-color: #005B94;
	color: #fff;
	font-size: clamp(8px, 2vw, 12px);
}
.pro_car_tab td{
	background-color: #53859D;
	text-align: left;
	padding-left: 2%;
	color: #fff;
	font-weight: normal;
	font-size: clamp(8px, 2vw, 12px);	
}
.pro_car_tab h4{
	color:#000;
}
.pro_link:hover .pro_car_tab {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
/* Mail */
.mal_form{
	width: 80%;
	margin: auto 10%;
	
}
label{
	color:#005B94;
	display:block;
	margin-top:15px;
	font-weight:bold;
}
input,textarea,select{
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	box-sizing: border-box;
}
.lang-switch button{
  height: 40px;
  padding: 0 15px;
}
textarea{
	height: 300px;
}

button{
	margin-top:20px;
	padding:10px;
	background:#333;
	color:#fff;
	border:none;
	cursor: pointer;
	border-radius: 5px;
}
button:hover {
  opacity: 0.8;
}
.mal_btn{
	text-align:center;
	margin-bottom: 100px
}
.captcha_wrap{
    display:flex;
    justify-content:center;
    margin:20px 0;
}
.g-recaptcha{
    margin:20px 0;
}
button:disabled{
    opacity:0.4;
    cursor:not-allowed;
}
.box{
	border:1px solid #ccc;
	padding:20px;
	margin-top:20px;
}
.red_txt{
	background-color: crimson;
	color:#fff;
	padding: 0.5px 10px 3px 10px;
	margin: 0 10px;
	border-radius: 5px;
}
/* ボタン色青 */
.lang-switch {
  display:flex;
  gap:10px;
}

.lang-btn {
  padding:8px 14px;
  border:1px solid #ccc;
  background:#999;
  cursor:pointer;
  border-radius:4px;
  transition:0.2s;
}

.lang-btn.active {
  background:#005B94;
  color:#fff;
  border-color:#005B94;
}

/* Thanks */
.thanks_wrap{
    max-width:800px;
    margin:80px auto;
    padding:0 20px;
}

.thanks_box{
    border:1px solid #ddd;
    padding:50px 30px;
    text-align:center;
    background:#fff;
}

.thanks_icon{
    font-size:60px;
    color:#005B94;
    margin-bottom:20px;
}

.thanks_title{
    font-size:1.6rem;
    margin-bottom:20px;
    color:#005B94;
}

.thanks_txt{
    line-height:2;
    margin-bottom:40px;
	font-weight: normal;
}

.thanks_btn{
    display:inline-block;
    min-width:90%;
    padding:15px 5%;
    background:#005B94;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.thanks_btn:hover{
    opacity:.8;
}

/* お問い合わせバナー */
.contact-banner{
    position:fixed;
    left:-160px; /* 初期状態は画面外 */
    top:90%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    background:#333;
    color:#fff;
    text-decoration:none;
    border-radius:0 8px 8px 0;
    z-index:9999;
    transition:left 0.4s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* ホバーでスライド表示 */
.contact-banner:hover{
    left:0;
}

.contact-banner .icon{
    font-size:20px;
}

.contact-banner .text{
    white-space:nowrap;
    font-size:14px;
}
/* Topページにもどる */
.pagetop{
    position:fixed;
    right:-100px;
    bottom:8%;
    padding:12px 20px;
    background:#333;
    color:#fff;
    text-decoration:none;
    border-radius:8px 0 0 8px;
    transition:right .4s ease;
    z-index:9999;
}

.pagetop.show{
    right:0;
}
/*　Lightbox */
.lb_gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.thumb {
  width: 180px;
  cursor: pointer;
}

/* 背景 */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;

  z-index: 9999;
}

.lightbox.show {
  opacity: 1;
  visibility: visible;
}

/* 画像 */
.lightbox img {
  max-width: 90%;
  max-height: 90%;

  width: auto;
  height: auto;

  object-fit: contain;

  transform: scale(0.96);
  transition: transform 0.5s ease;
}

.lightbox.show img {
  transform: scale(1);
}

/* ×ボタン（プロ版） */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;

  width: 48px;
  height: 48px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 26px;
  color: #fff;
  cursor: pointer;
  user-select: none;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  transition: all 0.15s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

.lightbox-close:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* ローディング */
.lightbox-loader {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ===== カタログダウンロード ===== */
.cat-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:.35s;
    margin:60px auto;
}
.cat-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.cat-thumb{
    flex:0 0 220px;
}

.cat-thumb img{
    width:100%;
    display:block;
    border-radius:6px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.cat-info{
    flex:1;
}
.cat-info h3{
    color:#005B94;
    font-size:32px;
    margin-bottom:15px;
}
.cat-size{
    display:inline-block;
    margin-bottom:25px;
    color:#777;
    font-size:14px;
}
.cat-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 28px;
    background:#005B94;
    color:#fff;
    border-radius:999px;
    font-weight:600;
    letter-spacing:.5px;
    transition:.3s;
}

.cat-btn svg{
    width:22px;
    height:22px;
}

.cat-btn:hover{
    background:#2C9AB7;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,91,148,.35);
}


/* ===== Footer ===== */
footer {
}
/* Company profiles  */
.cop_prf {
	width: 100%;
	background-color: #eee;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	
}
.table_design03 {
    border-collapse: collapse;
    width: 90%;
    margin: 5% 5%;	
}
.table_design03 th, .table_design03 td {
    border-bottom: 2px solid #c1c7c6;
    padding: 1em;
}
.table_design03 th {
    border-bottom: 2px solid #4d9bc1;;
    font-weight: bold;
    text-align: center;
    width: 20%;
min-width: 4em;
}
.table_design03 td {
    text-align: left;
}

.footer_banner {
	background-color: #34424D;
	color: #fff;
  　margin-top: 60px;
	padding-top: 50px;
}

/* 内側幅（containerに合わせる） */

.footer_inner {
  width: 90%;
  margin: 0 auto;
}

/* 上段 */
.footer_row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/* カラム */
.footer_col {
  flex: 1 1 220px;
}

.footer_col h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  padding-bottom: 5px;
}

/* テキスト */
.footer_col p,
.footer_col li {
  font-size: 14px;
  line-height: 1.8;
}

/* リスト */
.footer_col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リンク */
.footer_col a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.footer_col a:hover {
  color: #2C9AB7;
}

/* 下段 */
.footer_bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  margin-top: 40px;
  padding: 20px 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer_bottom a{
	font-weight: bold;
	color: #fff;
}

/* コピーライト */
.footer_bottom p {
  margin: 0;
  font-size: 13px;
}

/* SNS */
.footer_sns a {
  display: inline-block;
  margin-left: 10px;
  padding: 6px 12px;
  border: 1px solid #fff;
  font-size: 12px;
  transition: 0.3s;
}

.footer_sns a:hover {
  background-color: #fff;
  color: #005B94;
}	
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;	
	background-color: #717070;
	color: #FFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}

.footer_copy{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    font-size:13px;
}

.footer_copy a{
    color:#fff;
    text-decoration:none;
}

.footer_copy a:hover{
    color:#2C9AB7;
}

/* =========================
   モバイル（デフォルト）
========================= */
	
header{
	position: relative;
	width:100%;
    z-index:10;

    background:#005B94;
    border-bottom:1px solid #2C9AB7;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:15px;
    box-sizing:border-box;
}

.menu-toggle{
   display:block;
   background:none;
   border:none;
   font-size:32px;
   cursor:pointer;
   color:#003366;
   padding:0;  /* 追加 */	
   line-height:1;	

}
.nav-menu{
   position:absolute;
   top:100%;
   left:0;
   width:100%;
   background:#005B94;
   display:none;
   z-index:999;
}
.nav-menu.active{
    display:block !important;
}
.nav-menu ul{
   display:flex;
   flex-direction:column;
   padding:20px;
   margin:0;
   list-style:none;
}

/* ロゴ */

.logo{
    margin:0;
}

.logo img{
    display:block;
    height:15px;
    width:auto;

}
.logo img:hover{
     transition: opacity 0.3s ease; /* なめらかな変化 */
     opacity: 0.6;
}

/* ナビ */

nav{
    width:100%;
}
nav ul{
    list-style:none;
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
}
nav ul li{
    margin:0;
}
nav ul li a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    transition:.3s;
}

nav ul li a:hover{
    color:#2C9AB7;
}
.header_search{
	display: flex;
    align-items: center;
}
.header_search .gsc-input{
	margin-top: 0.4%;
}
.gsc-input-box{
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.3) !important;
    background:#fff !important;
	width:110%;
    height:42px !important;
	margin-top: -2.5%;
	margin-left:-5%;
}
.gsc-input{
    height:38px !important;
    font-size:20px !important;
    transform:translateY(-5px);
}
.gsc-search-button-v2{
    border-radius:50% !important;
    width:36px !important;
    height:36px !important;
}
.gsc-clear-button{
	display:none !important;
}
/* 検索結果 */
.search_result_wrap{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}
.hero{
    position:relative;
}
.hero_bc{
	margin-top: -175px;
}
.hero_header{
	font-size: clamp(10px,2vw,12px);
	line-height: clamp(20px,2vw,30px);
	margin: 10px 0;
	top: 60%;
	left:35%;
}
/* テキスト */
.txt_clm,
.text_column {
  width: 100%;
  padding: 0;
}
/* ギャラリー */
.gallery {
  margin-top: 20%;	
  flex-direction: column;
  gap: 0;
}
.gallery_4 {
  margin-top:-30px;	
  flex-direction: column;
  gap: 0;
}
.thm4 {
  width: 100%;
  float: none;
  margin-bottom: 100px;
}
.thm3 {
  width: 100%;
  float: none;
  margin-bottom: 100px;
}
.hero_pro h1 {
  top: 40%;     /* ←上下位置（調整OK） */
  right:1%;    /* ←右寄せ */
  font-size: clamp(20px, 3vw, 25px);	
}
.circle1_img{
	width: 20%;
	margin-top: -8%;
}
/* Products 左右 → 1列 */
.pro_info {
  display: block;
}
.pro_visual{
    aspect-ratio: auto;
}
.pv_bc{
    background-image:url("../../img/pro_bg.webp");
    background-repeat:no-repeat;
    background-position:center top;
    background-size: 100% auto;
}
.pv_img_mgntop{
	margin-top: -10%;
	position: relative;
}
/* アイコン */
.pv_fea {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, auto);

    top: 2%;
    left: 50%;
    transform: translateX(-50%);

    justify-items: center;
    text-align: center;

    list-style: none;
    gap: 10px;
    width: auto;
    z-index: 9;
}
.pro_dit{
	margin-top: 0;
	margin-bottom: 0;	
}
/* タグデザイン */
.pv_fea li {
  background: rgba(255,255,255,0.9);
  color: #005B94;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  white-space: nowrap;
  transition: 0.3s;
  text-align: center;
  font-size: 10px;	
}
.fea_list{
	font-size: 12px;
}
.about_list{
	font-size: 20px;
	line-height: 1.75;
}
.pro{
	margin: 70px 0;
}

.pro_tab{
	margin-top: -30px;
	margin-bottom: 50px
}

/* ニュース */
.news-wrapper {
  padding: 15px;
}
.news-link {
  display: block;
}
 /* カルーセル */	
.carousel_item {
    flex: 0 0 calc(100% - 15px);
 }
/*製品種類*/
.pv_pro {
  margin-top: 20%;
}
.thm1 {
    width: 90%;
}
.pv_pro_tab {
	display: none;
}
/* 導入事例 */
.ex_info {
  display: block;
}
/* フッター */
.footer_row,
.footer_bottom {
  flex-direction: column;
  text-align: center;
}
/* =========================
   タブレット以上（768px〜）
========================= */
@media (min-width: 768px) {

header{
   display:flex;
   max-width:100%;	
   flex-direction:row;
   justify-content:space-between;
   align-items:center;

   min-height:70px;
   padding:0 25px;
}
.menu-toggle{
    display:none;
}
.nav-menu{
    display:block;
    position:static;
    width:auto;
    background:none;
}

.nav-menu ul{
    flex-direction:row;
    align-items:center;
    padding:0;
}	
.logo img{
   height:15px;
}
nav{
   width:auto;
}
nav ul{
   flex-direction:row;
   align-items:center;
   gap:20px;
}
.header_search{
    width:70%;
    flex-shrink:0;
	margin-top: 3%;
	margin-left: 30%;
}	
.header_search .gsc-input{
	margin-top: 0.75%;
}
.hero{
	margin-top: -30px;
}
.pv_img_mgntop{
	margin-top: 30%;
	position: relative;
}	
.hero_header{
	font-size: clamp(12px,2vw,15px);
	line-height: clamp(30px,2vw,40px);
	margin: 10px 0;
	top: 65%;
	left:35%;
}
.pro_visual{
    aspect-ratio: auto;
    min-height: 600px; 
}	
/* アイコン */
.pv_fea {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pv_fea li {
  font-size: 13px;	
}	
/* ギャラリー */
.gallery {	
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2%;
	margin-top: -50px;	
}
.gallery_4 {	
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2%;
	margin-top: -50px;	
}	
.thm4 {
   width: calc(50% - 1%);
}
.thm3 {
   width: calc(50% - 1%);
}
.fea_list{
	font-size: 15px;
}
.about_list{
	font-size: 20px;
	line-height: 1.75;
}
.hero_pro{
	margin-top: 50px; 
}	
.hero_pro h1 {
  top: 40%;     /* ←上下位置（調整OK） */
  right: 2%;    /* ←右寄せ */
 font-size:clamp(40px,3vw,50px);
}	
.pv_inner,
.pv_inner_fiber{
	margin-top: 20% ;
	height:70%;
}
.circle1_img{
	width: 12.5%;
	margin-top: -8%;
}
.pro_tab{
	margin-top: -100px;
	margin-bottom: 50px
}		
/* Products 左右 */
.pro_info {
   display: grid;
   grid-template-columns: 1fr 1fr;
}
.pv_pro_tab {
	display:block;
}	
.pv_pro_smp {
	display: none;
}
.pro_tab{
	margin-top: -80px;	
}	
 /* カルーセル */	
.carousel_item {
    flex: 0 0 calc(25% - 15px);
 }
/* 導入事例 */
.ex_info {
   display: grid;
   grid-template-columns: 1fr 1fr;
}	
 /* フッター */
	
 .footer_row {
    flex-direction: row;
	text-align: left; 
}
.footer_bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* =========================
   PC（1024px〜）
========================= */
@media (min-width: 1024px) {

header{
  width:100%;
  max-width:none;

  position:relative;
  left:auto !important;
  transform:none;

  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;

  min-height:80px;
  padding:0 40px;
	
}
.logo img{
    height:15px;
}
nav{
    margin-left:auto;
}	
nav ul{
    display:flex;
    align-items:center;
    gap:20px;
}
nav ul li a{
    font-size:15px;
    letter-spacing:2px;
}
.header_search{
    width: 55%;
	margin-left:45%;
    margin-top: 2.5%;	
 }	
.thm1 {
    width: 60%;
}
.thm4 {
    width: calc(24% - 0.5%);
}
.thm3 {
    width: calc(33% - 1.01%);
}
.stats {
    height: 50px;
}
.pv_fea li {
  font-size: 15px;	
}		
.hero_header{
	font-size: clamp(12px,2vw,19px);
	line-height: clamp(40px,2vw,50px);
	margin: 10px 0;
	top: 70%;
	left:35%;
}	
.pro-img{
	width: 50%;
}	
/*製品種類*/	
.pro_visual {
	height: 700px;
}
.pv_inner{
	margin: 0% auto 0 auto ;
	height: 90%;
}
.pv_inner_fiber{
	margin: 0% auto 0 auto ;
	height: 130%;
}		
.pro_tab{
	margin-top: -100px;
	margin-bottom: 50px
}	
.hero_pro h1{
    top:40%;
    right:40px;
        
    transform:translateY(-50%);
}	
}