@charset "utf-8";

*{box-sizing:border-box}

@media (min-width:1px){.works-detail-hero__copy{text-align:center}.works-detail-hero__copy h1{font-size:36px}.works-detail-hero__visual{min-height:270px;margin-left:0px}.works-detail-hero__visual img{min-height:270px}.works-detail-card{min-height:0px}.works-detail-card h2{font-size:23px}.works-detail-cms-content{font-size:16px}.works-detail-back{margin-top:36px}.works-detail-page h1{font-size:34px}.works-detail-page h2{font-size:30px}.works-detail-contact__inner{text-align:center}.works-detail-contact__button{min-height:56px;font-size:17px}}

.works-detail-page,.works-detail-page *,.works-detail-page *::before,.works-detail-page *::after{box-sizing:border-box}

.works-detail-page{--detail-green: #234d38;--detail-cream: #f2eee5;--detail-muted: #77786f;overflow:hidden;color:rgb(53,58,52);background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(255,255,255);background:rgb(255,255,255);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}

.works-detail-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,1fr);min-height:390px;overflow:hidden;background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(247,243,234);background:rgb(247,243,234)}

.works-detail-hero__mountains{position:absolute;z-index:5;right:-1%;bottom:-1px;left:-1%;height:135px;background-image:linear-gradient(105deg,rgb(183,193,173)0 19%,rgb(130,154,128) 19% 44%,rgb(183,221,210) 44% 68%,rgb(137,170,155) 68% 100%);background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:transparent;background:linear-gradient(105deg,rgb(183,193,173)0 19%,rgb(130,154,128) 19% 44%,rgb(183,221,210) 44% 68%,rgb(137,170,155) 68% 100%);clip-path:polygon(0 33%,7% 58%,14% 83%,21% 65%,28% 80%,35% 51%,43% 77%,51% 63%,59% 84%,68% 62%,77% 85%,87% 67%,100% 84%,100% 100%,0 100%);opacity:0.84}

.works-detail-hero__mountains::after{position:absolute;inset:28px 0 0;background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(146,168,146);background:rgb(146,168,146);clip-path:polygon(0 58%,9% 35%,17% 62%,25% 26%,34% 55%,42% 22%,51% 64%,61% 28%,69% 57%,78% 20%,88% 65%,100% 40%,100% 100%,0 100%);content:"";opacity:0.54}

.works-detail-hero__copy{position:relative;z-index:2;align-self:center;width:100%;max-width:710px;padding-top:58px;padding-right:42px;padding-bottom:72px;padding-left:7vw;padding:58px 42px 72px 7vw}

.works-detail-hero__copy h1{color:var(--detail-green);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:54px;font-weight:600;line-height:1.25;letter-spacing:0.08em}

.works-detail-hero__copy p{margin-top:26px;color:rgb(76,80,75);font-size:17px;font-weight:600;line-height:1.8;letter-spacing:0.025em}

.works-detail-hero__visual{overflow:hidden;border-radius:52%0 0 52%/100%0 0 100%}

.works-detail-hero__visual img{display:block;width:100%;object-fit:cover;object-position:58%center}

.works-detail-body{padding-top:70px;padding-right:32px;padding-bottom:76px;padding-left:32px;padding:70px 32px 76px}

.works-detail-body>.webgene-detail>span{display:block;padding-top:100px;padding-right:24px;padding-bottom:100px;padding-left:24px;padding:100px 24px;color:var(--detail-muted);text-align:center}

.works-detail-body>.webgene-blog{width:100%;max-width:1280px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;margin:0px auto}

.works-detail-style-contract{display:none}

.works-detail-card{display:flex;min-height:408px;flex-direction:column;padding-top:80px;padding-right:84px;padding-bottom:72px;padding-left:84px;padding:80px 84px 72px;background:var(--detail-cream);border-radius:12px}

.works-detail-cms-content{order:3;display:block;margin-top:22px;color:rgb(35,40,35);font-size:18px;font-weight:500;line-height:1.8;white-space:pre-line}

.works-detail-tag{order:1;align-self:flex-start;min-width:114px;padding-top:6px;padding-right:18px;padding-bottom:6px;padding-left:18px;padding:6px 18px;color:rgb(255,255,255);background:var(--detail-green);border-radius:5px;font-size:16px;line-height:1.2;text-align:center}

.works-detail-card h2{order:2;margin-top:22px;color:rgb(23,27,23);font-size:30px;font-weight:500;line-height:1.5;letter-spacing:0.02em}

.works-detail-back{display:flex;width:330px;min-height:62px;align-items:center;justify-content:center;margin-top:54px;margin-right:auto;margin-bottom:0px;margin-left:auto;margin:54px auto 0px;color:var(--detail-green);border:1px solid var(--detail-green);border-radius:5px;font-size:19px;letter-spacing:0.06em;text-decoration:none;transition:color 160ms ease,background 160ms ease}

.works-detail-back:hover{color:rgb(255,255,255);background:var(--detail-green)}

.works-detail-back:focus-visible{color:rgb(255,255,255);background:var(--detail-green)}

.works-detail-contact{overflow:hidden;background-color:rgb(247,244,236)}

