:root {
--navy: #041b3a;
--blue: #0878c9;
--cyan: #2bd9ef;
--sky: #e9f8ff;
--ink: #102a43;
--muted: #557086;
--white: #fff;
--sun: #ffd76b;
--shadow: 0 18px 50px rgba(4, 43, 82, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #fff 0%, #f2fbff 100%); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.75; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 clamp(18px, 4vw, 60px); color: #fff; background: rgba(3, 25, 54, .94); border-bottom: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.25; }
.brand small { color: #96eaff; font-size: 12px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: var(--cyan); font-size: 13px; letter-spacing: .08em; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a { text-decoration: none; font-weight: 700; font-size: 14px; }
.site-nav a:hover { color: var(--cyan); }
.site-nav .nav-cta { padding: 10px 18px; color: var(--navy); background: var(--sun); border-radius: 999px; }
.menu-button { display: none; }
#top, #event-title, #about, #speaker, #speaker-profile, #entry { scroll-margin-top: 88px; }
.hero { position: relative; min-height: 350px; display: grid; align-items: center; overflow: hidden; color: var(--navy); background: #eaf7ff; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center; }
.hero-shade { background: linear-gradient(90deg, rgba(241,249,255,.96) 0%, rgba(238,248,255,.82) 35%, rgba(238,248,255,.18) 62%, rgba(255,255,255,0) 100%), linear-gradient(0deg, rgba(226,244,255,.35), transparent 48%); }
.hero-content { position: relative; z-index: 1; width: min(1180px, 90%); margin: 0 auto; padding: 22px 0 68px; }
.eyebrow { margin: 0 0 8px; color: #086ea9; font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; line-height: 1.4; letter-spacing: .06em; }
.status { display: inline-block; margin: 0 0 8px; padding: 3px 11px; color: #075f93; background: rgba(255,255,255,.62); border: 1px solid rgba(7,95,147,.45); border-radius: 99px; font-size: 12px; }
h1 { margin: 0; font-size: clamp(36px, 5.4vw, 68px); font-weight: 500; line-height: 1.12; letter-spacing: .02em; text-shadow: 0 3px 22px rgba(255,255,255,.9); }
h1 strong { color: #075f9b; font-weight: 800; }
.hero-lead { margin: 14px 0 0; font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; line-height: 1.55; }
.mobile-break { display: none; }
.top-info-panel { position: relative; z-index: 3; width: min(1180px, 94%); margin: -48px auto 52px; padding: 16px; display: grid; grid-template-columns: minmax(340px, .88fr) minmax(510px, 1.35fr); gap: 16px; background: rgba(255,255,255,.97); border-top: 6px solid var(--cyan); border-radius: 18px; box-shadow: var(--shadow); }
.speaker-summary { display: grid; align-items: start; padding: 16px; background: linear-gradient(145deg, #eaf8ff, #fff); border: 1px solid #d5eaf5; border-radius: 13px; }
.speaker-summary h2 { font-size: clamp(22px, 2vw, 29px); }
.speaker-name { margin: 0 0 4px; color: var(--navy); font-size: clamp(20px, 2vw, 27px); font-weight: 800; line-height: 1.3; }
.speaker-summary .speaker-role { margin: 0 0 9px; font-size: 11px; line-height: 1.45; }
.speaker-bio { margin: 8px 0 10px; color: #34546c; font-size: 13px; line-height: 1.65; }
.role-line { display: block; width: max-content; max-width: 100%; word-break: keep-all; overflow-wrap: normal; }
.profile-button { display: inline-block; padding: 8px 14px; color: #fff; background: linear-gradient(135deg, #087bc7, #075b9c); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 800; }
.profile-button:hover { filter: brightness(1.07); }
.event-card { min-width: 0; padding: 4px 4px 2px; }
.event-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 8px; }
.event-heading p, .section-kicker { margin: 0; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .16em; line-height: 1.1; }
h2 { margin: 0; color: var(--navy); font-size: clamp(26px, 3.5vw, 43px); line-height: 1.2; }
.event-heading h2 { font-size: clamp(22px, 2.4vw, 31px); line-height: 1.1; margin-top: 2px; }
.map-link-button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; color: var(--navy); background: #eef9ff; border: 1px solid #bfe3f4; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.map-link-button:hover { background: #e4f7ff; }
.event-details { padding: 9px 14px; background: #f5fbff; border-top: 1px solid #dbeaf2; border-bottom: 1px solid #dbeaf2; }
.event-details p { margin: 0; color: var(--ink); font-size: clamp(14px, 1.25vw, 16px); line-height: 1.48; }
.event-details strong { color: var(--navy); }
.event-details .price { color: #d94f27; font-size: 1.18em; font-weight: 800; }
.event-detail-row { display: grid; grid-template-columns: 4.3em minmax(0, 1fr); gap: 2px; padding: 2px 0; }
.event-detail-row + .event-detail-row { border-top: 1px dotted #c9dce7; }
.event-label { white-space: nowrap; }
.event-date { font-weight: 800; }
.event-date.second-date { margin-top: 3px; }
.event-session { padding-left: 1.1em; }
.entry-row { display: flex; align-items: center; justify-content: center; gap: 15px; padding-top: 9px; }
.entry-row p { margin: 0; color: var(--muted); font-size: 14px; }
.entry-note { margin-top: 8px; text-align: center; }
.entry-note p { margin: 0; color: var(--muted); font-size: 13px; }
button, .secondary-button { font: inherit; }
.primary-button { min-width: 215px; padding: 10px 20px; color: #fff; background: linear-gradient(135deg, #078bd3, #075fae); border: 0; border-radius: 999px; box-shadow: 0 10px 25px rgba(4,113,186,.24); font-weight: 800; cursor: pointer; }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.section { width: min(1080px, 90%); margin: 0 auto; padding: 90px 0; }
.section-intro { display: grid; grid-template-columns: 1.55fr .75fr; gap: clamp(40px, 7vw, 90px); align-items: center; }
.section-copy h2 { text-wrap: balance; word-break: auto-phrase; }
.about-title span { display: block; width: max-content; max-width: 100%; word-break: keep-all; }
.section-copy > p:not(.section-kicker) { color: #34546c; font-size: 17px; }
.points { padding: 0; list-style: none; }
.points li { position: relative; margin: 13px 0; padding-left: 30px; font-size: 17.5px; font-weight: 700; line-height: 1.7; }
.points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 14px; height: 14px; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-radius: 50%; box-shadow: 0 0 0 5px #e2f8ff; }
.concept-card { position: relative; margin: 0; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,248,255,.9)); border: 1px solid rgba(120,201,226,.5); border-top: 6px solid #62d8e8; border-radius: 24px; box-shadow: 0 18px 46px rgba(31,113,149,.13); backdrop-filter: blur(12px); }
.concept-icon { min-height: 165px; display: grid; place-items: center; color: rgba(255,255,255,.95); background: radial-gradient(circle, rgba(83,232,255,.65), transparent 35%), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.04) 39px 40px); font-size: 60px; font-weight: 900; letter-spacing: .08em; }
.concept-card figcaption { display: grid; gap: 18px; padding: clamp(28px, 4vw, 40px); }
.concept-card strong { color: #075784; font-size: clamp(19px, 2vw, 24px); line-height: 1.55; text-wrap: balance; word-break: auto-phrase; }
.concept-card strong span { display: block; white-space: nowrap; }
.concept-card strong .icu-acronym { margin-bottom: 2px; color: #0783b1; font-size: 1.35em; letter-spacing: .08em; }
.concept-card p { margin: 0; color: #34546c; font-size: 15px; line-height: 1.95; }
.speaker-profile-section { padding-top: 45px; }
.speaker-profile-block { display: grid; grid-template-columns: minmax(350px, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 60px); align-items: center; padding: clamp(28px, 5vw, 54px); background: #fff; border-top: 6px solid var(--cyan); border-radius: 24px; box-shadow: var(--shadow); }
.speaker-profile-heading { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 22px; align-items: center; }
.speaker-profile-heading img { width: 145px; height: 185px; object-fit: cover; object-position: center top; border-radius: 14px; box-shadow: 0 12px 30px rgba(4,43,82,.18); }
.speaker-profile-heading h2 { font-size: clamp(25px, 3vw, 37px); text-wrap: balance; }
.speaker-profile-name { margin: 8px 0 4px; color: var(--navy); font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; }
.speaker-profile-role { margin: 0; color: var(--blue); font-size: 13px; font-weight: 700; line-height: 1.7; }
.speaker-profile-role span { display: block; }
.speaker-profile-copy p {
font-size: 17px !important;
line-height: 1.95 !important;
}
.speaker-profile-copy strong {
font-size: 17px !important;
}
.profile-button-more { padding: 11px 20px; }
.speaker-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; padding: 65px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
.speaker-section > p { margin: 0; color: #34546c; font-size: 17px; }
.speaker-role { color: var(--blue); font-weight: 700; line-height: 1.75; }
.profile-page { min-height: calc(100vh - 150px); padding: 70px 20px; background: linear-gradient(180deg, #e9f8ff, #fff); }
.profile-card { width: min(980px, 92%); margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(35px, 6vw, 70px); align-items: start; padding: clamp(30px, 5vw, 60px); background: #fff; border-top: 6px solid var(--cyan); border-radius: 22px; box-shadow: var(--shadow); }
.profile-photo-column img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 16px; box-shadow: 0 12px 30px rgba(4,43,82,.18); }
.profile-copy h1 { margin: 4px 0 12px; color: var(--navy); font-size: clamp(38px, 5vw, 58px); font-weight: 800; text-shadow: none; }
.profile-role { margin: 0 0 24px; color: var(--blue); font-weight: 800; line-height: 1.8; }
.profile-copy > p:not(.section-kicker):not(.profile-role) { color: #34546c; font-size: 17px; }
.profile-back { margin-top: 14px; text-align: center; }
.closing { margin-top: 90px; padding: 60px 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #041c3d, #075c93 65%, #079fc0); }
.closing > p { margin: 0 0 30px; font-size: clamp(22px, 3.5vw, 38px); font-weight: 800; line-height: 1.7; }
.closing-message span { display: block; }
.secondary-button { display: inline-block; min-width: 220px; padding: 14px 26px; color: var(--navy); background: var(--sun); border-radius: 999px; text-decoration: none; font-weight: 800; }
.closing small { display: block; margin-top: 13px; color: #c9efff; }
footer { padding: 28px 20px; text-align: center; color: #9bb9cd; background: #03142b; font-size: 12px; }
footer p { margin: 4px; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 50; width: min(520px, 88%); padding: 15px 20px; color: #fff; background: rgba(4,27,58,.96); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; box-shadow: var(--shadow); text-align: center; transform: translate(-50%, 140px); opacity: 0; transition: .25s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 900px) {
.site-header { padding: 0 18px; }
.site-nav { gap: 11px; }
.site-nav a { font-size: 12px; }
.site-nav .nav-cta { padding: 8px 12px; text-align: center; }
.hero { min-height: 350px; }
.hero-image { object-position: 62% center; }
.top-info-panel { grid-template-columns: minmax(300px, .9fr) minmax(430px, 1.3fr); }
.speaker-summary { padding: 12px; }
.speaker-summary .speaker-role { font-size: 10px; }
.entry-row p { display: none; }
.section-intro { grid-template-columns: 1fr; }
.concept-card { max-width: 520px; }
.speaker-profile-block { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.top-info-panel { grid-template-columns: 1fr; }
.speaker-summary { padding: 14px; }
.speaker-summary .speaker-role { font-size: 11px; }
.profile-card { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 620px) {
.site-header { height: auto; min-height: 94px; display: block; padding: 6px 10px; }
.brand { font-size: 12px; }
.brand-mark { width: 36px; height: 36px; }
.site-nav { width: 100%; justify-content: center; gap: 5px; overflow-x: auto; padding-top: 4px; white-space: nowrap; }
.site-nav a { flex: 0 0 auto; padding: 3px 4px; font-size: 11px; }
.site-nav .nav-cta { padding: 4px 8px; }
#top, #event-title, #about, #speaker, #speaker-profile, #entry { scroll-margin-top: 108px; }
.hero { min-height: 410px; align-items: start; }
.hero-image { object-position: 68% center; }
.hero-shade { background: linear-gradient(90deg, rgba(239,249,255,.96), rgba(239,249,255,.68)), linear-gradient(0deg, rgba(229,245,255,.55), transparent); }
.hero-content { width: 88%; padding: 34px 0 78px; }
h1 { font-size: clamp(36px, 11vw, 54px); }
.mobile-break { display: block; }
.top-info-panel { margin-top: -42px; padding: 12px; }
.event-heading { display: block; }
.event-details { padding: 11px 10px; }
.entry-row { display: grid; gap: 10px; text-align: center; }
.primary-button { min-width: 100%; }
.section { padding: 65px 0; }
.speaker-section { grid-template-columns: 1fr; gap: 20px; padding: 34px 26px; }
.speaker-profile-block { padding: 28px 22px; }
.speaker-profile-heading { grid-template-columns: 105px minmax(0, 1fr); gap: 16px; }
.speaker-profile-heading img { width: 105px; height: 140px; }
.speaker-profile-role { font-size: 11px; }
.profile-page { padding: 35px 12px; }
.profile-card { width: 100%; grid-template-columns: 1fr; padding: 24px 20px; }
.profile-photo-column img { width: min(240px, 76%); margin: 0 auto; }
}
/* Ver1.01 iPhone fine tuning */
html,body{overflow-x:hidden;}
img{max-width:100%;height:auto;}
@media (max-width:620px){
.container,.hero-content,.top-info-panel,.section>.container{width:min(100%,100vw);max-width:100%;padding-left:14px;padding-right:14px;}
.site-header,.hero,.top-info-panel{overflow:hidden;}
}
/* Ver1.02 definitive smartphone layout fix */
@media (max-width: 620px) {
html, body {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
body, main, header, section, article, figure, div, nav {
min-width: 0;
}
.hero-content,
.top-info-panel,
.section {
width: calc(100% - 24px);
max-width: calc(100% - 24px);
margin-left: auto;
margin-right: auto;
}
.hero-content {
padding-left: 0;
padding-right: 0;
}
.top-info-panel {
padding: 10px;
}
.speaker-summary,
.event-card,
.event-details,
.entry-row,
.section-copy,
.concept-card,
.concept-card figcaption {
width: 100%;
max-width: 100%;
min-width: 0;
}
.event-heading,
.event-detail-row,
.entry-row {
min-width: 0;
}
.primary-button,
.profile-button,
.secondary-button {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.primary-button {
display: block;
width: 100%;
min-width: 0;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
line-height: 1.45;
}
.section-intro {
display: block;
}
.section-copy {
margin-bottom: 28px;
}
.about-title span,
.concept-card strong span,
.concept-card strong .icu-acronym {
display: inline;
width: auto;
max-width: 100%;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
.about-title {
font-size: clamp(24px, 7.2vw, 31px);
line-height: 1.5;
}
.concept-card figcaption {
padding: 22px 18px;
}
.concept-card strong {
display: block;
font-size: 19px;
overflow-wrap: anywhere;
}
.points li {
overflow-wrap: anywhere;
}
}
/* Ver1.03 mobile typography adjustment */
@media (max-width: 620px) {
.eyebrow {
font-size: 15px;
line-height: 1.35;
letter-spacing: .035em;
}
#hero-title {
font-size: clamp(30px, 8.7vw, 38px);
line-height: 1.14;
letter-spacing: 0;
}
.closing {
padding: 48px 10px;
}
.closing > .closing-message {
font-size: clamp(17px, 5.2vw, 21px);
line-height: 1.55;
letter-spacing: 0;
}
.closing-message span {
white-space: normal;
}
footer {
padding-left: 6px;
padding-right: 6px;
font-size: clamp(8px, 2.35vw, 10px);
line-height: 1.45;
}
footer p {
margin-left: 0;
margin-right: 0;
white-space: nowrap;
}
}
/* Ver1.05 mobile lecture information alignment */
@media (max-width: 620px) {
.event-datetime {
display: block;
}
.event-datetime .event-label {
display: block;
margin-bottom: 2px;
}
.event-datetime .event-value {
width: 100%;
}
.event-session {
padding-left: 0;
white-space: nowrap;
font-size: clamp(13px, 3.75vw, 15px) !important;
letter-spacing: -0.01em;
}
.event-fee .fee-note {
display: inline-block;
margin-top: 1px;
}
}
/* Ver1.06: keep all three lecture times on one line on narrow phones */
@media (max-width: 620px) {
.event-details {
padding-left: 6px;
padding-right: 6px;
}
.event-datetime .event-value {
width: 100%;
max-width: 100%;
overflow: visible;
}
.event-datetime .event-session {
display: block;
width: max-content;
max-width: 100%;
margin-left: 0;
padding-left: 0;
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
font-size: clamp(10.5px, 3.35vw, 13px) !important;
line-height: 1.55;
letter-spacing: -0.025em;
}
}
/* Ver1.07: definitive single-line lecture times + mobile cache refresh */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (max-width: 620px) {
.event-card {
padding-left: 0;
padding-right: 0;
}
.event-details {
padding-left: 4px;
padding-right: 4px;
}
.event-datetime .event-session {
display: block;
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: clamp(11px, 3.2vw, 13px) !important;
line-height: 1.6;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
}
/* Ver 109: reordered structure while preserving hero and speaker images */
.hero {
min-height: 330px;
}
.hero-content {
padding-bottom: 48px;
}
.section-intro-first {
width: min(1180px, 90%);
padding-top: 72px;
padding-bottom: 34px;
align-items: start;
}
.section-intro-first .section-copy {
padding-top: 8px;
}
.section-intro-first .about-title {
font-size: clamp(30px, 3.7vw, 49px);
line-height: 1.34;
}
.section-intro-first .concept-card {
align-self: stretch;
}
.lecture-description-section {
width: min(1080px, 90%);
padding-top: 18px;
padding-bottom: 64px;
}
.lecture-description-card {
padding: clamp(28px, 4.5vw, 52px);
background: rgba(255,255,255,.96);
border-left: 7px solid var(--cyan);
border-radius: 20px;
box-shadow: var(--shadow);
}
.lecture-description-card h2 {
margin-top: 8px;
font-size: clamp(26px, 3vw, 40px);
}
.lecture-description-card > p:not(.section-kicker) {
margin: 18px 0 0;
color: #34546c;
font-size: clamp(16px, 1.55vw, 18px);
line-height: 2;
}
.lecture-description-card .points {
margin: 24px 0 0;
}
.top-info-panel {
margin-top: 0;
margin-bottom: 64px;
}
@media (max-width: 900px) {
.section-intro-first {
padding-top: 58px;
}
}
@media (max-width: 620px) {
.hero {
min-height: 350px;
}
.hero-content {
padding-bottom: 44px;
}
.section-intro-first {
width: calc(100% - 24px);
max-width: calc(100% - 24px);
padding-top: 48px;
padding-bottom: 24px;
}
.section-intro-first .about-title {
font-size: clamp(24px, 7vw, 31px);
line-height: 1.45;
}
.lecture-description-section {
width: calc(100% - 24px);
max-width: calc(100% - 24px);
padding-top: 8px;
padding-bottom: 48px;
}
.lecture-description-card {
padding: 24px 18px;
border-left-width: 5px;
}
.lecture-description-card > p:not(.section-kicker) {
font-size: 15px;
line-height: 1.9;
}
.top-info-panel {
margin-top: 0;
margin-bottom: 48px;
}
}
/* Ver 110: hero -> about banner -> lecture guide + ICU */
.about-banner-section {
width: min(1400px, 92%);
margin: 34px auto 26px;
}
.about-banner-card {
padding: clamp(28px, 4vw, 46px) clamp(26px, 5vw, 64px);
background: rgba(255, 255, 255, 0.98);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: var(--shadow);
}
.about-banner-card .section-kicker {
margin: 0 0 12px;
}
.about-banner-card .about-title {
margin: 0;
color: var(--navy);
font-size: clamp(29px, 3.5vw, 49px);
line-height: 1.42;
letter-spacing: 0;
}
.about-banner-card .about-title span {
display: block;
}
.lecture-guide-section {
width: min(1180px, 90%);
margin: 0 auto;
padding: 12px 0 66px;
}
.lecture-guide-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
gap: 28px;
align-items: stretch;
}
.lecture-guide-card {
padding: clamp(28px, 4vw, 48px);
background: rgba(255,255,255,.97);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: var(--shadow);
}
.lecture-guide-card h2 {
margin: 7px 0 20px;
color: var(--navy);
font-size: clamp(28px, 3vw, 42px);
line-height: 1.35;
}
.lecture-guide-card > p:not(.section-kicker) {
margin: 14px 0 0;
color: #34546c;
font-size: clamp(16px, 1.45vw, 18px);
line-height: 1.95;
}
.lecture-guide-card .points {
margin: 24px 0 0;
}
.icu-guide-column {
min-width: 0;
}
.icu-guide-column .concept-card {
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
align-self: stretch;
}
.icu-guide-column .concept-card figcaption {
height: 100%;
box-sizing: border-box;
}
.top-info-panel {
margin-top: 0;
}
@media (max-width: 900px) {
.about-banner-section {
width: min(94%, 760px);
}
.lecture-guide-section {
width: min(94%, 760px);
}
.lecture-guide-grid {
grid-template-columns: 1fr;
}
.icu-guide-column .concept-card {
min-height: auto;
}
}
@media (max-width: 620px) {
.about-banner-section {
width: calc(100% - 24px);
margin-top: 22px;
margin-bottom: 18px;
}
.about-banner-card {
padding: 24px 18px 26px;
border-top-width: 5px;
border-radius: 16px;
}
.about-banner-card .about-title {
font-size: clamp(23px, 6.8vw, 30px);
line-height: 1.5;
}
.lecture-guide-section {
width: calc(100% - 24px);
padding-top: 8px;
padding-bottom: 46px;
}
.lecture-guide-grid {
gap: 18px;
}
.lecture-guide-card {
padding: 24px 18px;
border-top-width: 5px;
border-radius: 16px;
}
.lecture-guide-card h2 {
font-size: clamp(25px, 7vw, 31px);
}
.lecture-guide-card > p:not(.section-kicker) {
font-size: 15px;
line-height: 1.9;
}
}
/* Ver 111: ABOUT headline in two desktop lines + narrative */
.about-banner-card .about-title {
font-size: clamp(27px, 2.65vw, 43px);
line-height: 1.42;
letter-spacing: -0.025em;
}
.about-banner-card .about-title-line {
display: block;
white-space: nowrap;
}
.about-narrative {
margin-top: clamp(24px, 3vw, 38px);
padding-top: clamp(20px, 2.4vw, 30px);
border-top: 1px solid rgba(8, 118, 185, 0.20);
}
.about-narrative p {
margin: 0;
color: #34546c;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 2;
text-align: justify;
text-justify: inter-ideograph;
}
.about-narrative p + p {
margin-top: 16px;
}
@media (max-width: 1100px) {
.about-banner-card .about-title {
font-size: clamp(24px, 2.75vw, 34px);
}
}
@media (max-width: 760px) {
.about-banner-card .about-title {
font-size: clamp(22px, 5.8vw, 29px);
line-height: 1.5;
letter-spacing: 0;
}
.about-banner-card .about-title-line {
white-space: normal;
}
.about-narrative {
margin-top: 22px;
padding-top: 20px;
}
.about-narrative p {
font-size: 15px;
line-height: 1.9;
text-align: left;
}
}
/* Ver 112: concise ABOUT copy */
.about-narrative p + p {
margin-top: 13px;
}
.about-narrative .about-closing-message {
margin-top: clamp(22px, 2.5vw, 30px);
padding: 18px 22px;
color: var(--navy);
font-size: clamp(18px, 1.65vw, 22px);
font-weight: 700;
line-height: 1.7;
text-align: center;
background: linear-gradient(135deg, rgba(232,248,253,.9), rgba(242,250,255,.95));
border: 1px solid rgba(0, 170, 210, .25);
border-radius: 14px;
}
@media (max-width: 760px) {
.about-narrative .about-closing-message {
padding: 16px 14px;
font-size: 17px;
}
}
/* Ver 113: core-message ABOUT box with three equal-level headings */
.about-banner-section {
width: min(1240px, 92%);
margin-top: 34px;
margin-bottom: 30px;
}
.about-banner-card {
padding: clamp(34px, 5vw, 64px);
background:
radial-gradient(circle at 100% 0%, rgba(72, 197, 224, .10), transparent 34%),
rgba(255, 255, 255, .98);
border: 1px solid rgba(15, 115, 164, .16);
border-top: 8px solid var(--cyan);
border-radius: 24px;
box-shadow: 0 18px 52px rgba(14, 78, 118, .14);
}
.about-core-message {
max-width: 1080px;
margin: 0 auto;
}
.about-message-section {
position: relative;
padding: 0 0 34px 30px;
}
.about-message-section + .about-message-section {
padding-top: 34px;
border-top: 1px solid rgba(8, 118, 185, .20);
}
.about-message-section::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 12px;
height: 12px;
background: var(--cyan);
border: 4px solid rgba(80, 201, 224, .20);
border-radius: 50%;
box-sizing: content-box;
}
.about-message-section + .about-message-section::before {
top: 42px;
}
.about-message-heading {
margin: 0 0 20px;
color: var(--navy);
font-size: clamp(25px, 2.6vw, 38px);
font-weight: 800;
line-height: 1.45;
letter-spacing: .01em;
}
.about-message-section p {
margin: 0;
color: #294d66;
font-size: clamp(17px, 1.45vw, 20px);
font-weight: 500;
line-height: 2.05;
text-align: justify;
text-justify: inter-ideograph;
}
.about-message-section p + p {
margin-top: 14px;
}
.about-project-section {
background: linear-gradient(135deg, rgba(235, 249, 253, .76), rgba(246, 252, 255, .92));
margin-right: -18px;
margin-left: -18px;
padding-right: 30px;
padding-bottom: 36px;
padding-left: 48px;
border-radius: 18px;
}
.about-project-section::before {
left: 18px;
}
.about-question-section {
margin-top: 4px;
padding-bottom: 0;
}
.about-question-heading {
margin: 0;
padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 34px);
color: #0a466b;
font-size: clamp(23px, 2.7vw, 36px);
text-align: center;
background: linear-gradient(135deg, rgba(222, 245, 251, .96), rgba(240, 250, 255, .98));
border: 1px solid rgba(0, 157, 196, .28);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.about-question-section::before {
display: none;
}
@media (max-width: 760px) {
.about-banner-section {
width: calc(100% - 24px);
margin-top: 22px;
margin-bottom: 22px;
}
.about-banner-card {
padding: 28px 18px;
border-top-width: 6px;
border-radius: 18px;
}
.about-message-section {
padding-left: 24px;
padding-bottom: 28px;
}
.about-message-section + .about-message-section {
padding-top: 28px;
}
.about-message-section::before {
top: 7px;
width: 10px;
height: 10px;
border-width: 3px;
}
.about-message-section + .about-message-section::before {
top: 35px;
}
.about-message-heading {
margin-bottom: 16px;
font-size: clamp(22px, 6.6vw, 29px);
line-height: 1.5;
}
.about-message-section p {
font-size: 16px;
line-height: 1.95;
text-align: left;
}
.about-project-section {
margin-right: -6px;
margin-left: -6px;
padding-right: 16px;
padding-left: 30px;
border-radius: 14px;
}
.about-project-section::before {
left: 8px;
}
.about-question-heading {
padding: 20px 14px;
font-size: clamp(21px, 6.4vw, 27px);
}
}
/* Ver 114: all three messages integrated into one compact BOX */
.about-banner-section {
width: min(1240px, 92%);
margin: 30px auto 26px;
}
.about-banner-card {
padding: clamp(30px, 4.2vw, 52px) clamp(28px, 4.6vw, 58px);
background: rgba(255, 255, 255, .98);
border: 1px solid rgba(15, 115, 164, .15);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: 0 16px 44px rgba(14, 78, 118, .13);
}
.about-core-message {
max-width: 1100px;
margin: 0 auto;
}
.about-message-item {
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.about-message-item + .about-message-item {
margin-top: 26px;
padding-top: 0;
border-top: 0;
}
.about-message-item::before,
.about-message-item + .about-message-item::before {
display: none;
}
.about-message-heading {
margin: 0 0 12px;
color: var(--navy);
font-size: clamp(23px, 2.25vw, 34px);
font-weight: 800;
line-height: 1.42;
letter-spacing: .005em;
}
.about-message-heading::before {
content: "◎";
margin-right: .35em;
color: var(--cyan);
}
.about-message-item p {
margin: 0;
color: #294d66;
font-size: clamp(16px, 1.3vw, 19px);
font-weight: 500;
line-height: 1.9;
text-align: justify;
text-justify: inter-ideograph;
}
.about-message-item p + p {
margin-top: 10px;
}
.about-final-heading {
margin: 0;
padding: 0;
color: #0a466b;
font-size: clamp(23px, 2.3vw, 35px);
text-align: left;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
@media (max-width: 760px) {
.about-banner-section {
width: calc(100% - 24px);
margin-top: 20px;
margin-bottom: 20px;
}
.about-banner-card {
padding: 26px 18px;
border-top-width: 6px;
border-radius: 17px;
}
.about-message-item + .about-message-item {
margin-top: 22px;
}
.about-message-heading,
.about-final-heading {
margin-bottom: 10px;
font-size: clamp(21px, 6vw, 27px);
line-height: 1.48;
}
.about-message-item p {
font-size: 15.5px;
line-height: 1.85;
text-align: left;
}
}
/* Ver 115: ABOUT本文を太字にし、行間を少し詰める */
.about-message-item p {
font-weight: 700;
line-height: 1.72;
}
.about-message-item p + p {
margin-top: 8px;
}
@media (max-width: 760px) {
.about-message-item p {
line-height: 1.72;
}
}
/* Ver 116: LECTURE GUIDEの7項目をABOUT小見出しと同じ書体・サイズ・◎で表示 */
.lecture-guide-topic-list {
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.lecture-guide-topic-list li {
position: relative;
margin: 0;
padding: 0 0 0 1.55em;
color: var(--navy);
font-size: clamp(23px, 2.25vw, 34px);
font-weight: 800;
line-height: 1.42;
letter-spacing: .005em;
}
.lecture-guide-topic-list li + li {
margin-top: 15px;
}
.lecture-guide-topic-list li::before {
content: "◎";
position: absolute;
top: 0;
left: 0;
color: var(--cyan);
}
@media (max-width: 760px) {
.lecture-guide-topic-list {
margin-top: 20px;
}
.lecture-guide-topic-list li {
padding-left: 1.45em;
font-size: clamp(21px, 6vw, 27px);
line-height: 1.48;
}
.lecture-guide-topic-list li + li {
margin-top: 13px;
}
}
/* Ver 118: ABOUT見出し復帰 + 左2BOX縦置き + 右チラシ */
.about-section-kicker {
margin: 0 0 22px;
color: var(--blue);
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.1;
}
.lecture-flyer-section {
width: min(1240px, 92%);
margin: 0 auto;
padding: 12px 0 66px;
}
.lecture-flyer-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.lecture-info-column {
display: grid;
gap: 22px;
min-width: 0;
}
.lecture-half-card {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.lecture-guide-card {
padding: clamp(26px, 3vw, 38px);
}
.lecture-guide-card h2 {
margin-bottom: 16px;
}
.lecture-guide-card .points {
margin: 0;
}
.lecture-guide-card .points li {
margin: 8px 0;
line-height: 1.42;
}
.lecture-info-column .concept-card {
max-width: none;
margin: 0;
}
.lecture-info-column .concept-card figcaption {
gap: 12px;
padding: clamp(26px, 3vw, 38px);
}
.lecture-info-column .concept-card strong {
line-height: 1.35;
}
.lecture-info-column .concept-card p {
font-weight: 600;
line-height: 1.62;
}
.flyer-column {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.flyer-preview-card {
overflow: hidden;
padding: 14px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(15,115,164,.18);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: var(--shadow);
}
.flyer-preview-link {
display: block;
}
.flyer-preview-image {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.flyer-download-button {
display: block;
width: 100%;
box-sizing: border-box;
padding: 16px 20px;
color: #fff;
font-size: 17px;
font-weight: 800;
line-height: 1.4;
text-align: center;
text-decoration: none;
background: linear-gradient(135deg, var(--blue), #078bc2);
border-radius: 999px;
box-shadow: 0 10px 26px rgba(0, 102, 153, .20);
}
.flyer-download-button:hover,
.flyer-download-button:focus-visible {
transform: translateY(-1px);
filter: brightness(1.04);
}
@media (max-width: 900px) {
.lecture-flyer-layout {
grid-template-columns: 1fr;
}
.flyer-column {
width: min(100%, 620px);
margin: 0 auto;
}
}
@media (max-width: 620px) {
.about-section-kicker {
margin-bottom: 18px;
font-size: 12px;
}
.lecture-flyer-section {
width: calc(100% - 24px);
padding: 8px 0 46px;
}
.lecture-flyer-layout,
.lecture-info-column {
gap: 18px;
}
.lecture-guide-card,
.lecture-info-column .concept-card figcaption {
padding: 24px 18px;
}
.lecture-guide-card .points li {
margin: 7px 0;
line-height: 1.4;
}
.lecture-info-column .concept-card p {
line-height: 1.58;
}
.flyer-preview-card {
padding: 10px;
border-top-width: 6px;
border-radius: 17px;
}
.flyer-download-button {
padding: 14px 16px;
font-size: 16px;
}
}
/* Ver 119: flyer left / information right, matching event-card 4:6 ratio */
.lecture-flyer-section {
width: min(1180px, 94%);
margin: 0 auto;
padding: 16px 16px 66px;
box-sizing: border-box;
}
.lecture-flyer-layout {
display: grid;
grid-template-columns: minmax(340px, .88fr) minmax(510px, 1.35fr);
gap: 16px;
align-items: start;
}
.flyer-column {
grid-column: 1;
}
.lecture-info-column {
grid-column: 2;
}
.lecture-info-column .concept-card strong {
display: block;
white-space: nowrap;
font-size: clamp(18px, 1.65vw, 23px);
line-height: 1.3;
letter-spacing: 0;
word-break: keep-all;
overflow-wrap: normal;
}
@media (max-width: 980px) {
.lecture-flyer-layout {
grid-template-columns: minmax(280px, .88fr) minmax(410px, 1.35fr);
}
.lecture-info-column .concept-card strong {
font-size: clamp(16px, 1.65vw, 20px);
}
}
@media (max-width: 820px) {
.lecture-flyer-layout {
grid-template-columns: 1fr;
}
.flyer-column,
.lecture-info-column {
grid-column: 1;
width: 100%;
}
.flyer-column {
order: 1;
max-width: 620px;
margin: 0 auto;
}
.lecture-info-column {
order: 2;
}
.lecture-info-column .concept-card strong {
white-space: normal;
font-size: clamp(19px, 4.8vw, 23px);
}
}
@media (max-width: 620px) {
.lecture-flyer-section {
width: calc(100% - 24px);
padding: 8px 0 46px;
}
}
/* Ver 120: 上段Speaker BOXと下段Speaker Profileの内容を総入れ替え */
.speaker-profile-upper {
display: block;
padding: clamp(18px, 2.2vw, 28px);
}
.speaker-profile-upper .speaker-profile-heading {
grid-template-columns: 112px minmax(0, 1fr);
gap: 16px;
}
.speaker-profile-upper .speaker-profile-heading img {
width: 112px;
height: 145px;
}
.speaker-profile-upper .speaker-profile-heading h2 {
font-size: clamp(22px, 2vw, 29px);
}
.speaker-profile-upper .speaker-profile-name {
font-size: clamp(21px, 2vw, 27px);
}
.speaker-profile-upper .speaker-profile-role {
font-size: 11px;
line-height: 1.55;
}
.speaker-profile-upper .speaker-profile-copy {
margin-top: 18px;
}
.speaker-profile-upper .speaker-profile-copy p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.72;
}
.speaker-profile-upper .profile-button-more {
padding: 9px 16px;
font-size: 13px;
}
.speaker-summary-lower {
grid-template-columns: 1fr;
align-items: start;
}
.speaker-summary-lower .speaker-summary-copy {
max-width: 900px;
}
.speaker-summary-lower .speaker-name {
font-size: clamp(23px, 2.5vw, 32px);
}
.speaker-summary-lower .speaker-role {
font-size: 13px;
line-height: 1.7;
}
.speaker-summary-lower .speaker-bio {
margin-top: 16px;
font-size: 16px;
line-height: 1.85;
}
@media (max-width: 760px) {
.speaker-profile-upper .speaker-profile-heading {
grid-template-columns: 95px minmax(0, 1fr);
gap: 14px;
}
.speaker-profile-upper .speaker-profile-heading img {
width: 95px;
height: 126px;
}
.speaker-profile-upper .speaker-profile-copy p {
font-size: 13px;
line-height: 1.68;
}
}
/* Ver 121: Lecture/ICU title and Speaker profile adjustments */
.lecture-guide-card .lecture-guide-main-title {
font-size: clamp(23px, 2.25vw, 34px);
}
.lecture-info-column .concept-card #icu-title {
white-space: nowrap;
}
.lecture-info-column .concept-card .icu-title-main {
font-size: 1.12em;
}
.lecture-info-column .concept-card .icu-title-question {
font-size: 1em;
}
.speaker-profile-name-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
margin-top: 8px;
}
.speaker-profile-upper .speaker-profile-name-row .speaker-profile-name {
margin: 0;
}
.speaker-profile-upper .speaker-profile-qualification {
margin: 0;
color: #335a73;
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 700;
line-height: 1.45;
}
.speaker-profile-upper .speaker-profile-affiliations {
display: block;
margin: 10px 0 0;
color: #244d68;
font-size: clamp(14px, 1.3vw, 18px);
font-weight: 700;
line-height: 1.58;
}
.speaker-profile-upper .speaker-profile-affiliations span {
display: block;
}
@media (max-width: 900px) {
.lecture-info-column .concept-card #icu-title {
white-space: normal;
}
}
@media (max-width: 760px) {
.lecture-guide-card .lecture-guide-main-title {
font-size: clamp(21px, 6vw, 27px);
}
.speaker-profile-name-row {
gap: 4px 10px;
}
.speaker-profile-upper .speaker-profile-qualification {
font-size: 15px;
}
.speaker-profile-upper .speaker-profile-affiliations {
font-size: 14px;
line-height: 1.55;
}
}
/* Ver 122: 開催概要のアクセス表示と講演時間を調整 */
.event-detail-row {
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 12px;
}
.event-label {
min-width: 0;
white-space: nowrap;
}
.event-datetime .event-session {
padding-left: 0;
line-height: 1.55;
}
@media (max-width: 620px) {
.event-detail-row {
column-gap: 9px;
}
.event-datetime .event-session {
font-size: 14px;
line-height: 1.5;
}
}
/* Ver 123: 開催概要の部名・会場名を強調し、住所を追加 */
.event-session .session-name {
font-weight: 800;
}
.event-value .venue-name {
color: inherit;
font-weight: 800;
}
.event-address-row .event-value {
line-height: 1.55;
}
@media (max-width: 620px) {
.event-address-row .event-value {
font-size: 14px;
line-height: 1.5;
}
}
/* Ver 124: 開催概要／講師を5:5、開催概要内の配置を整理 */
.top-info-panel {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.event-access-value {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.event-access-value p {
margin: 0;
}
.event-access-value .map-link-button {
margin: 0;
}
.entry-row {
justify-content: center;
}
@media (max-width: 900px) {
.top-info-panel {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.top-info-panel {
grid-template-columns: 1fr;
}
}
/* Ver 125: 開催概要と講師プロフィールの追加修正 */
.event-access-inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.event-access-inline p {
margin: 0;
}
.event-access-inline .map-link-button {
margin: 0;
flex: 0 0 auto;
}
.event-capacity-value span {
display: block;
}
.event-capacity-value span + span {
margin-top: 4px;
}
.speaker-profile-upper .speaker-profile-affiliations span {
display: block;
}
.speaker-profile-upper .speaker-profile-copy p {
margin: 0 0 14px;
}
@media (max-width: 620px) {
.event-access-inline {
align-items: flex-start;
}
.event-capacity-value span + span {
margin-top: 6px;
}
}
/* Ver 126: 講師見出しの高さを開催概要とそろえ、本文を詰める */
.speaker-profile-upper {
display: block;
padding: 4px 4px 2px;
background: transparent;
border: 0;
border-radius: 0;
}
.speaker-card-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 15px;
margin-bottom: 8px;
}
.speaker-card-heading .section-kicker {
margin: 0;
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.1;
}
.speaker-card-heading h2 {
margin: 2px 0 0;
color: var(--navy);
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.1;
}
.speaker-profile-body {
padding: clamp(18px, 2.2vw, 28px);
background: linear-gradient(145deg, #eaf8ff, #fff);
border: 1px solid #d5eaf5;
border-radius: 13px;
}
.speaker-profile-body .speaker-profile-heading {
grid-template-columns: 112px minmax(0, 1fr);
gap: 16px;
}
.speaker-profile-body .speaker-profile-heading img {
width: 112px;
height: 145px;
}
.speaker-profile-upper .speaker-profile-affiliations {
margin-top: 8px;
font-size: clamp(14px, 1.22vw, 17px);
line-height: 1.48;
}
.speaker-profile-upper .speaker-profile-affiliations span {
display: block;
}
.speaker-profile-upper .speaker-profile-copy {
margin-top: 16px;
}
.speaker-profile-upper .speaker-profile-copy .speaker-profile-continuous {
margin: 0;
font-size: 14px;
line-height: 1.62;
}
.speaker-profile-upper .profile-button-more {
margin-top: 16px;
}
@media (max-width: 760px) {
.speaker-profile-body {
padding: 18px;
}
.speaker-profile-body .speaker-profile-heading {
grid-template-columns: 95px minmax(0, 1fr);
gap: 14px;
}
.speaker-profile-body .speaker-profile-heading img {
width: 95px;
height: 126px;
}
.speaker-profile-upper .speaker-profile-affiliations {
font-size: 13px;
line-height: 1.48;
}
.speaker-profile-upper .speaker-profile-copy .speaker-profile-continuous {
font-size: 13px;
line-height: 1.58;
}
}
/* Ver 127: 開催概要の文字拡大・アクセス地図追加・プロフィール修正 */
.event-emphasis-row > .event-label {
font-size: 18px;
}
.event-datetime .event-date {
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.5;
}
.event-datetime .event-session {
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.5;
}
.venue-emphasis-row .venue-name {
font-size: clamp(17px, 1.45vw, 20px);
line-height: 1.45;
}
.event-access-map-layout {
display: block;
}
.event-access-map-layout .access-description {
margin: 0 0 10px;
}
.access-map-row {
display: flex;
align-items: center;
gap: 12px;
}
.access-map-image {
display: block;
width: min(230px, 68%);
height: auto;
border: 1px solid rgba(16, 71, 113, .20);
border-radius: 8px;
}
.access-map-button {
flex: 0 0 auto;
white-space: nowrap;
}
.speaker-profile-upper .speaker-profile-copy .speaker-profile-continuous {
line-height: 1.58;
}
@media (max-width: 760px) {
.event-emphasis-row > .event-label {
font-size: 17px;
}
.event-datetime .event-date {
font-size: 18px;
}
.event-datetime .event-session {
font-size: 15px;
}
.venue-emphasis-row .venue-name {
font-size: 17px;
}
.access-map-row {
align-items: flex-start;
flex-wrap: wrap;
}
.access-map-image {
width: min(260px, 100%);
}
}
/* Ver 128: 講師プロフィールへ専門領域を追加 */
.speaker-profile-upper .speaker-expertise {
margin: 14px 0 0;
color: #244d68;
font-size: 14px;
font-weight: 600;
line-height: 1.55;
}
.speaker-profile-upper .speaker-expertise strong {
color: var(--navy);
font-weight: 800;
}
.speaker-profile-upper .speaker-expertise + .profile-button-more {
margin-top: 14px;
}
@media (max-width: 760px) {
.speaker-profile-upper .speaker-expertise {
font-size: 13px;
line-height: 1.5;
}
}
/* Ver 129: ABOUT第2項修正 + ICU説明BOXを講演対象者BOXへ変更 */
.about-core-message .about-message-item p {
text-align: left;
}
.audience-card {
display: block;
}
.audience-card-content {
padding: clamp(26px, 3vw, 38px);
}
.audience-card-title {
margin: 0;
color: #075784;
font-size: clamp(22px, 2vw, 29px);
font-weight: 800;
line-height: 1.42;
}
.audience-list {
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.audience-list li {
position: relative;
margin: 0;
padding-left: 1.4em;
color: #34546c;
font-size: 15px;
font-weight: 700;
line-height: 1.62;
}
.audience-list li + li {
margin-top: 10px;
}
.audience-list li::before {
content: "●";
position: absolute;
left: 0;
top: 0;
color: var(--cyan);
font-size: .78em;
}
@media (max-width: 760px) {
.audience-card-content {
padding: 24px 18px;
}
.audience-card-title {
font-size: clamp(21px, 5.8vw, 27px);
}
.audience-list li {
font-size: 15px;
line-height: 1.58;
}
}
/* Ver 130: 講演対象者の項目と初心者向け注記を更新 */
.audience-note {
margin: 18px 0 0;
padding-top: 14px;
color: #0a5278;
font-size: 15px;
font-weight: 800;
line-height: 1.55;
border-top: 1px solid rgba(0, 157, 196, .18);
}
@media (max-width: 760px) {
.audience-note {
margin-top: 16px;
padding-top: 12px;
font-size: 14px;
}
}
/* Ver 131: 対象者最終案・LECTURE GUIDEより前へ配置 */
.audience-list li {
line-height: 1.58;
}
.audience-note {
line-height: 1.5;
}
/* Ver 134: 英語見出し統一・ヘッダー拡大・固定表示 */
html {
scroll-behavior: smooth;
scroll-padding-top: 92px;
}
.site-header {
position: sticky !important;
top: 0;
z-index: 1000;
min-height: 74px;
overflow: visible;
}
.brand {
font-size: 15.5px;
}
.brand small {
font-size: 13px;
}
.brand-mark {
width: 46px;
height: 46px;
font-size: 14px;
}
.site-nav {
gap: 15px;
}
.site-nav a {
font-size: 14.5px;
}
#about,
#audience,
#flyers,
#event,
#speaker,
#entry {
scroll-margin-top: 94px;
}
.audience-kicker {
margin: 0 0 8px;
color: var(--blue);
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.1;
}
.flyer-section-heading {
margin: 0 0 12px;
padding: 0 4px;
}
.flyer-section-heading .section-kicker {
margin: 0 0 5px;
color: var(--blue);
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.1;
}
.flyer-section-heading h2 {
margin: 0;
color: var(--navy);
font-size: clamp(24px, 2.5vw, 32px);
line-height: 1.2;
}
@media (max-width: 980px) {
.site-nav {
gap: 9px;
}
.site-nav a {
font-size: 12.5px;
}
}
@media (max-width: 620px) {
html {
scroll-padding-top: 118px;
}
.site-header {
min-height: 102px;
overflow: visible;
}
.brand {
font-size: 13px;
}
.brand small {
font-size: 11.5px;
}
.site-nav {
justify-content: flex-start;
gap: 5px;
overflow-x: auto;
padding-bottom: 3px;
}
.site-nav a {
font-size: 11.5px;
}
#about,
#audience,
#flyers,
#event,
#speaker,
#entry {
scroll-margin-top: 122px;
}
.audience-kicker,
.flyer-section-heading .section-kicker {
font-size: 12px;
}
}
/* Ver 135: 対象者/講演案内、開催概要/講師、2種チラシ、リンク集 */
.audience-guide-section {
width: min(1180px, 94%);
margin: 0 auto;
padding: 16px 16px 58px;
box-sizing: border-box;
}
.audience-guide-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: stretch;
}
.audience-guide-grid > article {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.audience-guide-grid .lecture-guide-card {
margin: 0;
}
.event-flyers-section {
width: min(1180px, 94%);
margin: 0 auto;
padding: 18px 16px 64px;
box-sizing: border-box;
}
.section-heading-centered {
max-width: 880px;
margin: 0 auto 26px;
text-align: center;
}
.section-heading-centered .section-kicker {
margin: 0 0 7px;
color: var(--blue);
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
}
.section-heading-centered h2 {
margin: 0;
color: var(--navy);
font-size: clamp(28px, 3vw, 40px);
}
.section-heading-centered > p:last-child {
margin: 13px 0 0;
color: #45657a;
font-size: 16px;
line-height: 1.7;
}
.two-flyer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.two-flyer-card {
padding: 20px;
background: rgba(255, 255, 255, .98);
border: 1px solid rgba(15, 115, 164, .17);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: var(--shadow);
}
.flyer-edition-label {
margin: 0;
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
line-height: 1.2;
}
.two-flyer-card h3 {
margin: 6px 0 15px;
color: var(--navy);
font-size: clamp(22px, 2.25vw, 30px);
line-height: 1.3;
}
.two-flyer-preview-link {
display: block;
overflow: hidden;
background: #f7fbfd;
border: 1px solid rgba(20, 80, 120, .15);
border-radius: 13px;
}
.two-flyer-image {
display: block;
width: 100%;
height: auto;
}
.two-flyer-card .flyer-download-button {
margin-top: 16px;
}
.related-links-section {
width: min(1180px, 94%);
margin: 0 auto;
padding: 0 16px 70px;
box-sizing: border-box;
}
.related-links-box {
padding: clamp(28px, 4vw, 46px);
background: linear-gradient(135deg, rgba(238, 249, 253, .96), rgba(255, 255, 255, .98));
border: 1px solid rgba(15, 115, 164, .17);
border-top: 7px solid var(--cyan);
border-radius: 22px;
box-shadow: var(--shadow);
}
.related-links-box .section-kicker {
margin: 0 0 7px;
color: var(--blue);
font-size: 13px;
font-weight: 800;
letter-spacing: .16em;
}
.related-links-box h2 {
margin: 0 0 22px;
color: var(--navy);
font-size: clamp(27px, 3vw, 38px);
}
.related-links-list {
display: grid;
gap: 12px;
}
.related-link-card {
position: relative;
display: grid;
gap: 5px;
padding: 17px 48px 17px 19px;
color: inherit;
text-decoration: none;
background: rgba(255, 255, 255, .92);
border: 1px solid rgba(21, 105, 150, .15);
border-radius: 13px;
transition: transform .18s ease, box-shadow .18s ease;
}
.related-link-card:hover,
.related-link-card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15, 85, 125, .12);
}
.related-link-card strong {
color: var(--navy);
font-size: 17px;
line-height: 1.45;
}
.related-link-card > span:not(.related-link-arrow) {
color: #527084;
font-size: 14px;
line-height: 1.55;
}
.related-link-arrow {
position: absolute;
top: 50%;
right: 20px;
color: var(--blue);
font-size: 24px;
font-weight: 800;
transform: translateY(-50%);
}
#lecture-description,
#flyers,
#links {
scroll-margin-top: 94px;
}
@media (max-width: 820px) {
.audience-guide-grid,
.two-flyer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.audience-guide-section,
.event-flyers-section,
.related-links-section {
width: calc(100% - 24px);
padding-right: 0;
padding-left: 0;
}
.audience-guide-grid,
.two-flyer-grid {
gap: 18px;
}
.two-flyer-card {
padding: 15px;
border-top-width: 6px;
border-radius: 17px;
}
.section-heading-centered {
margin-bottom: 20px;
}
.related-links-box {
padding: 25px 18px;
border-top-width: 6px;
border-radius: 17px;
}
.related-link-card {
padding: 15px 42px 15px 15px;
}
#lecture-description,
#flyers,
#links {
scroll-margin-top: 122px;
}
}
/* Ver 136: 2種チラシの高さ統一・リンク集を3行へ簡潔化 */
.two-flyer-grid {
align-items: stretch;
}
.two-flyer-card {
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.two-flyer-preview-link {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
aspect-ratio: 1055 / 1491;
padding: 0;
background: #f7fbfd;
box-sizing: border-box;
}
.two-flyer-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.two-flyer-card .flyer-download-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
margin-top: 16px;
padding: 12px 20px;
line-height: 1.35;
box-sizing: border-box;
}
.related-links-compact {
display: grid;
gap: 0;
}
.related-link-line {
display: block;
padding: 14px 2px;
color: var(--navy);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
text-decoration: none;
border-bottom: 1px solid rgba(21, 105, 150, .16);
}
.related-link-line:first-child {
border-top: 1px solid rgba(21, 105, 150, .16);
}
.related-link-line::after {
content: " ↗";
color: var(--blue);
font-weight: 800;
}
.related-link-line:hover,
.related-link-line:focus-visible {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 4px;
}
@media (max-width: 620px) {
.two-flyer-card .flyer-download-button {
min-height: 52px;
padding: 11px 15px;
}
.related-link-line {
padding: 13px 0;
font-size: 15.5px;
}
}
/* Ver 137: 中村研究室リンク更新・外部リンク動作案内 */
.external-link-note {
margin: 14px 0 0;
color: #5b7282;
font-size: 13px;
line-height: 1.55;
}
@media (max-width: 620px) {
.external-link-note {
font-size: 12.5px;
}
}
/* Ver 138: 第31稿 UIレビュー反映版 */
:root {
--heading-english: #6e8ea2;
--heading-japanese: #103b5d;
--heading-accent: #00a9d9;
--cta-coral: #ed6037;
--cta-coral-dark: #c94324;
}
/* 全セクションの英語見出し・日本語タイトルを統一 */
.section-heading-block {
position: relative;
margin: 0 0 24px;
padding: 2px 0 2px 18px;
text-align: left;
}
.section-heading-block::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
min-height: 50px;
background: linear-gradient(180deg, var(--heading-accent), #78dce9);
border-radius: 999px;
}
.section-heading-block .section-kicker,
.event-heading .section-heading-block .section-kicker,
.event-heading .section-heading-block p {
margin: 0 0 6px;
color: var(--heading-english);
font-size: 13px;
font-weight: 800;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
}
.section-heading-block h2,
.event-heading .section-heading-block h2,
.speaker-card-heading .section-heading-block h2,
.section-heading-centered .section-heading-block h2,
.related-links-box .section-heading-block h2 {
margin: 0;
color: var(--heading-japanese);
font-size: clamp(28px, 2.65vw, 34px);
font-weight: 800;
line-height: 1.28;
letter-spacing: .01em;
}
.about-main-heading {
margin-bottom: 30px;
}
.audience-card-content,
.lecture-guide-card,
.event-card,
.speaker-profile-upper,
.section-heading-centered,
.related-links-box {
text-align: left;
}
.section-heading-centered {
max-width: none;
margin: 0 0 26px;
}
.section-heading-centered > p:last-child {
margin: 13px 0 0 18px;
max-width: 780px;
text-align: left;
}
/* ABOUTを短く読ませる */
.about-message-item p {
font-weight: 600;
line-height: 1.72;
}
.about-message-item p strong {
color: #075f93;
font-weight: 900;
}
/* 予約CTA：下線を消し、最重要ボタンとして強調 */
.primary-button,
.booking-cta,
.nav-cta,
.flyer-download-button,
.profile-button,
.secondary-button,
.map-link-button {
text-decoration: none !important;
}
.booking-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 13px 30px;
color: #fff;
background: linear-gradient(135deg, #ff7a45, var(--cta-coral) 48%, var(--cta-coral-dark));
border: 2px solid rgba(255,255,255,.75);
box-shadow: 0 14px 30px rgba(201, 67, 36, .32);
font-size: 17px;
letter-spacing: .02em;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.booking-cta:hover,
.booking-cta:focus-visible {
color: #fff;
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow: 0 17px 35px rgba(201, 67, 36, .38);
outline: 3px solid rgba(255, 187, 140, .55);
outline-offset: 3px;
}
.site-nav .nav-cta {
color: #3b2700;
background: linear-gradient(135deg, #ffe08b, #ffc94e);
box-shadow: 0 5px 14px rgba(255, 201, 78, .23);
}
/* 主催者表記 */
.event-organizer-row {
margin-top: 4px;
padding-top: 7px;
}
.event-organizer-value span {
display: block;
font-weight: 700;
line-height: 1.5;
}
.event-organizer-value span:first-child {
color: var(--navy);
font-weight: 800;
}
/* タブレット：2カラムのままでも読みやすい文字サイズ */
@media (min-width: 821px) and (max-width: 1024px) {
.section-heading-block h2,
.event-heading .section-heading-block h2,
.speaker-card-heading .section-heading-block h2,
.section-heading-centered .section-heading-block h2,
.related-links-box .section-heading-block h2 {
font-size: clamp(24px, 2.8vw, 29px);
}
.audience-guide-grid,
.top-info-panel,
.two-flyer-grid {
gap: 16px;
}
}
@media (max-width: 820px) {
.section-heading-block {
margin-bottom: 20px;
}
.section-heading-block h2,
.event-heading .section-heading-block h2,
.speaker-card-heading .section-heading-block h2,
.section-heading-centered .section-heading-block h2,
.related-links-box .section-heading-block h2 {
font-size: clamp(25px, 5.2vw, 31px);
}
.top-info-panel {
margin-top: 28px;
}
}
@media (max-width: 620px) {
.section-heading-block {
padding-left: 14px;
margin-bottom: 18px;
}
.section-heading-block::before {
width: 3px;
min-height: 44px;
}
.section-heading-block .section-kicker,
.event-heading .section-heading-block .section-kicker,
.event-heading .section-heading-block p {
margin-bottom: 5px;
font-size: 11.5px;
letter-spacing: .14em;
}
.section-heading-block h2,
.event-heading .section-heading-block h2,
.speaker-card-heading .section-heading-block h2,
.section-heading-centered .section-heading-block h2,
.related-links-box .section-heading-block h2 {
font-size: clamp(23px, 6.5vw, 28px);
line-height: 1.32;
}
.section-heading-centered > p:last-child {
margin-left: 14px;
font-size: 15px;
}
.about-message-item p {
font-size: 15px;
line-height: 1.68;
}
.booking-cta {
width: 100%;
min-width: 0;
min-height: 52px;
padding: 12px 15px;
font-size: 16px;
}
.event-organizer-value span {
font-size: 14px;
}
}
/* Ver 138b: mobile/tablet safety overrides after responsive precheck */
@media (max-width: 820px) {
.top-info-panel,
.audience-guide-grid,
.two-flyer-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.event-card,
.speaker-profile-upper,
.audience-card,
.lecture-guide-card,
.two-flyer-card {
min-width: 0 !important;
max-width: 100% !important;
}
}
@media (max-width: 620px) {
#entry,
.entry-row {
width: 100% !important;
min-width: 0 !important;
}
#entry .booking-cta,
.entry-row .primary-button {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
}
}
/* Ver 138c: iPhoneのアクセス地図・Googleマップボタン */
@media (max-width: 620px) {
.access-map-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 9px !important;
width: 100% !important;
}
.access-map-image {
width: 100% !important;
max-width: 280px !important;
justify-self: start;
}
.access-map-button {
width: 100% !important;
max-width: 280px !important;
min-height: 42px;
box-sizing: border-box;
}
}
/* Ver 139: ヘッダーを常時表示（iPhone Safariを含む） */
:root {
--site-header-height: 74px;
}
html {
scroll-padding-top: calc(var(--site-header-height) + 12px) !important;
}
body {
padding-top: var(--site-header-height);
}
.site-header {
position: fixed !important;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 5000;
min-height: 74px;
height: auto;
overflow: visible !important;
box-sizing: border-box;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
#top,
#about,
#audience,
#lecture-description,
#event,
#speaker,
#flyers,
#links,
#entry,
#speaker-profile,
#event-title {
scroll-margin-top: calc(var(--site-header-height) + 12px) !important;
}
@media (max-width: 620px) {
:root {
--site-header-height: 104px;
}
.site-header {
min-height: 104px;
}
.site-nav {
display: grid;
grid-template-columns: repeat(6, max-content);
justify-content: center;
align-items: center;
width: 100%;
gap: 2px;
overflow: visible;
padding: 4px 0 1px;
white-space: nowrap;
}
.site-nav a {
min-width: 0;
padding: 4px 3px;
font-size: clamp(9.6px, 2.75vw, 11px);
line-height: 1.2;
}
.site-nav .nav-cta {
padding: 5px 7px;
}
}
@media (max-width: 360px) {
.site-nav {
gap: 1px;
}
.site-nav a {
padding-right: 2px;
padding-left: 2px;
font-size: 9.2px;
}
.site-nav .nav-cta {
padding-right: 5px;
padding-left: 5px;
}
}
/* Ver 140: 固定ヘッダーでページ内リンク先の見出しが隠れないよう補正 */
:root {
--anchor-clearance: 20px;
}
html {
scroll-padding-top: calc(var(--site-header-height) + var(--anchor-clearance)) !important;
}
#top,
#about,
#audience,
#lecture-description,
#event,
#speaker,
#flyers,
#links,
#entry,
#speaker-profile,
#event-title {
scroll-margin-top: calc(var(--site-header-height) + var(--anchor-clearance)) !important;
}
@media (max-width: 620px) {
:root {
--anchor-clearance: 16px;
}
}
/* Ver 141: 固定ヘッダーに「チラシ」ボタンを追加 */
@media (max-width: 620px) {
.site-nav {
grid-template-columns: repeat(7, max-content);
}
.site-nav a {
padding-right: 2.5px;
padding-left: 2.5px;
font-size: clamp(9.2px, 2.55vw, 10.8px);
letter-spacing: -0.025em;
}
.site-nav .nav-cta {
padding-right: 6px;
padding-left: 6px;
}
}
@media (max-width: 360px) {
.site-nav a {
padding-right: 1.5px;
padding-left: 1.5px;
font-size: 8.8px;
}
.site-nav .nav-cta {
padding-right: 4px;
padding-left: 4px;
}
}
/* Ver 143: 参加費の公募寄付金扱いを明記 */
.event-fee .fee-note {
display: block;
margin-top: 5px;
color: #34546c;
font-size: 0.9em;
font-weight: 700;
line-height: 1.55;
}
@media (max-width: 620px) {
.event-fee .fee-note {
margin-top: 6px;
font-size: 0.92em;
line-height: 1.6;
}
}
/* Ver 144: smartphone first-view improvement */
@media (max-width: 620px) {
.site-header {
height: 88px;
padding: 8px 14px;
gap: 8px;
}
.brand {
gap: 8px;
font-size: 12px;
line-height: 1.25;
}
.brand-mark {
width: 42px;
height: 42px;
flex: 0 0 42px;
}
.site-nav {
display: block;
}
.site-nav a:not(.nav-cta) {
display: none;
}
.site-nav .nav-cta {
display: inline-block;
padding: 9px 14px;
font-size: 13px;
white-space: nowrap;
}
.hero {
min-height: 520px;
align-items: center;
}
.hero-image {
object-fit: cover;
object-position: 68% center;
}
.hero-shade {
background:
linear-gradient(
90deg,
rgba(238,248,255,.94) 0%,
rgba(238,248,255,.78) 46%,
rgba(238,248,255,.38) 78%,
rgba(238,248,255,.12) 100%
);
}
.hero-content {
width: calc(100% - 28px);
margin: 0 auto;
padding: 22px 18px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.75);
border-radius: 18px;
backdrop-filter: blur(3px);
box-shadow: 0 12px 34px rgba(4,43,82,.12);
}
.eyebrow {
font-size: 16px;
line-height: 1.45;
}
.status {
margin-bottom: 9px;
}
.hero h1 {
font-size: clamp(33px, 9vw, 42px);
line-height: 1.15;
letter-spacing: -0.02em;
}
}
/* Ver 145: hero event information and booking button */
.hero-event-info {
margin-top: 18px;
color: var(--navy);
font-size: 16px;
line-height: 1.6;
}
.hero-event-info p {
margin: 2px 0;
}
.hero-booking-button {
display: inline-block;
margin-top: 16px;
padding: 12px 24px;
color: var(--navy);
background: var(--sun);
border-radius: 999px;
text-decoration: none;
font-weight: 800;
box-shadow: 0 8px 22px rgba(4,43,82,.18);
}
@media (max-width: 620px) {
.hero-event-info {
margin-top: 17px;
padding-top: 13px;
border-top: 1px solid rgba(7,95,147,.22);
font-size: 14px;
line-height: 1.55;
}
.hero-booking-button {
display: block;
width: 100%;
margin-top: 16px;
padding: 13px 14px;
text-align: center;
font-size: 16px;
}
}
/* Ver 146: mobile title + navigation refinement */
@media (max-width: 620px) {
/* タイトルを2行できれいに固定 */
.hero h1 {
font-size: clamp(28px, 7.7vw, 32px);
line-height: 1.2;
letter-spacing: -0.035em;
}
.hero h1 strong {
font-size: 1.28em;
}
/* ヘッダーを2段構成に戻す */
.site-header {
height: auto;
min-height: 112px;
padding: 9px 12px 7px;
flex-wrap: wrap;
align-content: center;
}
.brand {
flex: 1 1 auto;
}
.site-nav {
order: 3;
display: flex;
width: 100%;
gap: 11px;
overflow-x: auto;
padding: 3px 2px 2px;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.site-nav a:not(.nav-cta) {
display: inline-block;
flex: 0 0 auto;
font-size: 11px;
}
.site-nav .nav-cta {
display: inline-block;
flex: 0 0 auto;
padding: 6px 12px;
font-size: 11px;
}
}
/* Ver 146: mobile title + navigation refinement */
@media (max-width: 620px) {
/* タイトルを2行できれいに固定 */
.hero h1 {
font-size: clamp(28px, 7.7vw, 32px);
line-height: 1.2;
letter-spacing: -0.035em;
}
.hero h1 strong {
font-size: 1.28em;
}
/* ヘッダーを2段構成に戻す */
.site-header {
height: auto;
min-height: 112px;
padding: 9px 12px 7px;
flex-wrap: wrap;
align-content: center;
}
.brand {
flex: 1 1 auto;
}
.site-nav {
order: 3;
display: flex;
width: 100%;
gap: 11px;
overflow-x: auto;
padding: 3px 2px 2px;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.site-nav a:not(.nav-cta) {
display: inline-block;
flex: 0 0 auto;
font-size: 11px;
}
.site-nav .nav-cta {
display: inline-block;
flex: 0 0 auto;
padding: 6px 12px;
font-size: 11px;
}
}
/* Ver 147: mobile title one-line + full navigation */
@media (max-width: 620px) {
/* タイトルは必ず2行だけにする */
.hero h1 {
font-size: 27px !important;
line-height: 1.2 !important;
letter-spacing: -0.05em !important;
white-space: nowrap !important;
}
.hero h1 strong {
display: inline;
font-size: 1.18em !important;
white-space: nowrap !important;
}
/* ナビを横スクロールさせず全部表示 */
.site-nav {
display: flex !important;
width: 100%;
gap: 6px;
justify-content: space-between;
overflow: visible;
white-space: nowrap;
}
.site-nav a:not(.nav-cta) {
display: inline-block !important;
flex: 0 1 auto;
font-size: 10px !important;
}
.site-nav .nav-cta {
flex: 0 0 auto;
padding: 5px 9px !important;
font-size: 10px !important;
}
}
/* Ver 148: mobile title auto-fit */
@media (max-width: 620px) {
.hero h1 {
font-size: min(6.6vw, 28px) !important;
line-height: 1.2 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
}
.hero h1 strong {
display: inline !important;
font-size: 1.18em !important;
white-space: nowrap !important;
}
}
/* Ver 149: mobile hero redesign */
.hero-catch {
margin-top: 14px;
padding-left: 12px;
border-left: 4px solid var(--cyan);
color: #0b5d90;
font-size: 15px;
line-height: 1.6;
font-weight: 700;
}
@media (max-width: 620px) {
/* ヘッダー下の空白を狭くする */
.hero {
min-height: auto !important;
padding-top: 10px !important;
padding-bottom: 18px !important;
align-items: flex-start !important;
}
/* 背景画像の全体が見えやすいように調整 */
.hero-image {
object-fit: cover !important;
object-position: center center !important;
}
/* 白いかぶせを少し弱めて背景を見せる */
.hero-shade {
background: linear-gradient(
90deg,
rgba(238,248,255,.72) 0%,
rgba(238,248,255,.46) 40%,
rgba(238,248,255,.16) 70%,
rgba(238,248,255,.04) 100%
) !important;
}
/* 白パネルを少し小さくして右側の背景を見せる */
.hero-content {
width: calc(100% - 64px) !important;
margin: 8px 0 0 16px !important;
padding: 18px 18px 18px !important;
background: rgba(255,255,255,.60) !important;
border: 1px solid rgba(255,255,255,.72) !important;
border-radius: 18px !important;
box-shadow: 0 10px 26px rgba(4,43,82,.10) !important;
}
/* タイトル */
.hero h1 {
font-size: min(6.6vw, 28px) !important;
line-height: 1.2 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
}
.hero h1 strong {
display: inline !important;
font-size: 1.18em !important;
white-space: nowrap !important;
}
/* キャッチフレーズ */
.hero-catch {
margin-top: 14px !important;
padding-left: 10px !important;
border-left: 4px solid var(--cyan) !important;
font-size: 13px !important;
line-height: 1.65 !important;
color: #0b5d90 !important;
}
/* 日時会場 */
.hero-event-info {
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(7,95,147,.22) !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* トップ画面の大きい予約ボタンは消す */
.hero-booking-button {
display: none !important;
}
}
/* Ver 149: horizontal ICU image strip */
.hero-strip-visual {
margin: 16px 0 14px;
overflow: hidden;
border-radius: 12px;
background: #eef8fd;
}
.hero-strip-visual img {
display: block;
width: 100%;
aspect-ratio: 4 / 1;
object-fit: cover;
object-position: center;
opacity: 0.28;
filter: saturate(0.75) brightness(1.12);
}
@media (max-width: 620px) {
.hero-strip-visual {
margin: 14px 0 12px;
border-radius: 10px;
}
.hero-strip-visual img {
aspect-ratio: 4 / 1;
opacity: 0.24;
}
}
/* Ver 150: mobile hero background image off */
@media (max-width: 620px) {
.hero {
background: linear-gradient(
180deg,
#f7fcff 0%,
#eef8fd 100%
) !important;
}
.hero > .hero-image {
display: none !important;
}
.hero > .hero-shade {
display: none !important;
}
.hero-content {
background: rgba(255,255,255,.96) !important;
}
}
/* Ver 151: mobile hero full-width text layout */
@media (max-width: 620px) {
.hero-content {
width: calc(100% - 24px) !important;
margin: 6px auto 0 !important;
padding: 14px 8px 18px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.eyebrow {
font-size: 15px !important;
line-height: 1.4 !important;
}
.hero h1 {
font-size: min(6.7vw, 29px) !important;
line-height: 1.18 !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
}
.hero h1 strong {
font-size: 1.18em !important;
white-space: nowrap !important;
}
.hero-catch {
width: 100% !important;
margin-top: 14px !important;
padding-left: 10px !important;
font-size: min(4.15vw, 17px) !important;
line-height: 1.55 !important;
}
.hero-strip-visual {
width: 100% !important;
}
}
/* Ver 152: PC-like hero for smartphone */
@media (max-width: 620px) {
/* PC版と同じ腎臓再生ICU画像を全面背景に戻す */
.hero {
position: relative;
min-height: 470px !important;
padding: 0 !important;
background: #eaf7ff !important;
overflow: hidden;
}
.hero > .hero-image {
display: block !important;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: 58% center !important;
}
/* 左側だけ白くして文字を読みやすく */
.hero > .hero-shade {
display: block !important;
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(241,249,255,.96) 0%,
rgba(241,249,255,.90) 48%,
rgba(241,249,255,.58) 72%,
rgba(241,249,255,.12) 100%
) !important;
}
/* 白いカードは使わず、PC版のように画像へ直接文字を載せる */
.hero-content {
position: relative;
z-index: 2;
width: 75% !important;
margin: 0 !important;
padding: 28px 0 28px 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.eyebrow {
margin: 0 0 8px !important;
font-size: 16px !important;
line-height: 1.45 !important;
}
.status {
margin-bottom: 12px !important;
}
/* 横幅75％の中で2行にきれいに収める */
.hero h1 {
font-size: clamp(26px, 7vw, 34px) !important;
line-height: 1.18 !important;
letter-spacing: -0.055em !important;
white-space: nowrap !important;
}
.hero h1 strong {
display: inline !important;
font-size: 1.18em !important;
white-space: nowrap !important;
}
.hero-catch {
width: 100% !important;
margin-top: 16px !important;
padding-left: 10px !important;
font-size: clamp(14px, 3.8vw, 17px) !important;
line-height: 1.55 !important;
}
/* 今まで追加した横長の小画像はスマホでは非表示 */
.hero-strip-visual {
display: none !important;
}
/* 日時・会場はヒーロー内では少し控えめに */
.hero-event-info {
margin-top: 16px !important;
padding-top: 12px !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
}
/* Ver 154: mobile full-image hero + one-line project title */
@media (max-width: 620px) {
/* PC版のイメージ図をスマホ幅に合わせて全体表示 */
.hero {
background-image:
linear-gradient(
180deg,
rgba(247,252,255,0.94) 0%,
rgba(238,248,253,0.86) 45%,
rgba(238,248,253,0.76) 100%
),
url("assets/hero-blue-icu.png") !important;
background-repeat: no-repeat, no-repeat !important;
background-size: auto, 100% auto !important;
background-position: 0 0, center center !important;
}
.hero > .hero-image {
display: none !important;
}
.hero > .hero-shade {
display: none !important;
}
/* FIST-腎臓再生ICUプロジェクト を1行に */
.eyebrow {
width: 100% !important;
font-size: min(4.05vw, 16px) !important;
line-height: 1.45 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
}
}
/* Ver 155: image strip ends below catchphrase + speaker profile */
@media (max-width: 620px) {
/* ヒーロー全体の背景画像は使わない */
.hero {
background: linear-gradient(
180deg,
#f7fcff 0%,
#eef8fd 100%
) !important;
}
.hero > .hero-image,
.hero > .hero-shade {
display: none !important;
}
/* ICU画像はキャッチフレーズ直下の横長帯だけ */
.hero-strip-visual {
display: block !important;
width: 100% !important;
margin: 12px 0 14px !important;
overflow: hidden !important;
border-radius: 10px !important;
background: #eef8fd !important;
}
.hero-strip-visual img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 1 !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 0.26 !important;
filter: saturate(.70) brightness(1.15) !important;
}
/* 講師情報 */
.hero-speaker-info {
width: 100% !important;
margin-top: 4px !important;
padding: 14px 0 4px !important;
border-top: 1px solid rgba(7,95,147,.20) !important;
color: #173753 !important;
font-size: min(3.65vw, 15px) !important;
line-height: 1.55 !important;
}
.hero-speaker-info p {
margin: 2px 0 !important;
}
.hero-speaker-name {
margin-bottom: 7px !important;
color: #062a4e !important;
font-size: min(4.1vw, 17px) !important;
}
}
/* Ver 156: full-width mobile hero + correct image strip */
@media (max-width: 620px) {
/* ヒーロー全体をスマホ横幅いっぱいに */
.hero-content {
width: calc(100% - 24px) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 18px 4px 22px !important;
}
/* タイトル・キャッチ・講師欄も全幅 */
.eyebrow,
.hero h1,
.hero-catch,
.hero-strip-visual,
.hero-speaker-info {
width: 100% !important;
max-width: none !important;
}
/* 横長イメージ図 */
.hero-strip-visual {
margin: 14px 0 16px !important;
height: auto !important;
aspect-ratio: 4 / 1 !important;
overflow: hidden !important;
border-radius: 10px !important;
background: #eef8fd !important;
}
.hero-strip-visual img {
display: block !important;
width: 100% !important;
height: 100% !important;
/* 4:1の帯をしっかり埋める */
object-fit: cover !important;
object-position: center center !important;
opacity: 0.28 !important;
filter: saturate(.72) brightness(1.12) !important;
}
/* キャッチフレーズ */
.hero-catch {
font-size: min(4.2vw, 17px) !important;
line-height: 1.5 !important;
padding-left: 10px !important;
}
/* 講師情報 */
.hero-speaker-info {
margin-top: 0 !important;
padding: 16px 2px 4px !important;
font-size: min(3.75vw, 15px) !important;
line-height: 1.55 !important;
}
.hero-speaker-name {
font-size: min(4.2vw, 17px) !important;
line-height: 1.5 !important;
}
}
/* Ver 157: mobile hero title/catch overlay on image */
.hero-visual-panel {
position: relative;
width: 100%;
margin: 14px 0 16px;
overflow: hidden;
border-radius: 16px;
background: #eef8fd;
}
.hero-visual-panel img {
display: block;
width: 100%;
height: auto;
}
.hero-visual-copy {
position: absolute;
inset: 0;
z-index: 2;
}
.hero-visual-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(248, 252, 255, 0.93) 0%,
rgba(248, 252, 255, 0.82) 38%,
rgba(248, 252, 255, 0.48) 72%,
rgba(248, 252, 255, 0.16) 100%
);
}
@media (max-width: 620px) {
.hero-visual-panel {
width: 100% !important;
margin: 14px 0 16px !important;
border-radius: 14px !important;
}
.hero-visual-panel img {
width: 100% !important;
aspect-ratio: 1.65 / 1 !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 0.38 !important;
filter: saturate(0.78) brightness(1.08) !important;
}
.hero-visual-copy {
padding: 20px 16px 16px !important;
}
.hero-visual-copy h1 {
margin: 0 !important;
max-width: 76% !important;
font-size: min(10.2vw, 48px) !important;
line-height: 1.08 !important;
letter-spacing: -0.055em !important;
white-space: normal !important;
color: #08284b !important;
}
.hero-visual-copy h1 strong {
display: block !important;
margin-top: 2px !important;
font-size: 1.08em !important;
color: #0c78bf !important;
white-space: nowrap !important;
}
.hero-visual-copy .hero-catch {
margin-top: 18px !important;
max-width: 72% !important;
padding-left: 10px !important;
border-left: 4px solid var(--cyan) !important;
font-size: min(4.35vw, 17px) !important;
line-height: 1.55 !important;
font-weight: 700 !important;
color: #0b5d90 !important;
}
}
/* Ver 160: final mobile hero refinement */
@media (max-width: 620px) {
/* ---------- HERO 全体 ---------- */
.hero {
background: linear-gradient(
180deg,
#f7fcff 0%,
#eef8fd 100%
) !important;
}
.hero > .hero-image,
.hero > .hero-shade {
display: none !important;
}
.hero-content {
width: calc(100% - 24px) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 18px 4px 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* ---------- ICU画像＋タイトル ---------- */
.hero-visual-panel {
position: relative !important;
width: 100% !important;
aspect-ratio: 1.55 / 1 !important;
margin: 14px 0 18px !important;
overflow: hidden !important;
border-radius: 14px !important;
background: #eef8fd !important;
}
.hero-visual-panel > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 0.30 !important;
filter: saturate(.72) brightness(1.12) !important;
}
/* 文字を読みやすくする薄い白 */
.hero-visual-panel::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(
90deg,
rgba(248,252,255,.95) 0%,
rgba(248,252,255,.84) 48%,
rgba(248,252,255,.42) 78%,
rgba(248,252,255,.18) 100%
) !important;
}
.hero-visual-copy {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
padding: 20px 14px !important;
}
/* ---------- 4行を画面幅75%基準で自動調整 ---------- */
.hero-title-line1,
.hero-title-line2,
.hero-catch-line1,
.hero-catch-line2 {
display: block !important;
width: 75vw !important;
max-width: 75vw !important;
white-space: nowrap !important;
}
.hero-visual-copy h1 {
width: 75vw !important;
max-width: 75vw !important;
margin: 0 !important;
line-height: 1 !important;
}
/* 臓器移植に頼らない */
.hero-title-line1 {
font-size: min(7vw, 29px) !important;
line-height: 1.15 !important;
letter-spacing: -0.045em !important;
color: #08284b !important;
}
/* 未来医療をつくる */
.hero-title-line2 {
margin-top: 4px !important;
font-size: min(8vw, 34px) !important;
line-height: 1.12 !important;
letter-spacing: -0.05em !important;
color: #0878ba !important;
}
.hero-visual-copy .hero-catch {
width: 75vw !important;
max-width: 75vw !important;
margin-top: 18px !important;
padding-left: 10px !important;
border-left: 4px solid var(--cyan) !important;
color: #0b5d90 !important;
font-weight: 700 !important;
}
/* 腎臓再生のブレークスルーを目指す */
.hero-catch-line1 {
font-size: min(3.9vw, 16px) !important;
line-height: 1.5 !important;
}
/* 医工学による挑戦研究プロジェクト */
.hero-catch-line2 {
margin-top: 2px !important;
font-size: min(3.9vw, 16px) !important;
line-height: 1.5 !important;
}
/* ---------- 講師 ---------- */
.hero-speaker-info {
width: 100% !important;
max-width: none !important;
margin-top: 0 !important;
padding: 16px 2px 4px !important;
border-top: 1px solid rgba(7,95,147,.20) !important;
color: #173753 !important;
font-size: min(3.65vw, 15px) !important;
line-height: 1.55 !important;
}
.hero-speaker-name {
margin: 0 0 9px !important;
color: #062a4e !important;
}
/* 「講師：中村 真人」だけ少し大きく */
.hero-speaker-lead {
font-size: 1.15em !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
/* 医師・博士（医学）は通常サイズ */
.hero-speaker-credential {
margin-left: .5em !important;
font-size: 1em !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
/* ---------- 肩書：2文字分インデント ---------- */
.hero-speaker-roles {
margin-top: 6px !important;
padding-left: 2em !important;
}
.hero-speaker-roles p {
margin: 4px 0 !important;
line-height: 1.55 !important;
}
/* 2行目になる所属内の役職をさらに下げる */
.hero-speaker-roles .role-sub {
padding-left: 1.5em !important;
margin-top: 0 !important;
}
}
/* Ver 161: equal hero title size + tighter top spacing */
@media (max-width: 620px) {
/* 2行のタイトルを同じフォントサイズに */
.hero-title-line1,
.hero-title-line2 {
font-size: min(7.4vw, 31px) !important;
line-height: 1.14 !important;
letter-spacing: -0.045em !important;
}
.hero-title-line2 {
margin-top: 3px !important;
}
/* 「開催決定」とイメージ図の間を狭く */
.status {
margin-bottom: 4px !important;
}
.hero-visual-panel {
margin-top: 4px !important;
}
}
/* Ver 162: force equal title font size */
@media (max-width: 620px) {
.hero-title-line1,
.hero-title-line2 {
display: block !important;
font-size: min(7.2vw, 30px) !important;
line-height: 1.14 !important;
letter-spacing: -0.045em !important;
font-weight: 800 !important;
}
.hero-title-line2 {
margin-top: 3px !important;
}
/* strong に残っている拡大指定を無効化 */
.hero-visual-copy h1 strong,
.hero-title-line2 {
font-size: min(7.2vw, 30px) !important;
transform: none !important;
}
}
/* Ver 163: larger 80vw title + rounded subtitle box */
@media (max-width: 620px) {
/* タイトル領域を75% → 80%へ */
.hero-visual-copy h1,
.hero-title-line1,
.hero-title-line2 {
width: 80vw !important;
max-width: 80vw !important;
}
/* 2行とも同じ大きさで、一段大きく */
.hero-title-line1,
.hero-title-line2,
.hero-visual-copy h1 strong {
font-size: min(7.8vw, 33px) !important;
line-height: 1.12 !important;
letter-spacing: -0.045em !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.hero-title-line2 {
margin-top: 3px !important;
}
/* タイトル＋説明が入るよう画像領域を少し縦長に */
.hero-visual-panel {
aspect-ratio: 1.30 / 1 !important;
}
/* 説明文の角丸ボックス */
.hero-subtitle-box {
width: 80vw !important;
max-width: 80vw !important;
margin-top: 16px !important;
padding: 11px 13px 12px !important;
background: rgba(255, 255, 255, 0.78) !important;
border: 1px solid rgba(38, 151, 205, 0.45) !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(13, 78, 119, 0.08) !important;
color: #0b5d90 !important;
font-size: min(4.05vw, 17px) !important;
line-height: 1.38 !important;
font-weight: 700 !important;
}
.hero-subtitle-box p {
margin: 0 !important;
padding: 0 !important;
}
}
/* Ver.164: subtitle larger + image only behind upper title area */
@media (max-width: 620px) {
/* 上部ヒーロー領域 */
.hero-visual-panel {
position: relative !important;
overflow: hidden !important;
background: transparent !important;
padding-bottom: 8px !important;
}
/* 既存の画像要素は消して、背景画像として使う */
.hero-visual-panel img,
.hero-visual-panel .hero-image,
.hero-visual-panel .hero-visual-image {
display: none !important;
}
/* 背景イメージは、タイトル群の後ろだけに薄く表示 */
.hero-visual-panel::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 10px;
height: 300px;
background-image: url("assets/hero-blue-icu.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 92% auto;
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
/* 文字を画像より前面へ */
.hero-visual-copy,
.hero-visual-copy * {
position: relative;
z-index: 1;
}
/* タイトル2行を80%幅基準で自動調整 */
.hero-title-line1,
.hero-title-line2,
.hero-visual-copy h1 strong {
width: 80vw !important;
max-width: 80vw !important;
font-size: min(8vw, 34px) !important;
line-height: 1.08 !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
}
.hero-title-line2 {
margin-top: 0 !important;
}
/* 「開催決定」とメインタイトルの間を少し詰める */
.hero-status {
margin-bottom: 10px !important;
}
/* 説明文：BOXを消して全幅表示、文字を大きく */
.hero-subtitle-box {
background: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 12px 0 0 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.hero-subtitle-text,
.hero-subtitle-box,
.hero-subtitle-box p {
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
color: #155d8b !important;
font-size: 18px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
}
}
/* Ver 165:
upper hero image contains project/title only;
explanatory text sits below at full width
*/
@media (max-width: 620px) {
/* ----- 上部：画像＋タイトル ----- */
.hero-visual-panel {
position: relative !important;
width: 100% !important;
height: 360px !important;
margin: 2px 0 0 !important;
overflow: hidden !important;
border-radius: 0 !important;
background: #eef8fd !important;
}
/* 原画をトリミングせず、全体を縮小表示 */
.hero-visual-panel > .hero-visual-image {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 0.30 !important;
filter: saturate(.78) brightness(1.10) !important;
}
/* 読みやすさ確保 */
.hero-visual-panel::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(
90deg,
rgba(247,252,255,.90) 0%,
rgba(247,252,255,.68) 58%,
rgba(247,252,255,.28) 100%
) !important;
}
.hero-visual-copy {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
padding: 10px 8px 18px !important;
}
/* ----- FIST / 特別講演会 ----- */
.hero-visual-copy .eyebrow {
width: 100% !important;
margin: 0 0 8px !important;
font-size: min(4.05vw, 17px) !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
/* ----- 開催決定 ----- */
.hero-visual-copy .status {
display: inline-block !important;
margin: 2px 0 13px !important;
}
/* ----- メインタイトル ----- */
.hero-visual-copy h1 {
width: 80vw !important;
max-width: 80vw !important;
margin: 0 !important;
}
.hero-title-line1,
.hero-title-line2,
.hero-visual-copy h1 strong {
display: block !important;
width: 80vw !important;
max-width: 80vw !important;
font-size: min(7.8vw, 33px) !important;
line-height: 1.12 !important;
letter-spacing: -0.045em !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.hero-title-line2 {
margin-top: 3px !important;
}
/* ----- 画像の下：説明文 ----- */
.hero-subtitle-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 18px 4px 20px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #155d8b !important;
/* 下の本文と同程度の読みやすい大きさ */
font-size: min(4.5vw, 19px) !important;
line-height: 1.65 !important;
font-weight: 700 !important;
}
}
/* Ver 166: restore full hero image + match subtitle body font */
@media (max-width: 620px) {
/* ===== 上部イメージ図 ===== */
.hero-visual-panel {
position: relative !important;
width: 100% !important;
height: 360px !important;
margin: 2px 0 0 !important;
overflow: hidden !important;
background: #eef8fd !important;
border-radius: 0 !important;
}
/* 原画全体をトリミングせず表示 */
.hero-visual-panel > img.hero-visual-image {
display: block !important;
visibility: visible !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 0.34 !important;
filter: saturate(.80) brightness(1.08) !important;
z-index: 0 !important;
}
/* 画像の上に薄い白をかける */
.hero-visual-panel::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(
90deg,
rgba(247,252,255,.82) 0%,
rgba(247,252,255,.62) 55%,
rgba(247,252,255,.20) 100%
) !important;
}
/* 文字を画像より前へ */
.hero-visual-copy {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
padding: 10px 8px 18px !important;
}
/* ===== 副題説明文 ===== */
.hero-subtitle-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 18px 4px 20px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #173753 !important;
/* 下の説明本文に合わせる */
font-size: 16px !important;
line-height: 1.8 !important;
font-weight: 400 !important;
}
}
/* Ver 167: hero image position up + subtitle auto-wrap */
@media (max-width: 620px) {
/* 上部ヒーロー全体 */
.hero-visual-panel {
position: relative !important;
width: 100% !important;
height: 305px !important;
margin: -10px 0 6px !important;
overflow: hidden !important;
background: #eef8fd !important;
border-radius: 0 !important;
}
/* イメージ図を復活・少し上へ */
.hero-visual-panel > img.hero-visual-image {
display: block !important;
visibility: visible !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center top !important;
transform: scale(0.94) translateY(-10px) !important;
transform-origin: center top !important;
opacity: 0.30 !important;
filter: saturate(.80) brightness(1.10) !important;
z-index: 0 !important;
}
/* 文字の後ろにうっすら白をかける */
.hero-visual-panel::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(
90deg,
rgba(247,252,255,.84) 0%,
rgba(247,252,255,.68) 58%,
rgba(247,252,255,.22) 100%
) !important;
}
/* 画像の上に文字を載せる */
.hero-visual-copy {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
padding: 8px 8px 0 !important;
}
/* 副題説明文：自然改行＋フォント少し大きめ */
.hero-subtitle-text {
width: 100% !important;
max-width: none !important;
margin: 8px 0 0 !important;
padding: 0 4px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #173753 !important;
font-size: 17px !important;
line-height: 1.85 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
}
/* Ver 168: tighten image-subtitle gap + force natural wrapping */
@media (max-width: 620px) {
/* 図の下の余白を詰める */
.hero-visual-panel {
margin-bottom: 0 !important;
}
/* 副題説明文を図のすぐ下へ */
.hero-subtitle-text {
width: 100% !important;
max-width: none !important;
margin: 12px 0 0 !important;
padding: 0 4px 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
/* 自然改行 */
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
/* 「講演について」の本文に近い見え方 */
font-size: 16px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: #173753 !important;
}
/* p要素由来の余分な上下余白も消す */
.hero-subtitle-text p {
margin: 0 !important;
}
}
/* Ver 169: remove blank space below hero image */
@media (max-width: 620px) {
/* イメージ領域そのものを短くする */
.hero-visual-panel {
height: 245px !important;
margin-bottom: 0 !important;
}
/* 原画全体を維持したまま上寄せ */
.hero-visual-panel > img.hero-visual-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center top !important;
transform: none !important;
}
/* 副題は画像の約2行下から */
.hero-subtitle-text {
margin-top: 24px !important;
}
}
/* Ver 170: force subtitle closer to hero image */
@media (max-width: 620px) {
.hero-subtitle-text {
position: relative !important;
z-index: 3 !important;
/* 画像下の余白を直接詰める */
margin-top: -42px !important;
padding-top: 0 !important;
}
}
/* Ver 171: title line spacing + subtitle tighter leading */
@media (max-width: 620px) {
/* メインタイトル2行の行間を少し広げる */
.hero-title-line1,
.hero-title-line2,
.hero-visual-copy h1 strong {
line-height: 1.18 !important;
}
.hero-title-line2 {
margin-top: 6px !important;
}
/* 副題説明文の行間を少し狭める */
.hero-subtitle-text {
line-height: 1.62 !important;
}
}
/* Ver 172: speaker profile layout refinement */
.speaker-profile-heading {
align-items: flex-start !important;
}
.speaker-profile-heading > img,
.speaker-profile-photo {
align-self: flex-start !important;
margin-top: 0 !important;
}
/* 名前＋資格 */
.speaker-profile-name-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.speaker-profile-name {
flex: 0 1 auto !important;
margin: 0 !important;
}
/* 医師・博士（医学）は小さくして1行固定 */
.speaker-profile-qualification {
flex: 0 0 auto !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* 写真横の肩書 */
.speaker-profile-affiliations-top {
margin-top: 8px !important;
}
.speaker-profile-affiliations-top span {
display: block !important;
line-height: 1.5 !important;
}
/* 写真の下からBOX全幅になる肩書 */
.speaker-profile-affiliations-lower {
width: 100% !important;
margin: 16px 0 18px !important;
padding: 0 !important;
color: #173753 !important;
font-size: 15px !important;
line-height: 1.55 !important;
font-weight: 600 !important;
}
.speaker-profile-affiliations-lower p {
margin: 4px 0 !important;
padding: 0 !important;
}
/* 最終行をタブ2つ分くらい右へ */
.speaker-profile-affiliations-lower .speaker-role-sub {
padding-left: 2.5em !important;
margin-top: 0 !important;
}
/* ---------- smartphone ---------- */
@media (max-width: 620px) {
.speaker-profile-heading {
align-items: flex-start !important;
}
.speaker-profile-heading > img,
.speaker-profile-photo {
margin-top: 0 !important;
align-self: flex-start !important;
}
.speaker-profile-name-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
gap: 7px !important;
}
.speaker-profile-qualification {
font-size: clamp(11px, 3.1vw, 13px) !important;
white-space: nowrap !important;
}
.speaker-profile-affiliations-top span {
line-height: 1.45 !important;
}
.speaker-profile-affiliations-lower {
width: 100% !important;
margin-top: 14px !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
.speaker-profile-affiliations-lower .speaker-role-sub {
padding-left: 2.5em !important;
}
}
/* Ver 173: unify lower affiliations with FIST affiliation style */
.speaker-profile-affiliations-lower {
width: 100% !important;
margin: 14px 0 18px !important;
padding: 0 !important;
/* 写真横のFIST肩書と同じ書式 */
color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: 1.5 !important;
}
.speaker-profile-affiliations-lower p {
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: 1.5 !important;
}
/* 最終行だけ約2文字分インデント */
.speaker-profile-affiliations-lower .speaker-role-sub {
padding-left: 2em !important;
margin: 0 !important;
}
/* smartphone */
@media (max-width: 620px) {
.speaker-profile-affiliations-lower,
.speaker-profile-affiliations-lower p {
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: 1.45 !important;
}
}
/* Ver 174: keep speaker name horizontal */
.speaker-profile-name-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
}
/* 中村真人は絶対に1行 */
.speaker-profile-name {
flex: 0 0 auto !important;
width: auto !important;
min-width: max-content !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
margin: 0 !important;
}
/* 資格は小さくして1行 */
.speaker-profile-qualification {
flex: 0 1 auto !important;
font-size: 12px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
word-break: keep-all !important;
writing-mode: horizontal-tb !important;
margin: 0 !important;
}
@media (max-width: 620px) {
.speaker-profile-name-row {
gap: 5px !important;
}
.speaker-profile-name {
white-space: nowrap !important;
min-width: max-content !important;
}
.speaker-profile-qualification {
font-size: min(2.8vw, 11px) !important;
white-space: nowrap !important;
}
}
/* Ver 175: speaker name and qualification on separate lines */
.speaker-profile-name-row {
display: block !important;
width: 100% !important;
}
.speaker-profile-name {
display: block !important;
margin: 0 0 3px !important;
white-space: nowrap !important;
writing-mode: horizontal-tb !important;
}
.speaker-profile-qualification {
display: block !important;
margin: 0 !important;
font-size: 12px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
writing-mode: horizontal-tb !important;
}
/* Ver 176: lower affiliations exactly match FIST affiliations */
.speaker-profile-affiliations-lower,
.speaker-profile-affiliations-lower p {
font-family: inherit !important;
font-size: clamp(14px, 1.22vw, 17px) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.48 !important;
letter-spacing: normal !important;
color: inherit !important;
}
.speaker-profile-affiliations-lower p {
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.speaker-profile-affiliations-lower .speaker-role-sub {
padding-left: 2em !important;
}
・金沢工業大学 工学部 先進機械システム工学科 教授
・富山大学 名誉教授
・元 医薬品医療機器総合機構（PMDA）科学委員
・元（財）神奈川科学技術アカデミー
中村バイオプリンティングプロジェクトリーダー
/* smartphone */
@media (max-width: 760px) {
.speaker-profile-affiliations-lower,
.speaker-profile-affiliations-lower p {
font-family: inherit !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.48 !important;
letter-spacing: normal !important;
}
}
・金沢工業大学 工学部 先進機械システム工学科 教授
・富山大学 名誉教授
・元 医薬品医療機器総合機構（PMDA）科学委員
・元（財）神奈川科学技術アカデミー
中村バイオプリンティングプロジェクトリーダー
/* Ver 177: lower affiliations use exactly same style as FIST affiliations */
.speaker-profile-affiliations-lower {
width: 100% !important;
margin-top: 14px !important;
}
.speaker-profile-affiliations-lower span {
display: block !important;
}
.speaker-profile-affiliations-lower .speaker-role-sub {
padding-left: 2em !important;
}
/* Ver 178: PC hero subtitle box */
@media (min-width: 621px) {
.hero-subtitle-text {
width: min(760px, 72%) !important;
margin: 18px 0 0 !important;
padding: 14px 18px !important;
background: rgba(255, 255, 255, 0.78) !important;
border: 1px solid rgba(38, 151, 205, 0.40) !important;
border-radius: 12px !important;
box-shadow: 0 6px 18px rgba(13, 78, 119, 0.08) !important;
color: #155d8b !important;
font-size: 17px !important;
line-height: 1.65 !important;
font-weight: 600 !important;
}
}
/* Ver 179: PC hero two-line title + larger subtitle box */
@media (min-width: 621px) {
/* ===== メインタイトルを必ず2行に ===== */
.hero-visual-copy h1 {
width: max-content !important;
max-width: 760px !important;
margin: 0 !important;
}
.hero-visual-copy h1 .hero-title-line1,
.hero-visual-copy h1 .hero-title-line2 {
display: block !important;
width: max-content !important;
max-width: 100% !important;
white-space: nowrap !important;
}
.hero-visual-copy h1 .hero-title-line2 {
margin-top: 7px !important;
}
/* ===== タイトル下の説明BOX ===== */
.hero-subtitle-text {
width: min(860px, 78%) !important;
max-width: 860px !important;
margin: 24px 0 0 !important;
padding: 18px 22px !important;
background: rgba(255, 255, 255, 0.84) !important;
border: 1px solid rgba(38, 151, 205, 0.42) !important;
border-radius: 14px !important;
box-shadow: 0 8px 22px rgba(13, 78, 119, 0.10) !important;
color: #155d8b !important;
font-size: clamp(20px, 1.55vw, 23px) !important;
line-height: 1.55 !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
}
/* Ver 181: PC hero subtitle positioning + hide top speaker block */
@media (min-width: 621px) {
.hero-content {
position: relative !important;
padding-bottom: 190px !important;
}
/* タイトルは2行固定 */
.hero-visual-copy h1 .hero-title-line1,
.hero-visual-copy h1 .hero-title-line2 {
display: block !important;
white-space: nowrap !important;
}
/* 説明BOXをタイトルから十分離して配置 */
.hero-subtitle-text {
position: absolute !important;
left: 0 !important;
top: 390px !important;
width: 760px !important;
max-width: 760px !important;
margin: 0 !important;
padding: 22px 26px !important;
background: rgba(255,255,255,.86) !important;
border: 1px solid rgba(38,151,205,.42) !important;
border-radius: 14px !important;
box-shadow: 0 8px 22px rgba(13,78,119,.10) !important;
color: #155d8b !important;
font-size: clamp(28px, 2.2vw, 32px) !important;
line-height: 1.48 !important;
font-weight: 600 !important;
}
/* PCトップの講師ブロックは削除 */
.hero-speaker-info {
display: none !important;
}
}
/* Ver 182: PC hero clean background */
@media (min-width: 621px) {
/* 説明BOXの白いもやを外す */
.hero-subtitle-text {
background: transparent !important;
box-shadow: none !important;
}
/* PCでは、上に重なっている幅の狭い背景画像を消す */
.hero-visual-panel > img.hero-visual-image {
display: none !important;
}
/* 画像を消した後、パネル自体の背景も透明にする */
.hero-visual-panel {
background: transparent !important;
}
}
/* Ver 183: restore PC title area while keeping narrow image hidden */
@media (min-width: 621px) {
/* タイトルを載せる領域の高さを明示的に確保 */
.hero-visual-panel {
position: relative !important;
display: block !important;
width: 100% !important;
height: 300px !important;
min-height: 300px !important;
background: transparent !important;
overflow: visible !important;
}
/* 幅の狭い重複画像だけ消す */
.hero-visual-panel > img.hero-visual-image {
display: none !important;
}
/* タイトル類を確実に表示 */
.hero-visual-copy {
position: relative !important;
display: block !important;
z-index: 3 !important;
width: 100% !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
.hero-visual-copy .eyebrow,
.hero-visual-copy .status,
.hero-visual-copy h1,
.hero-title-line1,
.hero-title-line2 {
visibility: visible !important;
opacity: 1 !important;
}
/* 説明BOXも確実に表示 */
.hero-subtitle-text {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 4 !important;
}
}
/* Ver 184: PC subtitle box final alignment */
@media (min-width: 621px) {
/* タイトル部分は内容の高さだけにする */
.hero-visual-panel {
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
overflow: visible !important;
background: transparent !important;
}
.hero-visual-copy {
position: relative !important;
width: 100% !important;
height: auto !important;
}
/* タイトル幅 */
.hero-visual-copy h1 {
width: 760px !important;
max-width: 760px !important;
}
.hero-title-line1,
.hero-title-line2 {
width: 760px !important;
max-width: 760px !important;
}
/* 説明BOX */
.hero-subtitle-text {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
/* ① タイトルと同じ横幅 */
width: 760px !important;
max-width: 760px !important;
box-sizing: border-box !important;
/* ② タイトル下に1.5文字分の間隔 */
margin: 1.5em 0 0 !important;
padding: 22px 26px !important;
/* ③ 白・透明度50％ */
background: rgba(255, 255, 255, 0.50) !important;
border: 1px solid rgba(38, 151, 205, 0.42) !important;
border-radius: 14px !important;
box-shadow: none !important;
font-size: clamp(28px, 2.2vw, 32px) !important;
line-height: 1.48 !important;
font-weight: 600 !important;
}
}
/* Ver 185: PC title white overlay width + true 1.5-title-character gap */
@media (min-width: 621px) {
/* 背景画像全体にかかっている白いレイヤーを外す */
.hero-shade {
display: none !important;
}
/* タイトル2行だけに半透明白を置く */
.hero-visual-copy h1 {
width: 760px !important;
max-width: 760px !important;
box-sizing: border-box !important;
padding: 12px 18px !important;
background: rgba(255, 255, 255, 0.50) !important;
border-radius: 10px !important;
}
.hero-title-line1,
.hero-title-line2 {
width: auto !important;
max-width: 100% !important;
}
/* 説明BOX：
タイトル文字サイズの1.5文字分だけ下へ離す */
.hero-subtitle-text {
width: 760px !important;
max-width: 760px !important;
margin-top: clamp(54px, 8.1vw, 102px) !important;
background: rgba(255, 255, 255, 0.50) !important;
}
}
/* Ver 186: PC white backgrounds only for title and subtitle */
@media (min-width: 621px) {
/* ========================================
FIST表記・特別講演会・開催決定
→ 半透明白の背景から完全に外す
======================================== */
.hero-visual-copy {
background: transparent !important;
}
.hero-visual-copy::before,
.hero-visual-copy::after {
background: transparent !important;
}
.hero-visual-copy .eyebrow {
background: transparent !important;
box-shadow: none !important;
}
/* 「開催決定」も白背景をなくす */
.hero-visual-copy .status {
background: transparent !important;
box-shadow: none !important;
}
/* ========================================
メインタイトル2行だけ
半透明白 50%
======================================== */
.hero-visual-copy h1 {
width: 760px !important;
max-width: 760px !important;
/* 背景を文字幅に揃えるため余分な左右paddingをなくす */
padding: 8px 0 !important;
background: rgba(255, 255, 255, 0.50) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.hero-title-line1,
.hero-title-line2 {
background: transparent !important;
}
/* ========================================
副題BOX
タイトルと同じ横幅・半透明白50%
======================================== */
.hero-subtitle-text {
width: 760px !important;
max-width: 760px !important;
box-sizing: border-box !important;
background: rgba(255, 255, 255, 0.50) !important;
box-shadow: none !important;
}
}
/* Ver 187: PC hero independent translucent white overlay */
@media (min-width: 621px) {
/* 背景画像全体への白いモヤは使わない */
.hero-shade {
display: none !important;
}
/* 文字そのものの背景はすべて塗りつぶしなし */
.hero-visual-copy,
.hero-visual-copy h1,
.hero-title-line1,
.hero-title-line2,
.hero-subtitle-text {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* FIST・特別講演会・開催決定も背景なし */
.hero-visual-copy .eyebrow,
.hero-visual-copy .status {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* 背景画像の上に独立した半透明白BOXを1枚重ねる */
.hero-content::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
/* メインタイトル付近から開始 */
top: 145px !important;
/* タイトルと副題を包む幅 */
width: 760px !important;
/* タイトル＋間隔＋副題を包む高さ */
height: 355px !important;
background: rgba(255, 255, 255, 0.70) !important;
border: none !important;
border-radius: 16px !important;
box-shadow: none !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* 文字は半透明BOXより前面へ */
.hero-visual-panel,
.hero-visual-copy,
.hero-subtitle-text {
position: relative !important;
z-index: 2 !important;
}
}
/* Ver 188: PC hero full-image translucent overlay + transparent text boxes */
@media (min-width: 621px) {
/* ===== 1. 文字側の背景はすべて完全透明 ===== */
.hero-visual-copy,
.hero-visual-copy h1,
.hero-title-line1,
.hero-title-line2,
.hero-subtitle-text,
.hero-visual-copy .eyebrow,
.hero-visual-copy .status {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* ===== 2. 背景画像と同サイズの白70％BOXを手前に置く ===== */
.hero {
position: relative !important;
}
/* 既存のshadeは使わない */
.hero-shade {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(255, 255, 255, 0.70) !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* 背景画像は最背面 */
.hero > .hero-image {
z-index: 0 !important;
}
/* 文字類は白70％BOXより前面 */
.hero-content {
position: relative !important;
z-index: 2 !important;
}
/* ===== 3. タイトル幅 ===== */
.hero-visual-copy h1 {
width: 720px !important;
max-width: 720px !important;
padding: 0 !important;
}
.hero-title-line1,
.hero-title-line2 {
width: 720px !important;
max-width: 720px !important;
}
/* ===== 副題もタイトル幅と同じに固定 ===== */
.hero-subtitle-text {
width: 720px !important;
max-width: 720px !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
}
/* Ver 189: remove all extra translucent white blocks on PC */
@media (min-width: 621px) {
/* 以前の hero-visual-panel 上の白レイヤーを完全に削除 */
.hero-visual-panel::after {
content: none !important;
display: none !important;
background: none !important;
}
/* 以前作った hero-content の半透明BOXも完全に削除 */
.hero-content::before,
.hero-content::after {
content: none !important;
display: none !important;
background: none !important;
}
/* 文字BOXには一切背景を持たせない */
.hero-visual-panel,
.hero-visual-copy,
.hero-visual-copy h1,
.hero-title-line1,
.hero-title-line2,
.hero-subtitle-text,
.hero-visual-copy .eyebrow,
.hero-visual-copy .status {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* 残す半透明白はこれ1枚だけ */
.hero > .hero-shade {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(255, 255, 255, 0.70) !important;
z-index: 1 !important;
pointer-events: none !important;
}
.hero > .hero-image {
z-index: 0 !important;
}
.hero-content {
position: relative !important;
z-index: 2 !important;
}
}
/* Ver 195: PC HERO consolidated clean version */
@media (min-width: 621px) {
/* ===== 背景画像 ===== */
.hero > .hero-image {
position: absolute !important;
top: 2.5% !important;
bottom: auto !important;
width: 100% !important;
height: 95% !important;
object-fit: cover !important;
object-position: center center !important;
z-index: 0 !important;
}
/* 背景画像と同じ大きさの白70％レイヤー */
.hero > .hero-shade {
display: block !important;
position: absolute !important;
top: 2.5% !important;
bottom: auto !important;
width: 100% !important;
height: 95% !important;
background: rgba(255,255,255,0.70) !important;
z-index: 1 !important;
pointer-events: none !important;
}
.hero-content {
position: relative !important;
z-index: 2 !important;
}
/* ===== 幅の狭い重複画像はPCでは非表示 ===== */
.hero-visual-panel > img.hero-visual-image {
display: none !important;
}
.hero-visual-panel::after,
.hero-content::before,
.hero-content::after {
content: none !important;
display: none !important;
}
/* ===== 講演会名 ===== */
.hero-visual-copy .eyebrow {
background: transparent !important;
box-shadow: none !important;
/* 従来の約120％ */
font-size: clamp(21px, 2.15vw, 27px) !important;
line-height: 1.45 !important;
font-weight: 800 !important;
}
/* ===== 開催決定 ===== */
.hero-visual-copy .status {
display: inline-block !important;
color: #c62828 !important;
background: #ffffff !important;
border: 2px solid #c62828 !important;
border-radius: 999px !important;
font-size: 18px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
padding: 6px 16px !important;
margin-bottom: 12px !important;
box-shadow: none !important;
}
/* ===== メインタイトル ===== */
.hero-visual-copy h1 {
width: max-content !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.hero-title-line1,
.hero-title-line2 {
display: block !important;
width: max-content !important;
max-width: none !important;
font-size: clamp(44px, 5.7vw, 72px) !important;
line-height: 1.12 !important;
white-space: nowrap !important;
word-break: keep-all !important;
background: transparent !important;
}
.hero-title-line2 {
margin-top: 7px !important;
}
/* ===== 副題BOX ===== */
.hero-subtitle-text {
position: relative !important;
/* 修正済みだった狭い幅を復活 */
width: 690px !important;
max-width: 690px !important;
/* タイトルと左揃え */
margin-left: 0 !important;
left: 0 !important;
/* タイトル文字との間隔 */
margin-top: 1.5em !important;
box-sizing: border-box !important;
/* 不透明白BOX */
background: #ffffff !important;
border: 2px solid rgba(8,120,201,0.55) !important;
border-radius: 16px !important;
box-shadow: 0 8px 22px rgba(4,43,82,0.12) !important;
padding: 22px 26px !important;
font-size: clamp(28px,2.2vw,32px) !important;
line-height: 1.48 !important;
font-weight: 600 !important;
}
/* ===== PCトップの講師ブロックは非表示 ===== */
.hero-speaker-info {
display: none !important;
}
}
/* Ver 196: gap below status */
@media (min-width: 621px) {
.hero-visual-copy .status {
margin-bottom: clamp(44px, 5.7vw, 72px) !important;
}
}
/* Ver 197: PC speaker profile text slightly larger */
@media (min-width: 621px) {
/* 講師プロフィール本文 */
.speaker-profile-copy p {
font-size: 16px !important;
line-height: 1.75 !important;
}
/* 専門領域 */
.speaker-profile-copy strong {
font-size: 16px !important;
}
/* 「もっと詳しいプロフィール」ボタンも少し大きく */
.speaker-profile-copy .profile-button-more,
.speaker-profile-copy .profile-button {
font-size: 15px !important;
padding: 11px 20px !important;
}
}
/* Ver 198: speaker profile body exact font size */
@media (min-width: 621px) {
.speaker-profile-copy .speaker-profile-continuous {
font-size: 16px !important;
line-height: 1.7 !important;
}
.speaker-profile-copy .speaker-expertise {
font-size: 16px !important;
line-height: 1.7 !important;
}
.speaker-profile-copy .speaker-expertise strong {
font-size: 17px !important;
}
}
/* Ver 199: Lecture Guide illustration */
@media (min-width: 621px) {
.guide-illustration {
width: 100%;
margin-top: 16px;
text-align: right;
}
.guide-illustration img {
display: inline-block;
width: 210px;
max-width: 42%;
height: auto;
}
}
/* Ver 200: Lecture Guide illustration slightly larger */
@media (min-width: 621px) {
.guide-illustration {
width: 100%;
margin-top: 18px;
text-align: right;
}
.guide-illustration img {
display: inline-block;
width: 240px;
max-width: 46%;
height: auto;
}
}
/* Ver 201: WHO SHOULD ATTEND text size match Lecture Guide */
@media (min-width: 621px) {
.audience-list li {
font-size: 17.5px !important;
line-height: 1.7 !important;
font-weight: 700 !important;
}
.audience-note {
font-size: 17px !important;
line-height: 1.65 !important;
}
}
/* Ver 202: exact same text size for Audience and Lecture Guide */
@media (min-width: 621px) {
.audience-list li,
.lecture-guide-card .points li {
font-size: 20px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.audience-note {
font-size: 18px !important;
line-height: 1.65 !important;
}
}
/* Ver 203: WHO SHOULD ATTEND visually match Lecture Guide */
@media (min-width: 621px) {
.audience-card .audience-list li {
font-size: 20px !important;
line-height: 1.6 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
/* Lecture Guideと同じ濃い文字色 */
color: #102a43 !important;
}
.audience-card .audience-note {
font-size: 18px !important;
color: #102a43 !important;
}
}