@charset "UTF-8";
/*------------------------------------------------------------


  common.css


------------------------------------------------------------*/
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-Light.woff2") format("woff2"),
         url("../fonts/CormorantGaramond-Light.woff") format("woff"),
         url("../fonts/CormorantGaramond-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2"),
         url("../fonts/CormorantGaramond-Regular.woff") format("woff"),
         url("../fonts/CormorantGaramond-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Light.woff2") format("woff2"),
         url("../fonts/Inter-Light.woff") format("woff"),
         url("../fonts/Inter-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2"),
         url("../fonts/Inter-Regular.woff") format("woff"),
         url("../fonts/Inter-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*============================================================
  reset
============================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, nav, section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: transparent;
}

ins {
  background-color: transparent;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: transparent;
  color: #000;
  font-style: normal;
  font-weight: normal;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  margin: 0;
  padding: 0;
  outline: none;
  vertical-align: middle;
  font-family: inherit;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

select {
  font-family: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  font-family: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  display: block;
  font-family: inherit;
  border: none;
  border-radius: 0;
  background: none;
  outline: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

strong, em, b, i, small, address {
  font-weight: normal;
  font-style: normal;
}

summary {
  display: block;
  cursor: pointer;
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

main {
  display: block;
}


/*============================================================
  global
============================================================*/
* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html {
  width: 100%;
  color: var(--color-black);
  font-size: 10px;
  text-align: left;
  background-color: var(--color-white);
  scroll-behavior: smooth;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  html { font-size: calc(100vw / 144); /* 0.694vw（横幅1440pxで割った数値） */ }
}

@media (max-width: 768px) and (orientation: portrait) {
  html { font-size: calc(100vw / 40); /* 2.5vw（横幅400pxで割った数値） */ }
}

:root {
  --color-white: #fff;
  --color-black: #080808;
  --color-matteblack: #181818;
  --color-gray: #484848;
  --color-darkgray: #282828;
  --color-lightgray: #b8b8b8;
  --color-mossgreen: #384038;
  --color-orange: #F5A200;
  --grid: 1.6rem;
  --grid-2: calc(var(--grid) * 2); /* 3.2rem / 1.6rem */
  --grid-3: calc(var(--grid) * 3); /* 4.8rem / 2.4rem */
  --grid-4: calc(var(--grid) * 4); /* 6.4rem / 3.2rem */
  --grid-5: calc(var(--grid) * 5); /* 8rem / 4rem */
  --grid-6: calc(var(--grid) * 6); /* 9.6rem / 4.8rem */
  --grid-7: calc(var(--grid) * 7); /* 11.2rem / 5.6rem */
  --grid-8: calc(var(--grid) * 8); /* 12.8rem / 6.4rem; */
  --grid-9: calc(var(--grid) * 9); /* 14.4rem / 7.2rem; */
  --grid-10: calc(var(--grid) * 10); /* 16rem / 8rem */
  --grid-12: calc(var(--grid) * 12); /* 19.2rem / 9.6rem */
  --grid-14: calc(var(--grid) * 14); /* 22.4rem / 11.2rem */
  --grid-16: calc(var(--grid) * 16); /* 25.6rem / 12.8rem */
  --grid-18: calc(var(--grid) * 18); /* 28.8rem / 14.4rem */
  --grid-20: calc(var(--grid) * 20); /* 32rem / 16rem */
  --grid-22: calc(var(--grid) * 22); /* 35.2rem / 17.6rem */
  --grid-24: calc(var(--grid) * 24); /* 38.4rem / 19.2rem */
  --grid-26: calc(var(--grid) * 26); /* 41.6rem / 20.8rem */
  --grid-28: calc(var(--grid) * 28); /* 44.8rem / 22.4rem */
  --grid-30: calc(var(--grid) * 30); /* 48rem / 24rem */
  --grid-32: calc(var(--grid) * 32); /* 51.2rem / 25.6rem */
  --grid-34: calc(var(--grid) * 34); /* 54.4rem / 27.2rem */
  --grid-36: calc(var(--grid) * 36); /* 57.6rem / 28.8rem */
  --grid-38: calc(var(--grid) * 38); /* 60.8rem / 30.4rem */
  --grid-40: calc(var(--grid) * 40); /* 64rem / 32rem */
  --grid-42: calc(var(--grid) * 42); /* 67.2rem / 33.6rem */
  --grid-44: calc(var(--grid) * 44); /* 70.4rem / 35.2rem */
  --grid-46: calc(var(--grid) * 46); /* 73.6rem / 36.8rem */
  --grid-48: calc(var(--grid) * 48); /* 76.8rem */
  --grid-50: calc(var(--grid) * 50); /* 80rem */
  --grid-52: calc(var(--grid) * 52); /* 83.2rem; */
  --grid-54: calc(var(--grid) * 54); /* 86.4rem; */
  --grid-56: calc(var(--grid) * 56); /* 89.2rem; */
  --grid-58: calc(var(--grid) * 58); /* 92.8rem; */
  --grid-60: calc(var(--grid) * 60); /* 96rem; */
  --grid-62: calc(var(--grid) * 62); /* 99.2rem; */
  --grid-64: calc(var(--grid) * 64); /* 102.4rem; */
  --grid-66: calc(var(--grid) * 66); /* 105.6rem; */
  --grid-68: calc(var(--grid) * 68); /* 108.8rem; */
  --grid-70: calc(var(--grid) * 70); /* 112rem; */
  --grid-72: calc(var(--grid) * 72); /* 115.2rem; */
  --grid-74: calc(var(--grid) * 74); /* 118.4rem; */
  --grid-76: calc(var(--grid) * 76); /* 121.6rem; */
  --grid-78: calc(var(--grid) * 78); /* 124.8rem; */
  --grid-80: calc(var(--grid) * 80); /* 128rem; */
  --grid-82: calc(var(--grid) * 82); /* 131.2rem; */
  --grid-84: calc(var(--grid) * 84); /* 134.4rem; */
  --grid-86: calc(var(--grid) * 86); /* 137.6rem; */
  --grid-88: calc(var(--grid) * 88); /* 140.8rem; */
  --font-serif : "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
                 "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
  --font-sans-serif : "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
                      "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Yu Gothic UI",
                      "メイリオ", "Meiryo", "Meiryo UI", sans-serif;
  --font-inter : "Inter", sans-serif;
  --font-cormorant : "Cormorant Garamond", serif;
}

@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --grid: 0.8rem;
  }
}

body {
  width: 100%;
  font-family: var(--font-serif);
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
  font-variant-ligatures: no-common-ligatures;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overflow: auto;
  position: relative;
}

html.paused,
html.paused body {
  overflow: hidden;
}

main {
  width: 100%;
  padding-top: var(--grid-8);
  overflow: hidden;
}

body#top main {
  padding-top: 0;
}

main::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  background: url("../images/icon-loader.svg") center center no-repeat;
  background-size: contain;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 24;
}

main.active::before {
  display: none;
}

a {
  color: var(--color-black);
  outline: 0;
  text-decoration: none;
}

