:root {
  /* ===== Colors ===== */
  --color-bg: #000;
  --color-text: #fff;
  --color-primary: #3aaed8;
  --color-primary-light: #333;
  --color-accent: #ffd700;

  /* ===== Typography ===== */
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-base: 16px;
  --font-size-heading: 2em;

  /* ===== Spacing ===== */
  --padding-inner: 0.75em;
  --padding-section: 6em;
  --margin-bottom-section: 4em;

  /* ===== Breakpoints ===== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}
p, li, h2, h3 {
  padding-bottom: 0;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
body {
    background-color: var(--color-bg);
}

:root {
  --font-size-heading: 6em;
  --font-size-heading-sm: 4em;
  --font-size-subtext: 1.75rem;
  --font-size-subtext-sm: 1.2rem;

  --padding-heading: 10%;
  --padding-heading-sm: 5%;
}

/* ===== 個別ポイント ===== */
/* TOPに戻るボタン */
.page_top_btn {
  position: fixed;
  bottom: 4%;
  right: 1%;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  z-index: 999;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
}

.page_top_btn:hover {
  background-color: #0087e5;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.page_top_btn:focus {
  outline: 2px solid #0087e5;
  outline-offset: 4px;
}

.page_top_btn:active {
  transform: scale(0.95);
}

.page_top_btn i {
  font-size: 20px;
}

@media screen and (max-width: 576px) {
  .page_top_btn {
    width: 40px;
    height: 40px;
  }

  .page_top_btn i {
    font-size: 16px;
  }
}

/* ページヘッダーh1位置調整 */
.page-header-title {
	margin-top: 8%!important;
  font-size: 3rem!important;
  letter-spacing: 0.1em!important;
}
/* スマホのみ表示 */
@media ( max-width:575.98px ) {
  .page-header-title {
	margin-top: 25%!important;
  font-size: 2rem!important;
}
}


/* ===== ヒーローエリア ===== */
.hero-copy {
    white-space: nowrap;
    font-size: 3em;
    line-height: 1.6;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    padding-left: 20%;
    z-index: 2;
  }
  /* 右カラム：カバーブロック用 */
.hero-right {
  width: 80%;
  overflow: hidden;

  .wp-block-cover.hero-cover {
    width: 100%;
    height: 100%;
  }

  .wp-block-cover__image-background {
    transform: scale(1.1);
    animation: shrinkImage 4s ease-out forwards;
    transform-origin: center center;
  }
}

/* 画像縮小アニメーション */
@keyframes shrinkImage {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.hero-cover {
  position: relative;
  overflow: hidden;
}

/* 背景画像の縮小アニメーション */
.hero-cover .wp-block-cover__image-background {
  display: block;
  transform: scale(1.1);
  animation: shrinkImage 5s ease-out forwards;
  transform-origin: center center;
}

/* アニメーション定義 */
@keyframes shrinkImage {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

/* 斜線オーバーレイ */
.hero-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(58, 174, 216, 0.4) 0px,
      rgba(58, 174, 216, 0.4) 1px,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 50%
    );
  background-size: 6px 6px;
  z-index: 1;
  pointer-events: none;
}

/* テキストコンテナをオーバーレイより上に */
.hero-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
}

/* ===== セクションエリア ===== */
.section{
    padding-top: var(--padding-section) !important;
    padding-bottom: var(--padding-section) !important;
}
/* h2デザイン */
.section-title {
  position: relative;
  padding: 2rem 0;
  font-size: clamp(1.8rem, 2.5vw, 2.5em);
  text-align: center;
  color: #ffffff;
  padding-bottom: var(--padding-heading-sm);
}

.section-title::before {
  content: attr(data-en);
  position: absolute;
  top: -30px;
  left: 20%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5); /* サイトの青（薄） */
  font-size: clamp(4rem, 8vw, 6em);
  font-weight: bold;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media ( max-width:768px ){
    .section-title::before {
        top: -10px;
        left: 30%;
    }
}

.section-title__highlight {
  position: relative;
  z-index: 2;
  font-size: 1.4em;
  color: #fff; /* メインアクセントの青 */
  border-bottom: solid 4px var(--color-primary); /* 黄色アクセントライン */
}

