/* TECRITA Corporate: minimal overrides (variables first) */
:root{
  /* Corporate tone: a bit tighter */
  --tecrita-container-pad: 16px;

  /* Hero: calm overlay */
  --hero-overlay: linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.70));
  --hero-text-shadow: 0 2px 24px rgba(2,6,23,.35);

  /* STRACTION */
  --wp--preset--font-family--sans:
    "Noto Sans JP", system-ui, -apple-system,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --fz-hero: clamp(28px, 4vw, 44px);
  --fz-lead: clamp(14px, 1.6vw, 18px);
  --fz-h2: clamp(20px, 1.8vw, 24px);
  --fz-title: clamp(18px, 1.5vw, 20px);
  --fz-16-20: clamp(16px, 1.5vw, 20px);
  --fz-18-32: clamp(18px, 3vw, 32px);
  --fz-20-36: clamp(20px, 4vw, 36px);
  --fz-20-38: clamp(20px, 9vw, 38px);
  --fz-26-40: clamp(26px, 6vw, 40px);
  --fz-30-48: clamp(30px, 7vw, 48px);
  --fz-22-48: clamp(30px, 7vw, 48px);
  --fz-30-80: clamp(30px, 10vw, 80px);
  --fz-80-200: clamp(30px, 18vw, 200px);

  --c-blue: #4AA8D8;
  --c-navy: #1F4E79;
  --c-red: #FF3B3B;
  --c-link: #4267b2;
  --c-l-blue: #d5eeff;
  --c-l-red: #ffe2e2;
  --c-text: #2b2b2b;
  --c-muted: #6f6f6f;
  --c-border: #e9e9e9;
  --c-bg: #ffffff;
  --c-header-bg: rgba(255, 255, 255, .30);
  --c-header-border: rgba(0, 0, 0, .06);
  --c-accent: #353535;
  --c-accent-dark: #202020;
  --c-soft: #ececec;
  --c-ghost: #ffffff;
  --c-ghost-border: rgba(255, 255, 255, .7);

  --shadow1: rgba(0, 0, 0, 0.06) 0px 8px 24px;
}

/* reset */
a {
  text-decoration: none;
}

.site-header{
  max-height: 56px;
}

.site-header__inner {
  padding: 8px 0;
}

.site-main {
  padding-bottom: 0;
}

/* common */
h2 {
  font-size: var(--fz-26-40);
  font-weight: bold;
}

h3 {
  font-size: var(--fz-26-40);
  font-weight: bold;
}

/* ボタン外枠 */
.btn-box1 a{
  position: relative;
  display: inline-flex;
  align-items: center;

  min-width: 300px;
  padding: 18px 56px 18px 32px;

  border: 1px solid #000;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.04em;

  transition: all .3s ease;
}

/* 右の矢印（線） */
.btn-box1 a::after{
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;

  width: 60px;
  height: 1px;
  background: currentColor;

  transform: translateY(-50%);
  transition: width .3s ease;
}

/* 矢印の先端 */
.btn-box1 a::before{
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;

  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;

  transform: translateY(-50%) rotate(45deg);
}

/* hover演出（任意） */
.btn-box1 a:hover{
  background: #000;
  color: #fff;
}

.btn-box1 a:hover::after{
  width: 36px;
}



/* spで改行 */
.sp-break{
  display: inline;
}

/* 幅740px以下で改行 */
@media (max-width: 740px){
  .sp-break{
    display: block;
  }
}


.site-footer {
  background: var(--c-bg);
  color: var(--c-text);
  border-top: 1px solid var(--c-border);
}


/* ---------------------------------------------------------
  index
--------------------------------------------------------- */

/* MV */

.b-hero__slides .wp-block-image{
  position: relative;
}

.b-hero__slides .wp-block-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.2); /* #000 の 20% */
  pointer-events: none;
}

.b-hero__inner {
  text-align: center;
}

.b-hero h1 {
  font-size: var(--fz-30-80);
  margin-bottom: 0;
}

.b-hero__sub {
  font-size: var(--fz-20-36);
}

@media (max-width: 640px){
  .b-hero h1,
  .b-hero__sub {
    text-align: left;
  }
}

/* タイプ */
.b-hero__title{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: .08em solid currentColor; /* 初期カーソル */
  animation:
    tec-typing 2.2s steps(15, end) 0.2s forwards,
    tec-blink .8s step-end infinite;
}

/* タイプ完了でカーソルを消す */
@keyframes tec-typing{
  from{
    width: 0;
    border-right-color: currentColor;
  }
  to{
    width: 15ch;
    border-right-color: transparent; /* ← 完了時に消す */
  }
}

