@charset "UTF-8";
/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
@keyframes clipPathCircle {
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button {
  margin: 0;
  padding: 0;
}

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

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
  transition: all 0.25s;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.5;
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

@media (min-width: 600px) {
  .device-sp {
    display: none;
  }
}

.device-pc {
  display: none;
}
@media (min-width: 600px) {
  .device-pc {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  font-size: 1rem;
}
body.scroll_rock {
  overflow: hidden;
}

:root {
  --text-black: #414141;
}

body {
  font-family: "Gothic Medium BBB";
  color: var(--text-black);
}

.footer {
  --footer-pad: 106px 14.1333333333vw 53px;
  --footer-bg-color: #AD7C67;
  --share-gap: 18px;
  --share-icon-gap: 24px;
  --f-hobo-mar: 26px 0 45px;
  --f-fs: 0.875rem;
  --f-copy-fs: 0.5625rem;
  --f-hobo-lh: 168.5%;
  --f-hobo-ls: 1.96px;
  --f-copy-ls: 0.9px;
  --f-share-ls: 1.96px;
  --banner-mb: 33px;
  position: relative;
  font-family: "Koburina Gothic W6 JIS2004";
  display: flex;
  flex-direction: column;
  padding: var(--footer-pad);
  color: #ffffff;
  background-color: var(--footer-bg-color);
}
.footer_banner {
  margin-bottom: var(--banner-mb);
}
.footer_banner img {
  max-width: 856px;
  width: 100%;
  height: auto;
}
.footer_share {
  display: flex;
  gap: var(--share-gap);
  align-items: center;
}
.footer_share ul {
  display: flex;
  gap: var(--share-icon-gap);
  align-items: center;
}
.footer_share__title {
  font-size: var(--f-fs);
  letter-spacing: var(--f-share-ls);
}
.footer_hobo {
  margin: var(--f-hobo-mar);
  font-size: var(--f-fs);
  line-height: var(--f-hobo-lh);
  letter-spacing: var(--f-hobo-ls);
}
.footer_copyright {
  font-size: var(--f-copy-fs);
  letter-spacing: var(--f-copy-ls);
}
@media (min-width: 768px) {
  .footer {
    --footer-pad: 106px 0 56px;
    --share-gap: 28px;
    --share-icon-gap: 25px;
    --f-hobo-mar: 23px 0 18px;
    --f-fs: 1.125rem;
    --f-copy-fs: 0.75rem;
    --f-hobo-lh: normal;
    --f-hobo-ls: 1.26px;
    --f-copy-ls: 1.2px;
    --f-share-ls: 1.26px;
    align-items: center;
  }
  .footer_banner {
    padding: 32px;
  }
  .footer_hobo ul {
    display: flex;
  }
  .footer_hobo li {
    display: flex;
  }
  .footer_hobo li:not(:last-of-type):after {
    content: "／";
  }
}

.background {
  --background-ar: 375 / 668;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: salmon;
}
.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .background {
    --background-ar: 1440 / 900;
  }
}

.header {
  --header-height: 112vw;
  --tsuki-pos-y: calc(286/668 * 100vh);
  --tsuki-pos-x: calc(100% - 120px - 21px);
  --tsuki-w: 120.361px;
  --tsuki-h: 102.049px;
  --hobo-pos-y: 4.2666666667vw;
  --hobo-pos-x: 4.5333333333vw;
  --hobo-w: 14.6666666667vw;
  --hobo-h: 1.9066666667vw;
  position: relative;
  z-index: 1;
}
.header .logo_TSUKINOMISE {
  position: absolute;
  top: var(--tsuki-pos-y);
  left: var(--tsuki-pos-x);
  width: fit-content;
}
.header .logo_TSUKINOMISE img {
  width: var(--tsuki-w);
  height: var(--tsuki-h);
}
.header .logo_HOBONICHI {
  position: absolute;
  display: block;
  top: var(--hobo-pos-y);
  right: var(--hobo-pos-x);
  width: fit-content;
}
.header .logo_HOBONICHI img {
  width: var(--hobo-w);
  height: var(--hobo-h);
}
@media (min-width: 768px) {
  .header {
    --header-height: 561px;
    --tsuki-pos-y: 30px;
    --tsuki-pos-x: 34px;
    --tsuki-w: 164px;
    --tsuki-h: 139.05px;
    --hobo-pos-y: 44px;
    --hobo-pos-x: 43px;
    --hobo-w: 100px;
    --hobo-h: 12.99px;
  }
}

.main {
  position: relative;
  padding: 62.874251497vh 0 126px;
  background-image: linear-gradient(rgba(225, 231, 228, 0) 100vh, rgba(225, 231, 228, 0.9) 100vh);
}
.main .main__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(88.5333333333vw, 848px);
  margin: 0 auto;
  padding: 0 0 99px 0;
  background-color: rgba(255, 255, 255, 0.9);
}
.main .wrap {
  width: min(78.6666666667vw, 560px);
}
.main img {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .main {
    padding: 63.6666666667vh 0 252px;
  }
}

