@charset "UTF-8";
/*
Theme Name: Hrt child
Theme URI: https://hiract.jp/
Author: ヒラクト株式会社
Author URI: https://hiract.jp/
Description: hrtの子テーマ
Template: hrt
Version: 1.0.0
Tags:one-column, two-columns, three-columns, left-sidebar, right-sidebar, theme-options
*/

/* 投稿・固定ページの見出しと本文に確実に適用 */
.entry-content h2,
.page .entry-content h2,
.page .post h2,
.page .content h2,
.page-content h2,
.content-area h2,
h2 {
  font-size: clamp(36px, 6vw, 60px) !important;
  font-family: "ヒラギノ角ゴ ProN", "メイリオ", sans-serif !important;
  color: #1a1a1a !important;
  margin-top: 0.2em !important;
  margin-bottom: 0.2em !important;
  line-height: 1.4 !important;
}

.entry-content h3,
.page .entry-content h3,
.page .post h3,
.page .content h3,
.page-content h3,
.content-area h3,
h3 {
 font-size: clamp(25px, 3.5vw, 30px) !important;
  font-family: "ヒラギノ角ゴ ProN", "メイリオ", sans-serif !important;
  color: #1a1a1a !important;
  margin-top: 1.0em !important;
  margin-bottom: 1.0em !important;
  line-height: 1.4 !important;
}

.entry-content h4,
.page .entry-content h4,
.page .post h4,
.page .content h4,
.page-content h4,
.content-area h4,
h4 {
  font-size: clamp(16px, 2.5vw, 20px) !important;
  font-family: "ヒラギノ角ゴ ProN", "メイリオ", sans-serif !important;
  color: #1a1a1a !important;
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
  line-height: 1.4 !important;
}

.entry-content p,
.page .entry-content p,
.page .post p,
.page .content p,
.page-content p,
.content-area p,
p {
  font-size: clamp(15px, 2vw, 18px) !important;
  font-family: "ヒラギノ角ゴ ProN", "メイリオ", sans-serif !important;
  color: #1a1a1a !important;
  line-height: 1.6 !important;
  margin-top: 1.0em !important;
  margin-bottom: 1.0em !important;
}


/* フッター専用のメニュー用テキスト */
footer p.menu-text,
footer .menu-text p {
  font-size: 14px !important;
  line-height: 1.6;
  color: #333;
}


/*TOP　お知らせ文字サイズ　その他　*/

.post-list__link {
    font-size: 1.2rem;
}

.post-list-meta {
    font-size: 1rem;
    margin-top: 8px;
}

.post-list__item {
	margin-top:15px;
	   padding-bottom: 15px;
    border-bottom: inset;
}

.post-list__title {
    margin-top: 6px;
}


.main-visual {
  position: relative !important;
  overflow: visible !important;
}

.main-visual__title {
  position: absolute !important;
  left: 50% !important;
  bottom: 20% !important;
  transform: translate(-50%, 250%) !important;
  font-family: "游明朝", "Yu Mincho", "YuMincho", serif !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  color: #fff !important;
font-size: 2.5rem !important;
  z-index: 10 !important;
  white-space: nowrap !important; /* 改行防止（不要なら削除） */

/* スマホ */
font-size: 22px !important;
font-weight: 900 !important;

/* タブレット */
@media (min-width: 768px) {
  font-size: 32px !important;
}

/* PC */
@media (min-width: 1024px) {
  font-size: 40px !important;
}
}


/***** コンタクトフォーム *****/
.table-contactform7 {
	overflow: hidden;
	table-layout: fixed;
	border: 1px solid #ddd;
}

/**必須**/
.required-contactform7 {
	padding: 5px;
	background: #FF6C9C;
	color: #fff;
	border-radius: 3px;
	margin-right: 3px;
}


.table-contactform7 th {
	text-align: left;
	vertical-align: middle;
	padding: 10px 0 10px 15px;
}

