:root {
--BuilMiraiGreen: #44af35;
--BuilMiraiGray: #9E9F9F;
--Red1: #fa000f;
--Red2: #cc0000;
--Gray1: #f4f4f4;
--Gray3: #B3B3B3;
--Gray4: #737373;
--Gray5: #4d4d4d;
--Gray6: #222222;
--Gray7: #0c0c0c;
--Bule2: #0064FA;
--White: #ffffff;
}
#Contents-BuilMirai{
background-color: var(--White);
}
h2{
background-image: none;
}
h3{
color: var(--Gray7);
}
strong{
color: rgb(203 213 225);
color: inherit;
}
.btn-hero_action a{
color: var(--White);
text-decoration: none;
}
.TextStyle24{
font-size: 150.00%;
font-size: clamp(20px, calc(20px + 4 * ((100vw - 768px) / 507)), 24px);
}
.TextStyle14{
font-size: 87.50%;
}
.TextStyle18{
font-size: 112.50%;
}
.TextStyle20{
font-size: 125.00%;
}
.TextStyle22{
font-size: 137.50%;
}

.TextStylePalt{
font-feature-settings: "palt";
}
.TextColorWhite,
.TextColorWhite strong{
color: var(--White);
}
.TextStyle1.mb-0,
.TextStyle2.mb-0{
margin-bottom: 0 !important;
}
.text-BuilMirai-Green{
color: var(--BuilMiraiGreen);
}
.text-Blue2{
color: var(--Bule2);
}
.border-BuilMirai-Green{
border-color: var(--BuilMiraiGreen);
}
.bg-BuilMirai-Green{
background-color: var(--BuilMiraiGreen);
}
.bg-BuilMirai-Gray{
background-color: var(--BuilMiraiGray);
}

a.BuilMiraiTextLink:link,
a.BuilMiraiTextLink:visited,
a.BuilMiraiTextLink:active{
color: #0C0C0C;
text-decoration: none;
}
a.BuilMiraiTextLink:hover{
color: #cc0000;
text-decoration: underline;
}

/********/
.h2-subtitle{
font-size: clamp(16px, calc(16px + 6 * ((100vw - 768px) / 507)), 22px);
color: var(--BuilMiraiGreen);
}
h1{
font-weight: 800;
letter-spacing: -0.025em;
color: var(--Gray7);
}
.intro-lead{
font-size: 112.50%;
font-size: clamp(16px, calc(16px + 2 * ((100vw - 768px) / 507)), 18px);
font-weight: 500;
color: var(--Gray7);
}
.intro-lead span{
display: block;
margin-top: 0.75em;
}
.hash-list-title{
font-size: 112.50%;
color: var(--BuilMiraiGreen);
}
.hash-list span{
color: var(--White);
background-color: var(--BuilMiraiGray);
font-size: clamp(13px, calc(13px + 3 * ((100vw - 768px) / 507)), 16px);
line-height: 1.6em;
}
.btn-hero_action a{
font-size: clamp(16px, calc(16px + 4 * ((100vw - 768px) / 507)), 20px);
font-weight: 500;
color: var(--White);
background-color: var(--Gray4);
}
.btn-hero_action a:hover{
background-color: var(--BuilMiraiGreen);
}
#GenerativeAI-Demo{
color: var(--White);
background-color: var(--Gray4);
}
#GenerativeAI-Demo:hover{
background-color: var(--BuilMiraiGreen);
}

h2{
font-size: 225.00%;
font-weight: 800;
color: var(--Gray7);
}
.h2-UnderLine{
width: 3rem;
height: 0.25rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
background-color: var(--BuilMiraiGreen);
}


/** Hitachi Service & Value **/
/** Solutions & Technology **/
.panel-value,
.panel-solutions,
.panel-case,
.panel-partner{
border-radius: 8px;
}
.icon-sv{
background-color: var(--BuilMiraiGreen);
border-radius: 3px;
}
.icon-sv i{
color: var(--White);
}
.icon-hash{
font-size: 87.50%;
color: var(--White);
background-color: var(--BuilMiraiGreen);
border-radius: 3px;
}

