@charset "UTF-8";

/* **************************************************

Name: top_en.css

Description: top

Create: 2025.07.10
LastModify: 

Copyright 2025- Hitachi, Ltd.

***************************************************** */
/*TopBrandingArea*/
.BrandingArea__Slide {
  position: relative;
  z-index: 0;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 260px + (100vw - 400px) * 0.5, 600px);
  overflow: hidden;
}

.BrandingArea__Background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.BrandingArea__Background video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}

.BrandingArea__Background img {
width: 100%;
height: 100%;
-o-object-fit: cover;
 object-fit: cover;
}

.BrandingArea {
--arrow-size: 48px;
}

.BrandingArea__Link:is(a, a:link, a:visited) {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
width: -moz-fit-content;
width: fit-content;
min-width: min(320px, 100%);
color: #fff;
text-align: center;
text-decoration: none;
background-color: #c00;
transition-duration: 0.2s;
transition-property: #fff;
column-gap: 24px;
padding: 12px 24px;
margin-top: 32px;
font-size: 1rem;
border-radius: 1.25rem;
}
.BrandingArea__Link:is(a, a:link, a:visited)::before {
  display: inline-block;
  content: "";
}
.BrandingArea__Link:is(a, a:link, a:visited)::after {
display: inline-block;
width: 1em;
height: 1em;
content: "";
background-color: #fff;
transition-duration: 0.2s;;
transition-property: transform #fff;
mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8.1 13.4"><polygon points="1.4,13.4 0,12 5.3,6.7 0,1.4 1.4,0 8.1,6.7 "/></svg>');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.BrandingArea__Link:is(a, a:link, a:visited)[target=_blank]::after {
mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path d="M10,2V0v0H0v0v3v7h2v2h10V2H10z M1,3h8v6H1V3z M11,11H3v-1h7V3v0h1V11z"/></svg>');
}
@media (hover: hover) {
.BrandingArea__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
background-color: #0c0c0c;
}
}

#TopBrandingArea{
margin-bottom:3rem;
}

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

}


/* add 2025.07.17 for itn
------------------------------*/
.Itn .BrandingArea__Background{
display: flex; 
justify-content: center; 
align-items: center;
}

.Itn .BrandingArea{
display: flex;
flex-direction: column;
align-items: center;
align-self: end;
justify-content: center;
width: min(calc(100% - 8%), 1224px);
height: 100%;
margin: auto;
padding-right: calc(var(--arrow-size) + 48px);
padding-left: calc(var(--arrow-size) + 48px);
}

.Itn .BrandingArea img{
max-width:620px;
height: auto;
margin-top: 8.5rem;
margin-bottom: 0rem;
}


.Itn .BrandingArea__Link:is(a, a:link, a:visited)::after {
content: "\e90a";
display: inline-block;
mask: none;
background:none;
width:20px;
height:20px;
font-family: icomoon !important;
transform: rotate(180deg);
line-height: 1.1;
}

@media screen and (max-width: 994px) {
.Itn .BrandingArea{
padding-right: var(--arrow-size);
padding-left: var(--arrow-size);
}
.Itn .BrandingArea img{
margin-top: 7.5rem;
max-width:80%;
}
}

@media screen and (max-width: 767px) {
.Itn .BrandingArea{
padding-right: 1rem;
padding-left: 1rem;
}
.Itn .BrandingArea img{
margin-top: 5.5rem;
margin-bottom: 1rem;
max-width:80%;
}
}