.table-contactform7 input,
.table-contactform7 textarea {
	max-width: 90% !important;
	margin: 5px 10px 10px 5px;
}

.address-100 input {
	max-width: 90% !important;
	margin: 5px 10px 10px 5px;
}

.message-100 textarea {
	width: 100%;
	margin: 5px 10px 10px 5px;
}

@media screen and (min-width: 900px) {

	.table-contactform7 th {
		width: 28%;
	}

}

@media screen and (max-width: 900px) {

	.table-contactform7 {
		display: block;
	}

	.table-contactform7 tbody,
	.table-contactform7 tr {
		display: block;
		width: 100%;
	}

	.table-contactform7 th {
		width: 100%;
		display: block;
		margin: 0 auto; /*border: none;*/
		line-height: 35px;
	}

	.table-contactform7 td {
		display: list-item;
		margin: 0;
		padding: 0;
		width: 100%;
		border-top: none !important;
	}

}

/**スクロール位置**/
form.wpcf7-form {
	margin-top: -400px;
	padding-top: 400px;
}

/* お問合せ確認ページ */
/* 入力した部分の色を変えて目立たせる */
.wpcf7c-conf {
	color: #000;
}

/* 入力欄のボックスを消す */
input.wpcf7c-conf {
	background-color: #fff !important;
	font-size: 16px;
	color: #000 !important;
	margin-top: .5em;
}

textarea.wpcf7c-conf {
	background-color: #fff !important;
	border-radius: 0;
}
	
	
	#soushin,
	#kakunin,
	#henshu{
		width:300px;
		background:#00542f;
		color:#fff;
	}
	
	#soushin :hover,
	#kakunin :hover,
	#henshu :hover{
		background-color: #998bfa;
	}
	

/* スペースの調整 */
input[type=date].wpcf7c-conf {
	margin-left: .5em;
}

/* チェックしたボックスの色を変える */
input[type=checkbox].wpcf7c-conf:checked {
	border-color: #000;
}
	

/*送信中の時に表示されるロードマークを非表示*/
div.wpcf7 .ajax-loader {
	display: none !important;
}

/*応答ボックスメッセージを非表示*/
.wpcf7-mail-sent-ok {
	display: none !important;
}

.text-xs-center{
	text-align:center;
}

	.entry-title{
		display:none;
	}

	.center{
		text-align:center;
	}

/***** コンタクトフォーム 終わり*****/


/***** my-background-block*****/
.my-background-block {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background: #fff;
}

/* 左のグレー台形 */
.my-background-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 50%;
  background: #f2f2f2;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  z-index: 0;
}

/* 右の青グラデーション帯 */
.my-background-block::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 250px;
  width: 200px;
  height: 150%;
  background: linear-gradient(
    210deg,             /* 右上 → 左下の方向 */
    #00edd9 0%,
    #00edd9 5%,
    #2250c0 40%,
    #0a1636 100%
  );
  transform: skewX(-20deg);
  z-index: 0;
}

/* テキストなどを前面に */
.my-background-block .inner-content {
  position: relative;
  z-index: 1;
  padding: 30px;
  color: #000;
}


---------------------------------------
/***** my-background-block2*****/
.my-background-block2 {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: #fff;
}

/* 左の青グラデーション台形 */
.my-background-block2::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 0;
  width: 25%;
  height: 50%;
  background: linear-gradient(
    210deg,             /* 右上 → 左下の方向 */
    #00edd9 0%,
    #00edd9 5%,
    #2250c0 40%,
    #0a1636 100%
  );
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  z-index: 0;
}

/* 右のグレー帯 */
.my-background-block2::after {
  content: "";
  position: absolute;
  top: 0;
  right: 250px;
  width: 200px;
  height: 100%;
  background: #f2f2f2;
  transform: skewX(-20deg);
  z-index: 0;
}

