

.logo-guidelines-section {
 background:#0a0a15;
 padding:60px 0;
 position:relative;
}

.logo-guidelines-section::before,
.logo-guidelines-section::after {
 display:none !important;
}

.guideline-content {
 max-width:900px;
 margin:0 auto;
 padding:0 15px;
 width:100%;
 box-sizing:border-box;
 position:relative;
 z-index:2;
}

.guideline-block {
 background:rgba(20, 20, 30, 0.9);
 border:1px solid rgba(79, 172, 254, 0.5);
 border-radius:15px;
 padding:25px;
 margin-bottom:25px;
 width:100%;
 box-sizing:border-box;
 position:relative;
 z-index:2;
}

.guideline-block h3 {
 color:#4facfe;
 font-size:1.8rem;
 margin-bottom:20px;
 display:flex;
 align-items:center;
 gap:10px;
 font-weight:600;
 font-family:'Noto Sans JP', sans-serif;
}

.guideline-block h4 {
 color:white;
 font-size:1.4rem;
 margin:25px 0 15px;
 font-weight:600;
 font-family:'Noto Sans JP', sans-serif;
}

.concept-content {
 color:rgba(255, 255, 255, 0.9);
 line-height:1.8;
}

.concept-content p {
 margin-bottom:30px;
 font-weight:400;
 font-size:1.2rem;
}

.concept-details {
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:30px;
 margin-top:40px;
}

.concept-item {
 background:rgba(0, 0, 0, 0.3);
 padding:25px;
 border-radius:15px;
 border-left:4px solid #4facfe;
}

.concept-item h4 {
 color:#4facfe;
 margin-top:0;
 margin-bottom:15px;
 font-weight:600;
 font-family:'Noto Sans JP', sans-serif;
}

.concept-item p {
 margin-bottom:0;
 font-size:1rem;
 font-weight:400;
}


.logo-variations {
 margin-top:25px;
 width:100%;
 box-sizing:border-box;
}

.logo-row {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
 gap:15px;
 margin-bottom:20px;
 width:100%;
 box-sizing:border-box;
}

.logo-item {
 text-align:center;
 width:100%;
 box-sizing:border-box;
}

.logo-image {
 background:rgba(255, 255, 255, 0.05);
 padding:20px;
 border-radius:10px;
 margin-bottom:15px;
 display:flex;
 justify-content:center;
 align-items:center;
 height:180px;
 width:100%;
 box-sizing:border-box;
}

.logo-image img {
 max-width:90%;
 max-height:90%;
 object-fit:contain;
}

.logo-item p {
 color:rgba(255, 255, 255, 0.9);
 font-size:1rem;
 font-weight:500;
}


.color-palette {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
 gap:20px;
 margin-top:25px;
 width:100%;
 box-sizing:border-box;
}

.color-item {
 text-align:center;
 width:100%;
 box-sizing:border-box;
 margin-bottom:15px;
 background:rgba(0, 0, 0, 0.3);
 padding:15px;
 border-radius:10px;
}

.color-swatch {
 width:80px;
 height:80px;
 border-radius:50%;
 margin:0 auto 15px;
}

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

.color-name {
 font-weight:600;
 margin-bottom:5px;
 font-size:1.1rem;
 font-family:'Noto Sans JP', sans-serif;
}

.color-code {
 color:rgba(255, 255, 255, 0.7);
 font-size:0.9rem;
 margin-bottom:5px;
 font-weight:400;
}


.size-guide {
 display:flex;
 justify-content:center;
 gap:30px;
 margin-top:30px;
 flex-wrap:wrap;
 width:100%;
 box-sizing:border-box;
}

.size-item {
 text-align:center;
 margin-bottom:15px;
 width:150px;
 background:rgba(0, 0, 0, 0.3);
 padding:15px;
 border-radius:10px;
}

.size-image {
 width:100px;
 height:100px;
 background-color:#f8f8f8;
 display:flex;
 justify-content:center;
 align-items:center;
 margin:0 auto 15px;
 border-radius:10px;
}

.size-label {
 font-size:1rem;
 color:rgba(255, 255, 255, 0.8);
 font-weight:500;
}

.min-size-standard {
 width:80%;
 height:80%;
}

.min-size {
 font-weight:600;
 font-family:'Noto Sans JP', sans-serif;
}


.clearspace-section {
 display:flex;
 justify-content:center;
 gap:30px;
 margin-top:30px;
 flex-wrap:wrap;
 width:100%;
 box-sizing:border-box;
}

.clearspace-item {
 text-align:center;
 margin-bottom:15px;
 width:150px;
 background:rgba(0, 0, 0, 0.3);
 padding:15px;
 border-radius:10px;
}

.clearspace-box {
 position:relative;
 width:100px;
 height:100px;
 background-color:#f8f8f8;
 display:flex;
 justify-content:center;
 align-items:center;
 margin:0 auto 15px;
 border-radius:10px;
}

