.principle-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:56px;border-top:1px solid rgba(26,38,68,.22);border-bottom:1px solid rgba(26,38,68,.22)}
.principle-tab{appearance:none;display:flex;flex-direction:column;align-items:flex-start;min-height:202px;padding:24px 22px 18px;background:transparent;border:0;border-left:1px solid rgba(26,38,68,.22);color:var(--navy);font:inherit;text-align:left;cursor:pointer;position:relative;transition:background .25s ease,color .25s ease}
.principle-tab:first-child{border-left:0}
.principle-tab::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.principle-tab.is-active::before{transform:scaleX(1)}
.principle-tab:hover,.principle-tab.is-active{background:rgba(236,103,28,.075)}
.principle-tab:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;z-index:1}
.principle-index{font-size:12px;letter-spacing:.06em;color:var(--navy)}
.principle-tab-title{font-size:clamp(13px,1.12vw,17px);line-height:1.4;max-width:220px;margin-top:22px}
.principle-arrow{font-size:22px;line-height:1;color:var(--orange);margin-top:auto;padding-top:16px}
.principle-panel{position:relative;height:clamp(360px,42vw,600px);overflow:hidden;background:#17233c;color:white;isolation:isolate}
.principle-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,16,31,.86) 0%,rgba(9,16,31,.58) 35%,rgba(9,16,31,.05) 78%),linear-gradient(0deg,rgba(9,16,31,.38),transparent 45%);pointer-events:none}
.principle-panel img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:opacity .35s ease,transform 6.5s ease}
.principle-panel.is-changing img{opacity:.25}
.principle-panel:not(.is-changing) img{transform:scale(1.025)}
.principle-panel-content{position:absolute;z-index:1;left:clamp(24px,5vw,72px);bottom:clamp(28px,5vw,70px);max-width:min(62%,720px)}
.principle-panel-content>span:first-child{display:block;color:#fff;font-size:12px;font-weight:700;letter-spacing:.13em;margin-bottom:18px}
.principle-panel h3{font-size:clamp(29px,4.2vw,63px);font-weight:700;letter-spacing:-.055em;line-height:1.03;margin:0;text-wrap:balance}
.principle-panel-mark{display:block;color:var(--orange);font-size:clamp(35px,5vw,64px);line-height:1;margin-top:25px}
@media(max-width:800px){.principle-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--orange) transparent;margin-right:calc(-1 * var(--gutter,20px));padding-right:var(--gutter,20px)}.principle-tab{flex:0 0 42%;min-width:190px;min-height:175px;scroll-snap-align:start}.principle-tab-title{font-size:14px}.principle-panel{height:460px}.principle-panel-content{max-width:75%}}
@media(max-width:580px){.principle-tabs{margin-top:36px;margin-right:-16px;padding-right:16px}.principle-tab{flex-basis:68%;min-width:220px;min-height:157px;padding:17px 17px 14px}.principle-tab-title{margin-top:12px;font-size:14px;max-width:260px}.principle-arrow{font-size:19px}.principle-panel{height:510px;margin-left:-16px;margin-right:-16px}.principle-panel img{object-position:58% center}.principle-panel::after{background:linear-gradient(0deg,rgba(9,16,31,.91) 0%,rgba(9,16,31,.52) 45%,rgba(9,16,31,.05) 80%)}.principle-panel-content{left:24px;right:24px;bottom:32px;max-width:none}.principle-panel h3{font-size:clamp(30px,8.4vw,43px)}.principle-panel-mark{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.principle-tab,.principle-tab::before,.principle-panel img{transition:none!important}}