/** Facilities & Domains **/
#Facilities p.ImgOnlyStyle{
width: fit-content;
}
.Facilities__Image{
width: fit-content;
}
.Facilities__Image--caption{
display: block;
color: var(--BuilMiraiGreen);
font-size: clamp(16px, calc(16px + 6 * ((100vw - 768px) / 507)), 22px);
line-height: 1.6em;
font-weight: 700;
margin-top: 0.6em;
}


/** IN-DEPTH LOOK **/
/*.tab-interactive-details{
border-bottom: 1px solid var(--BuilMiraiGray);
}*/
.tab-interactive-details button{
background-color: var(--BuilMiraiGray);
color: var(--Gray1);
font-size: clamp(14px, calc(14px + 2 * ((100vw - 768px) / 507)), 16px);
}
.tab-interactive-details button:not(.is-active):hover{
background-color: var(--BuilMiraiGreen);
}
.tab-interactive-details button.is-active{
background-color: var(--BuilMiraiGreen);
color: var(--White);
cursor: default;
pointer-events: none;
}

p.indentTextStyle,
.indent-list p{
padding-left: 1em;
text-indent: -1em;
}

/** In-Depth Look slide **/
.TabCarousel {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--BuilMiraiGray);
}
.TabCarousel__viewport {
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
}
.TabCarousel__viewport::-webkit-scrollbar {
display: none;
}
.TabCarousel__track {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
width: max-content;
min-width: 0;
margin: 0;
padding: 0;
}
.TabCarousel__track .tab-btn {
flex: 0 0 auto;
justify-content: center;
white-space: nowrap;
}
@media screen and (max-width: 1274px) {
.TabCarousel__track .tab-btn {
width: 258px;
}
}
.TabCarousel__control {
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
color: var(--BuilMiraiGreen);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s, opacity 0.2s;
}
.TabCarousel__control:hover {
background-color: var(--White);
}
.TabCarousel__control:disabled {
opacity: 0.3;
cursor: default;
}
@media screen and (max-width: 1024px) {
.TabCarousel__track .tab-btn {
min-width: 0;
}
}
@media screen and (max-width: 767px) {
.TabCarousel {
grid-template-columns: 36px minmax(0, 1fr) 36px;
gap: 6px;
}
.TabCarousel__control {
width: 36px;
height: 40px;
font-size: 20px;
}
}


/** Track Record **/

/**news**/
#NewsArticleList{
height: 280px;
overflow-y: auto;
}
#NewsArticleList::-webkit-scrollbar {
width: 12px;
}
#NewsArticleList::-webkit-scrollbar-thumb {
background-color: var(--BuilMiraiGreen);
border-radius: 2px;
}
#NewsArticleList::-webkit-scrollbar-track {
background-color: transparent;
}
#NewsArticleList::-webkit-scrollbar-button:single-button {
display: block;
width: 16px;
height: 16px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 8px 6px;
}
#NewsArticleList::-webkit-scrollbar-button:single-button:vertical:decrement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M4 0L8 6H0Z' fill='%2344af35'/%3E%3C/svg%3E");
}
#NewsArticleList::-webkit-scrollbar-button:single-button:vertical:increment {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M0 0H8L4 6Z' fill='%2344af35'/%3E%3C/svg%3E");
}
.NewsArticle{
border-radius: 8px;
margin-right: 10px;
}
.newsLabel{
line-height: 1em;
}
.NewsArticle h4{
line-height: 1.6em;
}
.newsDate{
font-size:clamp(13px, calc(13px + 3 * ((100vw - 768px) / 507)), 16px);
}
h4.newsH4{font-size: clamp(13px, calc(13px + 1 * ((100vw - 768px) / 507)), 14px);
}