.yodogawa {
  --yodo-pad: 47px 0 50px;
  --p-fs: 0.875rem;
  --p-lh: 183.5%;
  --p-ls: -0.42px;
  --p-ta: justify;
  --p-br: none;
  --p-ws: normal;
  --h2-w: 272.29px;
  --h2-h: 52.92;
  --h2-w-min: 72.6106666667vw;
  --h2-w-max: 501px;
  --h2-mb: 33px;
  padding: var(--yodo-pad);
}
.yodogawa h2 {
  max-width: 100%;
  width: min(var(--h2-w-min), var(--h2-w-max));
  margin-bottom: var(--h2-mb);
}
.yodogawa h2 img {
  width: 100%;
  height: auto;
}
.yodogawa p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: var(--p-ls);
  text-align: var(--p-ta);
  white-space: var(--p-ws);
}
.yodogawa p a {
  color: #27B8B6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 768px) {
  .yodogawa {
    --yodo-pad: 118px 0 70px;
    --p-fs: 1rem;
    --p-lh: 192%;
    --p-ls: 0.8px;
    --p-ta: normal;
    --p-br: block;
    --p-ws: pre-line;
    --h2-mb: 57.52px;
  }
}

.contents {
  --contents-pad: 30px;
  --arrow-size: 38px;
  --table-size: 55px;
  --table-fs: 0.6875rem;
  --table-h: 143px;
  --arrow-pad: 7px;
  width: 100%;
  max-width: 850px;
  border-top: 0.5px solid #414141;
  border-bottom: 0.5px solid #414141;
}
.contents ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 547px;
  height: var(--table-h);
  margin: 0 auto;
  padding: var(--contents-pad);
  font-size: var(--table-fs);
  letter-spacing: 0.7px;
}
.contents li,
.contents a {
  height: 100%;
}
.contents a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.contents a:before {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
.contents a.is-disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
.contents__table:before {
  width: var(--table-size);
  height: var(--table-size);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85" fill="none"%3E%3Cpath d="M25 27H61" stroke="%23414141" stroke-width="0.5"/%3E%3Cpath d="M25 42.5H61" stroke="%23414141" stroke-width="0.5"/%3E%3Cpath d="M25 58H61" stroke="%23414141" stroke-width="0.5"/%3E%3Ccircle cx="42.5" cy="42.5" r="41.5" stroke="%23414141" stroke-width="0.5"/%3E%3C/svg%3E');
}
.contents__prev, .contents__next {
  padding-top: var(--arrow-pad);
}
.contents__prev:before, .contents__next:before {
  width: var(--arrow-size);
  height: var(--arrow-size);
}
.contents__prev:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 44" fill="none"%3E%3Cpath d="M22.0001 42.9999L1.00015 22L22.0001 1.00008" stroke="%23414141" stroke-width="0.5"/%3E%3C/svg%3E');
}
.contents__next:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 44" fill="none"%3E%3Cpath d="M0.999924 1.00008L21.9998 22L0.999924 42.9999" stroke="%23414141" stroke-width="0.5"/%3E%3C/svg%3E');
}
@media (min-width: 768px) {
  .contents {
    --contents-pad: 25px 0;
    --arrow-size: 44px;
    --table-size: 83px;
    --table-fs: 0.875rem;
    --table-h: 176px;
    --arrow-pad: 21px;
  }
}

