button {
  cursor: pointer;
}
body {
    position: relative;
    height: 100%;
    letter-spacing: -0.04em;
}
.pc_only{
    display: inline-block;
}
.pc_br{
    display: block;
}
.t_br{
    display: none;
}
.m_br{
    display: none;
}
.tablet_br{
    display: none;
}
.mobile_br{
    display: none;
}
.this_br{
    display: block;
}
h1, h2{
    color: #3c4576;
    letter-spacing: -0.04em;
}
h1{
    margin: 0 auto 60px;
    line-height: 1.7;
    font-size: 2.2rem;
}
h2{
    margin: 0 auto 50px;
}
#choose_type{
    position: relative;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    min-height: -webkit-calc(100vh - 294.3px);
    min-height: -moz-calc(100vh - 294.3px);
    min-height: calc(100vh - 294.3px);
    background-image: url(https://hakdokman.com/main/asset/user_bg.png);
    background-color: #def5ee;
}

#choose_type .container{
    width: 100%;
    max-width: 1200px; 
    padding: 160px 40px;
}

.btn_view{
    display: block;
    font-size: 15px;
    margin-top: 25px;
    color: #34b479;
}

#choose_type ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#choose_type a{
    color: #31354B;
    vertical-align: top;
    display: inline-block;
    font-size: 19px;
    width: 20%;
    height: auto;
    margin: 1%; 
    padding: 2rem 1.6rem;
    border-radius: 0.6rem;
    background-color: #fff;
    box-shadow: 0 0 13px rgba(0,0,0,0.1);
}