a[href] { cursor: pointer; }
a[href^="tel"]{ color: inherit; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:active { text-decoration: none; }

strong,
em,
span,
b,
sup {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

sup {
  font-size: 1rem !important;
  font-weight: normal !important;
}

/*  font family
--------------------*/
.ff-sans-serif {
  font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
               "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
}

.ff-sans {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
               "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Yu Gothic UI",
               "メイリオ", "Meiryo", "Meiryo UI", sans-serif;
}

.ff-inter {
  font-family: "Inter", sans-serif;
}

.ff-cormorant {
  font-family: "Cormorant Garamond", serif;
}

/*  font-weight
--------------------*/
.fw-light { font-weight: 300; }
.fw-normal { font-weight: normal; }
.fw-bold { font-weight: bold; }


/*  font-size
--------------------*/
.fs-furigana { font-size: 80%; }


/*  br
--------------------*/
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  br.sw {
    display: none !important;
    font-size: 0 !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  br.lw {
    display: none !important;
    font-size: 0 !important;
  }
}

/*  img
--------------------*/
img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*  video
--------------------*/
video.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video.contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*  none
--------------------*/
.none {
  display: none !important;
  font-size: 0 !important;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  .none-lw {
    display: none !important;
    font-size: 0 !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .none-sw {
    display: none !important;
    font-size: 0 !important;
  }
}

/*  hidden
--------------------*/
.hidden {
  display: block;
  width: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  .hidden-lw {
    display: block;
    width: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .hidden-sw {
    display: block;
    width: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
  }
}


/*============================================================
  a-link-button
============================================================*/
.a-link-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.88rem;
  outline: 1px solid transparent;
  outline-offset: -1px;
  border-radius: 0.4rem;
  padding: 0.88rem;
}

.a-link-button .text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.48rem;
}

.a-link-button .text .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-button .text .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-button .icon-arrow {
  width: 0.8rem;
  height: auto;
}

.a-link-button.color-black {
  color: var(--color-black);
  outline-color: rgba(0, 0, 0, 0.24);
}

.a-link-button.color-black .icon-arrow {
  fill: var(--color-black);
}

.a-link-button.color-white {
  color: var(--color-white);
  outline-color: rgba(255, 255, 255, 0.24);
}

.a-link-button.color-white .icon-arrow {
  fill: var(--color-white);
}

@media (hover: hover) {
  .a-link-button.color-black:not([disabled]):hover {
    color: var(--color-white);
    background-color: var(--color-black);
    outline-color: transparent;
  }

  .a-link-button.color-black:not([disabled]):hover .icon-arrow {
    fill: var(--color-white);
  }

  .a-link-button.color-white:not([disabled]):hover {
    color: var(--color-black);
    background-color: var(--color-white);
    outline-color: transparent;
  }

  .a-link-button.color-white:not([disabled]):hover .icon-arrow {
    fill: var(--color-black);
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .a-link-button {
    gap: 0.64rem;
  }

  .a-link-button .text {
    gap: 0.32rem;
  }

  .a-link-button .text .en {
    font-size: 1.04rem;
  }

  .a-link-button .text .jp {
    font-size: 0.96rem;
  }
}


/*============================================================
  a-link-bar
============================================================*/
.a-link-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.a-link-bar.contact {
  color: var(--color-black);
  background-color: var(--color-orange);
}

.a-link-bar.video {
  color: var(--color-white);
  background-color: var(--color-darkgray);
}

.a-link-bar > .div-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.4rem;
  height: 100%;
}

.a-link-bar > .div-1 .figure-image {
  width: var(--grid-5);
  height: 100%;
}

.a-link-bar > .div-1 .figure-image .picture::after {
  opacity: 0.08;
}

.a-link-bar > .div-1 .h-title {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
}

.a-link-bar > .div-1 .h-title .genre {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-bar > .div-1 .h-title .title {
  font-family: var(--font-serif);
  font-size: 1.68rem;
  letter-spacing: 0.08em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-bar > .div-1 .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  line-height: 1.36;
  margin-block: -0.18em;
}

.a-link-bar > .div-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-end;
  margin-right: 0.8rem;
}

.a-link-bar > .div-2 .text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.8rem;
}

.a-link-bar > .div-2 .text .en {
  font-family: var(--font-cormorant);
  font-size: 1.44rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

.a-link-bar > .div-2 .text .jp {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
}

.a-link-bar > .div-2 .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  outline: 1px solid;
  border-radius: 2rem;
}

.a-link-bar > .div-2 .icon svg.icon-arrow {
  fill: var(--color-black);
  width: 0.6rem;
  height: auto;
  margin-right: -0.16rem;
}

.a-link-bar.contact > .div-2 .icon {
  outline-color: rgba(0, 0, 0, 0.24);
}

.a-link-bar.contact > .div-2 .icon svg.icon-arrow {
  fill: var(--color-black);
}

.a-link-bar.video > .div-2 .icon {
  outline-color: rgba(255, 255, 255, 0.24);
}

.a-link-bar.video > .div-2 .icon svg.icon-arrow {
  fill: var(--color-white);
}

@media (hover: hover) {
  .a-link-bar:hover .figure-image img {
    filter: brightness(0.88);
  }

  .a-link-bar.contact:hover .h-title,
  .a-link-bar.contact:hover .p-description,
  .a-link-bar.contact:hover .text {
    opacity: 0.64;
  }

  .a-link-bar.video:hover .h-title,
  .a-link-bar.video:hover .p-description,
  .a-link-bar.video:hover .text {
    opacity: 0.8;
  }

  .a-link-bar.contact:hover > .div-2 .icon {
    background-color: var(--color-black);
    outline-color: transparent;
  }

  .a-link-bar.contact:hover > .div-2 .icon svg.icon-arrow {
    fill: var(--color-white);
  }

  .a-link-bar.video:hover > .div-2 .icon {
    background-color: var(--color-white);
    outline-color: transparent;
  }

  .a-link-bar.video:hover > .div-2 .icon svg.icon-arrow {
    fill: var(--color-black);
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .a-link-bar > .div-1 {
    gap: 1.2rem;
  }

  .a-link-bar > .div-1 .h-title .genre {
    display: none;
    font-size: 0.8rem;
  }

  .a-link-bar > .div-1 .h-title .title {
    font-size: 1.2rem;
  }

  .a-link-bar > .div-1 .p-description {
    display: none;
  }

  .a-link-bar > .div-2 {
    gap: 0.64rem;
  }

  .a-link-bar > .div-2 .text {
    gap: 0.48rem;
  }

  .a-link-bar > .div-2 .text .en {
    font-size: 0.96rem;
  }

  .a-link-bar > .div-2 .text .jp {
    font-size: 0.96rem;
  }
}


/*============================================================
  a-link-pagetop
============================================================*/
.a-link-pagetop {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.a-link-pagetop .text {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-pagetop .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  outline: 1px solid rgba(0, 0, 0, 0.24);
  outline-offset: -1px;
  border-radius: 1.6rem;
}

.a-link-pagetop .icon svg.icon-arrow {
  fill: var(--color-black);
  width: 0.6rem;
  height: auto;
  margin-top: -0.08rem;
  transform: rotate(-90deg);
}

@media (hover: hover) {
  .a-link-pagetop:hover .text {
    opacity: 0.64;
  }

  .a-link-pagetop:hover .icon {
    background-color: var(--color-black);
    outline-color: transparent;
  }

  .a-link-pagetop:hover .icon svg.icon-arrow {
    fill: var(--color-white);
  }
}


/*============================================================
  a-link-article
============================================================*/
.a-link-article {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.a-link-article::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  opacity: 0.08;
}

@media (hover: hover) {
  .a-link-article:hover::after {
    opacity: 0.16;
  }

  .a-link-article:hover .figure-image img {
    filter: brightness(0.88);
  }

  .a-link-article:hover .h-title,
  .a-link-article:hover .h-text,
  .a-link-article:hover .time-post,
  .a-link-article:hover .dl-category,
  .a-link-article:hover .p-text {
    opacity: 0.8;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .a-link-article {
    gap: calc(var(--grid) * 1.5);
  }
}


/*============================================================
  a-link-video
============================================================*/
.a-link-video {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
}

.a-link-video .text {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.8rem;
}

.a-link-video .text .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.a-link-video .text .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.08em;
  margin-block: -0.096em;
}

.a-link-video .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 1.6rem;
  outline: 1px solid;
}

.a-link-video .icon-arrow {
  width: 1.2rem;
  height: auto;
  margin-right: -0.32rem;
}

.a-link-video.color-black {
  color: var(--color-black);
}

.a-link-video.color-black .icon {
  outline-color: rgba(0, 0, 0, 0.24);
}

.a-link-video.color-black .icon-arrow {
  fill: var(--color-black);
}

.a-link-video.color-white {
  color: var(--color-white);
}

.a-link-video.color-white .icon {
  outline-color: rgba(255, 255, 255, 0.24);
}

.a-link-video.color-white .icon-arrow {
  fill: var(--color-white);
}

@media (hover: hover) {
  .a-link-video.color-black:hover .text {
    opacity: 0.64;
  }

  .a-link-video.color-white:hover .text {
    opacity: 0.8;
  }

  .a-link-video.color-black:hover .icon {
    background-color: var(--color-black);
    outline-color: transparent;
  }

  .a-link-video.color-black:hover .icon-arrow {
    fill: var(--color-white);
  }

  .a-link-video.color-white:hover .icon {
    background-color: var(--color-white);
    outline-color: transparent;
  }

  .a-link-video.color-white:hover .icon-arrow {
    fill: var(--color-black);
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .a-link-video {
    gap: 1.2rem;
  }

  .a-link-video .text {
    gap: 0.48rem;
  }

  .a-link-video .text .en {
    font-size: 1.04rem;
  }

  .a-link-video .text .jp {
    font-size: 0.96rem;
  }
}


/*============================================================
  button-prev, button-next
============================================================*/
.button-prev,
.button-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  outline: 1px solid;
  outline-offset: -1px;
  border-radius: 2.4rem;
}

.button-prev .icon-arrow,
.button-next .icon-arrow {
  width: 0.8rem;
  height: auto;
}

.button-prev .icon-arrow {
  transform: scaleX(-1) translateX(8%);
}

.button-next .icon-arrow {
  transform: translateX(8%);
}

.button-prev.color-black,
.button-next.color-black {
  color: var(--color-black);
  outline-color: rgba(0, 0, 0, 0.24);
}

.button-prev.color-black .icon-arrow,
.button-next.color-black .icon-arrow {
  fill: var(--color-black);
}

.button-prev.color-white,
.button-next.color-white {
  color: var(--color-white);
  outline-color: rgba(255, 255, 255, 0.24);
}

.button-prev.color-white .icon-arrow,
.button-next.color-white .icon-arrow {
  fill: var(--color-white);
}

@media (hover: hover) {
  .button-prev.color-black:not([disabled]):hover,
  .button-next.color-black:not([disabled]):hover {
    color: var(--color-white);
    background-color: var(--color-black);
    outline-color: transparent;
  }

  .button-prev.color-black:not([disabled]):hover .icon-arrow,
  .button-next.color-black:not([disabled]):hover .icon-arrow {
    fill: var(--color-white);
  }

  .button-prev.color-white:not([disabled]):hover,
  .button-next.color-white:not([disabled]):hover {
    color: var(--color-black);
    background-color: var(--color-white);
    outline-color: transparent;
  }

  .button-prev.color-white:not([disabled]):hover .icon-arrow,
  .button-next.color-white:not([disabled]):hover .icon-arrow {
    fill: var(--color-black);
  }
}


/*============================================================
  button-pulldown
============================================================*/
.button-pulldown {
  display: inline-flex;
  align-items: center;
  gap: 0.66rem;
}

.button-pulldown .icon-arrow {
  fill: var(--color-black);
  width: 0.6rem;
  height: auto;
  margin-bottom: -0.08rem;
  transform: rotate(90deg);
}

.button-pulldown.active .icon-arrow {
  transform: rotate(-90deg);
}

.button-pulldown .jp {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.064em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.button-pulldown .en {
  font-family: var(--font-cormorant);
  font-size: 1.44rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.button-pulldown + .ul-menu-pulldown {
  display: none;
  margin-top: 0.8rem;
}

.button-pulldown.active + .ul-menu-pulldown {
  display: block;
}

@media (hover: hover) {
  .button-pulldown:hover {
    opacity: 0.64;
  }
}


/*============================================================
  label
============================================================*/
.label-genre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  color: var(--color-white);
  font-family: var(--font-cormorant);
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  background-color: var(--color-gray);
  border-radius: 4.8rem;
  overflow: hidden;
}

.label-vision {
  display: inline-block;
  color: var(--color-white);
  font-family: var(--font-sans-serif);
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.64rem 0.4rem;
  overflow: hidden;
}


/*============================================================
  figure-image
============================================================*/
.figure-image {
  position: relative;
  z-index: 0;
}

.figure-image .picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.figure-image .picture.square {
  aspect-ratio: 1 / 1;
}

.figure-image .picture.rectangle {
  aspect-ratio: 4 / 3;
}

.figure-image .picture.rectangle.vertical {
  aspect-ratio: 3 / 4;
}

.figure-image .picture::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}


/*============================================================
  h
============================================================*/
.h-heading-page {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.h-heading-page .en {
  font-family: var(--font-cormorant);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.14em;
}

.h-heading-page .jp {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-block: -0.3em;
}

.h-heading-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--grid) * 1.5);
}

