/* business
------------------------------------------------------------*/

.business_copy {
    position: relative; /* 疑似要素の基準位置 */
    display: inline-block; /* これが重要：幅を内容に合わせる */
    overflow: hidden; /* 背景がはみ出さないように */
    font-size: 3em; /* フォントサイズはお好みで */
    color: #fff; /* 文字色 */
    padding-top: 0;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px; /* テキストと背景の間に少し隙間を作る */
    line-height: 1.2; /* 行の高さ */
    margin: 5px auto; /* 見やすいように余白を追加 */
    text-transform: uppercase;
    font-weight: bold;
}
@media screen and (max-width: 575px) {
.business_copy {
    font-size: 7.8vw;
	padding-right: 10px;
    padding-left: 10px;
	padding-top: 10px;
    padding-bottom: 10px;
}
}
/* 背景の疑似要素の初期状態 (アニメーション前) */
.business_copy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 親要素（.philosophy_ttl_en）の幅に合わせる */
  height: 100%; /* 親要素の高さに合わせる */
  background-color: #E60012; /* 表示される背景色 */
  transform: scaleX(0); /* 初期状態は横方向のスケールが0 */
  transform-origin: left; /* 左から広がるように */
  z-index: -1; /* タイトルテキストの下に表示 */
}

/* ========================================= */
/* 要素が画面内に入ったときにJavaScriptで追加されるクラス */
/* ========================================= */

.business_copy.is-animated::before {
  /* is-animatedクラスが付与されたら背景アニメーションを開始 */
  animation: slideInFromLeft 1s ease-out forwards;
}

/* ========================================= */
/* @keyframes アニメーションの定義 (変更なし) */
/* ========================================= */

/* 背景のアニメーション */
@keyframes slideInFromLeft {
  from {
    transform: scaleX(0); /* アニメーション開始時：幅0 */
  }
  to {
    transform: scaleX(1); /* アニメーション終了時：幅100% */
  }
}
.business_tx2 {
    font-size: 20px;
    line-height: 1.9;
    margin-top: 8%;
    text-shadow: #fff 1px 1px 0, #fff -1px -1px 0,/*右下、左上*/
		#fff -1px 1px 0, #fff 1px -1px 0,/*右上、左下*/
        #fff 0px 1px 0, #fff  0-1px 0,/*右、左*/
        #fff -1px 0 0, #fff 1px 0 0;/*上、下*/
    font-weight: bold;
    color: rgba(0,0,0,1.00);
}
@media screen and (max-width: 991px) {
  .business_tx2 {
    margin-top: 3%;
  }
}
@media screen and (max-width: 575px) {
  .business_tx2 {
    font-size: 18px;
  }
}
.business_tx2 span {
  color: #E60012;
}
@media screen and (max-width: 991px) {
  .img-wrap {
    margin-top: 20px;
  }
}
.greeting_box {
    background-color: rgba(205,205,205,0.3);
    border-radius: 50px;
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    margin-top: 20px;
  }
@media screen and (max-width: 575px) {
.greeting_box {
    border-radius: 10px;
    
    margin-top: 10px;
  }
}
.greeting_tx {
    font-size: 20px;
    line-height: 1.9;
    font-weight: bold;
    color: rgba(0,0,0,1.00);
}
@media screen and (max-width: 575px) {
  .greeting_tx {
    font-size: 14px;
  }
}
.boss_name {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.5;
    padding-top: 5%;
    padding-bottom: 0px;
    letter-spacing: 0.1em;
    text-align: right;
}

.boss_name span {
    font-size: 3.8rem; 
	padding-left: 10px; 
}

@media (max-width: 767px) {
.boss_name {
    font-size: 1.6rem;    
}
	.boss_name span {
    font-size: 2.8rem;
    display: block;
}
}	
.greeting_tx2 {
    font-size: 20px;
    line-height: 1.9;
    font-weight: bold;
    color: rgba(0,0,0,1.00);
	font-family: 'Noto Serif JP', serif;
}
@media screen and (max-width: 575px) {
  .greeting_tx2 {
    font-size: 14px;
  }
}
.boss_name2 {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.5;
    padding-top: 5%;
	font-weight: bold;
    padding-bottom: 0px;
    letter-spacing: 0.1em;
    text-align: right;
	font-family: 'Noto Serif JP', serif;
}

.boss_name2 span {
    font-size: 3.8rem; 
	padding-left: 10px; 
}

@media (max-width: 767px) {
.boss_name2 {
    font-size: 1.6rem;    
}
	.boss_name2 span {
    font-size: 2.8rem;
}
}