@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Serif+JP:wght@400;500;700&display=swap");
:root {
--bg-dark: #1a1a1a;
--accent-gold: #c5a059;
--text-white: #f5f1e8;
--text-muted: #8b8678;
}
.new_2023 .l-main {
padding-top: 105px !important;
}
.new_2023 .c-crumbs {
margin: 0;
}
@media (max-width: 768px) {
.new_2023 .l-main {
padding-top: 68px !important;
}
}
.archive-interview-body {
background-color: var(--bg-dark) !important;
color: var(--text-white) !important;
font-family: "Noto Sans JP", system-ui, sans-serif;
margin: 0;
padding: 0;
} .interview-crumbs {
background: var(--bg-dark);
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.interview-crumbs .c-crumbs,
.interview-crumbs .c-crumbs p,
.interview-crumbs .c-crumbs a {
font-size: 12px;
letter-spacing: 0.05em;
}
.interview-crumbs .c-crumbs a {
color: var(--text-white) !important;
text-decoration: none;
transition: color 0.3s ease;
}
.interview-crumbs .c-crumbs a:hover {
color: var(--accent-gold) !important;
}
.interview-crumbs .c-crumbs span {
color: var(--text-muted);
}
.interview-crumbs #breadcrumbs span:last-child {
color: var(--accent-gold);
}
@media (max-width: 768px) {
.interview-crumbs .c-crumbs,
.interview-crumbs .c-crumbs p,
.interview-crumbs .c-crumbs a {
font-size: 10px;
}
} .interview-mv {
position: relative;
width: 100%;
height: 85vh;
background: var(--bg-dark);
overflow: hidden;
}
.p-mv__slider {
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide a {
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide a:hover {
opacity: .95;
}
.slide-img {
width: 100%;
height: 100%;
position: relative;
}
.slide-img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.2) 30%);
pointer-events: none;
z-index: 1;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
object-position: 0% 30%;
}
.interview-mv__content {
position: absolute;
top: 50%;
left: 5.5%;
transform: translateY(-50%);
z-index: 10;
max-width: 50%;
width: 100%;
pointer-events: none; }
.interview-mv__content a {
pointer-events: auto;
}
.interview-mv__title-wrap {
margin-bottom: 16px;
}
.interview-mv__title-en {
font-family: 'Cormorant Garamond', serif;
font-size: 64px;
line-height: 1.6;
color: #fff;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
margin: 0;
text-shadow: 8px 8px 14px #333;
}
.interview-mv__title-jp {
font-size: 14px;
letter-spacing: 0.2em;
color: var(--accent-gold);
}
.fvText {
background: rgba(26, 26, 26, 0.85);
backdrop-filter: blur(10px);
color: #fff;
font-family: "Noto Serif JP", serif;
padding: 24px;
max-width: 700px;
margin-top: 24px;
border-left: 4px solid var(--accent-gold);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.fvText__title {
font-size: 24px;
line-height: 1.4;
margin-bottom: 16px;
font-weight: 700;
letter-spacing: 0.02em;
}
.fvText__hr {
width: 60px;
height: 1px;
background: var(--accent-gold);
border: none;
margin-bottom: 16px;
}
.fvText__meta {
display: flex;
flex-direction: column;
gap: 8px;
}
.fvText__company {
font-size: 14px;
line-height: 2;
color: var(--accent-gold);
letter-spacing: 0.1em;
font-weight: 500;
}
.fvText__speaker {
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.05em;
}
.fvText mark {
background: transparent;
color: var(--accent-gold);
}
@media (max-width: 768px) {
.interview-mv {
height: 70vh;
}
.slide-img::after {
background: linear-gradient(to right, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.2) 60%);
}
.slide-img img {
height: 50vh;
object-position: 50% 30%;
}
.interview-mv__content {
top: 60%;
max-width: 100%;
z-index: 11;
}
.interview-mv.-single .interview-mv__content {
top: 75%;
}
.interview-mv__title-en {
font-size: 40px;
}
.interview-mv__title-jp {
font-size: 14px;
}
.fvText {
padding: 16px;
margin-top: 24px;
max-width: calc(100% - 40px);
}
.fvText__title {
font-size: 18px;
margin-bottom: 16px;
}
.fvText__meta {
gap: 4px;
}
.fvText__company {
font-size: 12px;
}
.fvText__speaker {
font-size: 14px;
}
}
.swiper-pagination {
bottom: 30px !important;
}
@media (max-width: 768px) {
.swiper-pagination {
bottom: 16px !important;
}
}
.swiper-button-prev,
.swiper-button-next {
color: var(--accent-gold) !important;
z-index: 100 !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 24px !important;
}
.swiper-pagination-bullet {
background: var(--accent-gold) !important;
opacity: 0.5;
} .interview-pickup {
background: #030817;
padding: 100px 56px;
}
.interview-pickup .inner {
max-width: 1240px;
margin: 0 auto;
}
.interview-pickup .interview-section__header {
margin-bottom: 40px;
}
.pickup-card {
display: grid;
grid-template-columns: 440px 1fr;
background: linear-gradient(135deg, rgba(20,41,78,0.6) 0%, rgba(10,23,51,0.4) 100%);
border-left: 3px solid var(--accent-gold);
border-top: 1px solid rgba(197, 160, 89, 0.2);
border-right: 1px solid rgba(197, 160, 89, 0.2);
border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}
.pickup-card__img {
position: relative;
}
.pickup-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pickup-card__content {
padding: 56px;
}
.pickup-card__vol {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--accent-gold);
letter-spacing: 0.2em;
margin-bottom: 20px;
}
.pickup-card__title {
font-family: 'Noto Serif JP', serif;
font-size: 32px;
line-height: 1.5;
margin-bottom: 30px;
}
.pickup-card__meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 30px;
}
.pickup-card__line {
width: 3px;
height: 40px;
background: linear-gradient(180deg, #e8d9a8, #8b6f3a);
}
.pickup-card__company {
color: var(--accent-gold);
font-size: 11px;
}
.pickup-card__name {
font-size: 16px;
}
.pickup-btn {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 12px 25px;
border: 1px solid rgba(197,160,89,0.5);
color: #e8d9a8;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.1em;
transition: all 0.3s ease;
}
.pickup-btn:hover {
background: rgba(197,160,89,0.1);
border-color: var(--accent-gold);
} .interview-card__link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
} .article__btm-inner {
margin-top: 60px;
text-align: center;
} .story .c_sec-title {
color: var(--text-white) !important;
}
@media (max-width: 768px) {
.interview-pickup {
padding: 60px 20px;
}
.pickup-card {
grid-template-columns: 1fr;
}
.pickup-card__content {
padding: 30px;
}
.pickup-card__title {
font-size: 24px;
}
} .interview-section {
padding: 100px 0;
max-width: 1240px;
margin: 0 auto;
padding: 100px 56px;
}
.interview-section__header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 40px;
}
.interview-section__line {
width: 40px;
height: 1px;
background: var(--accent-gold);
}
.interview-section__label-en {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
letter-spacing: 0.3em;
color: #e8d9a8;
}
.interview-section__label-jp {
font-size: 11px;
color: var(--accent-gold);
letter-spacing: 0.2em;
}
@media (max-width: 768px) {
.interview-section__header {
flex-direction: column;
}
}
.interview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media (max-width: 1024px) {
.interview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.interview-grid {
grid-template-columns: 1fr;
padding: 0;
}
.interview-section {
padding: 60px 20px;
}
} .interview-card {
background: #242424;
border: 1px solid rgba(197, 160, 89, 0.1);
transition: transform 0.3s ease, border-color 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
}
.interview-card:hover {
transform: translateY(-5px);
border-color: var(--accent-gold);
}
.interview-card__thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.interview-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.interview-card:hover .interview-card__thumb img {
transform: scale(1.05);
}
.interview-card__no {
position: absolute;
top: 14px;
left: 14px;
font-family: 'Noto Serif', serif;
font-size: 24px;
color: var(--accent-gold);
background: rgba(26, 26, 26, 0.8);
padding: 2px 8px;
border: 1px solid rgba(197, 160, 89, 0.3);
}
.interview-card__body {
padding: 24px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.interview-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.interview-card__cat {
font-size: 10px;
line-height: 1.6;
color: var(--accent-gold);
border: 1px solid var(--accent-gold);
padding: 2px 8px;
letter-spacing: 0.1em;
}
.interview-card__date {
font-size: 12px;
line-height: 1.6;
color: var(--text-muted);
font-family: 'Noto Serif', serif;
}
.interview-card__title {
font-family: "Noto Serif JP", serif;
color: #fff;
font-size: 18px;
line-height: 1.6;
margin: 0 0 16px 0;
font-weight: 500;
min-height: 3.2em;
letter-spacing: .1em;
}
.interview-card__hr {
height: 1px;
background: rgba(197, 160, 89, 0.2);
border: none;
margin: 0 0 16px 0;
}
.interview-card__footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.interview-card__info {
font-size: 12px;
line-height: 1.4;
letter-spacing: .1em;
}
.interview-card__company {
display: block;
color: var(--accent-gold) !important;
margin-bottom: 4px;
}
.interview-card__speaker {
display: block;
color: var(--text-white);
}
.interview-card__arrow {
color: #fff; } .interview-card__title mark {
background: transparent !important;
color: var(--accent-gold) !important;
} .story {
background: #242424;
padding: 80px 56px;
}
@media (max-width: 768px) {
.story {
padding: 60px 20px;
}
}
.story .c_sec-title {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
color: var(--text-white);
margin-bottom: 40px;
}
.story-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
list-style: none;
padding: 0;
} .story-card .interview-card__thumb {
position: relative;
}
.story-card__company {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
color: #fff;
padding: 20px 15px 10px;
font-size: 13px;
font-weight: 500;
}
.story-card__meta {
margin-bottom: 12px;
}
.story-card__industry {
font-size: 12px;
line-height: 2;
color: var(--accent-gold);
border: 1px solid rgba(197, 160, 89, 0.4);
padding: 1px 6px;
display: inline-block;
}
.story .interview-card__title {
font-family: "Noto Serif JP", serif;
font-weight: 500;
line-height: 1.6;
}
.pickup-btn {
line-height: 1.8;
color: var(--accent-gold) !important;
}
@media (max-width: 768px) {
.interview-section__header-wrap {
flex-direction: column;
align-items: center;
gap: 16px;
}
} .article__btm-inner {
margin-top: 80px;
display: flex;
justify-content: center;
}
.navigation.pagination,
.wp-pagenavi {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.wp-pagenavi .pages {
display: none;
}
.navigation.pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(197, 160, 89, 0.3);
color: var(--text-white);
text-decoration: none;
font-family: 'Noto Serif JP', serif;
font-size: 16px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.03);
padding: 8px;
border-radius: 0;
}
.navigation.pagination .page-numbers.current,
.wp-pagenavi span.current {
background: var(--accent-gold);
color: #1a1a1a;
border-color: var(--accent-gold);
font-weight: bold;
}
.navigation.pagination a.page-numbers:hover,
.wp-pagenavi a:hover {
background: rgba(197, 160, 89, 0.2);
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
width: auto;
padding: 0 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
}
@media (max-width: 768px) {
.navigation.pagination .page-numbers,
.wp-pagenavi a,
.wp-pagenavi span {
width: 36px;
height: 36px;
font-size: 14px;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
padding: 0 12px;
}
} .single-interview-body {
background: var(--bg-dark);
}
.interview-mv.-single {
height: 70vh;
}
@media (max-width: 768px) {
.interview-mv.-single {
height: 60vh;
}
}
.interview-single-content {
background: #fff;
color: #333;
position: relative;
max-width: 1100px;
margin: 40px auto 0;
padding: 64px 5.5%;
}
@media (max-width: 768px) {
.interview-single-content {
padding: 24px 24px;
}
}
.interview-block {
margin-bottom: 40px;
}
.interview-block__title {
font-family: "Noto Serif JP", serif;
font-size: 28px;
line-height: 1.4;
margin-bottom: 40px;
display: flex;
align-items: flex-start;
gap: 20px;
color: #1a1a1a;
}
.interview-block__title .num {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
color: var(--accent-gold);
font-size: 40px;
line-height: 1;
}
@media (max-width: 768px) {
.interview-block__title {
font-size: 20px;
gap: 12px;
}
.interview-block__title .num {
font-size: 24px;
}
}
.interview-img,
.interview-single-content .wp-block-image {
width: 80%;
max-width: 900px;
aspect-ratio: 16/9;
margin: 0 auto 24px;
overflow: hidden;
}
@media (max-width: 768px) {
.interview-img {
width: 100%;
}
}
.interview-img img,
.interview-single-content .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.interview-txt {
font-size: 16px;
line-height: 1.8;
} .interview-company-info {
background: var(--bg-dark);
color: var(--text-white);
padding: 100px 0;
margin: 40px auto 0;
padding: 64px 5.5%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.interview-company-info .company-info-content {
display: flex;
gap: 60px;
align-items: flex-start;
}
.company-info-table {
flex: 1;
display: grid;
grid-template-columns: 100px 1fr;
gap: 20px 10px;
font-size: 14px;
}
.company-info-table dt {
color: var(--accent-gold);
font-weight: bold;
}
.company-info-table dd {
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.company-info-table dd a {
color: var(--accent-gold);
text-decoration: none;
}
.company-info-table dd a:hover {
text-decoration: underline;
}
.company-info-map {
flex: 1;
}
@media (max-width: 960px) {
.interview-company-info .company-info-content {
flex-direction: column;
}
.company-info-map {
width: 100%;
}
}
@media (max-width: 768px) {
.company-info-table {
grid-template-columns: 1fr;
width: 100%;
}
} .interview-single-content .c-editor-content,
.interview-single-content .wp-block-group__inner-container {
max-width: 900px;
margin: 0 auto;
}
.interview-single-content h2,
.interview-single-content h2.wp-block-heading {
font-family: "Noto Serif JP", serif;
font-size: 24px;
font-weight: 700;
border-left: 4px solid var(--accent-gold);
padding-left: 15px;
margin: 48px 0 24px;
line-height: 1.4;
color: #1a1a1a;
align-items: center;
}
.interview-single-content h3,
.interview-single-content h3.wp-block-heading,
.interview-single-content .interview-qa_q {
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-weight: 600;
line-height: 1.8;
margin: 40px 0 24px;
padding-bottom: 10px;
border-bottom: 1px solid var(--accent-gold);
color: #1a1a1a;
}
.interview-single-content p,
.interview-single-content .wp-block-paragraph,
.interview-single-content .interview-qa_a {
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.8;
letter-spacing: .1em;
}
.interview-single-content img,
.interview-single-content .wp-block-image img {
max-width: 100%;
height: 100%;
}
.interview-single-content .wp-block-image {
width: 100%;
height: 100%;
margin: 24px 0;
}
.interview-single-content .wp-block-image figcaption {
font-size: 12px;
color: #888;
text-align: center;
margin-top: 10px;
}
.interview-single-content ul,
.interview-single-content ol {
margin: 20px 0 30px 20px;
}
.interview-single-content li {
margin-bottom: 10px;
line-height: 1.6;
}
.interview-single-content blockquote,
.interview-single-content .wp-block-quote {
background: #f9f9f9;
border-left: 4px solid var(--accent-gold);
padding: 30px;
margin: 40px 0;
font-style: italic;
}
@media (max-width: 768px) {
.interview-single-content h2,
.interview-single-content h2.wp-block-heading {
font-size: 18px;
margin: 40px 0 8px;
}
.interview-single-content h3,
.interview-single-content h3.wp-block-heading,
.interview-single-content .interview-qa_q {
font-size: 16px;
margin: 32px 0 8px;
}
.interview-single-content p,
.interview-single-content .wp-block-paragraph,
.interview-single-content .interview-qa_a {
font-size: 14px;
}
.interview-single-content .wp-block-image {
margin: 16px 0;
}
}