@charset "utf-8";

/* var */
:root {
--c_black: #000000;
--c_white: #ffffff;
--c_purple: #3E1485;
--f_base: "Montserrat","Noto Sans","Noto Sans JP",sans-serif;
--f_base--ja: YakuHanJP,"Noto Sans","Noto Sans JP",sans-serif;
--f_title: "Montserrat","Noto Sans","Noto Sans JP",sans-serif;
--f_title--ja: YakuHanJP,"Noto Sans","Noto Sans JP",sans-serif;
--f_profile--ja: "Montserrat",YakuHanJP,"Noto Sans JP",sans-serif;
}

/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, var { font-style: normal; }
ol, ul { list-style: none; padding:0; margin:0; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
q:before, q:after { content: ''; }
section, article { display: block; }
html,body { overscroll-behavior: none; }
input, textarea, select { display: block; margin: 0; padding: 0; width: auto; border: none; border-radius: 0; -webkit-appearance: none; }
form { margin:0; padding:0; border:0; font-style:normal; font-weight:normal; vertical-align:baseline;}

/* base */
html { position: relative; -webkit-text-size-adjust: 100%; }
body {
  position: relative; -webkit-font-smoothing: antialiased; -webkit-font-feature-settings: 'palt'; font-feature-settings: 'palt';
  word-wrap : break-word; overflow-wrap : break-word; font-kerning: normal; -webkit-font-kerning: normal;
  font-family: var(--f_base);
  line-height: 1.5; letter-spacing: .03em; font-weight: 400;
  background-color: var(--c_white); color: var(--c_black);
  box-sizing: border-box; padding: 0; margin: 0; }
img { vertical-align: bottom; height: auto; max-width: 100%; user-select: none; -webkit-user-select: none; }
::selection { background: var(--c_black); color: var(--c_white); }
::-moz-selection { background: var(--c_black); color: var(--c_white); }

@media (prefers-reduced-motion: no-preference) {
  body { animation: fadeIn 1.5s ease 0s 1 both; }
}
@keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } }

/* link */
a[href] { cursor: pointer !important; }

/* u */
.u-pc { display:inline; }
.u-sp { display:none; }
.u-br-pc { display:block; }
.u-br-sp { display:none; }

.l-rr-main { padding:1rem; min-width: 1024px; max-width:1680px; margin:auto; }

.l-rr-cover { display:flex; justify-content: space-between; }
.l-rr-cover__meta { order: 1; width:27%; padding: 2rem 0 0 1.5rem; position: relative; display:flex; justify-content: space-between; flex-wrap: wrap; }
.l-rr-cover__tu { font-size: 2.7em; line-height: 1; font-weight: 200; text-shadow: 0 0 0.025em currentColor; white-space: nowrap; margin:0 0 0.5em 0; }
.l-rr-cover__title { white-space: nowrap; margin:0 0 0.5em 0; display:flex; flex-direction: column; gap:2.5em 0; }
.l-rr-cover__title-main { font-size: 6.25em; line-height: .85; font-weight: 100; }
.l-rr-cover__title-num { font-size: 3em; line-height: .85; font-weight: 300; }
.l-rr-cover__title-name { font-size: 6.25em; line-height: .85; font-weight: 100; }
.l-rr-cover__data { width:100%; font-size: 1.1em; line-height: 1.4; font-weight: 300; font-variation-settings: 'wght' 325; white-space: nowrap; display:flex; flex-direction: column; gap:1em 0; }
.l-rr-cover__data__name { font-size: 2em; line-height: 1; margin:0 0 0.5em 0; font-variation-settings: 'wght' 185; }
.l-rr-cover__logo { width:5rem; margin:0 auto 0 0; align-self: flex-end; }
.l-rr-cover__lang { font-size: 1.4em; line-height: 1; font-weight: 300; width: fit-content; align-self: flex-end; margin: 0 0 0 auto; line-height: 1; font-weight: 300; }
.l-rr-cover__lang ul { margin: 0 0 0 auto; display:flex; justify-content: center; align-items: center; }
.l-rr-cover__lang ul li:first-child::after { content:"/"; margin:0 0.5em; }

