.top article{padding-bottom: 0px;}
.top .hero{position:relative;width:100%;height:60vh;min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;background:url("../jpg/kv.jpg") 30% 50%/110% no-repeat;overflow:hidden}
.top .hero::before{content:"";position:absolute;inset:0;backdrop-filter:blur(1.5px);background:rgba(0,0,0,.3);z-index:0}
.top .hero-text{position:relative;z-index:1;color:#fff;font-size:3rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8);max-width:90%}



.news-inner {max-width: 800px;  margin-bottom:120px;  background: #fff;  padding: 40px 30px; border-left: 3px solid #113F67;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);  position: relative;}
.news-heading { font-size: 1.5rem; font-weight: bold; color: #113F67; display: flex; align-items: center; margin-bottom: 20px;}
.news-heading span {font-size: 1rem; font-weight: normal; color: #444; margin-left: 10px;}
.news-scroll-wrapper {max-height: 350px; margin-bottom:20px; overflow-y: auto;  overflow-x: hidden;scrollbar-width: thin;  scrollbar-color: #ccc transparent;}
.news-list { list-style: none; padding: 0; margin: 0;}
.news-list li { border-top: 1px solid #ddd; line-height: 1.7;}
.news-list li:last-child { border-bottom: 1px solid #ddd;}
.news-list a {display: flex;  align-items: center; padding:7px 0;  text-decoration: none; color: #1c1c1c;    transition: background 0.3s;}
.news-list a:hover { background: #eef3ff;}
.news-list .date {color: #113F67;  font-weight: bold; font-size: 0.95rem; width:200px; }
.news-list .title {font-size: 0.95rem; position: relative;  width:900px; padding:0 30px;}
.news-list .title::after {content: "›";  position: absolute; right: 15px; top: 0px; font-size: 1.2rem; color: #888; transition: transform 0.2s;}
.news-list a:hover .title::after {transform: translateX(4px);}
.news-inner .news-more{max-width:none; text-align:right; }
.top article{padding-top: 150px;}
article .cardCont {position: relative;max-width: 1200px; margin:0px auto 200px auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
article .cardCont::before {content: "";position: absolute; inset: -25px 0; background: linear-gradient(135deg, #2349c2 30%, #3c5adf 100%);  clip-path: polygon(0 0, 70% 0, 55% 100%, 0 100%); z-index: 0;}
article .cardimg {z-index: 1;}
article .cardimg img {width: 100%; height: auto;}
article .cardArea {position: relative; z-index: 2; background: #fff; padding: 48px 40px; box-shadow: 0 10px 24px rgba(0,0,0,0.1);  margin-left: -80px;}
article .cardArea h2 {font-size: 1.6rem; font-weight: bold; margin-bottom: 16px;}
article .cardArea h2 small {display: block; font-size: 0.85rem; color: #2349c2; margin-bottom: 4px;}
article .cardArea p{line-height: 1.7; margin-bottom: 0px;}
article .cardArea p:last-of-type{margin-bottom:25px;}
article .cardCont.is-reverse {grid-template-columns: 1fr 1fr;}
article .cardCont.is-reverse .cardArea {margin-left: 0; margin-right: -80px;}
article .cardCont.is-reverse::before {content: ""; position: absolute; inset: -25px 0; background: linear-gradient(225deg, #2349c2 30%, #3c5adf 100%);  clip-path: polygon(30% 0, 100% 0, 100% 100%, 45% 100%); z-index: 0;}
.membership-card a{position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 8px;    background: linear-gradient(135deg, #FFB020 0%, #FFD54F 100%);  padding: 28px 50px 28px 15px;  border-radius: 14px;  text-decoration: none;  color: #0f172a;  box-shadow: 0 10px 24px rgba(0,0,0,0.08);  border: 1px solid rgba(0,0,0,0.06);}
.card-icon{width: 50px; height: 50px; border-radius: 50%;background: rgba(35,73,194,0.12); display: grid; place-items: center; font-size: 25px; color: #2349c2;}
.membership-card .card-icon::before{font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0ac";}
.membership-card h3{grid-column: 2; margin: 0; font-size: 1.15rem; line-height: 1.4; font-weight: bold; margin-bottom: 15px;}
.membership-card p{grid-column: 2; margin: 0; color: #334155;line-height: 1.7;}
.membership-card{margin-bottom: 0px;}
.card-arrow{position: absolute; right: 18px; top: 50%; transform: translateY(-50%);  width: 18px;  height: 18px;}
.card-arrow::before{font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f054";  font-size: 14px; color: #0f172a;}
.membership-card:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.10);}
.footBnr{background: #fff; padding: 60px 20px 150px 20px;}

.footBnrlist {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; justify-items: center;  align-items: center;}
.footBnrlist div{display: flex; max-width: 200px; height: 100px; padding: 10px;}
.footBnrlist img {width: 100%; max-height: 400px;  object-fit: contain; transition: transform 0.3s ease;}
.footBnrlist img:hover {transform: scale(1.05);}


/* SP */
@media (max-width: 768px){
.membership-grid{ grid-template-columns: 1fr; }
.footBnrlist{grid-template-columns:repeat(2, 1fr);}
.footBnrlist div{width:100%; max-width: none; height: auto;}
.top .hero{ height: 25vh;  min-height: 180px;  font-size: 1.4rem;}
.top .hero .hero-text{font-size: 1.35rem;}
.news-list a{display: block;}
.news-list .date,.news-list .title{width: 100%;}
.news-list .title{display: block; padding-left: 0px;}

	
article .cardCont {max-width: 100%; margin:0px auto 50px auto; padding:0px; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 0px;}
article .cardCont::before {content: ""; position: absolute; inset: 0; background: transparent; clip-path: none; z-index: 0;}
article .cardimg {z-index: 1; position: relative;}
article .cardimg img {width: 100%; height: auto; display: block}
article .cardimg::after {content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: #2349c2;}
article .cardArea {position: relative; z-index: 2; background: #fff; padding: 28px 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.10); margin-left: 0px; margin-right: 0px; }
article .cardArea h2 {font-size: 1.25rem; font-weight: bold; margin-bottom: 12px;}
article .cardArea h2 small {display: block; font-size: 0.82rem; color: #2349c2; margin-bottom: 4px;}
article .cardArea p {line-height: 1.7; margin-bottom: 0px;}
article .cardArea p:last-of-type {margin-bottom: 18px;}
article .cardCont.is-reverse {grid-template-columns: 1fr;}
article .cardCont.is-reverse .cardArea {margin-left: 0px; margin-right: 0px;}
article .cardCont.is-reverse::before {content: ""; position: absolute; inset: 0; background: transparent; clip-path: none; z-index: 0;}
}