.chapter {
  --chapter-pad: 50px 0 0;
  --sub-fs: 0.875rem;
  --sub-lh: 158.5%;
  --sub-ls: -0.24px;
  --sub-ff: "halt" on;
  --sub-mar: 8px 0;
  --title-fs: 1.125rem;
  --title-lh: 158.5%;
  --title-ls: 2.43px;
  --date-fs: 0.75rem;
  --date-lh: 192%;
  --date-ls: 0.6px;
  --circle-size: 96px;
  --counter-fs: 1.488rem;
  --counter-ls: -1.24px;
  counter-increment: item-number;
  display: grid;
  padding: var(--chapter-pad);
}
.chapter__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle-size);
  height: var(--circle-size);
  color: #2b2b2b;
  font-family: "Koburina Gothic W1 JIS2004";
  font-size: var(--counter-fs);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"%3E%3Ccircle opacity="0.1" cx="50" cy="50" r="48" stroke="%235BB2A2" stroke-width="3.072"/%3E%3Cpath d="M50.384 98C76.6816 98 98 76.5097 98 50C98 23.4903 76.6816 2 50.384 2" stroke="%235BB2A2" stroke-width="3.072"/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}
.chapter__sub {
  margin: var(--sub-mar);
  font-size: var(--sub-fs);
  line-height: var(--sub-lh);
  letter-spacing: var(--sub-ls);
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 0.75px;
  font-feature-settings: var(--sub-ff);
}
.chapter__title {
  margin-top: 20px;
  font-size: var(--title-fs);
  line-height: var(--title-lh);
  letter-spacing: var(--title-ls);
}
.chapter__date {
  color: #999999;
  font-size: var(--date-fs);
  line-height: var(--date-lh);
  letter-spacing: var(--date-ls);
}
@media (min-width: 768px) {
  .chapter {
    --chapter-pad: 68px 0 0;
    --sub-mar: 11px 0 0;
    --sub-fs: 1rem;
    --sub-ff: normal;
    --title-fs: 1.3125rem;
    --title-ls: -0.315px;
    --circle-size: 125px;
    --counter-fs: 1.9375rem;
    grid-template-columns: var(--circle-size) auto;
    align-items: center;
    gap: 0 20px;
  }
  .chapter__content {
    display: flex;
    flex-direction: column;
  }
  .chapter__title {
    margin-top: 0;
  }
  .chapter__date {
    grid-column: 2;
    margin-top: auto;
  }
}

.conversation {
  --c-gap: 30px;
  --c-pad: 40px 0 42px;
  --c-fs: 0.875rem;
  --c-lh: 192%;
  --c-ls: 0.25px;
  width: min(78.6666666667vw, 560px);
  display: grid;
  gap: var(--c-gap);
  padding: var(--c-pad);
  font-size: var(--c-fs);
  line-height: var(--c-lh);
  letter-spacing: var(--c-ls);
}
.conversation__title + .conversation {
  padding-top: 0;
}
.conversation .talk {
  display: grid;
}
.conversation .speak {
  white-space: normal;
}
.conversation .speakers {
  display: flex;
  gap: 8px;
}
.conversation a {
  color: #27B8B6;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 0.75px;
}
.conversation .nl {
  display: block;
  height: 1.5em;
}
@media (min-width: 768px) {
  .conversation {
    --c-gap: 72px;
    --c-pad: 81px 0 86px;
    --c-fs: 1rem;
    --c-ls: 0.8px;
  }
  .conversation .talk {
    grid-template-columns: 88px auto;
  }
  .conversation .speak {
    white-space: pre-line;
  }
}

.speaker:empty:before {
  content: "─";
}
.speaker.guest {
  color: #CD8DC3;
}

.products {
  --products-width: 100%;
  --products-padding: 68px 0 calc(141px/2);
  --gap: 50px;
  display: grid;
  gap: var(--gap);
  width: var(--products-width);
  padding: var(--products-padding);
  border-top: 1px solid #DBDBDB;
}
@media (min-width: 768px) {
  .products {
    --products-padding: 68px 0 141px;
    --gap: 100px;
  }
}

