@charset "utf-8";

/* header */
header{ color: #fff; }
header .logo-img{ fill: currentColor; }

/* visual */
.visual{ position: relative; display: flex; align-items: center; height: 100svh; min-height: 550rem; padding-bottom: .1%; color: #fff; }
.visual .swiper{ position: absolute; inset: 0; }
.visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; }
.visual .s1::before{ background-image: url('../images/main/visual-1.jpg'); }
.visual .s2::before{ background-image: url('../images/main/visual-1.jpg'); }
.visual .s3::before{ background-image: url('../images/main/visual-1.jpg'); }
.visual .inr{ z-index: 1; }
.visual .lead{ font: 400 clamp(16rem, calc(18 / var(--inr) * 100vw), 18rem) var(--font-mon); letter-spacing: 0.12rem;}
.visual h2 { margin: .65em 0 0; font: 400 clamp(26rem, calc(55 / var(--inr) * 100vw), 55rem)/1.3 var(--font-pre); }
.visual strong {font-weight: 600;}
.visual span {display: flex; align-items: center; gap: 15rem; font-size: var(--fs18); margin-top: 40rem;}
.visual .sign {font-family: var(--font-roe); font-size: var(--fs25); font-weight: 300;}
.visual .control{ margin: 50rem 0 0 1px; display: flex; gap: 15rem; }
.visual .btn{ position: relative; width: 8rem; aspect-ratio: 8/15; }
.visual .btn::before{ content: ''; position: absolute; inset: -10rem; }
.visual .arrow{ display: block; width: 100%; height: 100%; fill: currentColor; }
.visual .pager{ all: unset; display: flex; align-items: center; gap: 12rem; font: 500 16rem var(--font-mon); user-select: none; }
.visual .progress{ position: relative; margin-right: 5rem; width: 120rem; height: 3px; background: #ffffff80; }
.visual .progress::before{ content: ''; position: absolute; inset: 0; width: var(--progress, 0); background: #fff; }
.visual :where(.swiper-pagination-current, .swiper-pagination-total){ width: 1.75ch; white-space: nowrap; }
.visual .scrollDown-group{ position: absolute; inset: 0; margin: auto; display: grid; align-items: center; pointer-events: none; }
.visual .scrollDown{ position: absolute; right: 0; display: flex; flex-direction: column; gap: 11rem; }
.visual .scrollDown-txt{ font: 13rem var(--font-mon); text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; }
.visual .scrollDown-arrow{ margin-top: 1px; display: block; width: 16rem; height: 8rem; fill: currentColor; }
/* .visual .pager.swiper-pagination-lock{opacity:0;} */
@media(prefers-reduced-motion:reduce){
    .visual .scrollDown-arrow.a1{ opacity: .6; }
}
@media(prefers-reduced-motion:no-preference){
    .visual .swiper-slide::before{ scale: 1.1; }
    .visual .swiper-slide-active::before{ scale: 1; transition: 1.2s cubic-bezier(0.39, 0.58, 0.57, 1); }
    .scrollDown-arrow{ animation: visual-scroll-down-arrow 1.4s infinite; opacity: 0; }
    .scrollDown-arrow.a2{ animation-delay: .1s; }
}
@keyframes visual-scroll-down-arrow {
    0%, 20%, 100%{ opacity: 0; }
    60%{ opacity: 1; }
}

/* common */
.common-lead{ font: 700 16rem var(--font-play); letter-spacing: .01em; color: var(--primary); text-transform: uppercase; }
.common-h2{ margin-top: .675em; font: 700 var(--fs40)/1.375 var(--font-pre); letter-spacing: -.01em; }
.common-more{ display: inline-flex; align-items: center; gap: 48rem; padding: 16rem 28rem 17rem; background: var(--primary); border: 1px solid #0000; font-size: 14rem; color: #fff; }
.common-more-arrow{ width: 5rem; fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75px;}
@media(prefers-reduced-motion:no-preference){
    .common-more{ transition: .3s; }
}
@media(any-hover){
    .common-more:not(:hover){ background: color-mix(in srgb, currentColor, #0000 94%); border-color: color-mix(in srgb, currentColor, #0000 70%); color: var(--black); }
}

/* energy */
.energy{ padding: clamp(70rem, calc(128 / var(--inr) * 100vw), 128rem) 0 clamp(70rem, calc(130 / var(--inr) * 100vw), 130rem); background: url('../images/main/energy-bg2.jpg') no-repeat 50% / cover; }
.energy .tablist{ align-self: end; margin: 30rem 0 10rem; display: inline-flex; background: #f2f2f2; font: 600 18rem var(--font-play); color: #666; text-align: center; }
.energy .tab{ min-width: 126rem; padding: 17rem 1ch 18rem; cursor: pointer; }
.energy .tab[aria-selected="true"]{ background: var(--primary); color: #fff; }
.energy .tabpanel[aria-hidden="true"]{ display: none; }
.energy .list{ margin-top: 35rem; display: grid; gap: 10rem clamp(10rem, calc(40 / var(--inr) * 100vw), 40rem); }
.energy .list li{ padding: 26rem clamp(20rem, calc(39 / var(--inr) * 100vw), 39rem) 29rem; background: #fff; border: 1px solid #e8e8e8; }
.energy .title{ font: 700 20rem var(--font-pre); letter-spacing: -.025em; text-transform: uppercase; }
.energy .date{ margin-left: 1ch; color: #666; }
.energy .value{ margin-top: 14rem; display: inline-block; font: 600 clamp(24rem, calc(45 / 1920 * 100vw), 45rem) var(--font-pre); letter-spacing: -.025em; }
.energy .unit{ margin-left: 1.3ch; font-weight: 600; letter-spacing: -.025em; color: #444; }
.energy .change{ margin-left: 1.4ch; font-weight: 600; }
.energy .red{ color: #ec2034; }
.energy .red::before{ content: '+'; }
.energy .blue{ color: #0e6eb8; }
@media(min-width:768px){
    .energy .inr{ display: grid; grid-template-columns: 1fr auto; }
    .energy .tablist{ margin-top: 0; }
    .energy .tabpanel-group{ grid-column: 1/-1; }
    .energy .list{ grid-template-columns: repeat(3, 1fr); }
}

.business{ padding: clamp(70rem, calc(112 / var(--inr) * 100vw), 112rem) 0 clamp(70rem, calc(129 / var(--inr) * 100vw), 129rem); background: url('../images/main/business-bg2.jpg') no-repeat 50%/ cover; }
.business .inr{ display: grid; gap: 0 clamp(10rem, calc(40 / var(--inr) * 100vw), 40rem); }
.business .common-more{ place-self: end; margin-top: 30rem; }
.business .list{ margin-top: 39rem; display: grid; grid-template-columns: repeat(4, 1fr);  gap: 50rem clamp(10rem, calc(30 / var(--inr) * 100vw), 30rem); font: 600 20rem var(--font-pre); text-align: center; }
.business .link{ display: grid; gap: 17rem; }
.business .img-group{ contain: content; display: block; width: 100%; aspect-ratio: 44/41; }
.business .img{ display: block; width: 100%; height: 100%; object-fit: cover; }
@media(prefers-reduced-motion:no-preference){
    .business .img{ transition: .6s; }
}
@media(any-hover){
    .business .link:hover .img{ scale: 1.1; }
}

@media(max-width:1280px){
    .business .list {grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:768px){
    .business .list {grid-template-columns: repeat(1, 1fr); }
}
@media(min-width:768px){
    .business .inr{ grid-template-columns: 1fr auto; }
    .business .common-more{ translate: 0 -10rem; margin-top: 0; }
    .business .list{ grid-column: 1/-1;  }
}

.board{ padding: clamp(70rem, calc(101 / var(--inr) * 100vw), 101rem) 0 clamp(70rem, calc(77 / var(--inr) * 100vw), 77rem); background: url('../images/main/board-bg.jpg') no-repeat 50% / cover; }
.board .inr{ display: grid; gap: 70rem clamp(10rem, calc(150 / var(--inr) * 100vw), 150rem); }
.board .list{ margin-top: 30rem; display: grid; }
.board .notice-list{ gap: clamp(10rem, calc(20 / var(--inr) * 100vw), 20rem); }
.board .notice-list .more{ display: block; padding: 34rem 36rem 30rem; background: #fff; border: 3rem solid #0000; }
.board .notice-list .title{ font: 700 20rem var(--font-pre); }
.board .notice-list .body{ margin-top: 16rem; line-height: 1.625; color: #444; }
.board .gallery-list{ grid-template-columns: repeat(2, 1fr); gap: clamp(10rem, calc(20 / var(--inr) * 100vw), 20rem) clamp(10rem, calc(20 / var(--inr) * 100vw), 20rem); }
.board .gallery-list .more{ contain: content; display: block; aspect-ratio: 295/220; background: #f2f2f2 url('../images/common/no-img.svg') no-repeat 50% / 100rem; }
.board .gallery-list .img{ display: block; width: 100%; height: 100%; object-fit: cover; text-indent: -100vw; }
.board .btn-group{ margin-top: 35rem; display: flex; justify-content: end; }
@media(prefers-reduced-motion:no-preference){
    .board :where(.notice-list .more, .gallery-list .img){ transition: .3s; }
}
@media(any-hover){
    .board .notice-list .more:hover{ border-color: var(--primary); box-shadow: 0 2rem 10rem rgba(0, 0, 0, 0.1); }
    .board .gallery-list .img:hover{ scale: 1.1; }
}
@media(any-hover:none){
    .board .notice-list .more{ border-color: var(--primary); box-shadow: 0 2rem 10rem rgba(0, 0, 0, 0.1); }
}
@media(min-width:1280px){
    .board .inr{ grid-template-columns: repeat(2, 1fr); }
}

.inquiry{ padding: clamp(70rem, calc(130 / var(--inr) * 100vw), 130rem) 0; background: url('../images/main/inquiry-bg.jpg') no-repeat 50% / cover; }
.inquiry .inr{ display: grid; gap: 50rem clamp(10rem, calc(129 / var(--inr) * 100vw), 129rem); }
.inquiry .img{ margin: 0 auto; display: block; width: 100%; }
.inquiry .grid-layout{ margin-top: 58rem; display: grid; gap: 10rem 11rem; }
.inquiry :where(.name, .tel, .textarea){ all: unset; min-width: 0; padding: 21rem 31rem 20rem; background: #f2f2f2; border: 0; box-sizing: border-box; }
.inquiry :where(.name, .tel, .textarea)::placeholder{ color: #999; }
.inquiry .textarea{ min-height: 125rem; }
.inquiry .btn-group{ margin-top: 28rem; display: grid; gap: 30rem; }
.inquiry .note{ font: 14rem/20rem var(--font-pre); color: #666; }
.inquiry .note em{ font-weight: 700; color: var(--black); cursor: pointer; }
.inquiry .submit{ justify-self: end; gap: 63rem; padding: 19rem 31rem; }
@media(prefers-reduced-motion:no-preference){
    .inquiry .submit:not(:hover){ background: #2c2c2c; border-color: #0000; color: #fff; }
}
@media(min-width:768px){
    .inquiry .btn-group{ grid-template-columns: 1fr auto; align-items: center; }
    .inquiry .textarea{ grid-column: 1/3; }
}
@media(min-width:1280px){
    .inquiry .inr{ grid-template-columns: 54fr 73fr; }
    .inquiry .form{ padding-top: 46rem; }
}