@charset "UTF-8"; /* LPページのスタイル */ a:hover img { opacity: 0.7; } p a:hover { opacity: 0.7; } /* webサイト本体の右端登録フロートボタンを非表示 */ div.float__button { display: none; } html { width: 100%; } body.lp { /* ---- テーマ変数（既定=bj/ブルー。body.lp.lp-{theme} で上書き） ---- */ --lp-keybg: url(../lp-assets/img/lp-keybg-bj.webp); --lp-section-bg: url(../lp-assets/img/types-bg-BJ.webp); --lp-footer-bg: url(../lp-assets/img/lp-footer-bg-bj.webp); --lp-accent: #5173AF; --lp-accent-light: #A3B1D4; width: 100%; } /* ===== LPテーマ別キーカラー ===== * 背景の幾何学パターン画像とアクセント色を切り替える。 * HTML側は（inc/lp-visitor-2026.php）。 */ body.lp.lp-bj { --lp-keybg: url(../lp-assets/img/lp-keybg-bj.webp); --lp-section-bg: url(../lp-assets/img/types-bg-BJ.webp); --lp-footer-bg: url(../lp-assets/img/lp-footer-bg-bj.webp); --lp-accent: #5173AF; --lp-accent-light: #A3B1D4; } /* 再生医療JAPAN（rm）：背景キーカラーをrm用画像に。アクセント色は未指定のためbj既定を継承 */ body.lp.lp-rm { --lp-keybg: url(../lp-assets/img/lp-keycolor-rm.webp); --lp-section-bg: url(../lp-assets/img/types-bg-RM.webp); --lp-footer-bg: url(../lp-assets/img/lp-keycolor-rm.webp); --lp-accent: #52aca9; } /* RM: 来場登録ボタンの「3」=緑、「分」=キーカラー teal */ body.lp.lp-rm .inq-link div span.num { color: #009A63; } body.lp.lp-rm .inq-link div span.min { color: #52aca9; } /* healthTECH JAPAN（hj）：背景キーカラーをhj用画像に、アクセント色=#e94f37 */ body.lp.lp-hj { --lp-keybg: url(../lp-assets/img/lp-keycolor-hj.webp); --lp-section-bg: url(../lp-assets/img/types-bg-HJ.webp); --lp-footer-bg: url(../lp-assets/img/lp-keycolor-hj.webp); --lp-accent: #e94f37; --lp-accent-light: #F08473; /* #e94f37 を少し薄めた色（「分」の文字色） */ } /* HJ: MV動画オーバーレイ（背景画像）が目立つのでopacityを下げる */ body.lp.lp-hj #main-visual:before { opacity: 0.35; } body.lp header#header-lp { position: absolute; left: 0; top: 0; width: 100%; padding: 15px 0; z-index: 1001; } body.lp header#header-lp:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--lp-keybg); background-size: cover; background-position: center; opacity: 1; z-index: 0; } body.lp header#header-lp .site-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 1050px; padding: 0 20px; margin: 0 auto; } body.lp header#header-lp .site-header .header-menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } body.lp header#header-lp .site-header .header-menu-list .header-menu-item { margin: 0 0 0 36px; } body.lp header#header-lp .site-header .header-menu-list .header-menu-item a span { font-size: 17px; font-weight: 700; color: #ffffff; white-space: nowrap; } body.lp .menu { position: fixed; top: 20px; right: -260px; z-index: 1001; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: 0.3s ease; transition: 0.3s ease; } body.lp .menu .menu-handle { position: relative; width: 43px; height: 142px; background: #a1a1a1; display: block; border-radius: 5px 0 0 5px; cursor: pointer; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); z-index: 1; } body.lp .menu .menu-handle:before { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: calc(50% - 4px); width: 3px; height: 30px; background: #ffffff; border-radius: 3px; -webkit-transition: 0.3s ease; transition: 0.3s ease; -webkit-transform: rotate(30deg); transform: rotate(30deg); top: 51px; } body.lp .menu .menu-handle:after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: calc(50% - 4px); width: 3px; height: 30px; background: #ffffff; border-radius: 3px; -webkit-transition: 0.3s ease; transition: 0.3s ease; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); top: 76px; } body.lp .menu .menu-nav { position: relative; padding: 27px; background: #a1a1a1; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); border-radius: 0 0 0 5px; width: 260px; } body.lp .menu .menu-nav:before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 150px; background: #a1a1a1; z-index: 2; } body.lp .menu .menu-nav .menu-nav-list { margin: 0 0 22px; border-bottom: 1px solid #ffffff; } body.lp .menu .menu-nav .menu-nav-list .menu-nav-item { margin: 0 0 22px; } body.lp .menu .menu-nav .menu-nav-list .menu-nav-item a span { font-size: 18px; font-weight: 700; line-height: 22px; color: #ffffff; } body.lp .menu .menu-nav .menu-nav-inq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 38px; font-size: 18px; font-weight: 700; color: #ffffff; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); background: var(--lp-keybg) no-repeat; border-radius: 41px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); } body.lp .menu.open { right: 0; } body.lp .menu.open .menu-handle:before { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } body.lp .menu.open .menu-handle:after { -webkit-transform: rotate(30deg); transform: rotate(30deg); } body.lp .lp-sec-ttl { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-height: 54px; margin: 0 0 35px; padding: 0 100px 0 20px; background-image: var(--lp-keybg); background-repeat: no-repeat; background-size: cover; -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.67); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.67); } body.lp .lp-sec-ttl span { position: relative; font-size: 31px; font-weight: 700; line-height: 1.3; color: #ffffff; z-index: 1; white-space: nowrap; } body.lp .lp-txt { font-size: 14px; line-height: 18px; } body.lp .inq-link { position: relative; display: block; width: 437px; margin: 0 auto; padding: 6px; background: var(--lp-keybg) no-repeat; border-radius: 41px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); -webkit-transition: 0.3s ease; transition: 0.3s ease; z-index: 1; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 460px; height: 72px; } body.lp .inq-link:hover { opacity: 0.7; } body.lp .inq-link:before { content: ""; position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); background: #ffffff; border-radius: 41px; } body.lp .inq-link div { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; white-space: nowrap; } body.lp .inq-link div span { position: relative; font-weight: 700; white-space: nowrap; } body.lp .inq-link div span.now { font-size: 24px; } body.lp .inq-link div span.num { font-size: 55px; font-weight: 700; color: var(--lp-accent); } body.lp .inq-link div span.min { font-size: 24px; color: var(--lp-accent-light); } body.lp .inq-link div span.txt { margin: 0 0 -4px; font-size: 36px; font-weight: 700; } body.lp .ttl-bt-gradient { margin: 0 0 16px; } body.lp .ttl-bt-gradient span { position: relative; display: inline-block; font-size: 24px; line-height: 38px; font-weight: 700; } body.lp .ttl-bt-gradient span:after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 4px; background: var(--lp-accent); } body.lp .ttl-bt-white { position: relative; margin: 0 0 28px; text-align: center; } body.lp .ttl-bt-white span { font-size: 32px; font-weight: 700; line-height: 36px; color: #ffffff; border-bottom: 4px solid #ffffff; } body.lp .content { width: 100%; max-width: 1050px; padding: 0 20px; position: relative; margin: 0 auto; } body.lp #main-visual { position: relative; width: 100%; height: 100vh; min-height: 1000px; overflow: hidden; } body.lp #main-visual:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--lp-keybg); background-size: cover; background-position: center; mix-blend-mode: multiply; opacity: 0.5; z-index: 1; } body.lp #main-visual .video-wrapper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } body.lp #main-visual .video-wrapper video { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } body.lp #main-visual .mv-inner { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 1050px; height: 100%; padding: 100px 20px 20px; margin: 0 auto; z-index: 2; } body.lp #main-visual .mv-inner .mv-logo { width: 100%; margin: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } body.lp #main-visual .mv-inner .mv-logo .mv-logo-single { width: 400px; height: auto; margin: 0 auto; -webkit-filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.85)); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.85)); } body.lp #main-visual .mv-inner .mv-infos .mv-period-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; } body.lp #main-visual .mv-inner .mv-infos .mv-40th { width: auto; height: 84px; -ms-flex-negative: 0; flex-shrink: 0; } body.lp #main-visual .mv-inner .mv-infos { width: 100%; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-ttl { margin: 0; text-align: center; font-size: 45px; font-weight: 700; line-height: 60px; color: #ffffff; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.67); } body.lp #main-visual .mv-inner .mv-infos .mv-infos-lead { text-align: center; margin: 25px 0 0; padding: 0; font-size: 24px; font-weight: 700; line-height: 35px; color: #ffffff; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.67); } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period { margin: 0; width: auto; font-size: 18px; font-weight: 700; line-height: 38px; color: #ffffff; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.67); } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period .num { font-size: 32px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period .large { font-size: 24px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 322px; height: 60px; margin: 30px auto 0 auto; font-size: 24px; font-weight: 700; color: #ffffff; background: var(--lp-keybg) no-repeat; background-color: white; border-radius: 41px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); -webkit-transition: 0.3s ease; transition: 0.3s ease; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-link:hover { opacity: 0.7; } body.lp #main-visual .mv-scroll { margin: 30px 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 67px; height: 67px; min-height: 67px; border: 1px solid #ffffff; border-radius: 50%; z-index: 2; } body.lp #main-visual .mv-scroll img { width: auto; height: auto; -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; } body.lp #what-is { padding: 30px 0 40px; } body.lp #what-is div.what-is-lead { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0 30px; } body.lp #what-is div.what-is-lead p { margin-top: 10px; font-size: 20px; font-weight: bold; line-height: 28px; } body.lp #what-is div.what-is-lead p span { color: var(--lp-accent); } body.lp #what-is div.what-is-lead img { width: 350px; } body.lp #what-is .what-is-list { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 100; } body.lp #what-is .what-is-list .what-is-item { width: 33.3333%; padding: 0 14px; border-right: 1px solid #a5a5a5; } body.lp #what-is .what-is-list .what-is-item .what-is-item-figure-wrapper { position: relative; margin: 0 0 13px; } body.lp #what-is .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure { position: relative; width: 194px; height: 194px; margin: 0 auto; border-radius: 50%; background-position: center !important; background-size: cover !important; } body.lp #what-is .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure .no { position: absolute; left: -30px; top: -10px; } body.lp #what-is .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure-ttl { position: absolute; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 74px; } body.lp #what-is .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure-ttl p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 8px; font-size: 32px; font-weight: 700; line-height: 37px; color: #ffffff; background: var(--lp-keybg) no-repeat; background-color: white; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-head { width: 174px; margin: 0 auto 7px; font-size: 21px; font-weight: 700; color: #000000; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-head sup { font-size: 10px; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main { margin: 0 0 16px; text-align: center; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; font-size: 51px; font-weight: 700; color: #000000; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num sup { font-size: 30px; } body.lp #what-is .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num span { position: absolute; bottom: 0; font-size: 21px; font-weight: 700; color: #000000; white-space: nowrap; } body.lp #what-is .what-is-list .what-is-item .what-is-item-txt { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 28px; white-space: nowrap; } body.lp #what-is .what-is-list .what-is-item .what-is-item-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 171px; height: 32px; margin: 0 auto; font-size: 18px; font-weight: 700; color: #000000; background-color: white; z-index: 100; border-radius: 41px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); -webkit-transition: 0.3s ease; transition: 0.3s ease; } body.lp #what-is .what-is-list .what-is-item .what-is-item-link:hover { opacity: 0.7; } body.lp #what-is .what-is-list .what-is-item:last-child { border-right: none; } body.lp #partners { padding: 30px 0 40px; padding: 0 0 50px; background: var(--lp-section-bg) no-repeat; background-position: left top; } body.lp #partners div.what-is-lead { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0 30px; } body.lp #partners div.what-is-lead p { margin-top: 10px; font-size: 20px; font-weight: bold; line-height: 28px; } body.lp #partners div.what-is-lead p span { color: var(--lp-accent); } body.lp #partners div.what-is-lead img { width: 350px; } body.lp #partners .what-is-list { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 100; } body.lp #partners .what-is-list .what-is-item { width: 33.3333%; padding: 0 14px; border-right: 1px solid #a5a5a5; } body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper { position: relative; margin: 0 0 13px; } body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure { position: relative; width: 194px; height: 194px; margin: 0 auto; border-radius: 50%; background-position: center !important; background-size: cover !important; } body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure .no { position: absolute; left: -30px; top: -10px; } body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure-ttl { position: absolute; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 74px; } body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure-ttl p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 8px; font-size: 32px; font-weight: 700; line-height: 37px; color: #ffffff; background: var(--lp-keybg) no-repeat; background-color: white; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-head { width: 174px; margin: 0 auto 7px; font-size: 21px; font-weight: 700; color: #000000; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-head sup { font-size: 10px; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main { margin: 0 0 16px; text-align: center; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; font-size: 51px; font-weight: 700; color: #000000; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num sup { font-size: 30px; } body.lp #partners .what-is-list .what-is-item .what-is-item-infos .what-is-item-infos-main .what-is-item-infos-main-num span { position: absolute; bottom: 0; font-size: 21px; font-weight: 700; color: #000000; white-space: nowrap; } body.lp #partners .what-is-list .what-is-item .what-is-item-txt { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 28px; white-space: nowrap; } body.lp #partners .what-is-list .what-is-item .what-is-item-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 171px; height: 32px; margin: 0 auto; font-size: 18px; font-weight: 700; color: #000000; background-color: white; z-index: 100; border-radius: 41px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); -webkit-transition: 0.3s ease; transition: 0.3s ease; } body.lp #partners .what-is-list .what-is-item .what-is-item-link:hover { opacity: 0.7; } body.lp #partners .what-is-list .what-is-item:last-child { border-right: none; } body.lp #needs { padding: 0 0 64px; } body.lp #events { padding: 30px 0 50px; } body.lp #events .events-body { position: relative; margin-top: -40px; padding: 78px 0 20px; background-image: var(--lp-keybg); background-repeat: no-repeat; background-size: cover; overflow: hidden; } body.lp #events .events-body:before { content: ""; position: absolute; left: 0; top: -50px; width: 120%; height: 110px; -webkit-transform: skew(0deg, 3deg); transform: skew(0deg, 3deg); background: #ffffff; } body.lp #events .events-body:after { content: ""; position: absolute; left: 0; bottom: -50px; width: 120%; height: 110px; -webkit-transform: skew(0deg, -3deg); transform: skew(0deg, -3deg); background: #ffffff; } body.lp #events .events-body .events-body-ttl { position: relative; } body.lp #events .events-body .events-body-ttl span.small { font-size: 70%; border-bottom: none; } body.lp #events .events-body .events-body-row { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -5px 15px; } body.lp #events .events-body .events-body-row .events-body-box { margin: 0 0 16px; padding: 28px; border: 2px solid #ffffff; border-radius: 5px; -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7)); filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7)); } body.lp #events .events-body .events-body-row .events-body-box .events-body-box-ttl { position: relative; display: block; font-size: 24px; font-weight: 700; padding: 0 14px; color: #ffffff; background: transparent; } body.lp #events .events-body .events-body-row .events-body-box .events-body-box-txt { font-size: 16px; font-weight: 400; line-height: 1.7; color: #ffffff; } body.lp #events .events-body .events-body-row .events-body-box .events-body-box-txt span { white-space: nowrap; } body.lp #types { padding: 0 0 50px; background: var(--lp-section-bg) no-repeat; background-position: right center; } body.lp #types .types-body { position: relative; margin-top: -40px; padding: 78px 0 20px; background: var(--lp-keybg) no-repeat; overflow: hidden; background: unset; } body.lp #types .types-body p#coming { font-size: 80px; color: white; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); font-weight: bold; text-align: center; padding: 100px 0; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } body.lp #types .types-body:before { content: ""; position: absolute; right: 0; top: -50px; width: 120%; height: 100px; -webkit-transform: skew(0deg, -3deg); transform: skew(0deg, -3deg); background: #ffffff; content: none; } body.lp #types .types-body:after { content: ""; position: absolute; left: 0; bottom: -70px; width: 120%; height: 110px; -webkit-transform: skew(0deg, 3deg); transform: skew(0deg, 3deg); background: #ffffff; content: none; } body.lp #types .types-ttl { margin: 0 0 27px; } body.lp #types .types-men-list { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; row-gap: 50px; } body.lp #types .types-men-list .types-men-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } body.lp #types .types-men-list .types-men-item .types-men-item-photo { -ms-flex-negative: 0; flex-shrink: 0; } body.lp #types .types-men-list .types-men-item .types-men-item-photo img { width: 178px; aspect-ratio: 178 / 216; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); } body.lp #types .types-men-list .types-men-item .types-men-item-info { padding: 0 0 0 17px; } body.lp #types .types-men-list .types-men-item .types-men-item-info .types-men-item-date { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 23px; color: #000000; } body.lp #types .types-men-list .types-men-item .types-men-item-info .types-men-item-ttl { margin: 0 0 9px; font-size: 18px; font-weight: 700; line-height: 23px; color: var(--lp-accent); } /* 講演サブタイトル（～…～）：折返し・改行後の行を1文字ぶら下げ字下げ */ body.lp #types .types-men-list .types-men-item .types-men-item-info .types-men-item-ttl .ttl-sub { display: block; padding-left: 1em; text-indent: -1em; } body.lp #types .types-men-list .types-men-item .types-men-item-info .types-men-item-name { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 23px; color: #000000; } body.lp #types .types-men-list .types-men-item .types-men-item-info .types-men-item-txt { font-size: 14px; font-weight: 400; line-height: 18px; color: #000000; } /* 写真なし登壇者：講演情報を左ツメ */ body.lp #types .types-men-list .types-men-item.types-men-item--nophoto .types-men-item-info { padding-left: 0; width: 100%; text-align: left; } body.lp #types .types-men-list .types-men-item:nth-child(2) .types-men-item-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.lp #types .types-men-list .types-men-item:nth-child(4) .types-men-item-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.lp #schedule { padding: 0 0 40px; background: var(--lp-section-bg) no-repeat; background-position: right top; } body.lp #schedule .schedule-lead { margin: 0 0 34px; } body.lp #schedule .schedule-lead .schedule-lead-figure { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.lp #schedule .schedule-lead .schedule-lead-figure img { width: 300px; } body.lp #schedule .schedule-lead .schedule-lead-infos { width: 100%; padding: 0; text-align: center; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-ttl { margin: 0 0 11px; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-ttl span { display: block; font-size: 30px; font-weight: 700; line-height: 60px; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-ttl span:after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 6px; background: var(--lp-keybg) no-repeat; } body.lp #schedule .schedule-lead .schedule-lead-infos br.sp-br { display: none; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-txt { margin: 0 0 13px; font-size: 18px; font-weight: 700; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-txt .num { font-size: 36px; line-height: 50px; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-txt .large { font-size: 28px; line-height: 50px; } body.lp #schedule .meeting-room { margin: 0 0 40px; padding: 30px 40px 40px; border-radius: 5px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); } body.lp #schedule .meeting-room .meeting-room-ttl { margin: 0 0 14px; font-size: 24px; font-weight: 700; } body.lp #schedule .meeting-room .meeting-room-txt { margin: 0 0 30px; } body.lp #schedule p.regist-flow-ttl { font-size: 20px; font-weight: bold; line-height: 28px; margin-bottom: 20px; } body.lp #schedule p.regist-flow-ttl span { color: var(--lp-accent); } body.lp .popup { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1100; background: rgba(0, 0, 0, 0.5); } body.lp .popup .popup-box { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; padding: 18px 30px; background: #ffffff; border-radius: 5px; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36); } body.lp .popup .popup-box .popup-close { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 18px; right: 30px; width: 38px; height: 38px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; cursor: pointer; } body.lp .popup .popup-box .popup-close:before { content: ""; position: absolute; width: 20px; height: 2px; background: #6d6d6d; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body.lp .popup .popup-box .popup-close:after { content: ""; position: absolute; width: 20px; height: 2px; background: #6d6d6d; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } body.lp .popup .popup-box .popup-logo { margin: 0 0 17px; } body.lp .popup .popup-box .popup-logo img { width: auto; height: auto; } body.lp .popup .popup-box .popup-ttl { margin: 0 0 18px; font-size: 24px; font-weight: 700; line-height: 29px; } body.lp .popup .popup-box .popup-txt { font-size: 18px; font-weight: 400; line-height: 24px; } body.lp .inq-link-txt { margin: 0 0 22px; text-align: center; } body.lp .inq-link-txt span { position: relative; font-size: 21px; font-weight: 700; line-height: 27px; color: #000000; } body.lp .inq-link-txt span:before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -20px; -webkit-transform: translateY(-50%) rotate(-30deg); transform: translateY(-50%) rotate(-30deg); width: 1px; height: 150%; background: #000000; } body.lp .inq-link-txt span:after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -20px; -webkit-transform: translateY(-50%) rotate(30deg); transform: translateY(-50%) rotate(30deg); width: 1px; height: 150%; background: #000000; } /* LPのフッター背景（本体の footer_bg を LP用 keycolor 画像に差し替え。テーマ別 --lp-footer-bg） */ body.lp .footer-main { background: var(--lp-footer-bg) no-repeat bottom center / cover; } /* keycolor背景で白文字が見づらいため、フッター内文字に黒のtext-shadow（LP限定・本体非影響） */ body.lp .footer-main, body.lp .footer-main a { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* フッターの見出し下線を白に（LP限定） */ body.lp .footer__list-titles { border-bottom-color: #ffffff; } /* 「〜とは」見出しの右に注記（rm/hj「※同時開催展含む」） */ body.lp .lp-sec-ttl-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 14px; margin: 0 0 35px; } body.lp .lp-sec-ttl-wrap .lp-sec-ttl { margin-bottom: 0; } body.lp .lp-sec-ttl-note { font-size: 14px; font-weight: 700; } /* events: RM用「検索はこちらから」ボタン */ body.lp .events-search-link { display: table; margin: 0 auto 24px; padding: 12px 26px; background: #ffffff; color: var(--lp-accent); font-weight: 700; border-radius: 30px; text-decoration: none; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } body.lp .events-search-link:hover { opacity: 0.8; } /* events: RM用出展分野リスト（枠内・白文字） */ /* RM: events-body-box をコンテンツ全幅に */ body.lp.lp-rm #events .events-body .events-body-row .events-body-box { width: 100%; } body.lp .events-rm-list { text-align: left; } body.lp .events-rm-list .events-rm-cat { margin: 16px 0 6px; font-size: 18px; font-weight: 700; } body.lp .events-rm-list .events-rm-cat:first-child { margin-top: 0; } body.lp .events-rm-list .events-rm-items { margin: 0; padding-left: 1em; font-size: 15px; line-height: 1.8; } /* events: HJ用 2行2列セット＋全幅リード */ body.lp .events-hj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 48px; margin: 0 0 24px; text-align: left; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* needs番号（1・2・3）を画像からフォント表示へ。色は各テーマのキーカラー＋text-shadow */ body.lp .what-is-item-figure .no .no-num { display: block; font-size: 108px; font-weight: 700; font-style: italic; line-height: 1; color: var(--lp-accent); text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.35); } /* 画像（クリッカブルマップ）の左右スクロール用ラッパー */ body.lp .lp-img-scroll { -webkit-overflow-scrolling: touch; } /* ===== レスポンシブ（SP: 〜768px）。webサイト本体に合わせ 768px ブレークポイント ===== */ @media screen and (max-width: 768px) { /* 横スクロール防止：PC固定幅の解除 */ html { min-width: 0; } body.lp { min-width: 0; overflow-x: hidden; } body.lp .content { width: auto; padding: 0 16px; } /* 最上部ヘッダーは非表示（ナビは右側ハンドルメニューを使用） */ body.lp header#header-lp { display: none; } /* メインビジュアル */ body.lp #main-visual { min-width: 0; height: auto; min-height: 0; } /* 動画＆背景画像オーバーレイを最背面に、コンテンツ（キャッチ・見出し・会期会場・40th）を前面に */ body.lp #main-visual .video-wrapper { z-index: 0; } body.lp #main-visual:before { z-index: 1; } body.lp #main-visual .mv-inner { position: relative; left: auto; top: auto; -webkit-transform: none; transform: none; width: 100%; padding: 90px 20px 40px; z-index: 2; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-ttl { font-size: 22px; line-height: 32px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-lead { font-size: 14px; line-height: 23px; } body.lp #main-visual .mv-inner .mv-logo { margin: 24px 0; } body.lp #main-visual .mv-inner .mv-logo .mv-logo-single { width: 72%; max-width: 300px; } body.lp #main-visual .mv-inner .mv-infos .mv-period-row { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } body.lp #main-visual .mv-inner .mv-infos .mv-40th { height: 56px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period { font-size: 14px; line-height: 24px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period .num { font-size: 22px; } body.lp #main-visual .mv-inner .mv-infos .mv-infos-period .large { font-size: 18px; } body.lp #main-visual .mv-scroll { margin: 24px 0; } /* セクション見出し：折り返し許可・縮小 */ body.lp .lp-sec-ttl { min-height: 0; padding: 8px 20px; } body.lp .lp-sec-ttl span { font-size: 19px; white-space: normal; } /* BioJapanとは？／パートナリング：3列 → 1列 */ body.lp #what-is .what-is-list, body.lp #partners .what-is-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } body.lp #what-is .what-is-list .what-is-item, body.lp #partners .what-is-list .what-is-item { width: 100%; padding: 0 0 30px; margin: 0 0 30px; border-right: none; border-bottom: 1px solid #a5a5a5; } body.lp #what-is .what-is-list .what-is-item:last-child, body.lp #partners .what-is-list .what-is-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* リード文（画像付き）：縦積み・画像可変 */ body.lp #what-is div.what-is-lead, body.lp #partners div.what-is-lead { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } body.lp #what-is div.what-is-lead img { display: block; width: 80%; max-width: 350px; height: auto; margin: 0 auto; } body.lp #what-is div.what-is-lead p { font-size: 16px; line-height: 26px; } /* パートナリング：丸図キャプションのフォント縮小 */ body.lp #partners .what-is-list .what-is-item .what-is-item-figure-wrapper .what-is-item-figure-ttl p { font-size: 18px; line-height: 22px; } /* 基調講演：2×2 → 1列 */ body.lp #types .types-men-list { grid-template-columns: 1fr; row-gap: 30px; } /* PC専用の改行は SP では効かせず自然折返しにする */ body.lp br.pc-br { display: none; } /* HJ events 2×2 → 1列 */ body.lp .events-hj-grid { grid-template-columns: minmax(0, 1fr); } /* 来場登録ボタン：可変幅 */ body.lp .inq-link { width: 100%; max-width: 437px; } /* 開催概要 */ body.lp #schedule .schedule-lead .schedule-lead-figure img { width: 64%; max-width: 240px; } body.lp #schedule .schedule-lead .schedule-lead-infos .schedule-lead-infos-ttl span { font-size: 20px; line-height: 34px; padding-bottom: 14px; } body.lp #schedule .schedule-lead .schedule-lead-infos br.sp-br { display: inline; } body.lp #schedule .meeting-room { padding: 20px 16px 24px; } /* クリッカブルマップ画像：縮小しすぎないよう一定幅を保ち、左右スクロール（JS が coords を再計算） */ body.lp .lp-img-scroll { overflow-x: auto; } body.lp .lp-img-scroll img { display: block; width: 760px; max-width: none; height: auto; } /* ポップアップ：高さ制限してスクロール可 */ body.lp .popup .popup-box { width: 90%; max-height: 85vh; overflow-y: auto; } } /* types セクション見出しの上余白（3LP共通） */ body.lp #types { padding-top: 50px; } /* ===================================================================== * HJ：注目の出展カテゴリー（#events） * 4クラスタを2×2グリッドに配置。各クラスタは白帯の見出し＋タグ4つ（2列2行）。 * グリッドの下に会場写真2枚を横並びで置く（SP は1列・縦積み）。 * ===================================================================== */ /* HJ events 見出し：SP のみ「2026」の後で改行 */ body.lp #events .events-body-ttl br.sp-br { display: none; } body.lp .hj-cat-lead { display: table; margin: 0 auto 22px; padding: 10px 28px; border: 4px solid #ffffff; border-radius: 6px; color: #ffffff; font-size: 30px; font-weight: 700; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } body.lp .events-hj-grid .hj-cat { min-width: 0; } body.lp .hj-cat .hj-cat-ttl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 63px; /* 2行分で高さを揃える */ margin: 0 0 12px; padding: 6px 12px; background: #ffffff; border-radius: 6px; color: #000000; text-align: center; text-shadow: none; font-size: 17px; line-height: 1.5; font-weight: 700; } body.lp .hj-cat-tags { display: -ms-grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.lp .hj-cat-tag { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 7px 8px; background: #FFAE6E; /* 原稿のオレンジ */ color: #ffffff; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.35; text-shadow: none; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); } /* 原稿ではクラスタ単位で単色。創薬・医療データはグリーン */ body.lp .hj-cat--drug .hj-cat-tag, body.lp .hj-cat--data .hj-cat-tag { background: #ACBFA4; } /* --- 会場写真（グリッドの下に横並び2枚） --- */ body.lp .hj-venue-photos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 24px; margin-top: 30px; margin-bottom: 45px; } body.lp .hj-venue-photo { width: 100%; max-width: 430px; height: auto; border-radius: 2px; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); } @media screen and (max-width: 768px) { /* SP：見出しを小さく、タグは1列、写真は縦積み */ body.lp #events .events-body-ttl br.sp-br { display: inline; } body.lp .hj-cat-lead { font-size: 22px; padding: 8px 16px; } body.lp .hj-cat .hj-cat-ttl { font-size: 16px; min-height: 0; } body.lp .hj-cat-tags { gap: 8px; } body.lp .hj-cat-tag { font-size: 13px; } body.lp .hj-venue-photos { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } } /* HJ events：締めの一文と左右の線を白に */ body.lp #events .inq-link-txt span { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } body.lp #events .inq-link-txt span:before, body.lp #events .inq-link-txt span:after { background: #ffffff; }