.h-heading-section .en {
  font-family: var(--font-cormorant);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.14em;
}

.h-heading-section .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-block: -0.3em;
}

.h-heading-concept {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.h-heading-concept .en {
  font-family: var(--font-cormorant);
  font-size: 4rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.14em;
}

.h-heading-concept .jp {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-block: -0.3em;
}

.h-heading-content {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.h-heading-content .en {
  font-family: var(--font-cormorant);
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.14em;
}

.h-heading-content .jp {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-block: -0.3em;
}

.h-heading-featured {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.h-heading-featured .en {
  font-family: var(--font-cormorant);
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.14em;
}

.h-heading-featured .jp {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin-block: -0.3em;
}

@media (max-width: 768px) and (orientation: portrait) {
  .h-heading-page .en {
    font-size: 1.28rem;
  }

  .h-heading-page .jp {
    font-size: 1.6rem;
  }

  .h-heading-section {
    gap: calc(var(--grid) * 1.5);
  }

  .h-heading-section .en {
    font-size: 1.6rem;
  }

  .h-heading-section .jp {
    font-size: 0.96rem;
  }

  .h-heading-concept {
    gap: var(--grid-2);
  }

  .h-heading-concept .en {
    font-size: 2.8rem;
  }

  .h-heading-concept .jp {
    font-size: 1.6rem;
  }

  .h-heading-content {
    gap: var(--grid-2);
  }

  .h-heading-content .en {
    font-size: 2.4rem;
  }

  .h-heading-content .jp {
    font-size: 1.6rem;
  }

  .h-heading-featured {
    gap: var(--grid);
  }

  .h-heading-featured .en {
    font-size: 2.8rem;
  }

  .h-heading-featured .jp {
    font-size: 1.04rem;
  }
}


/*============================================================
  p
============================================================*/
.p-tagline-page {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-block: -0.5em;
}

.p-theme-section {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
  text-align: center;
}

.p-theme-section .jp {
  font-family: var(--font-serif);
  font-size: 0.96rem;
  letter-spacing: 0.24em;
  margin-block: -0.096em;
}

.p-theme-section .en {
  font-family: var(--font-cormorant);
  font-size: 6.4rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.24em;
}

.p-tagline-section {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.p-tagline-section .jp {
  font-family: var(--font-serif);
  font-size: 1.68rem;
  letter-spacing: 0.16em;
  line-height: 2;
  margin-block: -0.5em;
}

.p-tagline-section .en {
  font-family: var(--font-cormorant);
  font-size: 1.36rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
}

.p-tagline-content {
  font-family: var(--font-sans-serif);
  font-size: 0.96rem;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-block: -0.5em;
}

.p-notes {
  font-family: var(--font-sans-serif);
  font-size: 0.96rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  padding-left: 1.12em;
  text-indent: -1.12em;
  margin-block: -0.42em;
}

.p-notes::before {
  content:"※";
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-right: 0.16em;
}

.p-alert {
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  line-height: 1.84;
  text-align: center;
  margin-block: -0.42em;
}

@media (max-width: 768px) and (orientation: portrait) {
  .p-tagline-page {
    font-size: 1.12rem;
    line-height: 1.84;
    margin-block: -0.42em;
  }

  .p-theme-section {
    gap: var(--grid);
  }

  .p-theme-section .jp {
    font-size: 0.96rem;
  }

  .p-theme-section .en {
    font-size: 4rem;
  }

  .p-tagline-section {
    gap: var(--grid-2);
  }

  .p-tagline-section .jp {
    font-size: 1.44rem;
  }

  .p-tagline-section .en {
    font-size: 1.2rem;
  }

  .p-tagline-content {
    font-size: 0.8rem;
  }

  .p-notes {
    font-size: 0.8rem;
  }
}


/*============================================================
  ul
============================================================*/
.ul-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.ul-menu-anchor {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--grid-2);
}

.ul-menu-anchor > li .jp {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.064em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.ul-menu-anchor > li .en {
  font-family: var(--font-cormorant);
  font-size: 1.44rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

.ul-menu-select {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--grid-2);
}

.ul-menu-select > li {
  position: relative;
}

.ul-menu-select > li .div-select {
  white-space: nowrap;
}

.ul-menu-select > li .div-select .icon-arrow {
  fill: var(--color-black);
  width: 0.6rem;
  height: auto;
  transform: rotate(90deg);
  vertical-align: middle;
}

.ul-menu-select > li .div-select select {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin-block: -0.1em;
  cursor: pointer;
}

.ul-menu-pulldown {
  padding: var(--grid);
  width: 100%;
}

.ul-menu-pulldown > li + li {
  margin-top: 1.2rem;
}

.ul-menu-pulldown > li > a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  padding-block: 0.4rem;
  margin-block: -0.096em;
  white-space: nowrap;
}

@media (hover: hover) {
  .ul-menu-anchor > li > a:hover {
    opacity: 0.64;
  }

  .ul-menu-pulldown > li > a:hover {
    opacity: 0.64;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .ul-menu-anchor > li .jp {
    font-size: 1.12rem;
  }

  .ul-menu-anchor > li .en {
    font-size: 1.28rem;
  }

  .ul-menu-select > li .div-select select {
    font-size: 1.04rem;
  }

  .ul-menu-pulldown > li > a {
    font-size: 1.04rem;
  }
}


/*============================================================
  div-head
============================================================*/
.div-head-page {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  row-gap: var(--grid-2);
  width: var(--grid-78);
  padding-block: var(--grid-2);
  margin-inline: auto;
}

.div-head-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--grid-2);
  width: var(--grid-78);
  margin-inline: auto;
}

.div-head-content {
  display: flex;
  flex-direction: column;
  align-items: normal;
  gap: var(--grid-2);
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-head-page {
    width: auto;
    padding-block: var(--grid-3);
    margin-inline: var(--grid-2);
  }

  .div-head-section {
    width: auto;
    margin-inline: var(--grid-2);
  }

  .div-head-content {
    gap: var(--grid-2);
  }
}


/*============================================================
  div-column
============================================================*/
.div-column-large {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: 100%;
}

.div-column-large .h-heading {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.div-column-large .h-heading .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
}

.div-column-large .h-heading .jp {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-column-large .div-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.div-column-large .p-description {
  font-family: var(--font-serif);
  font-size: 1.36rem;
  letter-spacing: 0.08em;
  line-height: 2;
  margin-block: -0.5em;
}

.div-column-medium {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: 100%;
}

.div-column-medium .h-heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

.div-column-medium .h-heading .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
}

.div-column-medium .h-heading .jp {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em ;
}

.div-column-medium .div-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.div-column-medium .p-description {
  font-family: var(--font-serif);
  font-size: 1.36rem;
  letter-spacing: 0.08em;
  line-height: 2;
  margin-block: -0.5em;
}

.div-column-small {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  width: 100%;
}

.div-column-small .div-heading {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.div-column-small .h-heading {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.div-column-small .h-heading .en {
  font-family: var(--font-cormorant);
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
}

.div-column-small .h-heading .jp {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-column-small .div-paragraph {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

.div-column-small .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-column-small .figure-image .picture::after {
  opacity: 0.16;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-column-large {
    gap: var(--grid-3);
  }

  .div-column-large .h-heading {
    gap: var(--grid-2);
  }

  .div-column-large .h-heading .en {
    font-size: 1.12rem;
  }

  .div-column-large .h-heading .jp {
    font-size: 1.6rem;
  }

  .div-column-large .div-paragraph {
    gap: var(--grid-2);
  }

  .div-column-large .p-description {
    font-size: 1.12rem;
  }

  .div-column-medium {
    gap: var(--grid-3);
  }

  .div-column-medium .h-heading {
    gap: calc(var(--grid) * 1.5);
  }

  .div-column-medium .h-heading .en {
    font-size: 1.04rem;
  }

  .div-column-medium .h-heading .jp {
    font-size: 1.44rem;
  }

  .div-column-medium .div-paragraph {
    gap: var(--grid-2);
  }

  .div-column-medium .p-description {
    font-size: 1.12rem;
  }

  .div-column-small {
    gap: var(--grid-2);
  }

  .div-column-small .div-heading {
    gap: var(--grid);
  }

  .div-column-small .h-heading {
    gap: var(--grid);
  }

  .div-column-small .h-heading .en {
    font-size: 1.04rem;
  }

  .div-column-small .h-heading .jp {
    font-size: 1.44rem;
  }

  .div-column-small .div-paragraph {
    gap: var(--grid-2);
  }

  .div-column-small .p-description {
    font-size: 1.04rem;
  }
}


/*============================================================
  div-products-lineup
============================================================*/
.div-products-lineup {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: 100%;
}

.div-products-lineup .ul-products > li {
  width: var(--grid-16);
}

.div-products-lineup .ul-products > li .div-column-small .figure-image {
  display: flex;
  gap: 0.8rem;
}

.div-products-lineup .ul-products > li:nth-of-type(odd) .div-column-small .figure-image {
  flex-direction: column-reverse;
}

.div-products-lineup .ul-products > li:nth-of-type(even) .div-column-small .figure-image {
  flex-direction: column;
}

.div-products-lineup .ul-products > li .div-column-small .h-heading {
  flex-direction: row;
  align-items: baseline;
  gap: 1.04rem;
}

.div-products-lineup .ul-products > li .div-column-small .figure-image + .h-heading {
  margin-block-start: var(--grid);
}

.div-products-lineup .ul-products > li .div-column-small .h-heading .en {
  font-size: 2rem;
}

.div-products-lineup .ul-products > li .div-column-small .h-heading .jp {
  font-size: 1.44rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-products-lineup {
    gap: var(--grid-3);
  }

  .div-products-lineup .ul-products {
    row-gap: var(--grid-4);
  }

  .div-products-lineup .ul-products > li {
    width: calc(50% - var(--grid));
  }

  .div-products-lineup .ul-products > li .div-column-small .h-heading {
    flex-direction: column;
    gap: 0.8rem;
  }

  .div-products-lineup .ul-products > li .div-column-small .h-heading .en {
    font-size: 1.68rem;
  }

  .div-products-lineup .ul-products > li .div-column-small .h-heading .jp {
    font-size: 1.2rem;
  }
}


/*============================================================
  div-sdgs-action
============================================================*/
.div-sdgs-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--grid-2);
  width: 100%;
}

.div-sdgs-action > .div-area-1 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--grid-8);
  width: 100%;
}

.div-sdgs-action > .div-area-1 > .div-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
}

.div-sdgs-action > .div-area-1 > .div-2 {
  width: var(--grid-16);
}

.div-sdgs-action > .div-area-1 > .div-2 .figure-image {
  aspect-ratio: 4 / 3;
}

.div-sdgs-action > .div-area-1 > .div-2 .figure-image .picture::after {
  opacity: 0.08;
}

.div-sdgs-action > .div-area-2 {
  width: 100%;
}

.div-sdgs-action > .div-area-2 .article-featured-sdgs {
  border: 1px solid rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-sdgs-action {
    align-items: initial;
  }

  .div-sdgs-action > .div-area-1 {
    flex-direction: column;
    align-items: initial;
    gap: var(--grid-2);
  }

  .div-sdgs-action > .div-area-1 > .div-2 .figure-image {
    aspect-ratio: 4 / 3;
  }

  .div-sdgs-action > .div-area-1 > .div-2 .figure-image .picture::after {
    opacity: 0.08;
  }

  .div-sdgs-action > .div-area-2 {
    width: 100%;
  }
}


/*============================================================
  div-activity-experience
============================================================*/
.div-activity-experience {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--grid-2);
  width: 100%;
}