/* テキストなどを前面に */
.my-background-block2 .inner-content {
  position: relative;
  z-index: 1;
  padding: 30px;
  color: #000;
}

---------------------------------------
/***** my-background-block3*****/
.my-background-block3 {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: #fff;
}


/* 右のグレー帯 */
.my-background-block3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 250px;
  width: 200px;
  height: 100%;
  background: #f2f2f2;
  transform: skewX(-20deg);
  z-index: 0;
}

/* テキストなどを前面に */
.my-background-block3 .inner-content {
  position: relative;
  z-index: 1;
  padding: 30px;
  color: #000;
}

/***** my-bg3 *****/
.my-bg3 {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: transparent;
}

/* 左下の青グラデーション台形 */
.my-bg3::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  height: 35%;
  background: linear-gradient(
    270deg,
    #1389e9 0%,
    #25b0e8 100%
  );
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
  z-index: 1;
}

/* 右上の青グラデーション台形 */
.my-bg3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 30%;
  background: linear-gradient(
    270deg,
    #1389e9 0%,
    #25b0e8 100%
  );
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 50% 100%);
  z-index: 1;
}

/* 左中央のグレー台形 */
.my-bg3 .gray-trapezoid {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40%;
  height: 40%;
  background-color: #f2f2f2;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  transform: translateY(-50%);
  z-index: 1;
}

/* テキストなどを前面に */
.my-bg3 .inner-content {
  position: relative;
  z-index: 2; /* 背景要素より前面に */
  padding: 30px;
  color: #000;
}
	

/************* S字背景 **********/
/* 
.s-curve-section {
  position: relative;
  min-height: 200vh; 
  z-index: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 1400' preserveAspectRatio='none'><defs><linearGradient id='sCurveGradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%23cbe9f8'/><stop offset='100%' stop-color='%23d6f6ff'/></linearGradient></defs><path d='M100,0 C250,0 300,150 300,350 C300,550 150,700 200,900 C250,1100 400,1250 400,1400 L300,1400 C300,1250 150,1100 100,900 C50,700 200,550 200,350 C200,150 150,0 0,0 Z' fill='url(%23sCurveGradient)'/></svg>") no-repeat center top;
  background-size: 400px auto;
  background-attachment: fixed;
}

/* 子要素のz-index調整 */
.s-curve-section > * {
  position: relative;
  z-index: 1;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .s-curve-section {
    background-size: 300px auto;
    min-height: 150vh;
  }
}

@media (max-width: 480px) {
  .s-curve-section {
    background-size: 200px auto;
    min-height: 120vh;
  }
}

/* より均一で美しいS字カーブ（推奨版） */
.s-curve-section-smooth {
  position: relative;
  min-height: 200vh;
  z-index: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 1400' preserveAspectRatio='none'><defs><linearGradient id='smoothGradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%23cbe9f8'/><stop offset='100%' stop-color='%23d6f6ff'/></linearGradient></defs><path d='M150,0 C280,0 350,100 350,250 C350,400 250,500 200,650 C150,800 250,900 350,1050 C350,1200 280,1300 150,1400 L50,1400 C180,1300 250,1200 250,1050 C250,900 150,800 100,650 C50,500 150,400 150,250 C150,100 80,0 50,0 Z' fill='url(%23smoothGradient)'/></svg>") no-repeat center top;
  background-size: 400px auto;
  background-attachment: fixed;
}

.s-curve-section-smooth > * {
  position: relative;
  z-index: 1;
}


/************* hスライドアニメーション設定 **********/
:root {
  --duration-in: 0.4s;
  --duration-hold: 0.1s;
  --duration-out: 0.4s;
}

/* hスライドアニメーション */
.slide-text-animation {
  position: relative;
  display: inline-block;
  margin: 12px 0;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  z-index: 2;
  /* 初期状態では文字を完全に隠す */
  clip-path: inset(0 100% 0 0);
}