/** contact-container **/
.contact-container{
padding: 0 15px;
}
.contact-container-inner{
background-color: var(--Gray1);
margin-left: auto;
margin-right: auto;
padding: 2.28125em 0 2.8125em;
}
.contact-button,
.outerlink-button{
color: var(--White);
background-color: var(--Gray5);
background-repeat: no-repeat;
background-size: auto 1.8125em;
background-position: right 1.25em center;
padding: 1.09375em 2.5em 1em 1.09375em;
max-width: 24.6428571429em;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
flex-wrap: wrap;
transition: background-color .3s;
}
.contact-button.download{
background-image: url(../image/icon_download.png);
}
.contact-button.contact{
background-image: url(../image/icon-contact.png);
}
.contact-button:hover{
background-color:  var(--Gray6);
}
.fa-arrow-up-right-from-square:before, .fa-external-link:before {
color: var(--BuilMiraiGreen);
}
a.contact-button:link,
a.contact-button:visited,
a.contact-button:hover,
a.contact-button:active,
a.outerlink-button:link,
a.outerlink-button:visited,
a.outerlink-button:hover,
a.outerlink-button:active{
color: var(--White);
text-decoration: none;
}
#partners a:link,
#partners a:visited{
color: #222222;
text-decoration: none;
}

.outerlink-button{
position: relative;
}
.outerlink-button::before{
content: "";
display: block;
width: 0.75em;
height: 0.75em;
border-style: solid;
border-width: 0 2px 2px 0;
border-color: var(--White);
position: absolute;
right: 0.5em;
top: 50%;
-webkit-transform: rotate(-45deg) translateY(-50%);
transform: rotate(-45deg) translateY(-50%);
transition: all .3s;
}

.outerlink-button:hover {
background-color: var(--Gray6);
}
.builOS_action a,
.builOS_action a:hover,
.builOS_action a:visited,
.builOS_action a:active{
text-decoration: none;
color: var(--Gray7);
}

a.outerlink,
a.outerlink:hover,
a.outerlink:visited,
a.outerlink:active{
text-decoration: none;
color: var(--Gray7);
}

.comingsoon{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: var(--Gray5);
font-size: 1.5rem;
}

*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}

::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style:
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
*,
::after,
::before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb
}

::after,
::before {
--tw-content: ''
}

hr {
height: 0;
color: inherit;
border-top-width: 1px
}

abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}

a {
color: inherit;
text-decoration: inherit
}

small {
font-size: 80%
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}

sub {
bottom: -.25em
}

sup {
top: -.5em
}

table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0
}

button,
select {
text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}

:-moz-focusring {
outline: auto
}

:-moz-ui-invalid {
box-shadow: none
}

progress {
vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}

[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}

::-webkit-search-decoration {
-webkit-appearance: none
}

::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}

summary {
display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0
}

fieldset {
margin: 0;
padding: 0
}

legend {
padding: 0
}

menu,
ol,
ul {
list-style: none;
margin: 0;
padding: 0
}

dialog {
padding: 0
}

textarea {
resize: vertical
}

input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af
}

[role=button],
button {
cursor: pointer
}

:disabled {
cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle
}

img,
video {
max-width: 100%;
height: auto
}

[hidden]:where(:not([hidden=until-found])) {
display: none
}

.absolute {
position: absolute
}

.relative {
position: relative
}

.sticky {
position: sticky
}

.inset-0 {
inset: 0px
}

.-bottom-6 {
bottom: -1.5rem
}

.-right-6 {
right: -1.5rem
}

.bottom-1\/4 {
bottom: 25%
}

.left-10 {
left: 2.5rem
}

.right-0 {
right: 0px
}

.right-4 {
right: 1rem
}

.top-0 {
top: 0px
}

.top-1\/4 {
top: 25%
}

.top-4 {
top: 1rem
}

.z-10 {
z-index: 10
}

.z-50 {
z-index: 50
}

.col-span-2 {
grid-column: span 2 / span 2
}

.mx-auto {
margin-left: auto;
margin-right: auto
}

.mb-0{
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 0.25rem
}
.mb-2 {
margin-bottom: 0.5rem
}
.mb-3 {
margin-bottom: 0.75rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.mb-10 {
margin-bottom: 2.5rem
}
.mb-12 {
margin-bottom: 3rem
}
.mb-16 {
margin-bottom: 4rem
}



.ml-10 {
margin-left: 2.5rem
}

.ml-2 {
margin-left: 0.5rem
}

.mt-0\.5 {
margin-top: 0.125rem
}

.mt-1 {
margin-top: 0.25rem
}

.mt-2 {
margin-top: 0.5rem
}

.mt-3 {
margin-top: 0.75rem
}

.mt-4 {
margin-top: 1rem
}

.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}