.product__line_title {
  --line-h-mb: 53px;
  --line-h-fs: 1.125rem;
  --line-h-lh: 33px;
  --line-h-date-pad: 0 15px;
  margin-bottom: var(--line-h-mb);
  color: #AD7C67;
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--line-h-fs);
  letter-spacing: 0.84px;
}
.product__line_title .date {
  display: block;
  width: fit-content;
  margin-top: 11px;
  padding: var(--line-h-date-pad);
  color: #ffffff;
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--line-h-fs);
  line-height: var(--line-h-lh);
  background-color: #AD7C67;
}
@media (min-width: 768px) {
  .product__line_title {
    --line-h-fs: 1.5rem;
    --line-h-lh: 36px;
    --line-h-date-pad: 0 26px;
  }
}

.product__lineup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42.5px 20px;
}
@media (min-width: 768px) {
  .product__lineup {
    gap: 85px 40px;
  }
}

.product {
  --gap: 16px;
  --lh: 158.5%;
  --copy-fs: 0.75rem;
  --copy-ls: -0.18px;
  --copy-br: none;
  --name-fs: 1rem;
  --name-ls: -0.24px;
  --size-fs: 0.75rem;
  --size-ls: -0.18px;
  --type-fs: 0.875rem;
  --type-ls: -0.21px;
  --price-fs: 1.3125rem;
  --price-ls: 1.47px;
  --tax-fs: 0.6875rem;
  --tax-ls: 0.385px;
  --button-fs: 0.875rem;
  --button-ls: 0.7px;
  --button-h: 32px;
  color: #414141;
}
.product .image {
  width: 100%;
  height: auto;
  background-color: #E8EBEE;
}
.product .copy {
  margin-bottom: var(--gap);
  font-family: "Yu Gothic Pr6N M";
  font-size: var(--copy-fs);
  line-height: var(--lh);
  letter-spacing: var(--copy-ls);
}
.product .copy br {
  display: var(--copy-br);
}
.product .name {
  font-family: "Yu Gothic Pr6N D";
  font-size: var(--name-fs);
  line-height: var(--lh);
  letter-spacing: var(--name-ls);
}
.product .size {
  margin-bottom: var(--gap);
  font-family: "Yu Gothic Pr6N M";
  font-size: var(--size-fs);
  line-height: var(--lh);
  letter-spacing: var(--size-ls);
}
.product .type {
  font-family: "Yu Gothic Pr6N M";
  font-size: var(--type-fs);
  line-height: var(--lh);
  letter-spacing: var(--type-ls);
}
.product .price {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--price-fs);
  line-height: normal;
  letter-spacing: var(--price-ls);
}
.product .inc-tax {
  font-size: var(--tax-fs);
  line-height: normal;
  letter-spacing: var(--tax-ls);
}
.product .button {
  width: 100%;
  max-width: 192px;
  margin-top: var(--gap);
  display: block;
  color: #ffffff;
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--button-fs);
  line-height: var(--button-h);
  letter-spacing: var(--button-ls);
  text-align: center;
  background-color: #B77EAE;
  border-radius: calc(var(--button-h) / 2);
}
.product .urikire {
  display: none;
  font-size: 12px;
  font-family: "Koburina Gothic W6 JIS2004";
}
.product .urikire.active {
  display: block;
  margin-top: 5px;
  color: #C790BB;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.product .splide {
  margin-bottom: 53px;
}
.product .splide__pagination {
  bottom: -37px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 23px;
  padding: 0;
}
.product .splide__pagination__page {
  width: 17px;
  height: 17px;
  margin: 0;
  opacity: 1;
  box-shadow: 0 0 0 0.2px #DBDBDB, 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.product .splide__pagination__page.is-active {
  transform: scale(1);
  background-color: inherit;
  box-shadow: 0 0 0 0.2px #DBDBDB, 0 0 0 4px #ffffff, 0px 0px 4px 4px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
  .product {
    --gap: 13px;
    --copy-fs: 0.9375rem;
    --copy-ls: -0.225px;
    --copy-br: block;
    --name-fs: 1.125rem;
    --name-ls: -0.18px;
    --button-fs: 1rem;
    --button-ls: 0.8px;
    --button-h: 35px;
  }
  .product .urikire {
    font-size: 15px;
  }
  .product .splide {
    margin-bottom: 51px;
  }
  .product .splide__pagination {
    bottom: -38px;
  }
}

