@charset "UTF-8";
/* CSS Document */
body{

  display: flex;
    flex-flow: column;
    min-height: 100vh;
}

body {
    
}

main {
    flex: 1;
}

h1{
  font-size: 24px;
  font-weight:bold;
  letter-spacing: 0.05em;
  color:#254072;
}

h2{
   font-size: 3.8rem;
  font-weight:900;
  border-bottom: solid 5px #365ca5;
  color:#365ca5;
}

h3{
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  align-items: center;
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}

h3::before,
h3::after {
  display:inline-block;
  background-color: #365ca5; /* 横線の色 */
  content: "";
  height: 3px; /* 横線の高さ */
  width: 40px; /* 横線の長さ */
}
h3::before {
  margin-right: 15px; /* 文字との余白 */
}
h3::after {
  margin-left: 15px; /* 文字との余白 */
}

.bd-desp{
  font-size: 1.125rem;
}

.bg-thumbnailbox{
  background-color: #EDF1F4;
  padding: 15px;
}

#type02{
  height: 100px;
}


#over_companybrochure_main_title{
	width:100%;
}
.companybrochure_main_title{
  border: solid 1px #365ca5;
}

.main-motto{
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  color:#000;
  text-align: center;
}
.bd-backgroundimg1{
  background-image: url("../images/business-overview/anchorconstruction-main.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg2{
  background-image: url("../images/business-overview/boring_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg3{
  background-image: url("../images/business-overview/dam_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg4{
  background-image: url("../images/business-overview/welldrilling_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg5{
  background-image: url("../images/business-overview/boringhole_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg6{
  background-image: url("../images/business-overview/PW_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}
.bd-backgroundimg7{
  background-image: url("../images/business-overview/grouting_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg8{
  background-image: url("../images/business-overview/chemical_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg9{
  background-image: url("../images/business-overview/slopeconstruction_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg10{
  background-image: url("../images/business-overview/geologicalsurvey_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.bd-backgroundimg11{
  background-image: url("../images/business-overview/groundinvestigation_img01.webp");
  background-size: cover;
          background-position: center;
 background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

.hero-cover {
      position: relative;
      min-height: 80vh; /* 好みで 50–100vh などに調整 */
      background: url("../images/business-overview/bd-main.webp") center center / cover no-repeat;
  
    }

    .hero-cover .container {      /* テキストを中央寄せ */
      position: relative; z-index: 1;
    }

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom: 0px;
  left: 50%;
}

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#000;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:80px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:2px;
  height: 80px;
  background:#000;
}

.motto-desp{
  font-size: 1.125rem;
  line-height: 1.8;
}

.fade-in {
  padding: 10px;
  animation: fadeIn 1s ease 1s 1 normal backwards;
  animation-range:cover
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

    .fade-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1.2s ease-out, transform 0.6s ease-out;
    }
    .fade-up.show {
      opacity: 1;
      transform: translateY(0);
    }

/* 画像はそのままの比率で横幅いっぱい */
.hero img {
  width: 100%;
  height: auto;   /* ← 等比で縮放 */
  display: block; /* 画像下の隙間防止 */
}

/* キャプションを中央に重ねる */
.hero-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;              /* 画像に合わせて適宜 #fff などに変更 */
  padding: 0 1rem;          /* 画面端にくっつかないよう余白 */
  z-index: 2;
}

/* 視認性確保のための薄いオーバーレイ（任意でON/OFF） */


/* タイポのレスポンシブ調整 */
.hero-caption h1 {
  font-size: 2rem;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7); /* 背景によるつぶれ防止（黒文字なら白影） */
}
.hero-caption p {
  font-size: 1rem;
  line-height: 1.8;
}

/* 768px以上で少し大きく */
@media (min-width: 768px) {
  .hero-caption h1 { font-size: 3rem; }
  .hero-caption p  { font-size: 1.125rem; }
}

/* === Animated Headline (cool intro + shimmer) === */
    .fx-title {
      --stagger: 60ms;     /* 文字ごとの遅延 */
      --duration: .7s;     /* 1文字のアニメ時間 */
      --delay: 0ms;        /* 開始ディレイ */
      --easing: cubic-bezier(.2,.65,.16,1);
      position: relative;
      display: inline-block;
      letter-spacing: .03em;
      font-weight: 800;
    }
    .fx-title .char {
      display: inline-block;
      opacity: 0;
      transform: translateY(18px) scale(.98);
      filter: blur(8px);
      animation: fx-rise-in var(--duration) var(--easing) forwards;
      animation-delay: calc(var(--i) * var(--stagger) + var(--delay));
      will-change: transform, opacity, filter;
    }
    @keyframes fx-rise-in {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    /* 仕上げのシャイン（1回走る） */
    .fx-title::after {
      content: "";
      position: absolute;
      inset: -4px -8px;
      background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.6) 45%, transparent 65%);
      background-size: 200% 100%;
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0;
      animation: fx-shine 1.8s 1s ease-out both;
    }
    @keyframes fx-shine {
      0%   { background-position: 200% 0; opacity: 0; }
      10%  { opacity: .7; }
      60%  { opacity: .35; }
      100% { background-position: -20% 0; opacity: 0; }
    }
    /* 読みやすさ向上 */
    .fx-title { text-shadow: 0 2px 10px rgba(0,0,0,.15); }

    /* prefers-reduced-motion: respect */
    @media (prefers-reduced-motion: reduce) {
      .fx-title .char { animation: none !important; opacity: 1; transform: none; filter: none; }
      .fx-title::after { display: none; }
    }

companybrochure_sub_title{

}


#around_companybrochure_sub_table{
  margin: 30px auto 0px;
}
#companybrochure_sub_table{
  border: solid 1px #e8e8e8;
  font-size:15px;
}

#companybrochure_sub_table td,#companybrochure_sub_table th,#companybrochure_sub_table tr{
  border: solid 1px #e8e8e8;
  padding:20px;
}

#companybrochure_sub_table th{
  background-color: #f7f7f7;
  font-weight: inherit;
}

.over_companybrochure_sub_heading{
  width:100%;
}

.around_companybrochure_sub_heading{
}

.companybrochure_sub_heading{
  margin-left: 20px; 
}

.companybrochure_sub_heading dt{
  font-size: 20px;
  font-weight: inherit;
  margin-left: 20px;
}
.companybrochure_sub_heading dd{
  font-size: 18px;
  line-height:30px;
  margin-left: 40px;
  font-weight: inherit;
}

.companybrochure_sub_heading dt:first-child{
  margin-top:20px;
}

.companybrochure_sub_heading dt:nth-child(n+2){
  margin-top:30px;
}

#over_companybrochure_access{
  width: 100%;
}

#around_companybrochure_access{
  width: 940px;
  margin: 30px auto 0px;
}

.companybrochure_access_title{
  text-align: center;
}

.companybrochure_access_title span{
  display: block;
  padding:5px 30px;
  background-color: #4f87f1;
  border-radius: 5px;
  line-height:30px;
  font-size: 20px;
  color:#fff;
  letter-spacing: 0.075em;
}

.googlemap-box iframe{
  width:100%;
  height:450px;
}

/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media (max-width: 575.98px) {
  #companybrochure_sub_table{
    font-size:14px;
  }
  .main-motto{
    font-size: 2.4rem;
  }
}

/* 小デバイス（横向きモバイル, 768px 未満）*/
@media (max-width: 767.98px) {
  
  h1{
  font-size: 22px;
}
  
  h2{
	font-size: 2.4rem;
}
  h3{
  font-size: 1.6rem;
}
  
  
  .companybrochure_sub_heading{
  margin-left: 10px; 
}

.companybrochure_sub_heading dt{
  font-size: 16px;
  font-weight: inherit;
  margin-left: 10px;
}
.companybrochure_sub_heading dd{
  font-size: 14px;
  line-height:30px;
  margin-left: 20px;
  font-weight: inherit;
}

.companybrochure_sub_heading dt:first-child{
  margin-top:10px;
}

.companybrochure_sub_heading dt:nth-child(n+2){
  margin-top:10px;
}
  
}

/* 中デバイス（タブレット, 992px 未満）*/
@media (max-width: 991.98px) {
  h2{
   font-size: 1.8rem;

}


}

/* 大デバイス（デスクトップ, 1200px 未満）*/
@media (max-width: 1199.98px) {
  
}