.design_guide_browser{position:relative;overflow:hidden;border-radius:10px;background-color:#fff;box-shadow:4px 4px 5px rgba(0,0,0,.2)}.design_guide_browser__bar{display:flex;align-items:center;gap:5px;padding:5px 10px;background-color:#c9c9c9}.design_guide_browser__bar span{width:10px;height:10px;border-radius:50%}.design_guide_browser__bar span:nth-child(1){background-color:#d77688}.design_guide_browser__bar span:nth-child(2){background-color:#e8c156}.design_guide_browser__bar span:nth-child(3){background-color:#68bb9a}.design_guide_browser__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;outline:1px solid #ddd;outline-offset:-1px}.design_guide_browser__link{display:block}.design_guide_browser__link::after{content:"";position:absolute;inset:0;z-index:1}.design_guide_hero{padding:100px 40px;background-image:url(/assets/img/guide/design/intro-bg.png);background-position:center;background-size:cover}@media screen and (max-width: 768px){.design_guide_hero{padding:100px 20px}}.design_guide_hero__inner{max-width:1120px;margin:0 auto}.design_guide_hero__en{display:flex;align-items:center;justify-content:center;gap:22px}.design_guide_hero__en img{display:block;max-width:100%;height:auto}@media screen and (max-width: 768px){.design_guide_hero__en{flex-direction:column;gap:10px}.design_guide_hero__en img:nth-child(1){width:57%;max-width:238px}.design_guide_hero__en img:nth-child(2){width:100%;max-width:417px}}.design_guide_hero__title{display:flex;flex-direction:column;margin-top:40px;font-size:35px;font-weight:600;line-height:1.4;text-align:center}@media screen and (max-width: 768px){.design_guide_hero__title{margin-top:30px}}@media screen and (max-width: 768px){.design_guide_hero__title_sub{font-size:24px}}@media screen and (max-width: 768px){.design_guide_hero__title_main{font-size:18px}}.design_guide_hero__description{margin-top:40px;font-size:16px;font-weight:600;line-height:1.8;text-align:center}@media screen and (max-width: 768px){.design_guide_hero__description{margin-top:30px;font-size:14px;line-height:2;text-align:left}}.design_guide_hero__pages{display:flex;justify-content:space-between;margin-top:60px}@media screen and (max-width: 768px){.design_guide_hero__pages{flex-wrap:wrap;row-gap:40px;margin-top:40px}}.design_guide_hero__page{width:calc(25% - 30px)}@media screen and (max-width: 768px){.design_guide_hero__page{width:calc(50% - 10px)}}.design_guide_hero__page_name{display:block;margin-bottom:5px}.design_guide_section,.design_guide_faq{position:relative}.design_guide_trim{position:relative;z-index:1;height:0;pointer-events:none}.design_guide_trim img{position:absolute;top:-10px}.design_guide_trim img:nth-child(1){left:30px}.design_guide_trim img:nth-child(2){left:50%;transform:translateX(-50%)}.design_guide_trim img:nth-child(3){right:30px}.design_guide_trim img:nth-child(4){left:20px}.design_guide_trim img:nth-child(5){left:50%;transform:translateX(-50%)}.design_guide_trim img:nth-child(6){right:20px}.design_guide_intro{position:relative;padding:100px 40px}@media screen and (max-width: 768px){.design_guide_intro{padding:100px 20px}}.design_guide_intro__inner{max-width:1120px;margin:0 auto}.design_guide_intro__title{font-size:34px;font-weight:600;text-align:center}@media screen and (max-width: 768px){.design_guide_intro__title{font-size:26px}}.design_guide_intro__description{margin-top:20px;font-size:16px;line-height:1.8;text-align:center}@media screen and (max-width: 768px){.design_guide_intro__description{font-size:14px;line-height:2;text-align:left}}.design_guide_intro__cards{display:flex;align-items:stretch;gap:20px;margin-top:40px}.design_guide_intro__cards>li{display:flex;flex:1}@media screen and (max-width: 768px){.design_guide_intro__cards{flex-direction:column;gap:10px}}.design_guide_card{display:flex;flex-direction:column;gap:20px;width:100%;padding:20px;border:1px solid #ddd;border-radius:15px;background-color:#fff;color:#333;text-decoration:none;transition:border-color .3s,background-color .3s}@media screen and (min-width: 769px){.design_guide_card:hover{border-color:#000;background-color:#f3f3f3}}.design_guide_card__num{font-family:"Oswald",sans-serif;letter-spacing:.05em;font-size:40px;font-weight:600;line-height:1.2}@media screen and (max-width: 768px){.design_guide_card__num{font-size:30px}}.design_guide_card__name{font-size:26px;font-weight:600;line-height:1.4}.design_guide_card__name_en{font-family:"Oswald",sans-serif;letter-spacing:.05em;display:block;color:#333;font-size:14px;font-weight:600;text-transform:uppercase}.design_guide_card__name_en_accent{color:#c40000}.design_guide_card__description{font-size:16px;font-weight:600;line-height:1.5}.design_guide_card__when_label{color:#333;font-size:12px;font-weight:600}.design_guide_card__when_list{margin-top:10px;font-size:14px;line-height:1.4}.design_guide_card__when_list li{margin-left:21px;list-style:disc}.design_guide_card__when_list li+li{margin-top:10px}.design_guide_card__count{display:flex;align-items:baseline;justify-content:flex-end;margin-top:auto}.design_guide_card__count_number{font-family:"Oswald",sans-serif;letter-spacing:.05em;font-size:24px;font-weight:600}.design_guide_card__count_unit{font-size:16px;font-weight:600}.design_guide_accent{color:#c40000;font-weight:600}.design_guide strong{font-weight:600}.design_guide_section{padding:100px 40px}@media screen and (max-width: 768px){.design_guide_section{padding:100px 20px}}.design_guide_section__inner{position:relative;max-width:1120px;margin:0 auto}.design_guide_section__header{display:flex;align-items:center;gap:30px}@media screen and (max-width: 768px){.design_guide_section__header{align-items:flex-start;gap:15px}}.design_guide_section__num{font-family:"Oswald",sans-serif;letter-spacing:.05em;font-size:90px;font-weight:600;line-height:1}@media screen and (max-width: 768px){.design_guide_section__num{margin-top:4px;font-size:50px}}@media screen and (max-width: 768px){.design_guide_section__titles{display:flex;flex:1;flex-direction:column}}.design_guide_section__title{font-size:40px;font-weight:600;line-height:1.5}@media screen and (max-width: 768px){.design_guide_section__title{font-size:30px}}.design_guide_section__lead{font-size:26px;line-height:1.5}@media screen and (max-width: 768px){.design_guide_section__lead{font-size:20px}}.design_guide_count{position:absolute;top:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;border:1px solid #ddd;border-radius:50%}@media screen and (max-width: 768px){.design_guide_count{position:static;flex-direction:row;align-items:baseline;gap:3px;align-self:flex-end;width:auto;height:auto;margin-top:10px;border:none}}.design_guide_count__main{display:flex;align-items:baseline;margin-bottom:5px}.design_guide_count__main:last-child{margin-bottom:0}@media screen and (max-width: 768px){.design_guide_count__main{margin-bottom:0}}.design_guide_count__prefix{margin-right:2px;font-size:16px;font-weight:600}@media screen and (max-width: 768px){.design_guide_count__prefix{font-size:14px}}.design_guide_count__number{font-family:"Oswald",sans-serif;letter-spacing:.05em;color:#c40000;font-size:24px;font-weight:600}@media screen and (max-width: 768px){.design_guide_count__number{font-size:20px}}.design_guide_count__unit{margin-left:2px;font-size:16px;font-weight:600}@media screen and (max-width: 768px){.design_guide_count__unit{font-size:14px}}.design_guide_count__label{font-size:14px;font-weight:600}.design_guide_count--long .design_guide_count__main{flex-direction:column;align-items:center}@media screen and (max-width: 768px){.design_guide_count--long .design_guide_count__main{flex-direction:row;align-items:baseline}}.design_guide_count--long .design_guide_count__unit{margin-top:8px;margin-left:0}@media screen and (max-width: 768px){.design_guide_count--long .design_guide_count__unit{margin-top:0;margin-left:2px}}.design_guide_section__description{margin-top:30px;font-size:16px;line-height:1.8}.design_guide_tips{margin-top:30px}.design_guide_tips__title{font-size:22px;font-weight:600;text-decoration:underline}.design_guide_tips__list{margin-top:20px;font-size:16px;line-height:1.875}.design_guide_tips__list li{display:flex;align-items:flex-start;gap:10px}.design_guide_tips__list li+li{margin-top:10px}.design_guide_tips__list li img{width:20px;height:20px;margin-top:5px;border:1px solid #ddd}.design_guide_section__buttons{display:flex;gap:20px;margin-top:30px}@media screen and (max-width: 768px){.design_guide_section__buttons{flex-direction:column;align-items:center}}.design_guide_section__button{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:1px solid #000;border-radius:40px;color:#333;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .3s,color .3s}@media screen and (min-width: 769px){.design_guide_section__button:hover{background-color:#000;color:#fff}}.design_guide_section__visual{position:relative;max-width:1120px;margin:100px auto 0;padding:80px 50px 60px;border-radius:40px;background-color:#f3f3f3}@media screen and (max-width: 768px){.design_guide_section__visual{padding:100px 40px 60px;border-radius:20px}}.design_guide_section__en{position:absolute;top:0;left:50%;display:flex;align-items:center;gap:20px;transform:translate(-50%, -50%)}.design_guide_section__en img{display:block}@media screen and (max-width: 768px){.design_guide_section__en{flex-direction:column;gap:5px;transform:translate(-50%, -25%);scale:.9}}@media screen and (max-width: 768px){.design_guide_section--everyone .design_guide_section__en{transform:translate(-50%, -50%)}}.design_guide_section__screens{display:flex;justify-content:center;gap:50px}.design_guide_section__screens .design_guide_browser{flex:0 1 340px;min-width:0}@media screen and (max-width: 768px){.design_guide_section__screens{flex-direction:column;align-items:center}.design_guide_section__screens .design_guide_browser{flex:none;width:100%}}@media screen and (min-width: 769px){.design_guide_section--gallery .design_guide_section__screens .design_guide_browser{flex-basis:307px}}.design_guide_browser__caption{position:absolute;bottom:0;left:0;padding:5px 15px;background-color:rgba(0,0,0,.8);color:#fff;font-size:12px}.design_guide_faq{padding:100px 40px}@media screen and (max-width: 768px){.design_guide_faq{padding:100px 20px}}.design_guide_faq__inner{max-width:1120px;margin:0 auto}.design_guide_faq__header{text-align:center}.design_guide_faq__title{margin-top:15px;font-size:26px}.design_guide_faq__items{display:flex;flex-direction:column;gap:20px;margin-top:55px}.design_guide_faq__item{border:1px solid #ddd;border-radius:15px;transition:border-color .3s}@media screen and (min-width: 769px){.design_guide_faq__item:hover{border-color:#000}}.design_guide_faq__question{display:flex;align-items:center;gap:10px;padding:30px 20px;cursor:pointer;list-style:none}.design_guide_faq__question::-webkit-details-marker{display:none}.design_guide_faq__question span{flex:1;font-size:22px;font-weight:600;line-height:1.5}@media screen and (max-width: 768px){.design_guide_faq__question span{font-size:18px}}.design_guide_faq__question::after{content:"";flex-shrink:0;width:17px;height:9px;background-color:#333;mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 9"%3E%3Cpath d="M1 1l7.5 6.5L16 1" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E') center/contain no-repeat}.design_guide_faq__q{flex-shrink:0}@media screen and (max-width: 768px){.design_guide_faq__q{width:auto;height:20px}}.design_guide_faq__item[open] .design_guide_faq__question::after{transform:scaleY(-1)}.design_guide_faq__answer{margin-top:-10px;padding:0 20px 30px}.design_guide_faq__answer p{font-size:16px;line-height:1.8}.design_guide_faq__answer p a{color:#2756a8;text-decoration:underline}.design_guide_faq__links{margin:10px 0}.design_guide_faq__links+p{margin-top:20px}.design_guide_faq__links li+li{margin-top:5px}.design_guide_faq__links a{color:#2756a8;font-size:16px;line-height:1.8;text-decoration:underline}.fadein--standby{opacity:0;transform:translateY(40px);transition:opacity .4s ease-out,transform .4s ease-out}@media screen and (max-width: 768px){.fadein--standby{transform:translateY(24px)}}.fadein--standby.fadein--active{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion: reduce){.fadein--standby{opacity:1;transform:none;transition:none}}