.div-activity-experience > .div-area-1 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--grid-8);
  width: 100%;
}

.div-activity-experience > .div-area-1 > .div-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
}

.div-activity-experience > .div-area-1 > .div-2 {
  width: var(--grid-34);
}

.div-activity-experience > .div-area-1 > .div-2 .figure-image {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.div-activity-experience > .div-area-1 > .div-2 .figure-image .picture {
  width: var(--grid-16);
}

.div-activity-experience > .div-area-1 > .div-2 .figure-image .picture::after {
  opacity: 0.08;
}

.div-activity-experience > .div-area-2 {
  width: 100%;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-activity-experience {
    align-items: initial;
  }

  .div-activity-experience > .div-area-1 {
    flex-direction: column;
    align-items: initial;
    gap: var(--grid-2);
  }

  .div-activity-experience > .div-area-1 > .div-2 {
    width: var(--grid-34);
  }

  .div-activity-experience > .div-area-1 > .div-2 .figure-image .picture::after {
    opacity: 0.08;
  }

  .div-activity-experience > .div-area-2 {
    width: 100%;
  }
}


/*============================================================
  div-brand-profile
============================================================*/
.div-brand-profile {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  width: 100%;
}

.div-brand-profile .h-name {
  font-family: var(--font-serif);
  line-height: 1.92;
  margin-block: -0.48rem;
}

.div-brand-profile .h-name .chawaka {
  font-size: 1.84rem;
  letter-spacing: 0.24em;
  margin-block: -0.096em;
}

.div-brand-profile .h-name .kyoto-uji {
  font-size: 1.44rem;
  letter-spacing: 0.24em;
  margin-block: -0.096em;
}

.div-brand-profile .h-name .furigana {
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  margin-block: -0.096em;
}

.div-brand-profile .div-location {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.div-brand-profile .p-address {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.div-brand-profile .p-address .jp {
  font-family: var(--font-sans-serif);
  font-size: 1.28rem;
  letter-spacing: 0.12em;
  line-height: 1.68;
  margin-block: -0.34em;
}

.div-brand-profile .p-address .en {
  font-family: var(--font-inter);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.68;
  margin-block: -0.34em;
}

.div-brand-profile .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-brand-profile .ul-profile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.div-brand-profile .ul-profile > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  padding-block: var(--grid);
}

.div-brand-profile .dl-profile {
  display: flex;
  flex-direction: row;
  gap: var(--grid);
  align-items: center;
}

.div-brand-profile .dl-profile > dt {
  width: var(--grid-4);
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-brand-profile .dl-profile > dd {
  flex: 1;
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.div-brand-profile .dl-profile > dd .number {
  font-family: var(--font-inter);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-block: -0.096em;
  vertical-align: middle;
}

.div-brand-profile .ul-sns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
}

.div-brand-profile .ul-sns .icon {
  fill: var(--color-black);
  width: 1.84rem;
  height: auto;
}

@media (hover: hover) {
  .div-brand-profile .ul-sns a:hover .icon {
    opacity: 0.64;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-brand-profile {
    gap: var(--grid-2);
  }

  .div-brand-profile .h-name .chawaka {
    font-size: 1.68rem;
  }

  .div-brand-profile .h-name .kyoto-uji {
    font-size: 1.2rem;
  }

  .div-brand-profile .h-name .furigana {
    font-size: 0.8rem;
  }

  .div-brand-profile .p-address .jp {
    font-size: 1.12rem;
  }

  .div-brand-profile .p-address .en {
    font-size: 1.04rem;
  }

  .div-brand-profile .p-description {
    font-size: 1.12rem;
  }

  .div-brand-profile .ul-profile > li {
    padding-block: calc(var(--grid) * 1.5);
  }

  .div-brand-profile .dl-profile > dt {
    width: var(--grid-8);
    font-size: 1.04rem;
  }

  .div-brand-profile .dl-profile > dd {
    font-size: 1.04rem;
  }

  .div-brand-profile .dl-profile > dd .number {
    font-size: 1.84rem;
  }
}


/*============================================================
  div-slider-indicator
============================================================*/
.div-slider-indicator {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.div-slider-indicator button {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid;
  border-radius: 0.4rem;
  opacity: 0.4;
  cursor: pointer;
}

.div-slider-indicator button.current {
  opacity: 1;
  cursor: default;
}

.div-slider-indicator.color-black button {
  border-color: var(--color-black);
}

.div-slider-indicator.color-black button.current {
  background-color: var(--color-black);
}

.div-slider-indicator.color-white button {
  border-color: var(--color-white);
}

.div-slider-indicator.color-white button.current {
  background-color: var(--color-white);
}


/*============================================================
  div-slider-column
============================================================*/
.div-slider-column {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
  position: relative;
  z-index: 0;
}

.div-slider-column .div-slider-content {
  overflow: hidden;
}

.div-slider-column .div-slider-content .ul-slider {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}

.div-slider-column .div-slider-content .ul-slider > li {
  flex-shrink: 0;
}

.div-slider-column .div-slider-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: var(--grid-78);
  margin-inline: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-slider-column .div-slider-navigation {
    width: auto;
    margin-inline: var(--grid-2);
  }
}


/*============================================================
  div-slider-gallery
============================================================*/
.div-slider-gallery {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  position: relative;
  z-index: 0;
}

.div-slider-gallery .div-slider-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.div-slider-gallery .div-slider-content .ul-slider {
  width: 100%;
  height: 100%;
}

.div-slider-gallery .div-slider-content .ul-slider > li {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.div-slider-gallery .div-slider-content .ul-slider > li.current {
  z-index: 1;
}

.div-slider-gallery .div-slider-content .ul-slider > li.in {
  z-index: 2;
}

.div-slider-gallery .div-slider-content .ul-slider > li.out {
  z-index: 1;
}

.div-slider-gallery .div-slider-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: var(--grid-84);
  padding-block: var(--grid-2);
  margin-inline: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-slider-gallery .div-slider-navigation {
    width: 100%;
    padding-block: var(--grid-2);
    padding-inline: var(--grid-2);
  }
}


/*============================================================
  div-slider-lineup
============================================================*/
.div-slider-lineup {
  display: flex;
  flex-direction: column;
  gap: var(--grid);
  position: relative;
  z-index: 0;
}

.div-slider-lineup .div-slider-content {
  overflow: hidden;
}

.div-slider-lineup .div-slider-content .ul-slider {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}

.div-slider-lineup .div-slider-content .ul-slider > li {
  flex-shrink: 0;
}

.div-slider-lineup .div-slider-content .ul-slider > li.current {
  z-index: 1;
}

.div-slider-lineup .div-slider-content .ul-slider > li.in {
  z-index: 2;
}

.div-slider-lineup .div-slider-content .ul-slider > li.out {
  z-index: 1;
}

.div-slider-lineup .div-slider-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--grid);
  width: 100%;
}

.div-slider-lineup .div-slider-navigation button {
  display: inline-block;
  width: 4.8rem;
  height: 4.8rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.div-slider-lineup .div-slider-navigation button.current {
  cursor: default;
}

.div-slider-lineup .div-slider-navigation button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0.08;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.div-slider-lineup .div-slider-navigation button.current::after {
  opacity: 0.64;
}

@media (hover: hover) {
  .div-slider-lineup .div-slider-navigation button:not(.current):hover img {
    filter: brightness(0.88);
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-slider-lineup .div-slider-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--grid);
    width: 100%;
  }

  .div-slider-lineup .div-slider-navigation button {
    width: 3.2rem;
    height: 3.2rem;
  }
}


/*============================================================
  div-alert
============================================================*/
.div-alert {
  width: var(--grid-78);
  padding-block: var(--grid-2);
  margin-inline: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-alert {
    width: auto;
    margin-inline: var(--grid-2);
  }
}


/*============================================================
  div-page-item
============================================================*/
.div-page-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.div-page-item > .div-1 {
  width: var(--grid-50);
}

.div-page-item > .div-1 .figure-image {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
}

.div-page-item > .div-1 .figure-image .picture {
  flex: 1;
}

.div-page-item > .div-1 .figure-image .picture::after {
  opacity: 0.16;
}

.div-page-item > .div-2 {
  width: var(--grid-16);
}

.div-page-item > .div-2 .h-heading .en {
  font-size: 3.2rem;
}

.div-page-item > .div-2 .h-heading .jp {
  font-size: 1.44rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  .div-page-item {
    flex-direction: column-reverse;
    align-items: initial;
    justify-content: initial;
    gap: var(--grid-3);
    width: 100%;
  }

  .div-page-item > .div-1 {
    width: 100%;
  }

  .div-page-item > .div-1 .figure-image {
    flex-direction: row;
  }

  .div-page-item > .div-2 {
    width: 100%;
  }

  .div-page-item > .div-2 .h-heading {
    /*flex-direction: row;
    align-items: baseline;*/
    gap: var(--grid);
  }

  .div-page-item > .div-2 .h-heading .en {
    font-size: 2.8rem;
  }

  .div-page-item > .div-2 .h-heading .jp {
    font-size: 1.28rem;
  }
}


/*============================================================
  article-news-item
============================================================*/
.article-news-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-news-item .dl-news {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-news-item .dl-news > dt {
  width: var(--grid-4);
}

.article-news-item .dl-news > dt .time-post {
  font-family: var(--font-inter);
  font-size: 1.12rem;
  font-weight: 300;
  letter-spacing: 0.064em;
  white-space: nowrap;
}

.article-news-item .dl-news > dd {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
}

.article-news-item .dl-news > dd .figure-image {
  width: var(--grid-4);
  height: var(--grid-4);
}

.article-news-item .dl-news > dd .figure-image .picture::after {
  opacity: 0.08;
}

.article-news-item .dl-news > dd .h-title {
  flex: 1;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: calc((1.12rem * 3) + ((1.12rem * 1.84) * 2));
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
  overflow: hidden;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-news-item .dl-news > dt {
    width: var(--grid-8);
  }

  .article-news-item .dl-news > dd .figure-image {
    width: var(--grid-6);
    height: var(--grid-6);
  }

  .article-news-item .dl-news > dd .figure-image .picture::after {
    opacity: 0.08;
  }
}


/*============================================================
  article-voice-item
============================================================*/
.article-voice-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-voice-item .figure-image {
  width: var(--grid-4);
}

.article-voice-item .figure-image .picture::after {
  opacity: 0.08;
}

.article-voice-item .h-text {
  flex: 1;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: calc((1.2rem * 3) + ((1.2rem * 1.84) * 2));
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
  overflow: hidden;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-voice-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-2);
    width: 100%;
  }

  .article-voice-item .figure-image {
    width: var(--grid-8);
  }

  .article-voice-item .h-text {
    max-height: calc((1.12rem * 3) + ((1.12rem * 1.84) * 2));
    font-size: 1.12rem;
  }
}


/*============================================================
  .article-instagram-item
============================================================*/
.article-instagram-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-instagram-item .figure-image {
  width: var(--grid-6);
}

.article-instagram-item .figure-image .picture::after {
  opacity: 0.24;
}

.article-instagram-item .h-text {
  flex: 1;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: calc((1.12rem * 3) + ((1.12rem * 1.84) * 2));
  color: var(--color-white);
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
  overflow: hidden;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-instagram-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-2);
    width: 100%;
  }

  .article-instagram-item .figure-image {
    width: var(--grid-8);
  }

  .article-instagram-item .figure-image .picture::after {
    opacity: 0.24;
  }

  .article-instagram-item .h-text {
    max-height: calc((1.12rem * 3) + ((1.12rem * 1.84) * 2));
  }
}