.block {
display: block
}

.flex {
display: flex
}

.inline-flex {
display: inline-flex
}

.grid {
display: grid
}

.hidden {
display: none
}

.aspect-\[1\/2\] {
aspect-ratio: 1/2
}

.h-1 {
height: 0.25rem
}

.h-1\.5 {
height: 0.375rem
}

.h-10 {
height: 2.5rem
}

.h-11 {
height: 2.75rem
}

.h-12 {
height: 3rem
}

.h-14 {
height: 3.5rem
}

.h-2 {
height: 0.5rem
}

.h-2\.5 {
height: 0.625rem
}

.h-20 {
height: 5rem
}

.h-3 {
height: 0.75rem
}

.h-3\.5 {
height: 0.875rem
}

.h-7 {
height: 1.75rem
}

.h-9 {
height: 2.25rem
}

.h-96 {
height: 24rem
}

.h-\[400px\] {
height: 400px
}

.h-full {
height: 100%
}

.min-h-\[350px\] {
min-height: 350px
}

.min-h-\[450px\] {
min-height: 450px
}

.min-h-screen {
min-height: 100vh
}

.w-1\.5 {
width: 0.375rem
}

.w-1\/12 {
width: 8.333333%
}

.w-1\/3 {
width: 33.333333%
}

.w-10 {
width: 2.5rem
}

.w-11 {
width: 2.75rem
}

.w-12 {
width: 3rem
}

.w-14 {
width: 3.5rem
}

.w-2 {
width: 0.5rem
}

.w-2\.5 {
width: 0.625rem
}

.w-3 {
width: 0.75rem
}

.w-32 {
width: 8rem
}

.w-5\/12{
width: 41.666%;
}
.w-6\/12{
width: 50.00%;
}

.w-7\/12 {
width: 58.333333%
}

.w-96 {
width: 24rem
}

.w-full {
width: 100%
}

.max-w-2xl {
max-width: 42rem
}

.max-w-3xl {
max-width: 48rem
}

.max-w-4xl {
max-width: 56rem
}

.max-w-7xl {
max-width: 80rem
}

.max-w-\[85\%\] {
max-width: 85%
}

.max-w-sm {
max-width: 24rem
}

.flex-1 {
flex: 1 1 0%
}

.flex-shrink-0 {
flex-shrink: 0
}

.shrink-0 {
flex-shrink: 0
}


@keyframes pulse {
50% {
opacity: .5
}
}

.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

.cursor-pointer {
cursor: pointer
}

.scroll-mt-20 {
scroll-margin-top: 5rem
}

.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}

.flex-col {
flex-direction: column
}

.flex-wrap {
flex-wrap: wrap
}

.items-start {
align-items: flex-start
}

.items-center {
align-items: center
}

.justify-start {
justify-content: flex-start
}

.justify-center {
justify-content: center
}

.justify-between {
justify-content: space-between
}

.justify-around {
justify-content: space-around
}

.gap-1 {
gap: 0.25rem
}

.gap-1\.5 {
gap: 0.375rem
}

.gap-12 {
gap: 3rem
}

.gap-16 {
gap: 4rem
}

.gap-2 {
gap: 0.5rem
}

.gap-3 {
gap: 0.75rem
}

.gap-4 {
gap: 1rem
}

.gap-6 {
gap: 1.5rem
}

.gap-8 {
gap: 2rem
}

.space-x-8> :not([hidden])~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-1> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}

.space-y-1\.5> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}

.space-y-2> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-3> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}

.space-y-3\.5> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.875rem * var(--tw-space-y-reverse))
}

.space-y-4> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-5> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.space-y-6> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
overflow: hidden
}

.overflow-y-auto {
overflow-y: auto
}

