* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}
:root {
    --color-primary: #333;
    --color-text-base: #333;
    --color-bg-light: #f4f4f4;
    --color-border: #e0e0e0;
    --color-shadow: rgba(0, 0, 0, 0.1);
}
html{
    scroll-behavior:smooth;
    overflow-x:clip;
    width: 100vw;
}
body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-color: var(--color-bg-light);
    color: var(--color-text-base);
    font-family: "Meiryo", "Hiragino Sans", "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.2em;
    overflow-x: clip;
    width: 100vw;
}
header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:90;
}
.header-inner{
    padding:2vh 3vw; 
    width: 100%;
    box-sizing: border-box;
}
.header-inner img{
    width:200px;
    height:50px;
}
nav{
    box-sizing:border-box;
    width:100%;
    position:fixed;
    right:0;
    text-align:right;
    z-index:100;
    pointer-events: none;
}
.nav-link{
    color: #333;
    transition: color 0.3s ease;
}
.header-innerr{
    padding:3vh 3vw; 
    max-width:50%;
    width:100%;
    box-sizing: border-box;
    display:grid;gap:10px;grid-template-columns:1fr 1fr 1fr 1fr;
    margin-left:auto;
    pointer-events: auto;
}
.header-innerr a{
    padding:5px 10px;background:#fff;text-align:center;
    background-image:linear-gradient(to right,#333 50%,#fff 50%);
    background-size:202% 100%;
    background-position:right center;
    transition:background-position 0.2s ease-out;
}
.nav-link:hover {
  background-position:left center;
  color:#fff;
}
.nav-link.active{
  background-position:left center;
  color:#fff;
}
.body{z-index:100;pointer-events: auto;}
.bg{
    box-sizing:border-box;
    z-index:0;
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
}
.bubble {
    position: absolute;
    bottom: 0; 
    width:5vh;
    height:5vh;
    background: rgba(205, 205, 205, 0.5);
    border-radius: 50%;
    -webkit-animation: moveUp 10s linear infinite;
    animation: moveUp 10s linear infinite;
}
@keyframes moveUp {
    0% {
        transform: translateX(0) translateY(0vh) scale(0.5); 
        opacity: 0;
    }
    50% {
        transform: translateX(25px) translateY(-50vh) scale(1.0); 
        opacity: 1.0;
    }
    100% {
        transform: translateX(50px) translateY(-100vh) scale(0.5); 
        opacity: 0;
    }
}
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-out;
}
a:hover {
    color: var(--color-primary-dark);
}
.content-wrapper {
    position: relative;
    max-width:1200px;
    margin:0 auto;
    padding:0;
    display:grid;
    z-index:2;
}
.card-grid {
    display: grid;
    grid-template-columns:40% 60%;
    margin-top:10vh;
    height:100vh;
    width:100vw;
    padding:0 10px;
    pointer-events: auto !important;
}
.cardl {
    transition: opacity 0.5s ease;
    opacity: 0;
    transform: translateX(-40%);
    width:40%;
    position: absolute;
    left:0;
    display:block;
    height:80vh;
    padding:4vw;
    margin:10vh 0;
}
.cardr {
    transition: opacity 0.5s ease;
    opacity: 0; transform: translateX(100%);
    width:60%;
    left:40%;
    position: absolute;
    display:block;
    height:80vh;
    background-color: #fff;
    padding:4vw;
    margin:10vh 0;
    overflow:hidden;
    pointer-events: auto !important;
}
.cardl.is-visible {
    animation:leftUp;animation-delay:0s;animation-duration:0.5s;
    opacity: 0.9;
    transform:translateX(0);
}
.cardr.is-visible {
    animation:rightUp;animation-delay:0s;animation-duration:0.5s;
    opacity: 0.9;
    transform:translateX(0);
}
.cyn{background:#00aeff;filter:saturate(120%) contrast(110%);}
.mgt{background:#ff00ff;filter:saturate(120%) contrast(110%);}
.ylw{background:#ffd400;filter:saturate(120%) contrast(110%);}
.blk{background:#22283A;filter:saturate(120%) contrast(110%);}
footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    margin-top:-5vh;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.footer-nav a {
    color: #ccc;
    margin: 0 10px;
}
.hero-section {
    box-sizing:border-box;
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.catchphrase-container {
    text-align: center;
    line-height: 1.1;
    z-index: 10;
    font-size:6vw;
    font-weight:800;
    line-height:1.4;
}
.word {
    opacity: 0; 
    display: inline-block;
    animation-name: slideInFromLeft;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}
.spinning{
    color:#fff;
    font-size:3vw;
    display:flex;
    height:100%;
    text-align:center;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3em;
    animation-name: spin;
    animation-duration:20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    transform-origin: center center;
}
@keyframes spin {
    0% {
        transform: rotate(-20deg); 
    }
    50% {
        transform: rotate(20deg); 
    }
    100% {
        transform: rotate(-20deg); 
    }
}
.circlebtm{
    width:6vw;
    height:6vw;
    overflow: hidden;
}
.circle{
    width:12vw;
    height:12vw;
    clip-path:polygon(0% 100%,100% 100%,100% 0%);
    animation-name: bigsmall;
    animation-duration:2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    position:absolute;bottom:-3vw;right:-3vw;
    transform-origin:100% 100%;
    transform:translate(-50%,-50%);
}
@keyframes bigsmall {
    0% {
        transform:scale(0.5); 
    }
    50% {
        transform:scale(1.0); 
    }
    100% {
        transform:scale(0.5); 
    }
}
.modern-form {
    display:flex;
    flex-direction: column;
    max-width:100%;
    min-height:300px;
    max-height:100%;
    margin: 0 auto;
    padding: 30px;
    background: #fdfdfd;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index:999;
    pointer-events: none;
}
.form-group {
    position: relative;
    margin-bottom: 30px;
}
.form-input {
    z-index:999;
    opacity:1;
    width: 100%;
    padding:10px 5px;
    border: none;
    border-bottom: 2px solid #ddd;
    font-size: 16px;
    color: #333;
    background: none;
    outline: none;
    transition: all 0.3s ease;
    min-height: 20px;
    pointer-events: auto;
}
.textarea-group {
    position: relative;
    flex-grow: 1; 
    margin-bottom: 0;
    display:flex;
    flex-direction: column;
    height: 100vh;
}
.textarea-group .form-input {
    width: 100%;
    flex-grow: 1;
    min-height:50%;
    max-height: 100%;
    resize: none;
}
.form-label {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 16px;
}
.textarea-group .form-label {
    flex-shrink: 0;
}
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
    top: -20px;
    font-size: 12px;
    color: #666;
}
.form-input:focus {
    border-bottom-color: #666;
}
.submit-btn {
    z-index:999;
    opacity:1;
    margin-top:10px;
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: #333;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
    pointer-events: auto;
}
.submit-btn:hover {
    background: #151515;
}
#err1{display:none;color:#ff0000;}
#err2{display:none;color:#ff0000;}
#err3{display:none;color:#ff0000;}
.triangle{
    position: relative;
    width:30vh;
    height:25.98vh;
    margin:0 auto;
}
.circles{
    position: absolute;
    width:10vh;
    height:10vh;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    z-index:20;
    animation-duration:2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    position:absolute;bottom:5vh;right:5vh;
}
@keyframes bigsmalls {
    0% {
        transform:scale(1); 
    }
    50% {
        transform:scale(1.2); 
    }
    100% {
        transform:scale(1); 
    }
}
@keyframes bigsmallst {
    0% {
        transform:translateX(-50%) scale(1); 
    }
    50% {
        transform:translateX(-50%) scale(1.2); 
    }
    100% {
        transform:translateX(-50%) scale(1); 
    }
}
.circle-text {
    text-align: center;
    padding:10px;
    font-size:3vh;
}
.top-circle {
    top: 0;
    left:50%;
    transform: translateX(-50%);
    transform-origin: 50% 50%;
    animation-name: bigsmallst;
}
.left-circle {
    bottom: 0;
    left:0;
    animation-name: bigsmalls;
}

.right-circle {
    bottom: 0;
    right:0;
    animation-name: bigsmalls;
}
.line {
    position: absolute;
    background-color: #ddd;
    height:5px;
    transform-origin: left center;
    z-index: 5;
}
.line-top-left {
    width:20vh;
    top:5vh;
    left:50%;
    transform: rotate(120deg);
}
.line-top-right {
    width:20vh;
    top:5vh;
    left:50%;
    transform: rotate(60deg);
}
.line-bottom {
    width:20vh;
    bottom:5vh;
    left:5vh;
}
.vision-text{
    margin-top:5vh;
    text-rendering:optimizeLegibility;
    text-shadow:0 0 1px rgba(0,0,0,0.1);
}
.vision-text p{line-height:1.8 !important;}
.service-layout {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.two-column-layout {
    display: flex; 
    width: 100%;
}
.column {
    flex: 1;
}
.carousel-column {
    flex-basis: 200px;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0; 
    margin:1vw 0 1vw 2vw;
}
.carousel-container {
    width: 200px; 
    height: 200px;
    overflow: hidden; 
    position: relative; 
}
.carousel-track-slide {
    display: flex;
    height: 100%;
    width: 1100%; 
    animation: slide-right-to-left 30s infinite linear; 
}
.carousel-track-slide img {
    width:200px;
    height:auto; 
    object-fit: cover; 
    flex-shrink: 0; 
}
@keyframes slide-right-to-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1000%); } 
}
.text-column {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
    margin:1vw 2vw 2vw 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}
.site{
    font-size:1.2em;
    padding:2vw 2vw 0 2vw;
    font-weight:bold;
    pointer-events:auto !important;
}
.text-column p {
    line-height: 1.6;
    margin-bottom: 10px;
}
.btn-detail{
    display: inline-block;
    text-align:center;
    color: #fff;
    padding:10px 20px;
    border-radius: 5px;
    margin-top:0px;
}
.modern-table {
    width: 100%;
    border-collapse: collapse; 
    border-spacing: 0;
    margin-bottom: 30px;
}
.modern-table tbody tr {
    border-bottom: 1px solid #eee; 
}
.modern-table .item-label {
    width: 30%;
    padding: 15px;
    background-color: #f7f7f7;
    font-weight: bold;
    color: #444;
    text-align: left;
    border-right: 1px solid #e0e0e0; 
    vertical-align: top; 
}
.modern-table .item-value {
    padding: 15px;
    color: #333;
    line-height: 1.6;
    vertical-align: top; 
}
.site a,
.service-layout {
    z-index: 999999 !important;
    position: relative !important;
}
.site a{
    display: block !important;
    width: 100%;
    padding:2px 0;
    transform: translateZ(0);
}

@media screen and (min-width:100px){
    .text-column {
        margin:1vw 2vw 2vw 2vw;
    }
    .site{
        padding:2vw 2vw 0 2vw;
    }
    .mb{display:inline;}
    .pc{display:none;}
    .modern-table {
            display: block;
            width: 100%;
        }
    .modern-table tbody,
    .modern-table tr {
        display: block;
        width: 100%;
    }
    .modern-table th, 
    .modern-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border-right: none !important;
        padding:5px 15px;
    }
    .modern-table .item-label {
        background-color: #f0f0f0;
        border-bottom: 1px dotted #ccc;
        font-size: 1.1em;
        width: 100%;
        padding:3px 15px;
        font-size:0.8em;
    }
    .modern-table .item-value {
        padding:5px 15px;
    }
    .carousel-column {
        flex-basis:100px;
    }
    .carousel-container {
        width:100px; 
        height:100px;
    }
    .carousel-track-slide img {
        width:100px;
    }
    .vision-text{font-size:1em;}
    .title{writing-mode:horizontal-tb;}
    nav{
        box-sizing:border-box;position:fixed;right:0;;
        max-width:300px;
        height:100%;
        max-width:300px;
        overflow:hidden;
        padding:0;
        margin-left:auto;
    }
    .header-button{
        display:block;
        position: fixed;
        top:4vh;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        pointer-events: auto !important;
        z-index: 101;
    }
    .bar{
        display: block;
        width: 100%;
        height: 4px;
        background: #333;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
        margin-bottom: 5px; 
    }
    #barm.menu{opacity:0;}
    #bart.menu{transform: translateY(9px) rotate(45deg);}
    #barb.menu{transform: translateY(-9px) rotate(-45deg);}
    .header-innerr{
        margin-top:80px;
        position:absolute;
        top:0;
        right:-100%;
        opacity:0.9;
        box-sizing:border-box;
        padding:3vh 2vw;
        width:100%;
        min-width:250px;
        max-width:60%;
        display:grid;gap:15px;
        grid-template-columns:1fr;
        justify-items: center;
        margin-left:0;
        background:#aaa;
        pointer-events: auto !important;
    }
    .header-innerr a{
        display:block;
        box-sizing:border-box;
        width:210px;
        max-width: 100%;
        margin:0px;
        padding:5px 0;text-align:center;
        background-image:linear-gradient(to right,#333 50%,#fff 50%);
        background-size:202% 100%;
        background-position:right center;
        transition:background-position 0.2s ease-out;
        padding:5px 5px;
    }
    #nav{
        transition: right 0.3s ease-out;
    }
    #nav.menu-open{
        right:0;
    }
    .card-grid {
        display: grid;
        grid-template-columns:none;
    }
    .cardl {
        width:90%;
        height:10vh;
        margin:13vh 5% 0 5%;
        padding:0 40px;
    }
    .cardr{
        width:90%;
        left:0%;
        height:67vh;
        margin:23vh 5% 1vh 5%;
        font-size:1em;
    }
    @keyframes leftUp{
        0% {
            opacity: 0;transform:translateX(-100%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
    @keyframes rightUp{
        0% {
            opacity: 0;
            transform:translateX(100%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
    .catchphrase-container {
        font-size:8vw;
    }
    .spinning{
        font-size:6vw;
    }
}

@media screen and (min-width:600px) {
    .text-column {
        margin:1vh 2vh 2vh 2vh;
    }
    .site{
        padding:2vh 2vh 0 2vh;
    }
    .pc{display:inline;}
    .mb{display:none;}
    .modern-table {
        display: table;
        width: 100%;
    }
    .modern-table tbody,
    .modern-table tr {
        display: table-row-group;
        display: table-row;
        width: auto;
    }
    .modern-table th,
    .modern-table td {
        display: table-cell;
        width: auto;
        border-right: 1px solid #e0e0e0;
    }
    .modern-table .item-label {
        width: 30%;
        background-color: #f7f7f7;
        padding:20px 15px;
        font-size:1em;
    }
    .modern-table .item-value {
        width: 70%;
        padding:20px 15px;
    }
    .modern-table .item-value:last-child {
        border-right: none;
    }
    .carousel-column {
        flex-basis:150px;
    }
    .btn-detail{
        display: inline-block;
    }
    .carousel-container {
        width:150px; 
        height:150px;
    }
    .carousel-track-slide img {
        width:150px;
    }
    .card-grid {
        display: grid;
        grid-template-columns:none;
    }
    .cardl {
        width:90%;
        height:20vh;
        margin:10vh 5% 0 5%;
        padding:0 20px;
    }
    .cardr{
        width:90%;
        left:0%;
        height:60vh;
        margin:30vh 5% 10vh 5%;
        font-size:1em;
    }
    @keyframes leftUp{
        0% {
            opacity: 0;transform:translateX(-100%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
    @keyframes rightUp{
        0% {
            opacity: 0;transform:translateX(100%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
    .catchphrase-container {
        font-size:8vw;
    }
    .spinning{
        font-size:4vw;
    }
}

@media screen and (min-width:800px){
    nav{
        box-sizing:border-box;
        width:100%;
        position:fixed;
        right:0;
        text-align:right;
        max-width:100%;
        height:auto;
        position:fixed;
    }
    #navs{
        display:none;
    }
    .header-button{display:none;}
    .header-innerr{
        margin-top:0;
        position:static;
        opacity:1;
        background:none;
        padding:3vh 0; 
        min-width:300px;
        max-width:60%;
        width:100%;
        box-sizing: border-box;
        display:grid;
        gap:10px;
        grid-template-columns:1fr 1fr 1fr 1fr;
        margin-left:auto;
    }
    .header-innerr a{
        width:100%;
        margin-left:0%;
        padding:5px 5px;
        background:#fff;
        text-align:center;
        background-image:linear-gradient(to right,#333 50%,#fff 50%);
        background-size:202% 100%;
        background-position:right center;
        transition:background-position 0.2s ease-out;
    }
    .cardl {
        width:40%;
        height:80vh;
        padding:40px;
        margin:10vh 0;
    }
    .cardr{
        width:60%;
        left:40%;
        height:80vh;
        margin:10vh 0;
    }
    @keyframes leftUp{
        0% {
            opacity: 0;transform:translateX(-40%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
    @keyframes rightUp{
        0% {
            opacity: 0;transform:translateX(100%);
        }
        100% {
            transform:translateX(0);
            opacity: 0.9;
        }
    }
}

@media screen and (min-width: 800px) and (max-height: 799px){
    .mb{display:inline;}
    .pc{display:none;}
    .modern-table .item-label {
        padding:10px 15px;
    }
    .modern-table .item-value {
        padding:10px 15px;
    }
    .carousel-container {
        width:100px; 
        height:100px;
    }
    .carousel-track-slide img {
        width:100px;
    }
    .cardl {
        width:40%;
        height:80vh;
        padding:40px;
        margin:15vh 0 5vh 0;
    }
    .cardr{
        width:60%;
        left:40%;
        height:80vh;
        margin:15vh 0 5vh 0;
    }
    .header-inner img{
        width:160px;
        height:40px;
    }
}

@media screen and (min-width:1025px){
    .header-inner img{
        width:200px;
        height:50px;
    }
    .carousel-column {
        flex-basis:200px;
    }
    .btn-detail{
        display: inline-block;
    }
    .carousel-container {
        width:200px; 
        height:200px;
    }
    .carousel-track-slide img {
        width:200px;
    }
    .vision-text{font-size:1.5em;}
    .card-grid {
        display: grid;
        grid-template-columns:40% 60%;
        width:100%;
    }
    .catchphrase-container {
        font-size:6vw;
    }
    .header-innerr{
        padding:3vh 3vw; 
        max-width:50%;
    }
    .header-innerr a{
        font-size:1em;
        padding:5px 10px;
    }
    .spinning{
        font-size:3vw;
    }
}
1