/*============================================================
  article-link-item
============================================================*/
.article-link-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-4);
  width: 100%;
}

.article-link-item .div-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: var(--grid-22);
}

.article-link-item .div-1 .div-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.article-link-item .div-1 .div-head .dl-category {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
}

.article-link-item .div-1 .div-head .h-title {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

.article-link-item .div-1 .div-head .h-title .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.28;
  margin-block: -0.24em;
}

.article-link-item .div-1 .div-head .h-title .jp {
  font-family: var(--font-serif);
  font-size: 1.84rem;
  letter-spacing: 0.08em;
  line-height: 1.28;
  margin-block: -0.24em;
}

.article-link-item .div-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--grid);
}

.article-link-item .div-2 .p-text {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: calc((1.2rem * 3) + (1.2rem * 1.84) * 2);
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  overflow: hidden;
}

.article-link-item .div-3 .figure-image {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid);
}

.article-link-item .div-3 .figure-image .picture {
  width: calc((var(--grid-16) - var(--grid)) / 2);
}

.article-link-item .div-3 .figure-image .picture::after {
  opacity: 0.16;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-link-item {
    flex-wrap: wrap;
    align-items: initial;
    gap: var(--grid-2);
  }

  .article-link-item .div-1 {
    width: 100%;
  }

  .article-link-item .div-1 .div-head .dl-category {
    font-size: 1.2rem;
  }

  .article-link-item .div-1 .div-head .h-title .en {
    font-size: 1.12rem;
  }

  .article-link-item .div-1 .div-head .h-title .jp {
    font-size: 1.6rem;
  }

  .article-link-item .div-2 .p-text {
    max-height: calc((1.12rem * 3) + (1.12rem * 1.84) * 2);
    font-size: 1.12rem;
  }

  .article-link-item .div-3 {
    width: var(--grid-10);
  }

  .article-link-item .div-3 .figure-image .picture:nth-of-type(n+2) {
    display: none;
  }
}


/*============================================================
  article-featured-ippuku
============================================================*/
.article-featured-ippuku {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding-block: var(--grid-4);
  padding-inline: var(--grid-6);
  position: relative;
  z-index: 0;
}

.article-featured-ippuku > .div-1 .figure-image {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--grid-4);
  width: var(--grid-28);
}

.article-featured-ippuku > .div-1 .figure-image .picture:nth-of-type(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.article-featured-ippuku > .div-1 .figure-image .picture:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 1;
}

.article-featured-ippuku > .div-1 .figure-image .picture:nth-of-type(3) {
  grid-column: 3 / 4;
  grid-row: 2;
}

.article-featured-ippuku > .div-1 .figure-image .picture::after {
  opacity: 0.16;
}

.article-featured-ippuku > .div-2 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: var(--grid-28);
}

.article-featured-ippuku > .div-2 .div-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.article-featured-ippuku > .div-2 .div-head .div-text {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.article-featured-ippuku > .div-2 .div-head .div-text .p-tagline {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.article-featured-ippuku > .div-2 .div-head .div-text .h-title .text {
  width: auto;
  height: 2.96rem;
}

.article-featured-ippuku > .div-2 .div-head .div-image .illustration {
  width: 14.4rem;
  height: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-featured-ippuku {
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    gap: var(--grid-3);
    padding-block: var(--grid-2);
    padding-inline: var(--grid-2);
  }

  .article-featured-ippuku > .div-1 .figure-image {
    gap: var(--grid-2);
  }

  .article-featured-ippuku > .div-2 {
    width: 100%;
  }

  .article-featured-ippuku > .div-2 .div-head .div-text .p-tagline {
    font-size: 1.12rem;
  }

  .article-featured-ippuku > .div-2 .div-head .div-text .h-title .text {
    width: auto;
    height: calc(2.96rem * 0.72);
  }

  .article-featured-ippuku > .div-2 .div-head .div-image .illustration {
    width: 9.6rem;
  }
}


/*============================================================
  article-featured-staff
============================================================*/
.article-featured-staff {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding-block: var(--grid-4);
  padding-inline: var(--grid-6);
  position: relative;
  z-index: 0;
}

.article-featured-staff > .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: var(--grid-24);
}

.article-featured-staff > .div-1 .h-heading .en {
  font-size: 3.2rem;
}

.article-featured-staff > .div-1 .h-heading .jp {
  font-size: 1.28rem;
}

.article-featured-staff > .div-1 .figure-image {
  display: flex;
  flex-direction: row;
  gap: var(--grid);
}

.article-featured-staff > .div-1 .figure-image .picture {
  width: var(--grid-8);
}

.article-featured-staff > .div-1 .figure-image .picture::after {
  opacity: 0.16;
}

.article-featured-staff > .div-2 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-4);
  width: var(--grid-22);
}

.article-featured-staff > .div-2 .ul-staff {
  display: flex;
  flex-direction: column;
  gap: var(--grid-4);
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-featured-staff {
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    gap: var(--grid-4);
    padding-block: var(--grid-3);
    padding-inline: var(--grid-2);
  }

  .article-featured-staff > .div-1 {
    gap: var(--grid-3);
    width: 100%;
  }

  .article-featured-staff > .div-1 .h-heading .en {
    font-size: 3.2rem;
  }

  .article-featured-staff > .div-1 .h-heading .jp {
    font-size: 1.28rem;
  }

  .article-featured-staff > .div-1 .figure-image .picture {
    width: var(--grid-10);
  }

  .article-featured-staff > .div-2 {
    display: flex;
    flex-direction: column;
    gap: var(--grid-4);
    width: 100%;
  }

  .article-featured-staff > .div-2 .ul-staff {
    flex-direction: row;
    gap: var(--grid-2);
  }

  .article-featured-staff > .div-2 .ul-staff > li {
    flex: 1;
  }
}


/*============================================================
  article-featured-sdgs
============================================================*/
.article-featured-sdgs {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  width: 100%;
  color: var(--color-black);
  background-color: var(--color-white);
  padding-block: calc(var(--grid-3) - 0.8rem);
  padding-inline: var(--grid-3);
  position: relative;
  z-index: 0;
}

.article-featured-sdgs .div-area-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-featured-sdgs .div-area-1 > .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  flex: 1;
}

.article-featured-sdgs .div-area-1 > .div-1 .h-heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

.article-featured-sdgs .div-area-1 > .div-1 .h-heading .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.24em;
}

.article-featured-sdgs .div-area-1 > .div-1 .h-heading .jp {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.4em;
}

.article-featured-sdgs .div-area-1 > .div-1 .div-description {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-2);
  width: 100%;
}

.article-featured-sdgs .div-area-1 > .div-1 .div-description .div-image {
  width: var(--grid-4);
}

.article-featured-sdgs .div-area-1 > .div-1 .div-description .div-text {
  flex: 1;
}

.article-featured-sdgs .div-area-1 > .div-1 .div-description .div-text .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.article-featured-sdgs .div-area-1 > .div-2 {
  width: var(--grid-16);
  padding-inline: calc(var(--grid) * 1.5);
}

