@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
section .text { font-size: 1.6rem; }

.overview { background: url(../img/concept/bg01.jpg) no-repeat center center; background-size: cover; max-width: 100%; width: 100%; padding: 4rem 0 10rem; }
.overview .inner { max-width: 900px; width: 90%; margin-inline: auto; }
.overview .name { font-size: clamp(26px, calc(2vw + 20px), 36px); text-align: center; line-height: 1.4; }
.overview .text { margin-top: 5rem; line-height: 2; }

.future { font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; margin-top: 8rem; }
.future .title { font-size: clamp(28px, calc(2vw + 22px), 38px); font-weight: bold; line-height: 1.8; text-align: center; }
.future .text { text-align: center; line-height: 2.4; margin-top: 4rem; }
.future .img { max-width: 750px; margin-inline: auto; margin-top: 6rem; }

.interview { padding: 8rem 0; }
.interview .inner { max-width: 1000px; width: 90%; margin-inline: auto; }
.interview .interview-header { display: grid; grid-template-columns: repeat(2, 1fr); }
.interview .interview-header .catch-copy { order: 1; grid-column: span 2; font-size: 2.6rem; padding: 2rem 8rem; color: #fff; line-height: 1.4; font-feature-settings: "palt"; }
.interview .interview-header .profile { order: 2; padding: 4rem 2rem 2rem 8rem; color: #595757; }
.interview .interview-header .profile .position { font-size: 2rem; line-height: 1.6; }
.interview .interview-header .profile .name { line-height: 1; margin-top: 1.5rem; }
.interview .interview-header .profile .name .jp { font-feature-settings: "palt"; letter-spacing: 0.2em; font-size: 4.6rem; }
.interview .interview-header .profile .name .en { font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; font-size: 2rem; letter-spacing: 0.1em; margin-top: 1rem; }
.interview .interview-header .profile .join-date { margin-top: 2.5rem; font-size: 1.8rem; width: fit-content; border: 1px solid currentColor; padding: 3px 15px; }
.interview .interview-header .img { order: 3; height: 100%; }
.interview .interview-header .img img { object-fit: cover; height: 100%; }
.interview .interview-body { background-color: #fff; padding-bottom: 4rem; }
.interview .interview-body .headline { position: relative; }
.interview .interview-body .headline .button { position: absolute; right: 9rem; top: 10rem; background-color: #fff; cursor: pointer; }
.interview .interview-body .headline .button span { width: 5rem; height: 1px; display: block; transition: rotate 0.2s ease-out; }
.interview .interview-body .headline .button span:nth-of-type(1) { rotate: 0deg; }
.interview .interview-body .headline .button span:nth-of-type(2) { rotate: 90deg; }
.interview .interview-body .headline .button::after { display: block; font-size: 2rem; content: 'Open'; margin-top: 3rem; }
.interview .interview-body .headline .button.open span:nth-of-type(1) { rotate: 45deg; }
.interview .interview-body .headline .button.open span:nth-of-type(2) { rotate: 135deg; }
.interview .interview-body .headline .button.open::after { content: 'Close'; }
.interview .interview-body.show { padding-bottom: 0; }
.interview .interview-body .content { display: none; }
.interview .interview-body .title, .interview .interview-body .text, .interview .interview-body .note { padding: 0 9rem; }
.interview .interview-body .title { font-size: 3.4rem; line-height: 1.4; padding-top: 8rem; }
.interview .interview-body .title::after { margin-top: 2rem; width: 100%; height: 1.2rem; content: ''; display: block; background-size: auto auto; }
.interview .interview-body .text { font-size: 1.6rem; line-height: 2; margin-top: 2.5rem; }
.interview .interview-body .note { margin-top: 1rem; }
.interview .interview-body .img { margin-top: 8rem; }

.interview01 { margin-top: 8rem; background-color: #b4c1c7; }
.interview01 .interview-header { background-color: #e2e6e6; }
.interview01 .interview-header .catch-copy { background: #6A8384; background: linear-gradient(90deg, #6a8384 50%, #e1eff2 100%); }
.interview01 .interview-header .profile .name .en { color: #88a5a5; }
.interview01 .interview-body .headline .button span { background-color: #809697; }
.interview01 .interview-body .headline .button::after { color: #809697; }
.interview01 .interview-body .title::after { background-color: white; background-image: repeating-linear-gradient(90deg, transparent, transparent 4px, #b4c1c7 4px, #b4c1c7 6px); }

.interview02 { margin-bottom: 4rem; background-color: #d9d1b7; }
.interview02 .interview-header { background-color: #f5f2e9; }
.interview02 .interview-header .catch-copy { background: #AA9765; background: linear-gradient(90deg, #aa9765 50%, #fef7e3 100%); }
.interview02 .interview-header .profile .name .en { color: #aa9765; }
.interview02 .interview-body .headline .button span { background-color: #aa9765; }
.interview02 .interview-body .headline .button::after { color: #aa9765; }
.interview02 .interview-body .title::after { background-color: white; background-image: repeating-linear-gradient(90deg, transparent, transparent 4px, #c6b895 4px, #c6b895 6px); }

@media screen and (max-width: 930px) { .interview .interview-header .catch-copy { padding: 2rem 6rem; }
  .interview .interview-header .profile { padding: 3rem 2rem 3rem 6rem; }
  .interview .interview-body .headline .button { right: 6rem; top: 8rem; }
  .interview .interview-body .title, .interview .interview-body .text, .interview .interview-body .note { padding: 0 6rem; }
  .interview .interview-body .title { padding-top: 6rem; }
  .interview .interview-body .img { margin-top: 5rem; } }
@media screen and (max-width: 640px) { section .text { font-size: 1.4rem; }
  .container { padding-top: 0; }
  .overview { padding: 2rem 0 6rem; }
  .overview .text { margin-top: 3rem; }
  .future { margin-top: 6rem; }
  .future .title { line-height: 1.6; }
  .future .text { line-height: 2.2; }
  .future .img { margin-top: 4rem; }
  .interview { padding: 4rem 0; }
  .interview .interview-header { grid-template-columns: 1fr; }
  .interview .interview-header .catch-copy { font-size: 2.2rem; padding: 2rem 3rem; grid-column: span 1; }
  .interview .interview-header .img { order: 2; }
  .interview .interview-header .profile { padding: 2.5rem 3rem 4rem; order: 3; }
  .interview .interview-header .profile .position { font-size: 1.6rem; }
  .interview .interview-header .profile .name .jp { font-size: 3.8rem; }
  .interview .interview-header .profile .name .en { font-size: 1.8rem; }
  .interview .interview-header .profile .join-date { font-size: 1.4rem; }
  .interview .interview-body .headline .button { right: 3rem; top: 5rem; }
  .interview .interview-body .headline .button span { width: 4rem; }
  .interview .interview-body .headline .button::after { font-size: 1.6rem; margin-top: 2.5rem; }
  .interview .interview-body .title, .interview .interview-body .text, .interview .interview-body .note { padding: 0 3rem; }
  .interview .interview-body .title { padding-top: 3rem; font-size: 2.4rem; }
  .interview .interview-body .text { font-size: 1.4rem; }
  .interview .interview-body .img { margin-top: 3rem; }
  .interview01 { margin-top: 6rem; } }