/* ===============================
   company branding style
   =============================== */

/* ============================================= company branding */
#breadcrumbs {
	display:none;}
.area_main {
  position: relative;
  width: 100%;
  /* 画像のアスペクト比（1921 ÷ 2880 = 約0.667）に合わせる */
  /*aspect-ratio: 2880 / 1921;*/
  height: calc(100vh - 108px);
  background-image: url("../imgs/company/branding_main_bg_pc.jpg");
  background-size: cover;   /* 画像をトリミングして全体にフィット */
  background-position: center 100%;
  background-repeat: no-repeat;
}
.area_main .image_box {
    position: absolute;
    left: 9.5%;
    bottom: 12%;
}
.area_main .image_box img.catch.jp {
    width: 36vw;
	max-width:504px;
}
.area_main .image_box img.catch.en01 {
    width: 24vw;
	max-width:343px;
	margin-top:2%;
    left: 34%;
    position: relative;
}
.area_main .image_box img.catch.en02 {
    width: 33vw;
	max-width:492px;
    left: 52%;
	margin-top:1%;
    position: relative;
}
.area_content {
	position: relative;
	background-color: #231815;
    padding-bottom: 200px;
    margin-bottom: 80px;
	overflow: hidden; /* 擬似要素のはみ出し防止 */
}
.area_content > * {
  position: relative;
  z-index: 1;
}
.area_content p {
	color: #fff;
}
.area_content .image_box {
    position: absolute;
    left: 22.5%;
    top: 1%;
}

.area_content .text_box {
    margin-left: 25%;
    padding-top: 3%;
}
.area_content .text_box p {
    font-size: 1.8rem;
    line-height: 2.6;
}
.company_index_has_child {
    left: 50%;
}

@media screen and (max-height: 910px) {
	.area_main {background-position:center;}
}
@media screen and (max-width: 768px) {
.company_index_has_child {
    left: 0%;
	}
.area_main {width:inherit;height:inherit;}
}
@media screen and (min-width: 768.0px) and (max-width: 768.9px) {
.area_content .image_box {
    top: 0%;
	}
.company_index_has_child {
    left: 0%;
	}
.area_content .text_box {
    margin-left: 0%;
    padding-top: 12%;
	}
.area_content .text_box p {
    font-size: 1rem;
    line-height: 2.25;
	}
.area_content {
    padding-bottom: 10px;
    margin-bottom: 70px;
	}
}

.brand_tri {
	position:absolute;
	right:0;
	top:17%;
	width:41%;
	z-index:0;}

.triangle {
	position:absolute;
	z-index:0;
	right:0;
	top:0;
	height:100%;
	width:100%;}

@media screen and (max-width: 767px) {
.area_main {
  aspect-ratio: 752 / 500;
  background-image: url("../imgs/company/branding_main_bg_sp.jpg");
  background-size: 120% 120%;
  background-position: center 25%;
  background-repeat: no-repeat;
  }
.area_content {
    padding-bottom: 40px;
    margin-bottom: 50px;
	background-color:#231815;
	}

.triangle {
	top:inherit;
	bottom:0;
	width:100%;}

.brand_tri {
	width:88%;
	bottom:0;
	top:inherit;}

.area_content::after {
    right: 0;
    bottom: 0;
    width: 85%;
    aspect-ratio: 644 / 766;
    background-image: url("../imgs/company/branding_content_bg_sp.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 0;
	}
.area_content .image_box {
	position: unset;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
	margin-top: 30px;
	}
.area_content .text_box {
    margin-left: 0;
    padding-top: 35px;
	}
.area_content .text_box p {
    font-size: 1.86rem;
    line-height: 1.725;
	margin-bottom: 35px;
	}
}
/* 初期状態：SP想定（〜767px） */
.forpc767 { display: none; }   /* PC用は隠す */
.forsp767 { display: block; }  /* SP用は見せる */

/* 768px以上：PC想定 */
@media screen and (min-width: 768px) {
  .forpc767 { display: block !important; }  /* PC用を表示 */
  .forsp767 { display: none !important; }   /* SP用を非表示 */
}


/* フェード処理 */
.fade-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeLeft 1s ease forwards;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


/* Delay */
.delay1 {
  animation-delay: 1s;
}
.delay2 {
  animation-delay: 1.5s;
}
.delay3 {
  animation-delay: 2s;
}
.delay4 {
  animation-delay: 2.5s;
}
.delay5 {
  animation-delay: 3s;
}
.delay6 {
  animation-delay: 3.5s;
}
.delay7 {
  animation-delay: 4s;
}
.delay8 {
  animation-delay: 4.5s;
}
}

@media screen and (max-width: 767px) {
.triangle .delay3,
.triangle .delay4,
.triangle .delay5,
.triangle .delay6,
.triangle .delay7,
.triangle .delay8{
  animation-delay: 0s;
	}
}