@charset "UTF-8";
/*
    Template: swell
    Theme Name: Bridge-theme
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.top-bg1{
	position: relative;
	height:650px;	
}
.top-img1{
	position: absolute;
	top:-20px;
	right:-30%;
	max-width:900px;
	z-index:-1;
}
.top-img1 img{
	border-radius:20px!important;
}
.top-txt1{
	z-index:999!important;
	position: absolute;
	top: clamp(72px, 16vw, 140px);
	left: clamp(-300px, -10vw, -30px);
	margin:auto;
	font-size: clamp(12px, 6vw, 18px);
}

@media (max-width: 1130px){
	.top-bg1{
	height: clamp(300px, 100vw, 650px);	
}
	.top-txt1{
	top: clamp(270px, 16vw, 400px);
	left: clamp(-100px, 3vw, 10px);
	margin:auto;
	font-size: clamp(10px, 2vw, 16px);
}
	.top-img1{
	top: clamp(0px, 16vw, -300px);
	margin-left:1em;	
}
}





/* === Hero Lines (差し替え) === */
:root{
  --reveal-stagger: .08s;         /* 1文字ごとの遅延 */
  --reveal-line-delay: .2s;      /* 行ごとの待ち時間 */
  --reveal-dur: 1.2s;             /* 1文字の再生時間 */
  --reveal-ease: cubic-bezier(.2,.7,0,1);
  --reveal-accent: #FFCC00;
}

[data-hero-reveal] { display:inline-block; }
[data-hero-reveal] .reveal-line{ display:block; overflow:visible; }
[data-hero-reveal] .char{
  display:inline-block; position:relative;
  transform: translateY(.35em);
  opacity:0;
  /* 縦方向に切り抜き（下→上へ開く） */
  clip-path: inset(100% 0 0 0);
  will-change: transform, opacity, clip-path;
}
[data-hero-reveal].play .char{
  animation: hero-reveal-rise var(--reveal-dur) var(--reveal-ease) forwards;
}

@keyframes hero-reveal-rise{
  0%   { transform: translateY(.35em); opacity:0; clip-path: inset(100% 0 0 0); }
  100% { transform: none;              opacity:1; clip-path: inset(0 0 0 0); }
}

/* 強調色 */
[data-hero-reveal] .accent{ color: var(--reveal-accent); text-shadow: 1px 1px 3.5px #FFF ,
-1px 1px 3.5px #FFF ,
1px -1px 3.5px #FFF ,
-1px -1px 3.5px #FFF;}

/* 動きを抑制（OSの簡易モーション配慮） */
@media (prefers-reduced-motion: reduce){
  [data-hero-reveal] .char{ clip-path: none !important; transform:none !important; opacity:1 !important; animation: none !important; }
}




.l-header__inner{
	padding-right:0!important;
}
.c-gnav{
	color:#FFF;
}
.c-gnav li{
	background-color:#932727;
	padding:auto;
	font-weight:bold;
	width:120px;
}
.c-gnav .sub-menu a {
	color:#000;
	background-color:#FFF;
}
#fix_header .c-gnav li{
	background-color:#FFF;
	color:#000!important;
		padding:auto;
	font-weight:bold;
}
#fix_header .c-gnav .sub-menu a {
	color:#000!important;
}

/* 初期状態：上から“すーっ”と下りてくる準備 */
#gnav .c-gnav > li {
  transform: translateY(-74px) scaleY(1.02);
  transform-origin: top;
  will-change: transform;
}

/* JSが .is-animated を付けたら li ごとに順番に下りる */
#gnav .c-gnav.is-animated > li {
  animation: drop-in-no-bounce 800ms cubic-bezier(.22, .78, .16, 1) both;
  animation-delay: calc(var(--stagger, 0) * 90ms);
}

@keyframes drop-in-no-bounce {
  from { transform: translateY(-74px) scaleY(1.02); }
  to   { transform: translateY(0)     scaleY(1); }
}

/* 動きを苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  #gnav .c-gnav > li { transform: none; animation: none !important; }
}




.background-text1 {
  position: relative;
  display: flex; /* フレックスボックスを有効化 */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
  margin: 50px 0; /* 上下に50pxのマージンを設定 */
}

