* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        "Noto Sans JP",
        "Helvetica Neue",
        Arial,
        sans-serif;

    color: #222;

    line-height: 1.8;

}


/* =====================
 Header
===================== */

header {

    padding: 25px 8%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.logo {

    font-size: 28px;

    font-weight: bold;

    letter-spacing: 2px;

}



nav a {

    margin-left: 25px;

    text-decoration: none;

    color: #333;

}



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

.hero {

    padding:140px 8% 120px;

    min-height:600px;

    background:
    linear-gradient(
        rgba(255,255,255,0.65),
        rgba(255,255,255,0.65)
    ),
    url("../images/yatsugatake.png");

    background-size:cover;

    background-position:center;

}


.hero::after {

    content:"";

    position:absolute;

    right:-150px;

    top:-150px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    rgba(20,60,100,0.05);

}

.hero h1 {

    font-size:48px;

    line-height:1.5;

    letter-spacing:3px;

    margin-bottom:30px;

    color:#163a5f;

}



.hero p {

    max-width:750px;

    font-size:18px;

    color:#333;

}



.hero .btn {

    display:inline-block;

    margin-top:30px;

}


.hero .btn:hover {

    background:#0d263f;

}



/* =====================
 Button
===================== */

.btn {

    display:inline-block;

    margin-top:25px;

    padding:12px 32px;

    background:#111;

    color:white;

    text-decoration:none;

    transition:.3s;

}


.btn:hover {

    opacity:.7;

}



/* =====================
 Section
===================== */

section {

    padding:80px 8%;

}


h2 {

    font-size:32px;

    margin-bottom:40px;

}



h3 {

    margin-top:30px;

}



 /* =====================
 Service Cards
===================== */

.cards {

    display:grid;

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

    gap:35px;

}



.card {

    position:relative;

    border:none;

    padding:40px 35px;

    background:white;

    box-shadow:

        0 10px 30px rgba(0,0,0,0.08);

    transition:.3s;

}



.card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#163a5f;

}



.card:hover {

    transform:translateY(-8px);

    box-shadow:

        0 18px 40px rgba(0,0,0,0.12);

}



.card h3 {

    margin-top:0;

    font-size:24px;

    color:#163a5f;

}



.card p {

    color:#555;

}

/* =====================
 Background
===================== */


.gray {

    background:#f7f7f7;

}



.dark {

    background:#111;

    color:white;

}


.dark .card {

    background:#222;

    border-color:#444;

}



/* =====================
 Works
===================== */






/* =====================
 Company
===================== */


#company table {

    width:100%;

    max-width:800px;

    border-collapse:collapse;

}



#company tr {

    vertical-align:top;

}



#company td {

    padding:15px;

    border-bottom:1px solid #ddd;

    text-align:left;

    vertical-align:top;

}



#company td:first-child {

    width:160px;

    white-space:nowrap;

    font-weight:bold;

}



/* =====================
 Contact Form
===================== */


form {

    max-width:900px;

    margin:0 auto;

}



form input[type="text"],
form input[type="email"],
form textarea,
form select {

    width:100%;

    padding:14px;

    font-size:16px;

    border:1px solid #ccc;

    border-radius:4px;

    background:white;

}



form textarea {

    resize:vertical;

}



form label {

    display:inline-block;

    margin:8px 20px 8px 0;

}



form h2 {

    margin-top:45px;

    font-size:24px;

}



button {

    width:220px;

    padding:15px;

    font-size:16px;

    background:#111;

    color:white;

    border:none;

    cursor:pointer;

}



button:hover {

    opacity:.8;

}



/* =====================
 Footer
===================== */


footer {

    padding:35px;

    text-align:center;

    background:#222;

    color:white;

}



/* =====================
 Responsive
===================== */


@media(max-width:800px){


header {

    display:block;

}



nav {

    margin-top:20px;

}



nav a {

    margin-left:0;

    margin-right:15px;

}



.hero {

    padding:70px 6%;

}



.hero h1 {

    font-size:32px;

}



section {

    padding:60px 6%;

}



.cards {

    grid-template-columns:1fr;

}



#company td:first-child {

    width:120px;

}