@keyframes tec-blink{
  50%{ border-color: transparent }
}

/* cont1 */

/* 斜め線が“右側の余白”に逃げられるように、外側を基準にする */
.cont1_wrap{
  position: relative;
  overflow: hidden; /* 右にはみ出した線で横スクロール出るのを防止 */
}

/* テキストは前面 */
.cont1_cont{
  position: relative;
  z-index: 1;
}

.cont1_cont h2 {
  font-size: var(--fz-26-40);
}

.cont1_text {
  font-size: var(--fz-16-20);
  font-weight: 700;
}

/* 右の斜めライン（装飾） */
.cont1_cont::after{
  content: "";
  position: absolute;

  /* ここが肝：左カラム要素に付けつつ “右側へ飛ばす” */
  right: 0;
  top: 0;

  width: clamp(380px, 48vw, 600px);
  height: 10px;
  background: var(--c-accent);

  transform-origin: right top;
  transform: rotate(315deg);

  z-index: -1;          /* 背面に回す */
  pointer-events: none; /* クリック干渉防止 */
}

@media (max-width: 740px){
  .cont1_cont::after{
    width: clamp(50px, 28vw, 270px);
  }
}

@media (max-width: 320px){
  .cont1_cont::after{ 
    display: none;
  }
}


/* service */

.topcont_h2 .pre_title {
  font-size: var(--fz-80-200);
  color: var(--c-border);
  font-weight: 900;
}

.topcont_h2 h2 {
  font-size: var(--fz-26-40);
  font-weight: bold;
  margin-top: -120px;
}

@media (max-width: 640px){
  .topcont_h2 .pre_title {
    text-align: right;
  }
  .topcont_h2 h2 {
    margin-top: -60px;
  }
}

/* 0) 全体：2カラムの土台（WPのflexでもOKだけど、gap管理しやすくする） */
.service_cont{
  position: relative;
  gap: clamp(18px, 3vw, 48px);
  align-items: center; /* 縦中央寄せ（右カードが自然に中央に来る） */
}

/* 1) 左：画像（白黒）＋黒い背面 */
.service_left{
  position: relative;
}

/* 画像は“上のレイヤー” */
.service_left figure{
  position: relative;
  margin: 0;
  z-index: 2;
  width: min(580px, 100%);
}

/* 画像の白黒化 */
.service_left img{
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  /* ちょい雰囲気出すなら（不要なら削除） */
  /* filter: grayscale(100%) contrast(1.05); */
}

/* 下レイヤー：黒背景（上下左右 20px） */
.service_left figure::before{
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  right: 20px;
  bottom: -20px;
  background: #000;
  z-index: -1;
}

/* 「左端は1200pxの中に収める」＝alignwide内で完結してるのでOK
   ※もし“左の黒背景だけ”はみ出させたくないなら、ズラしは内側方向にする（↑の -18px を 0 に） */


/* 2) 右：カラム(器)は1200右端まで。カード(中身)だけ重ねる */
.service_right{
  position: relative;
  z-index: 3;

  background: transparent; /* ←白はinnerへ移す */
  padding: 0;              /* ←paddingもinnerへ */
  box-shadow: none;        /* ←影もinnerへ */

  width: 100%;
  min-width: 0;
}

/* 白いカード本体 */
.service_right__inner{
  background: #fff;
  padding: clamp(18px, 2.5vw, 34px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);

  /* 右端まで（＝器いっぱい） */
  width: 125%;

  /* 重ね（marginは使わない） */
  transform: translate(-140px, 20px); /* ← -80px から増やすのがコツ */
}


/* 3) レスポンシブ：スマホは重ねを解除して縦積み */
@media (max-width: 900px){
  .service_cont{
    flex-direction: column;
    align-items: stretch;
  }

  .service_left figure{
    width: 100%;
    max-width: 680px;
  }

  /* ※黒背景は transform じゃなく inset 指定で作ってるなら、ここは消してOK */
  .service_left figure::before{
    transform: none;
  }

  .service_right__inner{
    transform: none;   /* ← 解除はこれで確実 */
    width: 100%;
  }
}

/* ===============================
   .rev：左右反転バージョン
================================ */

/* ① カラムの並びを反転 */
.service_cont.rev{
  flex-direction: row-reverse;
}

/* ② 左（= 右に来る）画像の黒背景を逆方向へ */
.service_cont.rev .service_left figure::before{
  left: 20px;
  right: -20px;
}