.clearspace-margins {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 border:2px dashed #4facfe;
 border-radius:10px;
}

.clearspace-logo {
 max-width:60%;
 max-height:60%;
 z-index:1;
}

.circle {
 border-radius:50%;
}

.clearspace-circle {
 width:60%;
 height:60%;
 display:flex;
 justify-content:center;
 align-items:center;
}

.clearspace-circle img {
 max-width:100%;
 max-height:100%;
}


.background-examples {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
 gap:15px;
 margin-top:30px;
 width:100%;
 box-sizing:border-box;
 position:relative;
 z-index:2;
}

.bg-row {
 display:flex;
 flex-wrap:wrap;
 gap:15px;
 justify-content:center;
 width:100%;
}

.bg-example {
 width:100px;
 height:100px;
 border-radius:10px;
 display:flex;
 justify-content:center;
 align-items:center;
 margin:0 auto 10px;
 position:relative;
 z-index:2;
}

.bg-logo {
 max-width:80%;
 max-height:80%;
 object-fit:contain;
 position:relative;
 z-index:2;
}


.forbidden-examples {
 margin-top:30px;
 width:100%;
 box-sizing:border-box;
}

.forbidden-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:20px;
 margin-top:20px;
}

.forbidden-item {
 background:rgba(255, 0, 0, 0.1);
 border:1px solid rgba(255, 0, 0, 0.3);
 border-radius:10px;
 padding:20px;
 text-align:center;
 width:100%;
 box-sizing:border-box;
}

.forbidden-image {
 background:#f8f8f8;
 border-radius:8px;
 padding:20px;
 margin-bottom:15px;
 min-height:80px;
 display:flex;
 justify-content:center;
 align-items:center;
}

.forbidden-logo {
 font-size:1.5rem;
 font-weight:bold;
 color:#000;
}

.forbidden-item h4 {
 color:#ff4444;
 font-size:1.1rem;
 margin:0;
 font-weight:600;
 font-family:'Noto Sans JP', sans-serif;
}


.download-section {
 margin-top:30px;
 text-align:center;
 width:100%;
 box-sizing:border-box;
}

.download-buttons-container {
 display:flex;
 justify-content:center;
 gap:15px;
 flex-wrap:wrap;
 width:100%;
 box-sizing:border-box;
 margin-bottom:20px;
}

.download-button {
 display:inline-block;
 padding:12px 28px;
 border-radius:50px;
 text-decoration:none;
 font-weight:600;
 transition:all 0.3s ease;
 margin:5px;
 font-family:'Noto Sans JP', sans-serif;
 font-size:1rem;
}

.download-button.primary {
 background:#4facfe;
 color:white;
}

.download-button.primary:hover {
 background:#007bff;
 transform:translateY(-3px);
}

.download-button.orange {
 background:#DD6500;
 color:white;
}

.download-button.orange:hover {
 background:#ff7700;
 transform:translateY(-3px);
}


@media (max-width:1024px) {
 .concept-details {
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 }

 .guideline-block {
 padding:30px;
 }
}

@media (max-width:768px) {
 .logo-guidelines-section {
 padding:60px 0;
 }
 
 .guideline-block {
 padding:25px;
 }
 
 .guideline-block h3 {
 font-size:1.4rem;
 }
 
 .guideline-block h4 {
 font-size:1.1rem;
 }
 
 .color-palette {
 grid-template-columns:repeat(2, 1fr);
 }
 
 .download-button {
 padding:8px 20px;
 font-size:0.9rem;
 }
 
 .forbidden-grid {
 grid-template-columns:repeat(2, 1fr);
 gap:15px;
 }
 
 .forbidden-item {
 padding:15px;
 }
 
 .forbidden-image {
 padding:15px;
 min-height:60px;
 }
 
 .forbidden-logo {
 font-size:1.2rem;
 }
}

@media (max-width:480px) {
 .logo-guidelines-section {
 padding:40px 0;
 }
 
 .guideline-block {
 padding:15px;
 border-radius:10px;
 }
 
 .guideline-block h3 {
 font-size:1.3rem;
 }
 
 .concept-details {
 grid-template-columns:1fr;
 }
 
 .logo-row {
 grid-template-columns:1fr;
 }
 
 .logo-image {
 height:160px;
 }
 
 .color-palette {
 grid-template-columns:1fr;
 }
 
 .download-buttons-container {
 flex-direction:column;
 align-items:center;
 }
 
 .download-button {
 width:100%;
 max-width:280px;
 box-sizing:border-box;
 padding:8px 15px;
 font-size:0.85rem;
 display:block;
 margin:10px auto;
 max-width:220px;
 }
 
 .forbidden-grid {
 grid-template-columns:1fr;
 }
}
