@charset "UTF-8";
/* line 4, sass/partial/_css3button.scss */
.button {
  text-align: center;
  text-decoration: none;
  outline: none;
}

/* line 9, sass/partial/_css3button.scss */
.button::before, .button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

/* line 18, sass/partial/_css3button.scss */
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

/* line 83, sass/partial/_css3button.scss */
.list-btn {
  background-color: #333;
  border: 2px solid #333;
  color: #FFF;
}

/* line 89, sass/partial/_css3button.scss */
.list-btn:hover {
  background-color: #FFF;
  border-color: #339900;
  color: #339900;
}

/* line 96, sass/partial/_css3button.scss */
.list-btn-hover {
  background-color: #FFF;
  border-color: #339900;
  color: #339900;
}

/* line 14, sass/partial/_buttons.scss */
.list-btn {
  display: inline-block;
  border: #339900 1px solid;
  position: relative;
}

/* line 27, sass/partial/_buttons.scss */
.list-btn:after {
  content: "";
  width: 14px;
  border-radius: 0;
  margin: 6px 0 8px 5px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  background: #fff url(../images/right-r.png) center center no-repeat;
  z-index: 1;
}

/* line 42, sass/partial/_buttons.scss */
.facebook-share-link-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #FFF !important;
  text-align: center;
  font-size: 18px;
  width: 300px;
  margin-top: 50px;
  padding: 10px 0;
  border-radius: 0;
  background-color: #4e69a2 !important;
  border-color: #435a8b #3c5488 #334c83 !important;
}

/* line 3, sass/partial/_pager.scss */
.pagination-box {
  padding: 30px 0;
  text-align: center;
}

/* line 7, sass/partial/_pager.scss */
.pagination-box-bottom {
  text-align: center;
}

/** ページャー */
/* line 14, sass/partial/_pager.scss */
.pagination {
  clear: both;
  padding: 0;
  font-size: 11px;
  line-height: 13px;
  margin: 0 5px;
  display: inline-block;
}

/* line 25, sass/partial/_pager.scss */
.pagination span, .pagination a {
  display: block;
  float: left;
  margin: 2px 5px 5px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #fff;
  background: #2F3436;
}

/* line 36, sass/partial/_pager.scss */
.pagination a:hover {
  color: #fff;
  background: #595D5F;
}

/* line 41, sass/partial/_pager.scss */
.pagination a:link {
  color: #fff;
}

/* line 45, sass/partial/_pager.scss */
.pagination .current {
  padding: 6px 9px 5px 9px;
  background: #595D5F;
  color: #fff;
}

/* line 51, sass/partial/_pager.scss */
.clear {
  clear: both;
}

/* line 10, sass/custom.scss */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

/* line 17, sass/custom.scss */
.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;';
}