.scroll-smooth {
scroll-behavior: smooth
}

.rounded {
border-radius: 0.25rem
}

.rounded-2xl {
border-radius: 1rem
}

.rounded-3xl {
border-radius: 1.5rem
}

.rounded-full {
border-radius: 9999px
}

.rounded-lg {
border-radius: 0.5rem
}

.rounded-md {
border-radius: 0.375rem
}

.rounded-sm {
border-radius: 0.125rem
}

.rounded-xl {
border-radius: 0.75rem
}

.rounded-bl-none {
border-bottom-left-radius: 0px
}

.border {
border-width: 1px
}

.border-2 {
border-width: 2px
}

.border-b {
border-bottom-width: 1px
}

.border-t {
border-top-width: 1px
}

.border-blue-500\/30 {
border-color: rgb(59 130 246 / 0.3)
}

.border-emerald-500\/30 {
border-color: rgb(16 185 129 / 0.3)
}

.border-indigo-100 {
--tw-border-opacity: 1;
border-color: rgb(224 231 255 / var(--tw-border-opacity, 1))
}

.border-indigo-500\/30 {
border-color: rgb(99 102 241 / 0.3)
}

.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}

.border-red-500\/20 {
border-color: rgb(239 68 68 / 0.2)
}

.border-red-500\/30 {
border-color: rgb(239 68 68 / 0.3)
}

.border-slate-100 {
--tw-border-opacity: 1;
border-color: rgb(241 245 249 / var(--tw-border-opacity, 1))
}

.border-slate-200 {
--tw-border-opacity: 1;
border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

.border-slate-200\/60 {
border-color: rgb(226 232 240 / 0.6)
}

.border-slate-700 {
--tw-border-opacity: 1;
border-color: rgb(51 65 85 / var(--tw-border-opacity, 1))
}

.border-slate-700\/60 {
border-color: rgb(51 65 85 / 0.6)
}

.border-slate-800 {
--tw-border-opacity: 1;
border-color: rgb(30 41 59 / var(--tw-border-opacity, 1))
}

.border-slate-900 {
--tw-border-opacity: 1;
border-color: rgb(15 23 42 / var(--tw-border-opacity, 1))
}

.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
}

.bg-blue-600\/20 {
background-color: rgb(37 99 235 / 0.2)
}

.bg-emerald-50 {
--tw-bg-opacity: 1;
background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}

.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1))
}

.bg-emerald-500\/20 {
background-color: rgb(16 185 129 / 0.2)
}

.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
}

.bg-indigo-50 {
--tw-bg-opacity: 1;
background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
}

.bg-indigo-950\/40 {
background-color: rgb(30 27 75 / 0.4)
}

.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1))
}

.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1))
}

.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))
}

.bg-red-500\/10 {
background-color: rgb(239 68 68 / 0.1)
}

.bg-red-500\/20 {
background-color: rgb(239 68 68 / 0.2)
}

.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}

.bg-red-600\/10 {
background-color: rgb(220 38 38 / 0.1)
}

.bg-red-600\/20 {
background-color: rgb(220 38 38 / 0.2)
}

.bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1))
}

.bg-red-950 {
--tw-bg-opacity: 1;
background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1))
}

.bg-red-950\/40 {
background-color: rgb(69 10 10 / 0.4)
}

.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}

.bg-slate-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.bg-slate-800 {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
}

.bg-slate-800\/40 {
background-color: rgb(30 41 59 / 0.4)
}

.bg-slate-800\/50 {
background-color: rgb(30 41 59 / 0.5)
}

.bg-slate-800\/80 {
background-color: rgb(30 41 59 / 0.8)
}

.bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1))
}

.bg-slate-900\/50 {
background-color: rgb(15 23 42 / 0.5)
}

.bg-slate-900\/80 {
background-color: rgb(15 23 42 / 0.8)
}

.bg-slate-950 {
--tw-bg-opacity: 1;
background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1))
}

.bg-slate-950\/60 {
background-color: rgb(2 6 23 / 0.6)
}

