/* Shared layout and responsive refinements */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { line-height: 1.8; overflow-wrap: break-word; }
.mainbody, .storebox2, .inner { width: calc(100% - 48px); max-width: 1100px; margin: 0 auto; }
.header { min-height: 49px; margin: 0; }
.logo { padding-left: 0; }
.logo h1 { line-height: 1.2; white-space: nowrap; }
.logo-design { font-size: 1.1rem; font-weight: bold; }
.recommendwrap, .flowwrap, .storewrap { padding: 64px 0; }
h2 { font-size: 1.7em; font-weight: 700; letter-spacing: .05em; }
.servicewrap .mainbody { display: block; }
.servicebox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.servicebox dl { min-width: 0; padding: 0; margin: 0; }
.servicebox a { display: block; }
.servicebox img { width: 100%; display: block; }
.flowbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 0; }
.flowbox dl { min-width: 0; padding: 24px; align-items: stretch; }
.flowarrow { display: none; }
.storebox2 > table { width: 100%; }
.storewrap .storebox2 { width: 100%; gap: 24px; }
.storewrap .storebox2 dl { flex: 1; min-width: 0; }
#sec04, #movie { scroll-margin-top: 70px; }
.contact-content { max-width: 850px; margin: auto; }
.movie-section { padding: 72px 0; background: #f5f5f5; }
.section-heading, .section-intro { text-align: center; }
.section-intro { color: #555; margin: 6px 0 32px; }
.youtube-card { display: grid; grid-template-columns: 1fr 1fr; background: white; border: 1px solid #e5e5e5; }
.youtube-art { min-height: 300px; background: #151515; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; letter-spacing: .08em; }
.youtube-art:hover { color: white; background: #222; }
.youtube-art > span:not(.play-icon) { font-size: clamp(18px, 2.4vw, 28px); font-weight: 700; }
.play-icon { display: grid; place-items: center; width: 84px; height: 58px; background: #e60012; border-radius: 15px; font-size: 28px; padding-left: 4px; }
.youtube-copy { padding: 36px; }
.eyebrow { color: #b5000d; font-size: 12px; font-weight: bold; letter-spacing: .12em; }
.youtube-copy h3 { font-size: 24px; margin: 8px 0 18px; }
.youtube-copy p { margin-bottom: 16px; }
.youtube-button { display: inline-block; background: #bf0010; color: white; padding: 12px 22px; font-weight: bold; }
.youtube-button:hover { color: white; background: #92000c; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #1677b8; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) { .home .logo p { display: none; } .flowbox { gap: 12px; } .flowbox dl { padding: 16px; } }
@media (max-width: 768px) { .servicebox { grid-template-columns: repeat(2, minmax(0, 1fr)); } .youtube-card { grid-template-columns: 1fr; } .youtube-art { min-height: 240px; } .flowbox { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
 .mainbody, .header .mainbody, .storebox2, .inner { width: calc(100% - 32px); margin: 0 auto; }
 .header { margin: 0; min-height: 45px; } .logo h1 { font-size: 1.15rem; } .logo-design { font-size: .9rem; }
 .recommendwrap, .flowwrap, .storewrap, .movie-section { padding: 40px 0; }
 .youtube-copy { padding: 24px; } .youtube-copy h3 { font-size: 21px; }
 .storewrap .storebox2 { display: grid; grid-template-columns: 1fr; }
 .footerwrap li { padding: 10px 0; } .gotop { margin-top: 0; }
 #mail_form { width: 100%; } #mail_form input, #mail_form textarea { max-width: 100%; }
}
@media (max-width: 380px) { .servicebox { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wow { animation: none !important; visibility: visible !important; } }

/* Category links and image sections */
#web-design, #dtp { scroll-margin-top: 70px; }
.flowbox dl { position: relative; transition: opacity .2s ease; }
.flowbox .contents-link, .flowbox .contents-link:hover { display: block; color: inherit; text-decoration: none; }
.contents-link::after { content: ""; position: absolute; inset: 0; }
.flowbox dl:hover { opacity: .65; }
.contents-link:focus-visible { outline: none; }
.contents-link:focus-visible::after { outline: 3px solid #1677b8; outline-offset: 4px; }
.special-links { padding-bottom: 0; }
.special-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.special-links-grid a, .special-links-grid img { display: block; width: 100%; }
.dtp-section { padding-top: 64px; padding-bottom: 64px; }
.dtp-section > img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .dtp-section { padding-top: 40px; padding-bottom: 40px; } }

/* Floating return-to-top button */
.gotop {
 position: fixed; right: max(20px, env(safe-area-inset-right));
 bottom: max(20px, env(safe-area-inset-bottom)); z-index: 9999;
 margin: 0; opacity: 0; visibility: hidden; pointer-events: none;
 transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.gotop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.gotop a { display: grid; place-items: center; min-width: 48px; min-height: 48px; }
.gotop img { display: block; width: 50px; height: auto; max-height: 50px; }
@media (prefers-reduced-motion: reduce) { .flowbox dl, .gotop { transition: none; } }