/* ③ 右カードの重ね方向を逆に */
.service_cont.rev .service_right__inner{
  transform: translate(20px, 20px);
}

/* ===============================
   レスポンシブ（スマホ）
   ※ 元の指定をそのまま流用
================================ */
@media (max-width: 900px){
  .service_cont.rev{
    flex-direction: column;
  }

  .service_cont.rev .service_right__inner{
    transform: none;
    width: 100%;
  }
}


/* works */
.works_cont a {
  transition: all .3s ease;
}

.works_cont a img {
  filter: grayscale(100%);
}

.works_cont a:hover img {
  filter: grayscale(10%);
}

/* about us */
.aboutus_cont img {
  filter: saturate(0);
}

.aboutus_cont .btn-box1 a {
  background-color: var(--c-bg);
  opacity: 85%;
}

.aboutus_cont p:last-child{
  margin-top: 20px;
}

/* news */
.news_wrap h2 {
  font-size: var(--fz-26-40);
}

.news_wrap h2{
  display: flex;
  align-items: center;
  gap: 50px; /* 文字と線の間隔 */
}

/* 右側のライン */
.news_wrap h2::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-accent);
  opacity: .6;
}

.news_right ul {
  max-width: 760px;
  margin: 0 auto;
}

.news_text > li.wp-block-post {
  gap: 8px 20px;
}

.news_text .news_cat {
  margin-right: auto;
  margin-left: 0;
  border-radius: 0;
}

li.category-news .news_cat a {
  background: var(--c-accent);
}


/* ---------------------------------------------------------
  service
--------------------------------------------------------- */


/* 飛行機 */
.planePath {
  stroke: #D9DADA;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  fill: none;
}

.fil1 {
  fill: #D9DADA;
}

.fil2 {
  fill: #C5C6C6;
}

.fil4 {
  fill: #9D9E9E;
}

.fil3 {
  fill: #AEAFB0;
}


.seivice1_wrap {
  position: relative;
  width: 100vw;
  background-color: #ffffff;
  background-image: radial-gradient(circle, var(--c-soft) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 4px 4px;
  overflow-x: clip;
  padding-top: 1px;
  padding-bottom: 1px;
}

.seivice1_wrap > .alignwide {
  margin: 4rem;
  padding: 4rem;
}


.seivice1_cont {
  padding: 20px 15px;
  box-shadow: var(--shadow1);
}

.seivice1_cont i {
  font-size: 40px;
  color: var(--c-muted);
  text-align: center;
  display: block;
  margin: 50px auto;
}

.seivice1_wrap h3.hx-title-page {
  background: var(--c-text);
  padding: 5px 20px;
  color: #FFF;
  font-weight: normal;
  font-size: var(--fz-16-20);
  text-align: center;
}

/* ===============================
   about
================================ */
/* greeting */
.greeting_wrap.is-layout-constrained > figure.wp-block-image{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.greeting_wrap.is-layout-constrained > div.greeting_block {
  margin-left: 100px !important;
}

.greeting_wrap figure {
  max-width: 50%;
  position: relative;
  z-index: 0;
}

.greeting_block {
  background: #ffffffe6;
  padding: 30px;
  box-shadow: var(--shadow1);
  position: relative;
  z-index: 1;
  margin-top: -80px;
  margin-left: 100px;
}

.tecrita-company-table table, .tecrita-company-table th, .tecrita-company-table td {
  min-width: unset;
}

@media (max-width:640px){
  .greeting_wrap figure {
    max-width: 95%;
  }
  .greeting_block {
    margin-left: 10px;
    padding: 30px 15px;
  }

  .greeting_wrap.is-layout-constrained > div.greeting_block {
    margin-left: 10px !important;
  }
}

/* Google Map iframe：通常はモノクロ、ホバーでカラー */
iframe.alignfull{
  filter: grayscale(100%) saturate(0);
  transition: filter .25s ease;
}

/* PCは hover でカラー */
@media (hover:hover){
  iframe.alignfull:hover{
    filter: none; /* or: grayscale(0) saturate(1); */
  }
}


/* ===============================
   contact
================================ */
.smf-button-control {
  margin: 0 auto;
}

.smf-action .smf-button-control__control {
  background-color: var(--c-accent-dark);
  color: var(--c-bg);
  background-image: none;
  padding: 18px 56px;
  transition: all .5s ease;
}

.smf-action .smf-button-control__control:hover{
  background-color: var(--_color-gray);
}

.smf-action {
  margin-top: 50px;
}

.smf-form .smf-text-control__control {
  padding: 5px;
}