.works-detail-contact::before{position:absolute;inset:0 auto 0 0;width:50%;background-image:url(https://yoshiokaringyo.co.jp/system_panel/uploads/images/20260727191104277592.png);background-position:left bottom;background-repeat:no-repeat;background-size:100%;content:"";opacity:0.7}

.works-detail-contact__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,560px);gap:64px;align-items:center;width:calc(100% - 64px);max-width:900px;min-height:184px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;margin:0px auto}

.works-detail-contact__inner p{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;margin:0px;color:var(--detail-green);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:18px;line-height:1.65;letter-spacing:0.05em}

.works-detail-contact__button{display:flex;min-height:58px;align-items:center;justify-content:center;gap:22px;color:rgb(255,255,255);background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(200,81,22);background:rgb(200,81,22);border-radius:5px;font-size:19px;text-decoration:none}

.works-detail-contact__button::after{content:"→"}

.works-detail-contact__button:hover{background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(169,66,19);background:rgb(169,66,19)}

.works-detail-contact__button:focus-visible{background-image:none;background-position:0% 0%;background-size:auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:rgb(169,66,19);background:rgb(169,66,19)}

.works-detail-hero__copy{padding-left:56px}

.works-detail-body{padding-right:56px;padding-left:56px}

@media (min-width:1px){.works-detail-hero{grid-template-columns:1fr}.works-detail-hero__copy{padding:70px 24px 58px}.works-detail-hero__copy p br{display:none}.works-detail-hero__visual{border-radius:48% 48%0 0/18% 18%0 0}.works-detail-hero__mountains{display:none}.works-detail-body{padding:52px 20px 58px}.works-detail-card{padding:38px 24px 40px}.works-detail-back{width:100%}.works-detail-contact__inner{grid-template-columns:1fr;gap:24px;padding:44px 0;width:calc(100% - 40px)}}

@media (min-width:641px){.works-detail-hero__copy{padding:70px 24px 58px}.works-detail-hero__copy h1{font-size:46px}.works-detail-hero__visual,.works-detail-hero__visual img{min-height:340px}.works-detail-body{padding:70px 24px 76px}}

@media (min-width:769px){.works-detail-page h1{font-size:40px}.works-detail-page h2{font-size:38px}}

@media (min-width:901px){.works-detail-hero{grid-template-columns:48% 52%}.works-detail-hero__copy{padding:58px 24px 72px 56px}.works-detail-hero__copy h1{font-size:44px;letter-spacing:0.05em;white-space:nowrap}.works-detail-hero__copy p{font-size:15px}.works-detail-hero__visual{margin-left:-42px;border-radius:52%0 0 52%/100%0 0 100%}.works-detail-hero__visual img{min-height:390px}.works-detail-contact__inner{grid-template-columns:minmax(360px,1fr) minmax(360px,520px);gap:40px;max-width:1100px;width:calc(100% - 64px)}.works-detail-contact__inner p{font-size:17px;letter-spacing:0.03em}.works-detail-contact__inner p br{display:none}}

@media (min-width:1281px){.works-detail-hero{grid-template-columns:minmax(0,1fr) minmax(480px,1fr)}.works-detail-hero__copy{padding:58px 42px 72px calc(0.5*(100vw - 1180px))}.works-detail-hero__copy h1{font-size:54px}.works-detail-hero__copy p{font-size:17px}.works-detail-hero__visual{margin-left:-72px}.works-detail-body{padding-right:calc(0.5*(100vw - 1180px));padding-left:calc(0.5*(100vw - 1180px))}.works-detail-contact__inner{grid-template-columns:minmax(280px,1fr) minmax(360px,560px);gap:64px;max-width:900px;width:calc(100% - 64px)}.works-detail-contact__inner p{font-size:18px;letter-spacing:0.05em}.works-detail-contact__inner p br{display:inline}}

@media (min-width:1px){.works-detail-hero__copy{text-align:center}.works-detail-hero__visual{min-height:270px;margin-left:0px}.works-detail-card{min-height:0px}.works-detail-back{margin-top:36px}.works-detail-contact__inner{text-align:center}}

.works-detail-hero__copy{position:relative;z-index:2;align-self:center;width:100%;max-width:710px;padding-top:58px;padding-right:42px;padding-bottom:72px;padding-left:7vw;padding:58px 42px 72px 7vw}

.works-detail-body{padding-top:70px;padding-right:32px;padding-bottom:76px;padding-left:32px;padding:70px 32px 76px}

.works-detail-hero__copy{padding-left:56px}

.works-detail-body{padding-right:56px;padding-left:56px}

@media (min-width:1px){.works-detail-hero__copy{padding:70px 24px 58px}.works-detail-hero__visual{border-radius:48% 48%0 0/18% 18%0 0}.works-detail-card{padding:38px 24px 40px}.works-detail-back{width:100%}.works-detail-contact__inner{grid-template-columns:1fr;gap:24px;padding:44px 0;width:calc(100% - 40px)}}

@media (min-width:641px){}

@media (min-width:769px){}

@media (min-width:901px){}

@media (min-width:1281px){}