.bg-slate-950\/80 {
background-color: rgb(2 6 23 / 0.8)
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/95 {
background-color: rgb(255 255 255 / 0.95)
}

.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1))
}

.bg-\[radial-gradient\(ellipse_at_top\2c _var\(--tw-gradient-stops\)\)\] {
background-image: radial-gradient(ellipse at top, var(--tw-gradient-stops))
}

.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.from-blue-500 {
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-indigo-950 {
--tw-gradient-from: #1e1b4b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-red-400 {
--tw-gradient-from: #f87171 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-red-500 {
--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-red-600 {
--tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-slate-800\/80 {
--tw-gradient-from: rgb(30 41 59 / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-slate-900 {
--tw-gradient-from: #0f172a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-indigo-950 {
--tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #1e1b4b var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-pink-400 {
--tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #f472b6 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.via-transparent {
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.to-blue-400 {
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position)
}

.to-blue-500 {
--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)
}

.to-indigo-900 {
--tw-gradient-to: #312e81 var(--tw-gradient-to-position)
}

.to-indigo-950 {
--tw-gradient-to: #1e1b4b var(--tw-gradient-to-position)
}

.to-red-700 {
--tw-gradient-to: #b91c1c var(--tw-gradient-to-position)
}

.to-slate-900 {
--tw-gradient-to: #0f172a var(--tw-gradient-to-position)
}

.to-slate-900\/90 {
--tw-gradient-to: rgb(15 23 42 / 0.9) var(--tw-gradient-to-position)
}

.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.bg-clip-text {
-webkit-background-clip: text;
background-clip: text
}

.p-1 {
padding: 0.25rem
}

.p-1\.5 {
padding: 0.375rem
}

.p-2 {
padding: 0.5rem
}

.p-2\.5 {
padding: 0.625rem
}

.p-3 {
padding: 0.75rem
}

.p-3\.5 {
padding: 0.875rem
}

.p-4 {
padding: 1rem
}

.p-5 {
padding: 1.25rem
}

.p-6 {
padding: 1.5rem
}

.p-8 {
padding: 2rem
}

.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem
}

.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem
}

.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem
}

.px-4 {
padding-left: 1rem;
padding-right: 1rem
}

.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}

.px-8 {
padding-left: 2rem;
padding-right: 2rem
}

.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem
}

.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem
}

.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem
}

.py-12 {
padding-top: 3rem;
padding-bottom: 3rem
}

.py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}

.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}

.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem
}

.py-20 {
padding-top: 5rem;
padding-bottom: 5rem
}

.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem
}

.py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem
}

.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}

.pb-3 {
padding-bottom: 0.75rem
}

.pb-4 {
padding-bottom: 1rem
}

.pb-6 {
padding-bottom: 1.5rem
}

.pb-8 {
padding-bottom: 2rem
}

.pt-2 {
padding-top: 0.5rem
}

.pt-4 {
padding-top: 1rem
}

.pt-8 {
padding-top: 2rem
}

.text-left {
text-align: left
}

.text-center {
text-align: center
}

.text-2xl {
/*font-size: 1.5rem;*/
font-size: clamp(20px, calc(20px + 4 * ((100vw - 768px) / 507)), 24px);
line-height: 2rem
}

.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-\[8px\] {
font-size: 8px
}
.text-\[9px\] {
font-size: 9px
}
.text-\[10px\] {
font-size: 10px
}
.text-\[11px\] {
font-size: 11px
}
.text-\[12px\] {
font-size: 75.00%;
}
.text-\[13px\] {
font-size: 81.25%;
}

.text-base {
/*16px*/
font-size: 1rem;
line-height: 1.5rem
}

.lh-225 {
line-height: 2.25rem;
}

.text-lg {
/*18px*/
/*font-size: 1.125rem;*/
font-size: clamp(15px, calc(15px + 3 * ((100vw - 768px) / 507)), 18px);
line-height: 1.75rem
}

.text-sm {
/*12px*/
font-size: 0.875rem;
line-height: 1.25rem
}

.text-xl {
/*20px*/
font-size: 1.25rem;
line-height: 1.75rem
}