.l-rr-cover__portrait { order: 2; width:70%; z-index: -1; }

.l-rr-header { padding:2rem; margin:0 0 2rem 0; display: flex; flex-direction: row; justify-content: space-between; position: relative; }
.l-rr-header__left { width:35%; flex-direction: column; }
.l-rr-header__tu { font-size: 2.15em; line-height: 1; font-weight: 200; text-shadow: 0 0 0.025em currentColor; white-space: nowrap; margin: 0 0 0.5em 0; }
.l-rr-header__title { font-size: 5.15em; line-height: .85; font-weight: 100; white-space: nowrap; margin:0; }
.l-rr-header__mid { margin:0 0 0 auto; padding:0 10em 0 0; }
.l-rr-header__lead { font-size: 1.4em; line-height: 1.5; font-weight: 300; }
html[lang="ja"] .l-rr-header__lead { font-size: 1.3em; line-height: 1.75; font-weight: 300; letter-spacing: 0.075em; font-variation-settings: 'wght' 300; }
.l-rr-header__logo { position:absolute; top:2rem; right:2rem; width:5rem; margin:0 auto 0 0; }
.l-rr-header__lang { font-size: 1.4em; line-height: 1; font-weight: 300; position:absolute; bottom:2.5rem; right:2rem; margin: 0 0 0 auto; display:flex; justify-content: center; align-items: center; }
.l-rr-header__lang ul { margin: 0 0 0 auto; display:flex; justify-content: center; align-items: center; }
.l-rr-header__lang ul li:first-child::after { content:"/"; margin:0 0.5em; }

.l-rr-section--lead { margin: 20rem 0; }
.l-rr-section--lead h2 { font-size: 4.75em; line-height: .9; font-weight: 100; text-align: center; }
html[lang="ja"] .l-rr-section--lead h2 { font-family: var(--f_title--ja); font-size: 4em; line-height: 1.1; font-weight: 100; text-align: center; font-variation-settings: 'wght' 100; }

.l-rr-section--interview.l-rr-section--start { display:flex; justify-content: space-between; align-items: flex-start; margin-bottom:5rem; }
.l-rr-section__content { width: 54%; padding: 3rem 3rem 15rem 3rem; }
.l-rr-section__content h3 { font-size: 2.25em; line-height: 1.2; font-weight: 300; margin: 0 0 2em 0; }
.l-rr-section__content h4 { font-size: 1.25em; line-height: 1.4; font-weight: 500; margin: 2em 0 0.5em 0; }
.l-rr-section__content p { font-size: 1.25em; line-height: 1.4; font-weight: 300; margin: 0 0 1em 0; }
html[lang="ja"] .l-rr-section__content h3 { font-family: var(--f_title--ja); font-family: var(--f_title--ja);  font-size: 2.15em; line-height: 1.4; font-weight: 200; font-variation-settings: 'wght' 250; margin: 0 0 2em 0; }
html[lang="ja"] .l-rr-section__content h4 { font-family: var(--f_title--ja);  font-size: 1.25em; line-height: 1.7; font-weight: 400; font-variation-settings: 'wght' 450; margin: 2em 0 0.75em 0; }
html[lang="ja"] .l-rr-section__content p { font-family: var(--f_title--ja); font-size: 1.15em; line-height: 1.7; font-weight: 300; font-variation-settings: 'wght' 325; letter-spacing: 0; text-align: justify; margin: 0 0 1em 0; }
.l-rr-section__portrait { width:45%; position: sticky; top:1.5rem; right:0; margin:0 0 0 0; }
.l-rr-section__portrait figcaption { font-size: 0.75em; line-height: 1.4; font-weight: 400; margin: 1em 0 0 0; }
html[lang="ja"] .l-rr-section__portrait figcaption { font-family: var(--f_title--ja); font-size: 0.75em; line-height: 1.4; font-weight: 400; margin: 1em 0 0 0; }