.line__signature .splide__pagination li:nth-of-type(1) .splide__pagination__page {
  background-color: #E3DCCF;
}
.line__signature .splide__pagination li:nth-of-type(1).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #E3DCCF, #E3DCCF calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #E3DCCF calc(50% + 0.5px), #E3DCCF);
}
.line__signature .splide__pagination li:nth-of-type(2) .splide__pagination__page {
  background-color: #AA699D;
}
.line__signature .splide__pagination li:nth-of-type(2).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #AA699D, #AA699D calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #AA699D calc(50% + 0.5px), #AA699D);
}
.line__signature .splide__pagination li:nth-of-type(3) .splide__pagination__page {
  background-color: #14245F;
}
.line__signature .splide__pagination li:nth-of-type(3).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #14245F, #14245F calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #14245F calc(50% + 0.5px), #14245F);
}

.line__bold .splide__pagination li:nth-of-type(1) .splide__pagination__page {
  background-color: #D4CBDF;
}
.line__bold .splide__pagination li:nth-of-type(1).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #D4CBDF, #D4CBDF calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #D4CBDF calc(50% + 0.5px), #D4CBDF);
}
.line__bold .splide__pagination li:nth-of-type(2) .splide__pagination__page {
  background-color: #152951;
}
.line__bold .splide__pagination li:nth-of-type(2).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #152951, #152951 calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #152951 calc(50% + 0.5px), #152951);
}