.text-xs {
/*14px*/
font-size: 0.75rem;
line-height: 1rem
}

.font-bold {
font-weight: 700
}

.font-extrabold {
font-weight: 800
}

.font-light {
font-weight: 300
}

.font-medium {
font-weight: 500
}

.font-normal {
font-weight: 400
}

.font-semibold {
font-weight: 600
}

.uppercase {
text-transform: uppercase
}

.italic {
font-style: italic
}

.leading-relaxed {
line-height: 1.625
}

.leading-snug {
line-height: 1.375
}

.leading-tight {
/*line-height: 1.25;*/
line-height: 1.3;
}

.leading-tight.TextStylePalt {
letter-spacing: 0.075em;
}

.tracking-tight {
letter-spacing: -0.025em
}

.tracking-wider {
letter-spacing: 0.05em
}

.tracking-widest {
letter-spacing: 0.1em
}

h2.builMiraiH2{
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
border-bottom: 2px solid var(--BuilMiraiGreen);
background: center bottom no-repeat;
margin-bottom: 30px;
font-size: clamp(20px, calc(20px + 16 * ((100vw - 768px) / 507)), 36px);
z-index: 5;
}
h2.builMiraiH2::before{
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(95vw, 932px);
aspect-ratio: 932 / 176;
z-index: -1;
}

#value h2.builMiraiH2::before{
background: url("../image/builmirai_h2_01_bg.png") center bottom / contain no-repeat;
}
#Facilities h2.builMiraiH2::before{
background: url("../image/builmirai_h2_02_bg.png") center bottom / contain no-repeat;
}
#solutions h2.builMiraiH2::before{
background: url("../image/builmirai_h2_03_bg.png") center bottom / contain no-repeat;
}
#interactive-details h2.builMiraiH2::before{
background: url("../image/builmirai_h2_04_bg.png") center bottom / contain no-repeat;
}
#builOS h2.builMiraiH2::before{
background: url("../image/builmirai_h2_05_bg.png") center bottom / contain no-repeat;
}
#case h2.builMiraiH2::before{
background: url("../image/builmirai_h2_06_bg.png") center bottom / contain no-repeat;
width: min(95vw, 1103px);
aspect-ratio: 1103 / 178;
}


.text-BuilMirai-Green{
color: var(--BuilMiraiGreen);
}
.BuilMirai-Green{
background-color: var(--BuilMiraiGreen);
}

h2.buillMiraiH2CTA{
font-size: clamp(20px, calc(20px + 16 * ((100vw - 768px) / 507)), 36px);
}

.innerLink{
font-size: clamp(14px, calc(14px + 2 * ((100vw - 768px) / 507)), 16px);
}

.techListText{
font-size: clamp(14px, calc(14px + 2 * ((100vw - 768px) / 507)), 16px);
}

.outerlink{
font-size: clamp(14px, calc(14px + 2 * ((100vw - 768px) / 507)), 16px);
}


.text-amber-400 {
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}

.text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity, 1))
}

.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.text-emerald-400 {
--tw-text-opacity: 1;
color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}

.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}

.text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity, 1))
}

.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity, 1))
}

.text-indigo-900 {
--tw-text-opacity: 1;
color: rgb(49 46 129 / var(--tw-text-opacity, 1))
}

.text-indigo-950 {
--tw-text-opacity: 1;
color: rgb(30 27 75 / var(--tw-text-opacity, 1))
}

.text-red-100 {
--tw-text-opacity: 1;
color: rgb(254 226 226 / var(--tw-text-opacity, 1))
}

.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.text-slate-100 {
--tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity, 1))
}

.text-slate-200 {
--tw-text-opacity: 1;
color: rgb(226 232 240 / var(--tw-text-opacity, 1))
}

.text-slate-300 {
--tw-text-opacity: 1;
color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}

.text-slate-400 {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}

.text-slate-600 {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}

.text-slate-700 {
--tw-text-opacity: 1;
color: rgb(51 65 85 / var(--tw-text-opacity, 1))
}

.text-slate-800 {
--tw-text-opacity: 1;
color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}