.article-featured-sdgs .div-area-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-3);
  width: 100%;
}

.article-featured-sdgs .div-area-2 > .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  flex: 1;
}

.article-featured-sdgs .div-area-2 > .div-1 .h-heading {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--grid);
}

.article-featured-sdgs .div-area-2 > .div-1 .h-heading .en {
  font-family: var(--font-cormorant);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

.article-featured-sdgs .div-area-2 > .div-1 .h-heading .jp {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  margin-block: -0.096em;
}

.article-featured-sdgs .div-area-2 > .div-1 .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  line-height: 1.96;
  margin-block: -0.48em;
}

.article-featured-sdgs .div-area-2 > .div-2 {
  width: var(--grid-22);
}

.article-featured-sdgs .borderline {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-featured-sdgs {
    padding-block: var(--grid-3);
    padding-inline: var(--grid-2);
  }

  .article-featured-sdgs .div-area-1 {
    flex-direction: column;
    justify-content: initial;
    gap: var(--grid-2);
  }

  .article-featured-sdgs .div-area-1 > .div-1 {
    flex-direction: column;
    gap: var(--grid-3);
  }

  .article-featured-sdgs .div-area-1 > .div-1 .h-heading {
    gap: var(--grid-2);
  }

  .article-featured-sdgs .div-area-1 > .div-1 .h-heading .en {
    font-size: 1.12rem;
  }

  .article-featured-sdgs .div-area-1 > .div-1 .h-heading .jp {
    font-size: 1.6rem;
  }

  .article-featured-sdgs .div-area-1 > .div-1 .div-description {
    flex-direction: row-reverse;
    align-items: initial;
    gap: var(--grid-2);
  }

  .article-featured-sdgs .div-area-1 > .div-1 .div-description .div-image {
    width: var(--grid-6);
  }

  .article-featured-sdgs .div-area-1 > .div-1 .div-description .div-text .p-description {
    font-size: 1.12rem;
  }

  .article-featured-sdgs .div-area-1 > .div-2 {
    width: var(--grid-24);
  }

  .article-featured-sdgs .div-area-2 {
    flex-direction: column;
    justify-content: initial;
    gap: var(--grid-3);
  }

  .article-featured-sdgs .div-area-2 > .div-1 {
    gap: var(--grid-2);
  }

  .article-featured-sdgs .div-area-2 > .div-1 .h-heading .jp {
    font-size: 1.12rem;
  }

  .article-featured-sdgs .div-area-2 > .div-1 .p-description {
    font-size: 1.04rem;
  }

  .article-featured-sdgs .div-area-2 > .div-2 {
    width: var(--grid-32);
  }
}


/*============================================================
  article-featured-vision
============================================================*/
.article-featured-vision {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-black);
  background-color: var(--color-white);
  padding-block: var(--grid);
  padding-inline: var(--grid-3);
  position: relative;
  z-index: 0;
}

.article-featured-vision > .div-1 {
  width: var(--grid-34);
}

.article-featured-vision > .div-2 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 2.5);
  width: var(--grid-22);
}

.article-featured-vision > .div-2 .div-heading {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
}

.article-featured-vision > .div-2 .div-heading .p-tagline {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.article-featured-vision > .div-2 .div-heading .h-title .text {
  width: auto;
  height: 2.96rem;
}

.article-featured-vision > .div-2 .p-description {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  line-height: 1.84;
  margin-block: -0.42em;
}

.article-featured-vision > .div-2 .dl-sdgs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
  border-top: 1px solid rgba(0, 0, 0, 0.16);
  padding-top: calc(var(--grid) * 1.5);
}

.article-featured-vision > .div-2 .dl-sdgs > dt {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  letter-spacing: 0.16em;
  line-height: 1.68;
  margin-block: -0.34em;
}

.article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
}

.article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  width: 14.4rem;
}

.article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li .icon-sdgs {
  width: 4.8rem;
  height: auto;
}

.article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li em {
  font-family: var(--font-sans-serif);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-block: -0.3em;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-featured-vision {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: initial;
    gap: var(--grid-2);
    padding-block: var(--grid-3) var(--grid-2);
    padding-inline: var(--grid-2);
  }

  .article-featured-vision > .div-1 {
    width: 100%;
  }

  .article-featured-vision > .div-2 {
    gap: var(--grid-3);
    width: 100%;
  }

  .article-featured-vision > .div-2 .div-heading {
    gap: var(--grid-2);
  }

  .article-featured-vision > .div-2 .div-heading .p-tagline {
    font-size: 1.12rem;
  }

  .article-featured-vision > .div-2 .div-heading .h-title .text {
    width: auto;
    height: calc(2.96rem * 0.72);
  }

  .article-featured-vision > .div-2 .p-description {
    font-size: 1.12rem;
  }

  .article-featured-vision > .div-2 .dl-sdgs {
    gap: var(--grid-2);
    padding-top: var(--grid-2);
  }

  .article-featured-vision > .div-2 .dl-sdgs > dt {
    font-size: 1.12rem;
  }

  .article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs {
    gap: 0.8rem;
  }

  .article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li {
    flex: 1;
    gap: 0.8rem;
  }

  .article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li .icon-sdgs {
    width: 3.2rem;
  }

  .article-featured-vision > .div-2 .dl-sdgs > dd .ul-sdgs > li em {
    font-size: 0.8rem;
  }
}


/*============================================================
  article-featured-tabechaba
============================================================*/
.article-featured-tabechaba {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  padding-block: var(--grid-4);
  padding-inline: var(--grid-6);
  position: relative;
  z-index: 0;
}

.article-featured-tabechaba > .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
  width: var(--grid-22);
}

.article-featured-tabechaba > .div-2 {
  width: var(--grid-34);
}

.article-featured-tabechaba > .div-2 .ul-products {
  row-gap: var(--grid-4);
}

.article-featured-tabechaba > .div-2 .ul-products > li {
  width: var(--grid-10);
}

.article-featured-tabechaba > .div-2 .ul-products > li .div-column-small {
  height: 100%;
}

.article-featured-tabechaba > .div-2 .ul-products > li .div-column-small .figure-image {
  width: var(--grid-6);
  margin-top: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  .article-featured-tabechaba {
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    gap: var(--grid-3);
    padding-block: var(--grid-3);
    padding-inline: var(--grid-2);
  }

  .article-featured-tabechaba > .div-1 {
    gap: var(--grid-3);
    width: 100%;
  }

  .article-featured-tabechaba > .div-2 {
     width: 100%;
  }

  .article-featured-tabechaba > .div-2 .ul-products > li {
    width: var(--grid-12);
    width: 100%;
  }

  .article-featured-tabechaba > .div-2 .ul-products > li .div-column-small {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
  }

  .article-featured-tabechaba > .div-2 .ul-products > li .div-column-small .h-heading {
    width: 100%;
  }

  .article-featured-tabechaba > .div-2 .ul-products > li .div-column-small .p-description {
    flex: 1;
  }

  .article-featured-tabechaba > .div-2 .ul-products > li .div-column-small .figure-image {
    margin-top: 0;
  }
}


/*============================================================
  div-pager
============================================================*/
.div-pager {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--grid);
  text-align: center;
}

.div-pager .page-numbers {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--color-black);
  font-family: var(--font-inter);
  font-size: 1.2rem;
  white-space: nowrap;
  border-radius: 0.1rem;
}

.div-pager .page-numbers.current {
  color: var(--color-white);
  background-color: var(--color-black);
  cursor: default;
}

.div-pager .page-numbers.prev {
  margin-right: var(--grid-3);
}

.div-pager .page-numbers.next {
  margin-left: var(--grid-3);
}

.div-pager .page-numbers.next .icon-arrow,
.div-pager .page-numbers.prev .icon-arrow {
  fill: var(--color-black);
  width: 0.8rem;
  height: auto;
}

.div-pager .page-numbers.prev .icon-arrow {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .div-pager .page-numbers:not(.current):not(.dots):hover {
    opacity: 0.64;
  }
}


/*============================================================
  header
============================================================*/
#header-global {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--grid-8);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 24;
}

#header-global > .div-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: var(--grid-84);
  margin-inline: auto;
}

#header-global .logo-chawaka {
  fill: var(--color-black);
  width: auto;
  height: var(--grid-4);
}

#header-global .div-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--grid-2);
}

#header-global .nav-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--grid-4);
  width: auto;
}

#header-global .nav-header .ul-menu {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#header-global .nav-header .ul-menu > li {
  font-family: var(--font-cormorant);
  font-size: 1.44rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
}

#header-global .nav-header .ul-menu > li > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: inherit;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown {
  position: relative;
  z-index: 1;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: inherit;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown::before {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: absolute;
  left: -0.8rem;
  top: -0.8rem;
  z-index: -1;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown .ul-menu-pulldown {
  display: none;
  width: auto;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.2rem 0.96rem;
  position: absolute;
  left: -0.8rem;
  bottom: 0;
  transform: translateY(calc(100% + 0.8rem));
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown .ul-menu-pulldown > li > a {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.64rem;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown .ul-menu-pulldown > li > a .en {
  font-family: var(--font-cormorant);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#header-global .nav-header .ul-menu > li .div-menu-pulldown .ul-menu-pulldown > li > a .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#header-global .nav-header .ul-content {
  gap: var(--grid-2);
}

#header-global .nav-header .ul-language > li + li:before {
  content: "/";
  margin-inline: 0.4rem;
}

#header-global .button-menu {
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  z-index: 1;
}

#header-global .button-menu::before,
#header-global .button-menu::after {
  content: "";
  display: block;
  width: var(--grid-6);
  height: 1px;
  background-color: var(--color-black);
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

#header-global .button-menu::before {
  width: 2.4rem;
  transform: translateY(-0.32rem);
}

#header-global .button-menu::after {
  width: 1.6rem;
  transform: translateY(0.32rem);
}

#header-global .button-menu.active::before,
#header-global .button-menu.active::after {
  width: 2.4rem;
  margin: auto;
  right: 0;
}

#header-global .button-menu.active::before {
  transform: rotate(45deg);
}

#header-global .button-menu.active::after {
  transform: rotate(-45deg);
}