/* line 22, sass/custom.scss */
.object-fit-img-cover {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

/* line 28, sass/custom.scss */
img {
  max-width: 100%;
  height: auto;
}

/* line 33, sass/custom.scss */
.clear {
  clear: both;
}

/* line 37, sass/custom.scss */
.bold {
  font-weight: bold;
}

/* line 41, sass/custom.scss */
.under {
  text-decoration: underline;
}

/* line 44, sass/custom.scss */
.mtop0 {
  margin-top: 0 !important;
}

/* line 50, sass/custom.scss */
img.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

/* line 55, sass/custom.scss */
img.alignright,
.wp-caption.alignright {
  margin: 12px 0 12px 24px;
}

/* line 60, sass/custom.scss */
img.alignleft,
.wp-caption.alignleft {
  margin: 12px 24px 12px 0;
}

/* line 66, sass/custom.scss */
table {
  font-size: 14px;
  margin-bottom: 1.5em;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 73, sass/custom.scss */
table td, table th {
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}

/* line 78, sass/custom.scss */
table td {
  padding: 10px;
  vertical-align: top;
  border-top: 1px solid #f1f1f1;
}

/* line 83, sass/custom.scss */
table td.head {
  font-weight: bold;
}

/* line 87, sass/custom.scss */
table td.even img {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* line 93, sass/custom.scss */
table tr:nth-child(2n) {
  background-color: #f9f9f9;
}

/* line 97, sass/custom.scss */
table th {
  border-top: 1px solid #f1f1f1;
  padding: 10px;
}

/* line 102, sass/custom.scss */
table tr.alt {
  background: #f1f1f1;
}

/* line 107, sass/custom.scss */
.table-wrap {
  overflow: auto;
}

/* line 111, sass/custom.scss */
.gmap {
  margin-top: 0.6em;
  margin-bottom: 1em;
}

/* line 116, sass/custom.scss */
.dt, table th, .label, strong {
  font-weight: 600;
}

/* line 120, sass/custom.scss */
.footer_c21_text {
  display: inline;
  margin-top: 5px;
}

/* line 125, sass/custom.scss */
nav.post-navigation {
  margin: 50px 0 0;
  border-top: 2px solid #333333;
  background-color: #FFF;
}

/* line 131, sass/custom.scss */
nav.post-navigation .screen-reader-text {
  display: none;
}

/* line 136, sass/custom.scss */
nav.post-navigation .nav-links > div {
  padding: 8px 0;
  border-bottom: 1px dotted #cccccc;
}

/* line 140, sass/custom.scss */
nav.post-navigation .nav-links > div a {
  color: #333333;
  text-decoration: none;
}

/* line 146, sass/custom.scss */
nav.post-navigation .nav-links .nav-previous {
  padding-left: 30px;
}

/* line 149, sass/custom.scss */
nav.post-navigation .nav-links .nav-next {
  padding-right: 30px;
  text-align: right;
  border-bottom: 0;
}

@media all and (max-width: 500px) {
  /* line 160, sass/custom.scss */
  img.alignright,
  .wp-caption.alignright {
    margin: 20px auto;
  }
  /* line 165, sass/custom.scss */
  img.alignleft,
  .wp-caption.alignleft {
    margin: 20px auto;
  }
}
.top-business-ul li:first-child {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../images/top-business01.jpg) center center no-repeat;
  background-size: cover;
}
.top-business-ul li:nth-child(2) {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../images/top-business02.jpg) center center no-repeat;
  background-size: cover;
}
.top-business-ul li:nth-child(3) {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../images/top-business03.jpg) center center no-repeat;
  background-size: cover;
}
.top-business-ul li:nth-child(4) {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url(../images/top-business04.jpg) center center no-repeat;
  background-size: cover;
}
.home-txt01 {
  text-shadow: 2px 2px 8px rgba(0,0,0,0.8), -1px -1px 4px rgba(0,0,0,0.6);
}

.home-txt02 {
  text-shadow: 1px 1px 6px rgba(0,0,0,0.8), -1px -1px 3px rgba(0,0,0,0.6);
}
.top-logo-div02 {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
}

.top-logo-div01 img {
  filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.7));
}
.logo-bottom {
  background: none !important;
}

@media screen and (max-width: 768px) {
  .page-content div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  .page-content div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .page-content div[style*="grid-template-columns"] p[style*="font-size: 15px"],
  .page-content div[style*="grid-template-columns"] p[style*="font-weight: bold"] {
    font-size: 12px !important;
  }
  .page-content div[style*="grid-template-columns"] p[style*="font-size: 12px"] {
    font-size: 10px !important;
  }
  .page-content div[style*="grid-template-columns"] > div {
    padding: 0.75rem !important;
  }
  .page-content div[style*="grid-template-columns"] img {
    max-width: 100% !important;
  }
}


