@charset "UTF-8";
/* **************************************************

Name: fsdx.css

Description: /solution/fsdx/

Create: 2025.06.18
Update:

Copyright Hitachi Systems, Ltd.

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

/* custom property */
:root {
    /* color */
    --color-default: #333333;
    --color-default-contrast: #fff;

    --color-primary: #e5132b;
    --color-primary-rgb: 229,19,43;
    --color-primary-deep: #d4142a;
    --color-primary-contrast: #fff;

    --color-secondary: #0F7983;
    --color-secondary-contrast: #fff;

    --color-secondary2: #f0f0f0;
}


/* setting */
.p-page .p-wrapper {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif;
}

.p-page .p-linkbtn__box.p-linkbtn__box-arrange > ul > li {
    flex: 1;
    min-width: auto;
}

@media (max-width: 767px) {
    .p-page .p-linkbtn__box.p-linkbtn__box-arrange > ul {
        gap: 15px;
        flex-direction: row;
    }
}

.p-page .p-linkbtn__box_item.p-linkbtn__box_item-arrange > object > a {
    max-width: 474px;
    font-weight: bold;
    line-height: 1.4;
    padding-top: 14px;
    padding-bottom: 14px;
    word-break: keep-all;
}

.p-page .p-linkbtn__box_item.p-linkbtn__box_item-arrange > object.CenterAdjust > a {
    margin-left: auto;
    margin-right: auto;
}

.p-page .p-linkbtn__box_item.p-linkbtn__box_item-arrange > object > a.btn-l {
    font-size: 1.375rem;
    padding-top: 20px;
    padding-bottom: 20px;
}

.p-page .p-anchorbtn__box_item > object > a {
    min-height: 73px;
    display: flex;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    padding: 0 8px;
}

.p-page .p-anchorbtn__box_item > object > a > strong {
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 767px) {
    .p-page .p-linkbtn__box_item.p-linkbtn__box_item-arrange > object > a.btn-l {
        font-size: 1rem;
    }
}

#Contents .Inner {
    max-width: 965px;
    margin: auto;
    padding: 80px 0;
}

.p-page .p-section .ImgOnlyStyle img {
    display: inline;
}

.p-page .p-footernavi__sct {
    padding-top: 80px;
}


/*reuse*/
#Contents .Inner h2 {
	font-size: clamp( 1.375rem ,3vw ,1.75em) !important;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	padding: 0;
    margin: 0 0 40px;
    word-break: keep-all;
}

.p-page .p-wrapper sub {
    font-size: 80%;
    font-weight: inherit;
}

#Contents .Inner .TextStyle1 {
	font-size: 1rem;
    margin-bottom: 1em;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

#Contents .Inner .AnnotationsStyle1 {
    font-size: 0.8125rem;
    color: inherit;
    margin-top: 0.5em;
}

#Contents .Inner .AnnotationsStyle1 > li {
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.4;
}
@media (max-width: 767px) {
    #Contents .Inner .AnnotationsStyle1.RightAdjust {
        text-align: left;
    }
}

.p-page .p-wrapper .ListStyle1 li {
    font-size: inherit;
    text-indent: -1em;
    padding-left: 1em;
    font-size: 1.2em;
    line-height: 1.6;
}

.p-page .p-wrapper .ListStyle1 li::before {
    content: "・";
    display: inline;
}

.p-page .p-wrapper .p-footernavi__box a {
    font-weight: bold;
}

@media (max-width: 995px){
    .JS #Contents .Inner {
		padding: 4em 1em;
	}
}

/* branding */
.p-page  #branding {
    overflow: auto;
}

.p-page #branding .p-bgc {
    padding-bottom: 0;
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/branding.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 145%;
}

.p-page__solution__energystorage .p-hero__tit {
    margin: 65px 0;
}

.p-page__solution__energystorage .p-hero__tit strong {
    margin-bottom: 0.5em;
    white-space: nowrap;
    font-size: clamp( 1.375rem ,4.6vw ,2.25rem);
    font-weight: bold;
    line-height: 1.6;
    opacity: 0;
    -webkit-animation: fadeIn 0.5s ease-in-out 0.9s forwards;
    animation: fadeIn 0.5s ease-in-out 0.9s forwards;
}

.p-page__solution__energystorage .p-hero__tit em {
    font-size: clamp( 1rem ,2.6vw ,1.25rem);
    line-height: 1.7;
}

.p-page__solution__energystorage .p-hero::before {
    display: none;
}

.p-page__solution__energystorage .p-hero {
    height: auto;
    margin-bottom: 0;
}

.p-page__solution__energystorage .p-hero__tit h1 {
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 5px #fff;
}

#branding .p-linkbtn__box {
    margin-top: 50px;
}

@media (max-width: 767px){
    .p-page #branding .p-bgc {
/*
        background-position: right top;
        background-size: auto calc(286 / 767 * 100vw);
*/
        background-position: right -100px center;
        background-size: 150%;
    }

    #branding .p-linkbtn__box {
        margin-top: 30px;
    }
}

/* merit */
.p-page .p-wrapper #merit-listbox {
    margin: 40px 0 20px;
    color: var(--color-secondary);
}