#choose_type a:hover{
    color: #3c4576;
    font-weight: 500;
    background-color: #edf9f5;
    border: 1px solid #3c4576;
}
@media (max-width :1056px) {
    #choose_type .container{
        width: 100%;
        max-width: 900px; 
        padding: 160px 40px;
    }
    #choose_type a{
    color: #31354B;
    vertical-align: top;
    display: inline-block;
    font-size: 19px;
    width: 45%;
    height: auto;
    margin: 1%; 
    padding: 2rem 1.6rem;
    border-radius: 0.6rem;
    background-color: #fff;
    box-shadow: 0 0 13px rgba(0,0,0,0.1);
}
}
@media (max-width :760px) { 
    #choose_type .container{
        padding: 70px 40px 200px;
    }
    .pc_only{
        display: none;
    }
    .pc_br{
        display: none;
    }
    .t_br{
        display: block;
    }
    .m_br{
        display: none;
    }
    .tablet_br{
        display: block;
    }
    .mobile_br{
        display: block;
    }
    .this_br{
        display: none;
    }
    #choose_type a{
        height: 216px;
    }
}
@media (max-width :612px) {
    #choose_type{
        background-image: url(https://hakdokman.com/main/asset/user_mobile_bg.png);
        height: 100%;
        min-height: auto;
    }
    h1{
        font-size: 1.8rem;
        margin: 0 auto 30px;
    }
    h2{
        font-size: 1.3rem;
    }
    .pc_br{
        display: none;
    }
    .t_br{
        display: none;
    }
    .m_br{
        display: block;
    }
    .tablet_br{
        display: none;
    }
    .mobile_br{
        display: block;
    }
    .this_br{
        display: block;
    }
    
    .btn_view{
        text-align: right;
    }
    #choose_type ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #choose_type a{
        display: block;
        width: 100%;
        max-width: 480px;
        margin: 10px 0; 
        height: auto;
    }
}
@media (max-width :400px) {
    h1{
        font-size: 1.5rem;
        margin: 0 auto 30px;
    }
    h2{
        font-size: 1.1rem;
    }
}
img, div, header { border: 0; margin: 0; padding: 0 } a { text-decoration: none } a, a:visited { color: #333 } a:hover { cursor: pointer } img { vertical-align: middle } .aaa014 { border-radius: 4px; border-radius: var(--mdc-shape-medium, 4px); background-color: #fff; background-color: var(--mdc-theme-surface, #fff); box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) } .aaa014 .aaa035 { width: 100%; height: 100%; top: 0; left: 0 } .aaa014::after { border-radius: 4px; border-radius: var(--mdc-shape-medium, 4px) } .aaa009 { box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12); border-width: 1px; border-style: solid; border-color: #e0e0e0 } .aaa014 { display: flex; flex-direction: column; box-sizing: border-box; position: relative } .aaa014::after { position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; border: 1px solid transparent; border-radius: inherit; content: ""; pointer-events: none } @media screen and (forced-colors:active) { .aaa014::after { border-color: CanvasText } } .aaa009::after { border: none } .aaa099 { display: flex; flex-direction: column; box-sizing: border-box; position: relative; outline: none; color: inherit; text-decoration: none; cursor: pointer; overflow: hidden } .aaa099:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit } .aaa099:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit } .aaa099 { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: transform, opacity } .aaa099 .aaa034::before, .aaa099 .aaa034::after { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; content: "" } .aaa099 .aaa034::before { transition: opacity 15ms linear, background-color 15ms linear; z-index: 1; z-index: var(--mdc-ripple-z-index, 1) } .aaa099 .aaa034::after { z-index: 0; z-index: var(--mdc-ripple-z-index, 0) } .aaa099.VfPpkd-ksKsZd-mWPk3d .aaa034::before { transform: scale(var(--mdc-ripple-fg-scale, 1)) } .aaa099.VfPpkd-ksKsZd-mWPk3d .aaa034::after { top: 0; left: 0; transform: scale(0); transform-origin: center center } .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-ZNMTqd .aaa034::after { top: var(--mdc-ripple-top, 0); left: var(--mdc-ripple-left, 0) } .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-Tv8l5d-lJfZMc .aaa034::after { animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards } .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-Tv8l5d-OmS1vf .aaa034::after { animation: mdc-ripple-fg-opacity-out .15s; transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)) } .aaa099 .aaa034::before, .aaa099 .aaa034::after { top: -50%; left: -50%; width: 200%; height: 200% } .aaa099.VfPpkd-ksKsZd-mWPk3d .aaa034::after { width: var(--mdc-ripple-fg-size, 100%); height: var(--mdc-ripple-fg-size, 100%) } .aaa099 .aaa034::before, .aaa099 .aaa034::after { background-color: #000; background-color: var(--mdc-ripple-color, #000) } .aaa099:hover .aaa034::before, .aaa099.VfPpkd-ksKsZd-XxIAqe-OWXEXe-ZmdkE .aaa034::before { opacity: .04; opacity: var(--mdc-ripple-hover-opacity, .04) } .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe .aaa034::before, .aaa099:not(.VfPpkd-ksKsZd-mWPk3d):focus .aaa034::before { transition-duration: 75ms; opacity: .12; opacity: var(--mdc-ripple-focus-opacity, .12) } .aaa099:not(.VfPpkd-ksKsZd-mWPk3d) .aaa034::after { transition: opacity .15s linear } .aaa099:not(.VfPpkd-ksKsZd-mWPk3d):active .aaa034::after { transition-duration: 75ms; opacity: .12; opacity: var(--mdc-ripple-press-opacity, .12) } .aaa099.VfPpkd-ksKsZd-mWPk3d { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12) } .aaa099 .aaa034 { box-sizing: content-box; height: 100%; overflow: hidden; left: 0; pointer-events: none; position: absolute; top: 0; width: 100% } .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe::after, .aaa099:not(.VfPpkd-ksKsZd-mWPk3d):focus::after { position: absolute; box-sizing: border-box; width: 100%; height: 100%; top: 0; left: 0; border: 5px double transparent; border-radius: inherit; content: ""; pointer-events: none } @media screen and (forced-colors:active) { .aaa099.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe::after, .aaa099:not(.VfPpkd-ksKsZd-mWPk3d):focus::after { border-color: CanvasText } } .aaa010 { border-radius: 8px; background-color: #fff; border-width: 0; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) } .aaa010 .aaa035 { opacity: 0 } .aaa011 { border-radius: 8px; background-color: #fff; border: 1px solid rgb(218, 220, 224); box-shadow: none } .aaa011 .aaa035 { opacity: 0 } .aaa015 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; outline: none } .aaa035 { width: 100%; height: 100%; top: 0; left: 0 } .aaa035 { opacity: .11; background-color: transparent } a, div, img, header { border: 0; color: inherit; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline } .aaa003 { position: relative; } .aaa004 { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } .aaa006 { flex-shrink: 0; scroll-snap-align: start } .aaa020 { background-size: contain } .aaa035 { opacity: 0 } .aaa001 { --gap-width: 12px } .aaa002 { overflow: visible } .aaa005 { display: flex; gap: var(--gap-width); padding: calc(var(--gap-width)/2) 0; padding-left: 18px; scroll-snap-type: unset } .aaa007 { padding-left: calc(var(--gap-width)/2); margin-right: calc(var(--gap-width)/2*-1) } @media screen and (max-width:600px) { .aaa004::-webkit-scrollbar { display: none }  } @media screen and (min-width:600px) { .aaa001 { --gap-width: 16px } .aaa005 { padding-left: 40px } } @media screen and (min-width:1280px) { .aaa001 { --gap-width: 24px } .aaa002 { margin-left: 18px; margin-right: 18px; overflow: visible } } @media screen and (min-width:1280px) and (min-width:600px) { .aaa002 { margin-left: 40px; margin-right: 40px } } @media screen and (min-width:1280px) and (min-width:1280px) { .aaa002 { margin-left: 60px; margin-right: auto; max-width: calc(100vw - 120px) } } @media screen and (min-width:1280px) and (min-width:1440px) { .aaa002 { margin-left: auto; max-width: 1320px } } @media screen and (min-width:1280px) { .aaa005 { padding-left: unset; scroll-snap-type: x mandatory } } .aaa035 { width: 100%; height: 100%; top: 0; left: 0 } .aaa023 { align-items: center; display: inline-flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .aaa024 { display: inline-block; vertical-align: center; } .aaa026 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .aaa027, .aaa028 { font-family: Roboto, Arial, sans-serif; line-height: 1rem; font-size: .75rem; letter-spacing: .025em; font-weight: 400; font-family: Roboto, Helvetica, Arial, sans-serif; letter-spacing: .2px } .aaa030 .aaa031, .aaa027, .aaa028 { color: rgb(95, 99, 104); fill: rgb(95, 99, 104); stop-color: rgb(95, 99, 104) } .aaa030 .aaa031:not(:disabled), .aaa027:not(:disabled), .aaa028:not(:disabled) { color: rgb(95, 99, 104) } .aaa030 .aaa031 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166); stop-color: rgb(154, 160, 166) } .aaa030 .aaa031:not(:disabled) { color: rgb(154, 160, 166) } .aaa027 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166); stop-color: rgb(154, 160, 166) } .aaa027:not(:disabled) { color: rgb(154, 160, 166) } .aaa028 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166); stop-color: rgb(154, 160, 166) } .aaa028:not(:disabled) { color: rgb(154, 160, 166) } .aaa027 { padding: 0 8px } .aaa030 .aaa031 { font-size: .625rem } .aaa029, .aaa030 { align-items: center; display: inline-flex; height: 100% } .aaa030 { padding-left: 2px } .aaa025 { color: rgb(0, 0, 0); fill: rgb(32, 33, 36); stop-color: rgb(32, 33, 36); font-size: .875rem; font-weight: 400; letter-spacing: .0142857143em; line-height: 1.25rem; font-family: Roboto, Helvetica, Arial, sans-serif; letter-spacing: -.2px } .aaa032 { margin-left: 12px } .aaa019 { column-gap: 16px; display: grid; grid-template-columns: max-content auto; margin: 16px 0 } .aaa021 { border-radius: 12px; border-width: 0; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); height: 56px; width: 56px } .aaa021 .aaa035 { opacity: 0 } .aaa022 { display: grid; grid-template-rows: max-content; height: fit-content; row-gap: 2px } .aaa035 { opacity: 0 } .aaa013 { --gap-width: 12px; --card-width: calc(100vw - 48px); border: 0; display: flex; width: var(--card-width) } .aaa016 { border-radius: 8px; margin: 0 calc(var(--gap-width)/2*-1); padding: 0 calc(var(--gap-width)/2) } .aaa017 { display: flex; position: relative } .aaa017 { color: rgb(95, 99, 104); fill: rgb(95, 99, 104); stop-color: rgb(95, 99, 104); font-size: .875rem; font-weight: 400; letter-spacing: .0142857143em; line-height: 1.25rem } .aaa017 { color: rgb(95, 99, 104) } .aaa017 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166); stop-color: rgb(154, 160, 166) } .aaa017 { color: rgb(154, 160, 166) } .aaa018 { color: rgb(95, 99, 104); fill: rgb(95, 99, 104); stop-color: rgb(95, 99, 104); font-size: .875rem; font-weight: 400; letter-spacing: .0142857143em; line-height: 1.25rem; font-family: Roboto, Helvetica, Arial, sans-serif; align-items: center; display: flex; flex: 0 0 24px; flex-direction: column; margin: 34px 8px 0 0 } .aaa018:not(:disabled) { color: rgb(95, 99, 104) } .aaa018 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166); stop-color: rgb(154, 160, 166) } .aaa018:not(:disabled) { color: rgb(154, 160, 166) } .aaa097:not(:disabled) { color: rgb(32, 33, 36); } .aaa097 { color: rgb(32, 33, 36); fill: rgb(32, 33, 36); stop-color: rgb(32, 33, 36); font-family: "Google Sans", Helvetica, Arial, sans-serif; font-family: "Google Sans", Roboto, Arial, sans-serif; line-height: 1.5rem; font-size: 1.125rem; letter-spacing: 0; font-weight: 400; font-weight: 500; } .t5eBue .mZr3Me.aaa093 .TwyJFf { font-size: 24px; font-weight: 300 } .t5eBue .hAJqZ.aaa093, .t5eBue .r2Osbf.aaa093 { font-weight: 500 } .ovVTif .jGu02.qs41qe { color: #689f38 } .t5eBue.ovVTif .hAJqZ.aaa093, .t5eBue.ovVTif .r2Osbf.aaa093 { color: #8d9d29 } .wWRLCd .jGu02.qs41qe { color: #ed3b3b } .t5eBue.wWRLCd .hAJqZ.aaa093, .t5eBue.wWRLCd .r2Osbf.aaa093 { color: #a84137 } .LW9aSc .jGu02.qs41qe { color: #039be5 } .t5eBue.LW9aSc .hAJqZ.aaa093, .t5eBue.LW9aSc .r2Osbf.aaa093 { color: #1380b5 } .aaa094 { color: rgb(95, 99, 104); fill: rgb(95, 99, 104); background-color: #fff; border: 1px rgb(218, 220, 224) solid; border-radius: 8px; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; height: 32px; letter-spacing: .25px; line-height: 18px; min-width: auto; outline: none; overflow: hidden; position: relative; text-align: center; text-decoration: none; text-transform: none; transition: background .2s .1s; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; z-index: 0 } .P9KVBf .aaa094 { color: rgb(154, 160, 166); fill: rgb(154, 160, 166) } .P9KVBf .aaa094 { background-color: rgb(32, 33, 36) } .P9KVBf .aaa094 { border: 1px rgb(95, 99, 104) solid } .P9KVBf .aaa094::before, .P9KVBf .aaa094::after { background-color: rgb(218, 220, 224); background-color: var(--mdc-ripple-color, rgb(218, 220, 224)) } .P9KVBf .aaa094:hover::before, .P9KVBf .aaa094.VfPpkd-ksKsZd-XxIAqe-OWXEXe-ZmdkE::before { opacity: .08; opacity: var(--mdc-ripple-hover-opacity, .08) } .P9KVBf .aaa094.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe::before, .P9KVBf .aaa094:not(.VfPpkd-ksKsZd-mWPk3d):focus::before { transition-duration: 75ms; opacity: .24; opacity: var(--mdc-ripple-focus-opacity, .24) } .P9KVBf .aaa094:not(.VfPpkd-ksKsZd-mWPk3d)::after { transition: opacity .15s linear } .P9KVBf .aaa094:not(.VfPpkd-ksKsZd-mWPk3d):active::after { transition-duration: 75ms; opacity: .24; opacity: var(--mdc-ripple-press-opacity, .24) } .P9KVBf .aaa094.VfPpkd-ksKsZd-mWPk3d { --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24) } .aaa094.qs41qe { border: none; padding: 1px } .aaa094.RDPZE { cursor: auto } .aaa094.aaa093 { color: rgb(26, 115, 232); fill: rgb(26, 115, 232); background-color: rgb(232, 240, 254); border: none; padding: 1px } .P9KVBf .aaa094.aaa093 { color: rgb(138, 180, 248); fill: rgb(138, 180, 248) } .P9KVBf .aaa094.aaa093 { background-color: rgba(138, 180, 248, .24) } .P9KVBf .aaa094:focus { color: #fff; fill: #fff } .aaa094:focus .aaa090 { opacity: .12 } .aaa094 .aaa090 { background-color: rgb(95, 99, 104) } .P9KVBf .aaa094 .aaa090 { background-color: rgb(218, 220, 224) } .aaa090 { bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0 } .UQI9cd .aaa089 { margin: 0 12px } .aaa089 { align-items: center; display: flex; position: relative; margin: 0 16px } .aaa089 .aaa086 { display: inline-block; margin: 6px 4px } .aaa088 { display: inline-flex; flex-shrink: 0; margin: 0 4px 0 0 } .aaa088.aaa087 { display: none } .aaa094.u3bW4e { outline: 1px solid transparent } .aaa095 { display: flex; flex-wrap: wrap; gap: 12px } .aaa092 { border-radius: 9999px } .aaa092 .Ka7T4c, .KnEF3e .Ka7T4c { font-size: 16px } .KuPXpe.aaa091 { color: #056449; fill: #056449; stop-color: #056449 } .KuPXpe.aaa091:not(:disabled) { color: #056449 } .P9KVBf .KuPXpe.aaa091 { color: #00b380; fill: #00b380; stop-color: #00b380 } .P9KVBf .KuPXpe.aaa091:not(:disabled) { color: #00b380 } .mrSlsb.aaa093 { color: #056449; fill: #056449; stop-color: #056449; background-color: #e6f3ef } .mrSlsb.aaa093:not(:disabled) { color: #056449 } .P9KVBf .mrSlsb.aaa093 { color: #00b380; fill: #00b380; stop-color: #00b380 } .P9KVBf .mrSlsb.aaa093:not(:disabled) { color: #00b380 } .mrSlsb.aaa093:not(:disabled) { background-color: #e6f3ef } .P9KVBf .mrSlsb.aaa093 { background-color: #013d2c } .P9KVBf .mrSlsb.aaa093:not(:disabled) { background-color: #013d2c } .aaa091.aaa093 { color: #056449; fill: #056449; stop-color: #056449; background-color: #e6f3ef } .aaa091.aaa093:not(:disabled) { color: #056449 } .P9KVBf .aaa091.aaa093 { color: #00b380; fill: #00b380; stop-color: #00b380 } .P9KVBf .aaa091.aaa093:not(:disabled) { color: #00b380 } .aaa091.aaa093:not(:disabled) { background-color: #e6f3ef } .P9KVBf .aaa091.aaa093 { background-color: #013d2c } .P9KVBf .aaa091.aaa093:not(:disabled) { background-color: #013d2c } .P9KVBf .NWM5Eb.aaa093 { color: #ff708c; fill: #ff708c; stop-color: #ff708c } .P9KVBf .NWM5Eb.aaa093:not(:disabled) { color: #ff708c } .NWM5Eb.aaa093:not(:disabled) { background-color: #f9e8ee } .P9KVBf .NWM5Eb.aaa093 { background-color: #610b29 } .P9KVBf .NWM5Eb.aaa093:not(:disabled) { background-color: #610b29 } .ArLwsf.aaa093 { color: #035282; fill: #035282; stop-color: #035282; background-color: #e5f1f9 } .ArLwsf.aaa093:not(:disabled) { color: #035282 } .P9KVBf .ArLwsf.aaa093 { color: #50b4f4; fill: #50b4f4; stop-color: #50b4f4 } .P9KVBf .ArLwsf.aaa093:not(:disabled) { color: #50b4f4 } .ArLwsf.aaa093:not(:disabled) { background-color: #e5f1f9 } .P9KVBf .ArLwsf.aaa093 { background-color: #024066 } .P9KVBf .ArLwsf.aaa093:not(:disabled) { background-color: #024066 } .aaa098 { margin-left: 24px; margin-right: 24px; padding-bottom: 20px } .aaa097 { color: rgb(32, 33, 36); fill: rgb(32, 33, 36); stop-color: rgb(32, 33, 36); font-family: "Google Sans", Helvetica, Arial, sans-serif; font-family: "Google Sans", Roboto, Arial, sans-serif; line-height: 1.5rem; font-size: 1.125rem; letter-spacing: 0; font-weight: 400; font-weight: 500 } .aaa097:not(:disabled) { color: rgb(32, 33, 36) } .P9KVBf .aaa097 { color: rgb(232, 234, 237); fill: rgb(232, 234, 237); stop-color: rgb(232, 234, 237) } .P9KVBf .aaa097:not(:disabled) { color: rgb(232, 234, 237) } .aaa096 { margin-left: 24px; margin-right: 24px; margin-bottom: 8px } @media screen and (min-width:600px) { .aaa096, .aaa098 { margin-left: 48px; margin-right: 48px } .aaa013 { --gap-width: 16px; --card-width: calc(75vw - 76px) } } @media screen and (min-width:840px) { .aaa013 { --card-width: calc(50vw - 56px) } } @media screen and (min-width:960px) { .aaa013 { --card-width: calc(33.3333333333vw - 42.6666666667px) } } @media screen and (min-width:1280px) { .aaa096, .aaa098 { margin-left: 72px; margin-right: 72px } .aaa097 { font-family: "Google Sans", Roboto, Arial, sans-serif; line-height: 1.75rem; font-size: 1.375rem; letter-spacing: 0; font-weight: 400; font-weight: 500 } .aaa013 { --gap-width: 24px; --card-width: calc(33.3333333333vw - 64px) } .aaa018 { font-size: 1rem; font-weight: 400; letter-spacing: .00625em; line-height: 1.5rem; flex: 0 0 32px; margin-top: 40px } .aaa021 { height: 64px; width: 64px } .aaa022 { row-gap: 0 } .aaa028 { font-size: .875rem; font-weight: 400; letter-spacing: .0142857143em; line-height: 1.25rem; letter-spacing: .2px } .aaa030 .aaa031 { font-size: .75rem } .aaa025 { font-size: 1rem; font-weight: 400; letter-spacing: .00625em; line-height: 1.5rem; letter-spacing: 0 } .aaa032 { margin-left: 16px } } @media screen and (min-width:1440px) { .aaa096, .aaa098 { margin-left: auto; margin-right: auto; max-width: 1296px } .aaa013 { --card-width: 416px } }