#header-global .nav-header-table {
  width: 100%;
  max-height: calc(100svh - var(--grid-8));
  background-color: rgba(24, 24, 24, 0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: var(--grid-4);
  overflow-y: scroll;
  position: absolute;
  left: -100%;
  top: var(--grid-8);
}

#header-global .button-menu.active + .nav-header-table {
  left: 0;
}

#header-global .nav-header-table > .div-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: var(--grid-78);
  row-gap: var(--grid-2);
  margin-inline: auto;
}

#header-global .nav-header-table > .div-body .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  width: var(--grid-46);
}

#header-global .nav-header-table > .div-body .div-2 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-2);
  width: var(--grid-22);
}

#header-global .nav-header-table > .div-body .div-3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--grid-2);
  column-gap: var(--grid-6);
  width: var(--grid-46);
}

#header-global .nav-header-table > .div-body .div-4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  row-gap: var(--grid-2);
  column-gap: var(--grid-2);
  width: var(--grid-22);
}

#header-global .nav-header-table .borderline {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.24);
}

#header-global .nav-header-table .a-link-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#header-global .nav-header-table .a-link-content .text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--grid);
  color: var(--color-white);
}

#header-global .nav-header-table .a-link-content .text .en {
  font-family: var(--font-cormorant);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#header-global .nav-header-table .a-link-content .text .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.16em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#header-global .nav-header-table .a-link-content .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  outline: 1px solid rgba(255, 255, 255, 0.24);
  outline-offset: -1px;
  border-radius: 2rem;
}

#header-global .nav-header-table .a-link-content .icon svg.icon-arrow {
  fill: var(--color-white);
  width: 0.6rem;
  height: auto;
  margin-right: -0.16rem;
}

#header-global .nav-header-table .ul-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

#header-global .nav-header-table .ul-content > li {
  width: var(--grid-10);
}

#header-global .nav-header-table .ul-content .a-link-content {
  flex-direction: column;
  align-items: initial;
  justify-content: initial;
  gap: calc(var(--grid) * 1.5);
  width: 100%;
  color: var(--color-white);
}

#header-global .nav-header-table .ul-content .a-link-content .figure-image .picture::after {
  opacity: 0.08;
}

#header-global .nav-header-table .ul-content .a-link-content .h-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.8rem;
  margin-block-start: 0.8rem;
}

#header-global .nav-header-table .ul-content .a-link-content .h-title .en {
  font-family: var(--font-cormorant);
  font-size: 1.68rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#header-global .nav-header-table .ul-content .a-link-content .h-title .jp {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  margin-block: -0.096em;
}

#header-global .nav-header-table .ul-content .a-link-content .p-tagline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

#header-global .nav-header-table .ul-content .a-link-content .p-tagline .en {
  font-family: var(--font-cormorant);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
  white-space: nowrap;
}

#header-global .nav-header-table .ul-content .a-link-content .p-tagline .jp {
  font-family: var(--font-sans-serif);
  font-size: 0.96rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em;
  white-space: nowrap;
}

#header-global .nav-header-table .ul-sns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
}

#header-global .nav-header-table .ul-sns .icon {
  fill: var(--color-white);
  width: 1.84rem;
  height: auto;
}

#header-global .nav-header-table .ul-management {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--grid);
}

#header-global .nav-header-table .ul-management > li {
  font-family: var(--font-inter);
  color: var(--color-white);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#header-global .nav-header-table .ul-management > li > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-block: inherit;
  white-space: inherit;
}

html.paused #header-global {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#header-global.floating {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html:not(.paused) body#top #header-global:not(.floating),
html:not(.paused) body#experience #header-global:not(.floating), {
  background-color: transparent;
}

html:not(.paused) body#top #header-global:not(.floating) .logo-chawaka,
html:not(.paused) body#experience #header-global:not(.floating) .logo-chawaka {
  fill: var(--color-white);
}

html:not(.paused) body#top #header-global:not(.floating) .nav-header .ul-menu > li,
html:not(.paused) body#experience #header-global:not(.floating) .nav-header .ul-menu > li {
  color: var(--color-white);
}

html:not(.paused) body#top #header-global:not(.floating) .button-menu::before,
html:not(.paused) body#experience #header-global:not(.floating) .button-menu::before {
  background-color: var(--color-white);
}

html:not(.paused) body#top #header-global:not(.floating) .button-menu::after,
html:not(.paused) body#experience #header-global:not(.floating) .button-menu::after {
  background-color: var(--color-white);
}

@media (hover: hover) {
  #header-global .nav-header .ul-menu a:hover {
    opacity: 0.64;
  }

  #header-global .nav-header .ul-menu > li .div-menu-pulldown:hover::before {
    display: block;
  }

  #header-global .nav-header .ul-menu > li .div-menu-pulldown:hover > a {
    color: var(--color-black);
  }

  #header-global .nav-header .ul-menu > li .div-menu-pulldown:hover .ul-menu-pulldown {
    display: block;
  }

  #header-global .nav-header-table .a-link-content:hover .text {
    opacity: 0.8;
  }

  #header-global .nav-header-table .a-link-content:hover .icon {
    outline-color: transparent;
    background-color: var(--color-white);
  }

  #header-global .nav-header-table .a-link-content:hover .icon svg.icon-arrow {
    fill: var(--color-black);
  }

  #header-global .nav-header-table .ul-content .a-link-content:hover .h-title,
  #header-global .nav-header-table .ul-content .a-link-content:hover .p-tagline {
    opacity: 0.8;
  }

  #header-global .nav-header-table .a-link-content:hover .figure-image img {
    filter: brightness(0.8);
  }

  #header-global .nav-header-table .ul-sns a:hover {
    opacity: 0.64;
  }

  #header-global .nav-header-table .ul-management > li > a:hover {
    opacity: 0.64;
  }
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  #header-global.floating {
    height: 8rem;
  }

  #header-global.floating .nav-header-table {
    max-height: calc(100svh - 8rem);
    top: 8rem;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #header-global > .div-body {
    width: calc(100% - var(--grid-4));
    margin-inline: var(--grid-2);
  }

  #header-global .nav-header .ul-content {
    display: none;
  }

  #header-global .nav-header-table {
    width: 100%;
    padding: var(--grid-4) var(--grid-2);
  }

  #header-global .nav-header-table > .div-body {
    flex-direction: column;
    justify-content: initial;
    width: 100%;
    row-gap: var(--grid-3);
  }

  #header-global .nav-header-table > .div-body .div-1 {
    flex-direction: column;
    gap: var(--grid-3);
    width: 100%;
  }

  #header-global .nav-header-table > .div-body .div-2 {
    gap: var(--grid-3);
    width: 100%;
  }

  #header-global .nav-header-table > .div-body .div-3 {
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    row-gap: var(--grid-3);
    column-gap: var(--grid-2);
    width: 100%;
  }

  #header-global .nav-header-table > .div-body .div-4 {
    row-gap: var(--grid-3);
    width: 100%;
  }

  #header-global .nav-header-table .ul-content {
    flex-wrap: wrap;
    row-gap: var(--grid-3);
    width: 100%;
  }

  #header-global .nav-header-table .ul-content > li {
    width: calc(50% - var(--grid));
  }

  #header-global .nav-header-table .ul-sns .icon {
    width: 2rem;
  }
}


/*============================================================
  footer-global
============================================================*/
#footer-global {
  background-color: var(--color-white);
  position: relative;
  z-index: 0;
}

#footer-global .div-area-1 {
  width: 100%;
  position: relative;
}

#footer-global .div-area-1 .div-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: var(--grid-78);
  padding-block: var(--grid-2);
  margin-inline: auto;
}

#footer-global .div-area-1 .div-body .nav-footer {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#footer-global .div-area-1 .div-body .nav-footer .p-tagline {
  font-family: var(--font-sans-serif);
  font-size: 1.04rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

#footer-global .div-area-1 .div-body .nav-footer .p-tagline::after {
  content: "｜";
  margin-inline: 0.8em;
}

#footer-global .div-area-1 .div-body .nav-footer .ul-breadcrumbs {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#footer-global .div-area-1 .div-body .nav-footer .ul-breadcrumbs > li {
  font-family: var(--font-sans-serif);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
  white-space: nowrap;
}

#footer-global .div-area-1 .div-body .nav-footer .ul-breadcrumbs > li + li::before {
  content: ">";
  margin-inline: 0.8rem;
  vertical-align: 8%;
}

#footer-global .div-area-1 .div-body .nav-footer .ul-breadcrumbs > li > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-block: inherit;
  white-space: inherit;
}

#footer-global .div-area-2 .div-slider .div-slider-content {
  width: var(--grid-82);
  margin-inline: auto;
}

#footer-global .div-area-2 .div-slider .div-slider-content .ul-slider {
  margin-inline: calc(var(--grid-2) * -1);
}

#footer-global .div-area-2 .div-slider .div-slider-content .ul-slider > li {
  margin-inline: var(--grid-2);
}

#footer-global .div-area-2 .div-slider .div-slider-content .ul-slider .figure-banner {
  width: calc(var(--grid-74) / 3);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

#footer-global .div-area-3 > .div-body {
  width: var(--grid-82);
  margin-inline: auto;
}

#footer-global .div-area-3 .ul-products {
  display: flex;
  flex-direction: row;
  gap: var(--grid-6);
  width: 100%;
}

#footer-global .div-area-3 .ul-products > li {
  flex: 1;
}