.p-page .p-wrapper #merit-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
		justify-content: space-between;
}

.p-page .p-wrapper #merit-list > li {
    background-color: #fff;
    padding: 70px 24px 20px;
    width: calc(25% - 12px);
    box-sizing: border-box;
}

.p-page .p-wrapper .merit-list-title {
    font-size: clamp(1.25rem, 0.15rem + 2.03vw, 1.375rem);
    font-weight: bold;
		text-align: center;
		margin-bottom:0.5rem;
}

.p-page .p-wrapper .merit-list-text {
    font-size: 1rem;
    width: fit-content;
}

.p-page .p-wrapper .merit-list-text > strong {
    font-size: 1.375rem;
    font-weight: bold;
    color: var(--color-secondary2);
}

.p-page .p-wrapper [id^="merit"] h3::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    position: relative;
    top: -50px;
    margin:0 auto -30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.p-page .p-wrapper #merit03 h3::before {
    width: 50px;
    height: 50px;
    top: -45px;
    margin-bottom: -20px;
}

.p-page .p-wrapper #merit01 h3::before {
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict01.svg);
}

.p-page .p-wrapper #merit02 h3::before {
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict02.svg);
}

.p-page .p-wrapper #merit03 h3::before {
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict03.svg);
}

.p-page .p-wrapper #merit04 h3::before {
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict04.svg);
}

/* serveices */
.p-page .p-wrapper #serveices *{
	line-height:1.5;
}

.p-page .p-wrapper #serveices-main {
    display: flex;
    gap: 17px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 35px;
		background: url(/-/media/ind/carbon_neutral/image/solution/fsdx/arrow.svg) center bottom no-repeat;
    background-size: contain;
}

.p-page .p-wrapper .serveices-content {
    flex: 1;
}

.p-page .p-wrapper .serveices-content {
    border-radius: 50%;
    display: block;
    width: 310px;
    height: 310px;
    background: #0F7983;
    background: linear-gradient(165deg,rgba(15, 121, 131, 1) 50%, rgba(0, 106, 120, 1) 50%);
    margin: 0 auto 20px;
    text-align: center;
    color: var(--color-secondary-contrast);
    box-sizing: border-box;
}

.p-page .p-wrapper .serveices-title {
    font-size:1.375rem;
    font-weight: bold;
}
.p-page .p-wrapper #serveices .serveices-text {
    font-size: 1rem;
}
.p-page .p-wrapper #serveices .leadtxt {
    font-size:1.375rem;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
		margin:1.5rem;
}
/*
.p-page .p-wrapper #serveices .leadtxt strong {
    font-size: clamp( 1.25rem ,3.6vw ,2.25rem);
}
*/
.p-page .p-wrapper #serveices-main::after {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    background: url(/-/media/ind/carbon_neutral/image/solution/fsdx/serveices-plus.png) center center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: calc(290px / 2);
    left: 50%;
    transform: translate(-50%, -50%);
}

.p-page .p-wrapper #task-main {
    display: flex;
    gap: 17px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.p-page .p-wrapper #task-main .task-title{
		font-size:1.375rem;
		font-weight:bold;
	  text-align: center;
		background:var(--color-default);
		color:var(--color-default-contrast);
		padding:0.5rem 1rem;
		border-radius:4px;
		margin-bottom:0.5rem;
}

.p-page .p-wrapper #task-main .task-problem{
		background:var(--color-secondary2);
    position: relative;
		padding:1rem;
		border-radius:4px;
}

.p-page .p-wrapper #task-main .task-problem .lead{
		font-size:1rem;
		font-weight:bold;
	  text-align: center;
		margin-bottom: 2rem;
}

.p-page .p-wrapper #task-main .task-problem .text{
		font-size:0.875rem;
		background:#fff;
		padding:1rem;
		border-radius:9px;
    position: relative;
    margin-left: 100px;
}

.p-page .p-wrapper #task-main .task-problem .text span::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px;
    position: absolute;
    border-color: transparent #fff transparent transparent;
    top: 37%;
    left: -16px;
}

.p-page .p-wrapper #task-main .task-problem .text::before {
    content: "";
    display: block;
    width: 70px;
    height: 92px;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict06.svg);
    top: -4px;
    margin-left: -95px;
}

.p-page .p-wrapper #task-main .task-problem::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 18px 0;
    border-color: #f0f0f0 transparent transparent;
    position: absolute;
    left: 45%;
    bottom: -13px;
}

.p-page .p-wrapper #task-main .task-solve .title {
		display: table;
    position: relative;
		font-size:1.125rem;
    font-weight: bold;
    margin: 2rem auto 1rem;
		padding-bottom:0.5rem;
		border-bottom:3px solid #FAD200;
}

.p-page .p-wrapper #task-main .task-solve .title::before {
    content: "";
    display: block;
    position: absolute;
    width: 27px;
    height: 50px;
    top: -17px;
    margin-left: -35px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(/-/media/ind/carbon_neutral/image/solution/fsdx/pict05.svg);
}

