@media screen and (max-width:767px){.page-blog{--blog-mobile-header-height:5.6rem;--blog-mobile-hero-height:33.333vw}}.page-blog .l-contents{background-color:#f9f8f5;color:var(--color-base);font-family:var(--font-family-hiragino-ud)}@media screen and (max-width:767px){.page-blog .blog-index{padding-top:calc(var(--blog-mobile-header-height) + var(--blog-mobile-hero-height))}.page-blog .l-header{border-radius:0;box-shadow:0 1px 0 0 var(--color-gray-100);height:5.6rem;margin:0;padding:0 1.6rem;top:0;width:100%}}.blog-index .blog-hero{background:linear-gradient(135deg,var(--color-code-light-blue-500) 0,#0267bf 100%);line-height:0;position:relative}@media screen and (min-width:768px){.blog-index .blog-hero{padding-top:7.7rem}}@media screen and (max-width:767px){.blog-index .blog-hero{left:0;padding-top:var(--blog-mobile-header-height);position:fixed;right:0;top:0;z-index:400}}.blog-index .blog-hero:after{background-color:#f9f8f5;bottom:-1px;content:"";display:block;left:0;position:absolute;right:0;z-index:1}@media screen and (min-width:768px){.blog-index .blog-hero:after{border-radius:2.4rem 2.4rem 0 0;height:2.4rem}}@media screen and (max-width:767px){.blog-index .blog-hero:after{display:none}}.blog-index .blog-hero-img{display:block;height:auto;width:100%}@media screen and (min-width:768px){.blog-index .blog-hero-img{margin:0 auto;max-width:1200px}}.sr-only{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0,0,0,0)}@media screen and (min-width:768px){.blog-list{padding:6.4rem 4rem 8rem}}@media screen and (max-width:767px){.blog-list{padding:3.2rem 1.6rem 4.8rem}.blog-index .blog-list{position:relative;z-index:1}}.blog-list-inner{margin:0 auto;max-width:1120px}.blog-grid{display:grid;gap:3.2rem}@media screen and (min-width:768px){.blog-grid{gap:4rem 3.2rem;grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:767px){.blog-grid{gap:2.4rem;grid-template-columns:1fr}}.blog-card{background-color:var(--color-white);border-radius:var(--border-radius);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;transition:transform .3s var(--ease-power2-out),box-shadow .3s var(--ease-power2-out)}@media screen and (hover:hover) and (min-width:768px){.blog-card:hover{box-shadow:0 4px 12px #00000014,0 8px 32px #0000000f;transform:translateY(-4px)}}@media (hover:none){.blog-card:active{box-shadow:0 4px 12px #00000014,0 8px 32px #0000000f;transform:translateY(-4px)}}.blog-card-image{aspect-ratio:16/9;background-color:var(--color-gray-050);overflow:hidden;position:relative}.blog-card-image img{height:100%;object-fit:cover;transition:transform .4s var(--ease-power2-out);width:100%}.blog-card:hover .blog-card-image img{transform:scale(1.04)}.blog-card-body{display:flex;flex:1;flex-direction:column}@media screen and (min-width:768px){.blog-card-body{padding:2.4rem 2.8rem 2.8rem}}@media screen and (max-width:767px){.blog-card-body{padding:1.8rem 2rem 2.2rem}}.blog-card-category{align-self:flex-start;background-color:var(--color-code-light-blue-025);border-radius:var(--border-radius-full);color:var(--color-code-light-blue-500);display:inline-block;font-weight:var(--font-weight-bold);line-height:1}@media screen and (min-width:768px){.blog-card-category{font-size:1.2rem;margin-bottom:1.4rem;padding:.6rem 1.4rem}}@media screen and (max-width:767px){.blog-card-category{font-size:1.1rem;margin-bottom:1rem;padding:.5rem 1.2rem}}.blog-card-title{color:var(--color-black);font-family:var(--font-family-hiragino-ud-b);font-weight:var(--font-weight-bold);line-height:var(--leading-normal)}@media screen and (min-width:768px){.blog-card-title{font-size:2rem;margin-bottom:1rem}}@media screen and (max-width:767px){.blog-card-title{font-size:1.7rem;margin-bottom:.8rem}}.blog-card-description{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;color:var(--color-gray-600);line-height:var(--leading-relaxed);-webkit-box-orient:vertical}@media screen and (min-width:768px){.blog-card-description{font-size:1.4rem;margin-bottom:1.6rem}}@media screen and (max-width:767px){.blog-card-description{font-size:1.3rem;margin-bottom:1.2rem}}.blog-card-date{color:var(--color-gray-400);font-family:var(--font-family-roboto);line-height:1;margin-top:auto}@media screen and (min-width:768px){.blog-card-date{font-size:1.3rem}}@media screen and (max-width:767px){.blog-card-date{font-size:1.2rem}}