/* 背景グラデーション */
.slide-text-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
  z-index: -1;
  opacity: 0;
}

/* アニメーション実行時の設定 */
.slide-text-animation.animate {
  /* 文字を背景と同期して表示 */
  animation: reveal-text var(--duration-in) ease forwards;
  animation-delay: 0s;
}

/* アニメーション実行時の背景 */
.slide-text-animation.animate::before {
  opacity: 1;
  animation: bg-slide-in var(--duration-in) ease forwards,
             bg-slide-out var(--duration-out) ease forwards;
  animation-delay: 0s, calc(var(--duration-in) + var(--duration-hold));
}

/* 背景スライドイン - 左から右へ */
@keyframes bg-slide-in {
  0% {
    width: 0%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

/* 背景スライドアウト - 右へ移動しながらフェードアウト */
@keyframes bg-slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* テキストが背景のスライドと同期して表示 */
@keyframes reveal-text {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0% 0 0);
  }
}

/* アニメーション完了後は文字を表示したまま */
.slide-text-animation.animated:not(.animate) {
  clip-path: inset(0 0% 0 0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-text-animation {
    font-size: 1.5rem;
    margin: 8px 0;
  }
}

@media (max-width: 480px) {
  .slide-text-animation {
    font-size: 1.2rem;
    margin: 6px 0;
  }
}

/**********　背景スライドイン　*************/

/* WordPress Gutenberg用 斜めバナーCSS（完全版・ABタイプ統一） */

/* 基本のバナースタイル */
.diagonal-banner {
  position: relative;
  overflow: hidden;
}

/* Aタイプの色設定（デフォルト） */
.diagonal-banner:not(.type-b) {
  --gradient-direction: 270deg;
  --color-start: #25b0e8;
  --color-middle: #0a5a9f;
  --color-end: #25b0e8;
}

/* Bタイプの色設定 */
.diagonal-banner.type-b {
  --gradient-direction: 90deg;
  --color-start: #0a5a9f;
  --color-middle: #25b0e8;
  --color-end: #0a5a9f;
}

/* 共通のバナー要素 */
.diagonal-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 120px;
  background: linear-gradient(
    var(--gradient-direction), 
    var(--color-start) 0%, 
    var(--color-middle) 30%, 
    var(--color-middle) 70%, 
    var(--color-end) 100%
  );
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 1;
  
  /* 初期状態：画面外に配置 */
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.4s ease-out;
}

/* アニメーション実行クラス */
.diagonal-banner.slide-in::before {
  transform: translateX(0);
  opacity: 1;
}

/* 即座にアニメーションさせたい場合のクラス */
.diagonal-banner.immediate::before {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.4s ease-out;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .diagonal-banner::before {
    width: 70%;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .diagonal-banner::before {
    width: 80%;
    height: 80px;
  }
}

/* デバッグ用：バナーエリアを可視化（テスト時のみ使用） */
.diagonal-banner.debug {
  min-height: 150px;
  border: 2px dashed #ccc;
  background: #f9f9f9;
}
.diagonal-banner.debug::after {
  content: 'Diagonal Banner Area';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 14px;
  z-index: 2;
}

/* ===== 使用方法とカスタマイズ例 ===== */

/*
【基本的な使用方法】

1. Aタイプ（デフォルト）:
   クラス名: diagonal-banner
   色: 両端#25b0e8（薄い青）、中央#0a5a9f（濃い青）

2. Bタイプ（反転色）:
   クラス名: diagonal-banner type-b  
   色: 両端#0a5a9f（濃い青）、中央#25b0e8（薄い青）

3. テスト用:
   クラス名: diagonal-banner debug
   バナーエリアが見える状態

4. 即座表示:
   クラス名: diagonal-banner immediate
   スクロール待ちなしで即座にアニメーション

【カスタマイズ例】

// 新しい色タイプ（Cタイプ：オレンジ系）を追加する場合
.diagonal-banner.type-c {
  --gradient-direction: 270deg;
  --color-start: #ff6b35;
  --color-middle: #d63031;
  --color-end: #ff6b35;
}

// アニメーション速度を変更する場合
.diagonal-banner.fast::before {
  transition: all 0.4s ease-out;
}

.diagonal-banner.slow::before {
  transition: all 0.4s ease-out;
}

// バナーサイズを変更する場合
.diagonal-banner.large::before {
  width: 80%;
  height: 160px;
}

.diagonal-banner.small::before {
  width: 40%;
  height: 80px;
}
*/


/************* 共通セクション設定 ***************/
.bg-text-about,
.bg-text-news,
.bg-text-contact,
.bg-text-voice,
.bg-text-recruit,
.bg-text-service {
  position: relative !important;
  overflow: hidden !important;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px; /* セクション高さ */
}


/* 背景英字 */
.bg-text-about::before,
.bg-text-news::before,
.bg-text-contact::before,
.bg-text-voice::before,
.bg-text-recruit,
.bg-text-service::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(32px, 15vw, 120px); /* ← clampでスマホ?PC対応 */
  color: rgba(0, 0, 0, 0.12); /* 少し濃く調整 */
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  font-family: "Yu Gothic", "游ゴシック体", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1;
}

