{"id":1202,"date":"2026-07-13T01:42:56","date_gmt":"2026-07-12T16:42:56","guid":{"rendered":"https:\/\/marvie-jp.com\/?page_id=1202"},"modified":"2026-07-20T11:44:00","modified_gmt":"2026-07-20T02:44:00","slug":"work-beauty-youtube","status":"publish","type":"page","link":"https:\/\/marvie-jp.com\/?page_id=1202","title":{"rendered":"\u7f8e\u5bb9\u30e1\u30c7\u30a3\u30a2\u306e\u52d5\u753b\u756a\u7d44\u5236\u4f5c\uff5c\u5236\u4f5c\u5b9f\u7e3e"},"content":{"rendered":"<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin> <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&#038;display=swap\" rel=\"stylesheet\"> <!--noptimize--><style data-noptimize=\"1\">body.page-id-1202 #header, body.page-id-1202 #footer { display: none; }body.page-id-1202 .l-content, body.page-id-1202 .l-container,body.page-id-1202 .c-postContent { max-width: none; padding: 0; margin: 0; }body.page-id-1202 #content { padding: 0; margin: 0; }#mv4-root { width: 100vw; margin-left: calc(50% - 50vw); overflow-x: hidden; }   :root {   --bg: #FFFDF8;                    --bg-tint: #FFFDF8;   --ink: #202A68;                   --muted: #67709A;   --pink: #F94FA8;  --pink-soft: #FF8AC8;   --cyan: #10CFF2;  --cyan-soft: #66E8FF;   --yellow: #FFC94D; --yellow-soft: #FFF176;   --lavender: #C9C7FF;   --pink-ink: #D2478C;              --purple: #C9C7FF;                --blue: #10CFF2;                  --grad-main: linear-gradient(92deg, #FF8AC8, #C9C7FF, #66E8FF);   --grad-cta:  linear-gradient(92deg, #F94FA8, #C9C7FF, #10CFF2);   --grad-blue: linear-gradient(92deg, #10CFF2, #66E8FF);   --shadow-card: 0 14px 44px rgba(32, 42, 104, .10);   --radius-card: 20px;   --header-h: 76px; }   *, *::before, *::after { box-sizing: border-box; } html {   scroll-behavior: smooth; } body {   margin: 0;   font-family: \"Noto Sans JP\", sans-serif;   font-weight: 400;   color: var(--ink);   background: var(--bg);   -webkit-font-smoothing: antialiased;   overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, dl { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; cursor: pointer; }  section[id], main [id] {   scroll-margin-top: var(--header-h); }  .skip-link {   position: absolute;   left: -999px;   top: 0;   background: #fff;   color: var(--ink);   padding: 10px 16px;   z-index: 999; } .skip-link:focus {   left: 8px;   top: 8px; }  .container {   max-width: 1160px;   margin: 0 auto;   padding: 0 24px; }   .grad-text {   background: var(--grad-main);   background-size: 200%;   -webkit-background-clip: text;   background-clip: text;   color: transparent;   animation: shift 8s ease infinite; } .grad-pink {   background-image: linear-gradient(92deg, #F94FA8, #C9C7FF); } .grad-blue {   background-image: linear-gradient(92deg, #10CFF2, #66E8FF); }  @keyframes shift {   0%   { background-position: 0% 50%; }   50%  { background-position: 100% 50%; }   100% { background-position: 0% 50%; } }   .btn {   display: inline-flex;   align-items: center;   gap: 6px;   padding: 15px 32px;   border-radius: 999px;   font-weight: 700;   font-size: 15px;   transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;   border: none; } .btn-primary {   position: relative;   overflow: hidden;   background-image: var(--grad-cta);   background-size: 200%;   color: #fff;   box-shadow: 0 10px 28px rgba(249, 79, 168, .32);   animation: shift 8s ease infinite; } .btn-primary:hover {   transform: translateY(-2px);   box-shadow: 0 14px 34px rgba(249, 79, 168, .40); }  .btn-primary::after {   content: \"\";   position: absolute;   top: 0;   left: -100%;   width: 60%;   height: 100%;   background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);   transform: skewX(-18deg);   pointer-events: none; } .btn-primary:hover::after {   left: 130%;   transition: left .7s ease; } .btn-outline {   background: #fff;   color: var(--ink);   border: 1.5px solid #ECE3F4; } .btn-outline:hover {   transform: translateY(-2px);   border-color: var(--purple);   box-shadow: var(--shadow-card); }   .section-label {   display: flex;   align-items: center;   gap: 10px;   font-size: 14px;   color: var(--muted);   margin-bottom: 18px;   font-weight: 500; } .label-bar {   width: 22px;   height: 3px;   border-radius: 2px;   background: var(--pink);   display: inline-block; } .label-num {   color: var(--pink);   font-weight: 400;   letter-spacing: .04em; }  .section {   position: relative;   padding: 120px 0;   overflow: hidden; } .section h2 {   font-size: clamp(26px, 3.4vw, 38px);   font-weight: 700;   line-height: 1.5;   max-width: 780px;   margin-bottom: 20px; } .section-lead {   color: var(--muted);   font-size: 16px;   line-height: 1.9;   max-width: 620px;   margin-bottom: 64px; }     #mv4-root.js .reveal {   opacity: 0;   translate: 0 28px;   transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1); } #mv4-root.js .reveal.is-visible {   opacity: 1;   translate: 0 0; }  #mv4-root.js .reveal-blur { filter: blur(6px); } #mv4-root.js .reveal-blur.is-visible { filter: blur(0); transition: filter .9s; }   @keyframes float {   0%, 100% { transform: translateY(0); }   50% { transform: translateY(-10px); } } .float-el { animation: float 7s ease-in-out infinite; } .float-el:nth-child(2) { animation-duration: 8s; animation-delay: .4s; } .float-el:nth-child(3) { animation-duration: 6.5s; animation-delay: .8s; } .float-el:nth-child(4) { animation-duration: 9s; animation-delay: .2s; }  @keyframes drift {   0%   { transform: translate(0, 0) scale(1); }   33%  { transform: translate(30px, -40px) scale(1.08); }   66%  { transform: translate(-24px, 20px) scale(0.94); }   100% { transform: translate(0, 0) scale(1); } } .blob {   position: absolute;   border-radius: 50%;   filter: blur(50px);   pointer-events: none;   animation: drift 26s ease-in-out infinite; }   .about-bg img, .process-bg img, .banner-bg img {   transform: scale(1.12); }   .site-header {   position: fixed;   top: 0; left: 0; right: 0;   z-index: 200;   height: var(--header-h);   background: rgba(255,255,255,.85);   backdrop-filter: blur(14px);   -webkit-backdrop-filter: blur(14px);   border-bottom: 1px solid rgba(0,0,0,.05);   transition: box-shadow .3s ease; } .site-header.is-scrolled {   box-shadow: 0 6px 24px rgba(32, 42, 104, .12); }  .scroll-progress {   position: absolute;   left: 0;   bottom: -3px;   width: 100%;   height: 3px;   background-image: var(--grad-main);   transform: scaleX(0);   transform-origin: left center;   will-change: transform; } .header-inner {   max-width: 1200px;   margin: 0 auto;   height: 100%;   padding: 0 24px;   display: flex;   align-items: center;   gap: 32px; } .logo {   display: flex;   align-items: center;   gap: 10px;   margin-right: auto; } .logo-img { height: 44px; width: auto; display: block; } .main-nav {   display: flex;   align-items: center;   gap: 30px; } .main-nav a {   font-size: 13px;   font-weight: 600;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--ink);   position: relative; } .main-nav a::after {   content: \"\";   position: absolute;   left: 0; bottom: -6px;   width: 0; height: 2px;   background: var(--pink);   transition: width .25s ease; } .main-nav a:hover::after { width: 100%; }  .header-contact {   font-size: 13px;   font-weight: 700;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--pink); } .header-contact:hover { text-decoration: underline; }  .hamburger {   display: none;   flex-direction: column;   justify-content: center;   gap: 5px;   width: 32px;   height: 32px;   background: none;   border: none;   padding: 0; } .hamburger span {   width: 100%;   height: 2px;   background: var(--ink);   border-radius: 2px;   transition: transform .3s ease, opacity .3s ease; } .hamburger[aria-expanded=\"true\"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded=\"true\"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded=\"true\"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }  .mobile-menu {   position: fixed;   inset: 0;   z-index: 190;   background: rgba(255,255,255,.98);   backdrop-filter: blur(10px);   display: flex;   align-items: center;   justify-content: center;   opacity: 0;   visibility: hidden;   transition: opacity .3s ease, visibility .3s ease; } .mobile-menu.is-open {   opacity: 1;   visibility: visible; } body.menu-locked { overflow: hidden; } .mobile-menu nav {   display: flex;   flex-direction: column;   align-items: center;   gap: 28px; } .mobile-menu a {   font-size: 22px;   font-weight: 700;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--ink); } .mobile-contact {   color: var(--pink) !important; }   .hero {   position: relative;   min-height: 100vh;   display: flex;   align-items: center;   overflow: hidden;   background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%); } .hero-blobs { position: absolute; inset: 0; z-index: 0; } .hero .blob-1 { width: 340px; height: 340px; top: 6%; right: 18%; background: radial-gradient(circle, rgba(249,79,168,.30), transparent 70%); } .hero .blob-2 { width: 420px; height: 420px; bottom: -6%; right: -4%; background: radial-gradient(circle, rgba(201,199,255,.28), transparent 70%); animation-duration: 30s; } .hero .blob-3 { width: 260px; height: 260px; top: 40%; right: 40%; background: radial-gradient(circle, rgba(16,207,242,.26), transparent 70%); animation-duration: 22s; } .hero .blob-4 { width: 200px; height: 200px; bottom: 20%; left: 6%; background: radial-gradient(circle, rgba(249,79,168,.18), transparent 70%); animation-duration: 34s; }  .hero-media {   position: absolute;   top: 0; right: 0;   width: 62%;   height: 100%;   z-index: 1;   background: radial-gradient(circle at 70% 40%, rgba(249,79,168,.16), transparent 60%),               linear-gradient(120deg, rgba(201,199,255,.14), rgba(16,207,242,.18));      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);   mask-image: linear-gradient(90deg, transparent 0%, #000 32%); } .hero::after {   content: \"\";   position: absolute;   left: 0; right: 0; bottom: -1px;   height: 160px;   z-index: 1;   pointer-events: none;   background: linear-gradient(180deg, rgba(255,253,248,0), #FFFDF8 92%); } .hero-flow, .hero-video {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   object-fit: cover; } .hero-video { opacity: .9; }  .hero-inner {   position: relative;   z-index: 2;   max-width: 1160px;   width: 100%;   margin: 0 auto;   padding: 0 24px; } .hero-text { max-width: 620px; } .hero-text h1 {   font-size: clamp(30px, 4.6vw, 56px);   font-weight: 900;   line-height: 1.4;   letter-spacing: -.01em;   white-space: nowrap; } .hero-lead {   margin-top: 26px;   font-size: 16px;   line-height: 2;   color: var(--muted);   max-width: 500px; } .hero-text .btn { margin-top: 40px; }   .hero-floaters {   position: absolute;   inset: 0;   z-index: 2;   pointer-events: none; } .floater {   position: absolute;   animation: float 8s ease-in-out infinite; }  .f-1 { width: 88px; top: 22%; left: 60%; animation-duration: 7s; } .f-2 { width: 64px; top: 58%; left: 80%; animation-duration: 9s; animation-delay: .6s; } .f-3 { width: 36px; top: 70%; left: 56%; } .f-4 { width: 36px; top: 30%; left: 74%; animation-duration: 10s; animation-delay: .3s; }   @keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } } .f-twinkle {   animation: float 6.5s ease-in-out infinite, twinkle 4.8s ease-in-out infinite; }   .hero-ring {   position: absolute;   top: 50%;   right: 8%;   margin-top: -240px;   width: 480px;   height: 480px;   z-index: 1;   border-radius: 50%;   background: conic-gradient(from 0deg, rgba(249,79,168,.55), rgba(201,199,255,.12), rgba(16,207,242,.55), rgba(201,199,255,.12), rgba(249,79,168,.55));   -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%);   mask: radial-gradient(closest-side, transparent 78%, #000 79%);   opacity: .35;   pointer-events: none;   animation: ringSpin 60s linear infinite; } @keyframes ringSpin { to { transform: rotate(360deg); } }  .scroll-indicator {   position: absolute;   left: 40px;   bottom: 48px;   z-index: 2;   display: flex;   flex-direction: column;   align-items: center;   gap: 10px; } .scroll-text {   writing-mode: vertical-rl;   font-size: 11px;   letter-spacing: .2em;   color: var(--muted);   font-weight: 500; } .scroll-line {   width: 1px;   height: 46px;   background: linear-gradient(180deg, var(--muted), transparent); }   .strengths-section { background: var(--bg-tint); } .section-bg-dots {   position: absolute;   top: -40px; right: -60px;   width: 420px; height: 420px;   background-image: radial-gradient(rgba(201,199,255,.35) 1.6px, transparent 1.6px);   background-size: 22px 22px;   opacity: .5;   z-index: 0; } .section-blob-soft {   position: absolute;   bottom: -120px; left: -100px;   width: 360px; height: 360px;   border-radius: 50%;   filter: blur(60px);   background: radial-gradient(circle, rgba(16,207,242,.22), transparent 70%);   z-index: 0; } .strengths-section .container { position: relative; z-index: 1; }  .strengths-grid {   display: grid;   grid-template-columns: repeat(4, 1fr);   gap: 28px; } .strength-card {   background: #fff;   border-radius: 50%;   max-width: 300px;   aspect-ratio: 1 \/ 1;   display: flex;   flex-direction: column;   align-items: center;   justify-content: center;   text-align: center;   padding: 28px 24px;   box-shadow: var(--shadow-card);   transition: transform .35s ease, box-shadow .35s ease; } .strength-card:hover {   transform: translateY(-6px);   box-shadow: 0 20px 54px rgba(32, 42, 104, .24); } .strength-icon { margin: 0 auto 14px; display: block; } .strength-card h3 {   font-size: 16px;   font-weight: 700;   margin-top: 10px;   margin-bottom: 8px; } .strength-card p {   font-size: 12.5px;   line-height: 1.6;   color: var(--muted); }   .services-section {   background: linear-gradient(160deg, #FDF9FB 0%, #F7F5FC 50%, #F4FAFE 100%); } .services-grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 24px; } .service-card {   background: #fff;   border-radius: var(--radius-card);   padding: 36px 28px;   box-shadow: var(--shadow-card);   transition: transform .4s ease, box-shadow .35s ease;   transform-style: preserve-3d;   text-align: center; } .service-card:hover {   transform: translateY(-6px);   box-shadow: 0 20px 54px rgba(32, 42, 104, .24); }  .service-icon {   display: inline-flex;   align-items: center;   justify-content: center;   width: 96px;   height: 96px;   border-radius: 24px;   margin: 0 auto 22px;   transition: scale .35s ease; } .service-card:hover .service-icon { scale: 1.06; } .services-grid .service-card:nth-child(1) .service-icon { background: linear-gradient(135deg, rgba(240,110,172,.14), rgba(181,139,224,.10)); } .services-grid .service-card:nth-child(2) .service-icon { background: linear-gradient(135deg, rgba(181,139,224,.14), rgba(111,181,236,.10)); } .services-grid .service-card:nth-child(3) .service-icon { background: linear-gradient(135deg, rgba(111,181,236,.14), rgba(240,110,172,.10)); } .services-grid .service-card:nth-child(4) .service-icon { background: linear-gradient(135deg, rgba(240,110,172,.14), rgba(111,181,236,.10)); } .services-grid .service-card:nth-child(5) .service-icon { background: linear-gradient(135deg, rgba(181,139,224,.14), rgba(240,110,172,.10)); } .services-grid .service-card:nth-child(6) .service-icon { background: linear-gradient(135deg, rgba(111,181,236,.14), rgba(181,139,224,.10)); } .service-card h3 {   font-size: 18px;   font-weight: 700;   margin-bottom: 8px; } .service-card p {   font-size: 13.5px;   color: var(--muted);   line-height: 1.7; }   .works-filter {   display: flex;   flex-wrap: wrap;   gap: 12px;   margin-bottom: 44px; } .filter-btn {   padding: 10px 22px;   border-radius: 999px;   border: 1.5px solid #ECE3F4;   background: #fff;   font-size: 13.5px;   font-weight: 500;   color: var(--muted);   transition: all .25s ease; } .filter-btn:hover {   border-color: var(--pink);   color: var(--pink); } .filter-btn.is-active {   background: var(--grad-cta);   color: #fff;   border-color: transparent; }  .works-grid {   display: grid;   grid-template-columns: repeat(4, 1fr);   gap: 22px; }  .work-card {   display: flex;   flex-direction: column;   background: #fff;   border-radius: var(--radius-card);   overflow: hidden;   box-shadow: var(--shadow-card);   color: inherit;   transition: opacity .4s ease, transform .4s ease, box-shadow .35s ease;   transform-style: preserve-3d; } .work-card.is-hidden {   display: none; } .work-card:hover {   transform: translateY(-6px);   box-shadow: 0 20px 54px rgba(32, 42, 104, .24); }  .work-thumb {   position: relative;   aspect-ratio: 4 \/ 3;   overflow: hidden;   background: linear-gradient(135deg, #F3E6F2, #E6EFFA); } .work-thumb img {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   object-fit: cover;   transition: scale .6s ease; }  .work-card:hover .work-thumb img { scale: 1.08; }  .work-overlay {   position: absolute;   inset: 0;   display: flex;   flex-direction: column;   justify-content: flex-end;   padding: 18px;   background: linear-gradient(0deg, rgba(20,10,30,.88) 0%, rgba(20,10,30,.35) 55%, transparent 100%);   opacity: 0;   transition: opacity .35s ease; } .work-card:hover .work-overlay, .work-card:focus-visible .work-overlay, .work-card:focus-within .work-overlay { opacity: 1; } .work-summary {   color: #fff;   font-size: 12px;   line-height: 1.7;   margin-bottom: 8px; } .work-result {   color: #F5E9F1;   font-size: 11.5px;   font-weight: 700;   line-height: 1.6; }   .work-caption {   display: flex;   flex-direction: column;   gap: 4px;   padding: 14px 16px 18px; } .work-cat {   font-size: 11px;   font-weight: 700;   letter-spacing: .04em;   color: var(--pink-ink); } .work-title {   font-size: 14.5px;   font-weight: 700;   line-height: 1.5;   color: var(--ink); }  .works-more {   display: flex;   justify-content: center;   margin-top: 56px; }   .numbers-strip {   overflow: hidden;   padding: 56px 0;   background: linear-gradient(90deg, #FDF3F8, #F4EEFB, #EFF8FD); } .marquee {   overflow: hidden;   width: 100%; } .marquee-track {   display: flex;   width: max-content;   animation: marquee 46s linear infinite; } .marquee:hover .marquee-track {   animation-play-state: paused; } @keyframes marquee {   to { transform: translateX(-50%); } } .marquee-item {   display: flex;   flex-direction: column;   align-items: flex-start;   gap: 4px;   padding: 0 48px;   border-right: 1px solid rgba(58, 58, 71, .08);   white-space: nowrap; } .mq-num {   font-weight: 900;   font-size: clamp(40px, 4.5vw, 64px);   letter-spacing: -.02em;   color: var(--ink);   line-height: 1.05; } .mq-unit {   font-weight: 700;   font-size: 15px;   background-image: var(--grad-cta); } .mq-note {   font-size: 13px;   color: var(--muted); }   .process-section {   background: #fff; } .process-bg {   position: absolute;   inset: 0;   z-index: 0;   background: linear-gradient(100deg, #FDF3F8 0%, #F4EEFB 45%, #EFF8FD 100%); } .process-bg img {   width: 100%;   height: 100%;   object-fit: cover;   opacity: .8; } .process-section .container { position: relative; z-index: 1; }  .process-steps {   display: flex;   align-items: center;   justify-content: space-between;   gap: 8px;   flex-wrap: wrap; } .process-step {   display: flex;   flex-direction: column;   align-items: center;   gap: 14px;   text-align: center;   flex: 1;   min-width: 110px; } .process-icon {   width: 76px;   height: 76px;   border-radius: 50%;   display: flex;   align-items: center;   justify-content: center;   background: #fff;   box-shadow: 0 12px 28px rgba(16, 207, 242, .22);   transition: scale .3s ease, box-shadow .3s ease; }  .process-step:hover .process-icon {   scale: 1.1;   box-shadow: 0 16px 34px rgba(16, 207, 242, .34); } .process-step p {   font-size: 13.5px;   font-weight: 700; } .process-arrow {   color: var(--purple);   font-size: 18px;   font-weight: 300;   flex: 0 0 auto; }   .about-section {   position: relative;   padding: 140px 0;   overflow: hidden;   text-align: center; } .about-bg {   position: absolute;   inset: 0;   z-index: 0;   background: linear-gradient(120deg, #E9F4FC 0%, #F7EDF7 60%, #FDF1F6 100%); } .about-bg img {   width: 100%;   height: 100%;   object-fit: cover; } .about-bg::after {   content: \"\";   position: absolute;   inset: 0;   background: rgba(255,255,255,.78); } .about-section .container {   position: relative;   z-index: 1;   max-width: 960px;  } .about-section .section-label { justify-content: center; } .about-section h2 {   font-size: clamp(26px, 4vw, 40px);   font-weight: 700;   margin-bottom: 26px; } .about-lead {   font-size: 15.5px;   line-height: 2.1;   color: var(--ink);   max-width: 920px;   margin-inline: auto; } @media (max-width: 900px) {   .br-wide { display: none; } }   .company-section { background: var(--bg-tint); } .company-grid {   display: grid;   grid-template-columns: 1fr 1fr;   gap: 32px;   align-items: stretch; } .company-banner {   border-radius: 24px;   overflow: hidden;   min-height: 320px;   background: linear-gradient(135deg, #66E8FF, #10CFF2 60%, #C9C7FF); } .company-banner img {   width: 100%;   height: 100%;   object-fit: cover;   min-height: 320px; } .company-card {   background: #fff;   border-radius: var(--radius-card);   box-shadow: var(--shadow-card);   padding: 40px; } .company-row {   display: flex;   gap: 20px;   padding: 16px 0;   border-bottom: 1px solid #F0EAF5; } .company-row:last-child { border-bottom: none; } .company-row dt {   flex: 0 0 90px;   font-size: 13px;   font-weight: 700;   color: var(--purple); } .company-row dd {   margin: 0;   font-size: 14px;   line-height: 1.8;   color: var(--ink); }   .news-list { max-width: 780px; } .news-item {   display: flex;   align-items: center;   gap: 24px;   padding: 22px 0;   border-bottom: 1px solid #F0EAF5; } .news-date {   flex: 0 0 100px;   color: var(--muted);   font-size: 13.5px; } .news-title {   flex: 1;   font-size: 14.5px; } .news-badge {   flex: 0 0 auto;   background: var(--pink);   color: #fff;   font-size: 10.5px;   font-weight: 700;   padding: 4px 10px;   border-radius: 999px;   letter-spacing: .04em; } .news-more {   margin-top: 44px; }   .banner-section {   position: relative;   min-height: 440px;   display: flex;   align-items: center;   overflow: hidden; } .banner-bg {   position: absolute;   inset: 0;   z-index: 0; } .banner-bg img {   width: 100%;   height: 100%;   object-fit: cover; } .banner-content {   position: relative;   z-index: 2;   max-width: 560px; } .banner-content h2 {   font-size: clamp(24px, 3.4vw, 32px);   font-weight: 700;   margin-bottom: 30px;   line-height: 1.6; } .banner-content-center {   max-width: 640px;   margin: 0 auto;   text-align: center; }  .recruit-section {   background: linear-gradient(90deg, #FFF6EC 0%, #FDF9FB 55%, transparent 100%); } .recruit-section .banner-bg {   background: linear-gradient(100deg, #FBE7D2 0%, #FCEFE0 40%, transparent 75%); } .recruit-section .banner-bg::after {   content: \"\";   position: absolute;   inset: 0;   background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 45%, transparent 75%); }  .contact-section {   background: linear-gradient(120deg, #F4EEFB 0%, #FDF1F6 100%); } .contact-section .banner-content-center h2 { color: var(--ink); } .contact-blobs { position: absolute; inset: 0; z-index: 1; } .contact-blobs .blob-c1 {   width: 320px; height: 320px; top: -10%; left: 10%;   background: radial-gradient(circle, rgba(201,199,255,.28), transparent 70%);   animation-duration: 28s; } .contact-blobs .blob-c2 {   width: 280px; height: 280px; bottom: -12%; right: 12%;   background: radial-gradient(circle, rgba(249,79,168,.24), transparent 70%);   animation-duration: 24s; }   .site-footer {   background: #fff;   border-top: 1px solid #F0EAF5;   padding: 40px 0 0; } .footer-inner {   max-width: 1160px;   margin: 0 auto;   padding: 0 24px;   display: flex;   align-items: center;   justify-content: space-between;   gap: 24px;   flex-wrap: wrap;   padding-bottom: 32px; } .logo-sm .logo-img { height: 34px; } .footer-nav {   display: flex;   gap: 22px;   flex-wrap: wrap; } .footer-nav a {   font-size: 12.5px;   font-weight: 600;   letter-spacing: .08em;   text-transform: uppercase;   color: var(--muted); } .footer-nav a:hover { color: var(--pink); } .footer-sns {   display: flex;   gap: 16px; } .footer-sns a {   color: var(--muted);   display: flex; } .footer-sns a:hover { color: var(--pink); } .footer-bottom {   border-top: 1px solid #F5F0F8;   padding: 20px 24px;   text-align: center; } .footer-bottom p {   font-size: 12px;   color: var(--muted); }   @media (max-width: 1100px) {   .services-grid { grid-template-columns: repeat(2, 1fr); }   .works-grid { grid-template-columns: repeat(3, 1fr); }   .strengths-grid { grid-template-columns: repeat(2, 1fr); } }  @media (max-width: 900px) {   .main-nav, .header-contact { display: none; }   .hamburger { display: flex; }    .hero-media { width: 100%; opacity: .5; }   .hero-ring { width: 360px; height: 360px; margin-top: -180px; right: -8%; opacity: .28; }   .hero-text { max-width: 100%; }   .hero-text h1 { white-space: normal; }    .company-grid { grid-template-columns: 1fr; }   .company-banner { min-height: 220px; }   .company-banner img { min-height: 220px; }    .works-grid { grid-template-columns: repeat(2, 1fr); }    .process-steps { flex-direction: column; }   .process-arrow { transform: rotate(90deg); margin: 4px 0; }    .section { padding: 90px 0; } }  @media (max-width: 600px) {   .strengths-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }   .services-grid { grid-template-columns: 1fr; }   .works-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }   .news-item { flex-wrap: wrap; gap: 6px 24px; }   .news-date { flex: 0 0 100%; }   .company-card { padding: 26px; }   .company-row { flex-direction: column; gap: 4px; }   .footer-inner { flex-direction: column; text-align: center; } }   @media (prefers-reduced-motion: reduce) {   *, *::before, *::after {     animation-duration: .001ms !important;     animation-iteration-count: 1 !important;     transition-duration: .001ms !important;     scroll-behavior: auto !important;   }   #mv4-root.js .reveal { opacity: 1; translate: none; }   #mv4-root.js .reveal-blur { filter: none; }   .marquee-track { animation: none; } }   .works-hub-header {   position: fixed;   top: 0; left: 0; right: 0;   z-index: 200;   height: var(--header-h);   background: rgba(255,255,255,.9);   backdrop-filter: blur(14px);   -webkit-backdrop-filter: blur(14px);   border-bottom: 1px solid rgba(0,0,0,.05); } .works-hub-header .header-inner {   justify-content: space-between;   gap: 16px; } .works-hub-back {   font-size: 12.5px;   font-weight: 600;   letter-spacing: .06em;   color: var(--muted); } .works-hub-back:hover { color: var(--pink); }  .works-hub-hero {   padding: calc(var(--header-h) + 72px) 0 52px;   background: linear-gradient(160deg, #FDF9FB 0%, #F7F5FC 50%, #F4FAFE 100%); } .works-hub-eyebrow {   display: flex;   align-items: center;   gap: 10px;   font-size: 13px;   font-weight: 600;   letter-spacing: .08em;   color: var(--pink);   margin-bottom: 16px; } .works-hub-hero h1 {   font-size: clamp(30px, 5vw, 46px);   font-weight: 900;   line-height: 1.35;   margin-bottom: 18px; } .works-hub-lead {   color: var(--muted);   font-size: 15.5px;   line-height: 1.9;   max-width: 620px; } .works-hub-section {   padding: 48px 0 100px;   background: var(--bg); }   .work-card-open .work-detail {   margin-top: 10px;   padding-top: 12px;   border-top: 1px solid #F0EAF5;   display: flex;   flex-direction: column;   gap: 8px; } .work-detail-summary {   font-size: 12.5px;   line-height: 1.8;   color: var(--ink); } .work-detail-role {   font-size: 11.5px;   line-height: 1.6;   color: var(--muted); } .work-detail-role span {   font-weight: 700;   color: var(--purple);   margin-right: 6px; } .work-detail-result {   font-size: 12px;   font-weight: 700;   line-height: 1.6;   color: var(--pink-ink); }  .works-hub-footer {   background: #fff;   border-top: 1px solid #F0EAF5;   padding: 30px 24px;   text-align: center; } .works-hub-footer p {   font-size: 12px;   color: var(--muted); }   .detail-hero {   position: relative;   min-height: 320px;   display: flex;   align-items: flex-end;   padding: calc(var(--header-h) + 40px) 0 84px;   overflow: hidden;   isolation: isolate; } .detail-hero-bg {   position: absolute;   inset: 0;   z-index: -2; } .detail-hero-bg img {   width: 100%;   height: 100%;   object-fit: cover; } .detail-hero-overlay {   position: absolute;   inset: 0;   z-index: -1;   background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.82) 60%, #fff 100%); } .detail-hero .detail-blob-1 { width: 300px; height: 300px; top: -8%; right: 6%; background: radial-gradient(circle, rgba(240,110,172,.24), transparent 70%); } .detail-hero .detail-blob-2 { width: 260px; height: 260px; bottom: -14%; left: -4%; background: radial-gradient(circle, rgba(111,181,236,.22), transparent 70%); animation-duration: 30s; } .detail-hero-inner {   position: relative;   z-index: 1; } .detail-cat {   display: inline-block;   padding: 6px 16px;   border-radius: 999px;   background: rgba(255,255,255,.9);   border: 1px solid #F0DCEA;   color: var(--pink-ink);   font-size: 12.5px;   font-weight: 700;   letter-spacing: .04em;   margin-bottom: 16px; } .detail-title {   font-size: clamp(26px, 4.4vw, 42px);   font-weight: 700;   line-height: 1.4;   color: var(--ink);   max-width: 880px; } .detail-tags {   display: flex;   flex-wrap: wrap;   gap: 8px;   margin-top: 18px; } .detail-tag {   font-size: 12px;   font-weight: 500;   color: var(--muted);   background: rgba(255,255,255,.7);   border: 1px solid #ECE3F4;   border-radius: 999px;   padding: 4px 12px; } .detail-card {   position: relative;   z-index: 2;   max-width: 880px;   margin: -60px auto 0;   padding: clamp(28px, 5vw, 56px);   background: #fff;   border-radius: var(--radius-card);   box-shadow: var(--shadow-card); } .detail-lead {   font-size: 16px;   line-height: 1.9;   color: var(--ink);   margin-bottom: 32px; } .detail-image {   width: 100%;   border-radius: 16px;   box-shadow: 0 8px 24px rgba(58,58,71,.12); } .detail-video {   position: relative;   margin-top: 28px;   aspect-ratio: 16 \/ 9;   border-radius: 16px;   overflow: hidden;   box-shadow: 0 8px 24px rgba(58,58,71,.12); } .detail-video iframe {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   border: 0; } .detail-meta {   margin: 36px 0 0;   border-top: 1px solid #F0EAF5; } .detail-meta-row {   display: grid;   grid-template-columns: 120px 1fr;   gap: 16px;   padding: 20px 0;   border-bottom: 1px solid #F0EAF5; } .detail-meta dt {   font-size: 13px;   font-weight: 700;   color: var(--purple);   letter-spacing: .04em; } .detail-meta dd {   margin: 0;   font-size: 15px;   line-height: 1.8;   color: var(--ink); } .detail-result {   font-weight: 700;   color: var(--pink-ink); } .detail-cta {   display: flex;   flex-wrap: wrap;   gap: 14px;   margin-top: 36px; } .detail-nav {   display: flex;   justify-content: space-between;   gap: 16px;   max-width: 880px;   margin: 48px auto 96px; } .detail-nav-link {   display: flex;   flex-direction: column;   gap: 6px;   flex: 1;   max-width: 48%;   padding: 18px 22px;   border-radius: 16px;   border: 1px solid #ECE3F4;   background: #fff;   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .detail-nav-link:hover {   transform: translateY(-2px);   border-color: var(--purple);   box-shadow: var(--shadow-card); } .detail-nav-next { text-align: right; } .detail-nav-dir {   font-size: 12px;   font-weight: 700;   color: var(--pink);   letter-spacing: .04em; } .detail-nav-title {   font-size: 13.5px;   font-weight: 500;   color: var(--ink);   line-height: 1.5; }  @media (max-width: 640px) {   .detail-card { margin-top: -40px; border-radius: 16px; }   .detail-meta-row { grid-template-columns: 1fr; gap: 4px; }   .detail-nav { flex-direction: column; }   .detail-nav-link { max-width: 100%; }   .detail-nav-next { text-align: left; } }   .svc-hero {   position: relative;   padding: calc(var(--header-h) + 64px) 0 72px;   overflow: hidden;   isolation: isolate;   background: linear-gradient(180deg, #FDF3F8 0%, #F4F0FB 45%, #fff 100%); } .svc-hero .svc-blob-1 { width: 320px; height: 320px; top: -12%; right: 4%; background: radial-gradient(circle, rgba(240,110,172,.20), transparent 70%); } .svc-hero .svc-blob-2 { width: 280px; height: 280px; bottom: -18%; left: -6%; background: radial-gradient(circle, rgba(111,181,236,.18), transparent 70%); animation-duration: 30s; } .svc-hero-inner {   position: relative;   z-index: 1; }  .svc-hero-icon {   display: inline-flex;   align-items: center;   justify-content: center;   width: 96px;   height: 96px;   border-radius: 24px;   margin-bottom: 22px;   background: linear-gradient(135deg, rgba(240,110,172,.16), rgba(111,181,236,.12)); } .svc-hero-en {   font-size: 12.5px;   font-weight: 700;   letter-spacing: .12em;   color: var(--pink-ink);   margin-bottom: 10px; } .svc-hero-title {   font-size: clamp(26px, 4.4vw, 42px);   font-weight: 700;   line-height: 1.4;   color: var(--ink); } .svc-hero-lead {   margin-top: 16px;   max-width: 720px;   font-size: 16px;   line-height: 1.9;   color: var(--ink); }  .svc-section {   padding: 64px 0; } .svc-section-label {   display: flex;   align-items: center;   gap: 10px;   font-size: 13px;   font-weight: 700;   letter-spacing: .06em;   color: var(--purple);   margin-bottom: 32px; }   .svc-video-grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 22px; } .svc-video-card {   display: flex;   flex-direction: column;   gap: 12px; } .svc-video-thumb {   position: relative;   display: block;   aspect-ratio: 16 \/ 9;   border-radius: 16px;   overflow: hidden;   background: linear-gradient(135deg, #F3E6F2, #E6EFFA);   box-shadow: var(--shadow-card); } .svc-video-thumb img {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   object-fit: cover;   transition: scale .6s ease; } .svc-video-card:hover .svc-video-thumb img { scale: 1.06; }  .svc-play {   position: absolute;   top: 50%;   left: 50%;   width: 54px;   height: 54px;   transform: translate(-50%, -50%);   border-radius: 999px;   background: rgba(20, 10, 30, .55);   transition: background .25s ease; } .svc-play::after {   content: \"\";   position: absolute;   top: 50%;   left: 54%;   transform: translate(-50%, -50%);   border-style: solid;   border-width: 9px 0 9px 15px;   border-color: transparent transparent transparent #fff; } .svc-video-card:hover .svc-play { background: var(--pink); } .svc-video-title {   font-size: 13.5px;   font-weight: 500;   line-height: 1.6;   color: var(--ink);   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   overflow: hidden; }   .svc-photo-grid {   display: grid;   grid-template-columns: repeat(2, 1fr);   gap: 22px; } .svc-photo-grid img {   width: 100%;   aspect-ratio: 16 \/ 10;   object-fit: cover;   border-radius: 16px;   box-shadow: var(--shadow-card); }   .svc-archive {   padding: 8px 0 24px;   text-align: center; }   .svc-cta {   padding: 72px 0 96px; } .svc-cta-inner {   display: flex;   flex-direction: column;   align-items: center;   gap: 24px;   text-align: center;   padding: clamp(36px, 5vw, 64px) 24px;   border-radius: var(--radius-card);   background: linear-gradient(135deg, #FDF3F8, #F0F5FC);   box-shadow: var(--shadow-card); } .svc-cta-title {   font-size: clamp(19px, 2.6vw, 26px);   font-weight: 700;   color: var(--ink);   line-height: 1.5; }   .works-service-nav {   margin: 8px 0 44px; } .works-service-nav-label {   font-size: 13px;   font-weight: 700;   color: var(--purple);   margin-bottom: 14px; } .works-service-pills {   display: flex;   flex-wrap: wrap;   gap: 10px; } .works-service-pill {   padding: 8px 18px;   border-radius: 999px;   border: 1.5px solid #ECE3F4;   background: #fff;   font-size: 13px;   font-weight: 500;   color: var(--muted);   transition: all .25s ease; } .works-service-pill:hover {   border-color: var(--pink);   color: var(--pink);   transform: translateY(-2px); } .works-archive {   margin-top: 48px;   text-align: center; }  @media (max-width: 900px) {   .svc-video-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) {   .svc-video-grid { grid-template-columns: 1fr; }   .svc-photo-grid { grid-template-columns: 1fr; } } <\/style><!--\/noptimize--><div id=\"mv4-root\" class=\"no-js\"><a class=\"skip-link\" href=\"#work-detail\">\u672c\u6587\u3078\u30b9\u30ad\u30c3\u30d7<\/a>  <header class=\"works-hub-header\">   <div class=\"header-inner\">     <a class=\"logo\" href=\"https:\/\/marvie-jp.com\/\" aria-label=\"Marvie \u30c8\u30c3\u30d7\u3078\">       <svg class=\"logo-mark\" width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">         <defs>           <linearGradient id=\"logoGrad\" x1=\"0\" y1=\"0\" x2=\"40\" y2=\"40\" gradientUnits=\"userSpaceOnUse\">             <stop offset=\"0\" stop-color=\"#F06EAC\"\/>             <stop offset=\".5\" stop-color=\"#B58BE0\"\/>             <stop offset=\"1\" stop-color=\"#6FB5EC\"\/>           <\/linearGradient>         <\/defs>         <path d=\"M4 28C7 18 9 12 12 12C15 12 16 22 19 22C22 22 23 10 26 10C29 10 30 20 33 20C35.3 20 36.3 16.6 36.8 14\"           stroke=\"url(#logoGrad)\" stroke-width=\"3.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>       <\/svg>       <span class=\"logo-text\">Marvie<\/span>     <\/a>     <a class=\"works-hub-back\" href=\"https:\/\/marvie-jp.com\/?page_id=1150\">\u2190 WORKS\u4e00\u89a7<\/a>   <\/div> <\/header>  <main id=\"work-detail\">    <section class=\"detail-hero\">     <div class=\"detail-hero-bg\">       <img decoding=\"async\" src=\"https:\/\/marvie-jp.com\/wp-content\/uploads\/2026\/07\/work-portrait-1.jpg\" alt=\"\" loading=\"eager\" onerror=\"this.style.display='none'\">     <\/div>     <div class=\"detail-hero-overlay\"><\/div>     <span class=\"blob detail-blob-1\"><\/span>     <span class=\"blob detail-blob-2\"><\/span>     <div class=\"container detail-hero-inner reveal reveal-blur\">       <p class=\"detail-cat\">\u6620\u50cf\u30fb\u52d5\u753b<\/p>       <h1 class=\"detail-title\">\u7f8e\u5bb9\u30e1\u30c7\u30a3\u30a2\u306e\u52d5\u753b\u756a\u7d44\u5236\u4f5c<\/h1>       <div class=\"detail-tags\"><span class=\"detail-tag\">#YouTube<\/span><span class=\"detail-tag\">#\u756a\u7d44\u5236\u4f5c<\/span><span class=\"detail-tag\">#\u30c7\u30b6\u30a4\u30f3<\/span><\/div>     <\/div>   <\/section>    <article class=\"detail-card reveal\">     <p class=\"detail-lead\">\u4f01\u753b\u306e\u610f\u56f3\u3092\u6c72\u307f\u53d6\u308a\u3001\u64ae\u5f71\u304b\u3089\u7de8\u96c6\u3001\u753b\u9762\u30c7\u30b6\u30a4\u30f3\u307e\u3067\u4e00\u8cab\u3057\u3066\u5236\u4f5c\u3002<\/p>     <img decoding=\"async\" class=\"detail-image\" src=\"https:\/\/marvie-jp.com\/wp-content\/uploads\/2026\/07\/creative-beauty-editorial-2.jpg\" alt=\"\u7f8e\u5bb9\u30e1\u30c7\u30a3\u30a2\u306e\u52d5\u753b\u756a\u7d44\u5236\u4f5c\" loading=\"lazy\" onerror=\"this.style.display='none'\">          <dl class=\"detail-meta\">       <div class=\"detail-meta-row\">         <dt>\u62c5\u5f53\u9818\u57df<\/dt>         <dd>\u64ae\u5f71\u30d7\u30ed\u30c7\u30e5\u30fc\u30b9\u30fb\u64ae\u5f71\u30fb\u7de8\u96c6\u30fb\u30c7\u30b6\u30a4\u30f3<\/dd>       <\/div>       <div class=\"detail-meta-row\">         <dt>\u6210\u679c<\/dt>         <dd class=\"detail-result\">\u30e1\u30c7\u30a3\u30a2\u306e\u4fe1\u983c\u611f\u3068\u898b\u3084\u3059\u3055\u3092\u4e21\u7acb\u3059\u308b\u756a\u7d44\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u69cb\u7bc9\u3002<\/dd>       <\/div>     <\/dl>     <div class=\"detail-cta\">       <a class=\"btn btn-outline\" href=\"https:\/\/marvie-jp.com\/?p=940\">\u5b9f\u969b\u306e\u5b9f\u7e3e\u8a18\u4e8b\u3092\u898b\u308b \u2192<\/a>       <a class=\"btn btn-primary\" href=\"https:\/\/marvie-jp.com\/?page_id=23\">\u304a\u554f\u3044\u5408\u308f\u305b \u2192<\/a>     <\/div>   <\/article>    <nav class=\"detail-nav container reveal\" aria-label=\"\u524d\u5f8c\u306e\u5b9f\u7e3e\">     <a class=\"detail-nav-link detail-nav-prev\" href=\"https:\/\/marvie-jp.com\/?page_id=1200\">       <span class=\"detail-nav-dir\">\u2190 \u524d\u306e\u5b9f\u7e3e<\/span>       <span class=\"detail-nav-title\">\u30e2\u30d3\u30ea\u30c6\u30a3\u4f53\u9a13\u30a4\u30d9\u30f3\u30c8\u306e\u544a\u77e5\u52d5\u753b<\/span>     <\/a>     <a class=\"detail-nav-link detail-nav-next\" href=\"https:\/\/marvie-jp.com\/?page_id=1204\">       <span class=\"detail-nav-dir\">\u6b21\u306e\u5b9f\u7e3e \u2192<\/span>       <span class=\"detail-nav-title\">\u5c02\u9580\u5bb6\u30b5\u30fc\u30d3\u30b9\u306eInstagram\u904b\u7528<\/span>     <\/a>   <\/nav>  <\/main>  <footer class=\"works-hub-footer\">   <p>&copy; Marvie LLC. All Rights Reserved.<\/p> <\/footer>  <!--noptimize--><script data-noptimize=\"1\">(() => {   'use strict';       document.getElementById('mv4-root').classList.replace('no-js', 'js');    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;       const healLazyImages = () => {     document.querySelectorAll('img.lazyload[data-src], img.lazyloading[data-src]').forEach((img) => {       if (img.dataset.srcset) { img.srcset = img.dataset.srcset; }       img.src = img.dataset.src;       img.classList.remove('lazyload', 'lazyloading');       img.classList.add('lazyloaded');     });   };   setTimeout(healLazyImages, 1000);   setTimeout(healLazyImages, 3000);   window.addEventListener('load', () => setTimeout(healLazyImages, 500));       const header = document.getElementById('site-header');   const progressBar = document.getElementById('scroll-progress');   const heroSection = document.querySelector('.hero');   const heroInner = document.querySelector('.hero-inner');   const heroFloaters = document.querySelector('.hero-floaters');      const bgImgs = document.querySelectorAll('.about-bg img, .process-bg img, .banner-bg img');   const visibleBgImgs = new Set();   if ('IntersectionObserver' in window && !prefersReducedMotion) {     const bgObserver = new IntersectionObserver((entries) => {       entries.forEach((entry) => {         if (entry.isIntersecting) visibleBgImgs.add(entry.target);         else visibleBgImgs.delete(entry.target);       });     }, { rootMargin: '0px' });     bgImgs.forEach((img) => bgObserver.observe(img));   }    let scrollTicking = false;   const onScrollFrame = () => {     const y = window.scrollY;           if (header) header.classList.toggle('is-scrolled', y > 10);           if (progressBar) {       const scrollable = document.documentElement.scrollHeight - window.innerHeight;       const ratio = scrollable > 0 ? y \/ scrollable : 0;       progressBar.style.transform = `scaleX(${ratio.toFixed(4)})`;     }      if (!prefersReducedMotion) {              const heroH = heroSection ? heroSection.offsetHeight : 0;       if (heroSection && y <= heroH) {         if (heroInner) {           heroInner.style.opacity = String(Math.max(0.15, 1 - (y \/ heroH) * 0.85));           heroInner.style.translate = `0 ${(-y * 0.12).toFixed(1)}px`;         }                  if (heroFloaters) heroFloaters.style.translate = `0 ${(y * 0.18).toFixed(1)}px`;       }               const vh = window.innerHeight;       visibleBgImgs.forEach((img) => {         const rect = img.getBoundingClientRect();         const rate = ((rect.top + rect.height \/ 2) \/ vh - 0.5) * -2;          img.style.translate = `0 ${(rate * 40).toFixed(1)}px`;       });     }      scrollTicking = false;   };   const requestScrollFrame = () => {     if (!scrollTicking) {       window.requestAnimationFrame(onScrollFrame);       scrollTicking = true;     }   };   document.addEventListener('scroll', requestScrollFrame, { passive: true });   onScrollFrame();       const heroVideo = document.querySelector('.hero-video');   const heroVideoUrl = heroVideo && heroVideo.dataset.src;   if (heroVideoUrl && !heroVideoUrl.includes('__') && !prefersReducedMotion) {     heroVideo.src = heroVideoUrl;     heroVideo.play().catch(() => {});   }       const hamburger = document.getElementById('hamburger');   const mobileMenu = document.getElementById('mobile-menu');    if (hamburger && mobileMenu) {     const closeMenu = () => {       mobileMenu.classList.remove('is-open');       document.body.classList.remove('menu-locked');       hamburger.setAttribute('aria-expanded', 'false');       hamburger.setAttribute('aria-label', '\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304f');     };     const openMenu = () => {       mobileMenu.classList.add('is-open');       document.body.classList.add('menu-locked');       hamburger.setAttribute('aria-expanded', 'true');       hamburger.setAttribute('aria-label', '\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b');     };     document.addEventListener('keydown', (e) => {       if (e.key === 'Escape' && mobileMenu.classList.contains('is-open')) {         closeMenu();         hamburger.focus();       }     });      hamburger.addEventListener('click', () => {       const isOpen = hamburger.getAttribute('aria-expanded') === 'true';       isOpen ? closeMenu() : openMenu();     });     mobileMenu.querySelectorAll('a').forEach((link) => {       link.addEventListener('click', closeMenu);     });   }       const revealEls = document.querySelectorAll('.reveal');   if ('IntersectionObserver' in window && !prefersReducedMotion) {     const revealObserver = new IntersectionObserver((entries) => {       entries.forEach((entry) => {         if (entry.isIntersecting) {           entry.target.classList.add('is-visible');           revealObserver.unobserve(entry.target);         }       });     }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });      revealEls.forEach((el) => revealObserver.observe(el));   } else {     revealEls.forEach((el) => el.classList.add('is-visible'));   }       const parallaxEls = document.querySelectorAll('[data-depth]');   if (parallaxEls.length && !prefersReducedMotion) {     let mouseX = 0;     let mouseY = 0;     let ticking = false;      const applyParallax = () => {       const cx = mouseX - 0.5;       const cy = mouseY - 0.5;       parallaxEls.forEach((el) => {         const depth = parseFloat(el.dataset.depth) || 0;                  el.style.translate = `${(-cx * depth * 26).toFixed(1)}px ${(-cy * depth * 20).toFixed(1)}px`;       });       ticking = false;     };      window.addEventListener('mousemove', (e) => {       mouseX = e.clientX \/ window.innerWidth;       mouseY = e.clientY \/ window.innerHeight;       if (!ticking) {         window.requestAnimationFrame(applyParallax);         ticking = true;       }     });   }       const filterButtons = document.querySelectorAll('.filter-btn');   const workCards = document.querySelectorAll('.work-card');    filterButtons.forEach((btn) => {     btn.addEventListener('click', () => {       const filter = btn.dataset.filter;        filterButtons.forEach((b) => {         b.classList.remove('is-active');         b.setAttribute('aria-pressed', 'false');       });       btn.classList.add('is-active');       btn.setAttribute('aria-pressed', 'true');        workCards.forEach((card) => {         const cats = (card.dataset.cats || '').split(',').map((c) => c.trim());         const match = filter === 'all' || cats.includes(filter);          clearTimeout(card._hideTimer);         if (match) {           card.classList.remove('is-hidden');           card.style.opacity = '0';                      requestAnimationFrame(() => requestAnimationFrame(() => {             card.style.opacity = '1';           }));         } else {           card.style.opacity = '0';           card._hideTimer = setTimeout(() => card.classList.add('is-hidden'), 300);         }       });     });   });       document.querySelectorAll('#works-grid .work-card').forEach((card, i) => {     card.style.transitionDelay = `${i * 70}ms`;          card.addEventListener('transitionend', function clearDelay() {       card.style.transitionDelay = '';       card.removeEventListener('transitionend', clearDelay);     });   });       if (!prefersReducedMotion) {     const TILT_MAX_X = 6;      const TILT_MAX_Y = 8;      const tiltCards = document.querySelectorAll('.service-card, .work-card');     tiltCards.forEach((card) => {       const isWorkCard = card.classList.contains('work-card');       card.addEventListener('mousemove', (e) => {         const rect = card.getBoundingClientRect();         const px = (e.clientX - rect.left) \/ rect.width - 0.5;           const py = (e.clientY - rect.top) \/ rect.height - 0.5;         const rotX = (-py * TILT_MAX_X).toFixed(2);         const rotY = (px * TILT_MAX_Y).toFixed(2);                  const lift = isWorkCard ? ' translateY(-6px)' : '';         card.style.transition = 'transform 0s';         card.style.transform = `perspective(700px) rotateX(${rotX}deg) rotateY(${rotY}deg)${lift}`;       });       card.addEventListener('mouseleave', () => {         card.style.transition = '';         card.style.transform = '';       });     });   } })(); <\/script><!--\/noptimize--><\/div>","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u3078\u30b9\u30ad\u30c3\u30d7 Marvie \u2190 WORKS\u4e00\u89a7 \u6620\u50cf\u30fb\u52d5\u753b \u7f8e\u5bb9\u30e1\u30c7\u30a3\u30a2\u306e\u52d5\u753b\u756a\u7d44\u5236\u4f5c #YouTube#\u756a\u7d44\u5236\u4f5c#\u30c7\u30b6\u30a4\u30f3 \u4f01\u753b\u306e\u610f\u56f3\u3092\u6c72\u307f\u53d6\u308a\u3001\u64ae\u5f71\u304b\u3089\u7de8&hellip;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1150,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-1202","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"claude","author_link":"https:\/\/marvie-jp.com\/?author=4"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u672c\u6587\u3078\u30b9\u30ad\u30c3\u30d7 Marvie \u2190 WORKS\u4e00\u89a7 \u6620\u50cf\u30fb\u52d5\u753b \u7f8e\u5bb9\u30e1\u30c7\u30a3\u30a2\u306e\u52d5\u753b\u756a\u7d44\u5236\u4f5c #YouTube#\u756a&hellip;","_links":{"self":[{"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/pages\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/marvie-jp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1202"}],"version-history":[{"count":7,"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions"}],"predecessor-version":[{"id":1405,"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/pages\/1202\/revisions\/1405"}],"up":[{"embeddable":true,"href":"https:\/\/marvie-jp.com\/index.php?rest_route=\/wp\/v2\/pages\/1150"}],"wp:attachment":[{"href":"https:\/\/marvie-jp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}