.l-rr-section--interview.l-rr-section--end { display:flex; flex-direction: column; }
.l-rr-section--interview.l-rr-section--end .l-rr-section__content { margin:0 0 0 auto; }
.l-rr-section__photo { width:100%; position:sticky; top:1.5rem; left:0; transform-origin: top left; will-change: transform; }
.l-rr-section__photo figure { width:100%; aspect-ratio: 4 / 3; }
.l-rr-section__photo figure img { object-fit:cover; width:100%; height:100%; }
.l-rr-section__photo figcaption { font-size: 0.75em; line-height: 1.4; font-weight: 400; margin: 1em 0 0 0; }

.l-rr-section--profile { padding:8rem 8rem 0 8rem; display:flex; justify-content: space-between; }
.l-rr-profile { width: 55%; }
.l-rr-profile__name { font-size: 2.3em; line-height: 1.4; font-weight: 200; margin: 0 0 0.5em 0; }
.l-rr-profile__name span { font-weight: 100; font-variation-settings: 'wght' 100; }
.l-rr-profile p { font-size: 1.05em; line-height: 1.4; font-weight: 300; font-variation-settings: 'wght' 300; margin:0 0 1.5em 0; }
html[lang="ja"] .l-rr-profile p { font-family: var(--f_title--ja); font-size: 1em; line-height: 1.6; font-weight: 300; font-variation-settings: 'wght' 325; letter-spacing: 0; text-align: justify; margin:0 0 1.5em 0; }
html[lang="ja"] .l-rr-profile p.en { font-family: var(--f_title--ja); text-align: left; line-height: 1.6; font-weight: 300; font-variation-settings: 'wght' 325; }
.l-rr-profile p a { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.25em; }
.l-rr-profile p a:hover { opacity: 0.5; }
.l-rr-profile__portrait { width:40%; }

.l-rr-section--credit { margin: 5rem 0; }
.l-rr-credit { font-size: 0.85em; line-height: 1.5; font-weight: 300; text-align: center; }

.l-rr-section--title { font-size: 4.75em; line-height: .85; font-weight: 100; text-align: center; margin:3em 0 1.5em 0; }

.l-rr-related { padding:0 2rem; }
.l-rr-related ul { display: grid; gap: 4rem 2rem; grid-template-columns: repeat(3, 1fr); max-width: 100%; }
.l-rr-related ul li figure { width:100%; aspect-ratio: 3 / 4; }
.l-rr-related ul li figure img { object-fit:cover; width:100%; height:100%; }
.l-rr-related ul li figcaption .l-rr-related__title { font-size: 2.4em; line-height: 1em; font-weight: 200; margin: 0.75em 0 0.75em 0; }
html[lang="ja"] .l-rr-related ul li figcaption .l-rr-related__title { font-size: 2.15em; line-height: 1.2em; font-family: var(--f_title--ja); font-weight: 300; margin: 0.75em 0 0.5em 0; font-variation-settings: 'wght' 150; }
.l-rr-related ul li figcaption .l-rr-related__name { font-size: 1.75em; line-height: 1em; font-weight: 200; margin: 0.75em 0 0.5em 0; font-variation-settings: 'wght' 250; }
.l-rr-related ul li figcaption .l-rr-related__name--ja { font-size: 1.45em; line-height: 1em; font-weight: 200; margin: 0.25em 0 0.75em 0; font-variation-settings: 'wght' 250; }
.l-rr-related ul li figcaption .l-rr-related__data { font-size: 0.85em; line-height: 1.4em; font-weight: 300; padding:0 3em 0 0; }
.l-rr-related ul li figcaption .l-rr-related__data--ja { font-size: 0.85em; line-height: 1.7em; font-weight: 300; padding:0 1em 0 0; font-variation-settings: 'wght' 325; }