/* 表示する英字 */
.bg-text-about::before {
  content: "ABOUT US";
}
.bg-text-news::before {
  content: "NEWS";
}
.bg-text-contact::before {
  content: "CONTACT";
}
.bg-text-voice::before {
  content: "VOICE";
}
.bg-text-recruit::before {
  content: "RECRUIT";
}
.bg-text-service::before {
  content: "SERVICE";
}


/*************** ひし形形マスク　右傾斜 **************/
figure.mask-slash-steep {
  overflow: hidden;
  position: relative;
  display: block;
}

figure.mask-slash-steep img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* より急な斜めカットで / 型に */
clip-path: polygon(
    25% 0%,      /* 左上 */
    100% 0%,   /* 右上を下にずらす */
    75% 100%,  /* 右下 */
    0% 100%      /* 左下を上にずらす */
  );
}


/*************** ひし形形マスク　左傾斜 **************/
figure.mask-slash-steep2 {
  overflow: hidden;
  position: relative;
  display: block;
}

figure.mask-slash-steep2 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* より急な斜めカットで \ 型に */
  clip-path: polygon(
    0% 0%,     /* 左上 */
    75% 0%,    /* 右上を下にずらす */
    100% 100%, /* 右下 */
    25% 100%   /* 左下を上にずらす */
  );
}

/*************** ひし形形マスク　右肩上がり傾斜 **************/
figure.mask-slash-steep3 {
  overflow: hidden;
  position: relative;
  display: block;
}

figure.mask-slash-steep3 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* より急な斜めカットで / 型に */
clip-path: polygon(
    0% 0%,      /* 左上 */
    100% 0%,   /* 右上を下にずらす */
    75% 100%,  /* 右下 */
    0% 100%      /* 左下を上にずらす */
  );
}


/*************** ひし形形マスク　右肩下がり傾斜 **************/
figure.mask-slash-steep4 {
  overflow: hidden;
  position: relative;
  display: block;
}

figure.mask-slash-steep4 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* より急な斜めカットで / 型に */
clip-path: polygon(
    0% 0%,      /* 左上 */
    75% 0%,   /* 右上を下にずらす */
    100% 100%,  /* 右下 */
    0% 100%      /* 左下を上にずらす */
  );
}


/************ line背景 **************/
/* === 波形ライン背景ブロック === */
.wave-line-block {
  position: relative;
  overflow: hidden;
  min-height: 200px; /* 高さは必要に応じて調整 */
}