/* Modifier：明るい背景用 */
.section-title--light {
  color: #fff;
}

.section-title--light::before {
  color: rgba(255, 255, 255, 0.5);
}

.section-title--light .section-title__highlight {
  border-bottom: solid 4px #ffd700;
}

.section--service .section-title {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ===== セクションservice ===== */
.section--service {
    position: relative;
    background: var(--color-bg);
    overflow: hidden;
}
/* 左側80%だけ背景色を変更するオーバーレイ */
.section--service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background-color: var(--color-primary);
  z-index: 0;
  pointer-events: none;
}
/* セクション内のすべての要素を前面に */
.section--service > * {
  position: relative;
  z-index: 1;
}
.service__item {
    border: 3px solid #fff;
    background: #fff;
}
.service__title, .service__text {
    color: var(--color-primary-light);
}
.service__item--secondary{
    border: 3px solid #fff;
    background: #fff;
}

.main-image-gallery img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  margin-bottom: 0!important;
}

.thumbnail-gallery {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.thumbnail-gallery .thumb {
  width: 25%;
  max-width: 150px; /* サムネイルの最大サイズを指定 */
  cursor: pointer;
  border: 2px solid transparent;
}

.service__title {
  font-size: 1.75rem;
  margin: 1em 0 0.5em;
  font-weight: bold;
}

.service__item p,
.service__card p {
  font-size: 1rem;
  opacity: 0.9;
}

.btn--more {
  margin-top: auto; /* 上が詰まっていても下に寄せる */
  align-self: center; /* 水平方向中央に配置 */
}

/* ===== セクションfeatures ===== */
/* POINTのデザイン */
.feature__label {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  background-color: var(--color-primary)!important;
  padding: 0.2em 0.8em;
  border-radius: 2em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.feature__title{
    border-bottom: 2px solid var(--color-primary);
}

/* ===== セクションnews ===== */
/* セクション全体 */
.section--news {
  background-color: var(--color-primary);
  position: relative;
}

/* セクションタイトル（.section-title を想定） */
.section--news .section-title {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.news-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1.5em;
  margin-bottom: 2em;
  color: #000;
  transition: opacity 0.3s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.wp-block-post-excerpt__excerpt {
    color: var(--color-primary-light);
}


/* ===== 施工事例 ===== */
.works {
  padding-top: var(--padding-section) !important;  
  padding-bottom: var(--padding-section) !important;
}

.works-table {
  background: #f1f1f1;
}

.works-table th {
  width: 20%;
  color: #3aaed8;
}
.works-table tr {
  border-top: solid 2px #3aaed8;
  border-bottom: solid 2px #3aaed8;
}

.works-title {
  color: #3aaed8;
  font-size: 1.5rem;
  border-bottom: solid 2px #3aaed8;
  margin-bottom: 1rem!important;
  font-weight: 700;
}

/* ===== companyページ ===== */
.company {
  padding-top: var(--padding-section) !important;  
  padding-bottom: var(--padding-section) !important;
}

/* 会社概要 */
/*PCのみ表示 */
@media(min-width: 768px) {
	.company-list {
			font-size:18px;
}
	    .company-title {
				text-align:left;
				padding-left:1em;
	}}
/*SPのみ表示 */
@media (max-width: 767.98px) {
    .company-item {
        flex-direction: column; /* 子要素を縦並びに */
    }
		.company-list {
			font-size:16px;
}
	.company-title{
		text-align:left;
		padding-left:1em;
		border-bottom: none!important;
    padding-top:0.5em!important;
    padding-bottom: 0.5em!important;
	}
	.company-description {
		border-bottom: 2px solid var(--color-primary)!important; 
	}

    dl > div {
        flex-direction: column; /* dtとddも縦並びに */
    }

    dl > div dt,
    dl > div dd {
        flex: none; /* デフォルトの幅にリセット */
        width: 100%; /* 幅を全体に広げる */
    }
}

.company-list {
  color: #fff;
  display: flex; /* フレックスボックスを有効化 */
  flex-direction: column; /* 縦方向に並べる */
  margin: 10px 0; /* 上下のマージン */
  padding: 0; /* パディングを削除 */
}
.company-item {
  display: flex;
}

.company-title {
  font-weight: bold;
  margin-top: 10px;
	margin: 0; 
  border-bottom: 2px solid var(--color-primary); 
  padding-top:1em;
	padding-bottom: 1em;
}

.company-description {
  margin: 0; 
  border-bottom: 2px solid #fff; 
	padding-top:1em;
	padding-left:2em;
	padding-bottom: 1em;
}



/* dtとddを横並びにするための設定 */
dl > div {
    display: flex; /* フレックスボックスを有効化 */
}

dl > div dt {
    flex: 0 0 20%; /* dtの幅を30%に設定 */
}

dl > div dd {
    flex: 1; /* ddは残りの幅を占める */
}

/* ===== お知らせ ===== */
.news {
  padding-top: var(--padding-section) !important;  
  padding-bottom: var(--padding-section) !important;
}


/* ===== contactページ ===== */
.contact {
    padding-top: var(--padding-section) !important;
    padding-bottom: var(--padding-section) !important;
}

/* Contact Form7スマホ・タブレット用カスタマイズ */
@media(max-width:767.98px){
/* テーブルの見出しとフォーム */
table.inquiry th,table.inquiry td {
   display:block;
   padding:1em!important;
   width:100%;
		padding-right:10px;
		padding-left:10px;
}

/* 送信ボタン */
input.wpcf7-submit{
   margin-bottom:30px;
   width:100%;
	}}

/* 日付タグの幅を調整 */
.wpcf7-number.dateform{
   width: 25%;
}	
.wpcf7-text.dateform{
   width: 50%;
}	

/* Contact Form7全体カスタマイズ */
/* 自動入力されるPタグを無効にする */
.inquiry p {
   display: inline;
   color: var(--color-bg)!important;
}

/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
   margin-bottom: 30px;
   border: none;
   line-height:1.2;
   vertical-align:middle;
	border-collapse:collapse;
  border-spacing: 5px;
	padding:5px;
}

/* テーブルの行 */
.inquiry tr {
   border:0!important;
}

/* テーブルの見出し側 */
.inquiry th{
   text-align:left;
   font-size:16px;
   border:none;
   padding:1em 0.5em;
   border-bottom: 2px solid var(--color-primary); 
   white-space: nowrap;
	width:25%;
}

/* 必須と任意タグ */
.haveto,.any{
   font-size:13px;
   padding:5px;
   background:var(--color-primary);
   color:#fff;
   border-radius:2px;
   margin-right:5px;
	 margin-left:5px;
   font-weight:normal;
	
}

/* 任意タグの背景カラー */
.any{
   background: var(--color-bg);
	color:#fff;
}

/* テーブルフォーム側 */
.inquiry td{
   font-size:13px;
   border: none;
	padding:20px;

}

/* 入力エリア幅最大 */
.wpcf7-form-control {
   width: 100%;
}

/* フォーム入力欄の余白・背景カラー・枠線消す指定 */
.inquiry input,.inquiry select,.inquiry textarea {
   margin: 5px 0;
       border: 1px solid #b1b1b1; 
   padding:1em;
}
.inquiry textarea {
   padding-bottom:5em;
}

/* 送信ボタンのデザイン */
.wpcf7-submit{
   display: block;
   margin:10px auto;
   padding:1em 0;
   width:80%;
   background:#fcb900!important;
   color:#fff;
   font-size:18px;
   font-weight:bold;	 
   border-radius:4px;
   border: none!important;
}

/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
   opacity: 0.9;
   transition: 0.3s;
}

/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
    display: none;
}

/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
    color: #e92323;
}
/* 送信前チェックボックステキスト */
.wpcf7-list-item-label{
	color:#222e33;
	font-size:16px;
}

/* ポリシーの設定 */
.privacy-policy-box p {
   display: inline;
   color: var(--color-bg);
}

.privacy-policy-box {
	height: 300px;
	overflow-y: scroll;
		border: 2px solid #ddd;
		padding: 1em;
}