.hero{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .hero-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .hero-title{text-transform: uppercase;width:100%;margin-top:50px;font-family:"Julius Sans One";font-size:clamp(28px,3.3vw,44px);font-weight:700;line-height:1.2;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .hero-intro{padding:0 10px;margin-top:20px;font-size:var(--font-size-5);font-weight:300;line-height:1.3;color:#d9f7ff} .hero-footer{ width:100%;height:auto;position:relative;margin-top:-30px;user-select:none;pointer-events:none;} .hero-footer img{width:100%;z-index:1;user-select:none;pointer-events:none;} @media (min-width :768px){ .hero-title{margin-top:80px;font-size:clamp(32px,4.5vw,44px);line-height:1.1;} .hero-intro{padding:0 50px;line-height:1.5;} } @media (min-width :992px){ .hero-intro{padding:0 80px;} } .collection{width:100%;display:grid;grid-template-columns:repeat(1, 1fr);gap:var(--gap);} @media (min-width:768px){ .collection{grid-template-columns:repeat(2, 1fr);} } @media (min-width:992px){ .collection{grid-template-columns:repeat(3, 1fr);} } .collection .article-item{width:100%;height:auto;overflow:hidden;border-radius:5px;border:1px solid #DDD;background:#fff;box-shadow:var(--shadow-main);} .collection .article-item img{width:100%;height:auto;overflow:hidden;transition:transform 1s ease;} .collection .article-item:hover img{transform:scale(1.1);} .collection .article-item .item-title{width:100%;height:auto;min-height:0;font-size:var(--font-size-4);font-weight:400;line-height:1.5;overflow:hidden;padding:15px 15px 10px;} .collection .article-item .item-info{width:100%;height:20px;line-height:1.5;padding-left: 15px;margin: 0 0 5px;color:#666;} .collection .article-item .item-info span{color: #999;margin-right: 5px;} .collection .article-item .item-info:last-child{ margin-bottom: 15px;} .heading-title{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .detail-description{padding-bottom:20px} .section{ width: 100%;height: auto;overflow: hidden;background: #fff;box-shadow:var(--shadow-main);border-radius: 10px;padding: var(--gap);margin-top: var(--gap);} .section .section-title{ width: 100%;line-height: 1.2;font-size: var(--font-size-7);color: var(--color-main);text-align: center;border-bottom:1px solid #eee;padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .section h1.section-title {font-size:var(--font-size-8);} .section .explanation ul li{list-style:disc} .section .explanation .explanation-image{ float: right;width: 500px;max-width: 40%;height: auto;margin: 0 0 var(--gap) var(--gap);border-radius: 5px;shape-outside: margin-box;shape-margin: var(--gap);} @media (max-width: 640px) { .section .explanation .explanation-image{ float: none;display: block;width: 100%;max-width: 100%;margin: 0 0 var(--gap) 0;} } .section .collection{ margin-top:var(--gap)} .topic-filter{display:flex;align-items:stretch;justify-content:center;margin:var(--gap) 0;} .topic-filter-label{display:inline-flex;align-items:center;height:45px;padding:0 var(--gap);font-size:var(--font-size-3);color:#333;margin:0;background:#fafafa;border:1px solid #ddd;border-right:none;border-radius:5px 0 0 5px;cursor:default;} .topic-filter-select{width:200px;height:45px;padding:0 30px 0 15px;font-size:var(--font-size-3);color:#333;background:#fff;border:1px solid #ddd;border-radius:0 5px 5px 0;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;} .topic-filter-select:hover,.topic-filter-select:focus{border-color:var(--color-main);outline:none;} .topic-filter-select option{font-size:var(--font-size-3);padding:8px;} .related-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;} .related-list .related-item{ background:#fff;border:1px solid #ddd;color:#333;border-radius:5px;padding:10px 15px;line-height:1;white-space:nowrap;flex-grow:1;flex-shrink:0;} .related-list .related-item:hover{background:#5a32ff;color:#fff;} .card-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:10px;} .card-list .card-item{ display:flex;align-items:stretch;justify-content:flex-end;gap:0;padding:0;border:1px solid #ddd;border-radius:5px;background:#fff;flex-grow:1;flex-shrink:0;line-height:1;overflow:hidden;} .card-list .card-link{ display:flex;align-items:center;flex:1;color:var(--color-main);font-weight:400;text-decoration:none;white-space:nowrap;padding:10px 15px;} .card-list .card-orientation{ display:flex;align-items:center;padding:0 15px;white-space:nowrap;color:#666;border-left:1px solid #ddd;} .card-list .icon-lightbulb{ display:flex;align-items:center;justify-content:center;padding-right:15px;cursor:pointer;color:var(--color-main);transition:color .2s ease, transform .15s ease;} .card-list .card-item:hover, .card-list .card-item:hover .card-link, .card-list .card-item:hover .card-orientation, .card-list .card-item:hover .icon-lightbulb{background:#5a32ff;color:#fff;} .card-list .card-item:hover .card-orientation{border-left-color:rgba(255,255,255,.35);} .card-list .card-empty{ width: 100%;color:#777;text-align:center;font-style:italic;} .js-enabled .card-interpretation { display: none;} .modal-overlay { position: fixed;inset: 0;z-index: 999;background: rgba(0, 0, 0, .45);opacity: 0;transition: opacity .25s ease;display: flex;align-items: center;justify-content: center;padding: 20px;} .modal-overlay.is-open { opacity: 1;} .modal-dialog { position: relative;z-index: 1000;max-width: 560px;width: 100%;max-height: 80vh;background: #fff;border-radius: 10px;box-shadow: 0 20px 60px rgba(0, 0, 0, .25);display: flex;flex-direction: column;transform: translateY(20px);transition: transform .25s ease;} .modal-overlay.is-open .modal-dialog { transform: translateY(0);} .modal-dialog-header { display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;border-bottom: 1px solid #eee;} .modal-dialog-title { margin: 0;font-size: 17px;font-weight: 700;color: var(--color-main);} .modal-dialog-close { display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;background: none;border: none;border-radius: 50%;font-size: 20px;color: #999;cursor: pointer;transition: all .15s ease;} .modal-dialog-close:hover { background: #f0f0f0;color: #333;} .modal-dialog-body { padding: 20px;overflow-y: auto;font-size: 15px;line-height: 1.7;color: #333;white-space: normal;word-break: break-word;} .modal-dialog-body p { margin: 0 0 10px;} .modal-dialog-body p:last-child { margin-bottom: 0;}