.page-about__hero-section{display:flex;flex-direction:column;align-items:center;width:100%;background-color:#ffffff;padding-top:10px} .page-about__hero-image{width:100%;max-width:1200px;margin:0 auto} .page-about__hero-image img{display:block;width:100%;height:auto;aspect-ratio:1020/300;object-fit:cover} .page-about__hero-content{width:100%;max-width:1200px;margin:0 auto;padding:24px 20px 16px;text-align:center;box-sizing:border-box} .page-about__hero-title{color:#000000;font-weight:800;line-height:1.3;letter-spacing:.2px;max-width:960px;margin:0 auto 12px} .page-about__hero-subtitle{color:#333333;font-size:1.05rem;line-height:1.7;max-width:860px;margin:0 auto} .page-about__intro-section{background-color:#f5f9fe;padding:40px 20px;width:100%;box-sizing:border-box} .page-about__intro-block{max-width:1020px;margin:0 auto;text-align:center} .page-about__intro-title{color:#000000;font-weight:700;line-height:1.4;margin-bottom:20px} .page-about__intro-text{color:#333333;font-size:1rem;line-height:1.8;margin-bottom:16px;text-align:justify} .page-about__features-section{padding:56px 20px;width:100%;box-sizing:border-box;background-color:#ffffff} .page-about__features-heading{color:#26A9E0;text-align:center;font-weight:700;line-height:1.4;margin-bottom:36px;padding:0 12px} .page-about__features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;max-width:1200px;margin:0 auto} .page-about__feature-item{background-color:#f0f7fc;border-radius:12px;padding:24px 20px;border-top:4px solid #26A9E0;box-sizing:border-box} .page-about__feature-title{color:#26A9E0;font-weight:700;line-height:1.5;margin-bottom:12px} .page-about__feature-text{color:#333333;font-size:.95rem;line-height:1.7;margin-bottom:0} .page-about__trademark-section{background-color:#ffffff;padding:40px 20px;width:100%;box-sizing:border-box} .page-about__trademark-title{color:#000000;font-weight:700;text-align:center;margin-bottom:32px} .page-about__trademark-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px;justify-items:center;max-width:1200px;margin:0 auto} .page-about__trademark-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:280px} .page-about__trademark-item img{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain} .page-about__trademark-item:nth-child(5){grid-column:2} .page-about__trademark-item:nth-child(6){grid-column:3} .page-about__trademark-cta{text-align:center;margin-top:28px} .page-about__trademark-cta a{display:inline-block;background-color:#EA7C07;color:#ffffff;font-weight:700;text-decoration:none;padding:14px 36px;border-radius:999px;font-size:1rem;transition:background-color .2s ease} .page-about__trademark-cta a:hover{background-color:#d56f04} .page-about__guide-section{background-color:#f5f9fe;padding:56px 20px;width:100%;box-sizing:border-box} .page-about__guide-inner{max-width:860px;margin:0 auto;padding:0} .page-about__guide-title{color:#000000;font-weight:700;text-align:center;margin-bottom:28px} .page-about__guide-step{background-color:#ffffff;border-radius:12px;padding:18px 24px;margin-bottom:16px;border:1px solid #dcebf7;box-sizing:border-box} .page-about__guide-step summary{color:#26A9E0;font-weight:600;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .page-about__guide-step summary::-webkit-details-marker{display:none} .page-about__guide-step[open] summary{border-bottom:1px solid #dcebf7;padding-bottom:12px;margin-bottom:14px;color:#26A9E0} .page-about__guide-icon{color:#26A9E0;font-size:1.5rem;font-weight:700} .page-about__guide-text{color:#333333;font-size:.96rem;line-height:1.8;margin-top:8px} .page-about__guide-more{color:#EA7C07;font-weight:600} .page-about__guide-more:hover{color:#d56f04} .page-about__blog-highlight{background-color:#ffffff;padding:56px 20px;width:100%;box-sizing:border-box} .page-about__blog-title{color:#000000;font-weight:700;text-align:center;margin-bottom:28px;line-height:1.4} .page-about__blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1200px;margin:0 auto} .page-about__blog-card{background:#f8fcff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(38,169,224,.08);border:1px solid #e3f0f8;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease} .page-about__blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(38,169,224,.15)} .page-about__blog-card img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover} .page-about__blog-card-title{font-size:1.02rem;color:#000000;line-height:1.55;padding:16px 18px 20px} .page-about__blog-card-title a{color:#000000;text-decoration:none} .page-about__blog-card-title a:hover{color:#26A9E0} .page-about__blog-cta{text-align:center;margin-top:32px} .page-about__blog-all{display:inline-block;background-color:#26A9E0;color:#ffffff;padding:12px 28px;border-radius:999px;text-decoration:none;font-weight:600;transition:background-color .2s ease} .page-about__blog-all:hover{background-color:#1b8fbf} .page-about{color:#333333} .page-about img{max-width:100%} @media (max-width:768px){ .page-about__hero-section{padding-top:8px} .page-about__hero-image img{aspect-ratio:2/1} .page-about__hero-content{padding-top:18px} .page-about__hero-title{font-size:1.3rem} .page-about__hero-subtitle{font-size:.95rem} .page-about__intro-section{padding:32px 16px} .page-about__features-section{padding:40px 16px} .page-about__features-heading{font-size:1.4rem} .page-about__trademark-title{font-size:1.4rem} .page-about__trademark-grid{grid-template-columns:repeat(2,1fr)} .page-about__trademark-item:nth-child(5),.page-about__trademark-item:nth-child(6){grid-column:auto} .page-about__trademark-cta a{width:100%;max-width:100%;box-sizing:border-box;text-align:center;padding:14px 20px} .page-about__guide-section{padding:40px 16px} .page-about__guide-title{font-size:1.4rem} .page-about__guide-step{padding:14px 16px} .page-about__guide-step summary{font-size:.98rem} .page-about__blog-highlight{padding:40px 16px} .page-about__blog-title{font-size:1.4rem} .page-about__blog-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .page-about__blog-card-title{font-size:.9rem} .page-about__blog-all{width:100%;max-width:100%;box-sizing:border-box;text-align:center} .page-about__blog-card img{aspect-ratio:2/1} .page-about img{max-width:100%!important;height:auto!important} .page-about__feature-item{padding:20px 16px} .page-about__feature-text{font-size:.9rem} .page-about__intro-title{font-size:1.3rem} .page-about__hero-subtitle{text-align:center} }