.background-text1::after {
  content: 'ABOUT US';
  position: absolute;
  top: 0%; /* 垂直方向の中央寄せ */
  left: 50%; /* 水平方向の中央寄せ */
  transform: translate(-50%, -50%); /* 中央に配置 */
  font-size: 60px; /* 背景テキストのフォントサイズ */
	font-weight:bold;
  color: rgba(255, 255, 255, 0.3); /* 背景テキストの色（透明度含む） */
  z-index: 0; /* 背景として配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}

.background-text2 {
  position: relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
  margin: 50px 0; 
}

.background-text2::after {
  content: 'BUSINESS';
  position: absolute;
  top: 0%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  font-size: 60px; 
	font-weight:bold;
  color: rgba(238, 238, 238, 1); 
  z-index: -1; 
  white-space: nowrap;
}
.background-text3 {
  position: relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
  margin: 50px 0; 
}

.background-text3::after {
  content: 'COMPANY';
  position: absolute;
  top: 0%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 60px; 
	font-weight:bold;
  color: rgba(255, 255, 255, 1);
  z-index: -1;
  white-space: nowrap;
}
.background-text4 {
  position: relative;
  display: flex;
  justify-content: center; 
  align-items: center;
  margin: 50px 0;
}

.background-text4::after {
  content: 'INQUIRY';
  position: absolute;
  top: 0%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 60px;
	font-weight:bold;
  color: rgba(255, 255, 255, 0.3);
  z-index: -1; 
  white-space: nowrap; 
}
.gaiyou-bg{
	height:700px;
}
.gaiyou-key{
	position: relative;
}
.gaiyou-bg2{
	height:600px;
}
.gaiyou-t{
	position: absolute;
	top:610px;
	left: 50%; 
	width:100%!important;
	transform: translate(-50%, -50%); 
	border-radius:20px;
	padding:50px!important;
	box-shadow:10px 10px 10px #EEE;
}
.gaiyou-t tr{
	height:90px;
	border-bottom:1px solid #e58361;
}
.gaiyou-t:last-of-type tr:last-child{
    border-bottom:none;
}
.gaiyou-t .wp-block-table {
    --table-border: none!important;
}




/* =========================================================
//  無限ループアニメーション
// ========================================================= */
/* 無限ループアニメーション */
@keyframes infinite-loop {
    to {
        transform: translateX(-100%);
    }
}
/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
    /* 設定項目 START */
    --item-max-width: 200px; /* 各アイテムの最大幅 */
    --item-mobile-width: 70vw; /* スマホでのアイテムの幅 */
    --duration: 20s; /* アニメーションスピード */
    --gap: 2rem; /* 各アイテム同士の間隔 */
    /* 設定項目 END */
    --play-state: running;
    --direction: normal;
    --flex-direction: row;
}
.infiniteLoop.-reverse {
    --direction: reverse;
    --flex-direction: row-reverse
}
/* 一旦停止
.infiniteLoop:hover {
    --play-state: paused
}
 */
.infiniteLoop > * {
    display: flex
}
.infiniteLoop > * > * > * {
    overflow: hidden;
    transform: translateX(0);
    flex-wrap: nowrap !important;
    flex-direction: var(--flex-direction, row);
    margin: 0 !important;
    padding-left: var(--gap) !important;
    gap: var(--gap);
    width: calc(var(--infinite-loop_width, 100vw)*1)
}
.infiniteLoop > * > * > * > * {
    padding: 0 !important
}
.infiniteLoop > * > * > * > * > * {
    max-width: var(--item-max-width, 0px);
    margin-inline: auto
}
@media (min-width: 600px){
  .infiniteLoop > * > * > *{
    animation-name: infinite-loop;
    animation-duration: var(--duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: var(--direction);
    animation-play-state: var(--play-state);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
  }
}
@media (max-width: 599px){
	  .infiniteLoop{
    --item-mobile-width: 30vw; /* 好みで 80〜95vw などに調整 */
  }

  /* 最内層アイテムのサイズを上書き */
  .infiniteLoop > * > * > * > * > *{
    width: var(--item-mobile-width);
    max-width: none; /* 200px制限を解除 */
    flex: 0 0 var(--item-mobile-width); /* 縮まないよう固定幅に */
  }

  /* 画像がコンテナ幅にフィットするように */
  .infiniteLoop img{
    display: block;
    width: 100%;
    height: auto;
	  
  }
  .infiniteLoop > * > * > *{
    animation-name: infinite-loop;
    animation-duration: var(--duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: var(--direction);
    animation-play-state: var(--play-state);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
  }
}

/* :hoverで一時停止はPCだけに（タッチで“停止しっぱなし”防止） */
@media (hover: hover){
  .infiniteLoop:hover{ --play-state: paused; }
}
@keyframes infinite-loop {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-100%,0,0); }
}