*,*:before,*:after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td,small,button,time,figure{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}li,dd{list-style-type:none}header,footer,nav,section,article,main,aside,figure,figcaption{display:block}img{border:none;vertical-align:bottom}a{cursor:pointer;text-decoration:none}body{background:#fff;color:#000;font-family:"Noto Sans JP",serif,"Lora",serif,serif;font-size:14px;font-style:normal;letter-spacing:.1em;line-height:1.6}.inner{padding-left:15px;padding-right:15px}.button{align-items:center;background:#f1f8ff;border:.8px solid #000;border-radius:20px;color:#000;cursor:pointer;display:inline-flex;font-size:14px;height:34px;justify-content:center;transition:.5s;width:155px}.fade-in{opacity:0;transition:opacity 1s}.fade-in.is-in-view{opacity:1}.js-in-load{opacity:0;transform:translateY(20px);transition:opacity 1s,transform 1s}.js-in-load.is-in-load{opacity:1;transform:translateY(0)}.js-zoom{opacity:.7;transform:scale(.8);transition:transform 1s,opacity 1s}.js-zoom.is-in-view{opacity:1;transform:scale(1)}.slide-in{opacity:0;transform:translateY(100px);transition:opacity 1.5s,transform 1.5s}.slide-in.is-in-view{opacity:1;transform:translateY(0)}.product{margin-top:60px;background:#fff}.product__inner{display:flex;flex-direction:column;gap:10px}.product__image img{display:block;margin-inline:auto;max-width:500px;width:70%;border:1px solid #eee;box-shadow:0 8px 20px rgba(0,0,0,.1)}.product__title{font-size:24px;text-align:center;font-weight:600}.product__items{background:#f1f8ff;display:flex;flex-direction:column;font-size:14px;gap:20px;padding:30px;width:100%;max-width:400px;margin-left:auto;margin-right:auto}.product__skills{min-width:0;overflow-wrap:anywhere;line-break:strict;font-size:12px}.product__skills .product__label{font-size:14px}.product__url{min-width:0;overflow-wrap:anywhere}.product__label{font-weight:600}.product__url a{text-decoration:underline;text-decoration-color:#000;color:#000;font-size:12px}.product__source{min-width:0;overflow-wrap:anywhere}.product__source a{text-decoration:underline;text-decoration-color:#000;color:#000;font-size:12px}.point{margin-bottom:40px;margin-top:40px}.point__title{font-size:28px;font-weight:600;text-align:center}.point__list{margin-top:40px;display:flex;flex-direction:column;gap:40px}.point__item{display:flex;flex-direction:column;gap:40px}.point__image img{display:block;margin-inline:auto;max-width:400px;width:80%;border:1px solid #eee;box-shadow:0 8px 20px rgba(0,0,0,.1)}.point__content-title{font-size:20px;font-weight:600;text-align:center}.point__content-text{font-size:12px;line-height:2.2;overflow-wrap:break-word}.works__link{margin-top:20px;border-bottom:1px solid #000;margin-right:auto;width:140px}.works__link-text{color:#000;display:block;font-size:12px;text-align:center;transition:transform .5s}.code__box{background:#fff;border:2px solid #000;border-radius:8px;margin-top:16px;margin-top:24px;padding:10px}.code__box-head{background:#fff;border:none;padding:12px 16px;text-align:left;width:100%}.code__body-title{font-size:14px}.code__box-text{font-size:14px;font-weight:600}.code__box-coding{font-size:12px;text-align:left}code{font-size:12px}.code__body{position:relative;display:block;overflow:hidden;max-height:170px;transition:max-height .4s ease-in-out;z-index:1}.code__box.is-open .code__body{max-height:5000px}.code__box:not(.is-open) .code__body:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:70px;background:linear-gradient(transparent,#fff);z-index:2}@media screen and (min-width:768px){.display-none-pc{display:none}.inner{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:30px;padding-right:30px}.button:hover{background:#bfe7ff}.product{margin-top:100px}.product__inner{gap:30px}.product__image img{display:block;margin-inline:auto;max-width:800px}.product__title{font-size:32px}.point__inner{max-width:1440px}.point__title{font-size:clamp(32px,4.1vw,36px)}.product__items{width:70%;max-width:800px}.product__skills{font-size:14px}.product__url a{font-size:14px}.product__source a{font-size:14px}.point__item{align-items:start;display:grid;column-gap:10px;row-gap:10px;grid-template-columns:clamp(340px,44vw,600px) 1fr;padding:50px;font-size:14px}.point__item:nth-child(even){grid-template-columns:1fr clamp(340px,44vw,600px)}.point__image{grid-column:1;grid-row:1/3;align-self:center;justify-self:center}.point__image img{max-width:600px}.point__content-title{font-size:clamp(20px,2.4vw,32px);grid-column:2;grid-row:1;text-align:left}.point__content-text{font-size:14px;grid-column:2;grid-row:2}.works__link{margin-top:30px;width:160px}.works__link-text{font-size:14px}.works__link-text:hover{transform:translateX(-10px)}.point__item:nth-child(even) .point__image{grid-column:2}.point__item:nth-child(even) .point__content-title,.point__item:nth-child(even) .point__content-text{grid-column:1}.code__box{grid-column:1/-1;padding:20px 50px;width:80%;max-width:1200px;margin-inline:auto}.code__box-head{cursor:pointer}.code__box-text{font-size:16px}}@media screen and (max-width:767px){.display-none-sp{display:none}}