* {
    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;
}
nav{
    box-sizing:border-box;
    width:100%;
    position:fixed;
    right:0;
    text-align:right;
    z-index:100;
}
.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;
}
.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;}
.bg{
    box-sizing:border-box;
    z-index:1;
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.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 20px;
    display:grid;
    z-index:2;
}
.card-grid {
    display: grid;
    grid-template-columns:40% 60%;
    margin-top:10vh;
    height:100vh;
    width:100%;
}
.cardl {
    transition: opacity 0.5s ease;
    opacity: 0;
    transform: translateX(-40%);
    width:40%;
    position: absolute;
    left:0;
    display:block;
    height:80vh;
    padding:40px;
    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:40px;
    margin:10vh 0;
    overflow:hidden;
}
.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);
}
.form-group {
    position: relative;
    margin-bottom: 30px;
}
.form-input {
    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;
}
.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 {
    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;
}
.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:2 !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 2vw 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;
}
.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: 20px;
}
.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; 
}

@media screen and (min-width:100px){
.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:5px 15px;
}
.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;
    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:0;
    width:100%;
    min-width:250px;
    max-width:300px;
    display:grid;gap:15px;
    grid-template-columns:1fr;
    justify-items: center;
    margin-left:0;
    background:#aaa;
}
.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;
}
#nav{
    transition: right 0.3s ease-out;
}
#nav.menu-open{
    right:0;
}
.card-grid {
    display: grid;
    grid-template-columns:none;
}
.cardl {
    width:90%;
    height:20vh;
    margin:10vh 5% 0 5%;
    padding:0 40px;
}
.cardr{
    width:90%;
    left:0%;
    height:60vh;
    margin:30vh 5% 10vh 5%;
}
@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;
}
.header-innerr{
    padding:3vh 2vw; 
    max-width:60%;
}
.header-innerr a{
    padding:5px 5px;
}
.spinning{
    font-size:6vw;
}
}

@media screen and (min-width:768px) {
.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;
}
.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;
}
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 3vw; 
    min-width:0px;
    max-width:50%;
    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 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;
}
.card-grid {
    display: grid;
    grid-template-columns:none;
}
.cardl {
    width:70%;
    height:20vh;
    margin:10vh 15% 0 15%;
    padding:0 40px;
}
.cardr{
    width:70%;
    left:0%;
    height:60vh;
    margin:30vh 15% 10vh 15%;
}
@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;
}
.header-innerr{
    padding:3vh 2vw; 
    max-width:60%;
}
.header-innerr a{
    padding:5px 5px;
}
.spinning{
    font-size:4vw;
}
}

@media screen and (min-width:1025px){
.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%;
}
.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;
    }
}
.catchphrase-container {
    font-size:6vw;
}
.header-innerr{
    padding:3vh 3vw; 
    max-width:50%;
}
.header-innerr a{
    padding:5px 10px;
}
.spinning{
    font-size:3vw;
}
}