.text-slate-900 {
--tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.text-slate-950 {
--tw-text-opacity: 1;
color: rgb(2 6 23 / var(--tw-text-opacity, 1))
}

.text-transparent {
color: transparent
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}

.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}

.placeholder-slate-500::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1))
}

.opacity-10 {
opacity: 0.1
}

.opacity-15 {
opacity: 0.15
}

.opacity-20 {
opacity: 0.2
}

.opacity-75 {
opacity: 0.75
}

.mix-blend-multiply {
mix-blend-mode: multiply
}

.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-indigo-950\/50 {
--tw-shadow-color: rgb(30 27 75 / 0.5);
--tw-shadow: var(--tw-shadow-colored)
}

.shadow-red-200 {
--tw-shadow-color: #fecaca;
--tw-shadow: var(--tw-shadow-colored)
}

.shadow-red-900\/30 {
--tw-shadow-color: rgb(127 29 29 / 0.3);
--tw-shadow: var(--tw-shadow-colored)
}

.blur-3xl {
--tw-blur: blur(64px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}

.transition-colors {
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}

.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}

.duration-500 {
transition-duration: 500ms
}

.hover\:-translate-y-0\.5:hover {
--tw-translate-y: -0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:border-slate-300:hover {
--tw-border-opacity: 1;
border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
}

.hover\:bg-red-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1))
}

.hover\:bg-red-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1))
}

.hover\:bg-slate-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}

.hover\:bg-slate-100\/50:hover {
background-color: rgb(241 245 249 / 0.5)
}

.hover\:bg-slate-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.hover\:bg-slate-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
}

.hover\:bg-slate-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
}

.hover\:text-red-600:hover {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.hover\:text-red-700:hover {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1))
}

.hover\:text-slate-400:hover {
--tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.hover\:text-slate-900:hover {
--tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:underline:hover {
-webkit-text-decoration-line: underline;
text-decoration-line: underline
}

.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.focus\:border-red-600:focus {
--tw-border-opacity: 1;
border-color: rgb(220 38 38 / var(--tw-border-opacity, 1))
}

.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}

.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.techImage img{
max-width: 453px;
width: 100%;
}

@media (min-width: 640px) {
.sm\:col-span-1 {
grid-column: span 1 / span 1
}

.sm\:flex {
display: flex
}

.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}

.sm\:flex-row {
flex-direction: row
}

.sm\:p-10 {
padding: 2.5rem
}

.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}

.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem
}

.sm\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}

.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}

.sm\:text-5xl {
font-size: 3rem;
line-height: 1
}

.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}

.sm\:text-xl {
font-size: 1.25rem;
line-height: 2.05rem;
}
}

@media (min-width: 768px) {
.md\:col-span-5 {
grid-column: span 5 / span 5
}

.md\:col-span-6 {
grid-column: span 6 / span 6
}

.md\:col-span-7 {
grid-column: span 7 / span 7
}

.md\:flex {
display: flex
}

.md\:hidden {
display: none
}

.md\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr))
}

.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}

.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}

@media (min-width: 1024px) {
.lg\:col-span-4 {
grid-column: span 4 / span 4;
}
.lg\:col-span-5 {
grid-column: span 5 / span 5;
}
.techImage {
display: flex;
align-items: center;
}
.techImage .ImgOnlyStyle,
.techImage .ImgOnlyStyle img{
margin-bottom: 0;
}

.lg\:col-span-6 {
grid-column: span 6 / span 6
}

.lg\:col-span-7 {
grid-column: span 7 / span 7
}
.lg\:col-span-8 {
grid-column: span 8 / span 8
}


.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr))
}

.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}

.lg\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem
}

.lg\:text-6xl {
/*font-size: 3.25rem;*/
font-size: 2.8rem;
line-height: 1.3em;
}
}

@keyframes pulse-soft {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.4; }
}
.animate-pulse-soft {
animation: pulse-soft 3s infinite ease-in-out;
}
/* スムーズなフェードインアニメーション */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 767px) {
.py-20 {
padding-top: 3rem;
padding-bottom: 3rem;
}
}