.l-rr-footer { display:flex; justify-content: space-between; align-items: flex-end; margin-top:10rem; padding:2rem;}
.l-rr-footer__logo { width:5rem; }
.l-rr-footer__lang { font-size: 1.4em; line-height: 1; font-weight: 300; }

@media (min-width:601px){
  .l-rr-section--interview.l-rr-section--end .l-rr-section__photo { width: var(--basis); }
  .l-rr-section--interview.l-rr-section--end .l-rr-section__photo figure { aspect-ratio: var(--ratio); }
  .l-rr-section--interview.l-rr-section--end .l-rr-section__content { margin: 45rem 0 0 auto; }
  .l-rr-section--interview.l-rr-section--end .l-rr-section__content { opacity: 0; transition: opacity .5s ease, transform .5s ease; }
  .l-rr-section--interview.l-rr-section--end .l-rr-section__content.is-show { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s ease; }
}

@media screen and (max-width: 600px) {

/* u */
.u-pc { display:none; }
.u-sp { display:inline; }
.u-br-pc { display:none; }
.u-br-sp { display:block; }

.l-rr-main { padding:0 0.6rem; min-width: 0; }

.l-rr-cover { flex-direction: column; gap:3rem 0; }
.l-rr-cover__meta { order: 2; width:100%; padding: 0 2rem; }
.l-rr-cover__tu { font-size: 1.65em; margin:0 0 0.75em 0; }
.l-rr-cover__title {  margin:0 0 1.75em 0; gap: 1.5em 0; }
.l-rr-cover__title-main { font-size: 4em; }
.l-rr-cover__title-num { font-size: 1.85em; }
.l-rr-cover__title-name { font-size: 4em;}

.l-rr-cover__data { width:100%; font-size: 0.95em; margin: 0 0 3em 0; gap:1em 0; }
html[lang="ja"] .l-rr-cover__data { width:100%; font-size: 1.1em; margin: 0 0 3em 0; gap:1em 0; }
.l-rr-cover__data__name { font-size: 2em; font-variation-settings: 'wght' 150; }

.l-rr-cover__logo { width:4.5rem; }
.l-rr-cover__lang { font-size: 1.4em; }
.l-rr-cover__portrait { order:1; width:calc(100% + 1.2rem ); margin:0 -0.6rem; }
.l-rr-cover__portrait img { object-fit: cover; width:100%; height:100%; }

.l-rr-header { margin:2rem 0 3rem 0; flex-direction: column; gap:3rem 0; }
.l-rr-header__left { width:100%; }
.l-rr-header__tu { font-size: 2.2em; }
.l-rr-header__title { font-size: 5em; }
.l-rr-header__mid { width:100%; margin:0 0 5em 0; padding:0 0.25em; }
.l-rr-header__lead { font-size: 1.25em; }
html[lang="ja"] .l-rr-header__lead { font-size: 1.25em; font-variation-settings: 'wght' 300; }
.l-rr-header__logo { top:auto; bottom: 0; right:auto; left:2rem; width:4.5rem; }
.l-rr-header__lang { bottom:0; }

.l-rr-section--lead h2 { font-size: 3em; }
html[lang="ja"] .l-rr-section--lead h2 { font-size: 3.25em; font-weight: 100; font-variation-settings: 'wght' 100; }

.l-rr-section--interview.l-rr-section--start { flex-direction: column; }
.l-rr-section__content { order:2; width: 100%; padding: 1.5rem 1.5rem 5rem 1.5rem; }
.l-rr-section__content h3 { font-size: 2em; }
html[lang="ja"] .l-rr-section__content h3 { font-size: 1.85em; }
html[lang="ja"] .l-rr-section__content h4 { font-size: 1.25em; line-height: 1.7; }
html[lang="ja"] .l-rr-section__content p { font-size: 1.25em; line-height: 1.7; }

.l-rr-section__portrait { order:1; width:100%; position: static; margin:0 0 5rem 0; }
.l-rr-section__portrait figure { aspect-ratio: 3 / 4; }
.l-rr-section__portrait figcaption { font-size: 0.6em; }
html[lang="ja"] .l-rr-section__portrait figcaption { font-size: 0.6em; }
.l-rr-section__photo { position:static; margin:0 0 5rem 0; }
.l-rr-section__photo figure { aspect-ratio: 3 / 4; }
.l-rr-section__photo figcaption { font-size: 0.6em; }

.l-rr-section--profile { padding:3.5rem 3.5rem 0 3.5rem; flex-direction: column; gap:1.5rem 0; }
.l-rr-profile { width: 100%; }
.l-rr-profile__name { font-size: 2em; line-height: 1.4; font-weight: 200; font-variation-settings: 'wght' 250; margin: 0 0 0.5em 0; }
.l-rr-profile__name span { font-weight: 100; font-variation-settings: 'wght' 150; }
.l-rr-profile p { font-size: 0.9em; }
html[lang="ja"] .l-rr-profile p { font-size: 1em; line-height: 1.6; font-weight: 300; font-variation-settings: 'wght' 325; }
html[lang="ja"] .l-rr-profile p.en { line-height: 1.5; text-align: left; font-weight: 300; font-variation-settings: 'wght' 325; }
.l-rr-profile__portrait { width:100%; }

.l-rr-section--closeup figure { aspect-ratio: 3 / 4; width:calc(100% + 1.2rem ); margin:0 -0.6rem; }
.l-rr-section--closeup figure img { object-fit:cover; width:100%; height:100%; }
.l-rr-section--closeup figcaption { font-size: 0.7em; line-height: 1.4; font-weight: 400; margin: 1em 0 0 0; padding:0 1rem; }

.l-rr-section--title { font-size: 4em; }

.l-rr-related { padding:0; }
.l-rr-related ul { grid-template-columns: repeat(2, 1fr); gap: 2rem 0.6rem; }
.l-rr-related ul li figcaption .l-rr-related__title { font-size: 1.8em; }
html[lang="ja"] .l-rr-related ul li figcaption .l-rr-related__title { font-size: 2em; margin: 0.5em 0 0.25em 0; }
.l-rr-related ul li figcaption .l-rr-related__name { font-size: 1.35em; }
.l-rr-related ul li figcaption .l-rr-related__name--ja { font-size: 1.25em; }
.l-rr-related ul li figcaption .l-rr-related__data { font-size: 0.75em; }
.l-rr-related ul li figcaption .l-rr-related__data--ja { font-size: 0.85em; line-height: 1.5em; }

.rr-home .l-rr-related ul { grid-template-columns: repeat(1, 1fr); gap: 4rem 0.6rem; }
.rr-home .l-rr-related ul li figcaption { padding:0 2rem; }
.rr-home .l-rr-related ul li figcaption .l-rr-related__title { font-size: 2.75em; line-height: 1em; }
html[lang="ja"] .rr-home .l-rr-related ul li figcaption .l-rr-related__title { font-size: 3em; line-height: 1.2em; font-variation-settings: 'wght' 100; margin: 0.75em 0 0.25em 0; }
.rr-home .l-rr-related ul li figcaption .l-rr-related__name { font-size: 1.75em; line-height: 1em; }
.rr-home .l-rr-related ul li figcaption .l-rr-related__name--ja { font-size: 1.45em; }
.rr-home .l-rr-related ul li figcaption .l-rr-related__data { font-size: 1em; line-height: 1.4em; padding:0 7em 0 0; }
.rr-home .l-rr-related ul li figcaption .l-rr-related__data--ja { font-size: 1em; line-height: 1.6em; }

.l-rr-footer { padding:2rem; }
.l-rr-footer__logo { width:4.5rem; margin-left:0; }
.l-rr-footer__lang { font-size: 1.4em; }

}

/* size */
html,body {
  font-size: clamp(11px, 1.1vw, 17.5px) !important;
}

@media screen and (max-width: 600px) {
  html,body {
    font-size: clamp(0px, 3.3vw, 100px) !important;
  }
}