#footer-global .div-area-3 .ul-products > li .a-link-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid);
  width: 100%;
  padding-block: var(--grid-3);
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .figure-image {
  width: var(--grid-10);
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.8rem;
  margin-block-start: 0.8rem;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title .en {
  font-family: var(--font-cormorant);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title .jp {
  font-family: var(--font-serif);
  font-size: 1.36rem;
  letter-spacing: 0.16em;
  margin-block: -0.096em;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .p-tagline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .p-tagline .en {
  font-family: var(--font-cormorant);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  line-height: 1.44;
  margin-block: -0.22em;
  white-space: nowrap;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .p-tagline .jp {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  letter-spacing: 0.08em;
  line-height: 1.84;
  margin-block: -0.42em;
  white-space: nowrap;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--grid-4);
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.kibako {
  width: auto;
  height: 12rem;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.mari {
  width: auto;
  height: 7.2rem;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.square {
  width: auto;
  height: 12.8rem;
}

#footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.teabag {
  width: auto;
  height: 11.8rem;
}

#footer-global .div-area-4 {
  width: 100%;
  position: relative;
  z-index: 0;
}

#footer-global .div-area-4 .div-background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#footer-global .div-area-4 .div-background::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-matteblack);
  opacity: 0.8;
  position: absolute;
  left: 0;
  top: 0;
}

#footer-global .div-area-4 .div-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  color: var(--color-white);
  padding-block: var(--grid-6);
}

#footer-global .div-area-4 .div-body .div-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--grid-2);
  min-width: var(--grid-28);
  text-align: center;
}

#footer-global .div-area-4 .div-body .div-guide .h-title .jp {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  margin-block: -0.096em;
}

#footer-global .div-area-4 .div-body .div-guide .h-title .en {
  font-family: var(--font-cormorant);
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-block: -0.3em;
}

#footer-global .div-area-4 .div-body .div-guide .p-message {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  line-height: 1.84;
  margin-block: -0.42em;
}

#footer-global .div-area-4 .div-body .div-guide .p-description {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8em;
  height: 1em;
  font-family: var(--font-sans-serif);
  font-size: 1.04rem;
  letter-spacing: 0.08em;
  margin-block: -0.096em;
}

#footer-global .div-area-4 .div-body .div-guide .p-description .number {
  display: inline-block;
  font-family: var(--font-inter);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
  transform: translateY(-8%);
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding: 1.44rem 0;
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content .text {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  color: var(--color-white);
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content .text .en {
  font-family: var(--font-cormorant);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content .text .jp {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  margin-block: -0.096em;
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 2rem;
}

#footer-global .div-area-4 .div-body .div-guide .a-link-content .icon svg.icon-arrow {
  fill: var(--color-white);
  width: 0.6rem;
  height: auto;
  margin-right: -0.16rem;
}

#footer-global .div-area-5 {
  width: 100%;
  background-color: var(--color-matteblack);
  position: relative;
}

#footer-global .div-area-5 .div-body {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: var(--grid-78);
  background-color: var(--color-matteblack);
  padding-block: var(--grid-4);
  margin-inline: auto;
}

#footer-global .div-area-5 .div-body .div-1 {
  display: flex;
  flex-direction: column;
  gap: var(--grid-3);
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-menu > li {
  color: var(--color-white);
  white-space: nowrap;
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-menu > li > a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-block: inherit;
  white-space: inherit;
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-content > li {
  font-family: var(--font-cormorant);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-sns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
  margin-top: var(--grid-3);
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-sns .icon {
  fill: var(--color-white);
  width: 1.84rem;
  height: auto;
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-management {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-top: var(--grid);
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-management > li {
  font-family: var(--font-inter);
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-management > li + li:before {
  content: "/";
  margin-inline: 0.4rem;
}

#footer-global .div-area-5 .div-body .div-1 .div-brand {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid) * 1.5);
}

#footer-global .div-area-5 .div-body .div-1 .div-brand .p-brand-name {
  color: var(--color-white);
  font-family: var(--font-serif);
  line-height: 1.92;
  margin-block-start: -0.46rem;
}

#footer-global .div-area-5 .div-body .div-1 .div-brand .p-brand-name .chawaka {
  font-size: 1.84rem;
  letter-spacing: 0.24em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-1 .div-brand .p-brand-name .kyoto-uji {
  font-size: 1.44rem;
  letter-spacing: 0.24em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-1 .div-brand .p-brand-name .furigana {
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-1 .div-brand .address-brand,
#footer-global .div-area-5 .div-body .div-1 .div-brand .p-brand-description {
  color: var(--color-white);
  font-family: var(--font-sans-serif);
  font-size: 1.04rem;
  letter-spacing: 0.16em;
  line-height: 1.84;
  margin-block: -0.42em;
}

#footer-global .div-area-5 .div-body .div-1 .small-copyright {
  color: var(--color-white);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: 1.04rem;
  letter-spacing: 0.02em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--grid-2);
}

#footer-global .div-area-5 .div-body .div-2 .logo-chawaka {
  fill: var(--color-white);
  width: auto;
  height: calc(var(--grid) * 4.5);
}

#footer-global .div-area-5 .div-body .div-2 .p-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  color: var(--color-white);
}

#footer-global .div-area-5 .div-body .div-2 .p-tagline .jp {
  font-family: var(--font-serif);
  font-size: 1.44rem;
  letter-spacing: 0.08em;
  margin-block: -0.096em;
}

#footer-global .div-area-5 .div-body .div-2 .p-tagline .en {
  font-family: var(--font-cormorant);
  font-size: 1.44rem;
  letter-spacing: 0.02em;
  line-height: 1.84;
  margin-block: -0.42em;
}

@media (hover: hover) {
  #footer-global .div-area-1 .ul-breadcrumbs > li > a[href]:hover {
    opacity: 0.64;
  }

  #footer-global .div-area-2 .div-slider .div-slider-content .ul-slider a:hover .figure-banner img {
    filter: brightness(0.984);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content:hover .figure-image img {
    filter: brightness(0.8);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content:hover .div-1 .h-title,
  #footer-global .div-area-3 .ul-products > li .a-link-content:hover .div-1 .p-tagline {
    opacity: 0.64;
  }

  #footer-global .div-area-4 .div-body .div-guide .a-link-content:hover {
    border-bottom-color: rgba(255, 255, 255, 0.48);
  }

  #footer-global .div-area-4 .div-body .div-guide .a-link-content:hover .text {
    opacity: 0.8;
  }

  #footer-global .div-area-4 .div-body .div-guide .a-link-content:hover .icon {
    background-color: var(--color-white);
    outline-color: transparent;
  }

  #footer-global .div-area-4 .div-body .div-guide .a-link-content:hover .icon svg.icon-arrow {
    fill: var(--color-black);
  }

  #footer-global .div-area-5 .div-body .div-1 .ul-menu > li > a:hover {
    opacity: 0.64;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #footer-global .div-area-1 .div-body {
    flex-direction: column;
    justify-content: initial;
    gap: var(--grid-4);
    width: auto;
    padding-block: var(--grid-4);
    margin-inline: var(--grid-2);
  }

  #footer-global .div-area-1 .div-body .nav-footer {
    flex-direction: column;
    gap: var(--grid-2);
  }

  #footer-global .div-area-1 .div-body .nav-footer .p-tagline::after {
    display: none;
  }

  #footer-global .div-area-2 .div-slider .div-slider-content {
    width: auto;
    margin-inline: var(--grid-2);
  }

  #footer-global .div-area-2 .div-slider .div-slider-content .ul-slider {
    margin-inline: calc(var(--grid) * -1);
  }

  #footer-global .div-area-2 .div-slider .div-slider-content .ul-slider > li {
    margin-inline: var(--grid);
  }

  #footer-global .div-area-2 .div-slider .div-slider-content .ul-slider .figure-banner {
    width: calc(var(--grid-44) / 2);
  }

  #footer-global .div-area-3 > .div-body {
    width: auto;
    padding-block: var(--grid-4);
    margin-inline: var(--grid-2);
  }

  #footer-global .div-area-3 .ul-products {
    flex-wrap: wrap;
    column-gap: var(--grid-2);
    row-gap: var(--grid-4);
    width: 100%;
  }

  #footer-global .div-area-3 .ul-products > li {
    width: calc(50% - var(--grid));
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content {
    justify-content: flex-start;
    gap: initial;
    padding-block: 0;
    padding-right: var(--grid-2);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 {
    flex: initial;
    width: var(--grid-16);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title {
    flex-direction: column;
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title .en {
    font-size: 1.84rem;
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .h-title .jp {
    font-size: 1.12rem;
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .p-tagline .en {
    font-size: 0.8rem;
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-1 .p-tagline .jp {
    font-size: 0.96rem;
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.kibako {
    height: calc(12rem * 0.64);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.mari {
    height: calc(7.2rem * 0.64);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.square {
    height: calc(12.8rem * 0.64);
  }

  #footer-global .div-area-3 .ul-products > li .a-link-content .div-2 img.teabag {
    height: calc(11.8rem * 0.64);
  }

  #footer-global .div-area-4 .div-body {
    flex-direction: column;
    justify-content: initial;
    gap: var(--grid-6);
    width: auto;
    margin-inline: var(--grid-2);
  }

  #footer-global .div-area-4 .div-body .div-guide {
    width: 100%;
    min-width: initial;
    gap: var(--grid-3);
  }

  #footer-global .div-area-4 .div-body .div-guide .h-title .jp {
    font-size: 0.96rem;
  }

  #footer-global .div-area-4 .div-body .div-guide .h-title .en {
    font-size: 2.8rem;
  }

  #footer-global .div-area-4 .div-body .div-guide .p-message {
    display: flex;
    flex-direction: column;
    gap: var(--grid-2);
  }

  #footer-global .div-area-4 .div-body .div-guide .p-description {
    flex-direction: column;
    gap: 1.2em;
    height: auto;
  }

  #footer-global .div-area-4 .div-body .div-guide .p-description .number {
    transform: none;
  }

  #footer-global .div-area-4 .div-body .div-guide .a-link-content {
    width: var(--grid-32);
  }

  #footer-global .div-area-5 .div-body {
    flex-direction: column;
    align-items: initial;
    justify-content: initial;
    gap: var(--grid-6);
    width: auto;
    margin-inline: var(--grid-2);
  }

  #footer-global .div-area-5 .div-body .div-1 {
    gap: var(--grid-3);
  }

  #footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-content {
    gap: var(--grid-3);
  }

  #footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-sns {
    margin-top: var(--grid-4);
  }

  #footer-global .div-area-5 .div-body .div-1 .nav-footer .ul-management {
    margin-top: var(--grid-2);
  }

  #footer-global .div-area-5 .div-body .div-1 .div-brand {
    flex-direction: column;
    gap: var(--grid-2);
  }

  #footer-global .div-area-5 .div-body .div-2 .logo-chawaka {
    height: var(--grid-5);
  }
}