/* =========================================================
   SCROLL INDICATOR for Elementor HERO
   - 縦文字「scroll」
   - 円は上→下へ一方向（バウンドなし）
   - ラインは進行に合わせて黒化
   - 円も進行に合わせて黒化
   - 円が線より前面（重なり上）
========================================================= */

/***ヘッダー****/
.ast-builder-html-element h1{
color:#fff!important;
	font-size:2rem!important;
}
.site-title a{
	text-decoration:none;
	font-weight:bold;
}
@media (max-width: 768px){
.ast-builder-html-element h1{
color:#fff!important;
	font-size:1.2rem!important;
}
	.site-title a{
		font-size:1.2rem!important;
	}
	.site-header .site-description{
		font-size:0.6rem!important;
	}
}
.hero{
  position: relative;

  /* ---- 調整用 ---- */
  --si-top: 90%;
  --si-height: 102px;
  --si-width: 14px;
  --si-dot: 6px;
  --si-duration: 1.6s;

  --si-text-color: #fff;

  /* 線：白→黒 */
  --si-line-base: rgba(255,255,255,.55);
  --si-line-fill: rgba(0,0,0,.85);

  /* 円：白→黒（好みで黒を濃く） */
  --si-dot-start: rgba(255,255,255,1);
  --si-dot-end: rgba(0,0,0,1);

  /* 円の縁取り（背景によって調整） */
  --si-dot-ring: rgba(255,255,255,.15);
}

/* HTMLウィジェット（absolute固定） */
.hero .scroll-indicator-wrap{
  position: absolute !important;
  left: 50%;
  top: var(--si-top);
  transform: translateX(-50%);
  z-index: 50;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* 本体レイアウト */
.hero .scroll-indicator{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/* 縦文字 scroll */
.hero .scroll-indicator__text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 16px;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--si-text-color);
  opacity: .85;
}

/* ライン入れ物 */
.hero .scroll-indicator__line{
  position: relative;
  width: var(--si-width);
  height: var(--si-height);
  overflow: visible;
}

/* ベースライン（薄い白） */
.hero .scroll-indicator__line::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:1px;
  height:100%;
  background: var(--si-line-base);
  border-radius: 999px;
  z-index: 1;
}

/* 進行に合わせて黒化するライン */
.hero .scroll-indicator__line::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:1px;
  height:0%;
  background: var(--si-line-fill);
  border-radius: 999px;
  animation: siLineFill var(--si-duration) linear infinite;
  z-index: 2; /* ベース線より上 */
}

/* 円（前面に出す） */
.hero .scroll-indicator__dot{
  position:absolute;
  left:50%;
  top:0;
  width: var(--si-dot);
  height: var(--si-dot);
  transform: translateX(-50%);
  border-radius:50%;

  /* ここで色をアニメさせる */
  background: var(--si-dot-start);
  animation: siDotDown var(--si-duration) linear infinite,
             siDotColor var(--si-duration) linear infinite;

  /* 縁取り（任意） */
  box-shadow: 0 0 0 2px var(--si-dot-ring);

  z-index: 5; /* ←線より必ず前面 */
}