/* SVG波形を疑似要素として背景に表示 */
.wave-line-block::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: 600px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 200' preserveAspectRatio='none'><defs><linearGradient id='waveGradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%2300f0ff' stop-opacity='0'/><stop offset='10%' stop-color='%2300f0ff' stop-opacity='1'/><stop offset='50%' stop-color='%230075c9' stop-opacity='1'/><stop offset='90%' stop-color='%2300f0ff' stop-opacity='1'/><stop offset='100%' stop-color='%2300f0ff' stop-opacity='0'/></linearGradient></defs><path d='M 0 100 Q 250 0 500 100 T 1000 100' stroke='url(%23waveGradient)' stroke-width='4' fill='none' stroke-linecap='round'/></svg>")
    no-repeat center/contain;
  transform: translate(-50%, -50%) rotate(0deg); /* 初期角度（水平） */
  pointer-events: none;
  z-index: 0;
}

/* コンテンツを前面に出す */
.wave-line-block > * {
  position: relative;
  z-index: 1;
}

/* === 角度変更用クラス === */
.rotate-0::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.rotate-5::before {
  transform: translate(-50%, -50%) rotate(5deg);
}
.rotate-10::before {
  transform: translate(-50%, -50%) rotate(10deg);
}
.rotate--5::before {
  transform: translate(-50%, -50%) rotate(-5deg);
}
.rotate--10::before {
  transform: translate(-50%, -50%) rotate(-10deg);
}
.rotate-diagonal::before {
  transform: translate(-50%, -40%) rotate(20deg); /* 左上 → 右下 */
}
.rotate--diagonal::before {
  transform: translate(-50%, -50%) rotate(-20deg); /* 左下 → 右上 */
}


/************ line背景2 **************/
/* === 波形ライン背景ブロック === */
.wave-line-block2 {
  position: relative;
  overflow: hidden;
  min-height: 200px; /* 高さは必要に応じて調整 */
}
/************ line背景2 **************/
/* === 波形ライン背景ブロック === */
.wave-line-block2 {
  position: relative;
  overflow: hidden;
  min-height: 200px; /* 高さは必要に応じて調整 */
}

/* SVG波形を疑似要素として背景に表示 */
.wave-line-block2::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 85%;
  height: 600px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1700 400' preserveAspectRatio='none'><defs><linearGradient id='waveGradient' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%2300f0ff' stop-opacity='0'/><stop offset='10%' stop-color='%2300f0ff' stop-opacity='1'/><stop offset='50%' stop-color='%230075c9' stop-opacity='1'/><stop offset='90%' stop-color='%2300f0ff' stop-opacity='1'/><stop offset='100%' stop-color='%2300f0ff' stop-opacity='0'/></linearGradient></defs><path d='M 0 100 Q 250 0 500 100 T 1000 100' stroke='url(%23waveGradient)' stroke-width='4' fill='none' stroke-linecap='round'/></svg>")
    no-repeat center/contain;
  transform: translate(-50%, -50%) rotate(0deg); /* 初期角度（水平） */
  pointer-events: none;
  z-index: 0;
}

/* コンテンツを前面に出す */
.wave-line-block2 > * {
  position: relative;
  z-index: 1;
}

/* === 角度変更用クラス === */
.rotate2-0::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.rotate2-5::before {
  transform: translate(-50%, -50%) rotate(5deg);
}
.rotate2-10::before {
  transform: translate(-50%, -50%) rotate(10deg);
}
.rotate2--5::before {
  transform: translate(-50%, -50%) rotate(-5deg);
}
.rotate2--10::before {
  transform: translate(-50%, -50%) rotate(-10deg);
}
.rotate2-diagonal::before {
  transform: translate(-52%, -50%) rotate(32deg); /* 左上 → 右下 */
}
.rotate2--diagonal::before {
  transform: translate(-50%, -50%) rotate(-20deg); /* 左下 → 右上 */
}


/************ ESG_BG **************/

.wp-block-cover {
  background-image: url("https://koueki-kk.co.jp/images/e.gif") !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  background-size: auto !important;
}