/*
Theme Name: 言の葉 KOTONOHA
Description: 日本・ジョージアのメディア用テーマ。サービスページを含む各ページの文章を3言語で編集できます。Bogoと言の葉 投稿管理を併用します。
Version: 0.7.1
Requires at least: 6.6
Requires PHP: 8.1
Author: KOTONOHA
License: GPL-2.0-or-later
Text Domain: kotonoha
*/
/* 色・寸法を集約し、WordPressテーマへの移行時も再利用できるようにする。 */
@font-face {
  font-family:"Noto Sans JP";
  src:url("assets/NotoSansJP.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}
:root {
  --red:#e60012;
  --coral:#ff616e;
  --ink:#000;
  --cream:#fffce9;
  --blush:#fbf8f8;
  --line:#e5e5e5;
  --page-width:100%;
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--font);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p {
  margin:0
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%;
  object-fit:contain
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #32758c;
  outline-offset:5px
}
button:disabled {
  cursor:default
}
ul {
  list-style:none;
  padding:0;
  margin:0
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:1000;
  background:#fff;
  padding:12px
}
.skip-link:focus {
  top:12px
}
.site-shell {
  max-width:var(--page-width);
  margin:auto;
  overflow:clip
}
.section-anchor {
  scroll-margin-top:24px
}
.pill {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:35px;
  padding:6px 24px;
  border-radius:999px;
  border:0;
  font-size:16px;
  line-height:1.5;
  white-space:nowrap
}
.pill-red {
  background:var(--red);
  color:#fff
}
.pending-link {
  cursor:default
}
.site-header {
  height:135px;
  display:flex;
  align-items:flex-start;
  padding:29px 21px 0 36px;
  position:relative;
  gap:46px;
  z-index:10;
  background:#fff
}
.brand {
  display:block;
  flex:none;
  width:171px;
  height:59px
}
.brand img {
  width:171px;
  height:59px
}
.main-nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:17px;
  font-size:16px;
  font-weight:500;
  color:var(--red)
}
.main-nav a {
  padding:3px 0
}
.main-nav a:hover,.footer-nav-row a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.header-tools {
  display:flex;
  align-items:center;
  gap:29px;
  margin-left:auto;
  margin-top:11px
}
.search-toggle {
  border:0;
  background:none;
  padding:0;
  width:33px;
  height:33px
}
.search-toggle img {
  width:33px;
  height:33px
}
.languages {
  height:36px;
  width:188px;
  border:1px solid var(--red);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:var(--red);
  font-size:16px;
  letter-spacing:2.4px
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  background:#fff;
  padding-bottom:151px
}
.hero-art {
  position:relative;
  width:100%;
  aspect-ratio:1280 / 756;
  isolation:isolate
}
.hero-skyline {
  position:absolute;
  width:100.390625%;
  height:58.428%;
  left:0;
  top:40.079%;
  z-index:0;
  max-width:none
}
.hero-slide {
  position:absolute;
  border-radius:21px;
  background:#f1f1f1;
  z-index:1
}
.hero-slide-main {
  left:14.53125%;
  top:11.50794%;
  width:71.25%;
  height:75.5291%
}
.hero-slide-left {
  left:-3.515625%;
  top:26.1905%;
  width:11.875%;
  height:55.291%
}
.hero-slide-right {
  left:91.5625%;
  top:26.1905%;
  width:11.875%;
  height:55.291%
}
.hero-emblem-bg {
  position:absolute;
  left:32.03125%;
  top:71.2963%;
  width:36.640625%;
  height:26.9841%;
  z-index:2
}
.hero-leaf {
  position:absolute;
  left:46.5625%;
  top:76.7196%;
  width:7.96875%;
  height:13.6243%;
  z-index:3
}
.hero-tagline {
  position:absolute;
  left:29.84375%;
  top:65.3439%;
  width:40.78125%;
  height:32.9365%;
  z-index:4
}
.hero-georgian {
  position:absolute;
  left:39.765625%;
  top:91.5344%;
  width:20.703125%;
  height:5.556%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  z-index:4
}
.hero-georgian img {
  width:auto;
  height:76.19%;
  max-width:10.2%
}
.hero-georgian img:nth-child(2n) {
  height:47.62%;
  margin-top:4.15%
}
.hero-georgian img:first-child,.hero-georgian img:nth-child(3) {
  margin-top:4.15%
}
.hero-decoration {
  position:absolute;
  z-index:5
}
.wine {
  left:83.477%;
  top:7.4074%;
  width:5.6274%;
  height:10.6185%
}
.grapes {
  left:11.25%;
  top:27.4%;
  width:6.826%;
  height:12.4393%
}
.instrument {
  left:12.5781%;
  top:61.6402%;
  width:6.1719%;
  height:9.6561%
}
.georgia {
  left:68.5156%;
  top:78.9683%;
  width:4.1406%;
  height:5.0265%
}
.food {
  left:83.4817%;
  top:51.8519%;
  width:6.56%;
  height:8.7339%
}
.interview {
  background:var(--cream);
  padding:28px 0 86px;
  min-height:736px
}
.interview-heading {
  margin-left:6.796875%;
  padding-right:24px
}
.interview-heading h2 {
  font-size:30px;
  line-height:51px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:15px
}
.interview-heading h2 img {
  width:47px;
  height:47px
}
.interview-heading p {
  font-size:16px;
  line-height:32px
}
.interview-track {
  display:flex;
  gap:43px;
  padding:0 6.796875%;
  margin-top:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  scroll-padding-left:87px
}
.interview-track::-webkit-scrollbar {
  display:none
}
.interview-card {
  flex:0 0 308px;
  background:#fff;
  border-radius:15px;
  padding:33px 26px 18px;
  min-height:443px;
  scroll-snap-align:start
}
.interview-photo {
  position:relative;
  width:247px;
  height:247px;
  margin:0 auto 14px;
  max-width:100%
}
.interview-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.new-label {
  position:absolute;
  left:0;
  top:0;
  width:87px;
  height:30px;
  background:var(--coral);
  color:#fff;
  font-weight:700;
  font-size:12px;
  display:grid;
  place-items:center
}
.interview-card h3 {
  font-size:16px;
  line-height:1.6;
  letter-spacing:.03em;
  font-weight:700;
  margin-top:12px
}
.interview-card p {
  font-size:12px;
  line-height:1.6;
  letter-spacing:.03em;
  margin:10px 0 10px
}
.interview-card time {
  color:#868686;
  font-size:14px;
  line-height:1.6;
  font-weight:300;
  letter-spacing:.03em
}
.interview-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:48px 11.328125% 0 6.953125%
}
.carousel-pager {
  display:flex;
  align-items:center;
  gap:16px
}
.carousel-pager button {
  background:none;
  border:0;
  padding:0;
  width:30px;
  height:30px
}
.carousel-pager button img {
  width:30px;
  height:30px
}
.view-all {
  border:0;
  background:none;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:16px
}
.grid-mark {
  display:grid;
  grid-template-columns:repeat(3,7px);
  gap:2px
}
.grid-mark i {
  width:7px;
  height:7px;
  background:#d9d9d9;
  border-radius:1px
}
.interview-track.expanded {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:visible;
  scroll-snap-type:none
}
.interview-track.expanded .interview-card {
  min-width:0
}
.essay {
  padding:44px 0 170px
}
.essay-intro {
  height:287px;
  position:relative;
  width:573px;
  margin-inline:auto;
  max-width:calc(100% - 48px)
}
.essay-speech {
  position:absolute;
  left:calc(50% - 218.5px);
  top:0;
  width:153px;
  height:124px;
  transform:scaleX(-1)
}
/* 文字は吹き出しの楕円の内側（しっぽを除く）の中央に置き、訳文が長くても枠からはみ出さないようにする。 */
.essay-kicker {
  position:absolute;
  left:calc(50% - 206.5px);
  top:8px;
  width:129px;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:14px;
  line-height:2;
  font-weight:700;
  overflow-wrap:anywhere
}
.essay-kicker:not(:lang(ja)) {
  line-height:1.6
}
.essay-notebook {
  position:absolute;
  left:calc(50% - 46.5px);
  top:56px;
  width:53px;
  height:50px
}
.essay-intro h2 {
  position:absolute;
  left:calc(50% - 218.5px);
  top:101px;
  width:437px;
  max-width:100%;
  font-size:40px;
  font-weight:900;
  line-height:2;
  text-align:center
}
.essay-intro h2 small {
  display:block;
  font-size:20px;
  font-weight:700;
  line-height:2;
  margin-top:-13px;
  margin-left:0
}
.essay-description {
  position:absolute;
  left:calc(50% - 245.5px);
  top:223px;
  font-size:16px;
  line-height:2;
  width:491px;
  text-align:center
}
.essay-container {
  width:calc(100% - 150px);
  margin:auto;
  max-width:1130px
}
.essay-filter {
  height:90px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
  margin-bottom:20px
}
.essay-filter h3 {
  font-size:18px;
  line-height:2;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:13px;
  padding-left:6px
}
.essay-filter h3 img {
  width:63px;
  height:63px
}
.essay-filter .pill {
  width:178px;
  margin-right:24px
}
.essay-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 27px;
  padding-left:6px;
  padding-right:20px
}
.essay-card {
  min-width:0;
  position:relative;
  min-height:350px
}
.essay-photo {
  background:#e5e5e5;
  border-radius:5px;
  aspect-ratio:350 / 200;
  width:100%
}
.essay-copy {
  position:relative;
  padding:7px 16px 0;
  max-width:300px
}
.essay-copy--recommended { padding-right:64px; }
.essay-copy time {
  font-size:14px;
  line-height:1.8;
  letter-spacing:.2em;
  font-weight:300
}
.essay-copy h3 {
  font-size:16px;
  line-height:1.8;
  letter-spacing:.2em;
  font-weight:700
}
.essay-copy p {
  font-size:16px;
  line-height:1.8;
  letter-spacing:.2em
}
.recommend-badge {
  position:absolute;
  right:7px;
  top:11px;
  width:43px;
  height:43px
}
.word {
  background:var(--blush);
  padding-bottom:43px;
  position:relative
}
.word-header {
  height:331px;
  position:relative;
  isolation:isolate
}
.word-header-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:331px;
  object-fit:fill;
  z-index:-1
}
.word-arch {
  position:absolute;
  top:40px;
  left:calc(50% - 71px);
  width:142px;
  height:142px
}
.word-book {
  position:absolute;
  top:71px;
  left:calc(50% - 27px);
  width:55px;
  height:68px
}
.word-header h2 {
  position:absolute;
  top:139px;
  left:0;
  right:0;
  text-align:center;
  font-weight:900;
  font-size:40px;
  line-height:80px
}
.word-header h2 small {
  font-size:12px;
  display:block;
  line-height:24px;
  font-weight:400;
  letter-spacing:.4em;
  margin-top:-17px
}
.word-stamp {
  position:absolute;
  top:-72px;
  right:0;
  width:295px;
  height:423px;
  z-index:2
}
.word-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px 15px;
  max-width:927px;
  margin:29px auto 0
}
.word-tile {
  aspect-ratio:1;
  background:white;
  border:1px solid #d0d0d0
}
.word-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
  margin-top:60px
}
.more-words {
  color:var(--coral);
  display:flex;
  align-items:center;
  gap:16px;
  font-size:16px;
  min-height:30px
}
.plus-circle {
  border:1px solid var(--coral);
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:12px
}
.word-index {
  width:300px
}
.news {
  padding-top:75px
}
.news h2 {
  font-size:40px;
  font-weight:900;
  line-height:80px;
  text-align:center;
  width:438px;
  margin-left:19px
}
.news h2 small {
  font-weight:400;
  font-size:12px;
  line-height:24px;
  display:block;
  margin-top:-17px
}
.news-list {
  width:850px;
  max-width:calc(100% - 80px);
  margin:10px 0 0 136px;
  display:grid;
  gap:5px
}
.news-list li {
  min-height:75px;
  display:flex;
  align-items:center;
  padding:25px 40px;
  gap:12px;
  font-size:15px;
  letter-spacing:.03em;
  line-height:25px
}
.news-label {
  background:#ffac38;
  color:#fff;
  text-align:center;
  width:84px;
  flex:none;
  font-size:12px;
  letter-spacing:0;
  line-height:25px
}
.news-list time {
  color:#868686;
  white-space:nowrap
}
.news-list p {
  font-size:15px
}
.news-list li>img {
  width:20px;
  height:20px;
  margin-left:auto;
  flex:none
}
.service {
  padding:162px 24px 93px
}
.service-banner {
  width:861px;
  max-width:100%;
  height:269px;
  margin:auto;
  display:grid;
  grid-template-columns:338px 1fr;
  overflow:hidden
}
.service-brand {
  background:var(--coral);
  position:relative
}
.service-map {
  position:absolute;
  right:42px;
  top:16px;
  width:103px;
  height:75px
}
.service-logo {
  position:absolute;
  left:32px;
  top:103px;
  width:243px;
  height:83px
}
.service-icons {
  position:absolute;
  left:38px;
  right:48px;
  bottom:14px;
  display:flex;
  align-items:end;
  justify-content:space-between
}
.service-icons>img {
  height:40px;
  width:auto;
  max-width:42px
}
.service-trees {
  position:relative;
  display:block;
  width:41px;
  height:40px
}
.service-trees img {
  position:absolute
}
.service-trees img:nth-child(1) {
  top:0;
  left:11px
}
.service-trees img:nth-child(2) {
  top:6px;
  right:0
}
.service-trees img:nth-child(3) {
  bottom:0;
  left:0
}
.service-landscape {
  position:relative;
  overflow:hidden
}
.service-landscape>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 53%
}
.service-link {
  position:absolute;
  bottom:32px;
  left:60px;
  width:261px;
  min-height:53px;
  font-size:20px;
  font-weight:700;
  color:var(--coral);
  background:#fff
}
.contact {
  height:366px;
  background:#fbf8f3;
  position:relative;
  overflow:hidden;
  border-top:1px solid #ddd
}
.contact-wave-top {
  position:absolute;
  top:0;
  left:-13px;
  width:479px;
  height:208px;
  z-index:1
}
.contact-copy {
  position:absolute;
  top:117px;
  left:152px;
  width:288px;
  text-align:center;
  z-index:2
}
.contact-copy h2 {
  font-size:40px;
  font-weight:700;
  line-height:60px;
  position:relative
}
.contact-copy h2 img {
  position:absolute;
  right:5px;
  top:16px;
  width:52px;
  height:39px
}
.contact-copy p {
  font-size:16px;
  line-height:32px
}
.contact-link {
  background:#fff;
  border:1px solid var(--coral);
  min-height:49px;
  width:288px;
  margin-top:40px
}
.contact-photo {
  position:absolute;
  width:510px;
  height:279px;
  top:42px;
  right:96px;
  border-radius:23px;
  overflow:hidden
}
.contact-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.contact-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(227,214,165,.43)
}
.contact-wave-bottom {
  position:absolute;
  bottom:-6px;
  right:0;
  width:626px;
  height:238px;
  z-index:1
}
.site-footer {
  width:1062px;
  max-width:calc(100% - 48px);
  margin:auto;
  padding-top:124px;
  padding-bottom:188px
}
.back-to-top {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-family:var(--font);
  font-size:16px;
  color:var(--red);
  line-height:24px;
  width:130px;
  margin:auto
}
.back-to-top img {
  width:20px;
  height:20px;
  transform:rotate(-90deg)
}
.footer-nav-row {
  margin-top:61px;
  min-height:126px;
  border-top:1px solid var(--coral);
  border-bottom:1px solid var(--coral);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.footer-nav-row nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-size:14px;
  color:var(--red);
  font-weight:500;
  white-space:nowrap
}
.social {
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap
}
.social p {
  font-size:14px;
  font-weight:700;
  color:var(--red)
}
.social img {
  height:30px
}
.footer-meta {
  display:flex;
  justify-content:space-between;
  padding:12px 0 0 18px;
  gap:20px
}
.legal {
  display:flex;
  gap:17px;
  color:#9f9f9f;
  font-size:14px;
  white-space:nowrap;
  align-items:start;
  padding-top:4px
}
.credits {
  display:grid;
  gap:13px;
  min-width:230px
}
.credits>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.credits small {
  font-size:12px;
  color:#757575;
  letter-spacing:.03em;
  white-space:nowrap
}
.credits img {
  height:34px;
  width:84px;
  object-fit:contain
}
.credits-logo-link {
  display:block;
  line-height:0;
  transition:opacity .2s
}
.credits-logo-link:hover {
  opacity:.7
}
dialog {
  width:min(620px,calc(100% - 32px));
  border:0;
  border-radius:18px;
  padding:30px;
  box-shadow:0 24px 100px #0003;
  max-height:80vh
}
dialog::backdrop {
  background:#0006
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.dialog-top h2 {
  font-size:24px
}
.dialog-close {
  border:0;
  background:#fff;
  color:var(--red);
  font-size:32px;
  width:44px;
  height:44px
}
#search-form label {
  display:block;
  margin-bottom:10px
}
.search-input-row {
  display:flex;
  gap:10px
}
.search-input-row input {
  min-width:0;
  flex:1;
  border:1px solid #bbb;
  border-radius:8px;
  padding:12px;
  font-size:16px
}
.search-input-row button {
  flex:none
}
#search-status {
  margin:18px 0;
  font-size:14px;
  color:#666
}
#search-results a {
  display:block;
  padding:15px;
  border-top:1px solid var(--line);
  color:var(--red)
}
@media(min-width:1281px) {
  .site-shell {
    box-shadow:0 0 0 1px #fafafa
  }
}
@media(max-width:1150px) {
  .site-header {
    gap:30px;
    padding-left:24px;
    padding-right:24px
  }
  .main-nav {
    gap:20px;
    font-size:14px
  }
  .header-tools {
    gap:14px
  }
  .languages {
    width:150px;
    gap:10px
  }
  .brand,.brand img {
    width:150px
  }
  .essay-copy {
    padding-left:8px;
    padding-right:8px
  }
  .essay-copy p,.essay-copy h3 {
    font-size:14px;
    letter-spacing:.14em
  }
  .word-grid {
    width:calc(100% - 120px)
  }
  .news-list {
    margin-left:10%;
    max-width:80%
  }
  .contact-photo {
    width:42%;
    right:5%
  }
  .contact-copy {
    left:8%;
    width:288px
  }
  .footer-nav-row {
    flex-wrap:wrap;
    justify-content:center;
    padding:24px 0;
    gap:24px
  }
  .footer-nav-row nav {
    gap:26px
  }
}
@media(max-width:900px) {
  .site-header {
    height:110px;
    align-items:center;
    padding:20px 24px;
    gap:24px
  }
  .brand,.brand img {
    width:150px;
    height:auto
  }
  .header-tools {
    margin-top:0;
    gap:20px
  }
  .languages {
    width:155px
  }
  .menu-toggle {
    display:flex;
    width:44px;
    height:44px;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    background:#fff;
    border:0;
    padding:10px
  }
  .menu-toggle span {
    width:24px;
    height:2px;
    background:var(--red);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
  }
  .main-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin:0;
    background:white;
    padding:24px;
    border-bottom:1px solid var(--coral);
    box-shadow:0 15px 20px #0001;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    text-align:center;
    font-size:16px
  }
  .main-nav.is-open {
    display:grid
  }
  .hero {
    padding-bottom:90px
  }
  .interview-heading {
    margin-left:32px
  }
  .interview-heading h2 {
    font-size:26px
  }
  .interview-heading p {
    font-size:14px;
    line-height:1.9;
    max-width:85%
  }
  .interview-track {
    padding:0 32px;
    scroll-padding-left:32px;
    gap:24px;
    margin-top:24px
  }
  .interview {
    padding-bottom:60px;
    min-height:0
  }
  .interview-controls {
    margin-left:32px;
    margin-right:32px
  }
  .interview-track.expanded {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .essay-intro {
    margin:auto;
    width:573px
  }
  .essay-container {
    width:calc(100% - 64px)
  }
  .essay-grid {
    padding:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 24px
  }
  .essay-card {
    min-height:0
  }
  .essay-photo {
    height:auto
  }
  .essay-copy {
    max-width:none;
    padding:14px 10px
  }
  .essay-copy p,.essay-copy h3 {
    font-size:14px;
    letter-spacing:.12em
  }
  .recommend-badge {
    top:14px;
    right:10px
  }
  .essay-copy--recommended { padding-right:64px; }
  .essay-filter .pill {
    margin-right:0;
    width:140px
  }
  .essay {
    padding-bottom:130px
  }
  .word-stamp {
    width:200px;
    height:auto;
    top:-40px;
    right:0
  }
  .word-grid {
    width:calc(100% - 80px);
    gap:12px
  }
  .news-list {
    width:auto;
    margin:16px 32px 0;
    max-width:none
  }
  .news-list li {
    padding:20px 10px;
    gap:12px
  }
  .news-list p {
    font-size:14px
  }
  .service {
    padding-top:120px;
    padding-bottom:70px
  }
  .service-banner {
    grid-template-columns:39.25% 60.75%;
    height:250px
  }
  .service-logo {
    left:10%;
    width:80%
  }
  .service-map {
    right:10%;
    width:30%
  }
  .service-icons {
    left:10%;
    right:10%
  }
  .service-link {
    left:50%;
    transform:translateX(-50%);
    width:70%
  }
  .contact-copy {
    left:5%;
    width:38%
  }
  .contact-copy h2 {
    font-size:34px
  }
  .contact-copy h2 img {
    right:0;
    width:42px
  }
  .contact-link {
    width:100%;
    font-size:14px
  }
  .contact-wave-bottom {
    width:52%;
    height:auto
  }
  .contact-wave-top {
    width:38%;
    height:auto
  }
  .contact-photo {
    right:4%;
    width:46%
  }
  .footer-meta {
    flex-wrap:wrap;
    gap:35px;
    padding-left:0
  }
  .credits {
    margin-left:auto
  }
  .site-footer {
    padding-bottom:80px
  }
}
@media(max-width:600px) {
  .site-header {
    height:90px;
    padding:16px 18px
  }
  .brand,.brand img {
    width:130px
  }
  .header-tools {
    gap:10px
  }
  .search-toggle,.search-toggle img {
    width:27px;
    height:27px
  }
  .languages {
    display:none
  }
  .hero {
    padding-bottom:32px
  }
  .hero-art {
    aspect-ratio:390 / 300
  }
  .hero-slide {
    border-radius:12px
  }
  .hero-slide-main {
    left:12%;
    width:76%;
    top:6%;
    height:71%
  }
  .hero-slide-left {
    left:-12%;
    width:17%;
    top:18%;
    height:52%
  }
  .hero-slide-right {
    left:95%;
    width:17%;
    top:18%;
    height:52%
  }
  .hero-skyline {
    top:32%;
    height:60%;
    width:100%;
    object-fit:fill
  }
  .hero-emblem-bg {
    top:66%;
    height:25%;
    left:28%;
    width:44%
  }
  .hero-leaf {
    top:70.8%;
    left:45%;
    height:13%;
    width:10%
  }
  .hero-tagline {
    top:59%;
    left:23%;
    width:54%;
    height:32%
  }
  .hero-georgian {
    left:36%;
    width:28%;
    top:84%;
    height:5%
  }
  .wine {
    top:0%;
    left:84%;
    width:8%;
    height:12%
  }
  .grapes {
    left:5%;
    top:22%;
    width:10%;
    height:13%
  }
  .instrument {
    left:9%;
    top:64%;
    width:10%;
    height:12%
  }
  .food {
    left:86%;
    top:50%;
    width:10%;
    height:12%
  }
  .georgia {
    left:73%;
    top:73%;
    width:7%;
    height:7%
  }
  .interview {
    padding-top:28px;
    padding-bottom:38px
  }
  .interview-heading {
    margin-left:24px
  }
  .interview-heading h2 {
    font-size:23px;
    gap:10px;
    line-height:42px
  }
  .interview-heading h2 img {
    width:36px;
    height:36px
  }
  .interview-heading p {
    max-width:none;
    font-size:13px;
    line-height:1.9;
    margin-top:8px
  }
  .interview-track {
    padding:0 24px;
    scroll-padding-left:24px;
    gap:18px
  }
  .interview-card {
    flex-basis:280px;
    padding:25px 21px 20px;
    min-height:415px
  }
  .interview-photo {
    width:238px;
    height:238px
  }
  .interview-card h3 {
    font-size:15px
  }
  .interview-controls {
    margin:30px 24px 0
  }
  .view-all {
    font-size:13px;
    gap:8px
  }
  .interview-track.expanded {
    grid-template-columns:1fr
  }
  .interview-track.expanded .interview-card {
    max-width:380px;
    margin:0 auto;
    width:100%
  }
  .interview-track.expanded .interview-photo {
    width:100%;
    height:auto;
    aspect-ratio:1
  }
  .essay {
    padding:45px 0 105px
  }
  .essay-intro {
    width:100%;
    max-width:none;
    height:310px;
    margin:0
  }
  .essay-speech {
    left:calc(50% - 150px);
    top:0;
    width:138px;
    height:112px
  }
  .essay-kicker {
    left:calc(50% - 139px);
    top:7px;
    width:116px;
    height:85px;
    font-size:12px
  }
  .essay-notebook {
    left:calc(50% + 5px);
    top:58px;
    width:44px;
    height:44px
  }
  .essay-intro h2 {
    left:0;
    right:0;
    top:105px;
    width:100%;
    font-size:36px
  }
  .essay-intro h2 small {
    margin-left:0;
    font-size:18px;
    margin-top:-8px
  }
  .essay-description {
    top:224px;
    left:24px;
    width:calc(100% - 48px);
    font-size:13px;
    text-align:center;
    line-height:1.9
  }
  .essay-description br {
    display:none
  }
  .essay-container {
    width:calc(100% - 40px)
  }
  .essay-filter {
    height:76px;
    margin-top:0;
    margin-bottom:22px
  }
  .essay-filter h3 {
    font-size:14px;
    gap:9px;
    padding-left:0
  }
  .essay-filter h3 img {
    width:44px;
    height:44px
  }
  .essay-filter .pill {
    width:82px;
    font-size:13px;
    min-height:31px;
    padding:4px 12px
  }
  .essay-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .essay-copy {
    padding:12px 8px 0;
    max-width:none
  }
  .essay-copy time {
    font-size:12px;
    letter-spacing:.12em
  }
  .essay-copy h3 {
    font-size:16px
  }
  .essay-copy p {
    font-size:14px;
    line-height:1.9
  }
  .recommend-badge {
    top:12px;
    right:5px;
    width:34px;
    height:34px
  }
  .essay-copy--recommended { padding-right:52px; }
  .word-header,.word-header-bg {
    height:280px
  }
  .word-header-bg {
    object-fit:fill
  }
  .word-header h2 {
    font-size:36px
  }
  .word-stamp {
    width:125px;
    top:-28px
  }
  .word-grid {
    width:calc(100% - 64px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:24px;
    gap:12px
  }
  .word-actions {
    margin-top:32px;
    gap:20px
  }
  .word-index {
    width:260px;
    font-size:14px;
    min-height:40px
  }
  .more-words {
    font-size:14px
  }
  .word {
    padding-bottom:36px
  }
  .news {
    padding:54px 24px 0
  }
  .news h2 {
    width:auto;
    margin:0;
    text-align:left;
    font-size:36px;
    line-height:1.5
  }
  .news h2 small {
    margin-top:0;
    font-size:12px;
    line-height:2
  }
  .news-list {
    margin:24px 0 0
  }
  .news-list li {
    display:grid;
    grid-template-columns:84px 1fr 20px;
    padding:16px 0;
    gap:8px 12px;
    border-bottom:1px solid #f0f0f0
  }
  .news-list li p {
    grid-column:1/3;
    grid-row:2;
    line-height:1.9
  }
  .news-list li>img {
    grid-column:3;
    grid-row:1/3;
    margin:0
  }
  .news-list time {
    font-size:13px
  }
  .service {
    padding:65px 24px 60px
  }
  .service-banner {
    height:auto;
    grid-template-columns:1fr
  }
  .service-brand {
    height:228px;
    max-height:none
  }
  .service-map {
    width:80px;
    right:35px;
    top:12px;
    height:60px
  }
  .service-logo {
    width:210px;
    height:72px;
    top:75px;
    left:calc(50% - 105px)
  }
  .service-icons {
    left:35px;
    right:35px;
    bottom:17px
  }
  .service-landscape {
    height:210px
  }
  .service-link {
    bottom:25px;
    min-height:45px;
    font-size:17px;
    max-width:261px
  }
  .contact {
    height:auto;
    min-height:610px;
    padding:73px 24px 68px;
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .contact-copy {
    position:relative;
    top:auto;
    left:auto;
    width:min(288px,100%);
    margin-bottom:34px
  }
  .contact-copy h2 {
    font-size:34px;
    line-height:55px
  }
  .contact-copy p {
    font-size:14px
  }
  .contact-copy h2 img {
    right:6px;
    top:12px
  }
  .contact-link {
    margin-top:22px
  }
  .contact-photo {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:auto;
    aspect-ratio:510/279;
    border-radius:18px
  }
  .contact-wave-top {
    width:75%;
    left:-12%;
    height:auto
  }
  .contact-wave-bottom {
    width:90%;
    height:auto;
    bottom:-10px;
    right:-5%;
    pointer-events:none
  }
  .site-footer {
    padding-top:62px;
    padding-bottom:48px;
    max-width:calc(100% - 48px)
  }
  .footer-nav-row {
    margin-top:40px;
    gap:27px;
    padding:25px 0
  }
  .footer-nav-row nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 26px;
    font-size:13px;
    width:100%
  }
  .social {
    width:100%;
    justify-content:center;
    gap:9px
  }
  .social p {
    font-size:12px;
    margin-right:3px
  }
  .footer-meta {
    padding-top:22px;
    gap:28px
  }
  .legal {
    white-space:normal;
    flex-wrap:wrap;
    gap:12px;
    font-size:11px
  }  .credits {
    margin:0;
    width:100%;
    gap:14px
  }
  .credits>div {
    justify-content:space-between
  }
  .credits small {
    font-size:11px
  }
  dialog {
    padding:22px
  }
  .search-input-row {
    flex-wrap:wrap
  }
  .search-input-row input {
    flex-basis:100%
  }
  .search-input-row .pill {
    width:100%
  }
}
/* 書き出した弧状の文字は、文字自体の縦横比を維持する。 */
.word-arch {
  width:154.5px;
  height:62px;
  left:calc(50% - 77.25px)
}
/* 非表示属性をコンポーネントの表示指定より優先する。 */
[hidden] {
  display:none!important
}
@media(min-width:901px) {
  .word-actions {
    gap:34px
  }
}
.hero-japan {
  position:absolute;
  left:28.125%;
  top:78.1746%;
  width:3.90625%;
  height:7.2751%;
  z-index:5
}

/* 横長の画面でも、ヘッダーとヒーロー全体を最初の一画面に収める。 */
@media (min-width:601px) {
  .hero {
    --hero-bottom-gap:clamp(16px,4svh,48px);
    --hero-art-height:min(59.0625vw,calc(100svh - var(--site-header-height) - var(--hero-bottom-gap)));
    padding-bottom:var(--hero-bottom-gap);
  }
  .hero-art { height:var(--hero-art-height); aspect-ratio:auto; }
  .hero-skyline { object-fit:fill; }
  /* 写真は全幅の構成を保ち、中央のロゴと文字は縦横比を維持する。 */
  .hero-emblem-bg { left:calc(50% - var(--hero-art-height) * .304233); width:calc(var(--hero-art-height) * .62037); }
  .hero-leaf { left:calc(50% - var(--hero-art-height) * .058201); width:calc(var(--hero-art-height) * .134921); }
  .hero-tagline { left:calc(50% - var(--hero-art-height) * .34127); width:calc(var(--hero-art-height) * .690476); }
  .hero-georgian { left:calc(50% - var(--hero-art-height) * .17328); width:calc(var(--hero-art-height) * .350529); }
  .hero-japan { left:calc(50% - var(--hero-art-height) * .37037); width:calc(var(--hero-art-height) * .066138); }
  .hero-decoration.georgia { left:calc(50% + var(--hero-art-height) * .313492); width:calc(var(--hero-art-height) * .070106); }
  .hero-decoration { object-fit:contain; }
}

/* ヒーローの白い面で固定背景を隠し、操作ボタンは下部のピンクの帯の右端に置く。 */
.hero-slide { overflow:hidden; background:#e8eee7; }
.hero-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 44%;
  opacity:0;
  transition:opacity 1.1s ease-in-out;
}
.hero-photo.is-active { opacity:1; }
.hero-slide-left .hero-photo, .hero-slide-right .hero-photo { object-position:center; }
.hero-tagline { filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
.hero-japan, .hero-decoration.georgia { filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff) drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff); }
.hero-japan { filter:drop-shadow(.4px 0 0 var(--red)) drop-shadow(-.4px 0 0 var(--red)) drop-shadow(0 .4px 0 var(--red)) drop-shadow(0 -.4px 0 var(--red)) drop-shadow(0 1px 0 #fff); }
.hero-controls {
  position:absolute;
  right:clamp(20px,3vw,48px);
  bottom:4%;
  z-index:6;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 8px 3px 4px;
  border:1px solid #eee;
  border-radius:40px;
  background:#fffffff0;
  box-shadow:0 2px 12px #17392312;
}
.hero-controls[hidden] { display:none; }
.hero-controls button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; }
.hero-controls button:hover { background:#e600120b; }
.hero-controls button:focus-visible { outline-offset:1px; }
.hero-dots { display:flex; }
.hero-dots button::before { content:""; width:6px; height:6px; border-radius:50%; background:#9b9b9b; transition:width .25s, background-color .25s; }
.hero-dots button[aria-current="true"]::before { width:17px; border-radius:8px; background:var(--red); }
.hero-toggle-icon { width:10px; height:12px; border-inline:3px solid var(--red); }
.hero-toggle.is-paused .hero-toggle-icon { width:0; height:0; margin-left:3px; border:6px solid transparent; border-right:0; border-left:9px solid var(--red); }

/* 飾りごとに周期と揺れの中心を変え、ゆったりした小さな動きを付ける。 */
.hero-decoration, .hero-japan, .hero-leaf { animation:hero-float 5.4s ease-in-out infinite; }
.hero-decoration.wine { transform-origin:50% 80%; animation-name:hero-sway; animation-duration:4.8s; }
.hero-decoration.grapes { transform-origin:50% 8%; animation-name:hero-sway; animation-duration:5.8s; animation-delay:-1.4s; }
.hero-decoration.instrument { animation-duration:6.2s; animation-delay:-2.6s; }
.hero-decoration.food { animation-duration:5.7s; animation-delay:-3.1s; }
.hero-decoration.georgia { animation-duration:6.6s; animation-delay:-1.8s; }
.hero-japan { animation-duration:6.6s; animation-delay:-4.5s; }
.hero-leaf { animation-name:hero-leaf-sway; animation-duration:6.8s; animation-delay:-.8s; transform-origin:50% 90%; }
.hero.is-motion-paused .hero-decoration, .hero.is-motion-paused .hero-japan, .hero.is-motion-paused .hero-leaf { animation-play-state:paused; }
@keyframes hero-float {
  0%, 100% { transform:translateY(0) rotate(-1.5deg); }
  50% { transform:translateY(-5px) rotate(1.5deg); }
}
@keyframes hero-sway {
  0%, 100% { transform:rotate(-3deg); }
  50% { transform:translateY(-3px) rotate(3deg); }
}
@keyframes hero-leaf-sway {
  0%, 100% { transform:rotate(-2deg); }
  50% { transform:rotate(2deg); }
}
@media (max-width:900px) {
  .hero-controls { bottom:2%; }
  .hero-controls button { width:28px; height:28px; }
}
@media (max-width:600px) {
  .hero-controls { bottom:9%; right:clamp(4px,2vw,12px); gap:2px; padding:2px 4px 2px 2px; }
  .hero-controls button { width:24px; height:24px; }
  .hero-slide-main .hero-photo { object-position:center 40%; }
}
@media (max-width:360px) {
  .hero-controls { right:4px; gap:0; padding-inline:1px 3px; }
}
/* 横向きなど高さが低い画面でも、操作ボタンを写真下の帯に収める。 */
@media (min-width:601px) and (max-height:500px) {
  .hero-controls { bottom:1%; padding:2px 4px; }
  .hero-controls button { width:24px; height:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-photo, .hero-dots button::before { transition:none; }
  .hero-decoration, .hero-japan, .hero-leaf { animation:none; }
}
@media(max-width:600px) {
  .hero-japan {
    left:21%;
    top:75%;
    width:5%;
    height:7%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}