@charset "UTF-8";

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

Name: top_en.css

Description: top

Create: 2025.07.10
LastModify: 2025.09.30

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) {

}


/* modify 2026.04.24 for itn2604
------------------------------*/
.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: "\e900";
display: inline-block;
mask: none;
background:none;
width:1rem;
height:1rem;
font-family: icomoon !important;
line-height: 1.1;
}

.Itn .BrandingArea_Text{
color:#fff;
font-weight:bold;
font-size: clamp(1.1rem, 4vw, 4rem);
line-height:1.5;
text-align:center;
}
:lang(ja-jp) .Itn .BrandingArea_Text{
font-size: clamp(1.0625rem, 3.125vw, 3.125rem);
}

.Itn .BrandingArea__Link:is(a, a:link, a:visited){
color: #c00;
background-color: #fff;
border: .125rem solid #c00;
}

@media (hover: hover) {
.Itn .BrandingArea__Link:is(a, a:link, a:visited):where(:any-link, :enabled, summary):hover {
color: #0c0c0c;
background-color: #fff;
border: 0.125rem solid #0c0c0c;
}
}

@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: 0.25rem;
padding-left: 0.25rem;
}
.Itn .BrandingArea img{
margin-top: 5.5rem;
margin-bottom: 1rem;
max-width:80%;
}
.BrandingArea__Link:is(a, a:link, a:visited){
padding: 8px 16px;
font-size:0.875rem;
}

.Itn .BrandingArea p:not(.BrandingArea_Text){
padding:0 2rem;
}

}