.p-page .p-wrapper #task-main .task-solve .text {
		font-size:1rem;
		line-height:1.5rem;
		padding:0 0.5rem;
}

.p-page .p-wrapper #task-main .task-solve .text strong {
		font-size:1.125rem;
    font-weight: bold;
		color:var(--color-secondary);
}

/* usage */
.p-page .p-wrapper #usage *{
	line-height:1.5;
}

.p-page .p-wrapper #usage .usage-main{
		background:var(--color-default-contrast);
		border-radius:9px;
    display: flex;
    width: 100%;
    margin: 4rem auto;
    position: relative;
}


.p-page .p-wrapper #usage .usage-main .title{
		font-size:1.375rem;
		font-weight:bold;
		border-bottom:3px solid var(--color-default);
		padding-bottom:0.5rem;
	  margin-bottom: 1rem;
}
.p-page .p-wrapper #usage .usage-main .text{
		font-size:1rem;
}

/* features */
.p-page .p-wrapper #features *{
	line-height:1.5;
}

.p-page .p-wrapper #features .features-main{
    display: flex;
    gap: 25px;
    width: 100%;
		flex-wrap:wrap;
}

.p-page .p-wrapper #features .features-content{
		display: flex;
    flex-direction: column;
}

.p-page .p-wrapper #features .features-img img{
		border-radius:9px 9px 0 0;
}

.p-page .p-wrapper #features .features-text .title{
		font-size:1.375rem;
		font-weight:bold;
		text-align:center;
		padding-bottom:0.5rem;
}
.p-page .p-wrapper #features .features-text .text{
		font-size:1rem;
}
.p-page .p-wrapper #features .features-text{
		background: #E1F2F3;
		background: linear-gradient(150deg,rgba(225, 242, 243, 1) 50%, rgba(219, 235, 237, 1) 50%);
		padding:2rem;
		border-radius:0 0 9px 9px;
		flex: 1;
}
@media (min-width: 1000px) {
    .p-page .p-wrapper .serveices-content {
			padding-top: 5rem;
		}
}

@media (max-width: 999px) {
    .p-page .p-wrapper #serveices-main {
			flex-direction: column;
    }
    .p-page .p-wrapper .serveices-content {
			min-height: 310px;
    	align-content: center;
    }
}
@media (min-width: 768px) and (max-width: 999px)  {
		.p-page .p-wrapper #task-main .task-problem .lead{
			margin-bottom: 1rem;
		}
		.p-page .p-wrapper #task-main .task-problem .text{
			margin-left:inherit;
			margin-bottom:80px;
		}
		.p-page .p-wrapper #task-main .task-problem .text::before {
	    top: 65px;
      margin: 0 calc((100% - 2rem - 70px) / 2);
		}
		.p-page .p-wrapper #task-main .task-problem .text span::before {
	    border-color: #fff transparent  transparent transparent;
	    bottom: -16px;
	    left: 27%;
			top:inherit;
		}
	.p-page .p-wrapper #task-main .task-solve .title::before {
	    width: 18px;
	    height: 34px;
	    top: -7px;
	    margin-left: -22px;
	}
}
@media (min-width: 800px) {
		.p-page .p-wrapper #usage .usage-main{
		    gap: 17px;
		}
		.p-page .p-wrapper #usage .usage-main .usage-content{
				width:calc(100% - 437px);
				padding:2rem 2rem 2rem 3rem;
				box-sizing: border-box;
		}
	.p-page .p-wrapper #usage .usage-main .usageImg {
			width:420px;
	    position: relative;
			top:-2rem;
			left:2rem;
	}
}
@media (max-width: 799px) {
		.p-page .p-wrapper #merit-list > li {
		    padding: 70px 13px 20px;
		}
		.p-page .p-wrapper #merit-list > li {
		    width: calc((100% - 12px) / 2);
		}
		.p-page .p-wrapper #usage .usage-main{
			flex-direction: column;
		}
		.p-page .p-wrapper #usage .usage-main .usage-content{
				width:100%;
				padding:0 2rem 2rem;
				box-sizing: border-box;
		}
		.p-page .p-wrapper #usage .usage-main .usageImg {
    box-sizing: border-box;
		    width: 100%;
		    padding: 0 2rem;
		    position: relative;
		    top: -2rem;
		}
}
@media (min-width:768px){
		.p-page .p-wrapper #merit *{
			line-height:1.5;
		}
		.p-page .p-wrapper #task-main .task-content {
			width:calc(100% / 3);
		}
		.p-page .p-wrapper #features .features-content{
				width:calc((100% - 25px) / 2);
		}
}
@media (max-width:767px){
	.p-page .p-wrapper #merit *{
		line-height:1.3;
	}
    #Contents .Inner h2 {
        margin-bottom: 30px;
		}
    .p-page .p-wrapper #task-main {
			flex-direction: column;
			max-width: 500px;
			margin: auto;
    }
		.p-page .p-wrapper #task-main .task-problem .text::before {
	    top: -20px;
		}
		.p-page .p-wrapper #features .features-main{
			flex-direction: column;
		}
}

/* page-note */
#page-note {
    padding: 0 15px;
}