@media screen and (max-width: 768px) {
  .page-content div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


.nav li {
  width: 14.2857%;
}
@media screen and (max-width: 960px) {
  .nav li {
    width: 14.2857%;
  }
}
@media screen and (max-width: 768px) {
  .nav li {
    width: 100%;
  }
}


@media screen and (max-width: 768px) {
  .page-content div[style*="grid-template-columns"] img[style*="max-width"] {
    max-width: 120px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ===== トップページ ヒーロー演出（スライドショー＋文字アニメーション）===== */
/* 元の写真（mainbg.jpg）を最初に見せ、トンネル写真4枚を順にクロスフェード。30秒周期（1枚6秒） */
.home-main .hero-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  animation: heroFade 30s infinite;
}
.home-main .hero-slide:nth-of-type(1) { background-image: url("https://mitou-construction.jp/wp-content/uploads/2026/09/top-slide-01.jpg"); animation-delay: 6s; }
.home-main .hero-slide:nth-of-type(2) { background-image: url("https://mitou-construction.jp/wp-content/uploads/2026/09/top-slide-02.jpg"); animation-delay: 12s; }
.home-main .hero-slide:nth-of-type(3) { background-image: url("https://mitou-construction.jp/wp-content/uploads/2026/09/top-slide-03.jpg"); animation-delay: 18s; }
.home-main .hero-slide:nth-of-type(4) { background-image: url("https://mitou-construction.jp/wp-content/uploads/2026/09/top-slide-04.jpg"); animation-delay: 24s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}
/* 白文字が読めるよう、写真の上に薄い暗幕をかける（既存の網目は ::before のまま） */
.home-main::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.38) 100%);
  pointer-events: none;
}
/* 日本語キャッチコピー：下からふわっと浮かび上がる（1回だけ） */
.home-txt01 {
  opacity: 0;
  transform: translateY(24px);
  animation: heroRise 1.4s ease-out 0.4s forwards;
}
/* 英語の副題：タイプライター風（1回だけ） */
.home-txt02 {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(255,255,255,0.85);
  width: 0;
  animation: heroTyping 3.2s steps(70, end) 1.8s forwards, heroCaret 0.8s step-end 1.8s 5, heroCaretOff 0s 6.6s forwards;
}
/* 会社概要ボタン：最後にふわっと表示 */
.home-txt03 {
  opacity: 0;
  animation: heroRise 1.2s ease-out 5s forwards;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroTyping { from { width: 0; } to { width: 100%; } }
@keyframes heroCaret { 50% { border-color: transparent; } }
@keyframes heroCaretOff { to { border-right-color: transparent; } }
@media (max-width: 768px) {
  /* スマホは英語の副題が折り返すため、タイプ表示ではなくふわっと表示にする */
  .home-txt02 { white-space: normal; width: auto; border-right: 0; opacity: 0; animation: heroRise 1.2s ease-out 1.6s forwards; }
}
/* 「動きを減らす」設定の端末：文字の動き（浮かぶ・打ち出し）は止め、透明度だけで順にふわっと現れる。
   写真のやわらかな切り替え（透明度の変化のみ）も残す */
@media (prefers-reduced-motion: reduce) {
  .home-txt01 { transform: none; animation: heroFadeOnly 1.6s ease-out 0.4s forwards; }
  .home-txt02 { opacity: 0; width: auto; border-right: 0; white-space: normal; animation: heroFadeOnly 1.6s ease-out 1.6s forwards; }
  .home-txt03 { animation: heroFadeOnly 1.4s ease-out 3.2s forwards; }
}
@keyframes heroFadeOnly { from { opacity: 0; } to { opacity: 1; } }


/* ===== 下層ページ上部のヘッダー画像：完成した地下通路の写真に変更（ギャラリー：泥土圧矩形シールド W7.92m×H5.02 L=218） ===== */
/* 元のヘルメット画像の指定は style.css にそのまま残してあります。ここを消せば元に戻ります。 */
.header-business,
.header-gallery {
  background: url("../images/business/header-tunnel-bg.jpg") center center / cover no-repeat;
}


/* ===== スマホ：ヒーローのスライドショー対応（768px以下） ===== */
/* スマホではテーマが .home-main の <img> を消し、.header-home の背景で写真を見せる設計のため .home-main の高さは0になる。
   基準位置を外して、スライドが .header-home（高さ340px以上）全体に広がるようにする。 */
@media screen and (max-width: 768px) {
  .home-main { position: static; }
  /* 元の設計では見えていなかった網目を、新たに全面へ出さない */
  .home-main::before { display: none; }
  /* 写真ごとに、トンネルの奥（見せたい中心）が文字・ボタンを避けて枠に入る位置を指定 */
  .home-main .hero-slide:nth-of-type(1) { background-position: 38% center; }
  .home-main .hero-slide:nth-of-type(2) { background-position: 20% center; }
  .home-main .hero-slide:nth-of-type(3) { background-position: 22% center; }
  .home-main .hero-slide:nth-of-type(4) { background-position: 82% center; }
  /* 暗幕：上は薄く、文字が載る中段〜下だけ濃くする */
  .home-main::after { background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.42) 100%); }
  /* 文字の影：元の影を残したうえで、外側に広いぼかしを重ねて、細かい模様の写真でも読みやすくする */
  .home-txt01 { text-shadow: 2px 2px 8px rgba(0,0,0,0.85), -1px -1px 4px rgba(0,0,0,0.65), 0 0 22px rgba(0,0,0,0.75); }
  .home-txt02 { text-shadow: 1px 1px 6px rgba(0,0,0,0.85), -1px -1px 3px rgba(0,0,0,0.65), 0 0 18px rgba(0,0,0,0.75); }
}


