body { margin: 0; padding: 0; } :root { --sz-25: 2.5rem; --black: 0, 0, 0; --slider-ctrl-width: 2.5rem; --slider-ctrl-height: 3rem; --scrollbar-color: #abc transparent; } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color); } .smartTV,.desktop,.phone,.watch,.flex { } .mypage { text-align: left; animation: fade-in 1.5s; -moz-animation: fade-in 1.5s; -webkit-animation: fade-in 1.5s; } .mypage, .mypage *, .mypage *:after, .mypage *:before { vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .mypage *:after, .mypage *:before { vertical-align: baseline; } .mypage, .mypage * { margin: 0; padding: 0; transition: margin 2s ease-in-out; } .mypage *:not([tabindex]) { outline: none; } .mypage label { user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; } .mypage video, .mypage picture, .mypage a[type='anchor'], .mypage section[type='layer'], .mypage section[type='teaser'], .mypage section[type='slider'], .mypage section[type='squeeze'] { display: inline-block; } .mypage picture > source { display: none; } .mypage div[type='rich'] { display: block; } .mypage section[type='layer'] { width: -moz-available; width: -webkit-fill-available; } .mypage > a[type='scrollTop'] { right: 10px; width: 40px; height: 40px; bottom: 5px; z-index: 999; opacity: 0.5; position: fixed; background: #abc; border-radius: 49%; text-align: center; align-items: center; justify-content: center; border: 2px solid #bcd; } .mypage.layout-boxed > a[type='scrollTop'] { right: max(10px, calc(50% - var(--max-w) / 2 + 10px)); } .mypage > a[type='scrollTop']:hover { opacity: 1; } @media print { .mypage > a[type='scrollTop']{display:none;} } .mypage video { object-fit: cover; } .mypage a[type='anchor'] > input { display: none; } .mypage section[type='teaser']{} .mypage section[type='slider']{} .mypage section[type='slider'] > div { padding: 0; overflow: hidden; position: relative; } .mypage section[type='slider'] > div > section { left: 0px; position: relative; background: inherit; display: inline-flex; } .mypage section[type='slider'] > div > section > *:not(meta-tag) { flex-shrink: 0; } .mypage section[type='slider'] > div > label { z-index: 1; cursor: pointer; font-family: serif; position: absolute; align-items: center; display: inline-flex; justify-content: center; width: var(--slider-ctrl-width); height: var(--slider-ctrl-height); top: calc(50% - 0.5 * var(--slider-ctrl-height)); font-size: calc(0.5 * var(--slider-ctrl-height)); line-height: 1; } .mypage section[type='slider'] > div > .left-ctrl { left: 0; } .mypage section[type='slider'] > div > .left-ctrl:before { content: '〈'; } .mypage section[type='slider'].b > div > .left-ctrl:before { content: ''; border-top: 0.5rem solid transparent; border-right: 1rem solid currentcolor; border-bottom: 0.5rem solid transparent; } .mypage section[type='slider'] > div > .right-ctrl { right: 0; } .mypage section[type='slider'] > div > .right-ctrl:after { content: '〉'; } .mypage section[type='slider'].b > div > .right-ctrl:after { content: ''; border-top: 0.5rem solid transparent; border-left: 1rem solid currentcolor; border-bottom: 0.5rem solid transparent; } .mypage section[type='squeeze'] { display: inline-block; display: inline-grid; width: -moz-available; width: -webkit-fill-available; } .mypage section[type='squeeze'] > input { display: none; } .mypage section[type='squeeze'] > label { position: relative; display: inline-block; } .mypage section[type='squeeze'] > input + label:after, .mypage section[type='squeeze'] > input + label:before { content: ''; right: .75rem; display: flex; cursor: pointer; position: absolute; transition: transform .4s; } .mypage .accordion.type-d section[type='squeeze'] > input + label:after, .mypage .accordion.type-d section[type='squeeze'] > input + label:before { left: 0; right: unset; } .mypage .accordion.a section[type='squeeze'] > input + label:after, .mypage .accordion.a section[type='squeeze'] > input + label:before { ontent: ''; width: 1rem; height: .125rem; background-color: currentColor; } .mypage .accordion.b section[type='squeeze'] > input + label:after { content: '〉'; right: 1rem; font-weight: 600; font-size: 1.25rem; } .mypage .accordion.type-d.b section[type='squeeze'] > input + label:after { right: unset; } .mypage .accordion.c section[type='squeeze'] > input + label:after { border-top: 0.5rem solid transparent; border-left: 0.75rem solid currentColor; border-bottom: 0.5rem solid transparent; } .mypage section[type='squeeze'] > input + label:after { transform: rotate(90deg); } .mypage .accordion.a section[type='squeeze'] > input:checked + label:after { transform: rotate(0); } .mypage .accordion.b section[type='squeeze'] > input:checked + label:after, .mypage .accordion.c section[type='squeeze'] > input:checked + label:after { transform: rotate(-90deg); } .mypage section[type='squeeze'] > input:not(:checked) ~ [type='layer'] { padding: unset; max-height: 0px; overflow: hidden; transition: max-height 1.5s ease-in-out -0.7s; } .mypage section[type='squeeze'] > input:checked ~ [type='layer'] { position: relative; max-height: 2000px; transition: max-height 1.5s ease-in-out; } .mypage section[type='tab'] { display: block; } .mypage section[type='tab'] > input { display: none; } .mypage section[type='tab'] > div > ul, .mypage section[type='tab'] > ul { list-style: none; margin: 0; padding: 0; } .mypage section[type='tab'] > div > ul > li { cursor: pointer; position: relative; border: 1px solid transparent; border-radius: var(--radius-md, 8px); transition: border-color .15s ease, background .15s ease; } .mypage section[type='tab'] > div > ul > li > input { display: none; } .mypage section[type='tab'] > div > ul > li > label { display: block; cursor: pointer; } .mypage section[type='tab'] > ul > li { display: block; } .mypage section[type='tab'] > ul section[type='tabpage'] { display: none; } .mypage section[type='tab'] > input:nth-of-type(1):checked ~ div > ul > li:nth-child(1), .mypage section[type='tab'] > input:nth-of-type(2):checked ~ div > ul > li:nth-child(2), .mypage section[type='tab'] > input:nth-of-type(3):checked ~ div > ul > li:nth-child(3), .mypage section[type='tab'] > input:nth-of-type(4):checked ~ div > ul > li:nth-child(4), .mypage section[type='tab'] > input:nth-of-type(5):checked ~ div > ul > li:nth-child(5), .mypage section[type='tab'] > input:nth-of-type(6):checked ~ div > ul > li:nth-child(6), .mypage section[type='tab'] > input:nth-of-type(7):checked ~ div > ul > li:nth-child(7), .mypage section[type='tab'] > input:nth-of-type(8):checked ~ div > ul > li:nth-child(8), .mypage section[type='tab'] > input:nth-of-type(9):checked ~ div > ul > li:nth-child(9) { border-color: var(--primary-base, currentColor); background: color-mix(in srgb, var(--primary-base, currentColor) 6%, transparent); } .mypage section[type='tab'] > input:nth-of-type(1):checked ~ ul > li:nth-child(1) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(2):checked ~ ul > li:nth-child(2) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(3):checked ~ ul > li:nth-child(3) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(4):checked ~ ul > li:nth-child(4) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(5):checked ~ ul > li:nth-child(5) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(6):checked ~ ul > li:nth-child(6) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(7):checked ~ ul > li:nth-child(7) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(8):checked ~ ul > li:nth-child(8) section[type='tabpage'], .mypage section[type='tab'] > input:nth-of-type(9):checked ~ ul > li:nth-child(9) section[type='tabpage'] { display: block; } .clear {all:unset;} .mypage img { width: 100%; vertical-align: middle; } .mypage .left { text-align: left; justify-content: flex-start; } .mypage .right { text-align: right; justify-content: flex-end; } .mypage .center { text-align: center; justify-content: center; } .mypage .middle { align-items: center; display: inline-flex!important; } .mypage .hide-layer { display: none; height: 0!important; overflow: hidden!important; visibility: hidden!important; } .show { display: inline-block; } .hide { display: none!important; } .mypage video { width: 100%; height: auto; max-height: 100%; } .mypage .video-layer video { width: 100%; } .mypage .iframe-layer { height: 0; overflow: hidden; padding-bottom: 56.25%!important; } .mypage .iframe-layer iframe { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .mypage iframe#_subpage_ { top: 0; left: 0; border: 0; z-index: 999; width: 100vw; height: 100vh; background: white; position: absolute; } ::-webkit-scrollbar { width: 0.4rem; height: 0.2rem; } ::-webkit-scrollbar-thumb { background: #abc; border-radius: 2px; } ::-webkit-scrollbar-button { border-style: solid; } ::-webkit-scrollbar-button:vertical { display: none; } @media (max-width: 576px) { ::-webkit-scrollbar {width:0rem;} } .\75\61-0 *:not(:only-child), .\75\61-01 *:not(:only-child), .\75\61-02 *:not(:only-child), .\75\61-03 *:not(:only-child), .\75\61-04 *:not(:only-child), .\75\61-06 *:not(:only-child), .\75\61-08 *:not(:only-child) { float: left; } [type='rich'],[type='rich'] *, .mypage a, .mypage .right > *:not(:only-child), .mypage .center > *:not(:only-child) { float:none!important; } .smartTV .\75\61-01 {max-width: 8.3%;} .smartTV .\75\61-02 {max-width: 16.6%;} .smartTV .\75\61-03 {max-width: 25%;} .smartTV .\75\61-04 {max-width: 33.3%;} .smartTV .\75\61-06 {max-width: 50%;} .smartTV .\75\61-08 {max-width: 66.6%;} .smartTV .\75\61-10 {max-width: 83%;} .smartTV .\75\61-12 {max-width: 100%;} .desktop .\75\61-01 {max-width: 8.3%;} .desktop .\75\61-02 {max-width: 16.6%;} .desktop .\75\61-03 {max-width: 25%;} .desktop .\75\61-04 {max-width: 33.3%;} .desktop .\75\61-06 {max-width: 50%;} .desktop .\75\61-08 {max-width: 66.6%;} .desktop .\75\61-10 {max-width: 83%;} .desktop .\75\61-12 {max-width: 100%;} .tablet .\75\61-01 {max-width: 12.5%;} .tablet .\75\61-02 {max-width: 25%;} .tablet .\75\61-03 {max-width: 50%;} .tablet .\75\61-04 {max-width: 50%;} .tablet .\75\61-06 {max-width: 100%;} .tablet .\75\61-08 {max-width: 100%;} .tablet .\75\61-10 {max-width: 100%;} .tablet .\75\61-12 {max-width: 100%;} .phone .\75\61-01 {max-width: 25%;} .phone .\75\61-02 {max-width: 50%;} .phone .\75\61-03 {max-width: 100%;} .phone .\75\61-04 {max-width: 100%;} .phone .\75\61-06 {max-width: 100%;} .phone .\75\61-08 {max-width: 100%;} .phone .\75\61-10 {max-width: 100%;} .phone .\75\61-12 {max-width: 100%;} .watch .\75\61-01 {max-width: 25%;} .watch .\75\61-02 {max-width: 50%;} .watch .\75\61-03 {max-width: 100%;} .watch .\75\61-04 {max-width: 100%;} .watch .\75\61-06 {max-width: 100%;} .watch .\75\61-08 {max-width: 100%;} .watch .\75\61-10 {max-width: 100%;} .watch .\75\61-12 {max-width: 100%;} .smartTV .\75\61-12 .\75\61-12 {max-width: 100%;} .smartTV .\75\61-12 .\75\61-10 {max-width: 83%;} .smartTV .\75\61-12 .\75\61-08 {max-width: 66.6%;} .smartTV .\75\61-12 .\75\61-06 {max-width: 50%;} .smartTV .\75\61-12 .\75\61-04 {max-width: 33.3%;} .smartTV .\75\61-12 .\75\61-03 {max-width: 25%;} .smartTV .\75\61-12 .\75\61-02 {max-width: 16.6%;} .smartTV .\75\61-12 .\75\61-01 {max-width: 8.3%;} .smartTV .\75\61-10 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-10 .\75\61-06 {max-width: 50%;} .smartTV .\75\61-10 .\75\61-04 {max-width: 33.3%;} .smartTV .\75\61-10 .\75\61-03 {max-width: 25%;} .smartTV .\75\61-10 .\75\61-02 {max-width: 16.6%;} .smartTV .\75\61-10 .\75\61-01 {max-width: 8.3%;} .smartTV .\75\61-08 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-08 .\75\61-04 {max-width: 50%;} .smartTV .\75\61-08 .\75\61-03 {max-width: 33.3%;} .smartTV .\75\61-08 .\75\61-02 {max-width: 25%;} .smartTV .\75\61-08 .\75\61-01 {max-width: 12.5%;} .smartTV .\75\61-06 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-06 .\75\61-04 {max-width: 75%;} .smartTV .\75\61-06 .\75\61-03 {max-width: 50%;} .smartTV .\75\61-06 .\75\61-02 {max-width: 25%;} .smartTV .\75\61-06 .\75\61-01 {max-width: 8.3%;} .smartTV .\75\61-04 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-04 .\75\61-02 {max-width: 75%;} .smartTV .\75\61-04 .\75\61-02 {max-width: 50%;} .smartTV .\75\61-04 .\75\61-01 {max-width: 25%;} .smartTV .\75\61-03 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-03 .\75\61-02 {max-width: 66.6%;} .smartTV .\75\61-03 .\75\61-01 {max-width: 33.3%;} .smartTV .\75\61-02 [class*='\75\61-'] {max-width: 100%;} .smartTV .\75\61-02 .\75\61-01 {max-width: 50%;} .smartTV .\75\61-01 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-12 .\75\61-12 {max-width: 100%;} .desktop .\75\61-12 .\75\61-10 {max-width: 83%;} .desktop .\75\61-12 .\75\61-08 {max-width: 66.6%;} .desktop .\75\61-12 .\75\61-06 {max-width: 50%;} .desktop .\75\61-12 .\75\61-04 {max-width: 33.3%;} .desktop .\75\61-12 .\75\61-03 {max-width: 25%;} .desktop .\75\61-12 .\75\61-02 {max-width: 16.6%;} .desktop .\75\61-12 .\75\61-01 {max-width: 8.3%;} .desktop .\75\61-10 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-10 .\75\61-06 {max-width: 50%;} .desktop .\75\61-10 .\75\61-04 {max-width: 33.3%;} .desktop .\75\61-10 .\75\61-03 {max-width: 25%;} .desktop .\75\61-10 .\75\61-02 {max-width: 16.6%;} .desktop .\75\61-10 .\75\61-01 {max-width: 8.3%;} .desktop .\75\61-08 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-08 .\75\61-04 {max-width: 50%;} .desktop .\75\61-08 .\75\61-03 {max-width: 33.3%;} .desktop .\75\61-08 .\75\61-02 {max-width: 25%;} .desktop .\75\61-08 .\75\61-01 {max-width: 12.5%;} .desktop .\75\61-06 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-06 .\75\61-04 {max-width: 75%;} .desktop .\75\61-06 .\75\61-03 {max-width: 50%;} .desktop .\75\61-06 .\75\61-02 {max-width: 25%;} .desktop .\75\61-06 .\75\61-01 {max-width: 8.3%;} .desktop .\75\61-04 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-04 .\75\61-02 {max-width: 75%;} .desktop .\75\61-04 .\75\61-02 {max-width: 50%;} .desktop .\75\61-04 .\75\61-01 {max-width: 25%;} .desktop .\75\61-03 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-03 .\75\61-02 {max-width: 66.6%;} .desktop .\75\61-03 .\75\61-01 {max-width: 33.3%;} .desktop .\75\61-02 [class*='\75\61-'] {max-width: 100%;} .desktop .\75\61-02 .\75\61-01 {max-width: 50%;} .desktop .\75\61-01 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-12 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-12 .\75\61-04 {max-width: 50%;} .tablet .\75\61-12 .\75\61-03 {max-width: 33.3%;} .tablet .\75\61-12 .\75\61-02 {max-width: 25%;} .tablet .\75\61-12 .\75\61-01 {max-width: 12.5%;} .tablet .\75\61-10 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-10 .\75\61-06 {max-width: 50%;} .tablet .\75\61-10 .\75\61-04 {max-width: 33.3%;} .tablet .\75\61-10 .\75\61-03 {max-width: 25%;} .tablet .\75\61-10 .\75\61-02 {max-width: 20%;} .tablet .\75\61-10 .\75\61-01 {max-width: 10%;} .tablet .\75\61-08 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-08 .\75\61-04 {max-width: 50%;} .tablet .\75\61-08 .\75\61-03 {max-width: 33.3%;} .tablet .\75\61-08 .\75\61-02 {max-width: 25%;} .tablet .\75\61-08 .\75\61-01 {max-width: 12.5%;} .tablet .\75\61-06 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-06 .\75\61-03 {max-width: 50%;} .tablet .\75\61-06 .\75\61-02 {max-width: 33.3%;} .tablet .\75\61-06 .\75\61-01 {max-width: 16.6%;} .tablet .\75\61-04 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-04 .\75\61-02 {max-width: 50%;} .tablet .\75\61-04 .\75\61-01 {max-width: 25%;} .tablet .\75\61-03 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-03 .\75\61-02 {max-width: 66.6%;} .tablet .\75\61-03 .\75\61-01 {max-width: 33.3%;} .tablet .\75\61-02 [class*='\75\61-'] {max-width: 100%;} .tablet .\75\61-02 .\75\61-01 {max-width: 50%;} .tablet .\75\61-01 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-12 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-12 .\75\61-02 {max-width: 50%;} .phone .\75\61-12 .\75\61-01 {max-width: 25%;} .phone .\75\61-10 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-10 .\75\61-02 {max-width: 50%;} .phone .\75\61-10 .\75\61-01 {max-width: 25%;} .phone .\75\61-08 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-08 .\75\61-02 {max-width: 50%;} .phone .\75\61-08 .\75\61-01 {max-width: 25%;} .phone .\75\61-06 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-06 .\75\61-02 {max-width: 50%;} .phone .\75\61-06 .\75\61-01 {max-width: 25%;} .phone .\75\61-04 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-04 .\75\61-02 {max-width: 50%;} .phone .\75\61-04 .\75\61-01 {max-width: 25%;} .phone .\75\61-03 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-03 .\75\61-02 {max-width: 66.6%;} .phone .\75\61-03 .\75\61-01 {max-width: 33.3%;} .phone .\75\61-02 [class*='\75\61-'] {max-width: 100%;} .phone .\75\61-02 .\75\61-01 {max-width: 50%;} .phone .\75\61-01 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-12 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-12 .\75\61-02 {max-width: 50%;} .watch .\75\61-12 .\75\61-01 {max-width: 25%;} .watch .\75\61-10 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-10 .\75\61-02 {max-width: 50%;} .watch .\75\61-10 .\75\61-01 {max-width: 25%;} .watch .\75\61-08 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-08 .\75\61-02 {max-width: 50%;} .watch .\75\61-08 .\75\61-01 {max-width: 25%;} .watch .\75\61-06 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-06 .\75\61-02 {max-width: 50%;} .watch .\75\61-06 .\75\61-01 {max-width: 25%;} .watch .\75\61-04 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-04 .\75\61-02 {max-width: 50%;} .watch .\75\61-04 .\75\61-01 {max-width: 25%;} .watch .\75\61-03 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-03 .\75\61-02 {max-width: 66.6%;} .watch .\75\61-03 .\75\61-01 {max-width: 33.3%;} .watch .\75\61-02 [class*='\75\61-'] {max-width: 100%;} .watch .\75\61-02 .\75\61-01 {max-width: 50%;} .watch .\75\61-01 [class*='\75\61-'] {max-width: 100%;} .\75\61-02,.\75\61-03,.\75\61-04,.\75\61-06,.\75\61-08,.\75\61-10,.\75\61-12 { width: 100%!Important; width: fill-available; width: -moz-available; width: -webkit-fill-available; } .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n+1):first-child:nth-last-child(-n+9999), .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n+1):first-child ~ *:nth-last-child(-n+9999) { max-width: 49.6%; } .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(-n+2), .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(-n+2) { max-width: 49.6%; } .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(1), .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(1) { padding-left: var(--sz-25); } .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(2), .smartTV .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(2) { padding-right: var(--sz-25); } .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n+1):first-child:nth-last-child(-n+9999), .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n+1):first-child ~ *:nth-last-child(-n+9999) { max-width: 49.6%; } .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(-n+2), .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(-n+2) { max-width: 49.6%; } .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(1), .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(1) { padding-left: var(--sz-25); } .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child:nth-last-child(2), .desktop .\66\6c\65\78 > *.\75\61-04:nth-last-child(3n-1):first-child ~ *:nth-last-child(2) { padding-right: var(--sz-25); } .tablet .\66\6c\65\78 > *.\75\61-04:nth-last-child(2n+1):first-child:nth-last-child(-n+1), .tablet .\66\6c\65\78 > *.\75\61-04:nth-last-child(2n+1):first-child ~ *:nth-last-child(-n+1) { max-width: 100%; } .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n):first-child:nth-last-child(-n+9999), .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n):first-child ~ *:nth-last-child(-n+9999) { max-width: 33%; } .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+1):first-child:nth-last-child(-n+9), .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+1):first-child ~ *:nth-last-child(-n+9) { max-width: 33%; } .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+2):first-child:nth-last-child(-n+6), .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+2):first-child ~ *:nth-last-child(-n+6) { max-width: 33%; } .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n-1):first-child:nth-last-child(-n+3), .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n-1):first-child ~ *:nth-last-child(-n+3) { max-width: 33%; } .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n):first-child:nth-last-child(-n+9999), .smartTV .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n):first-child ~ *:nth-last-child(-n+9999) { max-width: 25%; } .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n):first-child:nth-last-child(-n+9999), .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n):first-child ~ *:nth-last-child(-n+9999) { max-width: 33%; } .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+1):first-child:nth-last-child(-n+9), .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+1):first-child ~ *:nth-last-child(-n+9) { max-width: 33%; } .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+2):first-child:nth-last-child(-n+6), .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n+2):first-child ~ *:nth-last-child(-n+6) { max-width: 33%; } .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n-1):first-child:nth-last-child(-n+3), .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n-1):first-child ~ *:nth-last-child(-n+3) { max-width: 33%; } .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n):first-child:nth-last-child(-n+9999), .desktop .\66\6c\65\78 > *.\75\61-03:nth-last-child(4n):first-child ~ *:nth-last-child(-n+9999) { max-width: 25%; } .tablet .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n+2):first-child:nth-last-child(-n+2), .tablet .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n+2):first-child ~ *:nth-last-child(-n+2) { max-width: 49.6%; } .tablet .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n+1):first-child:nth-last-child(-n+4), .tablet .\66\6c\65\78 > *.\75\61-03:nth-last-child(3n+1):first-child ~ *:nth-last-child(-n+4) { max-width: 49.6%; } :root { --font-size: 1rem; --spacing: 0.5rem; --primary-base: #2563EB; --primary-dark: color-mix(in hsl, #2563EB 72%, black 28%); --primary-light: color-mix(in hsl, #2563EB 25%, white 75%); --secondary-base: #1E293B; --secondary-dark: color-mix(in hsl, #1E293B 72%, black 28%); --secondary-light: color-mix(in hsl, #1E293B 25%, white 75%); --contrast-base: #F59E0B; --contrast-dark: color-mix(in hsl, #F59E0B 72%, black 28%); --contrast-light: color-mix(in hsl, #F59E0B 25%, white 75%); --shade: 0, 0%, 50%; --shade-base: hsl(var(--shade)); --shade-dark: color-mix(in hsl, hsl(var(--shade)) 70%, black 30%); --shade-dark-base: color-mix(in hsl, hsl(var(--shade)) 70%, black 30%); --color-bg: #ffffff; --shade-light: hsl(45, 30%, 97%); --shade-light-base: hsl(45, 30%, 97%); --shade-lightgray: #e4e9f0; --band-bg-top: #f1f4f8; --band-bg-mid: #e5ebf2; --band-bg-bot: #f1f4f8; --text-dark: #111827; --text-light: #ffffff; --on-surface: var(--primary-base); --on-primary: var(--text-light); --on-dark: var(--primary-light); --shade-mid: color-mix(in srgb, var(--text-dark) 60%, var(--text-light) 40%); --text-muted: var(--text-muted-on-light, var(--text-dark)); --sc-light: var(--text-light); --sc-dark: var(--text-dark); --link-underline-color: var(--contrast-base); --link-hover-color: var(--contrast-dark); --max-w: 1200px; --max-w-bg: transparent; --headline-font: 'Roboto Slab', serif; --copytext-font: 'Roboto', sans-serif; --eyebrow-font-color: var(--accent-on-light, var(--primary-base)); --eyebrow-font-family: var(--copytext-font); --eyebrow-font-size: 0.75rem; --eyebrow-font-weight: 700; --eyebrow-font-lineheight: 1.2; --eyebrow-text-transform: uppercase; --eyebrow-letter-spacing: 0.12em; --sub-font-color: var(--text-muted); --sub-font-opacity: 1; --sub-font-family: var(--copytext-font); --h1sub-font-color: var(--sub-font-color); --h1sub-font-family: var(--sub-font-family); --h1sub-font-size: calc(var(--h1-font-size) * var(--type-sub-ratio)); --h1sub-font-weight: 300; --h1sub-font-lineheight: 1.4; --h1sub-text-transform: none; --h1sub-letter-spacing: 0; --h2sub-font-color: var(--sub-font-color); --h2sub-font-family: var(--sub-font-family); --h2sub-font-size: calc(var(--h2-font-size) * var(--type-sub-ratio)); --h2sub-font-weight: 300; --h2sub-font-lineheight: 1.45; --h2sub-text-transform: none; --h2sub-letter-spacing: 0; --h3sub-font-color: var(--sub-font-color); --h3sub-font-family: var(--sub-font-family); --h3sub-font-size: calc(var(--h3-font-size) * var(--type-sub-ratio)); --h3sub-font-weight: 400; --h3sub-font-lineheight: 1.5; --h3sub-text-transform: none; --h3sub-letter-spacing: 0; --h4sub-font-color: var(--sub-font-color); --h4sub-font-family: var(--sub-font-family); --h4sub-font-size: calc(var(--h4-font-size) * var(--type-sub-ratio)); --h4sub-font-weight: 400; --h4sub-font-lineheight: 1.5; --h4sub-text-transform: none; --h4sub-letter-spacing: 0; --emphasis-font-color: var(--eyebrow-font-color); --emphasis-font-family: var(--eyebrow-font-family); --emphasis-font-size: var(--eyebrow-font-size); --emphasis-font-weight: var(--eyebrow-font-weight); --type-base: 1rem; --type-scale: 1.2; --type-sub-ratio: 0.55; --type-s1: var(--type-scale); --type-s2: calc(var(--type-s1) * var(--type-scale)); --type-s3: calc(var(--type-s2) * var(--type-scale)); --type-s4: calc(var(--type-s3) * var(--type-scale)); --type-s5: calc(var(--type-s4) * var(--type-scale)); --type-s6: calc(var(--type-s5) * var(--type-scale)); --type-s7: calc(var(--type-s6) * var(--type-scale)); --h1-font-color: var(--headline-font-color, currentColor); --h1-font-family: var(--headline-font); --h1-font-size: calc(var(--type-base) * var(--type-s5)); --h1-font-weight: 700; --h1-font-lineheight: 1.15; --h1-font-textransform: none; --h2-font-color: var(--headline-font-color, currentColor); --h2-font-family: var(--headline-font); --h2-font-size: calc(var(--type-base) * var(--type-s4)); --h2-font-weight: 700; --h2-font-lineheight: 1.2; --h2-font-textransform: none; --h3-font-color: var(--headline-font-color, currentColor); --h3-font-family: var(--headline-font); --h3-font-size: calc(var(--type-base) * var(--type-s3)); --h3-font-weight: 600; --h3-font-lineheight: 1.3; --h3-font-textransform: none; --h4-font-color: var(--headline-font-color, currentColor); --h4-font-family: var(--copytext-font); --h4-font-size: calc(var(--type-base) * var(--type-s2)); --h4-font-weight: 600; --h4-font-lineheight: 1.4; --h4-font-textransform: none; --h5-font-color: var(--headline-font-color, currentColor); --h5-font-family: var(--copytext-font); --h5-font-size: calc(var(--type-base) * var(--type-s1)); --h5-font-weight: 600; --h5-font-lineheight: 1.4; --h5-font-textransform: none; --h6-font-color: var(--headline-font-color, currentColor); --h6-font-family: var(--copytext-font); --h6-font-size: var(--type-base); --h6-font-weight: 600; --h6-font-lineheight: 1.4; --h6-font-textransform: none; --bodytext-font-color: currentColor; --bodytext-font-family: var(--copytext-font); --bodytext-font-size: var(--type-base); --bodytext-font-weight: 400; --bodytext-font-lineheight: 1.65; } body.mypage, div.mypage { -webkit-text-size-adjust: none; font-family: var(--bodytext-font-family, var(--copytext-font)); font-size: var(--bodytext-font-size, var(--font-size)); font-weight: var(--bodytext-font-weight, 400); line-height: var(--bodytext-font-lineheight, 1.65); color: var(--on-surface-text, var(--text-dark)); background-color: var(--color-bg); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --max-w-bg: transparent; } .mypage.layout-boxed { max-width: var(--max-w); margin-inline: auto; position: relative; overflow-x: clip; overflow-y: visible; } .mypage h1, .mypage .h1, .mypage h2, .mypage .h2, .mypage h3, .mypage .h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 6 2 3; } .mypage h1, .mypage .h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); line-height: var(--h1-font-lineheight); color: var(--h1-font-color); text-transform: var(--h1-text-transform, none); letter-spacing: var(--h1-letter-spacing, normal); margin: 0 0 0.5em; } .mypage h2, .mypage .h2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); line-height: var(--h2-font-lineheight); color: var(--h2-font-color); text-transform: var(--h2-text-transform, none); letter-spacing: var(--h2-letter-spacing, normal); margin: 0 0 0.5em; } .mypage h3, .mypage .h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); line-height: var(--h3-font-lineheight); color: var(--h3-font-color); text-transform: var(--h3-text-transform, none); letter-spacing: var(--h3-letter-spacing, normal); margin: 0 0 0.5em; } .mypage h4, .mypage .h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); line-height: var(--h4-font-lineheight); color: var(--h4-font-color); text-transform: var(--h4-text-transform, none); letter-spacing: var(--h4-letter-spacing, normal); margin: 0 0 0.5em; } .mypage h5, .mypage .h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); line-height: var(--h5-font-lineheight); color: var(--h5-font-color); text-transform: var(--h5-text-transform, none); letter-spacing: var(--h5-letter-spacing, normal); margin: 0 0 0.45em; } .mypage h6, .mypage .h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); line-height: var(--h6-font-lineheight); color: var(--h6-font-color); text-transform: var(--h6-text-transform, none); letter-spacing: var(--h6-letter-spacing, normal); margin: 0 0 0.45em; } .mypage p { color: var(--bodytext-font-color); line-height: var(--bodytext-font-lineheight, 1.65); margin: 0 0 1.25em; } .mypage p:last-child, .mypage h1:last-child, .mypage h2:last-child, .mypage h3:last-child, .mypage h4:last-child, .mypage h5:last-child, .mypage h6:last-child, .mypage ol:last-child, .mypage ul:last-child { margin-bottom: 0; } .mypage p.eyebrow, .mypage p.emphasis { margin-top: 1em; } .mypage .caption { display: block; font-size: 0.95em; font-weight: 600; } .mypage .caption-sub { display: block; font-size: 0.85em; font-weight: 400; color: var(--text-muted); } .mypage p.caption { line-height: 1.25; margin: 0 0 0.25em; } .mypage p.caption:last-child { margin-bottom: 0; } .mypage p.caption-sub { line-height: 1.3; margin-bottom: 0.75em; } .mypage p.caption-sub:last-child { margin-bottom: 0; } .mypage p.subline, .mypage p.h1sub, .mypage p.h2sub, .mypage p.h3sub, .mypage p.h4sub { margin-top: 0.5em; margin-bottom: 1.25em; } .mypage b, .mypage strong { font-weight: 700; } .mypage i, .mypage em { font-style: italic; } .mypage ol, .mypage ul { margin-left: 1.75rem; margin-bottom: 1.25em; } .mypage li { line-height: var(--bodytext-font-lineheight, 1.65); margin: 0; } .mypage li + li { margin-top: 0; } .mypage li > p, .mypage li p { margin: 0; line-height: inherit; } .mypage li p + p { margin-top: 1.25em; } .mypage li > ol, .mypage li > ul { margin-top: 0; margin-bottom: 0; } .mypage small { font-size: 0.8125rem; color: var(--text-muted); } .mypage .txt-xs { font-size: 0.75rem !important; } .mypage .txt-sm { font-size: 0.875rem !important; } .mypage .txt-base { font-size: var(--type-base) !important; } .mypage .txt-lg { font-size: var(--h5-font-size) !important; } .mypage .txt-xl { font-size: var(--h4-font-size) !important; } .mypage .txt-2xl { font-size: var(--h3-font-size) !important; } .mypage .txt-3xl { font-size: var(--h2-font-size) !important; } .mypage .txt-4xl { font-size: var(--h1-font-size) !important; } .mypage .txt-5xl { font-size: calc(var(--type-base) * var(--type-s6)) !important; } .mypage .txt-6xl { font-size: calc(var(--type-base) * var(--type-s7)) !important; } .mypage .brand-text { font-family: var(--brand-font, var(--headline-font)); letter-spacing: 0.04em; } .mypage .emphasis, .mypage .eyebrow { color: var(--emphasis-font-color); font-family: var(--emphasis-font-family); font-size: var(--emphasis-font-size); font-weight: var(--emphasis-font-weight); line-height: var(--emphasis-font-lineheight); text-transform: var(--emphasis-font-textransform); letter-spacing: var(--emphasis-letter-spacing); display: block; margin-top: 1em; margin-bottom: 0.5rem; } .mypage .section-head:has(h1, h2, h3, h4, p, .eyebrow) { margin-bottom: var(--section-head-gap, 2rem); } .mypage .section-head:last-child { margin-bottom: 0; } .mypage .section-head p:last-child, .mypage .section-head h1:last-child, .mypage .section-head h2:last-child, .mypage .section-head h3:last-child, .mypage .section-head h4:last-child, .mypage .section-head .eyebrow:last-child { margin-bottom: 0; } .mypage .max-w, .mypage .section .max-w, .mypage .footerSection .max-w { display: block; max-width: var(--max-w); margin-left: auto; margin-right: auto; background: var(--max-w-bg); } .mypage [class*="glass"], .mypage [class*="scrim"], .mypage .head-overlay-active { --max-w-bg: transparent; } .mypage section[type="layer"]:not(.text-center):not(.text-right):not(.text-left) { text-align: inherit; } .mypage .text-left { text-align: left; } .mypage .text-center { text-align: center; } .mypage .text-right { text-align: right; } .mypage .eyebrow { color: var(--eyebrow-font-color); font-family: var(--eyebrow-font-family); font-size: var(--eyebrow-font-size); font-weight: var(--eyebrow-font-weight); line-height: var(--eyebrow-font-lineheight); text-transform: var(--eyebrow-text-transform); letter-spacing: var(--eyebrow-letter-spacing); display: block; margin-bottom: 1em; } .mypage .h1sub { color: var(--h1sub-font-color); font-family: var(--h1sub-font-family); font-size: var(--h1sub-font-size); font-weight: var(--h1sub-font-weight); line-height: var(--h1sub-font-lineheight); text-transform: var(--h1sub-text-transform); letter-spacing: var(--h1sub-letter-spacing); display: block; margin-top: 0.5rem; } .mypage .h2sub { color: var(--h2sub-font-color); font-family: var(--h2sub-font-family); font-size: var(--h2sub-font-size); font-weight: var(--h2sub-font-weight); line-height: var(--h2sub-font-lineheight); text-transform: var(--h2sub-text-transform); letter-spacing: var(--h2sub-letter-spacing); display: block; margin-top: 0.4rem; } .mypage .h3sub { color: var(--h3sub-font-color); font-family: var(--h3sub-font-family); font-size: var(--h3sub-font-size); font-weight: var(--h3sub-font-weight); line-height: var(--h3sub-font-lineheight); text-transform: var(--h3sub-text-transform); letter-spacing: var(--h3sub-letter-spacing); display: block; margin-top: 0.3rem; } .mypage .h4sub { color: var(--h4sub-font-color); font-family: var(--h4sub-font-family); font-size: var(--h4sub-font-size); font-weight: var(--h4sub-font-weight); line-height: var(--h4sub-font-lineheight); text-transform: var(--h4sub-text-transform); letter-spacing: var(--h4sub-letter-spacing); display: block; margin-top: 0.2rem; } .mypage .clearfix { clear: both; } .mypage .float-start { float: left; } .mypage .float-end { float: right; } .mypage .rounded-none { border-radius: 0; } .mypage .rounded-sm { border-radius: 0.375rem; } .mypage .rounded { border-radius: 0.5rem; } .mypage .rounded-md { border-radius: 0.75rem; } .mypage .rounded-lg { border-radius: 1rem; } .mypage .rounded-xl { border-radius: 1.5rem; } .mypage .rounded-2xl { border-radius: 2rem; } .mypage .rounded-3xl { border-radius: 3rem; } .mypage .rounded-full { border-radius: 9999px; } .mypage blockquote { border-left: 4px solid var(--primary-base); margin: 0; padding: 0.75rem 0 0.75rem 1.25rem; } .mypage blockquote p { margin: 0; font-size: 1.0625rem; font-style: italic; line-height: 1.55; } .mypage a.btn, .mypage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.75rem; border-radius: 0.375rem; font-family: var(--copytext-font); font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease; } .mypage a.btn:hover, .mypage .btn:hover { transform: translateY(-1px); } .mypage .btn.sc-cta { background-color: var(--cta-bg-safe, var(--primary-base)); color: var(--text-light); } .mypage .btn.sc-cta:hover { background-color: var(--primary-dark); color: var(--text-light); } .mypage a { color: var(--link-color, inherit); text-decoration: underline; text-decoration-color: var(--link-underline-color); text-underline-offset: 2px; text-decoration-thickness: 1px; transition: text-decoration-color 0.12s ease, text-decoration-thickness 0.12s ease; } .mypage a:hover { text-decoration-color: var(--link-hover-color); text-decoration-thickness: 2px; } .mypage svg.icon { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; } .mypage a[data-link-type]::before { display: inline-block; margin-right: 0.3em; font-size: 1.3em; line-height: 1; text-decoration: none; vertical-align: baseline; color: currentColor; opacity: 0.7; transition: transform 160ms ease, opacity 160ms ease; } .mypage a[data-link-type]:hover::before { opacity: 1; } .mypage a[data-link-type="external"]::before { content: "↗"; } .mypage a[data-link-type="external"]:hover::before { transform: translate(2px, -2px); } .mypage a[data-link-type="download"]::before { content: "↓"; } .mypage a[data-link-type="download"]:hover::before { transform: translateY(2px); } .mypage a[data-link-type="email"]::before { content: "✉"; } .mypage a[data-link-type="phone"]::before { content: "☎"; } .mypage a[data-link-type="anchor"]::before { content: "↓"; } .mypage a[data-link-type="anchor"]:hover::before { transform: translateY(2px); } .mypage a.anchor { color: var(--accent-on-light, var(--primary-base)); text-decoration: none; font-weight: 500; } .mypage a.anchor:hover { text-decoration: underline; text-underline-offset: 3px; } .mypage .sc-dark { --max-w-bg: transparent; background-color: var(--shade-dark-base) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, var(--text-muted-on-dark, rgba(255,255,255,0.82))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-black { --max-w-bg: transparent; background-color: #000000 !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, var(--text-muted-on-dark, rgba(255,255,255,0.82))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-light { --max-w-bg: transparent; background-color: var(--shade-light-base) !important; color: var(--on-surface-text, var(--text-dark)); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --eyebrow-font-color: currentColor; --emphasis-font-color: currentColor; } .mypage .sc-white { --max-w-bg: transparent; background-color: #ffffff !important; color: var(--on-surface-text, var(--text-dark)); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --eyebrow-font-color: currentColor; --emphasis-font-color: currentColor; } .mypage .sc-pri { --max-w-bg: transparent; background-color: var(--primary-base) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, var(--text-muted-on-primary, rgba(255,255,255,0.82))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-pri-l { --max-w-bg: transparent; background-color: var(--primary-light) !important; color: var(--on-surface-text, var(--text-dark)); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --eyebrow-font-color: currentColor; --emphasis-font-color: currentColor; } .mypage .sc-pri-d { --max-w-bg: transparent; background-color: var(--primary-dark) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, rgba(255,255,255,0.82)); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-sec { --max-w-bg: transparent; background-color: var(--secondary-base) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, var(--text-muted-on-secondary, rgba(255,255,255,0.82))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-sec-l { --max-w-bg: transparent; background-color: var(--secondary-light) !important; color: var(--on-surface-text, var(--text-dark)); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --eyebrow-font-color: currentColor; --emphasis-font-color: currentColor; } .mypage .sc-sec-d { --max-w-bg: transparent; background-color: var(--secondary-dark) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, rgba(255,255,255,0.82)); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-acc { --max-w-bg: transparent; background-color: var(--contrast-base) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, var(--text-muted-on-accent, rgba(0,0,0,0.7))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .sc-dark, .mypage .sc-pri, .mypage .sc-sec, .mypage .sc-acc, .mypage .sc-black, .mypage .sc-pri-d, .mypage .sc-sec-d, .mypage .sc-acc-d { --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); } .mypage .sc-acc-l { --max-w-bg: transparent; background-color: var(--contrast-light) !important; color: var(--on-surface-text, var(--text-dark)); --text-muted: var(--on-surface-muted, var(--text-muted-on-light, var(--text-dark))); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --eyebrow-font-color: currentColor; --emphasis-font-color: currentColor; } .mypage .sc-acc-d { --max-w-bg: transparent; background-color: var(--contrast-dark) !important; color: var(--on-surface-text, var(--text-light)); --text-muted: var(--on-surface-muted, rgba(255,255,255,0.82)); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; } .mypage .glass-light { background: rgba(255,255,255,0.65); color: var(--text-dark); } .mypage .glass-smoke { background: rgba(40,46,56,0.45); color: var(--text-light); } .mypage .glass-dark { background: rgba(0,0,0,0.55); color: var(--text-light); } .mypage .glass-light-fade { background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 100%); color: var(--text-dark); } .mypage .glass-dark-fade { background: linear-gradient(180deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 100%); color: var(--text-light); } .mypage .glass-pri { background: color-mix(in srgb, var(--primary-base) 60%, transparent); color: var(--text-light); } .mypage .glass-pri-l { background: color-mix(in srgb, var(--primary-light) 70%, transparent); color: var(--text-dark); } .mypage .glass-sec { background: color-mix(in srgb, var(--secondary-base) 60%, transparent); color: var(--text-light); } .mypage .glass-sec-l { background: color-mix(in srgb, var(--secondary-light) 70%, transparent); color: var(--text-dark); } .mypage .glass-acc { background: color-mix(in srgb, var(--contrast-base) 60%, transparent); color: var(--text-dark); } .mypage .glass-acc-l { background: color-mix(in srgb, var(--contrast-light) 70%, transparent); color: var(--text-dark); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .mypage .glass-frosted { -webkit-backdrop-filter: blur(var(--frosted-blur, 10px)); backdrop-filter: blur(var(--frosted-blur, 10px)); } } [slot="menu"], [slot^="menu_"], [slot="menu-h"], [slot^="menu-h_"], [slot="menu-v"], [slot^="menu-v_"] { display: flex !important; align-items: flex-start; gap: var(--menu-gap-y, 0.5rem) var(--menu-gap-x, 1.25rem); line-height: 1.2; color: var(--menu-link-color, inherit); font-family: var(--menu-font, var(--headline-font, inherit)); font-weight: var(--menu-font-weight, inherit); text-transform: var(--menu-text-transform, none); } [slot="menu-h"], [slot^="menu-h_"] { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: var(--menu-gap-y, 0.5rem) var(--menu-gap-x, 1.25rem); } [slot="menu"], [slot^="menu_"], [slot="menu-v"], [slot^="menu-v_"] { flex-direction: column !important; align-items: flex-start; gap: var(--menu-gap-y, 0.5rem); } [slot*="menu"].text-center { justify-content: center; align-items: center; } [slot*="menu"].text-right { justify-content: flex-end; align-items: flex-end; } [slot*="menu"].text-left { justify-content: flex-start; align-items: flex-start; } .mypage [slot*="menu"] a, [slot*="menu"] a { color: var(--menu-link-color, inherit); text-decoration: none; font-size: var(--menu-font-size, inherit); font-family: var(--menu-font, inherit); font-weight: var(--menu-font-weight, inherit); text-transform: var(--menu-text-transform, inherit); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm, 4px); position: relative; transition: color 120ms ease, background-color 120ms ease, text-decoration-color 120ms ease; } .mypage [slot*="menu"] a:hover, [slot*="menu"] a:hover { color: var(--menu-hover-color, var(--primary-base, currentColor)); } .mypage [slot*="menu"][data-menu-hover="underline"] a:hover, [slot*="menu"][data-menu-hover="underline"] a:hover { text-decoration: underline !important; text-underline-offset: 4px; } .mypage [slot*="menu"][data-menu-hover="bg"] a:hover, [slot*="menu"][data-menu-hover="bg"] a:hover { background-color: var(--menu-hover-bg, color-mix(in srgb, currentColor 10%, transparent)) !important; color: var(--menu-hover-color, var(--menu-link-color, inherit)) !important; } .mypage [slot*="menu"][data-menu-hover="color"] a:hover, [slot*="menu"][data-menu-hover="color"] a:hover { color: var(--menu-hover-color, var(--primary-base, currentColor)) !important; } .mypage [slot*="menu"] a.active, .mypage [slot*="menu"] a[aria-current="page"], .mypage [slot*="menu"] a:active, .mypage [slot*="menu"][data-preview-active] a:first-of-type, [slot*="menu"] a.active, [slot*="menu"] a[aria-current="page"], [slot*="menu"] a:active, [slot*="menu"][data-preview-active] a:first-of-type { color: var(--menu-active-color, inherit); } .mypage [slot*="menu"][data-menu-active="underline"] a.active, .mypage [slot*="menu"][data-menu-active="underline"] a[aria-current="page"], .mypage [slot*="menu"][data-menu-active="underline"] a:active, .mypage [slot*="menu"][data-menu-active="underline"][data-preview-active] a:first-of-type, [slot*="menu"][data-menu-active="underline"] a.active, [slot*="menu"][data-menu-active="underline"] a[aria-current="page"], [slot*="menu"][data-menu-active="underline"] a:active, [slot*="menu"][data-menu-active="underline"][data-preview-active] a:first-of-type { text-decoration: underline !important; text-underline-offset: 4px; font-weight: 600; } .mypage [slot*="menu"][data-menu-active="bg"] a.active, .mypage [slot*="menu"][data-menu-active="bg"] a[aria-current="page"], .mypage [slot*="menu"][data-menu-active="bg"] a:active, .mypage [slot*="menu"][data-menu-active="bg"][data-preview-active] a:first-of-type, [slot*="menu"][data-menu-active="bg"] a.active, [slot*="menu"][data-menu-active="bg"] a[aria-current="page"], [slot*="menu"][data-menu-active="bg"] a:active, [slot*="menu"][data-menu-active="bg"][data-preview-active] a:first-of-type { background-color: var(--menu-active-bg, color-mix(in srgb, currentColor 15%, transparent)) !important; color: var(--menu-active-color, inherit) !important; border-radius: var(--radius-sm, 4px); } .mypage [slot*="menu"][data-menu-active="color"] a.active, .mypage [slot*="menu"][data-menu-active="color"] a[aria-current="page"], .mypage [slot*="menu"][data-menu-active="color"] a:active, .mypage [slot*="menu"][data-menu-active="color"][data-preview-active] a:first-of-type, [slot*="menu"][data-menu-active="color"] a.active, [slot*="menu"][data-menu-active="color"] a[aria-current="page"], [slot*="menu"][data-menu-active="color"] a:active, [slot*="menu"][data-menu-active="color"][data-preview-active] a:first-of-type { color: var(--menu-active-color, var(--primary-base, currentColor)) !important; font-weight: 600; } .mypage [slot*="menu"][data-menu-hover="bg"] a.active:hover, .mypage [slot*="menu"][data-menu-hover="bg"] a[aria-current="page"]:hover, .mypage [slot*="menu"][data-menu-hover="bg"] a:active:hover, .mypage [slot*="menu"][data-menu-hover="bg"][data-preview-active] a:first-of-type:hover, [slot*="menu"][data-menu-hover="bg"] a.active:hover, [slot*="menu"][data-menu-hover="bg"] a[aria-current="page"]:hover, [slot*="menu"][data-menu-hover="bg"] a:active:hover, [slot*="menu"][data-menu-hover="bg"][data-preview-active] a:first-of-type:hover { background-color: var(--menu-hover-bg, color-mix(in srgb, currentColor 10%, transparent)) !important; color: var(--menu-hover-color, var(--menu-link-color, #ffffff)) !important; } .mypage [slot*="menu"][data-menu-hover="color"] a.active:hover, .mypage [slot*="menu"][data-menu-hover="color"] a[aria-current="page"]:hover, .mypage [slot*="menu"][data-menu-hover="color"] a:active:hover, .mypage [slot*="menu"][data-menu-hover="color"][data-preview-active] a:first-of-type:hover, [slot*="menu"][data-menu-hover="color"] a.active:hover, [slot*="menu"][data-menu-hover="color"] a[aria-current="page"]:hover, [slot*="menu"][data-menu-hover="color"] a:active:hover, [slot*="menu"][data-menu-hover="color"][data-preview-active] a:first-of-type:hover { color: var(--menu-hover-color, var(--primary-base, currentColor)) !important; } .nav-demo { color: var(--menu-link-color, var(--text-muted)); font-size: var(--menu-font-size, 0.75rem); padding: 0.25rem 0; text-transform: var(--menu-text-transform, uppercase); letter-spacing: 0.05em; cursor: default; user-select: none; white-space: nowrap; } .nav-demo + .nav-demo::before { content: "·"; display: inline-block; margin: 0 0.5rem; opacity: 0.5; } .nav-empty { color: var(--text-muted); font-size: 0.75rem; font-style: italic; padding: 0.25rem 0; cursor: default; user-select: none; } [slot^="menu-v"] .nav-demo, .menu-list-vertical .nav-demo, .fe-menu-slot .nav-demo { text-transform: none; letter-spacing: normal; font-size: 0.85rem; } [slot^="menu-v"] .nav-demo + .nav-demo::before, .menu-list-vertical .nav-demo + .nav-demo::before, .fe-menu-slot .nav-demo + .nav-demo::before { content: none; margin: 0; } [slot="menu"].menu-list-vertical, [slot^="menu_"].menu-list-vertical { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .mypage .full { width: 100%; } .mypage .half { width: 50%; } .mypage .third { width: 33.333%; } .mypage .quarter { width: 25%; } .mypage .pt-0 { padding-top: 0 !important; } .mypage .pt-1 { padding-top: calc(1 * var(--spacing)) !important; } .mypage .pt-2 { padding-top: calc(2 * var(--spacing)) !important; } .mypage .pt-3 { padding-top: calc(3 * var(--spacing)) !important; } .mypage .pt-4 { padding-top: calc(4 * var(--spacing)) !important; } .mypage .pt-5 { padding-top: calc(5 * var(--spacing)) !important; } .mypage .pt-6 { padding-top: calc(6 * var(--spacing)) !important; } .mypage .pt-8 { padding-top: calc(8 * var(--spacing)) !important; } .mypage .pt-10 { padding-top: calc(10 * var(--spacing)) !important; } .mypage .pt-12 { padding-top: calc(12 * var(--spacing)) !important; } .mypage .pb-0 { padding-bottom: 0 !important; } .mypage .pb-1 { padding-bottom: calc(1 * var(--spacing)) !important; } .mypage .pb-2 { padding-bottom: calc(2 * var(--spacing)) !important; } .mypage .pb-3 { padding-bottom: calc(3 * var(--spacing)) !important; } .mypage .pb-4 { padding-bottom: calc(4 * var(--spacing)) !important; } .mypage .pb-5 { padding-bottom: calc(5 * var(--spacing)) !important; } .mypage .pb-6 { padding-bottom: calc(6 * var(--spacing)) !important; } .mypage .pb-8 { padding-bottom: calc(8 * var(--spacing)) !important; } .mypage .pb-10 { padding-bottom: calc(10 * var(--spacing)) !important; } .mypage .pb-12 { padding-bottom: calc(12 * var(--spacing)) !important; } .mypage .pl-0 { padding-left: 0 !important; } .mypage .pl-1 { padding-left: calc(1 * var(--spacing)) !important; } .mypage .pl-2 { padding-left: calc(2 * var(--spacing)) !important; } .mypage .pl-3 { padding-left: calc(3 * var(--spacing)) !important; } .mypage .pl-4 { padding-left: calc(4 * var(--spacing)) !important; } .mypage .pl-5 { padding-left: calc(5 * var(--spacing)) !important; } .mypage .pl-6 { padding-left: calc(6 * var(--spacing)) !important; } .mypage .pl-8 { padding-left: calc(8 * var(--spacing)) !important; } .mypage .pl-10 { padding-left: calc(10 * var(--spacing)) !important; } .mypage .pl-12 { padding-left: calc(12 * var(--spacing)) !important; } .mypage .pr-0 { padding-right: 0 !important; } .mypage .pr-1 { padding-right: calc(1 * var(--spacing)) !important; } .mypage .pr-2 { padding-right: calc(2 * var(--spacing)) !important; } .mypage .pr-3 { padding-right: calc(3 * var(--spacing)) !important; } .mypage .pr-4 { padding-right: calc(4 * var(--spacing)) !important; } .mypage .pr-5 { padding-right: calc(5 * var(--spacing)) !important; } .mypage .pr-6 { padding-right: calc(6 * var(--spacing)) !important; } .mypage .pr-8 { padding-right: calc(8 * var(--spacing)) !important; } .mypage .pr-10 { padding-right: calc(10 * var(--spacing)) !important; } .mypage .pr-12 { padding-right: calc(12 * var(--spacing)) !important; } .mypage .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .mypage .px-1 { padding-left: calc(1 * var(--spacing)) !important; padding-right: calc(1 * var(--spacing)) !important; } .mypage .px-2 { padding-left: calc(2 * var(--spacing)) !important; padding-right: calc(2 * var(--spacing)) !important; } .mypage .px-3 { padding-left: calc(3 * var(--spacing)) !important; padding-right: calc(3 * var(--spacing)) !important; } .mypage .px-4 { padding-left: calc(4 * var(--spacing)) !important; padding-right: calc(4 * var(--spacing)) !important; } .mypage .px-5 { padding-left: calc(5 * var(--spacing)) !important; padding-right: calc(5 * var(--spacing)) !important; } .mypage .px-6 { padding-left: calc(6 * var(--spacing)) !important; padding-right: calc(6 * var(--spacing)) !important; } .mypage .px-8 { padding-left: calc(8 * var(--spacing)) !important; padding-right: calc(8 * var(--spacing)) !important; } .mypage .px-10 { padding-left: calc(10 * var(--spacing)) !important; padding-right: calc(10 * var(--spacing)) !important; } .mypage .px-12 { padding-left: calc(12 * var(--spacing)) !important; padding-right: calc(12 * var(--spacing)) !important; } .mypage .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .mypage .py-1 { padding-top: calc(1 * var(--spacing)) !important; padding-bottom: calc(1 * var(--spacing)) !important; } .mypage .py-2 { padding-top: calc(2 * var(--spacing)) !important; padding-bottom: calc(2 * var(--spacing)) !important; } .mypage .py-3 { padding-top: calc(3 * var(--spacing)) !important; padding-bottom: calc(3 * var(--spacing)) !important; } .mypage .py-4 { padding-top: calc(4 * var(--spacing)) !important; padding-bottom: calc(4 * var(--spacing)) !important; } .mypage .py-5 { padding-top: calc(5 * var(--spacing)) !important; padding-bottom: calc(5 * var(--spacing)) !important; } .mypage .py-6 { padding-top: calc(6 * var(--spacing)) !important; padding-bottom: calc(6 * var(--spacing)) !important; } .mypage .py-8 { padding-top: calc(8 * var(--spacing)) !important; padding-bottom: calc(8 * var(--spacing)) !important; } .mypage .py-10 { padding-top: calc(10 * var(--spacing)) !important; padding-bottom: calc(10 * var(--spacing)) !important; } .mypage .py-12 { padding-top: calc(12 * var(--spacing)) !important; padding-bottom: calc(12 * var(--spacing)) !important; } .mypage .pt-7 { padding-top: calc(7 * var(--spacing)) !important; } .mypage .pt-9 { padding-top: calc(9 * var(--spacing)) !important; } .mypage .pt-11 { padding-top: calc(11 * var(--spacing)) !important; } .mypage .pb-7 { padding-bottom: calc(7 * var(--spacing)) !important; } .mypage .pb-9 { padding-bottom: calc(9 * var(--spacing)) !important; } .mypage .pb-11 { padding-bottom: calc(11 * var(--spacing)) !important; } .mypage .pl-7 { padding-left: calc(7 * var(--spacing)) !important; } .mypage .pl-9 { padding-left: calc(9 * var(--spacing)) !important; } .mypage .pl-11 { padding-left: calc(11 * var(--spacing)) !important; } .mypage .pr-7 { padding-right: calc(7 * var(--spacing)) !important; } .mypage .pr-9 { padding-right: calc(9 * var(--spacing)) !important; } .mypage .pr-11 { padding-right: calc(11 * var(--spacing)) !important; } .mypage .px-7 { padding-left: calc(7 * var(--spacing)) !important; padding-right: calc(7 * var(--spacing)) !important; } .mypage .px-9 { padding-left: calc(9 * var(--spacing)) !important; padding-right: calc(9 * var(--spacing)) !important; } .mypage .px-11 { padding-left: calc(11 * var(--spacing)) !important; padding-right: calc(11 * var(--spacing)) !important; } .mypage .py-7 { padding-top: calc(7 * var(--spacing)) !important; padding-bottom: calc(7 * var(--spacing)) !important; } .mypage .py-9 { padding-top: calc(9 * var(--spacing)) !important; padding-bottom: calc(9 * var(--spacing)) !important; } .mypage .py-11 { padding-top: calc(11 * var(--spacing)) !important; padding-bottom: calc(11 * var(--spacing)) !important; } .mypage .mt-1 { margin-top: calc(1 * var(--spacing)) !important; } .mypage .mt-2 { margin-top: calc(2 * var(--spacing)) !important; } .mypage .mt-4 { margin-top: calc(4 * var(--spacing)) !important; } .mypage .mt-6 { margin-top: calc(6 * var(--spacing)) !important; } .mypage .mt-8 { margin-top: calc(8 * var(--spacing)) !important; } .mypage .mb-1 { margin-bottom: calc(1 * var(--spacing)) !important; } .mypage .mb-2 { margin-bottom: calc(2 * var(--spacing)) !important; } .mypage .mb-4 { margin-bottom: calc(4 * var(--spacing)) !important; } .mypage .mb-6 { margin-bottom: calc(6 * var(--spacing)) !important; } .mypage .mb-8 { margin-bottom: calc(8 * var(--spacing)) !important; } .mypage .my-2 { margin-top: calc(2 * var(--spacing)) !important; margin-bottom: calc(2 * var(--spacing)) !important; } .mypage .my-4 { margin-top: calc(4 * var(--spacing)) !important; margin-bottom: calc(4 * var(--spacing)) !important; } .mypage .my-6 { margin-top: calc(6 * var(--spacing)) !important; margin-bottom: calc(6 * var(--spacing)) !important; } .mypage .mx-auto { margin-left: auto; margin-right: auto; } .mypage .text-center { text-align: center; } .mypage .justify-start { justify-content: flex-start; } .mypage .justify-center { justify-content: center; } .mypage .justify-end { justify-content: flex-end; } .mypage .align-tl { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; } .mypage .align-tc { justify-content: flex-start !important; align-items: center !important; text-align: center !important; } .mypage .align-tr { justify-content: flex-start !important; align-items: flex-end !important; text-align: right !important; } .mypage .align-ml { justify-content: center !important; align-items: flex-start !important; text-align: left !important; } .mypage .align-mc { justify-content: center !important; align-items: center !important; text-align: center !important; } .mypage .align-mr { justify-content: center !important; align-items: flex-end !important; text-align: right !important; } .mypage .align-bl { justify-content: flex-end !important; align-items: flex-start !important; text-align: left !important; } .mypage .align-bc { justify-content: flex-end !important; align-items: center !important; text-align: center !important; } .mypage .align-br { justify-content: flex-end !important; align-items: flex-end !important; text-align: right !important; } .mypage .align-tl > *, .mypage .align-ml > *, .mypage .align-bl > * { text-align: left !important; } .mypage .align-tc > *, .mypage .align-mc > *, .mypage .align-bc > * { text-align: center !important; } .mypage .align-tr > *, .mypage .align-mr > *, .mypage .align-br > * { text-align: right !important; } .mypage .align-tl > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-ml > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-bl > :is(.molecule.header-nav, .molecule.social-strip) { justify-content: flex-start; } .mypage .align-tc > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-mc > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-bc > :is(.molecule.header-nav, .molecule.social-strip) { justify-content: center; } .mypage .align-tr > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-mr > :is(.molecule.header-nav, .molecule.social-strip), .mypage .align-br > :is(.molecule.header-nav, .molecule.social-strip) { justify-content: flex-end; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-tl { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-tc { justify-content: center !important; align-items: flex-start !important; text-align: center !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-tr { justify-content: flex-end !important; align-items: flex-start !important; text-align: right !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-ml { justify-content: flex-start !important; align-items: center !important; text-align: left !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-mc { justify-content: center !important; align-items: center !important; text-align: center !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-mr { justify-content: flex-end !important; align-items: center !important; text-align: right !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-bl { justify-content: flex-start !important; align-items: flex-end !important; text-align: left !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-bc { justify-content: center !important; align-items: flex-end !important; text-align: center !important; } .mypage :is(.molecule.social-strip, .molecule.header-nav, .flex-row).align-br { justify-content: flex-end !important; align-items: flex-end !important; text-align: right !important; } .mypage .aspect-21-9, .mypage picture.aspect-21-9, .mypage [type='picture'].aspect-21-9, .mypage picture:has(> img.aspect-21-9) { aspect-ratio: 21 / 9; overflow: hidden; } .mypage .aspect-1-1, .mypage picture.aspect-1-1, .mypage [type='picture'].aspect-1-1, .mypage picture:has(> img.aspect-1-1) { aspect-ratio: 1 / 1; overflow: hidden; } .mypage .aspect-4-3, .mypage picture.aspect-4-3, .mypage [type='picture'].aspect-4-3, .mypage picture:has(> img.aspect-4-3) { aspect-ratio: 4 / 3; overflow: hidden; } .mypage .aspect-16-9, .mypage picture.aspect-16-9, .mypage [type='picture'].aspect-16-9, .mypage picture:has(> img.aspect-16-9) { aspect-ratio: 16 / 9; overflow: hidden; } .mypage .aspect-3-2, .mypage picture.aspect-3-2, .mypage [type='picture'].aspect-3-2, .mypage picture:has(> img.aspect-3-2) { aspect-ratio: 3 / 2; overflow: hidden; } .mypage img.aspect-21-9, .mypage img.aspect-1-1, .mypage img.aspect-4-3, .mypage img.aspect-16-9, .mypage img.aspect-3-2, .mypage .aspect-21-9 img, .mypage .aspect-1-1 img, .mypage .aspect-4-3 img, .mypage .aspect-16-9 img, .mypage .aspect-3-2 img, .mypage .aspect-21-9 picture, .mypage .aspect-1-1 picture, .mypage .aspect-4-3 picture, .mypage .aspect-16-9 picture, .mypage .aspect-3-2 picture { width: 100%; height: 100%; object-fit: cover; display: block; } .mypage img, .mypage picture, .mypage video { object-position: 50% 30%; } .mypage .mol { padding: calc(1 * var(--paddingT)) calc(1 * var(--paddingL)); box-sizing: border-box; height: 100%; } .mypage .mol-sm { padding: calc(0.5 * var(--paddingT)) calc(0.5 * var(--paddingL)); box-sizing: border-box; height: 100%; } .mypage .mol-lg { padding: calc(1.5 * var(--paddingT)) calc(1.5 * var(--paddingL)); box-sizing: border-box; height: 100%; } .mypage .mol-card { padding: calc(1.25 * var(--paddingT)) calc(1.25 * var(--paddingL)); background-color: color-mix(in srgb, var(--color-bg) 95%, transparent); color: var(--text-dark); border-radius: var(--border-radius, 0.75rem); box-shadow: 0 2px 12px rgba(0,0,0,0.06); box-sizing: border-box; height: 100%; } .mypage .mol-card-dark { padding: calc(1.25 * var(--paddingT)) calc(1.25 * var(--paddingL)); background-color: var(--shade-dark-base); color: var(--text-light); border-radius: var(--border-radius, 0.75rem); box-shadow: 0 2px 12px rgba(0,0,0,0.18); box-sizing: border-box; height: 100%; } .mypage .gap-0 { gap: 0; --grid-gap: 0px; } .mypage .gap-1 { gap: calc(1 * var(--spacing)); --grid-gap: calc(1 * var(--spacing)); } .mypage .gap-2 { gap: calc(2 * var(--spacing)); --grid-gap: calc(2 * var(--spacing)); } .mypage .gap-3 { gap: calc(3 * var(--spacing)); --grid-gap: calc(3 * var(--spacing)); } .mypage .gap-4 { gap: calc(4 * var(--spacing)); --grid-gap: calc(4 * var(--spacing)); } .mypage .gap-5 { gap: calc(5 * var(--spacing)); --grid-gap: calc(5 * var(--spacing)); } .mypage .gap-6 { gap: calc(6 * var(--spacing)); --grid-gap: calc(6 * var(--spacing)); } .mypage .gap-8 { gap: calc(8 * var(--spacing)); --grid-gap: calc(8 * var(--spacing)); } .mypage .gap-x-1 { column-gap: calc(1 * var(--spacing)); } .mypage .gap-x-2 { column-gap: calc(2 * var(--spacing)); } .mypage .gap-x-3 { column-gap: calc(3 * var(--spacing)); } .mypage .gap-x-4 { column-gap: calc(4 * var(--spacing)); } .mypage .gap-x-6 { column-gap: calc(6 * var(--spacing)); } .mypage .gap-y-1 { row-gap: calc(1 * var(--spacing)); } .mypage .gap-y-2 { row-gap: calc(2 * var(--spacing)); } .mypage .gap-y-3 { row-gap: calc(3 * var(--spacing)); } .mypage .gap-y-4 { row-gap: calc(4 * var(--spacing)); } .mypage .gap-y-6 { row-gap: calc(6 * var(--spacing)); } .mypage .head-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 100; } .mypage .head-sticky { position: sticky; top: 0; z-index: 100; } .mypage a:focus-visible, .mypage button:focus-visible, .mypage [role="button"]:focus-visible, .mypage input:focus-visible, .mypage select:focus-visible, .mypage textarea:focus-visible, .mypage [tabindex]:focus-visible, .mypage summary:focus-visible { outline: 2px solid var(--contrast-base, #2563eb); outline-offset: 2px; border-radius: 2px; } .mypage hr.em-divider, .mypage .em-divider { display: block; border: 0; border-top: var(--divider-width, 1px) var(--divider-style, solid) var(--divider-color, color-mix(in srgb, currentColor 15%, transparent)); margin: var(--divider-my, 0) auto; width: var(--divider-w, 100%); max-width: var(--divider-max-w, var(--max-w, 1200px)); box-sizing: border-box; opacity: 1; } :root { --text-body: var(--text-dark); --text-muted: var(--text-muted-on-light, var(--text-dark)); --bg-white: var(--color-bg); --bg-light: var(--shade-light-base); --bg-dark: var(--shade-dark-base); --accent-base: var(--contrast-base); --accent-dark: var(--contrast-dark); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: 5rem; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; } .mypage .eyebrow { font-family: var(--eyebrow-font-family); font-size: var(--eyebrow-font-size); font-weight: var(--eyebrow-font-weight); line-height: var(--eyebrow-font-lineheight); text-transform: var(--eyebrow-text-transform); letter-spacing: var(--eyebrow-letter-spacing); color: var(--eyebrow-font-color); } .mypage .footer-title { font-family: var(--copytext-font); font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.75rem; text-align: left; } .mypage .h1sub { font-family: var(--h1sub-font-family); font-size: var(--h1sub-font-size); font-weight: var(--h1sub-font-weight); line-height: var(--h1sub-font-lineheight); text-transform: var(--h1sub-text-transform); letter-spacing: var(--h1sub-letter-spacing); color: var(--h1sub-font-color); opacity: var(--sub-font-opacity, 0.75); hyphens: auto; } .mypage .h2sub { font-family: var(--h2sub-font-family); font-size: var(--h2sub-font-size); font-weight: var(--h2sub-font-weight); line-height: var(--h2sub-font-lineheight); text-transform: var(--h2sub-text-transform); letter-spacing: var(--h2sub-letter-spacing); color: var(--h2sub-font-color); opacity: var(--sub-font-opacity, 0.75); hyphens: auto; } .mypage .h3sub { font-family: var(--h3sub-font-family); font-size: var(--h3sub-font-size); font-weight: var(--h3sub-font-weight); line-height: var(--h3sub-font-lineheight); text-transform: var(--h3sub-text-transform); letter-spacing: var(--h3sub-letter-spacing); color: var(--h3sub-font-color); opacity: var(--sub-font-opacity, 0.75); hyphens: auto; } .mypage .h4sub { font-family: var(--h4sub-font-family); font-size: var(--h4sub-font-size); font-weight: var(--h4sub-font-weight); line-height: var(--h4sub-font-lineheight); text-transform: var(--h4sub-text-transform); letter-spacing: var(--h4sub-letter-spacing); color: var(--h4sub-font-color); opacity: var(--sub-font-opacity, 0.75); hyphens: auto; } .mypage .subline { font-family: var(--sub-font-family); font-size: var(--sub-font-size); font-weight: var(--sub-font-weight); line-height: var(--sub-font-lineheight); text-transform: var(--sub-text-transform); letter-spacing: var(--sub-letter-spacing); color: var(--sub-font-color); } .mypage .lead { font-size: var(--h2sub-font-size); line-height: var(--h2sub-font-lineheight); font-weight: var(--h2sub-font-weight); color: var(--h2sub-font-color); } .mypage .sc-dark { background-color: var(--shade-dark-base); color: var(--on-surface-text, var(--text-light)); } .mypage .sc-light { background: linear-gradient( 180deg, var(--band-bg-top) 0%, var(--band-bg-mid) 45%, var(--band-bg-bot) 100% ); color: var(--on-surface-text, var(--text-dark)); } .mypage .sc-pri { background-color: var(--primary-base); color: var(--on-surface-text, var(--on-primary-text, #fff)); } .mypage .sc-pri-l { background-color: var(--primary-light); color: var(--on-surface-text, var(--text-dark)); } .mypage .sc-sec { background-color: var(--secondary-base); color: var(--on-surface-text, var(--on-secondary-text, #fff)); } .mypage .sc-acc { color: var(--on-surface-text, var(--on-accent-text, #111827)); } .mypage .sc-dark, .mypage .sc-sec, .mypage .sc-pri-d, .mypage .sc-sec-d, .mypage .sc-acc-d, .mypage .sc-black { --link-underline-color: var(--contrast-light); --link-hover-color: var(--text-light); --eyebrow-font-color: var(--accent-on-dark, var(--primary-light)); } .mypage .sc-pri, .mypage .sc-acc { --link-underline-color: rgba(255,255,255,0.5); --link-hover-color: var(--text-light); --eyebrow-font-color: var(--on-primary-text, #fff); } .mypage .sc-dark .molecule .stat-value, .mypage .sc-pri .molecule .stat-value, .mypage .sc-sec .molecule .stat-value, .mypage .sc-acc .molecule .stat-value, .mypage .sc-pri-d .molecule .stat-value, .mypage .sc-sec-d .molecule .stat-value, .mypage .sc-acc-d .molecule .stat-value, .mypage .sc-black .molecule .stat-value { color: currentColor; } .mypage .sc-dark .molecule .stat-icon, .mypage .sc-sec .molecule .stat-icon, .mypage .sc-pri-d .molecule .stat-icon, .mypage .sc-sec-d .molecule .stat-icon, .mypage .sc-acc-d .molecule .stat-icon, .mypage .sc-black .molecule .stat-icon { color: var(--icon-color, var(--accent-on-dark, var(--primary-light, #fff))); fill: currentColor; } .mypage .sc-pri .molecule .stat-icon { color: var(--icon-color, var(--text-light, #fff)); fill: currentColor; } .mypage .sc-acc .molecule .stat-icon { color: var(--icon-color, var(--on-accent-text, #111827)); fill: currentColor; } .mypage .sc-dark .molecule .benefit-icon, .mypage .sc-sec .molecule .benefit-icon, .mypage .sc-pri-d .molecule .benefit-icon, .mypage .sc-sec-d .molecule .benefit-icon, .mypage .sc-acc-d .molecule .benefit-icon, .mypage .sc-black .molecule .benefit-icon { color: var(--icon-color, var(--accent-on-dark, var(--primary-light, #fff))); fill: currentColor; } .mypage .sc-pri .molecule .benefit-icon { color: var(--icon-color, var(--text-light, #fff)); fill: currentColor; } .mypage .sc-acc .molecule .benefit-icon { color: var(--icon-color, var(--on-accent-text, #111827)); fill: currentColor; } .mypage .btn-wrap { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; background: var(--cta-color, var(--cta-bg-safe, var(--primary-base))); color: var(--cta-text, #fff); border-radius: var(--radius-md); font-weight: var(--btn-font-weight, 600); font-size: var(--bodytext-font-size); font-family: var(--copytext-font); text-decoration: none; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; margin: 0.25rem 0.375rem; border: none; } .mypage section[type='layer']:has(> button.btn-wrap), .mypage section[type='layer']:has(> a.btn-wrap), .mypage .btn-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; } .mypage section[type='layer'].col-12:has(> button.btn-wrap), .mypage section[type='layer'].col-12:has(> a.btn-wrap), .mypage .btn-row.col-12 { margin-top: var(--cta-gap, 2rem); } .mypage .btn-wrap:hover { background: var(--cta-dark, var(--primary-dark)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(4,56,115,0.3); } .mypage .sc-dark .btn-wrap, .mypage .sc-pri .btn-wrap, .mypage .sc-sec .btn-wrap, .mypage .sc-acc .btn-wrap, .mypage .sc-pri-d .btn-wrap, .mypage .sc-sec-d .btn-wrap, .mypage .sc-acc-d .btn-wrap { background: var(--cta-color, #fff); color: var(--cta-text, var(--cta-on-color, var(--primary-dark, #1a2f5e))); } .mypage .sc-dark .btn-wrap:hover, .mypage .sc-pri .btn-wrap:hover, .mypage .sc-sec .btn-wrap:hover, .mypage .sc-acc .btn-wrap:hover, .mypage .sc-pri-d .btn-wrap:hover, .mypage .sc-sec-d .btn-wrap:hover, .mypage .sc-acc-d .btn-wrap:hover { background: var(--cta-dark, var(--shade-light-base, #f5f5f0)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .mypage .btn-dark, .mypage .btn-wrap.btn-dark, .mypage .sc-dark .btn-wrap.btn-dark, .mypage .sc-pri .btn-wrap.btn-dark, .mypage .sc-sec .btn-wrap.btn-dark, .mypage .sc-acc .btn-wrap.btn-dark { background: var(--shade-dark-base) !important; color: var(--text-light) !important; } .mypage .btn-dark:hover, .mypage .btn-wrap.btn-dark:hover { background: color-mix(in srgb, var(--shade-dark-base) 88%, var(--text-light) 12%); } .mypage .btn-wrap.btn-outline { background: var(--cta-color, transparent); color: var(--cta-text, inherit); box-shadow: inset 0 0 0 1px var(--cta-color, currentColor); } .mypage .btn-wrap.btn-outline:hover { background: var(--cta-dark, color-mix(in srgb, currentColor 10%, transparent)); box-shadow: inset 0 0 0 1px var(--cta-color, currentColor); } .mypage [class*='logo-fit'] img, .mypage [class*='logo-fit'] picture { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; } .mypage .head-logo { display: flex; align-items: center; --head-logo-h: 40px; } .mypage .head-logo.logo-xs { --head-logo-h: 24px; } .mypage .head-logo.logo-s { --head-logo-h: 32px; } .mypage .head-logo.logo-m { --head-logo-h: 40px; } .mypage .head-logo.logo-l { --head-logo-h: 56px; } .mypage .head-logo.logo-xl { --head-logo-h: 72px; } .mypage section[type='layer'].head-logo { width: fit-content; max-width: 100%; } .mypage .head-logo img, .mypage .head-logo picture, .mypage .head-logo picture img { display: block; height: var(--head-logo-h); width: auto; max-width: 100%; object-fit: contain; object-position: left center; } .mypage .head-align-left, .mypage .head-align-center, .mypage .head-align-right, .mypage section[type='layer'].head-align-left, .mypage section[type='layer'].head-align-center, .mypage section[type='layer'].head-align-right { display: flex; flex-direction: column; justify-content: center; } .mypage .head-align-left { align-items: flex-start; text-align: left; } .mypage .head-align-center { align-items: center; text-align: center; } .mypage .head-align-right { align-items: flex-end; text-align: right; } .mypage .hcln-brand p { margin: 0; } .mypage .head_brand_tagline_cta .htc-cta-row .btn-wrap { padding: 0.3rem 0.8rem; margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.5rem; white-space: nowrap; transition: background 150ms ease, transform 80ms ease; } .mypage section[type='layer'][class*='foot_'] .btn-wrap, .mypage [class*='foot_'] .btn-wrap { padding: 0.35rem 0.85rem; margin: 0.35rem 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; border-radius: 0.5rem; line-height: 1.3; } .mypage section[type="layer"].head-overlay-active { position: absolute; top: 0; left: 0; right: 0; z-index: 100; } .mypage section[type="layer"].head-overlay-active.head-overlay-scrim { background: transparent; color: var(--text-light); } .mypage section[type="layer"].head-overlay-active.head-overlay-scrim .em-nav a, .mypage section[type="layer"].head-overlay-active.head-overlay-scrim .head-nav-slot a { color: var(--menu-link-color, var(--text-light)); } .mypage section[type="layer"].head-overlay-active.head-overlay-scrim::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160%; pointer-events: none; z-index: -1; background: linear-gradient( to bottom, color-mix(in srgb, var(--shade-dark-base) 38%, transparent), transparent ); } .mypage section[type="layer"].head-overlay-active.head-sticky { position: fixed; } .mypage section[type="layer"].head-overlay-active.head-sticky.scrolled { background: var(--shade-light-base); color: var(--text-dark); box-shadow: 0 2px 12px color-mix(in srgb, var(--shade-dark-base) 12%, transparent); } .mypage section[type="layer"].head-overlay-active.head-sticky.scrolled::before { display: none; } .mypage section[type="layer"].head-overlay-active.head-sticky.scrolled .em-nav a, .mypage section[type="layer"].head-overlay-active.head-sticky.scrolled .head-nav-slot a { color: var(--menu-link-color, var(--text-dark)); } .mypage.layout-boxed section[type="layer"].head-overlay-active.head-sticky { max-width: var(--max-w); margin-inline: auto; } .mypage .hero-under-overlay { --header-clearance: 5rem; padding-top: var(--header-clearance); } .mypage .arrow-shape { --arrow-tip-depth: 12.5%; --arrow-tip-inset: 2.5%; --arrow-pad: 1.25rem 1.5rem; position: relative; padding: var(--arrow-pad); padding-right: calc(var(--arrow-tip-depth) + 1rem); clip-path: polygon( 0 0, calc(100% - var(--arrow-tip-depth)) 0, calc(100% - var(--arrow-tip-depth)) var(--arrow-tip-inset), 100% 50%, calc(100% - var(--arrow-tip-depth)) calc(100% - var(--arrow-tip-inset)), calc(100% - var(--arrow-tip-depth)) 100%, 0 100% ); } .mypage .arrow-shape.arrow-shape--chevron { padding-left: calc(var(--arrow-tip-depth) + 1rem); padding-right: calc(var(--arrow-tip-depth) + 1rem); clip-path: polygon( 0 0, calc(100% - var(--arrow-tip-depth)) 0, 100% 50%, calc(100% - var(--arrow-tip-depth)) 100%, 0 100%, var(--arrow-tip-depth) 50% ); } .mypage .arrow-shape.arrow-shape--chevron.arrow-shape--first { padding-left: 1.5rem; clip-path: polygon( 0 0, calc(100% - var(--arrow-tip-depth)) 0, 100% 50%, calc(100% - var(--arrow-tip-depth)) 100%, 0 100% ); } .mypage .arrow-shape.arrow-shape--chevron.arrow-shape--last { padding-right: 1.5rem; clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, var(--arrow-tip-depth) 50% ); } .mypage .arrow-shape.arrow-shape--left { padding-left: calc(var(--arrow-tip-depth) + 1rem); padding-right: 1.5rem; clip-path: polygon( var(--arrow-tip-depth) 0, 100% 0, 100% 100%, var(--arrow-tip-depth) 100%, var(--arrow-tip-depth) calc(100% - var(--arrow-tip-inset)), 0 50%, var(--arrow-tip-depth) var(--arrow-tip-inset) ); } .mypage .arrow-shape.arrow-shape--up { padding-top: calc(var(--arrow-tip-depth) + 0.75rem); padding-right: 1.5rem; clip-path: polygon( 0 var(--arrow-tip-depth), var(--arrow-tip-inset) var(--arrow-tip-depth), 50% 0, calc(100% - var(--arrow-tip-inset)) var(--arrow-tip-depth), 100% var(--arrow-tip-depth), 100% 100%, 0 100% ); } .mypage .arrow-shape.arrow-shape--down { padding-bottom: calc(var(--arrow-tip-depth) + 0.75rem); padding-right: 1.5rem; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--arrow-tip-depth)), calc(100% - var(--arrow-tip-inset)) calc(100% - var(--arrow-tip-depth)), 50% 100%, var(--arrow-tip-inset) calc(100% - var(--arrow-tip-depth)), 0 calc(100% - var(--arrow-tip-depth)) ); } .mypage .arrow-shape.arrow-shape:has(.tiptap-overlay), .mypage .arrow-shape.arrow-shape:has([data-tiptap-loading]) { clip-path: none; overflow: visible; z-index: 100; } .mypage [type="icontext"] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; } .mypage [type="icontext"]:has(> svg) { width: 100%; height: 100%; } .mypage [type="icontext"] > svg { display: block; width: 60%; height: 60%; } .mypage [type="icontext"]:not([data-tiptap-loading]) p { display: contents; } .mypage .social-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: color-mix(in srgb, var(--shade-dark-base) 8%, transparent); border-radius: 999px; font-size: 0.85rem; line-height: 1; text-decoration: none; color: inherit; transition: background 120ms ease, transform 120ms ease; } .mypage .social-pill:hover { background: color-mix(in srgb, var(--shade-dark-base) 18%, transparent); } .mypage .social-pill svg { flex-shrink: 0; width: 1.1em; height: 1.1em; } .mypage .social-pill.social-pill--icon-only { padding: 0.5rem; aspect-ratio: 1 / 1; justify-content: center; } .mypage .social-pill.social-pill--icon-only span { display: none; } .mypage .social-pill.social-pill--dark, .mypage .sc-dark .social-pill { background: color-mix(in srgb, var(--text-light) 10%, transparent); color: var(--text-light); } .mypage .social-pill.social-pill--dark:hover, .mypage .sc-dark .social-pill:hover { background: color-mix(in srgb, var(--text-light) 20%, transparent); } .mypage .molecule { transition: transform 0.2s ease; } .mypage .eb-header-block { text-align: center; margin-bottom: var(--space-lg); } .mypage .eb-header-block .eyebrow { margin-bottom: var(--space-sm); } .mypage .eb-header-block .h3 { max-width: 700px; margin-left: auto; margin-right: auto; } .mypage section[type='layer'].col-12:where(:not(.grid-cell):not([class*='flow-'])):has( > section[type='layer'].col-1, > div[type='rich'].col-1, > section[type='layer'].col-2, > div[type='rich'].col-2, > section[type='layer'].col-3, > div[type='rich'].col-3, > section[type='layer'].col-4, > div[type='rich'].col-4, > section[type='layer'].col-5, > div[type='rich'].col-5, > section[type='layer'].col-6, > div[type='rich'].col-6, > section[type='layer'].col-7, > div[type='rich'].col-7, > section[type='layer'].col-8, > div[type='rich'].col-8, > section[type='layer'].col-9, > div[type='rich'].col-9, > section[type='layer'].col-10, > div[type='rich'].col-10, > section[type='layer'].col-11, > div[type='rich'].col-11 ) { display: flex !important; flex-wrap: wrap; } .mypage section[type='layer'].col-12:where(:not(.grid-cell)):has( > section[type='layer']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11) ~ section[type='layer']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11), > div[type='rich']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11) ~ div[type='rich']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11), > section[type='layer']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11) ~ div[type='rich']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11), > div[type='rich']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11) ~ section[type='layer']:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11) ) { align-items: stretch; } .mypage section[type='layer'].col-12 > section[type='layer'].col-1, .mypage section[type='layer'].col-12 > div[type='rich'].col-1 { width: calc( 8.333% - var(--grid-gap,0px) * 11/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-2, .mypage section[type='layer'].col-12 > div[type='rich'].col-2 { width: calc(16.666% - var(--grid-gap,0px) * 10/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-3, .mypage section[type='layer'].col-12 > div[type='rich'].col-3 { width: calc(25.000% - var(--grid-gap,0px) * 9/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-4, .mypage section[type='layer'].col-12 > div[type='rich'].col-4 { width: calc(33.333% - var(--grid-gap,0px) * 8/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-5, .mypage section[type='layer'].col-12 > div[type='rich'].col-5 { width: calc(41.666% - var(--grid-gap,0px) * 7/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-6, .mypage section[type='layer'].col-12 > div[type='rich'].col-6 { width: calc(50.000% - var(--grid-gap,0px) * 6/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-7, .mypage section[type='layer'].col-12 > div[type='rich'].col-7 { width: calc(58.333% - var(--grid-gap,0px) * 5/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-8, .mypage section[type='layer'].col-12 > div[type='rich'].col-8 { width: calc(66.666% - var(--grid-gap,0px) * 4/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-9, .mypage section[type='layer'].col-12 > div[type='rich'].col-9 { width: calc(75.000% - var(--grid-gap,0px) * 3/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-10, .mypage section[type='layer'].col-12 > div[type='rich'].col-10 { width: calc(83.333% - var(--grid-gap,0px) * 2/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-11, .mypage section[type='layer'].col-12 > div[type='rich'].col-11 { width: 91.666%; } .mypage section[type='layer'].col-12:has(> section[type='layer'].col-1, > div[type='rich'].col-1 ) > section[type='layer'].col-1:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-2, > div[type='rich'].col-2 ) > section[type='layer'].col-2:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-3, > div[type='rich'].col-3 ) > section[type='layer'].col-3:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-4, > div[type='rich'].col-4 ) > section[type='layer'].col-4:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-5, > div[type='rich'].col-5 ) > section[type='layer'].col-5:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-6, > div[type='rich'].col-6 ) > section[type='layer'].col-6:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-7, > div[type='rich'].col-7 ) > section[type='layer'].col-7:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-8, > div[type='rich'].col-8 ) > section[type='layer'].col-8:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-9, > div[type='rich'].col-9 ) > section[type='layer'].col-9:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-10, > div[type='rich'].col-10) > section[type='layer'].col-10:where(:not(.grid-cell)), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-11, > div[type='rich'].col-11) > section[type='layer'].col-11:where(:not(.grid-cell)) { display: flex !important; flex-direction: column; } .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) > section[type='layer'] > .molecule { flex: 1; display: flex !important; flex-direction: column; } .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) > section[type='layer'] > .molecule.header-nav, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) > section[type='layer'] > .molecule.social-strip, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) > section[type='layer'] > .molecule.benefit-item--icon-left, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) > section[type='layer'] > .molecule.notice-banner { flex-direction: row; } .mypage .molecule > section[type='layer'] { display: block; } .mypage section[type='layer'].col-12:where(:not([class*='flow-'])):has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ) { display: grid !important; grid-template-columns: repeat(12, 1fr); align-items: stretch; } .mypage section[type='layer'].col-12:where(:not([class*='flow-'])):has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ) > section[type='layer'][class*='col-'] { width: auto !important; } .mypage section[type='layer'].col-12 > section[type='layer'].col-1 { grid-column: span 1; } .mypage section[type='layer'].col-12 > section[type='layer'].col-2 { grid-column: span 2; } .mypage section[type='layer'].col-12 > section[type='layer'].col-3 { grid-column: span 3; } .mypage section[type='layer'].col-12 > section[type='layer'].col-4 { grid-column: span 4; } .mypage section[type='layer'].col-12 > section[type='layer'].col-5 { grid-column: span 5; } .mypage section[type='layer'].col-12 > section[type='layer'].col-6 { grid-column: span 6; } .mypage section[type='layer'].col-12 > section[type='layer'].col-7 { grid-column: span 7; } .mypage section[type='layer'].col-12 > section[type='layer'].col-8 { grid-column: span 8; } .mypage section[type='layer'].col-12 > section[type='layer'].col-9 { grid-column: span 9; } .mypage section[type='layer'].col-12 > section[type='layer'].col-10 { grid-column: span 10; } .mypage section[type='layer'].col-12 > section[type='layer'].col-11 { grid-column: span 11; } .mypage section[type='layer'].col-12 > section[type='layer'].col-12 { grid-column: span 12; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-4:nth-child(1) { grid-column: 3 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-4:nth-child(2) { grid-column: 7 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-4:nth-child(1) { grid-column: 1 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-4:nth-child(2) { grid-column: 5 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-4:nth-child(1) { grid-column: 5 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-4 ~ :is(section[type='layer'],div[type='rich']).col-4):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-4:nth-child(2) { grid-column: 9 / span 4; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 4 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 7 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 1 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 4 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 7 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 10 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 2 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 5 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])):not(.justify-start):not(.justify-end) > :is(section[type='layer'],div[type='rich']).col-3:nth-child(3) { grid-column: 8 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 1 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 4 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-start > :is(section[type='layer'],div[type='rich']).col-3:nth-child(3) { grid-column: 7 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-3:nth-child(1) { grid-column: 4 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-3:nth-child(2) { grid-column: 7 / span 3; } .mypage section[type='layer'].col-12:has(> :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3 ~ :is(section[type='layer'],div[type='rich']).col-3):not(:has(> :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'] ~ :is(section[type='layer'],div[type='rich'])[class*='col-'])).justify-end > :is(section[type='layer'],div[type='rich']).col-3:nth-child(3) { grid-column: 10 / span 3; } .mypage section[type='layer'].col-12:has(> section[type='layer'].col-1.card):not(:has(> section[type='layer'].col-1.card ~ section[type='layer'].col-1.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-1.molecule):not(:has(> section[type='layer'].col-1.molecule ~ section[type='layer'].col-1.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-2.card):not(:has(> section[type='layer'].col-2.card ~ section[type='layer'].col-2.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-2.molecule):not(:has(> section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-3.card):not(:has(> section[type='layer'].col-3.card ~ section[type='layer'].col-3.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-3.molecule):not(:has(> section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-4.card):not(:has(> section[type='layer'].col-4.card ~ section[type='layer'].col-4.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-4.molecule):not(:has(> section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-5.card):not(:has(> section[type='layer'].col-5.card ~ section[type='layer'].col-5.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-5.molecule):not(:has(> section[type='layer'].col-5.molecule ~ section[type='layer'].col-5.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-6.card):not(:has(> section[type='layer'].col-6.card ~ section[type='layer'].col-6.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-6.molecule):not(:has(> section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-7.card):not(:has(> section[type='layer'].col-7.card ~ section[type='layer'].col-7.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-7.molecule):not(:has(> section[type='layer'].col-7.molecule ~ section[type='layer'].col-7.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-8.card):not(:has(> section[type='layer'].col-8.card ~ section[type='layer'].col-8.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-8.molecule):not(:has(> section[type='layer'].col-8.molecule ~ section[type='layer'].col-8.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-9.card):not(:has(> section[type='layer'].col-9.card ~ section[type='layer'].col-9.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-9.molecule):not(:has(> section[type='layer'].col-9.molecule ~ section[type='layer'].col-9.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-10.card):not(:has(> section[type='layer'].col-10.card ~ section[type='layer'].col-10.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-10.molecule):not(:has(> section[type='layer'].col-10.molecule ~ section[type='layer'].col-10.molecule)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-11.card):not(:has(> section[type='layer'].col-11.card ~ section[type='layer'].col-11.card)):not(.justify-start):not(.justify-end), .mypage section[type='layer'].col-12:has(> section[type='layer'].col-11.molecule):not(:has(> section[type='layer'].col-11.molecule ~ section[type='layer'].col-11.molecule)):not(.justify-start):not(.justify-end) { justify-content: center; } .mypage .max-w:not([class*='gap-']) > section[type='layer'][class*='col-']:not(.col-12), .mypage .max-w:not([class*='gap-']) > div[type='rich'][class*='col-']:not(.col-12), .mypage .max-w > section[type='layer'].col-12:not([class*='gap-']) > section[type='layer'][class*='col-']:not(.col-12), .mypage .max-w > section[type='layer'].col-12:not([class*='gap-']) > div[type='rich'][class*='col-']:not(.col-12) { padding-left: 1rem; padding-right: 1rem; } .mypage section[type='layer'].max-w[class*='gap-'] { padding-left: 1rem; padding-right: 1rem; } .mypage .molecule > section[type='layer'].quote-author, .mypage .molecule > section[type='layer'].footer-copyright, .mypage .molecule > section[type='layer'].profile-links { margin-top: auto; } .mypage .eb-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: stretch; } .mypage .eb-row > .eb-col { flex: 1; min-width: 0; } @media (max-width: 768px) { .mypage .eb-row { flex-direction: column; } .mypage .eb-row > .eb-col { width: 100%; flex: none; } } .mypage section[type='layer'].max-w, .mypage section[type='teaser'].max-w, .mypage section[type='slider'].max-w, .mypage section[type='squeeze'].max-w, .mypage .max-w { display: block; } .mypage img { max-width: 100%; height: auto; } .mypage picture[type='picture'] > video { max-width: 100%; height: auto; display: block; } .mypage .icon { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -0.15em; fill: var(--icon-color, var(--accent-on-light, var(--primary-base))); color: var(--icon-color, var(--accent-on-light, var(--primary-base))); flex-shrink: 0; } .mypage .sc-dark .icon, .mypage .sc-sec .icon, .mypage .sc-pri-d .icon, .mypage .sc-sec-d .icon, .mypage .sc-acc-d .icon, .mypage .sc-black .icon { fill: var(--icon-color, var(--accent-on-dark, var(--primary-light))); color: var(--icon-color, var(--accent-on-dark, var(--primary-light))); } .mypage .sc-pri .icon { fill: var(--icon-color, var(--on-primary-text, #fff)); color: var(--icon-color, var(--on-primary-text, #fff)); } .mypage .sc-acc .icon { fill: var(--icon-color, var(--on-accent-text, #111827)); color: var(--icon-color, var(--on-accent-text, #111827)); } .mypage .btn-wrap .icon, .mypage a .icon, .mypage .btn-wrap svg, .mypage a.btn-wrap svg, .mypage button.btn-wrap svg { fill: currentColor; color: inherit; } .mypage .btn-wrap svg path, .mypage a.btn-wrap svg path, .mypage button.btn-wrap svg path { fill: currentColor; } .mypage .icon.xs { width: 0.875rem; height: 0.875rem; } .mypage .icon.sm { width: 1rem; height: 1rem; } .mypage .icon.md { width: 1.5rem; height: 1.5rem; } .mypage .icon.lg { width: 2rem; height: 2rem; } .mypage .icon.xl { width: 3rem; height: 3rem; } .mypage .icon.xxl { width: 4rem; height: 4rem; } .mypage .icon.themed * { fill: currentColor; } .mypage .em-nav { display: flex; align-items: center; gap: 1.5rem; font-family: var(--font-family); font-size: var(--font-small, 0.875rem); font-weight: 500; } .mypage .em-nav a { color: inherit; text-decoration: none; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; } .mypage .em-nav a:hover, .mypage .em-nav a.active { border-bottom-color: var(--accent-on-light, var(--primary-base)); color: var(--accent-on-light, var(--primary-base)); } .mypage .em-nav .nav-item { position: relative; } .mypage .em-nav .nav-sub { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-white, #fff); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: var(--radius-md); padding: 0.5rem 0; min-width: 180px; z-index: 100; flex-direction: column; } .mypage .em-nav .nav-item:hover > .nav-sub { display: flex; } .mypage .em-nav .nav-sub a { padding: 0.5rem 1.25rem; border-bottom: none; } .mypage .em-nav .nav-sub a:hover { background: var(--bg-light, #f7f9fc); } .mypage .em-nav-header { padding: 1rem 2rem; justify-content: center; } .mypage .em-nav-footer { padding: 1.5rem 2rem; justify-content: center; opacity: 0.7; font-size: 0.8125rem; } .mypage .em-nav-sidebar { flex-direction: column; align-items: flex-start; padding: 1rem 0; gap: 0.25rem; } .mypage .em-nav-sidebar a { padding: 0.4rem 1rem; border-bottom: none; border-left: 2px solid transparent; width: 100%; } .mypage .em-nav-sidebar a:hover, .mypage .em-nav-sidebar a.active { border-left-color: var(--primary-base); border-bottom: none; background: var(--bg-light, #f7f9fc); } @media (max-width: 768px) { .mypage .em-nav { flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .mypage .em-nav-header { padding: 0.75rem 1rem; } } @media (min-width: 641px) and (max-width: 1023px) { .mypage section[type='layer'].col-12 > section[type='layer'].col-1, .mypage section[type='layer'].col-12 > div[type='rich'].col-1 { width: calc(16.666% - var(--grid-gap,0px) * 10/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-2, .mypage section[type='layer'].col-12 > div[type='rich'].col-2 { width: calc(25.000% - var(--grid-gap,0px) * 9/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-3, .mypage section[type='layer'].col-12 > div[type='rich'].col-3 { width: calc(50.000% - var(--grid-gap,0px) * 6/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-4, .mypage section[type='layer'].col-12 > div[type='rich'].col-4 { width: calc(50.000% - var(--grid-gap,0px) * 6/12); } .mypage section[type='layer'].col-12 > section[type='layer'].col-5, .mypage section[type='layer'].col-12 > div[type='rich'].col-5 { width: calc(50.000% - var(--grid-gap,0px) * 6/12); } .mypage section[type='layer'].col-12:has(> section[type='layer'].col-8, > div[type='rich'].col-8) > section[type='layer'].col-4, .mypage section[type='layer'].col-12:has(> section[type='layer'].col-8, > div[type='rich'].col-8) > div[type='rich'].col-4 { width: calc(33.333% - var(--grid-gap,0px) * 8/12) !important; } .mypage section[type='layer'].col-12:has(> section[type='layer'].col-7, > div[type='rich'].col-7) > section[type='layer'].col-5, .mypage section[type='layer'].col-12:has(> section[type='layer'].col-7, > div[type='rich'].col-7) > div[type='rich'].col-5 { width: calc(41.666% - var(--grid-gap,0px) * 7/12) !important; } .mypage section[type='layer'].col-12:has(> section[type='layer'].col-9, > div[type='rich'].col-9) > section[type='layer'].col-3, .mypage section[type='layer'].col-12:has(> section[type='layer'].col-9, > div[type='rich'].col-9) > div[type='rich'].col-3 { width: calc(25.000% - var(--grid-gap,0px) * 9/12) !important; } .mypage { --type-scale: 1.15; } } @media (max-width: 640px) { .mypage section[type='layer'].col-12:has( > section[type='layer'].col-1, > section[type='layer'].col-2, > section[type='layer'].col-3, > section[type='layer'].col-4, > section[type='layer'].col-5, > section[type='layer'].col-6, > section[type='layer'].col-7, > section[type='layer'].col-8, > section[type='layer'].col-9, > section[type='layer'].col-10, > section[type='layer'].col-11 ) { flex-direction: column; } .mypage section[type='layer'].col-12 > section[type='layer'].col-1, .mypage section[type='layer'].col-12 > div[type='rich'].col-1, .mypage section[type='layer'].col-12 > section[type='layer'].col-2, .mypage section[type='layer'].col-12 > div[type='rich'].col-2, .mypage section[type='layer'].col-12 > section[type='layer'].col-3, .mypage section[type='layer'].col-12 > div[type='rich'].col-3, .mypage section[type='layer'].col-12 > section[type='layer'].col-4, .mypage section[type='layer'].col-12 > div[type='rich'].col-4, .mypage section[type='layer'].col-12 > section[type='layer'].col-5, .mypage section[type='layer'].col-12 > div[type='rich'].col-5, .mypage section[type='layer'].col-12 > section[type='layer'].col-6, .mypage section[type='layer'].col-12 > div[type='rich'].col-6, .mypage section[type='layer'].col-12 > section[type='layer'].col-7, .mypage section[type='layer'].col-12 > div[type='rich'].col-7, .mypage section[type='layer'].col-12 > section[type='layer'].col-8, .mypage section[type='layer'].col-12 > div[type='rich'].col-8, .mypage section[type='layer'].col-12 > section[type='layer'].col-9, .mypage section[type='layer'].col-12 > div[type='rich'].col-9, .mypage section[type='layer'].col-12 > section[type='layer'].col-10, .mypage section[type='layer'].col-12 > div[type='rich'].col-10, .mypage section[type='layer'].col-12 > section[type='layer'].col-11, .mypage section[type='layer'].col-12 > div[type='rich'].col-11 { width: 100%; } .pt-3 { padding-top: calc(2 * var(--paddingT)) !important; } .pb-3 { padding-bottom: calc(2 * var(--paddingB)) !important; } .pl-3 { padding-left: calc(1.5 * var(--paddingL)) !important; } .pr-3 { padding-right: calc(1.5 * var(--paddingR)) !important; } .mypage { --type-scale: 1.1; } .mypage .max-w { padding-left: 1rem; padding-right: 1rem; } .mypage .btn-wrap { padding: 0.75rem 1.25rem; font-size: 0.9375rem; } .mypage .btn-wrap p, .mypage .btn-wrap span, .mypage .btn-wrap div { padding: 0.75rem 1.25rem; font-size: 0.9375rem; } } .mypage section[type="layer"] { position: relative; } .mypage.layout-boxed section[type="layer"].editor-root { position: static; } @media (min-width: 1024px) { .dt-pos-rel { position: relative; } .dt-pos-abs { position: absolute; } .dt-z-back { z-index: 0; } .dt-z-mid { z-index: 1; } .dt-z-front { z-index: 2; } .dt-inset-tl { top: 0; left: 0; } .dt-inset-tr { top: 0; right: 0; } .dt-inset-bl { bottom: 0; left: 0; } .dt-inset-br { bottom: 0; right: 0; } .dt-inset-t { top: 0; left: 50%; transform: translateX(-50%); } .dt-inset-b { bottom: 0; left: 50%; transform: translateX(-50%); } .dt-inset-l { left: 0; top: 50%; transform: translateY(-50%); } .dt-inset-r { right: 0; top: 50%; transform: translateY(-50%); } .dt-inset-center { top: 50%; left: 50%; transform: translate(-50%,-50%); } .dt-inset-fill { top: 0; right: 0; bottom: 0; left: 0; } .dt-mt-neg-1 { margin-top: -1rem; } .dt-mt-neg-2 { margin-top: -2rem; } .dt-mt-neg-3 { margin-top: -3rem; } .dt-mt-neg-4 { margin-top: -4rem; } .dt-mb-neg-1 { margin-bottom: -1rem; } .dt-mb-neg-2 { margin-bottom: -2rem; } .dt-mb-neg-3 { margin-bottom: -3rem; } .dt-ml-neg-1 { margin-left: -1rem; } .dt-ml-neg-2 { margin-left: -2rem; } .dt-ml-neg-3 { margin-left: -3rem; } .dt-mr-neg-1 { margin-right: -1rem; } .dt-mr-neg-2 { margin-right: -2rem; } .dt-mr-neg-3 { margin-right: -3rem; } .dt-bleed-l { margin-left: calc(50% - 50vw); } .dt-bleed-r { margin-right: calc(50% - 50vw); } .dt-bleed-x { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .dt-rotate-1 { transform: rotate( 1deg); } .dt-rotate-2 { transform: rotate( 2deg); } .dt-rotate-3 { transform: rotate( 3deg); } .dt-rotate-n1 { transform: rotate(-1deg); } .dt-rotate-n2 { transform: rotate(-2deg); } .dt-rotate-n3 { transform: rotate(-3deg); } } @media (max-width: 1023px) { [class*="dt-pos-"] { position: static !important; } [class*="dt-inset-"] { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } [class*="dt-mt-neg-"], [class*="dt-mb-neg-"], [class*="dt-ml-neg-"], [class*="dt-mr-neg-"] { margin: 0 !important; } .dt-bleed-l, .dt-bleed-r, .dt-bleed-x { margin-left: 0 !important; margin-right: 0 !important; } [class*="dt-rotate-"] { transform: none !important; } } .card { --card-surface: #ffffff; --card-on-head: var(--on-raised-head, var(--text-dark)); --card-on-text: var(--on-raised-text, var(--text-dark)); --card-on-muted: var(--on-raised-muted, var(--text-muted-on-light, var(--text-dark))); background: var(--card-surface); color: var(--card-on-text); border: none; --text-muted: var(--card-on-muted); --headline-font-color: currentColor; --h1-font-color: currentColor; --h2-font-color: currentColor; --h3-font-color: currentColor; --h4-font-color: currentColor; --h5-font-color: currentColor; --h6-font-color: currentColor; --sub-font-color: var(--text-muted); --h1sub-font-color: var(--text-muted); --h2sub-font-color: var(--text-muted); --h3sub-font-color: var(--text-muted); --h4sub-font-color: var(--text-muted); --sc-light: currentColor; --sc-dark: currentColor; border-radius: 8px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px rgba(26,47,63,0.06); display: flex; flex-direction: column; flex: 1; } .mypage .card.col-1, .mypage .card.col-2, .mypage .card.col-3, .mypage .card.col-4, .mypage .card.col-5, .mypage .card.col-6, .mypage .card.col-7, .mypage .card.col-8, .mypage .card.col-9, .mypage .card.col-10, .mypage .card.col-11 { flex-grow: 0; flex-basis: auto; } .card-elev-sm { box-shadow: 0 1px 3px rgba(26,47,63,0.06), 0 1px 2px rgba(26,47,63,0.04); } .card-elev-md { box-shadow: 0 6px 18px rgba(26,47,63,0.10), 0 2px 6px rgba(26,47,63,0.06); } .card-elev-lg { box-shadow: 0 18px 38px rgba(26,47,63,0.18), 0 6px 12px rgba(26,47,63,0.10); } .card-elev-xl { box-shadow: 0 28px 60px rgba(26,47,63,0.22), 0 10px 20px rgba(26,47,63,0.12); } .card-border { border: 1px solid rgba(255,255,255,0.40); } .card-border-dark { border: 1px solid rgba(255,255,255,0.10); } .card-line { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); } .card-line-strong { border: 2px solid color-mix(in srgb, currentColor 30%, transparent); } .mypage .bleed-left, .mypage .bleed-right, .mypage .bleed-x, .mypage .overlap-left, .mypage .overlap-right, .mypage .overlap-top, .mypage .overlap-bottom { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; width: auto; max-width: 100%; } @media (min-width: 768px) { .mypage .bleed-left { margin-left: -3rem; } .mypage .bleed-right { margin-right: -3rem; } .mypage .bleed-x { margin-left: -3rem; margin-right: -3rem; width: calc(100% + 6rem); max-width: none; } .mypage .bleed-sm.bleed-left { margin-left: -1.5rem; } .mypage .bleed-sm.bleed-right { margin-right: -1.5rem; } .mypage .bleed-sm.bleed-x { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); max-width: none; } .mypage .bleed-lg.bleed-left { margin-left: -4.5rem; } .mypage .bleed-lg.bleed-right { margin-right: -4.5rem; } .mypage .bleed-lg.bleed-x { margin-left: -4.5rem; margin-right: -4.5rem; width: calc(100% + 9rem); max-width: none; } .mypage section[type='layer'].max-w:has(> .overlap-left), .mypage section[type='layer'].max-w:has(> .overlap-right) { align-items: center; } .mypage .overlap-left, .mypage .card.overlap-left { margin-left: -3.5rem; position: relative; z-index: 2; align-self: center; } .mypage .overlap-right, .mypage .card.overlap-right { margin-right: -3.5rem; position: relative; z-index: 2; align-self: center; } .mypage .overlap-top, .mypage .card.overlap-top { margin-top: -3.5rem; position: relative; z-index: 2; } .mypage .overlap-bottom, .mypage .card.overlap-bottom { margin-bottom: -4rem; position: relative; z-index: 2; } .mypage .overlap-sm.overlap-left { margin-left: -2rem; } .mypage .overlap-sm.overlap-right { margin-right: -2rem; } .mypage .overlap-sm.overlap-top { margin-top: -2rem; } .mypage .overlap-sm.overlap-bottom { margin-bottom: -2rem; } .mypage .overlap-lg.overlap-left { margin-left: -5rem; } .mypage .overlap-lg.overlap-right { margin-right: -5rem; } .mypage .overlap-lg.overlap-top { margin-top: -5rem; } .mypage .overlap-grid-left, .mypage .overlap-grid-right { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; align-items: center; gap: 0 !important; } .mypage .overlap-grid-left > *:nth-child(1) { grid-column: 1 / 7 !important; grid-row: 1; z-index: 2; width: 100% !important; max-width: none !important; margin: 0 !important; } .mypage .overlap-grid-left > *:nth-child(2) { grid-column: 5 / 13 !important; grid-row: 1; z-index: 1; width: 100% !important; max-width: none !important; margin: 0 !important; } .mypage .overlap-grid-right > *:nth-child(1) { grid-column: 1 / 9 !important; grid-row: 1; z-index: 1; width: 100% !important; max-width: none !important; margin: 0 !important; } .mypage .overlap-grid-right > *:nth-child(2) { grid-column: 7 / 13 !important; grid-row: 1; z-index: 2; width: 100% !important; max-width: none !important; margin: 0 !important; } } .mypage .card.card-weich { border-radius: 24px; } .mypage .card.card-pille-oben { border-radius: 40px 40px 12px 12px; } .mypage .card.card-ein-eck { border-radius: 0 40px 0 0; } .mypage .card.card-diagonal { border-radius: 40px 0 40px 0; } .mypage .card.card-blatt { border-radius: 0 48px 0 48px; } .mypage .card.card-squircle { border-radius: 22% / 22%; } .mypage .card.card-kiesel { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .mypage .card.card-blob-1 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } .mypage .card.card-blob-2 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } .mypage .card.card-cut-1-ecke { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); filter: drop-shadow(0px 8px 16px rgba(26,47,63,0.12)); } .mypage .card.card-cut-2-ecken { clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); filter: drop-shadow(0px 8px 16px rgba(26,47,63,0.12)); } .mypage .card.card-cyber { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); filter: drop-shadow(0px 8px 16px rgba(26,47,63,0.12)); } .mypage .card.card-hover-lift { transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease; } .mypage .card.card-hover-lift:hover { transform: translateY(-6px); } .mypage .card.card-hover-lift.card-cut-1-ecke:hover, .mypage .card.card-hover-lift.card-cut-2-ecken:hover, .mypage .card.card-hover-lift.card-cyber:hover { filter: drop-shadow(0px 16px 24px rgba(26,47,63,0.20)); } @media (prefers-reduced-motion: reduce) { .mypage .card.card-hover-lift { transition: none; transform: none; } } .mypage .btn-wrap.btn-pill, .mypage button.btn-pill, .mypage a.btn-pill { border-radius: 9999px; } .mypage .btn-wrap.btn-squircle, .mypage button.btn-squircle, .mypage a.btn-squircle { border-radius: 14px; } .mypage .btn-wrap.btn-sharp, .mypage button.btn-sharp, .mypage a.btn-sharp { border-radius: 0px; } .mypage .btn-wrap.btn-cut, .mypage button.btn-cut, .mypage a.btn-cut { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } .mypage .btn-elev-0 { box-shadow: none; } .mypage .btn-elev-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); } .mypage .btn-elev-2 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.06); } .mypage .btn-elev-3 { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.14), 0 4px 6px -2px rgba(0,0,0,0.08); } .mypage .btn-wrap.btn-cut.btn-elev-0 { box-shadow: none; filter: none; } .mypage .btn-wrap.btn-cut.btn-elev-1 { box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12)); } .mypage .btn-wrap.btn-cut.btn-elev-2 { box-shadow: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.12)); } .mypage .btn-wrap.btn-cut.btn-elev-3 { box-shadow: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.14)); } .mypage .em-styled-element { border-radius: var(--em-radius, inherit); border-width: var(--em-border-w, 0px); border-color: var(--em-border-c, transparent); border-style: var(--em-border-s, solid); background-color: var(--em-surface, transparent); transition: transform 250ms ease, box-shadow 250ms ease, filter 250ms ease; } .mypage .em-styled-element:hover { transform: translateY(var(--em-hover-lift, 0px)); } @media (prefers-reduced-motion: reduce) { .mypage .em-styled-element:hover { transform: none; } } .mypage [style*="--em-overlap-x"] { margin-left: var(--em-overlap-x); z-index: 2; position: relative; } .mypage [style*="--em-offset-x"], .mypage [style*="--em-offset-y"] { transform: translate(var(--em-offset-x, 0px), var(--em-offset-y, 0px)); z-index: 2; position: relative; } @media (max-width: 1023.98px) { .mypage [style*="--em-overlap-x"], .mypage .overlap-left, .mypage .overlap-right { margin-left: 0px !important; margin-right: 0px !important; } .mypage [style*="--em-offset-x"], .mypage [style*="--em-offset-y"] { transform: none !important; } } .mypage, .mypage > section, .mypage > [data-role="section"] { overflow-x: clip; overflow-y: visible; } .mypage :has(> [style*="--em-overlap-x"]), .mypage :has(> [style*="--em-offset-x"]), .mypage :has(> [style*="--em-offset-y"]) { overflow: visible; } .mypage [class*='aspect-']:not(.card):not([class*='sc-']), .mypage .ie-img-host:not(.card):not([class*='sc-']), .mypage .card:has(> picture:only-child):not(:has(.article-card-body, .team-card-body, .card-body, p, h1, h2, h3, h4, h5, h6)):not([class*='sc-']), .mypage .card:has(> img:only-child):not(:has(.article-card-body, .team-card-body, .card-body, p, h1, h2, h3, h4, h5, h6)):not([class*='sc-']), .mypage section[type='layer']:has(> picture:only-child):not(.card):not([class*='sc-']):not(:has(.article-card-body, .team-card-body, .card-body, p, h1, h2, h3, h4, h5, h6)), .mypage section[type='layer']:has(> img:only-child):not(.card):not([class*='sc-']):not(:has(.article-card-body, .team-card-body, .card-body, p, h1, h2, h3, h4, h5, h6)) { background: transparent; } .mypage [class*='aspect-']:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle, .rounded-full)) > img:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']), .mypage [class*='aspect-']:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle, .rounded-full)) > picture:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']) > img:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']), .mypage .ie-img-host:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle, .rounded-full)) > img:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']), .mypage .ie-img-host:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle, .rounded-full)) > picture:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']) > img:not(.team-photo):not(.team-card-photo):not(.quote-avatar):not(.trust-avatar):not(.vsp-portrait):not([class*='avatar']):not([class*='portrait']):not(.img-circle):not(.rounded-full):not([class*='rounded-']) { border-radius: 0 !important; } .mypage .avatar, .mypage .trust-avatar, .mypage .quote-avatar { border-radius: 50% !important; overflow: hidden !important; aspect-ratio: 1 / 1; object-fit: cover; } .mypage [class*='aspect-']:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle)), .mypage section[type='layer']:has(> picture:only-child > img):not(.card), .mypage section[type='layer']:has(> img:only-child):not(.card), .mypage .ie-img-host:not(.img-circle):not(.card-circle):not(:has(.team-photo, .team-card-photo, .quote-avatar, .trust-avatar, .vsp-portrait, [class*='avatar'], [class*='portrait'], .img-circle)) { overflow: hidden; } .mark { background: linear-gradient(180deg, transparent 50%, var(--mark-bg, #fef08a) 50%); padding: 0 0.15em; border-radius: 2px; color: inherit; } .mark-pri { --mark-bg: rgba(74,158,255,0.30); } .mark-acc { --mark-bg: rgba(243,198,74,0.40); } .mark-warn { --mark-bg: rgba(255,107,107,0.30); } .mark--fill { background: var(--mark-bg, #fef08a); color: var(--mark-fg, #fff); padding: 0.08em 0.3em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .chip, .pill { display: inline-flex; width: fit-content; align-items: center; gap: 0.3em; padding: 0.2em 0.7em; border-radius: 999px; background: var(--em-surface-hover, #eef0f3); color: var(--em-navy, #1a2f3f); font-size: 0.92em; font-weight: 600; vertical-align: baseline; white-space: nowrap; line-height: 1.4; } .mypage .card .pill, .mypage .card .chip { display: inline-block; margin: 0 0.35rem 0.5rem 0; } .chip-pri, .pill-pri { background: var(--primary-base); color: var(--text-light); } .chip-pri-l, .pill-pri-l { background: var(--primary-light); color: var(--text-dark); } .chip-sec, .pill-sec { background: var(--secondary-base); color: var(--text-light); } .chip-sec-l, .pill-sec-l { background: var(--secondary-light); color: var(--text-dark); } .chip-acc, .pill-acc { background: var(--contrast-base); color: var(--text-dark); } .chip-acc-l, .pill-acc-l { background: var(--contrast-light); color: var(--text-dark); } .chip-dark, .pill-dark { background: var(--shade-dark-base); color: var(--text-light); } .chip-light, .pill-light { background: var(--shade-light-base);color: var(--text-dark); } .chip-outline, .pill-outline { background: transparent; border: 1px solid currentColor; } .mypage div[type='rich'].pill, .mypage div[type='rich'].chip { display: inline-flex; } .txt-pri, .txt-primary { color: var(--accent-on-light, var(--primary-base)); } .txt-pri-l, .txt-primary-l { color: var(--primary-light); } .txt-sec, .txt-secondary { color: var(--secondary-base); } .txt-sec-l, .txt-secondary-l{ color: var(--secondary-light); } .txt-acc, .txt-accent { color: var(--contrast-base); } .txt-acc-l, .txt-accent-l { color: var(--contrast-light); } .txt-light, .txt-on-dark { color: var(--text-light); } .txt-dark, .txt-on-light { color: var(--text-dark); } .bracket { position: relative; padding: 0 0.4em; } .bracket::before { content: "[ "; opacity: 0.5; } .bracket::after { content: " ]"; opacity: 0.5; } .deco-wordmark { font-family: var(--h1-font-family, inherit); font-weight: 900; font-size: clamp(8rem, 18vw, 22rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--deco-color, currentColor); opacity: 0.08; pointer-events: none; user-select: none; white-space: nowrap; } .deco-wordmark-soft { opacity: 0.05; } .deco-wordmark-bold { opacity: 0.14; } .font-script { font-family: 'Caveat', 'Dancing Script', 'Brush Script MT', cursive; font-style: normal; letter-spacing: 0.01em; } .font-smallcaps { font-variant: small-caps; letter-spacing: 0.08em; } .text-bleed { margin-left: -0.5rem; margin-right: -0.5rem; } section[type='image'][class*='rounded'] { overflow: hidden; } .img-overlay-tl, .img-overlay-tr, .img-overlay-bl, .img-overlay-br { position: absolute; z-index: 2; padding: 0.5rem 0.85rem; } .img-overlay-tl { top: 0.75rem; left: 0.75rem; } .img-overlay-tr { top: 0.75rem; right: 0.75rem; } .img-overlay-bl { bottom: 0.75rem; left: 0.75rem; } .img-overlay-br { bottom: 0.75rem; right: 0.75rem; } .img-overlay-pill { background: rgba(255,255,255,0.92); border-radius: 999px; padding: 0.35em 0.85em; font-size: 0.85rem; font-weight: 600; color: var(--em-navy, #1a2f3f); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .img-overlay-badge { background: var(--em-navy, #1a2f3f); color: #fff; border-radius: 8px; padding: 0.4em 0.7em; font-size: 0.85rem; font-weight: 700; } .img-overlay-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9); z-index: 1; } .img-overlay-play::after { content: ""; position: absolute; top: 50%; left: calc(50% + 2px); transform: translate(-50%,-50%); width: 0; height: 0; border-left: 14px solid var(--em-navy, #1a2f3f); border-top: 9px solid transparent; border-bottom: 9px solid transparent; z-index: 2; } @media (min-width: 1024px) { .edge-l, .edge-r { position: absolute; top: 0; bottom: 0; width: var(--edge-w, 60px); background: var(--edge-bg, var(--em-navy, #1a2f3f)); color: var(--edge-color, #fff); display: flex; flex-direction: column; align-items: center; padding: 1rem 0; z-index: 5; } .edge-l { left: 0; } .edge-r { right: 0; } } .float-card { background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem; box-shadow: 0 12px 32px rgba(26,47,63,0.18), 0 4px 10px rgba(26,47,63,0.08); transition: transform 0.2s, box-shadow 0.2s; } .float-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(26,47,63,0.22), 0 6px 14px rgba(26,47,63,0.12); } .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack img, .avatar-stack .avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background-size: cover; background-position: center; } .avatar-stack > :first-child { margin-left: 0; } @keyframes emFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes emFadeInBottom { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes emFadeInTop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } } @keyframes emFadeInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes emFadeInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes emSlideInBottom { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes emSlideInTop { from { transform: translateY(-60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes emSlideInLeft { from { transform: translateX(-60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes emSlideInRight { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes emZoomIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes emRotateIn { from { transform: rotate(-8deg) scale(0.95); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } } @keyframes emPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74,158,255,0.4); } 50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(74,158,255,0); } } @keyframes emFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes emBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } 60% { transform: translateY(-6px); } } @keyframes emShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @keyframes emTextFocus { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } } @keyframes emTrackingExpand { from { letter-spacing: -0.5em; opacity: 0; } to { letter-spacing: normal; opacity: 1; } } .anim-fade-in { animation: emFadeIn 600ms ease-out both; } .anim-fade-in-bottom { animation: emFadeInBottom 600ms cubic-bezier(.25,.46,.45,.94) both; } .anim-fade-in-top { animation: emFadeInTop 600ms cubic-bezier(.25,.46,.45,.94) both; } .anim-fade-in-left { animation: emFadeInLeft 600ms cubic-bezier(.25,.46,.45,.94) both; } .anim-fade-in-right { animation: emFadeInRight 600ms cubic-bezier(.25,.46,.45,.94) both; } .anim-slide-in-bottom{ animation: emSlideInBottom 700ms cubic-bezier(.215,.61,.355,1) both; } .anim-slide-in-top { animation: emSlideInTop 700ms cubic-bezier(.215,.61,.355,1) both; } .anim-slide-in-left { animation: emSlideInLeft 700ms cubic-bezier(.215,.61,.355,1) both; } .anim-slide-in-right { animation: emSlideInRight 700ms cubic-bezier(.215,.61,.355,1) both; } .anim-zoom-in { animation: emZoomIn 500ms cubic-bezier(.25,.46,.45,.94) both; } .anim-rotate-in { animation: emRotateIn 600ms ease-out both; } .anim-pulse { animation: emPulse 2.4s ease-in-out infinite; } .anim-float { animation: emFloat 3s ease-in-out infinite; } .anim-bounce { animation: emBounce 1.6s ease-in-out infinite; } .anim-text-focus { animation: emTextFocus 700ms cubic-bezier(.55,.085,.68,.53) both; } .anim-tracking-expand{ animation: emTrackingExpand 700ms cubic-bezier(.215,.61,.355,1) both; } .anim-delay-1 { animation-delay: 150ms; } .anim-delay-2 { animation-delay: 300ms; } .anim-delay-3 { animation-delay: 450ms; } .anim-delay-4 { animation-delay: 600ms; } .anim-delay-5 { animation-delay: 750ms; } .anim-delay-6 { animation-delay: 900ms; } .anim-duration-fast { animation-duration: 350ms; } .anim-duration-slow { animation-duration: 1000ms; } .anim-loop { animation-iteration-count: infinite; } .anim-once { animation-iteration-count: 1; } @media (prefers-reduced-motion: reduce) { [class*="anim-"] { animation: none !important; transition: none !important; } } @media (max-width: 1023px) { [class*="dt-anim-"] { animation: none !important; } } .dt-anim-fade-in { animation: emFadeIn 600ms ease-out both; } .dt-anim-fade-in-bottom { animation: emFadeInBottom 600ms cubic-bezier(.25,.46,.45,.94) both; } .dt-anim-slide-in-left { animation: emSlideInLeft 700ms cubic-bezier(.215,.61,.355,1) both; } .dt-anim-slide-in-right { animation: emSlideInRight 700ms cubic-bezier(.215,.61,.355,1) both; } .dt-anim-float { animation: emFloat 3s ease-in-out infinite; } .dt-anim-pulse { animation: emPulse 2.4s ease-in-out infinite; } .hover-lift, .hover-zoom, .hover-glow, .hover-brighten, .hover-rotate, .hover-shrink { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26,47,63,0.18); } .hover-zoom:hover { transform: scale(1.04); } .hover-shrink:hover { transform: scale(0.97); } .hover-glow:hover { box-shadow: 0 0 0 4px rgba(74,158,255,0.20), 0 8px 22px rgba(26,47,63,0.16); } .hover-brighten:hover { filter: brightness(1.08); } .hover-rotate:hover { transform: rotate(2deg); } @media (prefers-reduced-motion: reduce) { .hover-lift, .hover-zoom, .hover-glow, .hover-brighten, .hover-rotate, .hover-shrink { transition: none !important; } .hover-lift:hover, .hover-zoom:hover, .hover-shrink:hover, .hover-rotate:hover { transform: none !important; } } [type='carousel'] { position: relative; overflow: hidden; align-self: stretch; } [type='carousel'][data-nav='inline'] { overflow: visible; } [type='carousel'][data-nav='inline'] .cr-track-wrap { overflow: hidden; } [type='carousel'][data-nav='inline'] .cr-nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 0 0; } [type='carousel'][data-nav='inline'] .cr-prev, [type='carousel'][data-nav='inline'] .cr-next { position: static; transform: none; top: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } [type='carousel'][data-nav='inline'] .cr-dots { margin: 0; padding: 0; } [type='carousel'][data-peek='true'] { overflow: visible; padding: 0 2rem; } .cr-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .cr-slide { flex: 0 0 calc(100% / var(--per-view, 1)); min-width: 0; box-sizing: border-box; padding: 0 0.5rem; } .cr-prev, .cr-next { position: absolute; top: 50%; transform: translateY(-50%) translateY(-1.5rem); background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.15s; } .cr-prev:hover, .cr-next:hover { background: #fff; } .cr-prev { left: 0.25rem; } .cr-next { right: 0.25rem; } .cr-prev:disabled, .cr-next:disabled { opacity: 0.3; pointer-events: none; } .cr-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1rem; padding-bottom: 0.25rem; } .cr-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: none; background: var(--primary-base); opacity: 0.25; cursor: pointer; padding: 0; transition: opacity 0.2s, transform 0.2s; } .cr-dot.active { opacity: 1; transform: scale(1.3); } @media (max-width: 640px) { .cr-slide { flex: 0 0 100%; } .cr-prev { left: 0; } .cr-next { right: 0; } } @media (min-width: 641px) and (max-width: 1023px) { .cr-slide { flex: 0 0 max(50%, calc(100% / var(--per-view, 1))); } } .mg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); justify-content: center; gap: 1.5rem; } .mg-tile { cursor: pointer; position: relative; } .mg-tile[data-visible='false'] { opacity: 0.4; } .is-inactive { opacity: 0.5; filter: grayscale(80%); pointer-events: none; } .is-edit-mode .is-inactive, [data-empages-edit] .is-inactive { opacity: 1; filter: none; pointer-events: auto; } .mg-tile-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; } .mg-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mypage section[type="layer"].mg-tile-play, .mypage section[type="layer"].mg-tile-cart { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; } .mg-tile[data-tier='free'] section[type="layer"].mg-tile-play { display: flex; } .mg-tile[data-tier='paid'] section[type="layer"].mg-tile-cart { display: flex; } .mg-tile-play::before { content: ''; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; } .mg-tile-play::after { content: ''; position: absolute; border-style: solid; border-width: 0.6rem 0 0.6rem 1rem; border-color: transparent transparent transparent #fff; margin-left: 0.2rem; } .mypage section[type="layer"].mg-tile-cart { width: 3.5rem; height: 3.5rem; margin: auto; border-radius: 50%; background: rgba(0,0,0,0.55); } .mg-tile-cart .icon { color: #fff; width: 1.5rem; height: 1.5rem; } .mg-tile-badge { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: rgba(255,255,255,0.92); color: #111; } .mg-tile[data-tier='free'] .mg-tile-badge { background: var(--primary-base, #2e7d32); color: #fff; } .mg-tile-title { margin-top: 0.5rem; font-weight: 600; font-size: 0.95rem; } .mg-tile-desc { margin-top: 0.25rem; font-size: 0.85rem; opacity: 0.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mg-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; align-items: center; justify-content: center; padding: 2rem; } .mg-modal.open { display: flex; } .mg-modal-inner { position: relative; width: 100%; max-width: 960px; } .mg-modal-video { position: relative; aspect-ratio: 16 / 9; background: #000; } .mg-modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mg-modal-close { position: absolute; top: -2.5rem; right: 0; background: transparent; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; } .mg-pager { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 2rem; flex-wrap: wrap; } .mg-pager:empty { display: none; } .mg-page-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: 6px; border: 1px solid rgba(0,0,0,0.15); background: transparent; cursor: pointer; font-size: 0.9rem; } .mg-page-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); } .mg-page-btn.active { background: var(--primary-base, #2e7d32); border-color: var(--primary-base, #2e7d32); color: #fff; } .mg-page-btn:disabled { opacity: 0.35; cursor: default; } .mg-page-ellipsis { padding: 0 0.25rem; opacity: 0.6; } @media (max-width: 640px) { .mg-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } } .mypage .marquee-viewport { overflow: hidden; width: 100%; } .mypage .marquee-track { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; align-items: center; gap: 3rem; } .mypage .marquee-track:hover { animation-play-state: paused; } .mypage .marquee-track section[type='layer'], .mypage .marquee-track div[type='rich'], .mypage .marquee-track picture { flex-shrink: 0; text-align: left; } .mypage .marquee-track img { height: 3rem; width: auto; max-width: 10rem; object-fit: contain; object-position: center; display: block; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .mypage .glogo_marquee_endless_color .marquee-viewport, .mypage .glogo_marquee_scroll .marquee-viewport { padding: 1rem 0; } .mypage section[type='layer'].flow-wrap, .mypage section[type='layer'].flow-scroll, .mypage section[type='layer'].flow-auto { --flow-item-w: 320px; --flow-gap: var(--grid-gap, 1rem); display: flex !important; gap: var(--flow-gap); } .mypage section[type='layer'].flow-wrap > *, .mypage section[type='layer'].flow-scroll > * { flex: 0 0 auto; max-width: 100%; } .mypage section[type='layer'].flow-auto > * { flex: 0 0 auto !important; width: var(--flow-item-w, auto); max-width: 100%; } .mypage section[type='layer'].flow-w-sm > * { flex: 0 0 220px !important; width: 220px !important; } .mypage section[type='layer'].flow-w-md > * { flex: 0 0 300px !important; width: 300px !important; } .mypage section[type='layer'].flow-w-lg > * { flex: 0 0 400px !important; width: 400px !important; } .mypage section[type='layer'].flow-wrap { flex-wrap: wrap; } .mypage section[type='layer'].flow-scroll { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .mypage section[type='layer'].flow-scroll::-webkit-scrollbar { display: none; } .mypage section[type='layer'].flow-scroll > * { scroll-snap-align: start; } .mypage section[type='layer'].flow-auto { --flow-row-w: min(var(--max-w, 1200px), calc(100vw - 2rem)); flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; padding-right: var(--flow-gap); animation: marquee-scroll var(--flow-speed, 40s) linear infinite; } .mypage section[type='layer'].flow-auto:not(.max-w) { --flow-row-w: calc(100vw - 2rem); } .mypage section[type='layer'].flow-auto:hover { animation-play-state: paused; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-1, .mypage section[type='layer'].flow-auto > div[type='rich'].col-1 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 1/12 - var(--flow-gap) * 11/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-2, .mypage section[type='layer'].flow-auto > div[type='rich'].col-2 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 2/12 - var(--flow-gap) * 10/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-3, .mypage section[type='layer'].flow-auto > div[type='rich'].col-3 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 3/12 - var(--flow-gap) * 9/12) !important; min-width: min(240px, calc(100vw - 2rem)) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-4, .mypage section[type='layer'].flow-auto > div[type='rich'].col-4 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 4/12 - var(--flow-gap) * 8/12) !important; min-width: min(280px, calc(100vw - 2rem)) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-5, .mypage section[type='layer'].flow-auto > div[type='rich'].col-5 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 5/12 - var(--flow-gap) * 7/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-6, .mypage section[type='layer'].flow-auto > div[type='rich'].col-6 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 6/12 - var(--flow-gap) * 6/12) !important; min-width: min(320px, calc(100vw - 2rem)) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-7, .mypage section[type='layer'].flow-auto > div[type='rich'].col-7 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 7/12 - var(--flow-gap) * 5/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-8, .mypage section[type='layer'].flow-auto > div[type='rich'].col-8 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 8/12 - var(--flow-gap) * 4/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-9, .mypage section[type='layer'].flow-auto > div[type='rich'].col-9 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 9/12 - var(--flow-gap) * 3/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-10, .mypage section[type='layer'].flow-auto > div[type='rich'].col-10 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 10/12 - var(--flow-gap) * 2/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-11, .mypage section[type='layer'].flow-auto > div[type='rich'].col-11 { flex: 0 0 auto !important; width: calc(var(--flow-row-w) * 11/12 - var(--flow-gap) * 1/12) !important; } .mypage section[type='layer'].flow-auto > section[type='layer'].col-12, .mypage section[type='layer'].flow-auto > div[type='rich'].col-12 { flex: 0 0 auto !important; width: var(--flow-row-w) !important; } .mypage section:has(> section[type='layer'].flow-auto) { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { .mypage section[type='layer'].flow-auto { animation: none; width: auto !important; max-width: 100% !important; flex-wrap: wrap !important; } .mypage .marquee-track { animation: none; } } @media (max-width: 640px) { .mypage section[type='layer'].flow-wrap > * { flex-basis: 100%; } } .mypage .flow-scroll-wrap { position: relative; } .mypage .flow-nav-row { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; } .mypage .flow-nav-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border, #ddd); background: var(--surface, #fff); color: var(--text, #222); font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; } .mypage .flow-nav-btn:hover { background: var(--surface-2, #f5f5f5); } .mypage .flow-dots { display: flex; gap: .4rem; } .mypage .flow-dot { width: .55rem; height: .55rem; border-radius: 50%; border: none; padding: 0; background: var(--border, #ccc); opacity: .5; cursor: pointer; transition: opacity .2s, transform .2s; } .mypage .flow-dot.active { opacity: 1; transform: scale(1.3); background: var(--primary-base, #333); } .mypage .logo-row-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .mypage .logo-row-inner picture[type='picture'], .mypage .logo-row-inner img { flex: 0 0 auto; max-height: 3rem; width: auto; object-fit: contain; object-position: center; opacity: 0.7; transition: opacity 0.2s; } .mypage .logo-row-inner picture[type='picture']:hover, .mypage .logo-row-inner img:hover { opacity: 1; } .mypage .contact-icon svg { width: 2rem; height: 2rem; display: block; flex-shrink: 0; } .mypage .contact-item { flex-direction: row; align-items: flex-start; gap: 0.75rem; text-align: left; } .mypage .contact-icon { flex-shrink: 0; width: 2rem; height: 2rem; padding-top: 0.1rem; } .mypage .art-cat { display: inline-flex; align-items: center; background: color-mix(in srgb, var(--primary-base) 12%, transparent); color: var(--primary-dark); padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 0.04em; width: fit-content; } .mypage .feat-tag { display: inline-flex; align-items: center; background: var(--contrast-base); color: var(--text-dark); padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 0.04em; width: fit-content; } .mypage .ci-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; } .mypage .ci-ico svg, .mypage .ci-ico .icon { width: 1.25rem; height: 1.25rem; fill: var(--icon-color, var(--accent-on-light, var(--primary-base))); color: var(--icon-color, var(--accent-on-light, var(--primary-base))); display: block; } .mypage .contact-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.85rem; } .mypage .contact-list li { display: flex; align-items: flex-start; gap: 0.65rem; } .mypage .layer-with-bg-video { position: relative; isolation: isolate; } .mypage .layer-with-bg-video > picture.bg-video-poster, .mypage .layer-with-bg-video > video.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; } .mypage .layer-with-bg-video > picture.bg-video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .mypage .layer-with-bg-video > video.bg-video { opacity: 0; transition: opacity 0.6s ease; } .mypage .layer-with-bg-video > video.bg-video.ready { opacity: 1; } @media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .mypage .layer-with-bg-video > video.bg-video { display: none; } } .mypage .scene-trust-strip { display: inline-flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .mypage .scene-trust-strip .stars { color: var(--contrast-base); letter-spacing: 0.08em; line-height: 1.5; } .mypage .scene-trust-strip .trust-strip-text > p { margin: 0; } .mypage .fl-identity { text-align: left; } .mypage .fl-identity .foot-brandbar { width: fit-content; max-width: 100%; margin-bottom: 0.75em; } .mypage .footer-logo-fit, .mypage .foot-logo, .mypage .footer-logo, .mypage .footer-logo-box { display: flex; align-items: center; --foot-logo-h: 40px; } .mypage .footer-logo-fit.logo-xs, .mypage .foot-logo.logo-xs, .mypage .footer-logo.logo-xs, .mypage .footer-logo-box.logo-xs { --foot-logo-h: 24px; } .mypage .footer-logo-fit.logo-s, .mypage .foot-logo.logo-s, .mypage .footer-logo.logo-s, .mypage .footer-logo-box.logo-s { --foot-logo-h: 32px; } .mypage .footer-logo-fit.logo-m, .mypage .foot-logo.logo-m, .mypage .footer-logo.logo-m, .mypage .footer-logo-box.logo-m { --foot-logo-h: 40px; } .mypage .footer-logo-fit.logo-l, .mypage .foot-logo.logo-l, .mypage .footer-logo.logo-l, .mypage .footer-logo-box.logo-l { --foot-logo-h: 56px; } .mypage .footer-logo-fit.logo-xl, .mypage .foot-logo.logo-xl, .mypage .footer-logo.logo-xl, .mypage .footer-logo-box.logo-xl { --foot-logo-h: 72px; } .mypage section[type='layer'].col-12 > section[type='layer'].footer-logo-fit, .mypage section[type='layer'].footer-logo-fit, .mypage section[type='layer'].foot-logo, .mypage section[type='layer'].footer-logo, .mypage section[type='layer'].footer-logo-box { width: fit-content; max-width: 100%; } .mypage .footer-logo-fit img, .mypage .footer-logo-fit picture, .mypage .footer-logo-fit picture img, .mypage .foot-logo img, .mypage .foot-logo picture, .mypage .foot-logo picture img, .mypage .footer-logo img, .mypage .footer-logo picture, .mypage .footer-logo picture img, .mypage .footer-logo-box img, .mypage .footer-logo-box picture, .mypage .footer-logo-box picture img { display: block; height: var(--foot-logo-h, 40px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; } .mypage .fl-brand { font-weight: 700; margin-bottom: 0.25em; } .mypage .fl-mission { color: var(--text-muted); max-width: 34em; } .mypage .fl-social, .mypage .molecule.social-strip.fl-social { margin-top: 0.75em; justify-content: flex-start; } .mypage .fl-identity--flach .foot-brandbar { display: none; } .mypage .fl-nav-title, .mypage .fl-action-title { font-size: 0.85rem; font-weight: 600; text-transform: none; margin: 0 0 0.75em 0; } .mypage .fl-nav-menu { display: flex; font-size: 0.9rem; } .mypage .fl-nav-menu:not([slot*="menu-h"]) { flex-direction: column; gap: var(--menu-gap-y, 0.5em); } .mypage .fl-nav-menu[slot*="menu-h"] { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: var(--menu-gap-y, 0.5em) var(--menu-gap-x, 1.25em); } .mypage .fl-nav-menu a, .mypage .fl-nav-menu .nav-demo { color: var(--menu-link-color, var(--text-muted)); text-decoration: none; } .mypage .fl-nav-menu a:hover { color: var(--menu-hover-color, inherit); } .mypage section[type='layer'].col-12 > section[type='layer'].fl-nav:has(> div[type='rich'].fl-nav-menu:empty) { display: none !important; } .mypage .fl-action-body { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.75em; } .mypage .fl-map { align-self: start; } @media (max-width: 640px) { .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ) { grid-template-columns: 1fr !important; } .mypage section[type='layer'].col-12 > section[type='layer'].col-1, .mypage section[type='layer'].col-12 > div[type='rich'].col-1, .mypage section[type='layer'].col-12 > section[type='layer'].col-2, .mypage section[type='layer'].col-12 > div[type='rich'].col-2, .mypage section[type='layer'].col-12 > section[type='layer'].col-3, .mypage section[type='layer'].col-12 > div[type='rich'].col-3, .mypage section[type='layer'].col-12 > section[type='layer'].col-4, .mypage section[type='layer'].col-12 > div[type='rich'].col-4, .mypage section[type='layer'].col-12 > section[type='layer'].col-5, .mypage section[type='layer'].col-12 > div[type='rich'].col-5, .mypage section[type='layer'].col-12 > section[type='layer'].col-6, .mypage section[type='layer'].col-12 > div[type='rich'].col-6, .mypage section[type='layer'].col-12 > section[type='layer'].col-7, .mypage section[type='layer'].col-12 > div[type='rich'].col-7, .mypage section[type='layer'].col-12 > section[type='layer'].col-8, .mypage section[type='layer'].col-12 > div[type='rich'].col-8, .mypage section[type='layer'].col-12 > section[type='layer'].col-9, .mypage section[type='layer'].col-12 > div[type='rich'].col-9, .mypage section[type='layer'].col-12 > section[type='layer'].col-10, .mypage section[type='layer'].col-12 > div[type='rich'].col-10, .mypage section[type='layer'].col-12 > section[type='layer'].col-11, .mypage section[type='layer'].col-12 > div[type='rich'].col-11, .mypage section[type='layer'].col-12 > section[type='layer'].col-12, .mypage section[type='layer'].col-12 > div[type='rich'].col-12 { grid-column: 1 / -1; } } @media (min-width: 641px) and (max-width: 1023px) { .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ), .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ) { grid-template-columns: repeat(2, 1fr) !important; } .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ) > section[type='layer'].col-12, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ) > section[type='layer'].col-12, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ) > div[type='rich'].col-12, .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ) > div[type='rich'].col-12 { grid-column: 1 / -1 !important; } .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule ~ section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card ~ section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule ~ section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card ~ section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule ~ section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card ~ section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule ~ section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ~ section[type='layer'].col-6.card ) > section[type='layer'][class*='col-']:not(.col-12), .mypage section[type='layer'].col-12:has( > section[type='layer'].col-2.molecule, > section[type='layer'].col-2.card, > section[type='layer'].col-3.molecule, > section[type='layer'].col-3.card, > section[type='layer'].col-4.molecule, > section[type='layer'].col-4.card, > section[type='layer'].col-6.molecule, > section[type='layer'].col-6.card ) > section[type='layer'][class*='col-']:not(.col-12) { grid-column: span 1 !important; width: auto !important; } } .mypage img:not([src]):not([srcset]), .mypage img[src='']:not([srcset]) { display: none; } .mypage picture:has(> img:not([src]):not([srcset])), .mypage picture:has(> img[src='']:not([srcset])) { display: none; } .mypage section[type='layer'].head-logo:has(img:not([src]):not([srcset])), .mypage section[type='layer'].head-logo:has(img[src='']:not([srcset])), .mypage section[type='layer'].foot-brandbar:has(img:not([src]):not([srcset])), .mypage section[type='layer'].foot-brandbar:has(img[src='']:not([srcset])) { display: none; } .mypage section[type='layer'][class*='head_'] > section[type='layer'].max-w { align-items: center; } .mypage .head-align-center .head-logo img, .mypage .hcln-brand .head-logo img, .mypage .head-align-center .head-logo picture img, .mypage .hcln-brand .head-logo picture img { object-position: center; } .mypage section[type='layer'].head-align-center.head-logo, .mypage .hcln-brand section[type='layer'].head-logo { margin-left: auto; margin-right: auto; } @media (max-width: 1023px) { .mypage section[type='layer'][class*='head_'] > section[type='layer'].max-w { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 0.75rem !important; } .mypage section[type='layer'][class*='head_'] > section[type='layer'].max-w > section[type='layer'] { width: auto !important; } .mypage section[type='layer'].head_centered_logo_nav .hcln-brand, .mypage section[type='layer'].head_centered_logo_nav .hcln-brand section[type='layer'].head-logo { margin-left: 0 !important; margin-right: 0 !important; } .mypage .head_brand_tagline_cta .htc-cta-row { order: 1 !important; margin-left: auto !important; } .mypage .head_brand_tagline_cta section[type='layer'].max-w > section[type='layer']:nth-child(2) { order: 2 !important; } } @media (max-width: 640px) { .mypage section[type='layer'][class*='head_'] .btn-wrap.btn-outline { display: none; } } .card-standard { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-standard > .card-inner { border-radius: 12px 12px 12px 12px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-standard:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-standard:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-standard, .card-standard * { transition: none; } } .card-weich { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-weich > .card-inner { border-radius: 24px 24px 24px 24px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-weich:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-weich:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-weich, .card-weich * { transition: none; } } .card-pille-oben { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-pille-oben > .card-inner { border-radius: 40px 40px 12px 12px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-pille-oben:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-pille-oben:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-pille-oben, .card-pille-oben * { transition: none; } } .card-ein-eck { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-ein-eck > .card-inner { border-radius: 0px 40px 0px 0px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-ein-eck:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-ein-eck:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-ein-eck, .card-ein-eck * { transition: none; } } .card-diagonal { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-diagonal > .card-inner { border-radius: 40px 0px 40px 0px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-diagonal:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-diagonal:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-diagonal, .card-diagonal * { transition: none; } } .card-blatt { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-blatt > .card-inner { border-radius: 0px 48px 0px 48px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-blatt:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-blatt:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-blatt, .card-blatt * { transition: none; } } .card-blob-1 { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-blob-1 > .card-inner { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-blob-1:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-blob-1:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-blob-1, .card-blob-1 * { transition: none; } } .card-blob-2 { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-blob-2 > .card-inner { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-blob-2:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-blob-2:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-blob-2, .card-blob-2 * { transition: none; } } .card-kiesel { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-kiesel > .card-inner { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-kiesel:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-kiesel:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-kiesel, .card-kiesel * { transition: none; } } .card-squircle { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-squircle > .card-inner { border-radius: 22% / 22%; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-squircle:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-squircle:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-squircle, .card-squircle * { transition: none; } } .card-cut-1-ecke { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-cut-1-ecke > .card-inner { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); padding: 0px; background: transparent; } .card-cut-1-ecke > .card-inner > .card-body { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); color: #1e293b; background: #ffffff; padding: 30px 30px 30px; overflow: hidden; height: 100%; } .card-cut-1-ecke:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-cut-1-ecke, .card-cut-1-ecke * { transition: none; } } .card-cut-2-ecken { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-cut-2-ecken > .card-inner { clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); padding: 0px; background: transparent; } .card-cut-2-ecken > .card-inner > .card-body { clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); color: #1e293b; background: #ffffff; padding: 30px 30px 30px; overflow: hidden; height: 100%; } .card-cut-2-ecken:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-cut-2-ecken, .card-cut-2-ecken * { transition: none; } } .card-cut-alle { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-cut-alle > .card-inner { clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); padding: 0px; background: transparent; } .card-cut-alle > .card-inner > .card-body { clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); color: #1e293b; background: #ffffff; padding: 26px 26px 26px; overflow: hidden; height: 100%; } .card-cut-alle:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-cut-alle, .card-cut-alle * { transition: none; } } .card-cyber { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-cyber > .card-inner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); padding: 0px; background: transparent; } .card-cyber > .card-inner > .card-body { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); color: #1e293b; background: #ffffff; padding: 36px 36px 36px; overflow: hidden; height: 100%; } .card-cyber:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-cyber, .card-cyber * { transition: none; } } .card-schr-g-unten { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-schr-g-unten > .card-inner { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); padding: 0px; background: transparent; } .card-schr-g-unten > .card-inner > .card-body { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); color: #1e293b; background: #ffffff; padding: 44px 44px 44px; overflow: hidden; height: 100%; } .card-schr-g-unten:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-schr-g-unten, .card-schr-g-unten * { transition: none; } } .card-schr-g-oben { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-schr-g-oben > .card-inner { clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); padding: 0px; background: transparent; } .card-schr-g-oben > .card-inner > .card-body { clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); color: #1e293b; background: #ffffff; padding: 44px 44px 44px; overflow: hidden; height: 100%; } .card-schr-g-oben:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-schr-g-oben, .card-schr-g-oben * { transition: none; } } .card-parallelogramm { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-parallelogramm > .card-inner { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); padding: 0px; background: transparent; } .card-parallelogramm > .card-inner > .card-body { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); color: #1e293b; background: #ffffff; padding: 40px 40px 40px; overflow: hidden; height: 100%; } .card-parallelogramm:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-parallelogramm, .card-parallelogramm * { transition: none; } } .card-pfeil-card { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-pfeil-card > .card-inner { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); padding: 0px; background: transparent; } .card-pfeil-card > .card-inner > .card-body { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); color: #1e293b; background: #ffffff; padding: 44px 44px 44px; overflow: hidden; height: 100%; } .card-pfeil-card:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-pfeil-card, .card-pfeil-card * { transition: none; } } .card-ticket { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-ticket > .card-inner { -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 14px, #000 15px), radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); mask-image: radial-gradient(circle at 0 50%, transparent 14px, #000 15px), radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); -webkit-mask-composite: source-in; mask-composite: intersect; padding: 0px; background: transparent; } .card-ticket > .card-inner > .card-body { -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 14px, #000 15px), radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); mask-image: radial-gradient(circle at 0 50%, transparent 14px, #000 15px), radial-gradient(circle at 100% 50%, transparent 14px, #000 15px); -webkit-mask-composite: source-in; mask-composite: intersect; color: #1e293b; background: #ffffff; padding: 28px 28px 28px; overflow: hidden; height: 100%; } .card-ticket:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-ticket, .card-ticket * { transition: none; } } .card-sprechblase { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-sprechblase > .card-inner { clip-path: polygon(0 0, 100% 0, 100% 85%, 30% 85%, 20% 100%, 18% 85%, 0 85%); padding: 0px; background: transparent; } .card-sprechblase > .card-inner > .card-body { clip-path: polygon(0 0, 100% 0, 100% 85%, 30% 85%, 20% 100%, 18% 85%, 0 85%); color: #1e293b; background: #ffffff; padding: 20px 20px 56px; overflow: hidden; height: 100%; } .card-sprechblase:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-sprechblase, .card-sprechblase * { transition: none; } } .card-fahne { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-fahne > .card-inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); padding: 0px; background: transparent; } .card-fahne > .card-inner > .card-body { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); color: #1e293b; background: #ffffff; padding: 20px 20px 48px; overflow: hidden; height: 100%; } .card-fahne:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-fahne, .card-fahne * { transition: none; } } .card-sechseck-breit { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-sechseck-breit > .card-inner { clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%); padding: 0px; background: transparent; } .card-sechseck-breit > .card-inner > .card-body { clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%); color: #1e293b; background: #ffffff; padding: 44px 44px 44px; overflow: hidden; height: 100%; } .card-sechseck-breit:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-sechseck-breit, .card-sechseck-breit * { transition: none; } } .card-wellenkante { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-wellenkante > .card-inner { -webkit-mask-image: radial-gradient(14px at 50% 100%, transparent 98%, #000) 50% / 32px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat; mask-image: radial-gradient(14px at 50% 100%, transparent 98%, #000) 50% / 32px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat; -webkit-mask-composite: source-over; mask-composite: add; padding: 0px; background: transparent; } .card-wellenkante > .card-inner > .card-body { -webkit-mask-image: radial-gradient(14px at 50% 100%, transparent 98%, #000) 50% / 32px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat; mask-image: radial-gradient(14px at 50% 100%, transparent 98%, #000) 50% / 32px 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat; -webkit-mask-composite: source-over; mask-composite: add; color: #1e293b; background: #ffffff; padding: 28px 28px 28px; overflow: hidden; height: 100%; } .card-wellenkante:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-wellenkante, .card-wellenkante * { transition: none; } } .card-fade-unten { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; filter: drop-shadow(0px 10px 12px rgba(15,23,42,0.18)); } .card-fade-unten > .card-inner { -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; padding: 0px; background: transparent; } .card-fade-unten > .card-inner > .card-body { -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; overflow: hidden; height: 100%; } .card-fade-unten:hover { transform: translateY(-6px); filter: drop-shadow(0px 18px 20px rgba(15,23,42,0.28)); } @media (prefers-reduced-motion: reduce) { .card-fade-unten, .card-fade-unten * { transition: none; } } .card-oberer-bogen { display: block; transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease; } .card-oberer-bogen > .card-inner { border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px; color: #1e293b; background: #ffffff; padding: 20px 20px 20px; box-shadow: 0px 10px 24px rgba(15,23,42,0.18); overflow: hidden; transition: border-radius 300ms ease; } .card-oberer-bogen:hover > .card-inner { box-shadow: 0px 20px 40px rgba(15,23,42,0.28); } .card-oberer-bogen:hover { transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .card-oberer-bogen, .card-oberer-bogen * { transition: none; } } .card-tilt-left { --em-rotate: -3deg; } .card-tilt-left-sm { --em-rotate: -1.5deg; } .card-tilt-right-sm { --em-rotate: 1.5deg; } .card-tilt-right { --em-rotate: 3deg; } [class*="card-tilt"] { transform: rotate(var(--em-rotate, 0deg)) translateY(var(--em-lift-y, 0px)); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease; transform-origin: center center; } .card-hover-lift { --em-lift-y: 0px; transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease; } .card-hover-lift:hover { --em-lift-y: -6px; transform: rotate(var(--em-rotate, 0deg)) translateY(var(--em-lift-y, -6px)); } .card-ghost-frame { position: relative !important; transform-style: preserve-3d; } .card-ghost-frame::before { content: ''; position: absolute; inset: -6px; border: 1.5px dashed var(--em-border, rgba(0, 0, 0, 0.28)); border-radius: inherit; pointer-events: none; z-index: -1; transform: rotate(calc(var(--em-rotate, 0deg) * -1)) translateZ(-1px); opacity: 0.65; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease; } .theme-dark .card-ghost-frame::before, [class*="sc-dark"] .card-ghost-frame::before, .card-ghost-frame[class*="sc-dark"]::before, .card-ghost-frame[class*="sc-pri"]::before, .card-ghost-frame[class*="glass-dark"]::before { border-color: rgba(255, 255, 255, 0.35); } .card-stack-deck { position: relative !important; transform-style: preserve-3d; } .card-stack-deck::before { content: ''; position: absolute; inset: 0; background: var(--em-surface-muted, rgba(0, 0, 0, 0.05)); border: 1px solid var(--em-border, rgba(0, 0, 0, 0.12)); border-radius: inherit; pointer-events: none; z-index: -1; transform: rotate(calc(var(--em-rotate, 0deg) * -1 + 2.5deg)) translate(8px, 6px) translateZ(-1px); opacity: 0.8; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } .theme-dark .card-stack-deck::before, .card-stack-deck[class*="sc-dark"]::before, .card-stack-deck[class*="sc-pri"]::before { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } @media (max-width: 768px) { [class*="card-tilt"] { --em-rotate: calc(var(--em-rotate, 0deg) * 0.6); } } .overlap-left { margin-left: var(--em-overlap-x, -3.5rem) !important; margin-right: 0 !important; z-index: 10 !important; position: relative !important; align-self: center !important; } .overlap-right { margin-right: calc(-1 * var(--em-overlap-x, 3.5rem)) !important; margin-left: 0 !important; z-index: 10 !important; position: relative !important; align-self: center !important; } [style*="--em-overlap-x"] { z-index: 10 !important; position: relative !important; align-self: center !important; } [style*="--em-focal-x"] img, [style*="--em-focal-x"] picture img, img[style*="--em-focal-x"] { object-position: var(--em-focal-x, 50%) var(--em-focal-y, 50%) !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } [style*="--em-offset-x"], [style*="--em-offset-y"] { transform: translate(var(--em-offset-x, 0px), var(--em-offset-y, 0px)) !important; z-index: 2; position: relative; } [style*="--em-offset-x"]:hover, [style*="--em-offset-y"]:hover, .mypage [style*="--em-offset-x"]:hover, .mypage [style*="--em-offset-y"]:hover, .mypage .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-dark .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-pri .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-sec .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-acc .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-pri-d .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-sec-d .btn-wrap[style*="--em-offset-y"]:hover, .mypage .sc-acc-d .btn-wrap[style*="--em-offset-y"]:hover { transform: translate(var(--em-offset-x, 0px), calc(var(--em-offset-y, 0px) - 2px)) !important; } .img-blatt, .mypage .img-blatt, .mypage img.img-blatt, .mypage picture.img-blatt, .mypage picture.img-blatt img, .mypage picture:has(.img-blatt), .mypage picture:has(.img-blatt) img, .mypage .ie-img-host.img-blatt, .mypage .ie-img-host:has(.img-blatt), .mypage .aspect-1-1:has(.img-blatt), .mypage .aspect-4-3:has(.img-blatt), .mypage .aspect-16-9:has(.img-blatt), .mypage .aspect-21-9:has(.img-blatt) { border-radius: 0 48px 0 48px !important; overflow: hidden !important; } .img-squircle, .mypage .img-squircle, .mypage img.img-squircle, .mypage picture.img-squircle, .mypage picture.img-squircle img, .mypage picture:has(.img-squircle), .mypage picture:has(.img-squircle) img, .mypage .ie-img-host.img-squircle, .mypage .ie-img-host:has(.img-squircle), .mypage .aspect-1-1:has(.img-squircle), .mypage .aspect-4-3:has(.img-squircle), .mypage .aspect-16-9:has(.img-squircle), .mypage .aspect-21-9:has(.img-squircle) { border-radius: 22% / 22% !important; overflow: hidden !important; } .img-sharp, .mypage .img-sharp, .mypage img.img-sharp, .mypage picture.img-sharp, .mypage picture.img-sharp img, .mypage picture:has(.img-sharp), .mypage picture:has(.img-sharp) img, .mypage .ie-img-host.img-sharp, .mypage .ie-img-host:has(.img-sharp) { border-radius: 0 !important; } .img-framed, .mypage .img-framed, .mypage img.img-framed, .mypage picture.img-framed, .mypage picture:has(.img-framed), .mypage .ie-img-host.img-framed, .mypage .ie-img-host:has(.img-framed) { border: 2px solid var(--em-border, #d1d5db) !important; } .card-blatt, .mypage .card.card-blatt, .card.card-blatt { border-radius: var(--em-radius, 0 48px 0 48px) !important; } .card-squircle, .mypage .card.card-squircle, .card.card-squircle { border-radius: var(--em-radius, 22% / 22%) !important; } .card-sharp, .mypage .card.card-sharp, .card.card-sharp { border-radius: 0 !important; } .card-cut-1-ecke, .mypage .card.card-cut-1-ecke, .card.card-cut-1-ecke { border-radius: 0 32px 0 0 !important; } .card-pill, .mypage .card.card-pill, .card.card-pill { border-radius: 9999px !important; } .card-elev-0, .mypage .card.card-elev-0 { box-shadow: none !important; } .card-elev-1, .mypage .card.card-elev-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important; } .card-elev-2, .mypage .card.card-elev-2 { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; } .card-elev-3, .mypage .card.card-elev-3 { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } .card-elev-4, .mypage .card.card-elev-4 { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; } .card-line, .mypage .card.card-line { border: 1px solid var(--em-border, #e5e7eb) !important; } .card-line-thick, .mypage .card.card-line-thick { border: 2px solid var(--em-border, #e5e7eb) !important; } .card-bento-br, .mypage .card.card-bento-br, .mypage .ie-img-host.card-bento-br, .img-bento-br, .mypage img.img-bento-br { border-radius: var(--em-radius, 24px 24px 80px 24px) !important; overflow: hidden !important; } .card-bento-bl, .mypage .card.card-bento-bl, .mypage .ie-img-host.card-bento-bl, .img-bento-bl, .mypage img.img-bento-bl { border-radius: var(--em-radius, 24px 24px 24px 80px) !important; overflow: hidden !important; } .card-half-capsule-r, .mypage .card.card-half-capsule-r, .mypage .ie-img-host.card-half-capsule-r, .img-half-capsule-r, .mypage img.img-half-capsule-r { border-radius: var(--em-radius, 24px 80px 80px 24px) !important; overflow: hidden !important; } .card-half-capsule-l, .mypage .card.card-half-capsule-l, .mypage .ie-img-host.card-half-capsule-l, .img-half-capsule-l, .mypage img.img-half-capsule-l { border-radius: var(--em-radius, 80px 24px 24px 80px) !important; overflow: hidden !important; } .card-pill-top, .mypage .card.card-pill-top, .mypage .ie-img-host.card-pill-top, .img-pill-top, .mypage img.img-pill-top { border-radius: var(--em-radius, 80px 80px 24px 24px) !important; overflow: hidden !important; } .card-diagonal, .mypage .card.card-diagonal, .mypage .ie-img-host.card-diagonal, .img-diagonal, .mypage img.img-diagonal { border-radius: var(--em-radius, 40px 0 40px 0) !important; overflow: hidden !important; } .card-circle, .mypage .card.card-circle, .mypage .ie-img-host.card-circle, .img-circle, .mypage .img-circle, .mypage img.img-circle, .mypage picture.img-circle, .mypage picture.img-circle img, .mypage .ie-img-host.img-circle img { border-radius: var(--em-radius, 50%) !important; overflow: hidden !important; } .aspect-1-1.card-bento-br, .mypage .aspect-1-1.card-bento-br, .mypage .aspect-1-1:has(.card-bento-br), .mypage .aspect-1-1:has(.img-bento-br), .mypage .aspect-1-1 img.card-bento-br, .mypage .aspect-1-1 img.img-bento-br { border-radius: var(--em-radius, 6% 6% 38% 6%) !important; overflow: hidden !important; } .aspect-1-1.card-bento-bl, .mypage .aspect-1-1.card-bento-bl, .mypage .aspect-1-1:has(.card-bento-bl), .mypage .aspect-1-1:has(.img-bento-bl), .mypage .aspect-1-1 img.card-bento-bl, .mypage .aspect-1-1 img.img-bento-bl { border-radius: var(--em-radius, 6% 6% 6% 38%) !important; overflow: hidden !important; } .aspect-1-1.card-half-capsule-r, .mypage .aspect-1-1.card-half-capsule-r, .mypage .aspect-1-1:has(.card-half-capsule-r), .mypage .aspect-1-1:has(.img-half-capsule-r), .mypage .aspect-1-1 img.card-half-capsule-r, .mypage .aspect-1-1 img.img-half-capsule-r { border-radius: var(--em-radius, 6% 50% 50% 6%) !important; overflow: hidden !important; } .aspect-1-1.card-half-capsule-l, .mypage .aspect-1-1.card-half-capsule-l, .mypage .aspect-1-1:has(.card-half-capsule-l), .mypage .aspect-1-1:has(.img-half-capsule-l), .mypage .aspect-1-1 img.card-half-capsule-l, .mypage .aspect-1-1 img.img-half-capsule-l { border-radius: var(--em-radius, 50% 6% 6% 50%) !important; overflow: hidden !important; } .aspect-1-1.card-pill-top, .mypage .aspect-1-1.card-pill-top, .mypage .aspect-1-1:has(.card-pill-top), .mypage .aspect-1-1:has(.img-pill-top), .mypage .aspect-1-1 img.card-pill-top, .mypage .aspect-1-1 img.img-pill-top { border-radius: var(--em-radius, 50% 50% 6% 6%) !important; overflow: hidden !important; } .aspect-1-1.card-blatt, .mypage .aspect-1-1.card-blatt, .mypage .aspect-1-1:has(.card-blatt), .mypage .aspect-1-1:has(.img-blatt), .mypage .aspect-1-1 img.card-blatt, .mypage .aspect-1-1 img.img-blatt { border-radius: var(--em-radius, 0 38% 0 38%) !important; overflow: hidden !important; } .aspect-16-9.card-bento-br, .mypage .aspect-16-9.card-bento-br, .mypage .aspect-16-9:has(.card-bento-br), .mypage .aspect-16-9:has(.img-bento-br), .mypage .aspect-16-9 img.card-bento-br, .mypage .aspect-16-9 img.img-bento-br { border-radius: var(--em-radius, 3.4% 3.4% 21.4% 3.4% / 6% 6% 38% 6%) !important; overflow: hidden !important; } .aspect-16-9.card-bento-bl, .mypage .aspect-16-9.card-bento-bl, .mypage .aspect-16-9:has(.card-bento-bl), .mypage .aspect-16-9:has(.img-bento-bl), .mypage .aspect-16-9 img.card-bento-bl, .mypage .aspect-16-9 img.img-bento-bl { border-radius: var(--em-radius, 3.4% 3.4% 3.4% 21.4% / 6% 6% 6% 38%) !important; overflow: hidden !important; } .aspect-16-9.card-half-capsule-r, .mypage .aspect-16-9.card-half-capsule-r, .mypage .aspect-16-9:has(.card-half-capsule-r), .mypage .aspect-16-9:has(.img-half-capsule-r), .mypage .aspect-16-9 img.card-half-capsule-r, .mypage .aspect-16-9 img.img-half-capsule-r { border-radius: var(--em-radius, 3.4% 28.1% 28.1% 3.4% / 6% 50% 50% 6%) !important; overflow: hidden !important; } .aspect-16-9.card-half-capsule-l, .mypage .aspect-16-9.card-half-capsule-l, .mypage .aspect-16-9:has(.card-half-capsule-l), .mypage .aspect-16-9:has(.img-half-capsule-l), .mypage .aspect-16-9 img.card-half-capsule-l, .mypage .aspect-16-9 img.img-half-capsule-l { border-radius: var(--em-radius, 28.1% 3.4% 3.4% 28.1% / 50% 6% 6% 50%) !important; overflow: hidden !important; } .aspect-16-9.card-pill-top, .mypage .aspect-16-9.card-pill-top, .mypage .aspect-16-9:has(.card-pill-top), .mypage .aspect-16-9:has(.img-pill-top), .mypage .aspect-16-9 img.card-pill-top, .mypage .aspect-16-9 img.img-pill-top { border-radius: var(--em-radius, 28.1% 28.1% 3.4% 3.4% / 50% 50% 6% 6%) !important; overflow: hidden !important; } .aspect-16-9.card-squircle, .mypage .aspect-16-9.card-squircle, .mypage .aspect-16-9:has(.card-squircle), .mypage .aspect-16-9:has(.img-squircle), .mypage .aspect-16-9 img.card-squircle, .mypage .aspect-16-9 img.img-squircle { border-radius: var(--em-radius, 12.4% / 22%) !important; overflow: hidden !important; } .aspect-16-9.card-diagonal, .mypage .aspect-16-9.card-diagonal, .mypage .aspect-16-9:has(.card-diagonal), .mypage .aspect-16-9:has(.img-diagonal) { border-radius: var(--em-radius, 16.9% 0 16.9% 0 / 30% 0 30% 0) !important; overflow: hidden !important; } .aspect-16-9.card-blatt, .mypage .aspect-16-9.card-blatt, .mypage .aspect-16-9:has(.card-blatt), .mypage .aspect-16-9:has(.img-blatt) { border-radius: var(--em-radius, 0 21.4% 0 21.4% / 0 38% 0 38%) !important; overflow: hidden !important; } .aspect-4-3.card-bento-br, .mypage .aspect-4-3.card-bento-br, .mypage .aspect-4-3:has(.card-bento-br), .mypage .aspect-4-3:has(.img-bento-br) { border-radius: var(--em-radius, 4.5% 4.5% 28.5% 4.5% / 6% 6% 38% 6%) !important; overflow: hidden !important; } .aspect-4-3.card-bento-bl, .mypage .aspect-4-3.card-bento-bl, .mypage .aspect-4-3:has(.card-bento-bl), .mypage .aspect-4-3:has(.img-bento-bl) { border-radius: var(--em-radius, 4.5% 4.5% 4.5% 28.5% / 6% 6% 6% 38%) !important; overflow: hidden !important; } .aspect-4-3.card-half-capsule-r, .mypage .aspect-4-3.card-half-capsule-r, .mypage .aspect-4-3:has(.card-half-capsule-r), .mypage .aspect-4-3:has(.img-half-capsule-r) { border-radius: var(--em-radius, 4.5% 37.5% 37.5% 4.5% / 6% 50% 50% 6%) !important; overflow: hidden !important; } .aspect-4-3.card-half-capsule-l, .mypage .aspect-4-3.card-half-capsule-l, .mypage .aspect-4-3:has(.card-half-capsule-l), .mypage .aspect-4-3:has(.img-half-capsule-l) { border-radius: var(--em-radius, 37.5% 4.5% 4.5% 37.5% / 50% 6% 6% 50%) !important; overflow: hidden !important; } .aspect-4-3.card-pill-top, .mypage .aspect-4-3.card-pill-top, .mypage .aspect-4-3:has(.card-pill-top), .mypage .aspect-4-3:has(.img-pill-top) { border-radius: var(--em-radius, 37.5% 37.5% 4.5% 4.5% / 50% 50% 6% 6%) !important; overflow: hidden !important; } .aspect-4-3.card-squircle, .mypage .aspect-4-3.card-squircle, .mypage .aspect-4-3:has(.card-squircle), .mypage .aspect-4-3:has(.img-squircle) { border-radius: var(--em-radius, 16.5% / 22%) !important; overflow: hidden !important; } [style*="--em-radius"], .mypage [style*="--em-radius"], .mypage .card[style*="--em-radius"], .mypage .ie-img-host[style*="--em-radius"], .mypage .aspect-1-1:has([style*="--em-radius"]), .mypage .aspect-4-3:has([style*="--em-radius"]), .mypage .aspect-16-9:has([style*="--em-radius"]), .mypage .aspect-21-9:has([style*="--em-radius"]), .mypage img[style*="--em-radius"], .mypage picture[style*="--em-radius"], .mypage picture[style*="--em-radius"] img, .mypage picture:has([style*="--em-radius"]), .mypage picture:has([style*="--em-radius"]) img, .mypage .btn-wrap[style*="--em-radius"], .mypage .card[class*="card-"][style*="--em-radius"], .mypage [class*="card-"][style*="--em-radius"], .mypage [class*="img-"][style*="--em-radius"], .mypage [class*="aspect-"][style*="--em-radius"], .mypage [class*="aspect-"] [style*="--em-radius"] { border-radius: var(--em-radius) !important; overflow: hidden !important; } .mypage [class*="aspect-"], .mypage [class*="vh-"], .mypage .card, .mypage .imagecol { overflow: hidden; } .mypage [class*="aspect-"] > picture, .mypage [class*="aspect-"] > img, .mypage [class*="aspect-"] picture > img, .mypage [class*="vh-"] > picture, .mypage [class*="vh-"] > img, .mypage [class*="vh-"] picture > img, .mypage .imagecol > picture, .mypage .imagecol > img, .mypage .imagecol picture > img, .mypage picture[class*="card-"] > img, .mypage picture[class*="img-"] > img, .mypage picture[style*="--em-radius"] > img { border-radius: inherit !important; width: 100%; height: 100%; flex: 1 1 100%; align-self: stretch; object-fit: cover; } .btn-pill, .mypage [data-key="button"].btn-pill, .mypage .btn.btn-pill, .mypage .btn-wrap.btn-pill, .mypage button.btn-pill, .mypage a.btn-pill { border-radius: 9999px !important; } .btn-squircle, .mypage [data-key="button"].btn-squircle, .mypage .btn.btn-squircle, .mypage .btn-wrap.btn-squircle, .mypage button.btn-squircle, .mypage a.btn-squircle { border-radius: 12px !important; } .btn-sharp, .mypage [data-key="button"].btn-sharp, .mypage .btn.btn-sharp, .mypage .btn-wrap.btn-sharp, .mypage button.btn-sharp, .mypage a.btn-sharp { border-radius: 0px !important; } .btn-cut, .mypage [data-key="button"].btn-cut, .mypage .btn.btn-cut, .mypage .btn-wrap.btn-cut, .mypage button.btn-cut, .mypage a.btn-cut { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%) !important; } .btn-elev-0, .mypage .btn-elev-0 { box-shadow: none !important; } .btn-elev-1, .mypage .btn-elev-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08) !important; } .btn-elev-2, .mypage .btn-elev-2 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.06) !important; } .btn-elev-3, .mypage .btn-elev-3 { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.14), 0 4px 6px -2px rgba(0,0,0,0.08) !important; } .btn-ghost, .mypage [data-key="button"].btn-ghost, .mypage .btn.btn-ghost, .mypage .btn-wrap.btn-ghost, .mypage button.btn-ghost, .mypage a.btn-ghost { background: transparent !important; color: var(--primary-base, #2563eb) !important; box-shadow: inset 0 0 0 2px var(--primary-base, #2563eb) !important; border: none !important; } .btn-ghost:hover, .mypage [data-key="button"].btn-ghost:hover, .mypage .btn.btn-ghost:hover, .mypage .btn-wrap.btn-ghost:hover, .mypage button.btn-ghost:hover, .mypage a.btn-ghost:hover { background: var(--primary-base, #2563eb) !important; color: #ffffff !important; } .btn-soft, .mypage [data-key="button"].btn-soft, .mypage .btn.btn-soft, .mypage .btn-wrap.btn-soft, .mypage button.btn-soft, .mypage a.btn-soft { background: rgba(37, 99, 235, 0.12) !important; color: var(--primary-base, #2563eb) !important; border: 1px solid rgba(37, 99, 235, 0.25) !important; } .btn-soft:hover, .mypage [data-key="button"].btn-soft:hover, .mypage .btn.btn-soft:hover, .mypage .btn-wrap.btn-soft:hover, .mypage button.btn-soft:hover, .mypage a.btn-soft:hover { background: rgba(37, 99, 235, 0.2) !important; } @media (max-width: 1023.98px) { .overlap-left, .overlap-right, [style*="--em-overlap-x"] { transform: none !important; margin-left: 0px !important; margin-right: 0px !important; } [style*="--em-offset-x"], [style*="--em-offset-y"] { transform: none !important; } } .mypage, .mypage > section, .mypage > [data-role="section"] { overflow-x: clip; overflow-y: visible; } .mypage :has(> [style*="--em-overlap-x"]), .mypage :has(> [style*="--em-offset-x"]), .mypage :has(> [style*="--em-offset-y"]) { overflow: visible; } .mypage .text-light [class*="card-"]:not(.text-light) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li), .mypage .text-light .card:not(.text-light) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li), .mypage .text-light :is(.sc-light, .sc-white, .sc-paper, .sc-gray, .sc-cream, .sc-ice):not(.text-light) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li) { color: inherit; } .mypage .text-dark [class*="card-"]:not(.text-dark) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li), .mypage .text-dark .card:not(.text-dark) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li), .mypage .text-dark :is(.sc-dark, .sc-black, .sc-primary, .sc-secondary):not(.text-dark) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li) { color: inherit; } .mypage .card:not([class*="sc-"]):not([class*="glass-"]):not([style*="background"]) { background: var(--card-surface, #ffffff); } .em-divider { position: absolute; left: 0; right: 0; width: 100%; height: var(--em-divider-h, 120px); pointer-events: none; overflow: hidden; line-height: 0; z-index: var(--em-divider-z, 1); } .em-divider--bottom { bottom: 0; transform: translateY(1px); } .em-divider--top { top: 0; transform: translateY(-1px) scaleY(-1); } .em-divider-svg { display: block; width: calc(100% + 2px); margin-left: -1px; height: 100%; } .em-divider--flip-x svg { transform: scaleX(-1); } .em-divider--flip-y svg { transform: scaleY(-1); } .em-divider--invert svg { filter: invert(1); } .em-divider--anim-drift svg { animation: emDividerDrift var(--em-divider-anim-duration, 12s) linear infinite alternate; } .em-divider--anim-bob svg { animation: emDividerBob calc(var(--em-divider-anim-duration, 12s) / 4) ease-in-out infinite alternate; } @keyframes emDividerDrift { from { transform: translateX(0); } to { transform: translateX(-40px); } } @keyframes emDividerBob { from { transform: translateY(0); } to { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .em-divider-svg, .em-divider--anim-drift svg, .em-divider--anim-bob svg { animation: none !important; transition: none !important; } } [data-key="layer"][style*="background-image"], [style*="background-image"] { background-size: cover; background-position: center center; background-repeat: no-repeat; } .vh-50 { min-height: 50vh; } .vh-60 { min-height: 60vh; } .vh-70 { min-height: 70vh; } .vh-80 { min-height: 80vh; } .vh-full { min-height: 100vh; } .mypage .vh-50, .mypage .vh-60, .mypage .vh-70, .mypage .vh-80, .mypage .vh-full { display: flex !important; flex-direction: column !important; justify-content: center; align-items: center; } .mypage .aspect-21-9, .mypage .aspect-16-9, .mypage .aspect-4-3, .mypage .aspect-1-1 { min-height: auto; } @media (max-width: 640px) { .mypage .aspect-21-9, .mypage .aspect-16-9, .mypage .aspect-4-3, .mypage .aspect-1-1 { aspect-ratio: auto; } } .glass-dark-scrim, .glass-light-scrim, .glass-orig-scrim, .glass-dark-fade-scrim, .glass-light-fade-scrim, .glass-dark-fade-side-scrim, .glass-dark-fade-side-right-scrim { position: relative; } .mypage .glass-dark-scrim, .mypage .glass-light-scrim, .mypage .glass-orig-scrim { align-items: center; justify-content: center; } .mypage .glass-dark-fade-side-scrim, .mypage .glass-dark-fade-side-right-scrim { align-items: flex-start; justify-content: center; } .mypage .glass-dark-fade-scrim, .mypage .glass-light-fade-scrim { align-items: center; justify-content: flex-end; padding-bottom: 2rem; } .glass-dark-scrim::before { background: rgba(0,0,0,0.70); } .glass-light-scrim::before { background: rgba(255,255,255,0.52); } .glass-orig-scrim::before { background: transparent; } .glass-dark-fade-scrim::before { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.30) 60%, transparent 100%); } .glass-light-fade-scrim::before { background: linear-gradient(to top, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.16) 60%, transparent 100%); } .glass-dark-fade-side-scrim::before { background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.28) 55%, transparent 100%); } .glass-dark-fade-side-right-scrim::before { background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.28) 55%, transparent 100%); } .glass-dark-scrim::before, .glass-light-scrim::before, .glass-orig-scrim::before, .glass-dark-fade-scrim::before, .glass-light-fade-scrim::before, .glass-dark-fade-side-scrim::before, .glass-dark-fade-side-right-scrim::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; } .glass-dark-scrim > *, .glass-light-scrim > *, .glass-orig-scrim > *, .glass-dark-fade-scrim > *, .glass-light-fade-scrim > *, .glass-dark-fade-side-scrim > *, .glass-dark-fade-side-right-scrim > * { position: relative; z-index: 1; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .glass-frosted::before { -webkit-backdrop-filter: blur(var(--frosted-blur, 10px)); backdrop-filter: blur(var(--frosted-blur, 10px)); } } .text-light h1,.text-light h2,.text-light h3,.text-light h4,.text-light h5,.text-light h6, .text-light p,.text-light .eyebrow,.text-light .subline, .text-light a:not(.btn),.text-light li { color: var(--text-light); } .text-dark h1,.text-dark h2,.text-dark h3,.text-dark h4,.text-dark h5,.text-dark h6, .text-dark p,.text-dark .eyebrow,.text-dark .subline,.text-dark li { color: var(--text-dark); } .text-light :is(.card, [class*="card-"], .sc-light, .sc-white, .sc-paper, .sc-gray, .sc-cream, .sc-ice):not(.text-light) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li) { color: inherit; } .text-dark :is(.card, [class*="card-"], .sc-dark, .sc-black, .sc-primary, .sc-secondary):not(.text-dark) :is(h1,h2,h3,h4,h5,h6,p,.eyebrow,.subline,a:not(.btn),li) { color: inherit; }