.container {
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
}

.container-wide {
 max-width:1400px;
 margin:0 auto;
 padding:0 20px;
}

.container-narrow {
 max-width:800px;
 margin:0 auto;
 padding:0 20px;
}


.grid {
 display:grid;
 gap:20px;
}

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

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

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


.flex {
 display:flex;
}

.flex-col {
 flex-direction:column;
}

.flex-wrap {
 flex-wrap:wrap;
}

.items-center {
 align-items:center;
}

.justify-center {
 justify-content:center;
}

.justify-between {
 justify-content:space-between;
}



section {
 padding:60px 0;
}

.section-title {
 font-size:2.5rem;
 font-weight:700;
 text-align:center;
 margin-bottom:40px;
 font-family:'Noto Sans JP', sans-serif;
}

.section-desc {
 font-size:1.2rem;
 text-align:center;
 margin-bottom:40px;
 line-height:1.6;
}



.card {
 background:rgba(255, 255, 255, 0.1);
 backdrop-filter:blur(10px);
 border-radius:15px;
 padding:30px;
 box-shadow:0 8px 32px rgba(0, 0, 0, 0.1);
 border:1px solid rgba(255, 255, 255, 0.2);
 transition:all 0.3s ease;
}

.card:hover {
 transform:translateY(-5px);
 box-shadow:0 15px 40px rgba(0, 0, 0, 0.2);
}



.button {
 display:inline-block;
 padding:15px 30px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 text-decoration:none;
 border-radius:50px;
 font-weight:600;
 transition:all 0.3s ease;
 border:none;
 cursor:pointer;
 font-size:1rem;
}

.button:hover {
 transform:translateY(-2px);
 box-shadow:0 10px 25px rgba(102, 126, 234, 0.4);
}

.button-secondary {
 background:rgba(255, 255, 255, 0.1);
 backdrop-filter:blur(10px);
 border:1px solid rgba(255, 255, 255, 0.3);
}

.button-secondary:hover {
 background:rgba(255, 255, 255, 0.2);
 box-shadow:0 10px 25px rgba(255, 255, 255, 0.2);
}



.text-center {
 text-align:center;
}

.text-left {
 text-align:left;
}

.text-right {
 text-align:right;
}

.text-white {
 color:white;
}

.text-muted {
 color:rgba(255, 255, 255, 0.7);
}



.mt-20 { margin-top:20px;}
.mt-40 { margin-top:40px;}
.mt-60 { margin-top:60px;}
.mb-20 { margin-bottom:20px;}
.mb-40 { margin-bottom:40px;}
.mb-60 { margin-bottom:60px;}
.py-40 { padding:40px 0;}
.py-60 { padding:60px 0;}
.py-80 { padding:80px 0;}




@media (min-width:1200px) {
 .container {
 max-width:1200px;
 }
 
 .section-title {
 font-size:3rem;
 }
 
 .grid-4 {
 grid-template-columns:repeat(4, 1fr);
 }
}


@media (max-width:1199px) and (min-width:768px) {
 .container {
 max-width:100%;
 padding:0 30px;
 }
 
 .grid-4 {
 grid-template-columns:repeat(3, 1fr);
 }
 
 .grid-3 {
 grid-template-columns:repeat(2, 1fr);
 }
 
 .section-title {
 font-size:2.2rem;
 }
 
 section {
 padding:50px 0;
 }
}


@media (max-width:767px) {
 .container {
 max-width:100%;
 padding:0 15px;
 }
 
 .grid-2,
 .grid-3,
 .grid-4 {
 grid-template-columns:1fr;
 }
 
 .flex {
 flex-direction:column;
 }
 
 .section-title {
 font-size:1.8rem;
 margin-bottom:30px;
 }
 
 .section-desc {
 font-size:1rem;
 margin-bottom:30px;
 }
 
 section {
 padding:40px 0;
 }
 
 .card {
 padding:20px;
 }
 
 .button {
 padding:12px 25px;
 font-size:0.9rem;
 }
 
 .mt-60 {
 margin-top:40px;
 }
 
 .mb-60 {
 margin-bottom:40px;
 }
 
 .py-80 {
 padding:50px 0;
 }
}


@media (max-width:480px) {
 .container {
 padding:0 10px;
 }
 
 .section-title {
 font-size:1.5rem;
 margin-bottom:25px;
 }
 
 .section-desc {
 font-size:0.9rem;
 margin-bottom:25px;
 }
 
 section {
 padding:30px 0;
 }
 
 .card {
 padding:15px;
 }
 
 .button {
 padding:10px 20px;
 font-size:0.8rem;
 }
 
 .mt-40 {
 margin-top:25px;
 }
 
 .mb-40 {
 margin-bottom:25px;
 }
 
 .py-60 {
 padding:35px 0;
 }
}




.mobile-nav {
 position:fixed;
 top:0;
 right:-100%;
 width:80%;
 max-width:300px;
 height:100vh;
 background:rgba(0, 0, 0, 0.95);
 backdrop-filter:blur(20px);
 z-index:1000;
 transition:right 0.3s ease;
 padding:80px 20px 20px;
}

.mobile-nav.active {
 right:0;
}

.mobile-nav-list {
 list-style:none;
 padding:0;
 margin:0;
}

.mobile-nav-item {
 margin-bottom:20px;
}

.mobile-nav-link {
 color:white;
 text-decoration:none;
 font-size:1.1rem;
 font-weight:500;
 display:block;
 padding:10px 0;
 transition:color 0.3s ease;
}

.mobile-nav-link:hover {
 color:#667eea;
}



.responsive-img {
 width:100%;
 height:auto;
 max-width:100%;
}

.img-fluid {
 max-width:100%;
 height:auto;
}



.hidden {
 display:none !important;
}

.visible {
 display:block !important;
}

.hidden-mobile {
 display:block;
}

.visible-mobile {
 display:none;
}

@media (max-width:767px) {
 .hidden-mobile {
 display:none !important;
 }
 
 .visible-mobile {
 display:block !important;
 }
}



.sr-only {
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}



.button:focus,
.mobile-nav-link:focus {
 outline:2px solid #667eea;
 outline-offset:2px;
}



@media print {
 .mobile-nav,
 .button {
 display:none !important;
 }
 
 .card {
 box-shadow:none;
 border:1px solid #ccc;
 }
 
 section {
 padding:20px 0;
 }
} 
}