/* ==================================================
   RESET
================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

img{
display:block;
width:100%;
height:auto;
}

ul{
list-style:none;
}

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

body{

font-family:"Inter","Noto Sans JP",sans-serif;

color:#222;

background:#FAFAF8;

line-height:1.8;

font-size:16px;

-webkit-font-smoothing:antialiased;

}

/* ==================================================
COLOR
================================================== */

:root{

--green:#3E6B53;

--green-light:#6D957A;

--black:#222222;

--gray:#666666;

--border:#E8E8E8;

--white:#ffffff;

--bg:#FAFAF8;

--container:1200px;

--section:140px;

}

/* ==================================================
COMMON
================================================== */

.container{

width:min(92%,1200px);

margin:auto;

}

section{

padding:var(--section) 0;

}

.section-title{

font-size:14px;

letter-spacing:.25em;

color:var(--green);

margin-bottom:20px;

text-transform:uppercase;

}

.heading{

font-size:clamp(34px,5vw,64px);

line-height:1.2;

font-weight:600;

margin-bottom:30px;

}

.text{

max-width:700px;

color:var(--gray);

}

.btn{

display:inline-flex;

align-items:center;

gap:14px;

padding:18px 42px;

border:1px solid var(--green);

transition:.35s;

font-weight:500;

}

.btn:hover{

background:var(--green);

color:white;

}

.card{

background:white;

border-radius:10px;

overflow:hidden;

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

@media(max-width:768px){

:root{

--section:90px;

}

.heading{

font-size:36px;

}

}

/* ===========================
HEADER
=========================== */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

transition:.35s;

}

.header.is-scroll{

background:#fff;

box-shadow:0 4px 20px rgba(0,0,0,.06);

backdrop-filter:blur(10px);

}

.header__inner{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

transition:.35s;

}

.header.is-scroll .header__inner{

height:72px;

}

.header__logo{

width:170px;

}

.header__menu{

display:flex;

gap:48px;

font-size:14px;

letter-spacing:.15em;

}

.header__menu a{

position:relative;

}

.header__menu a::after{

content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:1px;

background:var(--green);

transition:.3s;

}

.header__menu a:hover::after{

width:100%;

}

.hamburger{

display:none;

width:44px;

height:44px;

background:none;

border:none;

cursor:pointer;

position:relative;

z-index:1200;

}

.hamburger span{

display:block;

position:absolute;

left:10px;

width:24px;

height:2px;

background:#222;

transition:.3s;

}

.hamburger span:nth-child(1){

top:14px;

}

.hamburger span:nth-child(2){

top:21px;

}

.hamburger span:nth-child(3){

top:28px;

}

.hamburger.active span:nth-child(1){

transform:rotate(45deg);

top:21px;

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:rotate(-45deg);

top:21px;

}

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:100%;

height:100vh;

background:#FAFAF8;

transition:.4s;

z-index:1100;

display:flex;

justify-content:center;

align-items:center;

}

.mobile-menu.active{

right:0;

}

.mobile-menu ul{

display:flex;

flex-direction:column;

gap:36px;

text-align:center;

font-size:24px;

}

@media(max-width:900px){

.header__nav{

display:none;

}

.hamburger{

display:block;

}

}

/*==========================
Hero
==========================*/

.hero{

position:relative;

height:100vh;

min-height:780px;

overflow:hidden;

}

.hero picture{

position:absolute;

inset:0;

}

.hero img{

width:100%;

height:100%;

object-fit:cover;

}

.hero__overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.25);

}

.hero__content{

position:relative;

z-index:10;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:flex-start;

color:white;

}

.hero__sub{

font-size:14px;

letter-spacing:.3em;

margin-bottom:30px;

opacity:.85;

text-transform:uppercase;

}

.hero h1{

font-size:clamp(48px,6vw,82px);

line-height:1.2;

font-weight:600;

margin-bottom:36px;

}

.hero__text{

max-width:620px;

font-size:18px;

line-height:2;

margin-bottom:48px;

color:rgba(255,255,255,.92);

}

.hero .btn{

border-color:white;

color:white;

}

.hero .btn:hover{

background:white;

color:#222;

}

@media(max-width:768px){

.hero{

min-height:700px;

}

.hero h1{

font-size:42px;

}

.hero__text{

font-size:15px;

line-height:1.8;

}

}

/*===============================
Concept
===============================*/

.concept{

background:#FAFAF8;

}

.concept__inner{

display:grid;

grid-template-columns:1fr 1fr;

gap:120px;

align-items:flex-start;

margin-top:40px;

}

.concept__heading{

font-size:clamp(42px,5vw,68px);

font-weight:500;

line-height:1.35;

letter-spacing:.02em;

}

.concept__body{

display:flex;

flex-direction:column;

gap:32px;

font-size:18px;

color:#666;

line-height:2;

}

@media(max-width:900px){

.concept__inner{

grid-template-columns:1fr;

gap:50px;

}

.concept__heading{

font-size:38px;

}

.concept__body{

font-size:16px;

}

}

/*==============================
ABOUT
==============================*/

.about{

background:#fff;

}

.about__grid{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:90px;

align-items:center;

}

.about__image{

overflow:hidden;

border-radius:6px;

}

.about__image img{

aspect-ratio:4/5;

object-fit:cover;

transition:.8s;

}

.about__image:hover img{

transform:scale(1.05);

}

.about .btn{

margin-top:50px;

}

@media(max-width:900px){

.about__grid{

grid-template-columns:1fr;

gap:50px;

}

}

/*==============================
SERVICE
==============================*/

.service{

background:#FAFAF8;

}

.service__grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

margin-top:60px;

}

.service-card{

background:#fff;

overflow:hidden;

border-radius:8px;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.04);

}

