/* services.html — generated from 03_事業内容.dc.html: width-dependent styles of the original */
.rs1{display:flex}
.rs2{display:none}
.rs3{display:none}
.rs4{height:150px}
.rs5{display:inline}
.rs6{width:150px;height:150px}
.rs7{padding:0 12px 12px 0;font-size:13px}
.rs8{opacity:1}
.rs9{display:grid}
.rs10{display:block}
@media (max-width: 1199px) {
.rs1{display:none}
.rs2{display:flex}
.rs3{display:flex}
.rs4{height:84px}
.rs5{display:none}
.rs6{width:84px;height:84px}
.rs7{padding:0 6px 6px 0;font-size:9.5px}
.rs10{display:none}
}
@media (max-width: 899px) {
.rs9{display:none}
}
@media (max-width: 767px) {
.rs4{height:64px}
.rs6{width:64px;height:64px}
.rs8{opacity:0}
}

/* page-specific */
/* devices in the service frames (top page mockups + demo videos) */
.svc-dev{position:absolute;top:50%}
/* desktop: two columns, frame on the right. iPad / MacBook run from just past the text column
   (column gap --g) to 12px before the screen edge; the frame's left edge is at 50vw + gap/2 */
.svc-frame{--g:clamp(40px,6vw,110px)}
.svc-dev-desk,.svc-dev-web{left:calc(14px - var(--g));translate:0 -50%}
.svc-dev-desk{width:min(125%,calc(50vw + var(--g) / 2 - 26px))}
.svc-dev-web{width:min(130%,calc(50vw + var(--g) / 2 - 26px))}
.svc-dev-reels{left:50%;height:72%;translate:-50% -50%}
/* tablet (one column, frame on top) */
@media (max-width: 1023px) {
.svc-dev-desk,.svc-dev-web{left:50%;translate:-50% -50%}
.svc-dev-desk{width:86%}
.svc-dev-web{width:96%}
.svc-dev-reels{height:86%}
}
/* phone: iPad / MacBook almost screen-wide, a squarer frame for a bigger iPhone */
@media (max-width: 767px) {
.svc-dev-desk,.svc-dev-web{width:calc(100vw - 16px)}
.svc-frame-reels[data-m~="svcimg"]{aspect-ratio:1 / 1 !important}
.svc-dev-reels{height:92%}
}