/* 円：上→下へ（バウンドなし） */
@keyframes siDotDown{
  0%   { transform: translate(-50%, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { transform: translate(-50%, calc(var(--si-height) - var(--si-dot))); opacity: 1; }
  100% { transform: translate(-50%, calc(var(--si-height) - var(--si-dot))); opacity: 0; }
}

/* 線：黒化が上→下へ伸びる */
@keyframes siLineFill{
  0%   { height: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { height: 100%; opacity: 1; }
  100% { height: 100%; opacity: 0; }
}

/* 円：移動に同期して白→黒へ（同じdurationなので自然に同期） */
@keyframes siDotColor{
  0%   { background: var(--si-dot-start); }
  90%  { background: var(--si-dot-end); }
  100% { background: var(--si-dot-end); }
}

/* SP調整 */
@media (max-width: 768px){
  .hero{
    --si-top: 90%;
    --si-height: 44px;
    --si-dot: 5px;
  }
  .hero .scroll-indicator__text{ font-size: 11px; }
}
/*top_catch*/
.top_catch{
	position: absolute;
    top: 220px;
    left: 7vw;
    z-index: 10;
    display: -webkit-flex;
    display: flex;
}
.hero-catch {
  
}

.para-heading {
  position: relative;
  display: inline-block;
  padding: 18px 32px;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  z-index: 1;
	margin-top: 2rem;
}

.para-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0b3c5d; /* ブランドカラー */
  transform: skew(-15deg);
  z-index: -1;
}
/***トピック****/
.topic_inner{
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
	align-items: baseline;
}
.topic_inner p{
	color:#fff;
	padding-left: 2rem;
	mix-blend-mode: overlay;
}
.topic_inner h4{
	color:#fff;
	padding-right: 2rem;
    border-right: 1px solid;
	mix-blend-mode: overlay;
}

/* 斜めの白いブロック（光の帯） */
/**********.hero::after{
  content:"";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  pointer-events: none;
  z-index: 3;             
  opacity: .35;

 
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-18deg);
  filter: blur(0.2px);

  animation: heroSheen 3.8s ease-in-out infinite;
}


@keyframes heroSheen{
  0%   { transform: translateX(0) skewX(-18deg); opacity: 0; }
  12%  { opacity: .35; }
  55%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}


@media (max-width: 768px){
  .hero::after{
    width: 60%;
    opacity: .28;
    animation-duration: 4.6s;
  }
}
**********/
/* 縦書き（COMPANY等） */
.vtext{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .18em;
	transform: translateX(0.2em);
}

/* 日本語縦 */
.vtext-jp{
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .12em;
}

/* 縦文字コンテナを「文字幅＋α」にする */
.company-vert{
  width: fit-content;
  max-width: fit-content;
  padding-left: 5px;
  padding-right: 5px; /* ← 合計で +10px */
	margin-top:-6rem;
}
.massage_Box::before{
	 content: "";
  position: absolute;
  top: 0;
  left: 0;   
  width: 80%;
  height: 100%;
  background: #eaeaea;
  z-index: -1;       
}
.massage_Img{
	margin-top:-3rem;
}
.project{
	margin-top:-8rem;
}
@media (max-width: 768px){
 .vtext{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: .18em;
	transform: none;
}

/* 日本語縦 */
.vtext-jp{
  writing-mode: horizontal-tb;
  text-orientation: upright;
  letter-spacing: .12em;
}

/* 縦文字コンテナを「文字幅＋α」にする */
.company-vert{
  width: fit-content;
  max-width: fit-content;
  padding-left: 5px;
  padding-right: 5px; /* ← 合計で +10px */
	margin-top:-6rem;
}
	.topic_inner{
		margin-bottom: 3rem;
	}
	.topic_inner p{
	color:#fff;
	padding-left: 0.2rem;
	mix-blend-mode: overlay;
}
.topic_inner h4{
	color:#fff;
	padding-right: 0.2rem;
    border-right: 1px solid;
	mix-blend-mode: overlay;
}
.para-heading {
    padding: 10px 24px;
    font-size: 2rem;
    margin-top: 2rem;
}
}


/*お問い合わせ*/
/* 必須マーク */
.wpcf7-form small.text-danger {
    color: #fff !important;
    background-color: #dc3545;
    font-size: 75%;
    padding: 0.1em 0.3em;
    margin-left: 0.5em;
}

/* 入力確認のチェックボックスを大きく */
form .wpcf7-acceptance input[type="checkbox"] {
    transform: scale(2.0);
    margin-right: 0.5em;
}

/* 送信ボタンをぴったり中央に配置 */
.wpcf7-submit.btn {
    margin-left: 72px;
}

/* 見出し左右に線 */
.heading-line .elementor-heading-title{
  display: flex;
  align-items: center;
  gap: 16px; /* 文字と線の間隔 */
}

/* 左右の線 */
.heading-line .elementor-heading-title::before,
.heading-line .elementor-heading-title::after{
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor; /* 文字色と同じ */
  opacity: 0.6; 
}

/* 中央寄せの場合（任意） */
.heading-line{
  text-align: center;
}

/* 見出しを基準にする */
.heading-logo{
  position: relative;
  z-index: 1;
}

/* ロゴ（擬似要素） */
.heading-logo::before{
  content: "";
  position: absolute;
  top: -0.6em;          
  left: 50%;
  transform: translateX(-50%);

  width: 120px;         
  height: 120px;

  background-image: url("https://kinugasa-denki.jp/wp-content/uploads/2026/02/kinugasaロゴW.png"); /* ロゴ画像 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0.08;        
  z-index: -1;           /* 見出しの背面へ */
  pointer-events: none;  /* クリック干渉防止 */
}

/***リンクボタン***/
.button_wrap{
	display: flex;
    justify-content: center;
    align-items: center;
}
.button_link {
    margin: 10px;
    width: auto;
    height: 50px;   
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    color: #000;
    border: 1px solid;
    cursor: pointer;
	padding: 0 2rem;
}

.yazirusi {
    display: inline-flex;
    margin-left: 10px;
    width: 100px;
    height: 10px;
    position: relative;
    right: 2rem;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
}


/**ナビゲーション**/
.main-navigation .menu_Top a{
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
padding-top: 6px;      /* ← 最小限に */
  padding-bottom: 6px;
  line-height: 1.1;      /* ← 行間を詰める */
  min-height: auto;      /* ← Elementor既定を無効化 */ 
}

.main-navigation .menu_Company .menu-link{
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
padding-top: 6px;      /* ← 最小限に */
  padding-bottom: 6px;
  line-height: 1.1;      /* ← 行間を詰める */
  min-height: auto;      /* ← Elementor既定を無効化 */ 
}

.main-navigation .menu_Works a{
   display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
padding-top: 6px;      /* ← 最小限に */
  padding-bottom: 6px;
  line-height: 1.1;      /* ← 行間を詰める */
  min-height: auto;      /* ← Elementor既定を無効化 */ 
}


/* 日本語（擬似要素） */
.main-navigation .menu_Top a::after{
  content: "トップ";
  display: block;
  margin-top: 2px;      
  font-size: 10px;      
  line-height: 1;
  opacity: .65;
}
.main-navigation .menu_Company .menu-link::after{
	content:"会社概要";
  display: block;
  margin-top: 2px;      
  font-size: 10px;      
  line-height: 1;
  opacity: .65;
}
.main-navigation .menu_Works .menu-link::after{
	content:"事業内容";
  display: block;
  margin-top: 2px;      
  font-size: 10px;      
  line-height: 1;
  opacity: .65;
}
.main-navigation .ast-custom-button-link .menu-link::after{
	content:"";
	display:block;
	margin-top: 2px;      
  font-size: 10px;      
  line-height: 1;
  opacity: .65;
}

/*****会社概要********/
.company-table td{
    padding: .7em 0.4em;
    border-width: 0 1px 1px 0;
    font-size: 0.8rem;
}
.company-table th{
    padding: .7em 0.4em;
    border-width: 0 1px 1px 0;
    font-size: 0.8rem;
}

/*****フッター*******/
#astra-footer-menu {
    display: flex;
    flex-direction: column;
}
.footer-nav-wrap .astra-footer-horizontal-menu a {
        padding: 0;
	text-decoration: none!important;
}
.menu-link {
    text-decoration: none!important;
}
.site-below-footer-wrap::before{
	content: "";
    display: block;
    width: 80%;
    height: 2px;
    background: #1a6c7a;
    margin: 0px auto;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"]{
	border-top-width: 1px;
	border:none;
}

/***背景斜め線****/
/* 角に斜め線を置くための土台 */
.organizationBox{
  position: relative;
  overflow: hidden; /* 線がはみ出すのを隠す */
}

/* 左上の斜め線 */
.organizationBox::before{
  content: "";
    position: absolute;
    top: 100px;
    left: 0;
    width: 400px;
    height: 2px;
    background: rgba(26, 108, 122, 0.55);
    transform: rotate(-35deg);
    transform-origin: left center;
    pointer-events: none;
    z-index: 2;
}

/* 右下の斜め線 */
.organizationBox::after{
  content: "";
    position: absolute;
    bottom: 100px;
    right: 14px;
    width: 400px;
    height: 2px;
    background: rgba(26, 108, 122, 0.55);
    transform: rotate(-35deg);
    transform-origin: right center;
    pointer-events: none;
    z-index: 2;
}

/* スマホは少し短く（任意） */
@media (max-width: 767px){
  .organizationBox::before{
    top: 50px;
  }
	.organizationBox::after{
		bottom: 50px;
	}
}