1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <link rel="icon" href="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/favicon.ico"> 9 <link rel="apple-touch-icon" href="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/favicon.png"> 10 11 <title>ASTRUM CORPORATION</title> 12 <meta name="description" content="This is the official website of ASTRUM CORPORATION, which is responsible for the Plus Groupâs stationery business. By leveraging collaboration across the Groupâs brands, we promote the creation of new value in stationery and global growth."> 13 14 <meta property="og:title" content="ASTRUM CORPORATION"> 15 <meta property="og:description" content="This is the official website of ASTRUM CORPORATION, which is responsible for the Plus Groupâs stationery business. By leveraging collaboration across the Groupâs brands, we promote the creation of new value in stationery and global growth."> 16 <meta property="og:image" content="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/ogp.jpg"> 17 <meta property="og:url" content="https://www.astrum-st.com/en"> 18 <meta property="og:type" content="website"> 19 <meta property="og:site_name" content="ASTRUM CORPORATION"> 20 21
21<script src="https://font.realtype.jp/api/script/v4" data-rt-user="jPB6vKJUkpyqteGsMErihPR8JU32MEDO" data-rt-input="true" data-rt-nofliker="true" data-rt-layout="true" data-rt-manual="true"></script>
21 22 <!--
22<script src="https://font.realtype.jp/api/script/nochattering" id="RT_SCRIPT_NO_CHATTERING" data-rt-timeout="5000"></script>
22 --> 23 24 <link rel="stylesheet" href="https://www.astrum-st.com/wp-content/themes/astrum/assets/css/initialize.css?v=202610055629"> 25 <link rel="stylesheet" href="https://www.astrum-st.com/wp-content/themes/astrum/assets/css/common.css?v=202610055629"> 26 27 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> 28 29 <link rel="stylesheet" href="https://www.astrum-st.com/wp-content/themes/astrum/assets/css/front-page.css?v=202610055629">
vendor: 67 bytes, lines 29-32
29 30 31 32 <script async src="https://www.googletagmanager.com/gtag/js?id=
32G-9QPYKFTKKR
vendor: 13 bytes, lines 32-33
32"></script> 33
33<script> 34
vendor: 134 bytes, lines 34-38
34window.dataLayer = window.dataLayer || []; 35 function gtag(){dataLayer.push(arguments);} 36 gtag('js', new Date()); 37 38 gtag('config', '
38G-9QPYKFTKKR
vendor: 5 bytes, lines 38-39
38'); 39
39</script>
39 40 41 42 <meta name='robots' content='max-image-preview:large' /> 43<style id="wp-img-auto-sizes-contain-inline-css"> 44img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} 45/*# sourceURL=wp-img-auto-sizes-contain-inline-css */ 46</style> 47<style id="wp-block-library-inline-css"> 48:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;
48--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} 49 50/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ 51</style> 52<style id="classic-theme-styles-inline-css"> 53/*! This file is auto-generated */ 54.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} 55/*# sourceURL=/wp-includes/css/classic-themes.min.css */ 56</style> 57 58<style id="global-styles-inline-css"> 59:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,
590) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
59.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} 60/*# sourceURL=global-styles-inline-css */ 61</style> 62 63<link rel='stylesheet' id='bogo-css' href='https://www.astrum-st.com/wp-content/plugins/bogo/includes/css/style.css?ver=3.9.1' media='all' /> 64<link rel="https://api.w.org/" href="https://www.astrum-st.com/en/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.astrum-st.com/xmlrpc.php?rsd" /> 65<meta name="generator" content="WordPress 7.1.2" /> 66<link rel="alternate" href="https://www.astrum-st.com/" hreflang="ja" /> 67<link rel="alternate" href="https://www.astrum-st.com/en/" hreflang="en-US" /> 68 69 70</head> 71<body class="lang_en"> 72 73 <!-- <div class="black_hole"></div> --> 74 75 <div class="loading"> 76 <div class="logo"> 77 <img class="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/logo.svg"> 78 <div class="mask"></div> 79 <div class="mask full"></div> 80 </div> 81 </div> 82 83 <a class="header_logo" aria-label="Logo" href="https://www.astrum-st.com/en/"> 84 <img class="" alt="Logo" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/logo_w.svg"> 85 </a> 86 87 <header class="mv_header"> 88 <div class="menu_bg"></div> 89 <nav class="bold"> 90 <ul> 91 <li> 92 <a class="asterisk w now" href="https://www.astrum-st.com/en/"> 93 <span class="flash_text underline w">Home</span> 94 </a> 95 </li> 96 <li> 97 <a class="" href="https://www.astrum-st.com/en/company/"> 98 <span class="flash_text">Company</span> 99 </a> 100 </li> 101 <li> 102 <a class="" href="https://www.astrum-st.com/en/service/"> 103 <span class="flash_text underline w">Service</span> 104 </a> 105 </li> 106 <li> 107 <a class="" href="https://www.astrum-st.com/en/news/"> 108 <span class="flash_text underline w">News</span> 109 </a> 110 </li> 111 <li> 112 <a class="arrow w outside" target="_blank" rel="noopener" href="https://csv.pentel.co.jp/en/sustainability.html"> 113 <span class="flash_text underline w">Sustainability</span><i></i> 114 </a> 115 </li> 116 <li> 117 <a class="arrow w outside" target="_blank" rel="noopener" href="https://www.pentel.co.jp/recruit/"> 118 <span class="flash_text underline w">Recruit</span><i></i> 119 </a> 120 </li> 121 </ul> 122 </nav> 123 </header> 124 125 <button class="menu_button bold underline w" aria-label="MENU"><span class="asterisk w">MENU</span></button> 126 127 <div class="language_button bold"> 128 <ul class="bogo-language-switcher list-view"><li class="ja first"><span class="bogo-language-name"><a rel="alternate" hreflang="ja" href="https://www.astrum-st.com/" title="Jp" class=" underline"><span>J</span><span>p</span></a></span></li> 129<li class="en-US en current last"><span class="bogo-language-name"><a rel="alternate" hreflang="en-US" href="https://www.astrum-st.com/en/" title="En" class="current underline" aria-current="page"><span>E</span><span>n</span></a></span></li> 130</ul> </div> 131 132 133 134<div class="modal flex align-center"> 135 <div class="bg"></div> 136 <button class="close en bold" aria-label="CLOSE">CLOSE</button> 137 <div class="iframe"> 138 <div class="ratio"> 139 <video width="100%" height="100%" controls muted playsinline> 140 <source src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/home/movie.mp4"> 141 </video> 142 <iframe id="player" width="100%" height="100%" src="https://www.youtube.com/embed/MqnVQIuviNQ?enablejsapi=1&playsinline=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;
142 web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> 143 </div> 144 </div> 145</div> 146 147<main class="home"> 148 149 <!-- <div class="bg swiper"> 150 <div class="swiper-wrapper"> 151 <div class="swiper-slide"> 152 <div class="ratio"> 153 <img class="" src=""> 154 </div> 155 </div> 156 </div> 157 </div> --> 158 159 <div class="bg movie"> 160 <div class="ratio"> 161 <video width="100%" height="100%" autoplay loop muted playsinline> 162 <source src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/home/movie.mp4"> 163 </video> 164 </div> 165 </div> 166 167 <section class="mv"> 168 <div class="kv"> 169 <div class="meteor"></div> 170 </div> 171 <div class="concept"> 172 <p class="en bold"> 173 <span>Perhaps castles in the air </span> 174 <span>may be attainable.</span> 175 <span>An armchair theory can become fact.</span> 176 <span>Esoragoto holds dreams.</span> 177 <span>What people laugh at </span> 178 <span>as impossible is </span> 179 <span>what creates the future.</span> 180 <span>The five sensesâ</span> 181 <span>something only humans possess, </span> 182 <span>beyond AI.</span> 183 <span>Esoragoto "Dare to Dream"</span> 184 </p> 185 <div class="more bold flex align-end"> 186 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk_w.svg"> 187 <a class="" href="https://www.astrum-st.com/en/company/#about"> 188 <span class="star_trail"></span> 189 <span class="arrow w"><span class="flash_text link">About ASTRUM</span><i></i></span> 190 </a> 191 </div> 192 </div> 193 <div class="movie"> 194 <button class="thumbnail" aria-label="PLAY MOVIE"> 195 <div class="ratio"> 196 <img class="" alt="ASTRUM Brand Movie" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/home/thumbnail.png"> 197 </div> 198 </button> 199 <div class="bold endless flex flex-start"> 200 <div class="endless_item flex flex-start"> 201 <p>ASTRUM Brand Movie</p> 202 <p>ASTRUM Brand Movie</p> 203 </div> 204 <div class="endless_item flex flex-start"> 205 <p>ASTRUM Brand Movie</p> 206 <p>ASTRUM Brand Movie</p> 207 </div> 208 </div> 209 </div> 210 </section> 211 212 <div class="scroll_contents"> 213 214 <header class="sc_header brand_violet sticky desktop"> 215 <!-- <a class="header_logo" href=""> 216 <img class="" src="/assets/images/logo.svg"> 217 </a> --> 218 <nav class="bold"> 219 <ul class="flex flex-center"> 220 <li> 221 <a class="flash_text underline asterisk now" href="https://www.astrum-st.com/en/">Home</a> 222 </li> 223 <li> 224 <a class="flash_text underline " href="https://www.astrum-st.com/en/company/">Company</a> 225 </li> 226 <li> 227 <a class="flash_text underline " href="https://www.astrum-st.com/en/service/">Service</a> 228 </li> 229 <li> 230 <a class="flash_text underline " href="https://www.astrum-st.com/en/news/">News</a> 231 </li> 232 <li> 233 <a class="arrow outside" target="_blank" rel="noopener" href="https://csv.pentel.co.jp/en/sustainability.html"><span class="flash_text underline">Sustainability</span><i></i></a> 234 </li> 235 <li> 236 <a class="arrow outside" target="_blank" rel="noopener" href="https://www.pentel.co.jp/recruit/"><span class="flash_text underline">Recruit</span><i></i></a> 237 </li> 238 </ul> 239 </nav> 240 <!-- <div class="language_button bold"> 241 </div> --> 242</header> 243 <div class="page_contents"> 244 245 <section class="news"> 246 <div class="line_l"> 247 <div class="section_title bold"> 248 <h2 class="en flash_text">News & Topics</h2> 249 </div> 250 <div class="wrap flex align-end"> 251 <div class="list"> 252 <ul class="all"> 253 <li> 254 <a class="flex arrow outside" target="_blank" rel="noopener" href="https://www.pentel.co.jp/news/20260924_2/"> 255 <span class="thumbnail"> 256 <span class="ratio"> 257 <img alt="" src="https://www.astrum-st.com/wp-content/uploads/2026/09/news_20260924_2_eyecatch.jpg"> 258 </span> 259 </span> 260 <span class="text"> 261 <span class="title bold link underline">Pentel Launches âSarige Deco Zukanâ to Inspire New Ways to Enjoy Decorating with MATTEHOP â Special Station Ads and
261Social Media Campaign Coming October 5</span> 262 <span class="data flex align-center flex-start"> 263 <span class="category bold"> 264 Pentel 265 </span> 266 <span class="date">2026.09.24</span> 267 </span> 268 </span> 269 <i></i> 270 </a> 271 </li> 272 <li> 273 <a class="flex arrow outside" target="_blank" rel="noopener" href="https://www.pentel.co.jp/news/20260924_1/"> 274 <span class="thumbnail"> 275 <span class="ratio"> 276 <img alt="" src="https://www.astrum-st.com/wp-content/uploads/2026/09/news_20260924_eyecatch.jpg"> 277 </span> 278 </span> 279 <span class="text"> 280 <span class="title bold link underline">Mural art brightens up the streets of Nihonbashi, Tokyo. Public display and an art walk stamp rally featuring four artworks begin on Friday, September 25.</span> 281 <span class="data flex align-center flex-start"> 282 <span class="category bold"> 283 Pentel 284 </span> 285 <span class="date">2026.09.24</span> 286 </span> 287 </span> 288 <i></i> 289 </a> 290 </li> 291 <li> 292 <a class="flex arrow outside" target="_blank" rel="noopener" href=" https://www.pentel.co.jp/news/20260827/"> 293 <span class="thumbnail"> 294 <span class="ratio"> 295 <img alt="" src="https://www.astrum-st.com/wp-content/uploads/2026/08/news_20260827_eyecatch.jpg"> 296 </span> 297 </span> 298 <span class="text"> 299 <span class="title bold link underline">Pentel and Mitsui Fudosan begin painting a mural on Nihonbashi area construction hoarding. “Connecting the city and people through art” â “Pentel à Mural Rookies Project 2026”</span> 300 <span class="data flex align-center flex-start"> 301 <span class="category bold"> 302 Pentel 303 </span> 304 <span class="date">2026.08.27</span> 305 </span> 306 </span> 307 <i></i> 308 </a> 309 </li> 310 <li> 311 <a class="flex arrow outside" target="_blank" rel="noopener" href="https://www.pentel.co.jp/news/20260807/"> 312 <span class="thumbnail"> 313 <span class="ratio"> 314 <img alt="" src="https://www.astrum-st.com/wp-content/uploads/2026/08/news_20260806ï¼2_eyecatch.jpg"> 315 </span> 316 </span> 317 <span class="text"> 318 <span class="title bold link underline">ENERGEL, a Smudge-Free Gel Ink Ballpoint Pen for Left-Handed Writers, Launches the âA Pen That Wants to Be Kind to Left-Handed Peopleâ Project</span> 319 <span class="data flex align-center flex-start"> 320 <span class="category bold"> 321 Pentel 322 </span> 323 <span class="date">2026.08.07</span> 324 </span> 325 </span> 326 <i></i> 327 </a> 328 </li> 329 </ul> 330 </div> 331 </div> 332 </div> 333 <div class="more brand_violet bold flex align-end"> 334 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk.svg"> 335 <a class="" href="https://www.astrum-st.com/en/news/"> 336 <span class="star_trail"></span> 337 <span class="arrow"><span class="flash_text link">View More</span><i></i></span> 338 </a> 339 </div> 340 </section> 341 342 <section class="brand en_line"> 343 <div class="wrap"> 344 <div class="line_l"> 345 <div class="section_title line_l bold"> 346 <h2 class="en flash_text">Team ESORAGOTO Brand</h2> 347 </div> 348 <div class="item no_line flex"> 349 <div class="visual"> 350 <div class="image"> 351 <a class="ratio" target="_blank" rel="noopener" href="https://bungu.plus.co.jp/en/"> 352 <img alt="PLUS" src="https://www.astrum-st.com/wp-content/uploads/2026/03/plus_main_image.jpg"> 353 </a> 354 </div> 355 </div> 356 <div class="text"> 357 <div class="title"> 358 <!-- <a class="name bold brand_violet" target="_blank" rel="noopener" href="https://bungu.plus.co.jp/en/"> 359 PLUS </a> --> 360 <a class="logo" target="_blank" rel="noopener" href="https://bungu.plus.co.jp/en/"> 361 <img class="plus" alt="PLUS" src="https://www.astrum-st.com/wp-content/uploads/2026/04/logo_plus.png"> 362 </a> 363 <span class="heading bold brand_violet">stationery, and beyond</span> 364 <p>Small ideas to <br /> 365brighten each day. <br /> 366Stationery youâll <br /> 367love to use.</p> 368 </div> 369 <div class="image desktop"> 370 <div class="ratio"> 371 <img alt="PLUS" src="https://www.astrum-st.com/wp-content/uploads/2026/03/plus_sub_image.jpg"> 372 </div> 373 </div> 374 <div class="more brand_violet bold flex align-end"> 375 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk.svg"> 376 <a class="brand_violet" target="_blank" rel="noopener" href="https://bungu.plus.co.jp/en/"> 377 <span class="star_trail"></span> 378 <span class="arrow outside"><span class="flash_text link">View More</span><i></i></span> 379 </a> 380 </div> 381 </div> 382 </div> 383 </div> 384 <div class="list"> 385 <div class="item flex"> 386 <div class="visual"> 387 <div class="image"> 388 <a class="ratio" target="_blank" rel="noopener" href="http://www.pentelworld.com/"> 389 <img alt="Pentel" src="https://www.astrum-st.com/wp-content/uploads/2026/03/pentel_main.jpg"> 390 </a> 391 </div> 392 </div> 393 <div class="text"> 394 <div class="title"> 395 <!-- <a class="name bold brand_violet" target="_blank" rel="noopener" href="http://www.pentelworld.com/"> 396 Pentel </a> --> 397 <a class="logo" target="_blank" rel="noopener" href="http://www.pentelworld.com/"> 398 <img class="pentel" alt="Pentel" src="https://www.astrum-st.com/wp-content/uploads/2026/04/logo_pentel.png"> 399 </a> 400 <span class="heading bold brand_violet">Pentel</span> 401 <p>Brighten your everyday <br /> 402with the joy of <br /> 403hand-drawn creativity.</p> 404 </div> 405 <div class="image desktop"> 406 <div class="ratio"> 407 <img alt="Pentel" src="https://www.astrum-st.com/wp-content/uploads/2026/03/pentel_sub_img.jpg"> 408 </div> 409 </div> 410 <div class="more brand_violet bold flex align-end"> 411 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk.svg"> 412 <a class="brand_violet" target="_blank" rel="noopener" href="http://www.pentelworld.com/"> 413 <span class="star_trail"></span> 414 <span class="arrow outside"><span class="flash_text link">View More</span><i></i></span> 415 </a> 416 </div> 417 </div> 418 </div> 419 <div class="item flex"> 420 <div class="visual"> 421 <div class="image"> 422 <a class="ratio" target="_blank" rel="noopener" href="https://en.sailor.co.jp/?_gl=1%2A12xk1o0%2A_gcl_aw%2AR0NMLjE3NzMxNDMyNDIuQ2owS0NRandncl9OQmhERkFSSXNBSGlVV3I3Vnlqd19lLTVVNnN0SWpzV1
422hibnJWNnJrQ0ZBdVoxUC04enVJSnNQelRadzVDXy1xYXdGZ2FBbVhURUFMd193Y0I.%2A_gcl_au%2AMTUwOTQxMzIzNi4xNzczMTQzMjQy%2A_ga%2AMTI5ODczMDYxMi4xNzczMTQzMjQy%2A_ga_93E7TW55F8%2AczE3NzMyNzg4MDAkbzIkZzAkdDE3NzMyNzg4MDAkajYwJGwwJGgw"> 423 <img alt="SAILOR" src="https://www.astrum-st.com/wp-content/uploads/2026/03/sailor_main_img.jpg"> 424 </a> 425 </div> 426 </div> 427 <div class="text"> 428 <div class="title"> 429 <!-- <a class="name bold brand_violet" target="_blank" rel="noopener" href="https://en.sailor.co.jp/?_gl=1%2A12xk1o0%2A_gcl_aw%2AR0NMLjE3NzMxNDMyNDIuQ2owS0NRandncl9OQmhERkFSSXNBSGlVV3I3Vnlqd19lLTVVNnN0SWpzV1hibnJWNnJrQ0ZBdVoxUC04enVJSnNQelRadzVDXy1xYXdGZ2FBbVhURUFMd193Y0I.%2A_gcl_au%2AMTUwOTQxMzIzNi4xNzczMTQzMjQy%2A_ga%2AMTI5ODczMDYxMi4xNzczMTQzMjQy%2A_ga_93E7TW55F8%2AczE3NzMyNzg4MDAkbzIkZzAkdDE3NzMyNzg4MDAkajYwJGwwJGgw"> 430 SAILOR </a> --> 431 <a class="logo" target="_blank" rel="noopener" href="https://en.sailor.co.jp/?_gl=1%2A12xk1o0%2A_gcl_aw%2AR0NMLjE3NzMxNDMyNDIuQ2owS0NRandncl9OQmhERkFSSXNBSGlVV3I3Vnlqd19lLTVVNnN0SWpzV1hibnJWNnJrQ0ZBdVoxUC04enVJSnNQelRadzVDXy1xYXdGZ2FBbVhURUFMd193Y0I.%2A_gcl_au%2AMTUwOTQxMzIzNi4xNzczMTQzMjQy%2A_ga%2AMTI5ODczMDYxMi4xNzczMTQzMjQy%2A_ga_93E7TW55F8%2AczE3NzMyNzg4MDAkbzIkZzAkdDE3NzMyNzg4MDAkajYwJGwwJGgw"> 432 <img class="sailor" alt="SAILOR" src="https://www.astrum-st.com/wp-content/uploads/2026/04/logo_sailor.png"> 433 </a> 434 <span class="heading bold brand_violet">SAILOR</span> 435 <p>Mastering functional beauty. <br /> 436Crafting tools that <br /> 437stir the soul.</p> 438 </div> 439 <div class="image desktop"> 440 <div class="ratio"> 441 <img alt="SAILOR" src="https://www.astrum-st.com/wp-content/uploads/2026/03/sailor_sub_img.jpg"> 442 </div> 443 </div> 444 <div class="more brand_violet bold flex align-end"> 445 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk.svg"> 446 <a class="brand_violet" target="_blank" rel="noopener" href="https://en.sailor.co.jp/?_gl=1%2A12xk1o0%2A_gcl_aw%2AR0NMLjE3NzMxNDMyNDIuQ2owS0NRandncl9OQmhERkFSSXNBSGlVV3I3Vnlqd19lLTVVNnN0SWpzV1hibnJWNnJrQ0ZBdVoxUC04enVJSnNQelRadzVDXy1xYXdGZ2FBbVhURUFMd193Y0I.%2A_gcl_au%2AMTUwOTQxMzIzNi4xNzczMTQzMjQy%2A_ga%2AMTI5ODczMDYxMi4xNzczMTQzMjQy%2A_ga_93E7TW55F8%2AczE3NzMyNzg4MDAkbzIkZzAkdDE3NzMyNzg4MDAkajYwJGwwJGgw"> 447 <span class="star_trail"></span> 448 <span class="arrow outside"><span class="flash_text link">View More</span><i></i></span> 449 </a> 450 </div> 451 </div> 452 </div> 453 <div class="item flex"> 454 <div class="visual"> 455 <div class="image"> 456 <a class="ratio" target="_blank" rel="noopener" href="https://www.nippon-note.co.jp/english/"> 457 <img alt="Nippon Notebook" src="https://www.astrum-st.com/wp-content/uploads/2026/03/nihonnote_img.jpg"> 458 </a> 459 </div> 460 </div> 461 <div class="text"> 462 <div class="title"> 463 <!-- <a class="name bold brand_violet" target="_blank" rel="noopener" href="https://www.nippon-note.co.jp/english/"> 464 Nippon Notebook </a> --> 465 <a class="logo" target="_blank" rel="noopener" href="https://www.nippon-note.co.jp/english/"> 466 <img class="nippon_notebook" alt="Nippon Notebook" src="https://www.astrum-st.com/wp-content/uploads/2026/04/logo_nipponnote.png"> 467 </a> 468 <span class="heading bold brand_violet">Nippon Notebook</span> 469 <p>Building upon timeless <br /> 470appeal with new perspective.<br /> 471Sharing the enduring <br /> 472power of the written word.</p> 473 </div> 474 <div class="image desktop"> 475 <div class="ratio"> 476 <img alt="Nippon Notebook" src="https://www.astrum-st.com/wp-content/uploads/2026/03/nihonnote_sub_img.jpg"> 477 </div> 478 </div> 479 <div class="more brand_violet bold flex align-end"> 480 <img class="" alt="" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/icon/asterisk.svg"> 481 <a class="brand_violet" target="_blank" rel="noopener" href="https://www.nippon-note.co.jp/english/"> 482 <span class="star_trail"></span> 483 <span class="arrow outside"><span class="flash_text link">View More</span><i></i></span> 484 </a> 485 </div> 486 </div> 487 </div> 488 </div>
489 </div> 490 </section> 491 492 </div> 493 494 </div> 495 496</main> 497
498<script type="application/ld+json"> 499 { 500 "@context": "https://schema.org", 501 "@type": "Organization", 502 "name": "ã¢ã¹ãã©ã æ ªå¼ä¼ç¤¾", 503 "legalName": "ã¢ã¹ãã©ã æ ªå¼ä¼ç¤¾", 504 "url": "https://www.astrum-st.com/", 505 "logo": "https://www.astrum-st.com/wp-content/themes/astrum/assets/images/logo.svg", 506 "description": "ãã©ã¹ã°ã«ã¼ãã®ã¹ãã¼ã·ã§ããªã¼äºæ¥ãæ ãã¢ã¹ãã©ã æ ªå¼ä¼ç¤¾ã®å ¬å¼ãµã¤ãã§ããã°ã«ã¼ãåãã©ã³ãã®é£æºã«ãããæå ·ã®æ°ããªä¾¡å¤åµé ã¨ã°ãã¼ãã«ãªæé·ãæ¨é²ãã¾ãã", 507 "foundingDate": "2026-04-01", 508 "address": { 509 "@type": "PostalAddress", 510 "streetAddress": "æ¥æ¬æ©å°ç¶²çº7-2", 511 "addressLocality": "ä¸å¤®åº", 512 "addressRegion": "æ±äº¬é½", 513 "postalCode": "103-8533", 514 "addressCountry": "JP" 515 }, 516 "brand": [ 517 { 518 "@type": "Brand", 519 "name": "PLUS", 520 "url": "https://www.plus.co.jp/", 521 "logo": "https://www.plus.co.jp/assets/logo_blue.gif", 522 "description": "ãã©ã¹ã¯ãã客æ§ã«ã¨ã£ã¦ããä»å 価å¤ã®é«ãç¬èªã®ã¢ãã¥ããã«åãçµãã§ããã¾ããã客æ§ããããªãã£ã¹ç©ºéãå®ç¾ããããã«ã製åã¨ãµã¼ãã¹ã§ãã¼ã¿ã«ãµãã¼ããã¾ãã" 523 }, 524 { 525 "@type": "Brand", 526 "name": "ãºãã¦ã", 527 "url": "https://www.pentel.co.jp/", 528 "logo": "https://www.pentel.co.jp/asset/img/logo_r.svg", 529 "description": "ãã¼ã«ãã³ãã·ã£ã¼ããã³ãã¯ã¬ã¨ã³ããã®ãããã¼ã«ã¼ãä¿®æ£å ·ãªã©ã®æå ·ãã©ã³ãã§ãã" 530 }, 531 { 532 "@type": "Brand", 533 "name": "ã»ã¼ã©ã¼ä¸å¹´ç", 534 "url": "https://sailor.co.jp/", 535 "logo": "https://sailor.co.jp/wp-content/themes/sailor-wordpress/img/header/Header__logo--new.png", 536 "description": "ä¸å¹´çã®ãã³å ã§ä¸çããªã¼ãããã»ã¼ã©ã¼ä¸å¹´çã®å ¬å¼ãµã¤ãã§ãã" 537 }, 538 { 539 "@type": "Brand", 540 "name": "æ¥æ¬ãã¼ã", 541 "url": "https://www.nippon-note.co.jp/", 542 "logo": "https://www.nippon-note.co.jp/common/svg/logo.svg", 543 "description": "å¦ç«¥åãå¦ç¿å¸³ã主ã«ããã¼ããã¡ã¢å¸³çã®æå ·è£½åãåãæ±ãç·åãã¼ããã©ã³ããæ¥æ¬ãã¼ãã®å ¬å¼ãµã¤ãã§ãã" 544 } 545 ] 546 } 547</script>
547 548 549 550<div class="footer"> 551 552 <div class="contents_list"> 553 <div class="list_wrap"> 554 <div class="line_r w"> 555 <div class="section_title bold"> 556 <h4 class="en flash_text">Vision & Action</h4> 557 <!-- <span class="heading flash_text">äºæ¥ã¨ç®æãå°å¹³</span> --> 558 </div> 559 <ul class="flex"> 560 <li class="line_l manual w"> 561 <a class="" href="https://www.astrum-st.com/en/company/"> 562 <span class="ratio"> 563 <img class="" alt="Company" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/footer/company.png"> 564 </span> 565 <span class="title flash_text underline bold w">Company</span> 566 <!-- <span class="description desktop"> 567 表ç¾ãããããã³ããä¸çä¸ã¸ã<br> 568 ç§ãã¡ã®åºæ¬æ å ±ã¨<br> 569 ãã¸ã§ã³ã 570 </span> --> 571 </a> 572 </li> 573 <li class="line_l manual w"> 574 <a class="" href="https://www.astrum-st.com/en/service/"> 575 <span class="ratio"> 576 <img class="" alt="Service" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/footer/service.png"> 577 </span> 578 <span class="title flash_text underline bold w">Service</span> 579 <!-- <span class="description desktop"> 580 磨ãä¸ããå°éæ§ã§ã<br> 581 æ°ããªä¾¡å¤ããæå ·ã®æ ãè¶ ãã<br> 582 æåãåµãäºæ¥å±é 583 </span> --> 584 </a> 585 </li> 586 <li class="line_l manual w"> 587 <a class="" target="_blank" rel="noopener" href="https://csv.pentel.co.jp/en/sustainability.html"> 588 <span class="ratio"> 589 <img class="" alt="Sustainability" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/footer/sustainability.png"> 590 </span> 591 <span class="title bold arrow outside w"> 592 <span class="flash_text underline w">Sustainability</span><i></i> 593 </span> 594 <!-- <span class="description desktop"> 595 ãé·ã使ãç¶ãããããã¨ããã<br> 596 æå¤§ã®ç°å¢è²¢ç®ãå質ã¨<br> 597 ãµã¹ããããªãã£ã®å ±åãã 598 </span> --> 599 </a> 600 </li> 601 <li class="line_l manual w"> 602 <a class="" target="_blank" rel="noopener" href="https://www.pentel.co.jp/recruit/"> 603 <span class="ratio"> 604 <img class="" alt="Recruit" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/footer/recruit.png"> 605 </span> 606 <span class="title bold arrow outside w"> 607 <span class="flash_text underline w">Recruit</span><i></i> 608 </span> 609 <!-- <span class="description desktop"> 610 ããªãã®åæ§ãã<br> 611 誰ãã®åµé æ§ãå¼ã³èµ·ããã<br> 612 表ç¾ã®æªæ¥ãå ±ã«æã仲éã¸ã 613 </span> --> 614 </a> 615 </li> 616 </ul> 617 </div> 618 </div> 619 </div> 620 621 <div class="bg ratio"> 622 <img class="" alt="Background Image" src="https://www.astrum-st.com/wp-content/themes/astrum/assets/images/footer/bg.jpg"> 623 </div> 624 625 <span class="credit">Copyright ASTRUM CORPORATION All Rights Reserved</span> 626 627 <footer class=""> 628 </footer> 629 630</div> 631 632
633<script type="speculationrules"> 634{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/en/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astrum/*","/en/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} 635</script>
635 636 637</body> 638
639<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.js"></script>
639 640
641<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
vendor: 1 bytes, line 641
641
642<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
vendor: 1 bytes, line 642
642
643<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/CustomEase.min.js"></script>
vendor: 1 bytes, line 643
643
644<script type="text/javascript"> 645 646 gsap.registerPlugin(ScrollTrigger) 647 gsap.registerPlugin(CustomEase); 648 649 document.documentElement.classList.add('font-loading') 650 651 document.addEventListener('DOMContentLoaded', function() { 652 653 RT.start( 654 function(e) { 655 // console.log("ã¨ã©ã¼çºç") 656 // console.log(e) 657 }, 658 function() { 659 // console.log("èªã¿è¾¼ã¿å®äº") 660 document.documentElement.classList.remove('font-loading') 661 // RT.release() 662 } 663 ) 664 665 const lenis = new Lenis({ 666 // wrapper: document.querySelector('body'), 667 // content: document.querySelector('.scroll_body'), 668 // lerp: 1, 669 duration: 0.6, 670 }) 671 672 lenis.on('scroll', ScrollTrigger.update) 673 gsap.ticker.add((time) => { 674 lenis.raf(time * 1000) 675 }) 676 gsap.ticker.lagSmoothing(0) 677 678 // function update(time) { 679 // lenis.raf(time) 680 // requestAnimationFrame(update) 681 // } 682 // requestAnimationFrame(update) 683 684 document.addEventListener('visibilitychange', () => { 685 if (document.visibilityState === 'visible') { 686 if (lenis.isStopped) { 687 lenis.start() 688 } 689 // requestAnimationFrame(update) 690 gsap.ticker.lagSmoothing(0) 691 ScrollTrigger.refresh() 692 } 693 }) 694 695 window.lenis = lenis 696 697 window.addEventListener('resize', () => { 698 if (window.innerWidth > 860) { 699 ScrollTrigger.refresh() 700 } 701 }) 702 703 window.addEventListener('load', (e) => { 704 ScrollTrigger.refresh() 705 }) 706 707 const loading = document.querySelector('.loading') 708 CustomEase.create("logoEase", "0.3, 0.1, 0, 0.9") 709 if (!sessionStorage.getItem('loading_animated')) { 710 loading.classList.add('animation') 711 gsap.timeline() 712 .to('.loading', { 713 duration: 0.8, 714 }) 715 .to('.loading .logo .full', { 716 scaleX: 0, 717 // scaleY: 0, 718 duration: 1, 719 ease: 'logoEase', 720 }) 721 .to('.loading .logo .mask:not(.full)', { 722 scaleX: 0, 723 // scaleY: 0, 724 duration: 1, 725 ease: 'logoEase', 726 }) 727 .to('.loading', { 728 duration: 2, 729 }) 730 .to('.loading .logo', { 731 y: '-50%', 732 scale: 0.9, 733 duration: 1, 734 ease: 'logoEase', 735 }) 736 .to('.loading', { 737 // y: '-5%', 738 opacity: 0, 739 duration: 0.8, 740 ease: 'logoEase', 741 onComplete: () => { 742 sessionStorage.setItem('loading_animated', true) 743 } 744 }, '<=') 745 746 } else { 747 loading.classList.add('animated') 748 } 749 750 751 const headerLogo = document.querySelector('.header_logo') 752 const mvHeader = document.querySelector('.mv_header') 753 const languageButton = document.querySelector('.language_button') 754 const menuButton = document.querySelector('.menu_button') 755 const menuButtonText = document.querySelector('.menu_button span') 756 757 const mvSection = document.querySelector('.mv') 758 const scHeader = document.querySelector('.sc_header') 759 const scrollContents = document.querySelector('.scroll_contents') 760 761 const footerBg = document.querySelector('.footer .bg') 762 const footerCredit = document.querySelector('.footer .credit') 763 764 menuButton.addEventListener('click', (e) => { 765 if (menuButton.classList.contains('close')) { 766 document.body.classList.remove('body_fix') 767 window.lenis.start() 768 headerLogo.classList.remove('nav') 769 menuButton.classList.remove('close') 770 menuButtonText.textContent = 'MENU' 771 mvHeader.classList.remove('nav_open') 772 languageButton.classList.remove('show') 773 footerCredit.classList.remove('nav') 774 } else { 775 mvHeader.querySelectorAll('nav ul li .flash_text').forEach((text) => { 776 text.classList.remove('flash') 777 setTimeout(() => { 778 text.classList.add('flash') 779 }, 240) 780 }) 781 document.body.classList.add('body_fix') 782 window.lenis.stop() 783 headerLogo.classList.add('nav') 784 menuButton.classList.add('close') 785 menuButtonText.textContent = 'CLOSE' 786 mvHeader.classList.add('nav_open') 787 languageButton.classList.add('show') 788 footerCredit.classList.add('nav') 789 } 790 791 }) 792 793 if (window.innerWidth < 860) { 794 gsap.to(menuButton, { 795 y: '-5rem', 796 scrollTrigger: { 797 trigger: '.footer', 798 start: 'top 80px', 799 end: 'top top', 800 scrub: true 801 } 802 }) 803 } 804 805 806 // gsap.set('main .bg .ratio', { 807 // scale: 1, 808 // }) 809 gsap.to('main .bg .ratio', { 810 // y: '5%', 811 scale: 1.05, 812 scrollTrigger: { 813 trigger: 'main .mv', 814 start: "top top", 815 end: "bottom top", 816 scrub: 1, 817 } 818 }) 819 820 ScrollTrigger.create({
821 trigger: scrollContents, 822 start: "50% center", 823 end: "75% center", 824 onEnter: () => { 825 headerLogo.classList.add('fixed') 826 mvHeader.classList.add('fixed') 827 languageButton.classList.add('fixed') 828 mvSection.classList.add('absolute') 829 footerBg.classList.add('fixed') 830 footerCredit.classList.add('fixed') 831 }, 832 onEnterBack: () => { 833 }, 834 onLeave: () => { 835 }, 836 onLeaveBack: () => { 837 headerLogo.classList.remove('fixed') 838 mvHeader.classList.remove('fixed') 839 languageButton.classList.remove('fixed') 840 mvSection.classList.remove('absolute') 841 footerBg.classList.remove('fixed') 842 footerCredit.classList.remove('fixed') 843 }, 844 }) 845 846 ScrollTrigger.create({ 847 trigger: scHeader, 848 start: "top top", 849 endTrigger: scrollContents, 850 // end: "center top", 851 end: "bottom 80px", 852 onEnter: () => { 853 scHeader.classList.add('scrolled') 854 }, 855 onEnterBack: () => { 856 scHeader.classList.add('scrolled') 857 // scHeader.classList.remove('passed') 858 }, 859 onLeave: () => { 860 scHeader.classList.remove('scrolled') 861 // scHeader.classList.add('passed') 862 }, 863 onLeaveBack: () => { 864 scHeader.classList.remove('scrolled') 865 }, 866 }) 867 868 let isInitial = true 869 ScrollTrigger.create({ 870 trigger: scrollContents, 871 start: window.innerWidth < 860 ? "top 50%" : "top 60%", 872 onEnter: (self) => { 873 scrollContents.classList.add('scrolled') 874 }, 875 onLeaveBack: () => { 876 scrollContents.classList.remove('scrolled') 877 }, 878 onRefresh: (self) => { 879 if (isInitial && self.progress > 0){ 880 // scrollContents.classList.add('scrolled') 881 // scrollContents.classList.add('past') 882 isInitial = false 883 } else { 884 scrollContents.classList.remove('past') 885 } 886 }, 887 }) 888 889 gsap.set('.footer .bg img', { 890 scale: 1.05, 891 }) 892 gsap.to('.footer .bg img', { 893 // y: '5%', 894 // scale: 1.02, 895 scale: 1, 896 scrollTrigger: { 897 trigger: '.footer .contents_list', 898 start: "bottom bottom", 899 end: "bottom top", 900 scrub: 2, 901 } 902 }) 903 904 const footerContentsList = document.querySelector('.footer .contents_list') 905 ScrollTrigger.create({ 906 trigger: footerContentsList, 907 start: "top 90%", 908 onEnter: () => { 909 document.querySelectorAll('.footer .contents_list .line_l').forEach((line) => { 910 line.classList.add('drop') 911 }) 912 } 913 }) 914 ScrollTrigger.create({ 915 trigger: footerContentsList, 916 // start: "bottom 60%", 917 start: "top 60%", 918 onEnter: () => { 919 footerContentsList.classList.add('scrolled') 920 }, 921 onLeaveBack: () => { 922 footerContentsList.classList.remove('scrolled') 923 }, 924 }) 925 926 // gsap.timeline().to('.black_hole', { 927 // opacity: 0, 928 // duration: 0.4, 929 // delay: 0.1, 930 // }).to('.black_hole', { 931 // zIndex: -1, 932 // duration: 0, 933 // }) 934 // const path = window.location.pathname 935 // if (sessionStorage.getItem('pagePath') != path) { 936 // sessionStorage.setItem("pagePath", path) 937 // } 938 // document.querySelectorAll('a:not([target="_blank"])').forEach((link) => { 939 // link.addEventListener('click', (e) => { 940 // if (link.pathname != path) { 941 // e.preventDefault() 942 943 // gsap.timeline().to('.black_hole', { 944 // zIndex: 1000, 945 // duration: 0, 946 // }).to('.black_hole', { 947 // opacity: 1, 948 // duration: 0.4, 949 // delay: 0.1, 950 // onComplete: () => { 951 // location.href = link.href 952 // gsap.to('.black_hole', { 953 // zIndex: -1, 954 // duration: 0, 955 // }) 956 // } 957 // }) 958 // } 959 // }) 960 // }) 961 962 function headerFlashAnimation(list, isNav) { 963 document.querySelectorAll(list).forEach((item, index) => { 964 const flashText = item.querySelector('.flash_text') 965 let link = flashText ? flashText.closest('a') : '' 966 // setTimeout(() => { 967 if (isNav) { 968 flashTextAnimation(flashText) 969 } else { 970 if (flashText) { 971 flashText.classList.add('flash') 972 } 973 } 974 gsap.to(item, { 975 opacity: 1, 976 }) 977 if (flashText && (flashText.tagName == 'A' || link)) { 978 setFlashTextHoverEvent(flashText, link) 979 } 980 // }, index * 200) 981 }) 982 } 983 984 headerFlashAnimation('header nav ul li', true) 985 headerFlashAnimation('.language_button ul li', false) 986 987 document.querySelectorAll('main .flash_text, .footer .flash_text').forEach((flashText) => { 988 flashTextAnimation(flashText) 989 const link = flashText.closest('a') 990 if (flashText.tagName == 'A' || link) { 991 setFlashTextHoverEvent(flashText, link) 992 } 993 }) 994 995 function setFlashTextHoverEvent(flashText, anchor) { 996 flashText.classList.add('hover') 997 flashText.addEventListener('mouseenter', () => { 998 flashText.classList.remove('flash') 999 setTimeout(() => { 1000 flashText.classList.add('flash') 1001 }, 10) 1002 1003 }) 1004 flashText.addEventListener('mouseleave', () => { 1005 flashText.classList.remove('flash') 1006 })
1007 if (anchor) { 1008 anchor.addEventListener('mouseenter', () => { 1009 flashText.classList.remove('flash') 1010 setTimeout(() => { 1011 flashText.classList.add('flash') 1012 }, 10) 1013 }) 1014 anchor.addEventListener('mouseleave', () => { 1015 flashText.classList.remove('flash') 1016 }) 1017 } 1018 } 1019 1020 document.querySelectorAll('.line_l:not(.manual), .line_r:not(.manual)').forEach((line) => { 1021 ScrollTrigger.create({ 1022 trigger: line, 1023 start: "top 90%", 1024 onEnter: () => { 1025 line.classList.add('drop') 1026 } 1027 }) 1028 }) 1029 1030 }) 1031 1032 function flashTextAnimation(flashText) { 1033 1034 const text = flashText.textContent 1035 flashText.textContent = '' 1036 1037 // Array.from(text).forEach((char) => { 1038 ;[...text].forEach((char) => { 1039 const span = document.createElement('span') 1040 span.textContent = char 1041 flashText.appendChild(span) 1042 }) 1043 1044 if (flashText.classList.contains('link')) { 1045 flashText.classList.add('hover') 1046 } else if (flashText.classList.contains('manual')) { 1047 flashText.classList.add('flash') 1048 } else { 1049 ScrollTrigger.create({ 1050 trigger: flashText, 1051 start: "top bottom", 1052 onEnter: () => { 1053 flashText.classList.add('flash') 1054 } 1055 }) 1056 } 1057 1058 } 1059 1060</script>
1060 1061 1062 1063 1064
1065<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
vendor: 1 bytes, line 1065
1065
1066<script src="https://www.youtube.com/iframe_api"></script>
1066 1067
1068<script type="text/javascript"> 1069 1070 let player; 1071 1072 function onYouTubeIframeAPIReady() { 1073 player = new YT.Player('player', {}) 1074 } 1075 1076 document.addEventListener('DOMContentLoaded', function() { 1077 1078 const setupDelay = !sessionStorage.getItem('loading_animated') ? 4800 : 0 1079 1080 CustomEase.create("mvEase", "0.3, 0.1, 0.4, 0.9") 1081 CustomEase.create("starMove", "1, 0, 0.1, 1") 1082 1083 1084 let isInitial = true 1085 const starTrailTL = gsap.timeline({ 1086 // repeat: -1, 1087 // onComplete: () => { 1088 // starTrailTL() 1089 // }, 1090 }) 1091 1092 setTimeout(() => { 1093 1094 const meteor = document.querySelector('.mv .kv .meteor') 1095 function starTrail() { 1096 // starTrailTL.add(() => { 1097 // if (!isInitial) { 1098 // bgSwiper.slideNext() 1099 // meteor.classList.remove('shooting_star') 1100 // } else { 1101 // isInitial = false 1102 // } 1103 // }) 1104 starTrailTL.add("meteorShower", "+=1") 1105 .add(() => { 1106 meteor.classList.add('shooting_star') 1107 return gsap.to('', { duration: 1.5 }) 1108 }, "meteorShower") 1109 1110 return starTrailTL 1111 } 1112 starTrail() 1113 gsap.ticker.lagSmoothing(0) 1114 1115 1116 let bgSwiper = new Swiper('.home .bg', { 1117 slidesPerView: 1, 1118 initialSlide: 1, 1119 speed: 1200, 1120 autoplay: { 1121 delay: 16000 1122 }, 1123 effect: 'fade', 1124 fadeEffect: { 1125 crossFade: true 1126 }, 1127 loop: true, 1128 allowTouchMove: false, 1129 on: { 1130 activeIndexChange: function() { 1131 // bgAnimation(this, isInitial) 1132 }, 1133 } 1134 }) 1135 1136 function bgAnimation(swiper) { 1137 const activeSlide = swiper.slides[swiper.realIndex] 1138 const target = activeSlide.querySelector('img') 1139 1140 gsap.set(target, { 1141 x: 0, 1142 }) 1143 gsap.to(target, { 1144 x: '-5vw', 1145 duration: 20, 1146 ease: 'mvEase', 1147 }) 1148 } 1149 1150 }, setupDelay) 1151 1152 const movieThumbnail = document.querySelector('.mv .movie .thumbnail') 1153 const movieModal = document.querySelector('.modal') 1154 const movie = document.querySelector('.modal .iframe video') 1155 const movieModalBg = document.querySelector('.modal .bg') 1156 const modalCloseButton = document.querySelector('.modal .close') 1157 movieThumbnail.addEventListener('click', (e) => { 1158 if (movieModal.classList.contains('show')) { 1159 document.body.classList.remove('body_fix') 1160 window.lenis.start() 1161 movieModal.classList.remove('show') 1162 setTimeout(() => { 1163 // movie.pause() 1164 }, 600) 1165 } else { 1166 document.body.classList.add('body_fix') 1167 window.lenis.stop() 1168 // movieModal.classList.add('show') 1169 1170 // movie.currentTime = 0 1171 // movie.play() 1172 if (player) { 1173 player.seekTo(0, true) 1174 player.unMute() 1175 player.playVideo() 1176 } else { 1177 player = new YT.Player('player', {}) 1178 } 1179 setTimeout(() => { 1180 movieModal.classList.add('show') 1181 }, 600) 1182 1183 } 1184 }) 1185 movieModalBg.addEventListener('click', (e) => { 1186 document.body.classList.remove('body_fix') 1187 window.lenis.start() 1188 player.mute() 1189 movieModal.classList.remove('show') 1190 setTimeout(() => { 1191 // movie.pause() 1192 player.stopVideo() 1193 }, 600) 1194 }) 1195 modalCloseButton.addEventListener('click', (e) => { 1196 document.body.classList.remove('body_fix') 1197 window.lenis.start() 1198 player.mute() 1199 movieModal.classList.remove('show') 1200 setTimeout(() => { 1201 // movie.pause() 1202 player.stopVideo() 1203 }, 600) 1204 }) 1205 1206 1207 const conceptText = document.querySelectorAll('.mv .concept p span') 1208 conceptText.forEach((text, index) => { 1209 text.classList.add('flash_text', 'manual') 1210 }) 1211 ScrollTrigger.create({ 1212 trigger: '.mv .concept', 1213 start: "top bottom", 1214 once: true, 1215 onEnter: () => { 1216 conceptText.forEach((text, index) => { 1217 setTimeout(() => { 1218 flashTextAnimation(text) 1219 }, 50 * index) 1220 }) 1221 }, 1222 }) 1223 1224 const moreLinks = document.querySelectorAll('.more a') 1225 moreLinks.forEach((link, index) => { 1226 ScrollTrigger.create({ 1227 trigger: link, 1228 start: "bottom bottom", 1229 once: true, 1230 onEnter: () => { 1231 link.classList.add('draw') 1232 setTimeout(() => { 1233 link.classList.remove('draw') 1234 }, 600) 1235 }, 1236 }) 1237 }) 1238 1239 const brandSection = document.querySelector('.brand') 1240 ScrollTrigger.create({ 1241 trigger: brandSection, 1242 start: "top 30%", 1243 once: true, 1244 onEnter: () => { 1245 brandSection.classList.add('draw_line') 1246 }, 1247 }) 1248 1249 const brandList = document.querySelectorAll('.brand .list .item') 1250 brandList.forEach((brand, index) => { 1251 ScrollTrigger.create({ 1252 trigger: brand, 1253 start: "top 30%", 1254 once: true, 1255 onEnter: () => { 1256 brand.classList.add('draw_line') 1257 }, 1258 }) 1259 }) 1260 1261 document.querySelectorAll('.brand .item').forEach((item, index) => { 1262 const mainVisual = item.querySelectorAll('.visual .image img') 1263 gsap.set(mainVisual, { 1264 y: '-5%', 1265 scale: 1.2, 1266 }) 1267 1268 gsap.to(mainVisual, { 1269 y: '5%', 1270 scale: 1, 1271 scrollTrigger: { 1272 trigger: item, 1273 start: "top bottom", 1274 end: "bottom top", 1275 scrub: true, 1276 } 1277 }) 1278 }) 1279 1280 1281 1282 1283 1284 1285 1286 }) 1287 1288</script>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.