@charset "utf-8";

/* font
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

/* var
------------------------------------------------------------- */
:root {
  --c_black: #000000;
  --c_white: #ffffff;
  --f_base: "EB Garamond","Shippori Mincho","Noto Serif JP", serif;
  --max_w: 1710px;
  --max_h: calc(var(--max_w) / 2);
  }

/* size
------------------------------------------------------------- */
html,body {
  font-size: clamp(11px, 1vw, 16px) !important;
}

@media screen and (max-width: 600px) {
  html,body {
    font-size: clamp(0px, 4.5vw, 100px) !important;
  }
}

/* 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: normal; }
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;}

/* iOS reset
------------------------------------------------------------- */
input[type=text] { border:none; -webkit-border-radius : 0; -webkit-appearance : none; -webkit-tap-highlight-color : var(--c_black); }
input[type="submit"],
input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration { display: none; }
input[type="submit"]::focus,input[type="button"]::focus { outline-offset: -0.15em; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; }
button,input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; background: transparent; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* 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: .05em; font-weight: normal;
  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 2s ease 0s 1 both; }
}
@keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } }

/* link
------------------------------------------------------------- */
a[href] { cursor: pointer !important; }
.l-wrap a { transition: background-color .1s ease-in-out, color .1s ease-in-out, border-color .1s ease-in-out; text-decoration: none; }
.l-wrap a:link, .l-wrap a:hover, .l-wrap a:active, .l-wrap a:visited { color: var(--c_black); }
.l-side .text a,
.l-side .profile a { text-decoration: underline; text-decoration-color: #999; text-underline-offset: 0.15em; }
.l-side .text a:hover,
.l-side .profile a:hover { text-decoration-color: var(--c_black); }

/* utility
------------------------------------------------------------- */
.u-pc { display:inline; }
.u-sp { display:none; }
.u-br-pc { display:block; }
.u-br-sp { display:none; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.u-sr-only:focus,
.u-sr-only:focus-visible { position: fixed; top: 8px; left: 8px; width: auto; height: auto; margin: 0; padding: .6em .9em; clip: auto; clip-path: none; white-space: normal; z-index: 10; background: var(--c_black); color: var(--c_white); border-radius: .25rem; box-shadow: 0 0 0 3px var(--c_white), 0 0 0 5px var(--c_black); text-decoration: none; font-weight: normal; }
:focus-visible { outline: 2px solid var(--c_black); outline-offset: 2px; }

/* l-slideshow
------------------------------------------------------------- */
.l-slideshow { position: fixed; top:0; left:0; width: 75%; height: 100vh; overflow: hidden; border: solid 5rem var(--c_white); border-top: solid 8rem var(--c_white); border-bottom: solid 5rem var(--c_white); }
.l-slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.l-slideshow img.active { opacity: 1; }

/* l-wrap
------------------------------------------------------------- */
.l-wrap { display: flex; flex-direction: row-reverse; max-width: var(--max_w); margin:auto; }
.l-wrap h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.25em; text-align: left; display: inline; position: fixed; left: 5rem; top: 3.25rem; }
html[lang="en"] .l-wrap h2 { font-size: 1.3rem; letter-spacing: 0.1em; }

/* l-side
------------------------------------------------------------- */
.l-side { width: 25%; padding: 4rem 5rem 5rem 0; text-align: left; background-color: var(--c_white); }
.l-side::before { content: ""; position: fixed; top: 0; right: 0; width: 27.5%; height: 4rem; background: linear-gradient(to top, transparent 0%, var(--c_white) 50%); pointer-events: none; z-index: 10; }
.l-side::after { content: ""; position: fixed; bottom: 0; right: 0; width: 27.5%; height: 4rem; background: linear-gradient(to bottom, transparent 0%, var(--c_white) 50%); pointer-events: none; z-index: 10; }
.l-side .logo { padding: 0 2rem 4rem 2rem; }
.l-side .lead { font-size: 0.75rem; line-height: 2.2; letter-spacing: 0.3em; text-align: center; margin:1.25rem 0; padding:1.25rem 0; border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; }
.l-side h3 { font-size: 1.125rem; line-height: 1.8; letter-spacing: .1em; margin: 3em 0 1em 0; }
.l-side .text { font-size: 0.85rem; line-height: 2; letter-spacing: .1em; }
html[lang="en"] .l-side .text { line-height: 1.5; }
.l-side .caption { font-size: .625rem; line-height: 2; padding-top: 1.25rem; }
.l-side .kun { display: flex; flex-direction: column; justify-content: center; gap:0.75em 0; margin:1em 0; padding:1.5em 1.25em 1.25em 1.25em; border-top:solid 1px #ddd; border-bottom: solid 1px #ddd; }
.l-side .kun .kun_name { display: flex; justify-content: center; align-items: center; gap:0 0.5em; }
.l-side .kun .kun_name span:nth-child(1) { font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.2em; font-weight: normal; }
.l-side .kun .kun_name span:nth-child(2) { font-size: 1rem; line-height: 1.1; letter-spacing: 0.2em; font-weight: normal; }
.l-side .kun .kun_profile { font-size: 0.85rem; line-height: 1.5; letter-spacing: 0.2em; text-align: center; }
html[lang="en"] .l-side .kun .kun_profile { font-size: 0.75rem; letter-spacing: 0.1em; }
.l-side .profile { margin: 3rem 0; padding: 1.5em 0; display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; font-size: .75rem; line-height: 2; letter-spacing: .025em; border-top:solid 1px #ddd; border-bottom: solid 1px #ddd; }
.l-side .profile dt { font-weight: 500; white-space: nowrap; }
.l-side .pageback { font-size: .85rem; line-height: 1.1; text-align: center; margin: 1.5rem 0 3rem 0; display: grid; grid-template-columns: 1fr auto 1fr; }
.l-side .pageback .navi_prev { text-align: left; }
.l-side .pageback .navi_next { text-align: right; }
.l-side .lang_nav { font-size: 1rem; line-height: 1; text-align: center; margin: 2rem 0; letter-spacing: .25em; display: flex; justify-content: center; align-items: center; gap: 0 1em; }
.l-side .lang_nav > *:first-child { border-right: solid 1px #ddd; padding-right: 1em; }
.l-side .lang_nav a { text-decoration: none; opacity: .35; transition: opacity .3s; }
.l-side .lang_nav a:hover { opacity: 1; }
.l-side .lang_nav .lang_current { opacity: 1; }
.l-side .sci_tohoku { border-top:solid 1px #ddd; padding-top:2rem; }

/* l-list
------------------------------------------------------------- */
.l-list { padding:1.25rem 0; border-top: solid 1px #ddd; }
.l-list a { display: flex; gap: 1.25rem; align-items: flex-start; }
.l-list_thumb { flex-shrink: 0; overflow: hidden; width: 40%; aspect-ratio: 1/1; }
.l-list_thumb img { object-fit: cover; width:100%; height:100%; }
.l-list_txt { display:flex; flex-direction: column; gap:0.25em 0; }
.l-list_name { display: flex; align-items: center; gap:0 0.35em; margin:0.5em 0 0.35em 0; }
.l-list_name span:nth-child(1) { font-size: 1.2rem; line-height: 1.1; letter-spacing: 0.15em; font-weight: 400; }
html[lang="en"] .l-list_name span:nth-child(1) { font-size: 1.1rem; line-height: 1.1; letter-spacing: 0.15em; }
.l-list_name span:nth-child(2) { font-size: 0.75rem; line-height: 1.1; letter-spacing: 0.15em; font-weight: 400; white-space: nowrap; }
.l-list_profile { font-size: 0.75rem; line-height: 1.5; letter-spacing: .05em; padding:0 0 0 0.15em; }
html[lang="en"] .l-list_profile { font-size: 0.7rem; line-height: 1.35; letter-spacing: .1em; padding:0 0 0 0.1em; }
.l-list_date { font-size: 0.75rem; padding: 0 0 0 0.15em; }

/* l-footer
------------------------------------------------------------- */
.l-footer { font-size: .75rem; line-height: 1.1; letter-spacing: .075rem; text-align: right; position: fixed; bottom: 2.15rem; left: 5rem; }

/* wide: 水平センタリング（常時）
------------------------------------------------------------- */
@media screen and (min-width: 1980px) {
  :root { --max_w: 1980px; }
}

@media screen and (min-width: 1711px) {
  .l-slideshow { left: calc((100vw - var(--max_w)) / 2); width: calc(var(--max_w) * 0.75); }
  .l-wrap h2 { left: calc((100vw - var(--max_w)) / 2 + 5rem); }
  .l-footer { left: calc((100vw - var(--max_w)) / 2 + 5rem); }
  .l-side::before { right: calc((100vw - var(--max_w)) / 2); width: calc(var(--max_w) * 0.275); }
  .l-side::after { right: calc((100vw - var(--max_w)) / 2); width: calc(var(--max_w) * 0.275); }
}

/* wide: 縦レターボックス（16:9 以下のみ）
------------------------------------------------------------- */
@media screen and (min-width: 1711px) and (max-aspect-ratio: 2/1) {
  .l-wrap { position: fixed; top: calc((100vh - var(--max_h)) / 2); left: calc((100vw - var(--max_w)) / 2); width: var(--max_w); height: var(--max_h); }
  .l-side { height: 100%; overflow-y: auto; }
  .l-slideshow { top: calc((100vh - var(--max_h)) / 2); height: var(--max_h); }
  .l-wrap h2 { top: calc((100vh - var(--max_h)) / 2 + 3.25rem); }
  .l-footer { bottom: calc((100vh - var(--max_h)) / 2 + 2.15rem); }
  .l-side::before { top: calc((100vh - var(--max_h)) / 2); }
  .l-side::after { bottom: calc((100vh - var(--max_h)) / 2); }
}

/* sp
------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .u-pc { display:none; }
  .u-sp { display:inline; }
  .u-br-pc { display:none; }
  .u-br-sp { display:block; }

  .l-slideshow { position: relative; width: 100%; height: auto; border: solid 1.5rem var(--c_white); border-top: solid 1.5rem var(--c_white); border-bottom: solid 1.5rem var(--c_white); aspect-ratio: 1/1; }

  .l-wrap { flex-direction: column; padding-top:15.5rem; }
  .l-wrap h2 { font-size: 1rem; line-height: 2.2; text-align: center; position: relative; left: auto; top: auto; padding: 2rem 1.5rem 3rem 1.5rem; letter-spacing: 0.15em; }

  .l-side { width: 100%; padding: 0 1.5rem 0 1.5rem; }
  .l-side::before { display:none; }
  .l-side::after { display:none; }
  .l-side .logo { position: absolute; top:3rem; left:0; right:0; padding: 0 4rem; }
  .l-side .lead { font-size: 0.7rem; letter-spacing: 0.2em; }
  .l-side h3 { font-size: 1rem; margin: 2.5em 0 0.75em; }
  .l-side .text { font-size: 0.8rem; line-height: 2; }
  .l-side .kun span:nth-child(1) { font-size: 1.25rem; }
  .l-side .kun span:nth-child(2) { font-size: 0.85rem; }
  .l-side .profile { margin: 3em 0; font-size: 0.7rem; }
  .l-side .pageback { font-size: 0.75rem; }

  .l-list { padding: 1.25rem 0; }
  .l-list a { gap: 1rem; }
  .l-list_thumb { width: 45%; }
  .l-list_name span:nth-child(1) { font-size: 1.1rem; }
  .l-list_name span:nth-child(2) { font-size: 0.75rem; }
  .l-list_profile { font-size: 0.7rem; }
  .l-list_date { font-size: 0.65rem; }

  .l-footer { position: relative; bottom: auto; left: auto; text-align: left; padding: 1.5rem 1.5rem 3.5rem 1.5rem; font-size: 0.5rem; line-height: 1.5em; letter-spacing: 0.1em; }
}