.line__totonoeru .splide__pagination li:nth-of-type(1) .splide__pagination__page {
  background-color: #B7D4D0;
}
.line__totonoeru .splide__pagination li:nth-of-type(1).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #B7D4D0, #B7D4D0 calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #B7D4D0 calc(50% + 0.5px), #B7D4D0);
}
.line__totonoeru .splide__pagination li:nth-of-type(2) .splide__pagination__page {
  background-color: #D1B295;
}
.line__totonoeru .splide__pagination li:nth-of-type(2).sold-out .splide__pagination__page {
  background-color: transparent;
  background-image: linear-gradient(-45deg, #D1B295, #D1B295 calc(50% - 0.5px), transparent calc(50% - 0.5px), transparent calc(50% + 0.5px), #D1B295 calc(50% + 0.5px), #D1B295);
}

.introduction {
  --intro-pad: 49px 0 50px;
  --intro-fs: 0.875rem;
  padding: var(--intro-pad);
}
.introduction__text {
  white-space: normal;
  font-family: "Ryumin Regular KL";
  font-size: var(--intro-fs);
  line-height: 192%;
  letter-spacing: 1.275px;
}
.introduction__text a {
  color: #27B8B6;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
@media (min-width: 768px) {
  .introduction {
    --intro-pad: 49px 0 73px;
    --intro-fs: 1rem;
  }
  .introduction__text {
    white-space: pre-line;
  }
}

.profile {
  --profile-pad: 37px 0 0;
  --profile-fs: 0.875rem;
  padding: var(--profile-pad);
}
.profile__button {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: var(--profile-fs);
}
.profile__button:before {
  content: "＞";
  display: block;
  transition: transform 0.4s;
}
.profile__button[aria-expanded=true]:before {
  transform: rotate(90deg);
}
.profile__text {
  position: relative;
  overflow: hidden;
  white-space: normal;
  max-height: 0;
  padding: 0;
  font-size: var(--profile-fs);
  line-height: 192%;
  letter-spacing: 1.275px;
  transition: all 0.75s;
}
.profile .show {
  max-height: 31rem;
}
@media (min-width: 768px) {
  .profile {
    --profile-pad: 37px 0 0;
    --profile-fs: 1rem;
  }
  .profile__text {
    white-space: pre-line;
  }
}

.conversation__title {
  --convo-t-pad: 49px 0;
  --convo-t-fs: 1rem;
  width: min(78.6666666667vw, 560px);
  display: block;
  padding: var(--convo-t-pad);
  color: #5BB2A2;
  font-family: "Yu Gothic Pr6N D";
  font-size: var(--convo-t-fs);
  font-style: normal;
  line-height: 192%;
  letter-spacing: 1px;
  border-top: 1px solid #DBDBDB;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .conversation__title {
    --convo-t-fs: 1.25rem;
  }
}

.speaker:not(.all):not(.guest):not(:empty) {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 0;
  color: transparent;
}
.speaker:not(.all):not(.guest):not(:empty):before {
  content: "";
  display: block;
  width: 14px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0.9);
}
.speaker:not(.all):not(.guest):not(:empty).A:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="26" viewBox="0 0 14 26" fill="none"%3E%3Cpath opacity="0.8" d="M2.29522 26H2.44508C3.9625 26 5.46504 25.6637 6.86695 25.0104C8.26886 24.3571 9.54266 23.3995 10.6156 22.1924C11.6886 20.9852 12.5397 19.5521 13.1204 17.9749C13.7011 16.3977 14 14.7072 14 13C14 11.2928 13.7011 9.60235 13.1204 8.02512C12.5397 6.44788 11.6886 5.01477 10.6156 3.80761C9.54266 2.60045 8.26886 1.64287 6.86695 0.989563C5.46504 0.336251 3.9625 -5.08781e-08 2.44508 0H2.29522C-0.765073 8.32187 -0.765073 17.6699 2.29522 25.9918V26Z" fill="%232E3CA9"/%3E%3C/svg%3E');
}
.speaker:not(.all):not(.guest):not(:empty).B:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="26" viewBox="0 0 14 26" fill="none"%3E%3Cpath opacity="0.8" d="M2.29522 26H2.44508C3.9625 26 5.46504 25.6637 6.86695 25.0104C8.26886 24.3571 9.54266 23.3995 10.6156 22.1924C11.6886 20.9852 12.5397 19.5521 13.1204 17.9749C13.7011 16.3977 14 14.7072 14 13C14 11.2928 13.7011 9.60235 13.1204 8.02512C12.5397 6.44788 11.6886 5.01477 10.6156 3.80761C9.54266 2.60045 8.26886 1.64287 6.86695 0.989563C5.46504 0.336251 3.9625 -5.08781e-08 2.44508 0H2.29522C-0.765073 8.32187 -0.765073 17.6699 2.29522 25.9918V26Z" fill="%2354A5AC"/%3E%3C/svg%3E');
}
.speaker:not(.all):not(.guest):not(:empty).C:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="26" viewBox="0 0 14 26" fill="none"%3E%3Cpath opacity="0.8" d="M2.29522 26H2.44508C3.9625 26 5.46504 25.6637 6.86695 25.0104C8.26886 24.3571 9.54266 23.3995 10.6156 22.1924C11.6886 20.9852 12.5397 19.5521 13.1204 17.9749C13.7011 16.3977 14 14.7072 14 13C14 11.2928 13.7011 9.60235 13.1204 8.02512C12.5397 6.44788 11.6886 5.01477 10.6156 3.80761C9.54266 2.60045 8.26886 1.64287 6.86695 0.989563C5.46504 0.336251 3.9625 -5.08781e-08 2.44508 0H2.29522C-0.765073 8.32187 -0.765073 17.6699 2.29522 25.9918V26Z" fill="%23BA79E0"/%3E%3C/svg%3E');
}
.speaker:not(.all):not(.guest):not(:empty).D:before {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="26" viewBox="0 0 14 26" fill="none"%3E%3Cpath opacity="0.8" d="M2.29522 26H2.44508C3.9625 26 5.46504 25.6637 6.86695 25.0104C8.26886 24.3571 9.54266 23.3995 10.6156 22.1924C11.6886 20.9852 12.5397 19.5521 13.1204 17.9749C13.7011 16.3977 14 14.7072 14 13C14 11.2928 13.7011 9.60235 13.1204 8.02512C12.5397 6.44788 11.6886 5.01477 10.6156 3.80761C9.54266 2.60045 8.26886 1.64287 6.86695 0.989563C5.46504 0.336251 3.9625 -5.08781e-08 2.44508 0H2.29522C-0.765073 8.32187 -0.765073 17.6699 2.29522 25.9918V26Z" fill="%23BFBF6C"/%3E%3C/svg%3E');
}
@media (min-width: 768px) {
  .speaker {
    padding-left: 6px;
  }
}

body {
  background-color: #E1E7E4;
}

.contents {
  border-color: #DBDBDB;
}

.conversation {
  --c-gap: 26px;
}
.conversation__title {
  color: #2E3CA9;
}
.conversation .talk {
  grid-template-columns: 30px auto;
  align-items: start;
}

@media (min-width: 768px) {
  .conversation {
    --c-gap: 42px;
    --c-pad: 81px 0 86px;
  }
  .conversation .talk {
    grid-template-columns: 57px auto;
  }
}