body:has(.open) {overflow: hidden;}

header {height: 100px; overflow: visible;}
header.scl {height: 100px;}

.mbi {display: flex;}
.mbi-menu {display: flex; align-items: center; justify-content: center; position: absolute; top: 17px; right: 10px; width: 26px; height: 26px; padding: 0; border: 0; background: transparent;}
.mbi-menu svg {display: none;}
.mbi-menu svg:first-child {display: block;}
header.open .mbi-menu svg:first-child {display: none;}
header.open .mbi-menu svg:last-child {display: block;}

header.open {height: 100%;}
header.open nav {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);}
header.open .header_left {display: flex; align-items: center; gap: 10px; position: absolute; top: 60px; left: 0; padding: 0 10px; border-top: 1px solid var(--line); width: 100%; height: 40px; background: var(--bg);}
header .call {padding-right: 40px;}
header .call a {padding:3px; font-size: 1em; pointer-events: auto;} 


.header_top {height: 60px;}
.header_top .logo {width: 80px; min-width: 0; margin-top: 10px;}
.header_left {display: none;}

.header_bot {height: 40px; border-top: 1px solid var(--line); align-items: center; justify-content: space-around;}

nav {position: absolute; top: 100px; left: 0; width: 100%; max-height: calc(100vh - 60px); padding: 10px 20px; display: none; border: none; border-top: 1px solid var(--line);
overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-16px); transform-origin: top center;  transition: opacity 220ms ease, transform 260ms ease, visibility 260ms ease;}
nav dl {width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line);}
nav dl dt {justify-content: flex-start; padding-left: 10px; height: 30px;}
nav dl dt::before {top: 50%; width: 3px; height: 20px; transform: translateY(-50%);}
nav dl dd {justify-content: flex-start; padding-left: 10px; height: 30px;}
nav dl dd + dd {border-top: none;}
header.open nav {display: flex; flex-wrap: wrap;}
nav dl:hover dt::after, nav dl dt:focus-within::after {transform: scaleX(0);}

main {padding-top: 0;}
.home section .container {padding: 10px 0; margin: 0 10px;}
.home .title {text-align: center; margin-bottom: 20px}

.sub section {padding: 20px 0;}
.sub .container {margin: 0 10px;}
.title-wrap {padding: 0; margin-bottom: 10px;}
.title_type1 {font-size: 30px;}
.txt_type1 {font-size: 18px;}

.mypage .content-wrap {padding: 14px;}
.mypage-menu {grid-template-columns: 1fr; gap: 10px;}
.mypage-menu-item {min-height: 72px; padding: 16px;}
.mypage-menu-label {font-size: 16px;}

.table-info {margin-bottom: 5px;}

.plan_wrap {padding: 0; border: 0;}
.plan_box {padding: 10px;}
.plan_box dt h2 {font-size: 1.5em;}
.plan_box dd p {font-size: 18px;}
.plan_box dd u {display: block;}
.plan_box dd input {width: 120px; font-size: 1.125em;}
.plan_box .btn_area {padding-left: 0;}
.plan_box .btn_area button {width: 90%; margin: 0 auto;}

.planBox.charge ul.planSlide {width: 100%;}
.trade-result button {width: auto; padding: 0 10px; font-size: 12px;}

.view .inner {padding: 0;}

.trade-result .subject.off p {font-size: 12px;}

.trade-result .day h3 {font-size: 24px;}
.trade-result .day span {font-size: 12px;}
.trade-result .subject h4 {font-size: 16px;} 
.trade-result th, .trade-result td {padding: 10px 5px;}

.scd .freeWrap {width: 100%; height: auto;}
.scd .freeWrap p {display: none;}
.freeWrap .ytb {margin-bottom: 0;}
.scd .container:has(.freeWrap) {margin-left: 0;}

.event {height: 420px;}
.event article {height: 100%; display: grid; gap: 10px; grid-template-columns: 100%; grid-template-rows: 260px 130px;}
.event-swiper {width: 100%;}
.event-banner {width: 100%; font-size: 1em}
.event-banner a {flex-direction:row; gap: 5px;}
.event-banner a::before {zoom: .50;}
.event-banner a p {flex-direction:row; margin-bottom: 0; gap: 3px;}
.event-banner label {zoom: .50;}

.issue-grid ul {grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 34px;} 
.issue-item strong {font-size: 13px;} .issue-item span {margin-top: 4px; font-size: 19px;} 

.charge {flex-direction: column;}
.charge.planBox dl {width: 100%;}

.login { display: flex; align-items: center;}
.login .container {width: 90%; max-width: 100%;}

footer .bottom-link {gap: 0; justify-content: space-around; font-size: 14px;}
footer .info {display: flex; flex-direction: column; gap: 20px; padding-inline: 10px}
footer .info dt {margin-bottom: 5px;}
footer .copyright {padding-inline: 10px}