.service-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.service-card img{

aspect-ratio:16/10;

object-fit:cover;

}

.service-card__body{

padding:36px;

}

.service-card__body span{

display:block;

color:var(--green);

font-size:14px;

letter-spacing:.2em;

margin-bottom:12px;

}

.service-card__body h3{

font-size:28px;

font-weight:500;

margin-bottom:18px;

}

.service-card__body p{

color:#666;

line-height:1.9;

}

@media(max-width:900px){

.service__grid{

grid-template-columns:1fr;

}

.service-card__body{

padding:28px;

}

.service-card__body h3{

font-size:24px;

}

}

/*==============================
WORKS
==============================*/

.works{

background:#fff;

}

.works-feature{

margin-top:70px;

position:relative;

overflow:hidden;

border-radius:10px;

}

.works-feature img{

aspect-ratio:16/8;

object-fit:cover;

}

.works-feature__content{

position:absolute;

left:60px;

bottom:60px;

color:white;

max-width:420px;

}

.works-feature__content span{

letter-spacing:.2em;

font-size:14px;

opacity:.9;

}

.works-feature__content h3{

font-size:42px;

margin:18px 0;

font-weight:500;

}

.works-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:36px;

margin-top:60px;

}

.work-card{

overflow:hidden;

border-radius:8px;

background:white;

transition:.35s;

}

.work-card img{

aspect-ratio:4/3;

object-fit:cover;

transition:.8s;

}

.work-card:hover img{

transform:scale(1.08);

}

.work-card__body{

padding:24px;

}

.work-card span{

font-size:12px;

letter-spacing:.2em;

color:var(--green);

}

.work-card h3{

margin-top:12px;

font-size:24px;

font-weight:500;

}

.works__button{

text-align:center;

margin-top:60px;

}

@media(max-width:900px){

.works-grid{

grid-template-columns:1fr;

}

.works-feature__content{

left:30px;

bottom:30px;

}

.works-feature__content h3{

font-size:30px;

}

}

/*==============================
WHY
==============================*/

.why{

background:#FAFAF8;

}

.why__grid{

display:grid;

grid-template-columns:repeat(2,1fr);

margin-top:70px;

border-top:1px solid var(--border);

}

.why-card{

padding:60px;

border-bottom:1px solid var(--border);

}

.why-card:nth-child(odd){

border-right:1px solid var(--border);

}

.why-card span{

font-size:14px;

letter-spacing:.3em;

color:var(--green);

}

.why-card h3{

font-size:34px;

font-weight:500;

margin:18px 0 24px;

}

.why-card p{

color:#666;

line-height:2;

}

@media(max-width:900px){

.why__grid{

grid-template-columns:1fr;

}

.why-card{

padding:40px 20px;

}

.why-card:nth-child(odd){

border-right:none;

}

}

/*==============================
DATA
==============================*/

.data{

background:#ffffff;

}

.data__grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

margin-top:70px;

}

.data-item{

padding-bottom:24px;

border-bottom:1px solid var(--border);

}

.data-item__label{

font-size:14px;

letter-spacing:.15em;

color:var(--gray);

margin-bottom:18px;

}

.data-item h3{

font-size:clamp(36px,5vw,64px);

font-weight:600;

line-height:1.1;

}

.data-item span{

font-size:.4em;

margin-left:6px;

color:var(--green);

}

@media(max-width:900px){

.data__grid{

grid-template-columns:repeat(2,1fr);

gap:30px;

}

}

@media(max-width:600px){

.data__grid{

grid-template-columns:1fr;

}

}

/*==============================
NEWS
==============================*/

.news{

background:#FAFAF8;

}

.news__head{

display:flex;

justify-content:space-between;

align-items:end;

margin-bottom:60px;

}

.news__list{

border-top:1px solid var(--border);

}

.news-card{

display:grid;

grid-template-columns:140px 120px 1fr;

align-items:center;

padding:32px 0;

border-bottom:1px solid var(--border);

transition:.3s;

cursor:pointer;

}

.news-card:hover{

padding-left:20px;

}

.news-card time{

font-size:14px;

color:#666;

}

.news-category{

font-size:12px;

letter-spacing:.15em;

color:var(--green);

}

.news-card h3{

font-size:20px;

font-weight:500;

}

@media(max-width:900px){

.news__head{

flex-direction:column;

align-items:flex-start;

gap:30px;

}

.news-card{

grid-template-columns:1fr;

gap:12px;

}

}

/*==============================
CTA
==============================*/

.cta{

padding:140px 0;

background:url("../images/common/cta.jpg") center/cover;

position:relative;

}

.cta::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.cta__box{

position:relative;

z-index:2;

color:#fff;

max-width:720px;

}

.cta h2{

font-size:clamp(38px,5vw,64px);

margin:24px 0;

line-height:1.4;

font-weight:500;

}

.cta p{

line-height:2;

opacity:.9;

}

.cta__buttons{

margin-top:40px;

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-outline{

border:1px solid #fff;

color:#fff;

}

.btn-outline:hover{

background:#fff;

color:#222;

}

/*==============================
FOOTER
==============================*/

.footer{

background:#222;

color:#fff;

padding:80px 0 40px;

}

.footer__top{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:50px;

border-bottom:1px solid rgba(255,255,255,.15);

}

.footer__top img{

width:180px;

}

.footer nav ul{

display:flex;

gap:36px;

}

.footer__bottom{

padding-top:30px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

color:rgba(255,255,255,.7);

}

.footer__bottom a{

font-size:11px;

letter-spacing:.15em;

}

@media(max-width:900px){

.footer__top{

flex-direction:column;

gap:40px;

}

.footer nav ul{

flex-direction:column;

text-align:center;

}

.footer__bottom{

flex-direction:column;

gap:18px;

}

}