.ts-profile-page {
--ts-profile-text: #222222;
--ts-profile-muted: #777777;
--ts-profile-line: #e9e9e9;
--ts-profile-placeholder: #f4f4f4;
--ts-profile-content-width: 1040px;
--ts-profile-member-width: 880px;
--ts-profile-side-padding: clamp(16px, 4vw, 32px);
width: 100%;
margin: 0;
background: transparent;
color: var(--ts-profile-text);
font-family:
"Hiragino Mincho ProN",
"Yu Mincho",
"YuMincho",
"Noto Serif JP",
serif;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.ts-profile-page,
.ts-profile-page *,
.ts-profile-page *::before,
.ts-profile-page *::after {
box-sizing: border-box;
}
.ts-profile-page img {
display: block;
max-width: 100%;
}
.ts-profile-page a {
color: inherit;
text-decoration: none;
}
.ts-profile-page__inner {
width: min(100%, var(--ts-profile-content-width));
margin: 0 auto;
padding-right: var(--ts-profile-side-padding);
padding-left: var(--ts-profile-side-padding);
} .ts-profile-heading__title {
margin: 0;
padding: clamp(56px, 9vw, 108px) 0 clamp(30px, 5vw, 52px);
font-size: clamp(28px, 3.6vw, 43px);
font-weight: 500;
letter-spacing: 0.17em;
line-height: 1.2;
} .ts-profile-hero {
width: min(100%, var(--ts-profile-member-width));
margin: 0 auto;
overflow: hidden;
background: var(--ts-profile-placeholder);
}
.ts-profile-hero__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
} .ts-profile-intro {
width: min(100%, var(--ts-profile-member-width));
margin: 0 auto;
padding: clamp(46px, 7vw, 78px) 0 clamp(44px, 7vw, 72px);
text-align: center;
}
.ts-profile-intro__name {
margin: 0 0 26px;
font-size: clamp(18px, 2.1vw, 25px);
font-weight: 500;
letter-spacing: 0.11em;
line-height: 1.5;
}
.ts-profile-intro__text {
max-width: 760px;
margin: 0 auto;
font-size: clamp(12px, 1.3vw, 15px);
line-height: 2.05;
text-align: left;
}
.ts-profile-intro__text p {
margin: 0;
}
.ts-profile-intro__text p + p {
margin-top: 18px;
} .ts-profile-official-sns {
display: flex;
flex-direction: column;
align-items: center;
gap: 17px;
margin-bottom: clamp(48px, 7vw, 76px);
text-align: center;
}
.ts-profile-official-sns__title {
margin: 0;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
line-height: 1.5;
}
.ts-profile-sns-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 24px;
}
.ts-profile-sns-list__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 3px 0;
border-bottom: 1px solid transparent;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
}
.ts-profile-sns-list__link:hover,
.ts-profile-sns-list__link:focus-visible {
border-bottom-color: currentColor;
} .ts-profile-members {
width: min(100%, var(--ts-profile-member-width));
margin: 0 auto;
padding-bottom: clamp(90px, 13vw, 170px);
}
.ts-profile-members__title {
margin: 0 0 clamp(28px, 4vw, 44px);
font-size: clamp(16px, 2vw, 22px);
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.4;
text-align: center;
}
.ts-profile-member-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 4vw, 54px) clamp(8px, 3vw, 34px);
width: 100%;
}
.ts-profile-member-card {
min-width: 0;
text-align: center;
}
.ts-profile-member-card__main {
display: block;
} .ts-profile-member-card__image-wrap {
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--ts-profile-placeholder);
}
.ts-profile-member-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover; object-position: center top; transition: transform 220ms ease;
}
.ts-profile-member-card__main:hover .ts-profile-member-card__image,
.ts-profile-member-card__main:focus-visible .ts-profile-member-card__image {
transform: scale(1.02);
}
.ts-profile-member-card__body {
padding-top: clamp(11px, 1.8vw, 17px);
}
.ts-profile-member-card__name {
margin: 0;
font-size: clamp(11px, 1.6vw, 16px);
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.45;
overflow-wrap: anywhere;
}
.ts-profile-member-card__meta {
margin: 5px 0 0;
color: var(--ts-profile-muted);
font-size: clamp(8px, 1.08vw, 11px);
line-height: 1.5;
overflow-wrap: anywhere;
}
.ts-profile-member-card__sns {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 9px;
margin-top: 8px;
font-family: Arial, sans-serif;
}
.ts-profile-member-card__sns a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 18px;
padding: 2px 0;
border-bottom: 1px solid transparent;
font-size: clamp(7px, 0.95vw, 10px);
font-weight: 600;
line-height: 1.2;
}
.ts-profile-member-card__sns a:hover,
.ts-profile-member-card__sns a:focus-visible {
border-bottom-color: currentColor;
} @media (max-width: 720px) {
.ts-profile-page {
--ts-profile-side-padding: 14px;
}
.ts-profile-heading__title {
padding-top: 44px;
}
.ts-profile-intro__text {
line-height: 1.95;
}
.ts-profile-member-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 8px;
row-gap: 30px;
}
.ts-profile-member-card__body {
padding-top: 9px;
}
.ts-profile-member-card__name {
font-size: clamp(10px, 3.15vw, 13px);
letter-spacing: 0.01em;
}
.ts-profile-member-card__meta {
margin-top: 3px;
font-size: clamp(7px, 2.35vw, 10px);
line-height: 1.4;
}
.ts-profile-member-card__sns {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
margin-top: 6px;
}
.ts-profile-member-card__sns a {
min-height: 15px;
font-size: clamp(7px, 2.15vw, 9px);
}
}
@media (max-width: 380px) {
.ts-profile-member-grid {
column-gap: 6px;
}
.ts-profile-member-card__name {
font-size: 10px;
}
.ts-profile-member-card__meta,
.ts-profile-member-card__sns a {
font-size: 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.ts-profile-page *,
.ts-profile-page *::before,
.ts-profile-page *::after {
scroll-behavior: auto !important;
transition: none !important;
}
}