form {

    width:100%;

}



button {

    width:100%;

}


}
/* =====================
 GENBA-OS
===================== */


.genba {

    background:

    linear-gradient(
        135deg,
        #101820,
        #182d3d
    );

    color:white;

    text-align:center;

}



.genba-title {

    max-width:800px;

    margin:0 auto 50px;

}



.genba-title h2 {

    font-size:40px;

    letter-spacing:3px;

}



.genba-title p {

    color:#ddd;

    font-size:18px;

}



.genba-items {

    display:grid;

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

    gap:30px;

}



.genba-card {

    padding:40px 30px;

    border:1px solid rgba(255,255,255,.2);

    background:

    rgba(255,255,255,.05);

    text-align:left;

    transition:.3s;

}



.genba-card:hover {

    transform:translateY(-8px);

    background:

    rgba(255,255,255,.1);

}



.genba-card span {

    font-size:14px;

    color:#8fb3d9;

}



.genba-card h3 {

    font-size:32px;

    margin:10px 0;

}



.genba-card p {

    color:#ddd;

}



.genba-btn {

    display:inline-block;

    margin-top:50px;

    padding:14px 45px;

    border:1px solid white;

    color:white;

    text-decoration:none;

}



.genba-btn:hover {

    background:white;

    color:#111;

}



/* mobile */

@media(max-width:800px){


.genba-items {

    grid-template-columns:1fr;

}


.genba-title h2 {

    font-size:32px;

}


}
/* =====================
 Works
===================== */


.work-summary {

    display:grid;

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

    gap:25px;

    margin:50px 0;

}



.work-summary div {

    padding:30px 20px;

    background:#f5f7fa;

    text-align:center;

}



.work-summary strong {

    display:block;

    font-size:38px;

    color:#163a5f;

}



.work-summary span {

    display:block;

    margin-top:10px;

    font-size:14px;

}



.work-list {

    padding-left:20px;

}



.work-list li {

    margin-bottom:12px;

}




@media(max-width:800px){


.work-summary {

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

}


}



@media(max-width:500px){


.work-summary {

    grid-template-columns:1fr;

}


}
/* =====================
 Contact
===================== */


.contact {

    text-align:center;

    background:#f5f7fa;

}



.contact h3 {

    font-size:28px;

    margin-bottom:30px;

}



.contact p {

    max-width:700px;

    margin:20px auto;

}



.contact .btn {

    background:#163a5f;

    padding:15px 45px;

}



.contact .btn:hover {

    background:#0d263f;

}
/* =====================
 Works Page
===================== */


.works-list {

    display:grid;

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

    gap:25px;

}



.work-item {

    padding:25px;

    border-left:4px solid #163a5f;

    background:#f7f7f7;

}



.work-item h3 {

    margin-top:0;

}



.work-item p {

    color:#555;

}



@media(max-width:800px){

.works-list {

    grid-template-columns:1fr;

}

}


/* =====================
 Works Page
===================== */


.works-page {

    max-width:1100px;

    margin:auto;

}



.timeline {

    border-left:3px solid #163a5f;

    padding-left:30px;

    margin:40px 0;

}



.timeline-item {

    margin-bottom:45px;

}



.timeline-item h3 {

    color:#163a5f;

    font-size:28px;

}



.works-list {

    display:grid;

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

    gap:30px;

}



.work-item {

    padding:30px;

    background:#f5f7fa;

    border-left:4px solid #163a5f;

}



.work-list li {

    margin-bottom:10px;

}



@media(max-width:800px){

    .works-list {

        grid-template-columns:1fr;

    }

}

/* =====================
 Works Detail
===================== */


.works-table {

    display:grid;

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

    gap:25px;

}



.detail-item {

    padding:25px;

    background:#fff;

    border:1px solid #ddd;

}



.detail-item h3 {

    margin-top:0;

}



.detail-item span {

    color:#163a5f;

    font-weight:bold;

}



@media(max-width:800px){

.works-table {

    grid-template-columns:1fr;

}

}
.works-more {

    margin-top:50px;

    text-align:center;

}