/* Brand adaptation of the uploaded Friends layout. Keep its split intro and colour-stage composition. */
body.tl-friends-page{--theme-color:#249546;background:linear-gradient(30deg,#4bc3e5 45%,#89bf73 79%);color:#17252b;overflow-x:clip}
body.tl-friends-page #friends-main{position:relative;overflow:clip visible}
body.tl-friends-page .friends-fv{padding-top:180px;overflow:hidden}
body.tl-friends-page .friends-fv:after{position:absolute;height:8px;bottom:0}
body.tl-friends-page .friends-fv .read{background:#fff;color:#1c3327;max-width:90%;padding:14px 36px}
body.tl-friends-page .friends-fv .read span{color:inherit;font-size:clamp(18px,2.4vw,32px)}
body.tl-friends-page .friends-fv .welcome{color:#fff;font-size:clamp(42px,6vw,78px)}
body.tl-friends-page .friends-fv h1.tl-page-title{color:#fff!important;font-weight:800!important;line-height:1.05!important;letter-spacing:-.035em!important;font-size:clamp(40px,5.4vw,76px)!important;margin-bottom:28px!important;padding:0!important}
body.tl-friends-page .friends-fv h1 span{display:block;font-size:.53em;letter-spacing:.025em;margin-bottom:12px}
body.tl-friends-page .friends-fv h1 strong{display:block;font-weight:800}
body.tl-friends-page .friends-fv .title_area>p{background:#f55b96;border-radius:45% 55% 49% 51%/50% 43% 57% 50%;width:340px;max-width:100%;font-size:22px}
body.tl-friends-page .friends-fv .text_area p{font-weight:400;font-size:17px;line-height:2;color:#17252b}
body.tl-friends-page .friends-fv .chara_area{position:relative;bottom:auto;margin:55px auto 0;width:min(1040px,94%);overflow:visible}
body.tl-friends-page .friends-fv .chara_wrap{display:flex;align-items:end;justify-content:center;aspect-ratio:auto;width:100%;transform:none;gap:4px;padding:0 0 15px}
body.tl-friends-page .friends-fv .chara{position:relative;inset:auto;width:calc(100% / 7);opacity:1;transform:none;animation:none}
body.tl-friends-page .friends-fv .chara:nth-child(even){margin-bottom:30px}
body.tl-friends-page .friends-fv .chara img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .2s}
body.tl-friends-page .friends-fv .chara:hover img{transform:translateY(-8px) rotate(-5deg)}
body.tl-friends-page .friends-fv .cloud_area{position:absolute!important;pointer-events:none;opacity:.45}
body.tl-friends-page .friends_area{height:auto;position:relative;z-index:2}
body.tl-friends-page .friends-wrap{position:relative;height:auto}
body.tl-friends-page .friends_area .friends{position:relative;opacity:1;z-index:1;min-height:760px;height:auto;padding:110px 100px;box-sizing:border-box;color:var(--ink);overflow:hidden;scroll-margin-top:40px}
body.tl-friends-page .friends_area .friends .inr{width:100%;max-width:1100px;gap:35px;transform:none}
body.tl-friends-page .friends_area .friends .text_area{padding:20px 0 0;min-width:0;flex:1}
body.tl-friends-page .friends_area .friends .text_area>*{opacity:1;transform:none}
body.tl-friends-page .friends_area .friends h2{font-size:clamp(38px,5.2vw,76px);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink);margin-bottom:35px;overflow-wrap:anywhere}
body.tl-friends-page .friends_area .friends .num{font-size:16px;margin-bottom:28px;color:#202720}
body.tl-friends-page .friends_area .friends .info{color:var(--ink)}
body.tl-friends-page .friends_area .friends .info h3{font-size:26px;padding-right:20px;line-height:1.6}
body.tl-friends-page .friends_area .friends .info p{font-size:16px;line-height:1.9;letter-spacing:.03em;padding-left:20px}
body.tl-friends-page .friends_area .friends .info p:before{background:currentColor;opacity:.6;width:2px}
body.tl-friends-page .friends_area .friends .slide_area{position:relative;flex:none;width:35%;aspect-ratio:1;opacity:1;transform:none;background:#fff;border-radius:50%;margin:auto 0}
body.tl-friends-page .friends_area .friend-portrait{display:block;position:relative;width:110%;max-width:none;height:auto;aspect-ratio:1;object-fit:contain;margin:-5%;overflow:hidden}
body.tl-friends-page .friend-quote{font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.7;margin-top:28px;color:var(--ink)}
body.tl-friends-page .friend-role{font-size:13px;line-height:1.8;margin-top:14px;color:var(--ink)}
body.tl-friends-page .friends-navi{display:none}
body.tl-friends-page .friends_area.is-sticky{height:700vh}
body.tl-friends-page .is-sticky .friends-wrap{position:sticky;top:0;height:100vh}
body.tl-friends-page .is-sticky .friends{position:absolute;inset:0;height:100%;min-height:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s;z-index:0}
body.tl-friends-page .is-sticky .friends.is-current{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
body.tl-friends-page .is-sticky .friends-navi{display:flex;position:absolute;top:50%;bottom:auto;left:18px;right:auto;transform:translateY(-50%);height:auto;width:52px;flex-direction:column;gap:8px;z-index:5}
body.tl-friends-page .friends-navi a{display:block;width:48px;height:48px;margin:0;border:2px solid transparent;border-radius:50%;background:#ffffffbd;padding:3px;box-sizing:border-box}
body.tl-friends-page .friends-navi a[aria-current="true"]{border-color:#17252b;background:#fff;transform:scale(1.1)}
body.tl-friends-page .friends-navi img{width:100%;height:100%;object-fit:contain}
body.tl-friends-page .friends-navi span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
body.tl-friends-page #friends-main a:focus-visible{outline:3px solid #17252b;outline-offset:5px}
@media(max-width:1100px){body.tl-friends-page .friends_area .friends{padding:100px 90px}body.tl-friends-page .friends_area .friends .info{display:block}body.tl-friends-page .friends_area .friends .info p{padding-left:0;margin-top:18px}body.tl-friends-page .friends_area .friends .info p:before{display:none}}
@media(max-width:800px){
 body.tl-friends-page .friends-fv{padding-top:130px}
 body.tl-friends-page .friends-fv .text_wrap{width:84%}
 body.tl-friends-page .friends-fv .read{padding:12px 20px;margin-bottom:30px}
 body.tl-friends-page .friends-fv .title_area{width:100%;min-width:0;margin-bottom:30px}
 body.tl-friends-page .friends-fv .title_area>p{width:270px;height:65px;font-size:18px}
 body.tl-friends-page .friends-fv .text_area{width:100%;margin:0;padding:0}
 body.tl-friends-page .friends-fv .text_area p{font-size:15px}
 body.tl-friends-page .friends-fv .chara_area{margin-top:30px}
 body.tl-friends-page .friends-fv .chara:nth-child(even){margin-bottom:12px}
 body.tl-friends-page .friends_area .friends{min-height:0;padding:65px 25px 75px}
 body.tl-friends-page .friends_area .friends .inr{display:flex;flex-direction:column;gap:30px;align-items:center}
 body.tl-friends-page .friends_area .friends .slide_area{width:65%;max-width:290px;margin:0 auto}
 body.tl-friends-page .friends_area .friends .text_area{padding:0;flex:auto;width:100%;max-width:500px;text-align:center}
 body.tl-friends-page .friends_area .friends .num{font-size:13px;margin:0 auto 18px}
 body.tl-friends-page .friends_area .friends h2{font-size:clamp(36px,10vw,60px);margin-bottom:20px}
 body.tl-friends-page .friends_area .friends .info h3{padding:0;font-size:24px;margin:0}
 body.tl-friends-page .friends_area .friends .info p{font-size:15px;text-align:left;padding:20px 0 0;margin-top:0}
 body.tl-friends-page .friend-quote{font-size:18px;margin-top:22px}
}
@media(prefers-reduced-motion:reduce){body.tl-friends-page #friends-main *,body.tl-friends-page #friends-main *:before{animation:none!important;transition:none!important}}

/* Header branding is managed globally by logo-theme.js. */