/* ===== ヘッダーバー（白い半透明の帯＋濃紺ロゴ）とキャッチコピーの拡大 ===== */
/* ロゴ帯：写真の上に白い半透明の帯を敷き、濃紺のロゴを載せる。元の logo.png（白）はフッター等でそのまま使用 */
.top-info { background: rgba(255,255,255,0.92); }
.top-logo-div02 { color: #122a42; text-shadow: none; }
.top-logo-div01 img {
  /* 元の白い画像は枠の外へ追い出し、背景として濃紺のロゴを表示する（テンプレートは変更しない） */
  background: url("../images/logo-navy.png") center center / contain no-repeat;
  object-fit: none;
  object-position: -9999px 0;
  filter: none;
}

/* キャッチコピー：画面幅ごとに一段大きく（元は 1600px超 48px／〜1600px 30px／〜1280px 24px／〜960px 20px／〜468px 16px） */
@media (max-width: 1600px) { .home-txt01 { font-size: 40px; } .home-txt02 { font-size: 26px; } }
@media (max-width: 1280px) { .home-txt01 { font-size: 34px; } .home-txt02 { font-size: 22px; } }
@media (max-width: 960px)  { .home-txt01 { font-size: 28px; } .home-txt02 { font-size: 18px; } }
@media (max-width: 768px)  { .home-txt01 { font-size: 24px; } .home-txt02 { font-size: 16px; } }
@media (max-width: 468px)  { .home-txt01 { font-size: 21px; } .home-txt02 { font-size: 15px; } }
/* スマホ・タブレットでは、文字が大きくなった分、ロゴ帯とのあいだに余白ができるよう、文字ブロックを少し下げる */
@media (max-width: 768px)  { .home-txt { bottom: 12%; } }


/* ===== ヘッダーの整理（説明文を非表示・電話ボタンを非表示・ロゴとお問合せの高さをそろえる）／フッターの電話番号を非表示 ===== */
/* 説明文（h1）は、検索エンジンが見出しとして読むためHTMLには残し、画面からのみ外す */
.top-logo-div02 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* フッター（会社ロゴの下）の電話番号を非表示 */
.logo-bottom-tel { display: none; }
/* 電話ボタンは、PC・スマホ（下部の固定バー）とも非表示 */
.top-contact a.top-contact-tel { display: none; }
/* お問合せボタン：アイコンを文字の横に並べる（高さを変えても、全幅になっても、文字から離れない） */
.top-contact a.top-contact-mail { padding: 0 30px; }
.top-contact a.top-contact-mail::before { position: static; top: auto; flex-shrink: 0; margin-right: 10px; }

/* PC幅：ヘッダーバーの高さを固定し、ロゴとお問合せボタンを同じ高さ・同じ中心線にそろえる（ロゴとボタンは小ぶりに） */
@media screen and (min-width: 769px) {
  .top-info {
    height: 64px;
    align-items: center;
    background: rgba(255,255,255,0.78);          /* 背景をうっすら透かす */
    -webkit-backdrop-filter: blur(8px) brightness(1.5);
    backdrop-filter: blur(8px) brightness(1.5);   /* 透けた背景をぼかし、明るく持ち上げて、グレーっぽさを抑える */
  }
  .top-info .top-logo { margin: 0 0 0 40px; height: 64px; display: flex; align-items: center; }
  .top-info .top-logo-div01 img { width: 190px; height: 38px; }
  .top-info .top-logo-div01 a { max-width: 190px; }
  .top-info .top-contact { height: 64px; display: flex; align-items: stretch; }
  .top-contact a.top-contact-mail { height: 64px; font-size: 16px; padding: 0 26px; }
  .top-contact a.top-contact-mail::before { width: 24px; height: 13px; margin-right: 9px; }
}
/* スマホ幅：電話ボタンが消えた分、お問合せボタンを下部バーの全幅にする */
@media screen and (max-width: 768px) {
  .top-contact a.top-contact-mail { width: 100%; }
}


/* ===== メニューをヘッダーバーへ（PC幅・1180px以上）：ロゴ｜メニュー｜お問合せ を1本の帯に並べる ===== */
/* HTMLは変更せず、既存の .menu（body直下・ul 1つ・ドロップダウンなし）をCSSだけで帯の空白へ重ねる。
   1180px未満（タブレット・スマホ）は従来どおり。ここを削除すれば元の紺色メニュー帯に戻る。 */
@media screen and (min-width: 1180px) {
  .menu {
    position: absolute; top: 0; left: 250px; right: 149px; z-index: 5;
    width: auto; height: 64px; background: transparent; margin: 0;
  }
  .menu ul { display: flex; height: 64px; align-items: center; justify-content: flex-end; }
  .menu ul li { width: auto; height: 64px; border-left: 0; position: relative; }
  .menu ul li::before { display: none; }            /* 飾りの三角を消す */
  /* 区切り線：2番目以降の項目の左に、高さ26pxの細い線 */
  .menu ul li + li::after { content: ""; display: block; position: absolute; left: 0; top: 19px; width: 1px; height: 26px; background: rgba(18,42,66,0.18); }
  .menu ul li a { display: flex; flex-direction: column; justify-content: center; height: 64px; padding: 0 18px; color: #1a1a1a; font-size: 15px; font-weight: bold; line-height: 1.25; text-align: center; }
  .menu ul li a span { display: block; font-size: 11px; font-weight: normal; letter-spacing: 0.06em; color: #1a1a1a; opacity: 0.7; }
}


/* ===== ヘッダーバーの安定化（PC幅・1180px以上）=====
   1) ウィンドウの高さが低いとき、ヘッダー写真の高さも低くなり、キャッチコピーが上に押し上げられて
      メニューと重なっていた問題を、ヘッダーに最低限の高さ(620px)を設けて防止。
   2) 下にスクロールしても、ロゴ・メニュー・お問合せの帯が画面上部に固定されたまま付いてくるようにする。 */
@media screen and (min-width: 1180px) {
  header.header-home { min-height: 620px; }
  .top-info { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; }
  .menu { position: fixed; top: 0; z-index: 51; }
}


/* ===== ヘッダー写真の下の隙間を埋める（PC幅・1180px以上）=====
   以前は、この隙間に紺色のメニュー帯が写り込み、継ぎ目が目立たなかった。
   メニューを上の帯へ移したことで隙間が露出し、白く見えていた（SCROLLの文字も白背景に紛れて読めなくなっていた）ため、
   ヘッダーに暗い背景色を敷いて、写真の下端と自然になじむようにする。 */
@media screen and (min-width: 1180px) {
  header.header-home { background-color: #1a1a1a; }
}


/* ===== 下層ページのタイトルを縦中央に／トップの黒帯とSCROLL（PC幅・1180px以上）=====
   帯を追加したため、タイトルが真ん中からずれていた。帯の下端〜写真の下端の中心に、日本語・英語のタイトルを揃える。
   トップは、旧メニュー帯があった写真の下に、高さ90pxの黒帯を設け、その縦の中心に SCROLL を置く。 */
@media screen and (min-width: 1180px) {
  header.header-page h2 {
    box-sizing: border-box; height: 100%;
    padding: 64px 0 0;                                    /* 帯（高さ64px）ぶんを上に空ける */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  header.header-home::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: #1a1a1a; z-index: 2; pointer-events: none;
  }
  .scroll { bottom: 30px; z-index: 4; }                   /* 文字の高さ29px → (90 - 29) / 2 ≒ 30px で黒帯の中心 */
}