{"id":105,"date":"2026-10-23T21:32:17","date_gmt":"2026-10-23T12:32:17","guid":{"rendered":"https:\/\/picom.jp\/?page_id=105"},"modified":"2026-10-24T13:21:09","modified_gmt":"2026-10-24T04:21:09","slug":"home-new","status":"publish","type":"page","link":"https:\/\/picom.jp\/","title":{"rendered":"TOP\uff08\u65b0\uff09"},"content":{"rendered":"\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700&#038;family=Poppins:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\r\n.picom-page a{color:inherit;text-decoration:none;font-family:inherit}\r\n.picom-page a.btn{color:#fff}\r\n.picom-page a.btn.ghost{color:var(--ink)}\r\n.picom-page a.btn.ghost:hover{color:#fff}\r\n:root{\r\n  --ink:#22324a; --sub:#6b7a90; --line:#e1ecf2; --bg:#ffffff; --bg2:#f5fafd;\r\n  --accent:#1fb0c4; --accent2:#8fdce6; --pink:#fbe1ec; --sky:#d6edf9;\r\n  --en:'Poppins',sans-serif;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nbody{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--bg);line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}\r\na{color:inherit;text-decoration:none}\r\nimg{max-width:100%}\r\n.wrap{max-width:1120px;margin:0 auto;padding:0 24px}\r\n.en{font-family:var(--en);letter-spacing:.12em}\r\n\r\n\/* header *\/\r\nheader{position:fixed;top:16px;left:16px;right:16px;z-index:10}\r\n.hbar{max-width:1180px;margin:0 auto;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 6px 24px rgba(34,50,74,.08);display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 28px}\r\n.logo{font-family:var(--en);font-weight:600;font-size:17px;letter-spacing:.06em}\r\n.logo span{color:var(--accent)}\r\nnav{display:flex;align-items:center;gap:28px;font-family:var(--en);font-size:12.5px;letter-spacing:.12em}\r\nnav a:not(.btn){opacity:.8}\r\n.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 24px;font-size:14px;font-weight:500;letter-spacing:.06em;transition:.2s}\r\n.btn:hover{background:var(--accent)}\r\n.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}\r\n.btn.ghost:hover{background:var(--ink);color:#fff}\r\n.btn .arr{font-family:var(--en)}\r\n\r\n\/* hero *\/\r\n.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;\r\n  background:radial-gradient(60% 70% at 85% 25%,var(--pink) 0%,transparent 60%),radial-gradient(70% 80% at 10% 90%,var(--sky) 0%,transparent 60%),linear-gradient(180deg,#f3f9fd,#fff)}\r\n.hero .wrap{width:100%;padding-top:120px;padding-bottom:80px}\r\n.eyebrow{font-family:var(--en);font-size:13px;letter-spacing:.24em;color:var(--accent);margin-bottom:24px}\r\n.hero h1{font-size:clamp(34px,5.4vw,64px);line-height:1.35;font-weight:700;letter-spacing:.02em}\r\n.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),#8ccbef);-webkit-background-clip:text;background-clip:text;color:transparent}\r\n.hero p.lead{margin-top:28px;font-size:16px;color:var(--sub);max-width:560px}\r\n.hero .cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}\r\n.badges{margin-top:56px;display:flex;gap:14px;flex-wrap:wrap}\r\n.badge{background:rgba(255,255,255,.75);border:1px solid #fff;border-radius:14px;padding:14px 22px;box-shadow:0 4px 16px rgba(34,50,74,.05)}\r\n.badge b{display:block;font-family:var(--en);font-size:24px;font-weight:600;line-height:1.3}\r\n.badge b small{font-size:13px;font-family:'Noto Sans JP';font-weight:500;margin-left:2px}\r\n.badge span{font-size:12px;color:var(--sub)}\r\n\r\n\/* section common *\/\r\nsection.sec{padding:120px 0}\r\nsection.alt{background:var(--bg2)}\r\n.sh{margin-bottom:56px}\r\n.sh .en{font-size:13px;color:var(--accent);letter-spacing:.24em;display:block;margin-bottom:10px}\r\n.sh h2{font-size:clamp(24px,3vw,34px);line-height:1.5}\r\n.sh p{margin-top:16px;color:var(--sub)}\r\n.center{text-align:center}\r\n\r\n\/* pains *\/\r\n.pains{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}\r\n.pains .pain{flex:1 1 180px;max-width:240px}\r\n.pain{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 22px;font-weight:500;font-size:15px;line-height:1.7;position:relative}\r\n.pain::before{content:\"\";display:block;width:28px;height:28px;border-radius:50%;margin-bottom:14px;background:linear-gradient(135deg,var(--sky),var(--pink))}\r\n.resolve{margin-top:56px;text-align:center;font-size:clamp(18px,2.2vw,24px);font-weight:700}\r\n.resolve span{color:var(--accent)}\r\n\r\n\/* reasons *\/\r\n.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}\r\n.reason{background:#fff;border-radius:20px;padding:40px 32px;box-shadow:0 10px 40px rgba(34,50,74,.06)}\r\n.reason .num{font-family:var(--en);font-size:44px;font-weight:600;line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}\r\n.reason h3{font-size:19px;margin:18px 0 12px;line-height:1.5}\r\n.reason p{font-size:14px;color:var(--sub)}\r\n\r\n\/* services *\/\r\n.services{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}\r\n.svc{background:#fff;padding:36px 28px;transition:.2s}\r\n.svc:hover{background:#f7fbfe}\r\n.svc .en{font-size:11px;color:var(--accent);letter-spacing:.2em}\r\n.svc h3{font-size:18px;margin:8px 0 12px}\r\n.svc p{font-size:13.5px;color:var(--sub)}\r\n.svc.main{background:linear-gradient(160deg,#eef8fc,#fff)}\r\n.tag{display:inline-block;font-size:11px;background:var(--accent);color:#fff;border-radius:999px;padding:2px 10px;margin-left:6px;vertical-align:2px}\r\n\r\n\/* works *\/\r\n.works{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}\r\n.work .thumb{aspect-ratio:16\/10;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:rgba(34,50,74,.35)}\r\n.t1{background:linear-gradient(135deg,#f6c9db,#fdeef4)}\r\n.t2{background:linear-gradient(135deg,#9fd9e8,#e1f4fa)}\r\n.t3{background:linear-gradient(135deg,#cfe2f7,#fbe4ee)}\r\n.work .meta{margin-top:16px;font-size:12px;color:var(--accent);font-family:var(--en);letter-spacing:.1em}\r\n.work h3{font-size:16px;margin-top:4px;line-height:1.6}\r\n.work p{font-size:13px;color:var(--sub);margin-top:4px}\r\n.more{margin-top:48px;text-align:center}\r\n\r\n\/* price *\/\r\n.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}\r\n.price{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 24px;text-align:center}\r\n.price.rec{border:2px solid var(--accent);position:relative}\r\n.price.rec::after{content:\"\u4eba\u6c17\";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;border-radius:999px;padding:2px 14px}\r\n.price h3{font-size:15px}\r\n.price .yen{font-family:var(--en);font-size:34px;font-weight:600;margin:12px 0 4px}\r\n.price .yen small{font-family:'Noto Sans JP';font-size:14px;font-weight:500}\r\n.price p{font-size:13px;color:var(--sub)}\r\n.hosyu{margin-top:28px;background:linear-gradient(120deg,#dff2f9,#fdeef4);color:var(--ink);border-radius:20px;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}\r\n.hosyu h3{font-size:18px}\r\n.hosyu p{font-size:13px;color:var(--sub)}\r\n.hosyu .yen{font-family:var(--en);font-size:28px;font-weight:600}\r\n.hosyu .yen small{font-family:'Noto Sans JP';font-size:13px}\r\n\r\n\/* flow *\/\r\n.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;counter-reset:f}\r\n.step{background:#fff;border-radius:16px;padding:24px 16px;text-align:center;position:relative}\r\n.step::before{counter-increment:f;content:\"0\" counter(f);font-family:var(--en);font-size:12px;color:var(--accent);letter-spacing:.15em;display:block}\r\n.step h3{font-size:14.5px;margin-top:6px;line-height:1.5}\r\n.step p{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.6}\r\n\r\n\/* faq *\/\r\n.faq{max-width:820px;margin:0 auto}\r\ndetails{border-bottom:1px solid var(--line);padding:22px 4px}\r\nsummary{cursor:pointer;font-weight:500;list-style:none;display:flex;gap:16px}\r\nsummary::before{content:\"Q\";font-family:var(--en);color:var(--accent);font-weight:600}\r\ndetails p{margin-top:12px;padding-left:28px;color:var(--sub);font-size:14px}\r\n\r\n\/* message *\/\r\n.msg{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center}\r\n.photo{aspect-ratio:4\/5;border-radius:24px;background:linear-gradient(160deg,var(--sky),var(--pink));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--en);font-size:12px;letter-spacing:.2em}\r\n.msg blockquote{font-size:15px;line-height:2.2}\r\n.msg .sign{margin-top:24px;font-size:14px;color:var(--sub)}\r\n.msg .sign b{color:var(--ink);font-size:16px;margin-left:8px}\r\n\r\n\/* company *\/\r\ntable.co{width:100%;max-width:820px;margin:0 auto;border-collapse:collapse;font-size:14.5px}\r\ntable.co th,table.co td{text-align:left;padding:20px 16px;border-bottom:1px solid var(--line);vertical-align:top}\r\ntable.co th{width:180px;font-weight:500;color:var(--sub)}\r\n.tbd{background:#fff4c2;padding:1px 6px;border-radius:4px;font-size:13px}\r\n\r\n\/* cta *\/\r\n.cta-sec{padding:110px 0;background:radial-gradient(60% 90% at 85% 20%,#fbd9e8,transparent 60%),radial-gradient(60% 90% at 10% 90%,#c6ecf3,transparent 60%),linear-gradient(120deg,#e6f5fb,#f7fbfe 50%,#fdeef4);color:var(--ink);text-align:center}\r\n.cta-sec h2{font-size:clamp(24px,3vw,34px);line-height:1.6}\r\n.cta-sec p{color:var(--sub);margin-top:12px}\r\n.cta-sec .btn{background:var(--ink);color:#fff;margin-top:36px;padding:18px 40px;font-size:15px}\r\n.cta-sec .btn:hover{background:var(--accent)}\r\n\r\nfooter{background:var(--ink);color:rgba(255,255,255,.7);padding:48px 0;font-size:12px}\r\nfooter .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}\r\nfooter .logo{color:#fff}\r\n\r\n@media (max-width:900px){\r\n  nav a:not(.btn){display:none}\r\n  .reasons,.works{grid-template-columns:1fr}\r\n  .services,.prices{grid-template-columns:1fr 1fr}\r\n  .flow{grid-template-columns:1fr 1fr}\r\n  .msg{grid-template-columns:1fr;gap:32px}\r\n  .photo{max-width:280px}\r\n  section.sec{padding:80px 0}\r\n}\r\n@media (max-width:560px){\r\n  .services,.prices{grid-template-columns:1fr}\r\n  .hbar{padding-left:20px}\r\n  table.co th{width:100px}\r\n}\r\nnav a.cur{opacity:1;color:var(--accent)}\r\n.crumb{font-size:12px;color:var(--sub);margin-bottom:20px;font-family:var(--en);letter-spacing:.1em}\r\n.crumb a{text-decoration:underline}\r\n.logo,.btn{white-space:nowrap}\r\n@media (max-width:560px){\r\n  .logo{font-size:15px}\r\n  nav .btn{padding:10px 16px;font-size:12.5px}\r\n}\r\n.work .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}\r\n.work .thumb{border:1px solid var(--line);background-color:var(--bg2)}\r\n\r\n\r\n\r\n\/* ===== TOP\u5c02\u7528 ===== *\/\r\n.kv{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#f6fbfe;display:flex;align-items:center}\r\n\r\n.kv .wrap{position:relative;width:100%;padding-top:96px;padding-bottom:72px}\r\n.kv-en{font-family:var(--en);font-weight:300;font-size:clamp(44px,9vw,128px);line-height:1.02;letter-spacing:-.02em}\r\n.kv-en b{font-weight:600}\r\n.kv-eye{font-family:var(--en);font-size:13px;letter-spacing:.32em;color:var(--accent);margin-bottom:28px;opacity:0;animation:fade 1s .2s forwards}\r\n.kv-big{font-family:var(--en);font-size:clamp(38px,9.4vw,136px);font-weight:300;line-height:1.04;letter-spacing:-.02em}\r\n.kv-big em{font-style:normal;font-weight:600;letter-spacing:-.01em;background:linear-gradient(90deg,var(--accent),#8ccbef 55%,#e886ae);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 8s ease-in-out infinite alternate}\r\n@keyframes shine{to{background-position:100% 0}}\r\n\/* \u30ef\u30a4\u30c9\u30ef\u30fc\u30c9\uff1aPOSSIBILITY \u3092\u753b\u9762\u5e45\u3044\u3063\u3071\u3044\u306b\u3001\u524d\u5f8c\u306e\u8a9e\u306f\u5c0f\u3055\u304f *\/\r\n.kv .wrap{max-width:none;padding-left:3vw;padding-right:3vw}\r\n.kv-big{opacity:0;animation:fade 1.2s .2s forwards}\r\n.line{display:block;padding-bottom:.06em}\r\n.line>span{display:inline-block;will-change:transform;transition:transform .6s cubic-bezier(.2,.8,.2,1)}\r\n.line.w1,.line.w3{font-size:.32em;letter-spacing:.02em}\r\n.line.w3{text-align:right}\r\n.line.w2{white-space:nowrap;line-height:1}\r\n\/* \u30de\u30a6\u30b9\u8ffd\u5f93\uff1a\u8a9e\u3054\u3068\u306b\u5965\u884c\u304d\u3092\u5909\u3048\u3066\u52d5\u304b\u3059\uff08--mx\/--my \u306fJS\u3067 -1\u301c1\uff09 *\/\r\n.line.w1>span{transform:translate(calc(var(--mx,0) * -14px),calc(var(--my,0) * -8px))}\r\n.line.w2>span{transform:translate(calc(var(--mx,0) * 28px),calc(var(--my,0) * 14px))}\r\n.line.w3>span{transform:translate(calc(var(--mx,0) * -6px),calc(var(--my,0) * -4px))}\r\n.kv-big em{background-position:calc(50% + var(--mx,0) * 50%) 0!important;animation:none!important;transition:background-position .6s}\r\n\/* \u4e2d\u592e\u306b\u5927\u304d\u304f\u7f6e\u304f\u3001\u6b62\u307e\u3063\u305f\u307e\u307e\u306e\u6de1\u3044\u30b7\u30f3\u30dc\u30eb\u30de\u30fc\u30af *\/\r\n.kv-mark{position:absolute;left:50%;top:52%;width:min(82vh,780px);aspect-ratio:1;transform:translate(-50%,-50%);color:#fff;opacity:.5;pointer-events:none;filter:drop-shadow(0 40px 80px rgba(34,50,74,.06))}\r\n.kv-mark svg{width:100%;height:100%;display:block}\r\n#pirico-webgl-wrap{position:absolute;inset:0;pointer-events:none}\r\n#pirico-webgl-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}\r\n#pirico-webgl-dim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 700px at 30% 20%,rgba(255,255,255,.28),rgba(255,255,255,.10)),linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.02))}\r\n.kv-jp{margin-top:32px;font-size:clamp(14px,1.25vw,16px);font-weight:500;line-height:2.1;letter-spacing:.1em;opacity:0;animation:fade 1.2s .8s forwards}\r\n.kv-jp small{display:block;font-family:var(--en);font-size:12px;color:var(--sub);font-weight:400;margin-top:12px;letter-spacing:.16em}\r\n\/* what we do *\/\r\n.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}\r\n.pillar{background:#fff;border-radius:24px;padding:36px 28px;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(34,50,74,.05);transition:transform .5s cubic-bezier(.2,.8,.2,1)}\r\n.pillar:hover{transform:translateY(-6px)}\r\n.pillar::after{content:\"\";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-60px;filter:blur(30px);opacity:.7}\r\n.pillar.p1::after{background:#cfe9fa}.pillar.p2::after{background:#fbd9e8}.pillar.p3::after{background:#cdeff3}.pillar.p4::after{background:#fde3ee}\r\n.pillar .no{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--sub)}\r\n.pillar h3{font-family:var(--en);font-weight:500;font-size:24px;line-height:1.25;margin-top:20px;position:relative}\r\n.pillar .ja{font-size:13px;color:var(--accent);font-weight:500;margin-top:4px}\r\n.pillar .lead{font-size:16px;font-weight:700;margin-top:20px;line-height:1.6}\r\n.pillar p{font-size:13.5px;color:var(--sub);margin-top:10px;line-height:1.8}\r\n@keyframes fade{to{opacity:1}}\r\n.rotate{display:inline-grid;vertical-align:bottom;color:var(--accent)}\r\n.rotate i{grid-area:1\/1;font-style:normal;opacity:0;animation:rot 9s infinite}\r\n.rotate i:nth-child(2){animation-delay:3s}\r\n.rotate i:nth-child(3){animation-delay:6s}\r\n@keyframes rot{0%{opacity:0;transform:translateY(40%)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-40%)}}\r\n.scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:10px}\r\n.scroll::after{content:\"\";width:1px;height:48px;background:linear-gradient(var(--ink),transparent);animation:sc 2s infinite}\r\n@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}\r\n\r\n\/* marquee *\/\r\n.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;background:#fff}\r\n.mq{display:flex;width:max-content;animation:mq 30s linear infinite}\r\n.mq span{font-family:var(--en);font-size:clamp(22px,3vw,36px);font-weight:300;letter-spacing:.06em;white-space:nowrap;padding-right:48px}\r\n.mq span::after{content:\"\u2733\";color:var(--accent);margin-left:48px;font-size:.6em;vertical-align:.3em}\r\n@keyframes mq{to{transform:translateX(-50%)}}\r\n\r\n\/* about *\/\r\n.about{padding:140px 0}\r\n.about .big{font-size:clamp(22px,2.8vw,34px);font-weight:500;line-height:1.9;max-width:900px}\r\n.about .big em{font-style:normal;color:var(--accent)}\r\n.about p.s{margin-top:28px;color:var(--sub);max-width:640px}\r\n\r\n\/* branch *\/\r\n.branch{display:grid;grid-template-columns:1fr 1fr;gap:24px}\r\n.br{position:relative;border-radius:28px;overflow:hidden;min-height:440px;padding:48px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1)}\r\n.br::before{content:\"\";position:absolute;inset:0;z-index:-1;transition:transform 1s cubic-bezier(.2,.8,.2,1)}\r\n.br.r::before{background:radial-gradient(80% 90% at 90% 10%,#bfe5f5,transparent 60%),linear-gradient(150deg,#eaf6fb,#f7fbfe)}\r\n.br.n::before{background:radial-gradient(80% 90% at 90% 10%,#ffc9df,transparent 60%),linear-gradient(150deg,#fff0f6,#f7fbfe)}\r\n.br:hover{transform:translateY(-6px)}\r\n.br:hover::before{transform:scale(1.08)}\r\n.br .lbl{font-family:var(--en);font-size:12px;letter-spacing:.28em}\r\n.br h3{font-family:var(--en);font-weight:300;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.01em;margin-top:16px}\r\n.br .q{font-size:clamp(18px,1.8vw,22px);font-weight:700;margin-top:24px;line-height:1.6}\r\n.br p{font-size:14px;color:var(--sub);margin-top:10px}\r\n.br .go{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(34,50,74,.15);padding-top:20px;font-weight:500;font-size:14px}\r\n.br .circle{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--en);transition:.4s}\r\n.br:hover .circle{background:var(--accent);transform:translateX(6px)}\r\n\r\n\/* product *\/\r\n.prod{display:grid;grid-template-columns:1fr 1.1fr;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 20px 60px rgba(34,50,74,.08);transition:transform .5s cubic-bezier(.2,.8,.2,1)}\r\n.prod:hover{transform:translateY(-6px)}\r\n.prod-vis{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 80% at 25% 20%,#ffd1e4,transparent 60%),radial-gradient(70% 80% at 80% 90%,#cfe9fa,transparent 60%),linear-gradient(140deg,#fff3f8,#eef8fc);overflow:hidden}\r\n.prod-logo{font-family:var(--en);font-weight:600;font-size:clamp(44px,5.5vw,72px);letter-spacing:-.01em;background:linear-gradient(90deg,#e886ae,#8ccbef);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform 1s cubic-bezier(.2,.8,.2,1)}\r\n.prod:hover .prod-logo{transform:scale(1.06)}\r\n.prod-beta{position:absolute;top:24px;left:24px;background:#fff;border-radius:999px;font-size:12px;padding:4px 14px;font-weight:500;color:#e886ae}\r\n.prod-body{padding:48px;display:flex;flex-direction:column;gap:12px}\r\n.prod-body .lbl{font-family:var(--en);font-size:12px;letter-spacing:.28em;color:#e886ae}\r\n.prod-body h3{font-family:var(--en);font-weight:500;font-size:38px;line-height:1.2}\r\n.prod-body h3 small{font-family:'Noto Sans JP';font-size:13px;color:var(--sub);margin-left:12px;font-weight:400}\r\n.prod-body .q{font-size:18px;font-weight:700}\r\n.prod-body p{font-size:14px;color:var(--sub)}\r\n.prod-body .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;font-weight:500;font-size:14px}\r\n.prod-body .circle{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--en);transition:.4s}\r\n.prod-body .dom{display:block;font-family:var(--en);font-size:12px;color:#e886ae;letter-spacing:.08em;font-weight:400}\r\n.prod:hover .circle{background:#e886ae;transform:translateX(6px)}\r\n\r\n\/* works grid on top *\/\r\n.wk6{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}\r\n.wk6 .thumb{transition:transform .6s cubic-bezier(.2,.8,.2,1)}\r\n.wk6 .work:hover .thumb{transform:scale(.97)}\r\n.t4{background:linear-gradient(135deg,#a8e3e6,#f3fbfc)}\r\n.t5{background:linear-gradient(135deg,#bcd9f2,#eef6fc)}\r\n.t6{background:linear-gradient(135deg,#f3bfd3,#e3f2fa)}\r\n\r\n\/* news *\/\r\n.news li{list-style:none;display:flex;gap:28px;padding:22px 4px;border-bottom:1px solid var(--line);font-size:14.5px;align-items:baseline}\r\n.news time{font-family:var(--en);font-size:13px;color:var(--sub);min-width:90px}\r\n.news .cat{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 12px;color:var(--sub);white-space:nowrap}\r\n\r\n\/* reveal *\/\r\n.rv{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}\r\n.rv.in{opacity:1;transform:none}\r\n.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}\r\n\r\n@media (max-width:560px){\r\n  .pillars{grid-template-columns:1fr!important}\r\n}\r\n@media (max-width:900px){\r\n  .branch,.wk6,.prod{grid-template-columns:1fr}\r\n  .prod-vis{min-height:240px}\r\n  .prod-body{padding:32px 28px}\r\n  .about .big br{display:none}\r\n  .line.w1,.line.w3{font-size:.6em}\r\n  .kv-mark{width:110vw}\r\n  .pillars{grid-template-columns:1fr 1fr}\r\n  .br{min-height:360px;padding:36px 28px}\r\n  .news li{flex-wrap:wrap;gap:8px 16px}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  *,*::before,*::after{animation:none!important;transition:none!important}\r\n  .line>span,.kv-jp,.rv{transform:none;opacity:1}\r\n  .rotate i:first-child{opacity:1}\r\n}\r\n\r\n\r\n.wp-site-blocks{padding:0!important}\r\n.wp-block-post-content{max-width:none!important;margin:0!important;padding:0!important}\r\n.wp-block-post-content>*{margin-block:0!important;max-width:none!important}\r\nbody.admin-bar header{top:48px}\r\nhtml{scroll-behavior:smooth}\r\n\r\n<\/style>\r\n<div class=\"picom-page\">\r\n<header><div class=\"hbar\">\r\n  <a class=\"logo\" href=\"\/?page_id=105\">pi <span>communications<\/span><\/a>\r\n  <nav>\r\n    <a href=\"\/?page_id=106\">RENEWAL<\/a><a href=\"\/?page_id=107\">NEW SITE<\/a><a href=\"#product\">PRODUCT<\/a><a href=\"#works\">WORKS<\/a><a href=\"#company\">COMPANY<\/a>\r\n    <a class=\"btn\" href=\"#contact\">\u304a\u554f\u3044\u5408\u308f\u305b <span class=\"arr\">\u2192<\/span><\/a>\r\n  <\/nav>\r\n<\/div><\/header>\r\n\r\n\r\n<section class=\"kv\">\r\n  <div id=\"pirico-webgl-wrap\" aria-hidden=\"true\"><canvas id=\"pirico-webgl-canvas\"><\/canvas><div id=\"pirico-webgl-dim\"><\/div><\/div>\r\n  <div class=\"kv-mark\" aria-hidden=\"true\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><defs><mask id=\"pcm-kv\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"100\" height=\"100\"><rect width=\"100\" height=\"100\" fill=\"#fff\"\/><path fill=\"#000\" d=\"M50 33 C51.6 45 55 48.4 67 50 C55 51.6 51.6 55 50 67 C48.4 55 45 51.6 33 50 C45 48.4 48.4 45 50 33Z\"\/><\/mask><\/defs><g mask=\"url(#pcm-kv)\" fill=\"currentColor\"><circle cx=\"52\" cy=\"48\" r=\"38\"\/><circle cx=\"27\" cy=\"73\" r=\"18\"\/><\/g><\/svg><\/div>\r\n  <div class=\"wrap\">\r\n    <h1 class=\"kv-big\" aria-label=\"Where every POSSIBILITY stays open.\">\r\n      <span class=\"line w1\"><span>Where every<\/span><\/span>\r\n      <span class=\"line w2\"><span><em>POSSIBILITY<\/em><\/span><\/span>\r\n      <span class=\"line w3\"><span>stays open.<\/span><\/span>\r\n    <\/h1>\r\n    <p class=\"kv-jp\">\u8a00\u8449\u306b\u306a\u308a\u304d\u3063\u3066\u3044\u306a\u3044\u60f3\u3044\u3092\u3059\u304f\u3044\u4e0a\u3052\u3001\u304d\u3061\u3093\u3068\u5c4a\u304f\u304b\u305f\u3061\u3078\u3002<br>\u30c7\u30b6\u30a4\u30f3\u306e\u529b\u3067\u3001\u4e8b\u696d\u3068\u4eba\u306e\u53ef\u80fd\u6027\u3092\u3072\u3089\u304f\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u30b9\u30bf\u30b8\u30aa\u3002\r\n      <small>Design \uff0f Creative \uff0f AI-Driven Development \uff0f Ventures<\/small><\/p>\r\n  <\/div>\r\n  <div class=\"scroll\">SCROLL<\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"marquee\"><div class=\"mq\">\r\n  <span>Design<\/span><span>Creative<\/span><span>AI-Driven Development<\/span><span>Ventures<\/span>\r\n  <span>Design<\/span><span>Creative<\/span><span>AI-Driven Development<\/span><span>Ventures<\/span>\r\n<\/div><\/div>\r\n\r\n\r\n<section class=\"about\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">VISION<\/span><\/div>\r\n  <p class=\"big rv\">\u53ef\u80fd\u6027\u304c\u9589\u3056\u3055\u308c\u306a\u3044\u4e16\u754c\u3092\u3064\u304f\u308b\u3002<\/p>\r\n  <p class=\"s rv d1\">\u4f1d\u3048\u65b9\u304c\u308f\u304b\u3089\u306a\u3044\u3002\u6642\u9593\u3082\u4eba\u624b\u3082\u8db3\u308a\u306a\u3044\u3002\u53e4\u3044Web\u30b5\u30a4\u30c8\u306e\u305b\u3044\u3067\u3001\u672c\u6765\u5c4a\u304f\u306f\u305a\u306e\u76f8\u624b\u306b\u5c4a\u3044\u3066\u3044\u306a\u3044\u3002<br>\r\n  \u305d\u3093\u306a\u7406\u7531\u3067\u3001\u4f1a\u793e\u3084\u4eba\u306e\u53ef\u80fd\u6027\u304c\u9589\u3056\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u306f\u3001\u3082\u3063\u305f\u3044\u306a\u3044\u3068\u8003\u3048\u3066\u3044\u307e\u3059\u3002<br><br>\r\n  pi communications \u306f\u3001\u8a00\u8449\u306b\u306a\u308a\u304d\u3063\u3066\u3044\u306a\u3044\u60f3\u3044\u3092\u3059\u304f\u3044\u4e0a\u3052\u3001\u304d\u3061\u3093\u3068\u5c4a\u304f\u304b\u305f\u3061\u3078\u7ffb\u8a33\u3057\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u3001\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u3001AI\u99c6\u52d5\u958b\u767a\u3001\u305d\u3057\u3066\u81ea\u793e\u4e8b\u696d\u3092\u901a\u3058\u3066\u3001\u4e00\u3064\u3067\u3082\u591a\u304f\u306e\u53ef\u80fd\u6027\u3092\u3072\u3089\u3044\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec alt\" id=\"business\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">WHAT WE DO<\/span><h2>\u30c7\u30b6\u30a4\u30f3\u3068\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3067\u3001<br>\u53ef\u80fd\u6027\u3092\u304b\u305f\u3061\u306b\u3059\u308b\u3002<\/h2><\/div>\r\n  <div class=\"pillars\">\r\n    <div class=\"pillar p1 rv\"><div class=\"no\">01<\/div><h3>Design<\/h3><div class=\"ja\">\u30c7\u30b6\u30a4\u30f3<\/div><div class=\"lead\">\u60f3\u3044\u3092\u3001\u4f1d\u308f\u308b\u304b\u305f\u3061\u306b\u3002<\/div><p>\u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u3001Web\u30b5\u30a4\u30c8\u3001LP\u3001\u30a2\u30d7\u30eaUI\u3002\u4e8b\u696d\u306e\u672c\u8cea\u3092\u6574\u7406\u3057\u3001\u9078\u3070\u308c\u308b\u7406\u7531\u3092\u30c7\u30b6\u30a4\u30f3\u3057\u307e\u3059\u3002<\/p><\/div>\r\n    <div class=\"pillar p2 rv d1\"><div class=\"no\">02<\/div><h3>Creative<\/h3><div class=\"ja\">\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6<\/div><div class=\"lead\">\u5fc3\u304c\u52d5\u304f\u8868\u73fe\u3092\u3002<\/div><p>\u6620\u50cf\u3001\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3001SNS\u30b3\u30f3\u30c6\u30f3\u30c4\u3002\u5c4a\u3051\u305f\u3044\u76f8\u624b\u306e\u5fc3\u306b\u6b8b\u308b\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u3092\u4f01\u753b\u30fb\u5236\u4f5c\u3057\u307e\u3059\u3002<\/p><\/div>\r\n    <div class=\"pillar p3 rv d2\"><div class=\"no\">03<\/div><h3>AI-Driven<br>Development<\/h3><div class=\"ja\">AI\u99c6\u52d5\u958b\u767a<\/div><div class=\"lead\">\u901f\u304f\u3001\u78ba\u304b\u306b\u3001\u3064\u304f\u308b\u3002<\/div><p>\u751f\u6210AI\u3092\u7d44\u307f\u8fbc\u3093\u3060\u72ec\u81ea\u306e\u5236\u4f5c\u30d5\u30ed\u30fc\u3067\u3001Web\u30b5\u30a4\u30c8\u3084Web\u30a2\u30d7\u30ea\u3092\u9ad8\u54c1\u8cea\u304b\u3064\u30b9\u30d4\u30fc\u30c7\u30a3\u306b\u958b\u767a\u3002\u516c\u958b\u5f8c\u306e\u904b\u7528\u307e\u3067\u652f\u3048\u307e\u3059\u3002<\/p><\/div>\r\n    <div class=\"pillar p4 rv\"><div class=\"no\">04<\/div><h3>Ventures<\/h3><div class=\"ja\">\u81ea\u793e\u4e8b\u696d<\/div><div class=\"lead\">\u81ea\u3089\u3001\u53ef\u80fd\u6027\u3092\u3072\u3089\u304f\u3002<\/div><p>\u53d7\u8a17\u3067\u57f9\u3063\u305f\u77e5\u898b\u3092\u3001\u81ea\u793e\u30b5\u30fc\u30d3\u30b9\u306b\u3002\u63a8\u3057\u6d3b\u9060\u5f81\u30d7\u30e9\u30f3\u30ca\u30fc\u300cOshiori\u300d\u3092\u306f\u3058\u3081\u3001\u65b0\u3057\u3044\u4e8b\u696d\u3092\u751f\u307f\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p><\/div>\r\n  <\/div>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec alt\" style=\"padding-top:120px\"><div class=\"wrap\">\r\n  <div class=\"sh center rv\"><span class=\"en\">SERVICE<\/span><h2>\u3069\u3061\u3089\u306e\u3054\u76f8\u8ac7\u3067\u3059\u304b\uff1f<\/h2><\/div>\r\n  <div class=\"branch\">\r\n    <a class=\"br r rv\" href=\"\/?page_id=106\">\r\n      <div>\r\n        <div class=\"lbl\">FOR RENEWAL<\/div>\r\n        <h3>Renewal<\/h3>\r\n        <div class=\"q\">\u4eca\u3042\u308b\u30b5\u30a4\u30c8\u3092\u3001<br>\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb\u3057\u305f\u3044<\/div>\r\n        <p>\u30c7\u30b6\u30a4\u30f3\u304c\u53e4\u3044\u30fb\u30b9\u30de\u30db\u975e\u5bfe\u5fdc\u30fb\u66f4\u65b0\u3067\u304d\u306a\u3044\u3002<br>\u6700\u77ed2\u9031\u9593\u3067\u3001\u6210\u679c\u3092\u751f\u3080\u30b5\u30a4\u30c8\u3078\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"go\">\u30ea\u30cb\u30e5\u30fc\u30a2\u30eb\u5c02\u9580\u30b5\u30fc\u30d3\u30b9\u3092\u898b\u308b<span class=\"circle\">\u2192<\/span><\/div>\r\n    <\/a>\r\n    <a class=\"br n rv d1\" href=\"\/?page_id=107\">\r\n      <div>\r\n        <div class=\"lbl\">FOR NEW WEBSITE<\/div>\r\n        <h3>New Site<\/h3>\r\n        <div class=\"q\">\u3053\u308c\u304b\u3089\u3001<br>\u65b0\u3057\u304f\u30b5\u30a4\u30c8\u3092\u3064\u304f\u308a\u305f\u3044<\/div>\r\n        <p>\u958b\u696d\u30fb\u65b0\u898f\u4e8b\u696d\u30fb\u30d6\u30e9\u30f3\u30c9\u7acb\u3061\u4e0a\u3052\u306b\u3002<br>\u30ed\u30b4\u304b\u3089Web\u30b5\u30a4\u30c8\u307e\u3067\u4e00\u8cab\u5236\u4f5c\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"go\">\u65b0\u898f\u5236\u4f5c\u30b5\u30fc\u30d3\u30b9\u3092\u898b\u308b<span class=\"circle\">\u2192<\/span><\/div>\r\n    <\/a>\r\n  <\/div>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec\" id=\"product\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">PRODUCT<\/span><h2>\u81ea\u793e\u30b5\u30fc\u30d3\u30b9<\/h2><\/div>\r\n  <a class=\"prod rv\" href=\"https:\/\/oshiori.com\" target=\"_blank\" rel=\"noopener\">\r\n    <div class=\"prod-vis\"><span class=\"prod-logo\">Oshiori<\/span><span class=\"prod-beta\">\u03b2\u7248\u516c\u958b\u4e2d<\/span><\/div>\r\n    <div class=\"prod-body\">\r\n      <div class=\"lbl\">OSHI-KATSU TRIP PLANNER<\/div>\r\n      <h3>Oshiori<small>\u30aa\u30b7\u30aa\u30ea<\/small><\/h3>\r\n      <p class=\"q\">\u63a8\u3057\u306b\u4f1a\u3044\u306b\u884c\u304f\u9060\u5f81\u3092\u3001\u3082\u3063\u3068\u81ea\u7531\u306b\u3002<\/p>\r\n      <p>\u30e9\u30a4\u30d6\u3084\u821e\u53f0\u306e\u9060\u5f81\u5148\u3068\u516c\u6f14\u6642\u9593\u3092\u9078\u3076\u3060\u3051\u3067\u3001\u3054\u306f\u3093\u30fb\u5bbf\u30fb\u30b5\u30a6\u30ca\u30fb\u89b3\u5149\u307e\u3067\u7d44\u307f\u8fbc\u3093\u3060\u300c\u9060\u5f81\u306e\u3057\u304a\u308a\u300d\u3092\u3064\u304f\u308c\u308b\u63a8\u3057\u6d3b\u30d7\u30e9\u30f3\u30ca\u30fc\u3002<br>\u300c\u77e5\u3089\u306a\u3044\u8857\u3060\u304b\u3089\u300d\u300c\u6bb5\u53d6\u308a\u304c\u5927\u5909\u3060\u304b\u3089\u300d\u3068\u9060\u5f81\u3092\u3042\u304d\u3089\u3081\u306a\u3044\u4e16\u754c\u3092\u76ee\u6307\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\r\n      <div class=\"go\"><span>\u30b5\u30fc\u30d3\u30b9\u3092\u898b\u308b<small class=\"dom\">oshiori.com<\/small><\/span><span class=\"circle\">\u2192<\/span><\/div>\r\n    <\/div>\r\n  <\/a>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec\" id=\"works\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">WORKS<\/span><h2>\u5236\u4f5c\u5b9f\u7e3e<\/h2><\/div>\r\n  <div class=\"wk6\">\r\n    <a class=\"work rv\" href=\"#\"><div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/picom.jp\/wp-content\/uploads\/2026\/10\/picom-work-venus.jpg\" alt=\"\u7f8e\u5bb9\u76ae\u819a\u79d1\u30af\u30ea\u30cb\u30c3\u30af\u69d8\u3000\u65bd\u8853\u30e1\u30cb\u30e5\u30fcLP\" loading=\"lazy\"><\/div><div class=\"meta\">LANDING PAGE<\/div><h3>\u7f8e\u5bb9\u76ae\u819a\u79d1\u30af\u30ea\u30cb\u30c3\u30af\u69d8\u3000\u65bd\u8853\u30e1\u30cb\u30e5\u30fcLP<\/h3><\/a>\r\n    <a class=\"work rv d1\" href=\"#\"><div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/picom.jp\/wp-content\/uploads\/2026\/10\/picom-work-buzz.jpg\" alt=\"\u7f8e\u5bb9\u533b\u7642SNS\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u4f1a\u793e\u69d8\u3000\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\" loading=\"lazy\"><\/div><div class=\"meta\">CORPORATE SITE<\/div><h3>\u7f8e\u5bb9\u533b\u7642SNS\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u4f1a\u793e\u69d8\u3000\u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8<\/h3><\/a>\r\n    <a class=\"work rv d2\" href=\"#\"><div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/picom.jp\/wp-content\/uploads\/2026\/10\/picom-work-promino.jpg\" alt=\"\u5973\u6027\u5411\u3051\u30d7\u30ed\u30c6\u30a4\u30f3\u30d6\u30e9\u30f3\u30c9\u69d8\u3000\u5546\u54c1LP\" loading=\"lazy\"><\/div><div class=\"meta\">LANDING PAGE<\/div><h3>\u5973\u6027\u5411\u3051\u30d7\u30ed\u30c6\u30a4\u30f3\u30d6\u30e9\u30f3\u30c9\u69d8\u3000\u5546\u54c1LP<\/h3><\/a>\r\n    <a class=\"work rv\" href=\"#\"><div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/picom.jp\/wp-content\/uploads\/2026\/10\/picom-work-metaverse.jpg\" alt=\"\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u69d8\u3000\u30ed\u30b4\u30fb\u516c\u5f0f\u30b5\u30a4\u30c8\" loading=\"lazy\"><\/div><div class=\"meta\">BRANDING \/ WEBSITE<\/div><h3>\u30af\u30ea\u30a8\u30a4\u30bf\u30fc\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u69d8\u3000\u30ed\u30b4\u30fb\u516c\u5f0f\u30b5\u30a4\u30c8<\/h3><\/a>\r\n    <a class=\"work rv d1\" href=\"#\"><div class=\"thumb\"><img decoding=\"async\" src=\"https:\/\/picom.jp\/wp-content\/uploads\/2026\/10\/picom-work-denki.jpg\" alt=\"\u96fb\u529b\u4f1a\u793e\u69d8\u3000\u30a2\u30d7\u30eaUI\u30fbLP\u30fb\u30ed\u30b4\" loading=\"lazy\"><\/div><div class=\"meta\">APP UI \/ LP<\/div><h3>\u96fb\u529b\u4f1a\u793e\u69d8\u3000\u30a2\u30d7\u30eaUI\u30fbLP\u30fb\u30ed\u30b4<\/h3><\/a>\r\n    <a class=\"work rv d2\" href=\"#\"><div class=\"thumb t6\">RECRUIT LP<\/div><div class=\"meta\">LANDING PAGE<\/div><h3>\u63a1\u7528\u30b5\u30a4\u30c8\u3000\u6c42\u8077\u8005\u5411\u3051LP<\/h3><\/a>\r\n  <\/div>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec alt\" id=\"company\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">MESSAGE<\/span><h2>\u4ee3\u8868\u30e1\u30c3\u30bb\u30fc\u30b8<\/h2><\/div>\r\n  <div class=\"msg rv\">\r\n    <div class=\"photo\">PHOTO<\/div>\r\n    <div>\r\n      <blockquote>\r\n        Web\u30b5\u30a4\u30c8\u306f\u3001\u4f1a\u793e\u306e\u300c\u9854\u300d\u3067\u3042\u308a\u300124\u6642\u9593\u50cd\u304f\u55b6\u696d\u62c5\u5f53\u3067\u3059\u3002<br><br>\r\n        \u5236\u4f5c\u4f1a\u793e\u3084\u4e8b\u696d\u4f1a\u793e\u3067\u3001\u30c7\u30b6\u30a4\u30ca\u30fc\u30fb\u30ea\u30fc\u30c9\u30c7\u30b6\u30a4\u30ca\u30fc\u3068\u3057\u306610\u5e74\u8fd1\u304f\u3001Web\u30b5\u30a4\u30c8\u30fbLP\u30fb\u30a2\u30d7\u30ea\u30fb\u30ed\u30b4\u306a\u3069\u5e45\u5e83\u3044\u5236\u4f5c\u306b\u643a\u308f\u3063\u3066\u304d\u307e\u3057\u305f\u3002\u305d\u306e\u7d4c\u9a13\u3092\u3082\u3068\u306b\u300c\u30b9\u30d4\u30fc\u30c9\u300d\u3068\u300c\u6210\u679c\u300d\u3068\u300c\u5b89\u5fc3\u300d\u3092\u517c\u306d\u5099\u3048\u305fWeb\u5236\u4f5c\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002\r\n      <\/blockquote>\r\n      <div class=\"sign\">pi communications \u4ee3\u8868<b>pirico<\/b><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sh center rv\" style=\"margin-top:120px\"><span class=\"en\">COMPANY<\/span><h2>\u4f1a\u793e\u6982\u8981<\/h2><\/div>\r\n  <table class=\"co rv\">\r\n    <tr><th>\u5c4b\u53f7<\/th><td>pi communications<\/td><\/tr>\r\n    <tr><th>\u4ee3\u8868<\/th><td>pirico<\/td><\/tr>\r\n    <tr><th>\u8a2d\u7acb<\/th><td>2021\u5e74<\/td><\/tr>\r\n    <tr><th>\u6240\u5728\u5730<\/th><td>\u6771\u4eac\u90fd\u6e0b\u8c37\u533a<\/td><\/tr>\r\n    <tr><th>\u4e8b\u696d\u5185\u5bb9<\/th><td>\r\n      1. \u30c7\u30b6\u30a4\u30f3\u4e8b\u696d \u2500\u2500 \u30d6\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u3001Web\u30b5\u30a4\u30c8\u30fbLP\u30fb\u30a2\u30d7\u30eaUI\u306e\u4f01\u753b\u30fb\u30c7\u30b6\u30a4\u30f3<br>\r\n      2. \u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u4e8b\u696d \u2500\u2500 \u6620\u50cf\u30fb\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u30fbSNS\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4f01\u753b\u30fb\u5236\u4f5c<br>\r\n      3. AI\u99c6\u52d5\u958b\u767a\u4e8b\u696d \u2500\u2500 \u751f\u6210AI\u3092\u6d3b\u7528\u3057\u305fWeb\u30b5\u30a4\u30c8\u30fbWeb\u30a2\u30d7\u30ea\u306e\u958b\u767a\u3001\u904b\u7528\u4fdd\u5b88<br>\r\n      4. \u81ea\u793e\u4e8b\u696d \u2500\u2500 \u63a8\u3057\u6d3b\u9060\u5f81\u30d7\u30e9\u30f3\u30ca\u30fc\u300cOshiori\u300d\u306e\u4f01\u753b\u30fb\u958b\u767a\u30fb\u904b\u55b6<\/td><\/tr>\r\n    <tr><th>\u4e3b\u306a\u53d6\u5f15\u696d\u7a2e<\/th><td>\u7f8e\u5bb9\u533b\u7642\u3001\u30d8\u30eb\u30b9\u30b1\u30a2\u3001\u30a8\u30cd\u30eb\u30ae\u30fc\u3001\u30a8\u30f3\u30bf\u30e1\u3001\u4eba\u6750 \u307b\u304b<\/td><\/tr>\r\n    <tr><th>\u304a\u554f\u3044\u5408\u308f\u305b<\/th><td>hello@picom.jp<\/td><\/tr>\r\n  <\/table>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"sec\"><div class=\"wrap\">\r\n  <div class=\"sh rv\"><span class=\"en\">NEWS<\/span><h2>\u304a\u77e5\u3089\u305b<\/h2><\/div>\r\n  <ul class=\"news rv\">\r\n    <li><time>2026.02.27<\/time><span class=\"cat\">\u304a\u77e5\u3089\u305b<\/span>\u30c7\u30b8\u30bf\u30eb\u30d2\u30e5\u30fc\u30de\u30f3\u5236\u4f5c\u7814\u4fee\u300c\u30b7\u30f3\u30ae\u30e5\u30de\u30f3\u300d<\/li>\r\n    <li><time>2026.02.12<\/time><span class=\"cat\">\u30b5\u30a4\u30c8\u5236\u4f5c<\/span>\u6c42\u8077\u8005\u5411\u3051LP\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f<\/li>\r\n    <li><time>\u2014<\/time><span class=\"cat\">\u304a\u77e5\u3089\u305b<\/span>Web\u30b5\u30a4\u30c8\u3092\u516c\u958b\u3057\u307e\u3057\u305f<\/li>\r\n  <\/ul>\r\n<\/div><\/section>\r\n\r\n\r\n<section class=\"cta-sec\" id=\"contact\"><div class=\"wrap\">\r\n  <h2>Web\u306e\u3053\u3068\u306a\u3089\u3001<br>\u307e\u305a\u306f\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/h2>\r\n  <p>\u3054\u76f8\u8ac7\u30fb\u304a\u898b\u7a4d\u308a\u306f\u7121\u6599\u3067\u3059\u30022\u55b6\u696d\u65e5\u4ee5\u5185\u306b\u3054\u8fd4\u4fe1\u3057\u307e\u3059\u3002<\/p>\r\n  <a class=\"btn\" href=\"\/?page_id=44\">\u304a\u554f\u3044\u5408\u308f\u305b\u306f\u3053\u3061\u3089 <span class=\"arr\">\u2192<\/span><\/a>\r\n<\/div><\/section>\r\n\r\n<footer><div class=\"wrap\">\r\n  <div class=\"logo\">pi communications<\/div>\r\n  <div>\u00a9 pi communications<\/div>\r\n<\/div><\/footer>\r\n\r\n<script>\r\n\/\/ \u73fe\u884c picom.jp \u306e\u30d5\u30a1\u30fc\u30b9\u30c8\u30d3\u30e5\u30fc\u80cc\u666f\uff08WebGL\uff09\u3092\u305d\u306e\u307e\u307e\u79fb\u690d\u3002\r\n\/\/ \u30b7\u30a7\u30fc\u30c0\u30fc\u306f\u672c\u756a\u3068\u540c\u4e00\u3002\u30de\u30a6\u30f3\u30c8\u5148\u3060\u3051 .kv \u5185\u306e #pirico-webgl-wrap \u306b\u5909\u66f4\u3002\r\n(function () {\r\n  if (window.__piricoRawWebGLStarted) return;\r\n  window.__piricoRawWebGLStarted = true;\r\n\r\n  const reduced = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n  function onReady(fn) {\r\n    if (document.readyState === \"complete\" || document.readyState === \"interactive\") fn();\r\n    else document.addEventListener(\"DOMContentLoaded\", fn, { once: true });\r\n  }\r\n\r\n  function getPixelRatio() {\r\n    const dpr = window.devicePixelRatio || 1;\r\n    const isMobile = \/Mobi|Android\/i.test(navigator.userAgent);\r\n    return Math.min(dpr, isMobile ? 1.0 : 1.5);\r\n  }\r\n\r\n  function createShader(gl, type, source) {\r\n    const shader = gl.createShader(type);\r\n    gl.shaderSource(shader, source);\r\n    gl.compileShader(shader);\r\n    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\r\n      console.error(gl.getShaderInfoLog(shader));\r\n      gl.deleteShader(shader);\r\n      return null;\r\n    }\r\n    return shader;\r\n  }\r\n\r\n  function createProgram(gl, vsSource, fsSource) {\r\n    const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);\r\n    const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);\r\n    if (!vs || !fs) return null;\r\n    const program = gl.createProgram();\r\n    gl.attachShader(program, vs);\r\n    gl.attachShader(program, fs);\r\n    gl.linkProgram(program);\r\n    gl.deleteShader(vs);\r\n    gl.deleteShader(fs);\r\n    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\r\n      console.error(gl.getProgramInfoLog(program));\r\n      gl.deleteProgram(program);\r\n      return null;\r\n    }\r\n    return program;\r\n  }\r\n\r\n  onReady(function () {\r\n    const wrap = document.getElementById(\"pirico-webgl-wrap\");\r\n    const canvas = document.getElementById(\"pirico-webgl-canvas\");\r\n    if (!wrap || !canvas) return;\r\n\r\n    const gl = canvas.getContext(\"webgl\", { alpha: true, antialias: true, premultipliedAlpha: false, preserveDrawingBuffer: false });\r\n    if (!gl) return;\r\n\r\n    const vsSource = `\r\n      attribute vec2 a_pos;\r\n      void main() {\r\n        gl_Position = vec4(a_pos, 0.0, 1.0);\r\n      }\r\n    `;\r\n\r\n    const fsSource = `\r\n      precision highp float;\r\n\r\n      uniform vec2 u_res;\r\n      uniform float u_time;\r\n\r\n      float hash(vec2 p){\r\n        return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453123);\r\n      }\r\n\r\n      float noise(vec2 p){\r\n        vec2 i = floor(p);\r\n        vec2 f = fract(p);\r\n        float a = hash(i);\r\n        float b = hash(i + vec2(1.0, 0.0));\r\n        float c = hash(i + vec2(0.0, 1.0));\r\n        float d = hash(i + vec2(1.0, 1.0));\r\n        vec2 u = f * f * (3.0 - 2.0 * f);\r\n        return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\r\n      }\r\n\r\n      float fbm(vec2 p){\r\n        float v = 0.0;\r\n        float a = 0.5;\r\n        for(int i = 0; i < 5; i++){\r\n          v += a * noise(p);\r\n          p *= 2.0;\r\n          a *= 0.5;\r\n        }\r\n        return v;\r\n      }\r\n\r\n      void main(){\r\n        vec2 uv = gl_FragCoord.xy \/ u_res.xy;\r\n        vec2 p = (uv - 0.5) * vec2(u_res.x \/ u_res.y, 1.0);\r\n\r\n        float t = u_time * 0.32;\r\n\r\n        vec2 flowA = vec2(t * 1.2, t * 0.35);\r\n        vec2 flowB = vec2(-t * 0.45, t * 1.05);\r\n\r\n        float n1 = fbm(p * 1.6 + flowA);\r\n        float n2 = fbm(p * 1.6 + flowB);\r\n        vec2 warp = (vec2(n1, n2) - 0.5) * 2.2;\r\n        p += 0.10 * vec2(sin(p.y * 3.2 + u_time * 0.9), cos(p.x * 2.8 + u_time * 0.7));\r\n\r\n        float d = fbm(p * 2.4 + warp * 1.8);\r\n        float fog = smoothstep(0.22, 0.82, d);\r\n\r\n        vec3 skyWhite = vec3(0.97, 0.98, 1.00);\r\n        vec3 hazeBlue = vec3(0.78, 0.91, 0.98);\r\n        vec3 softBlue = vec3(0.88, 0.95, 1.00);\r\n        vec3 sakura = vec3(1.00, 0.70, 0.85);\r\n\r\n        vec3 base = mix(skyWhite, hazeBlue, uv.y);\r\n        base = mix(base, softBlue, uv.x * 0.30);\r\n\r\n        float pinkArea = smoothstep(0.48, 0.88, d);\r\n\r\n        vec3 col = mix(base, sakura, pinkArea * 0.26);\r\n        col += sakura * 0.04 * fog;\r\n\r\n        float glow = smoothstep(0.62, 0.92, d);\r\n        vec3 light = vec3(1.0, 0.98, 0.99) * glow * 0.16;\r\n        col = mix(col, col + light, 0.55);\r\n\r\n        col = mix(col, vec3(1.0, 0.99, 1.0), fog * 0.34);\r\n\r\n        float vignette = smoothstep(1.12, 0.18, length(p));\r\n        col *= mix(1.0, vignette, 0.16);\r\n\r\n        gl_FragColor = vec4(col, 1.0);\r\n      }\r\n    `;\r\n\r\n    const program = createProgram(gl, vsSource, fsSource);\r\n    if (!program) return;\r\n\r\n    const posLoc = gl.getAttribLocation(program, \"a_pos\");\r\n    const resLoc = gl.getUniformLocation(program, \"u_res\");\r\n    const timeLoc = gl.getUniformLocation(program, \"u_time\");\r\n\r\n    const buffer = gl.createBuffer();\r\n    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\r\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\r\n\r\n    function resize() {\r\n      const pr = getPixelRatio();\r\n      const w = Math.floor(wrap.clientWidth * pr);\r\n      const h = Math.floor(wrap.clientHeight * pr);\r\n      if (canvas.width !== w || canvas.height !== h) {\r\n        canvas.width = w;\r\n        canvas.height = h;\r\n      }\r\n      gl.viewport(0, 0, canvas.width, canvas.height);\r\n    }\r\n\r\n    resize();\r\n    window.addEventListener(\"resize\", resize);\r\n\r\n    gl.useProgram(program);\r\n    gl.enableVertexAttribArray(posLoc);\r\n    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);\r\n\r\n    let rafId = 0;\r\n    let last = performance.now();\r\n    let time = 0;\r\n\r\n    function frame(now) {\r\n      const dt = Math.min(0.033, (now - last) \/ 1000);\r\n      last = now;\r\n      if (!reduced) time += dt;\r\n      gl.uniform2f(resLoc, canvas.width, canvas.height);\r\n      gl.uniform1f(timeLoc, time);\r\n      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\r\n      rafId = requestAnimationFrame(frame);\r\n    }\r\n\r\n    function stop() {\r\n      if (rafId) cancelAnimationFrame(rafId);\r\n      rafId = 0;\r\n    }\r\n\r\n    function start() {\r\n      stop();\r\n      last = performance.now();\r\n      rafId = requestAnimationFrame(frame);\r\n    }\r\n\r\n    start();\r\n\r\n    document.addEventListener(\"visibilitychange\", function () {\r\n      if (document.visibilityState === \"hidden\") stop();\r\n      else { resize(); start(); }\r\n    });\r\n  });\r\n})();\r\n\r\n<\/script>\r\n<script>\r\n(function(){\r\n  const kv=document.querySelector('.kv'), wrap=kv.querySelector('.wrap'), em=kv.querySelector('.line.w2 em'), w2=kv.querySelector('.line.w2');\r\n  function fit(){\r\n    w2.style.fontSize='100px';\r\n    const cs=getComputedStyle(wrap), avail=wrap.clientWidth-parseFloat(cs.paddingLeft)-parseFloat(cs.paddingRight);\r\n    w2.style.fontSize=(100*avail\/em.getBoundingClientRect().width*.98)+'px';\r\n  }\r\n  fit(); document.fonts&&document.fonts.ready.then(fit); addEventListener('resize',fit);\r\n  if(matchMedia('(prefers-reduced-motion: reduce)').matches||matchMedia('(hover: none)').matches) return;\r\n  addEventListener('pointermove',e=>{kv.style.setProperty('--mx',(e.clientX\/innerWidth-.5)*2);kv.style.setProperty('--my',(e.clientY\/innerHeight-.5)*2);});\r\n})();\r\n<\/script>\r\n<script>\r\nconst io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});\r\ndocument.querySelectorAll('.rv').forEach(el=>io.observe(el));\r\n<\/script>\r\n<\/div>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>pi communications RENEWALNEW SITEPRODUCTWORKSCOMPANY \u304a\u554f\u3044\u5408\u308f\u305b \u2192 Where every POSSIBILITY stays open. \u8a00\u8449\u306b\u306a\u308a\u304d\u3063\u3066\u3044\u306a\u3044\u60f3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"picom-blank","meta":{"footnotes":""},"tags":[],"class_list":["post-105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/pages\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/picom.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=105"}],"version-history":[{"count":4,"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/picom.jp\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/picom.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/picom.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}