:host {
  --font-family: 'Noto Sans JP', sans-serif;
  --font-family-serif: 'Noto Serif JP', serif;
  --font-family-serif-jp: 'Noto Serif JP', serif;
  --font-family-serif-en: 'Noto Serif', serif;
  --font-family-garamond: Garamond, 'Garamond Regular', 'Noto Serif JP', serif;

  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-900: 900;

  --color-text: #222;
  --color-text-sub: #777;
  --color-link: #5b3022;
  --color-accent: #ff8c9b;
  --color-active: #be1d32;
  --color-border: #707070;

  --gap: 50px;
  --full: minmax(var(--gap), 1fr);
  --content: min(990px, 100% - var(--gap) * 2);
  --easing: cubic-bezier(.39, .575, .565, 1);
  --duration: .3s;
}
:host([data-page-lang="en"]) {
  --font-family: 'Noto Sans', sans-serif;
  --font-family-serif: 'Noto Serif', serif;
  --font-family-garamond: Garamond, 'Garamond Regular', 'Noto Serif', serif;

  --font-weight-700: 600;
  --font-weight-900: 700;
}
@media screen and (max-width: 800px) {
  :host {
    --gap: 20px;
  }
}
:host {
  font-family: var(--font-family);
  font-size: calc(18 / 16 * 1rem);
  line-height: calc(32 / 18);
  letter-spacing: 0;
  color: var(--color-text);
  font-feature-settings: "palt" 0;
}

:where(*) {
  text-underline-offset: .5ex;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: revert;
  vertical-align: top;
}
:where(p, h1, h2, h3, h4, h5, h6) {
  min-block-size: 1lh;
  font-size: inherit;
  line-height: inherit;
  text-wrap: revert;
}
:where(button) {
  box-sizing: border-box;
}
:where([tabindex="-1"]:focus-visible) {
  outline: none;
  box-shadow: none;
}
:where(:focus-visible) {
  outline: revert;
  box-shadow: revert;
}

/* ***************************
text
*************************** */
* + p {
  margin-top: 24px;
} 

/* ***************************
link
*************************** */
a:where(:any-link) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-active);
}
@media (any-hover: hover) {
  a:where(:any-link:hover) {
    text-decoration: none;
  }
}
a:not(:has(img)):where([target="_blank"],[href*=".pdf"])::after {
  display: inline-block;
  background-color: var(--color-active);
  margin: -2px calc(6 / 18 * 1em) 0;
  mask-size: 100% 100%;
  vertical-align: middle;
  content: '';
}
a:where([target="_blank"])::after {
  width: calc(16 / 18 * 1em);
  mask-image: url('/sp-bunkaweek/2025/common/styles/images/icon_link.svg');
  aspect-ratio: 16 / 16;
}
a:where([href*=".pdf"])::after {
  width: calc(17 / 18 * 1em);
  mask-image: url('/sp-bunkaweek/2025/common/styles/images/icon_pdf.svg');
  aspect-ratio: 17 / 21;
}

/* ***************************
splide
*************************** */
.splide {
}
.splide__controls {
  display: grid;
  grid-template-columns:
    [full-start arrow-prev]
    max-content
    [pagination]
    max-content
    [toggle]
    max-content
    [arrow-next]
    max-content
    [full-end];
  grid-template-rows: max-content;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  margin-top: 20px;
}
.splide__arrows {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
  grid-row: 1/2;
}
.splide__arrow {
  display: grid;
  margin-top: -5px;
  cursor: pointer;
}
.splide__arrow::before {
  background-color: var(--color-text);
  width: 66px;
  height: 10px;
  mask-image: url('/sp-bunkaweek/2025/common/styles/images/icon_slider_arrow.svg');
  mask-size: 100% 100%;
  content: '';
}
.splide__arrow--prev {
  grid-column: arrow-prev;
}
.splide__arrow--next {
  grid-column: arrow-next;
  scale: -1 1;
}
.splide__pagination {
  grid-column: pagination;
  grid-row: 1/2;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px;
}
.splide__pagination__page {
  position: relative;
  display: grid;
  width: 12px;
  height: 12px;
  background-color: var(--color-text-sub);
  border-radius: 50%;
  overflow: visible;
  transition: background-color var(--duration) var(--easing);
}
.splide__pagination__page::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: -2px;
  left: -3px;
  border: 1px solid var(--color-text);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
  content: '';
}
.splide__pagination__page.is-active {
  background-color: var(--color-accent);
}
.splide__pagination__page.is-active::after {
  opacity: 1;
}
.splide__toggle {
  grid-column: toggle;
  grid-row: 1/2;
  position: relative;
  display: grid;
  width: 30px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid currentColor;
  color: var(--color-text);
}
.splide__toggle::before,
.splide__toggle::after {
  position: absolute;
  width: 8px;
  height: 10px;
  inset: 0;
  margin: auto;
  background-color: currentColor;
  clip-path: polygon(
    0% 0%,
    100% 50%,
    0% 100%
  );
  content: '';
}
.splide__toggle.is-active::before,
.splide__toggle.is-active::after {
  width: 2px;
  clip-path: none;
}
.splide__toggle.is-active::before {
  translate: -3px 0px;
}
.splide__toggle.is-active::after {
  translate: 3px 0px;
}
.splide__slide img {
  width: 100%;
}

/* ***************************
contents
*************************** */
.contents {
  position: relative;
  display: grid;
  align-items: flex-start;

  --nav: min(224px, 224 / 1254 * 100%);
  --content: min(980px, 100% - var(--gap) - var(--nav));
  grid-template-columns: [nav] var(--nav) [content] var(--content);
  grid-template-rows:
    80px
    [nav-start head] max-content
    [info] max-content
    [body] minmax(0, 1fr)
    [nav-end];
  justify-content: space-between;
  column-gap: var(--gap);
  
  min-height: 715px;

  --content-bleed: calc((3400 - 1920) / 1920 * 50%);
  margin: 0 calc(-1 * var(--content-bleed));
  padding-right: calc(max(var(--gap), (100% - 980px) / 2) + var(--content-bleed));
  padding-left: calc(max(var(--gap), (100% - 1920px) / 2 + 67px) + var(--content-bleed));

  background-color: #fff;
  background-image: url('/sp-bunkaweek/2025/common/styles/images/img_bg_texture.webp');
  background-position: center top;
  border-top-left-radius: 50% calc(715 / 1920 * 100vw);
  border-top-right-radius: 50% calc(715 / 1920 * 100vw);
}
.contents::before {
  position: absolute;
  display: block;
  width: 0;
  height: 148px;
  top: -48px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  border-left: 1px solid var(--color-text);
  /* content: ''; */
}
* + .contents {
  margin-top: -237px;
}
@media screen and (max-width: 800px) {
  .contents {
    --nav: 0px;
    --content: 100%;
    --content-bleed: calc((675 - 390) / 390 * 50%);

    grid-template-rows:
      [nav-start] 53px
      [head] max-content
      [info] max-content
      [body] minmax(0, 1fr)
      [nav-end];

    column-gap: 0;
    border-top-left-radius: 50% calc(141 / 390 * 100vw);
    border-top-right-radius: 50% calc(141 / 390 * 100vw);

  }
  .contents::before {
    content: none;
  }
  * + .contents {
    margin-top: -104px;
  }
}
.contents__nav {
  grid-column: nav;
  grid-row: nav;
  position: sticky;
  top: 20px;
  left: 0;
  padding-bottom: 20px;
  z-index: 2;
}
@media screen and (max-width: 800px) {
  .contents__nav {
    width: 224px;
    translate: calc(-1 * var(--gap)) 0px;
  }
}
.contents__head {
  grid-column: content;
  grid-row: head;
  margin-bottom: 14px;
}
.contents__info {
  grid-column: content;
  grid-row: info;
  display: grid;
  column-gap: 40px;
  row-gap: 20px;
  margin-bottom: 30px;
}
@media screen and (max-width: 800px) {
  .contents__info {
    column-gap: 20px;
    margin-bottom: 35px;
  }
}
.contents__info__snsShare {
  margin-left: auto;
}
.contents__body {
  grid-column: content;
  grid-row: body;
}
.contents:not(.home) .contents__body {
  padding-bottom: 130px;
}

/* ***************************
breadCrumb
*************************** */
.breadCrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-family: var(--font-family-serif);
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(24 / 16);
  font-weight: var(--font-weight-500);
}
@media screen and (max-width: 800px) {
  .breadCrumb__list {
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(20 / 14);
  }
}
.breadCrumb__item {
  display: flex;
}
.breadCrumb__item:not(:last-child)::after {
  white-space: pre-line;
  font-weight: var(--font-weight-700);
  color: var(--color-accent);
  content: '　>　';
}

/* ***************************
snsBtns
*************************** */
.snsBtns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 20px;
}
.snsBtns__item {
  display: flex;
}

/* ***************************
localMenu
*************************** */
.localMenu {
  display: grid;
  grid-template-columns: [head body-start] 1fr [toggle] 50px [body-end];
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 13px 0 #e0e0e0;
  overflow: clip;
}
@media screen and (max-width: 800px) {
  .localMenu {
    border-radius: 0 8px 8px 0;
  }
}
.localMenu__head {
  grid-column: head;
  padding: 6px 15px 5px;
  font-family: var(--font-family-serif);
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(20 / 15);
  font-weight: var(--font-weight-700);
}
.localMenu__toggle {
  grid-column: toggle;
  position: relative;
  display: block;
  width: 50px;
  height: 100%;
  min-height: 50px;
}
.localMenu__toggle::before {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  inset: 0;
  margin: auto;
  background-color: var(--color-accent);
  border-radius: 50%;
  transition: 
    width .3s var(--easing),
    height .3s var(--easing),
    border-radius .3s var(--easing);
  content: '';
}
.localMenu__toggle__lines span {
  position: absolute;
  display: block;
  width: 30px;
  height: 0;
  inset: 0;
  margin: auto;
  border-top: 1px solid var(--color-text);
  transition:
    scale .6s var(--easing),
    translate .6s var(--easing),
    rotate .6s var(--easing);
  &:nth-child(1) {
    translate: 0px -5px;
  }
  &:nth-child(2) {}
  &:nth-child(3) {
    translate: 0px 5px;
  }
}

.localMenu__toggle.is-open {
  &::before {
    width: 100%;
    height: 100%;
    border-radius: 0%;
  }
  .localMenu__toggle__lines span {
    &:nth-child(1) {
      translate: 0px 0px;
      rotate: 45deg;
    }
    &:nth-child(2) {
      scale: 0 1;
    }
    &:nth-child(3) {
      translate: 0px 0px;
      rotate: -45deg;
    }
  }
}

.localMenu__body {
  grid-column: body;
  border-top: 1px solid #c5b1b1;
}

/* ***************************
localNav
*************************** */
.localNav {
}
.localNav__list {

}
.localNav__item {
  position: relative;
  background-color: #ffeff1;
  border-bottom: 1px solid #c5b1b1;
}
.localNav__link {
  display: block;
  padding: 14px 16px;
  font-family: var(--font-family-serif);
  font-size: calc(18 / 16 * 1rem);
  line-height: calc(24 / 18);
  font-weight: var(--font-weight-600);
  color: var(--color-text);
  text-decoration: none;
}
.localNav__link.is-active {
  color: var(--color-active);
}
@media (any-hover: hover) {
  .localNav__link:hover {
    text-decoration: underline;
  }
}

.localNav__link:has(~ .localNav__childToggle) {
  padding-right: 60px;
}
.localNav__childToggle {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  top: 6px;
  right: 11px;
}
.localNav__childToggle::before,
.localNav__childToggle::after {
  position: absolute;
  display: block;
  width: 13px;
  height: 0;
  inset: 0;
  margin: auto;
  border-top: 1px solid var(--color-text);
  transition: rotate .3s ease;
  content: '';
}
.localNav__childToggle:not(.is-open)::after {
  rotate: 90deg;
}
.localNav__children {
  display: none;
  background-color: #fff;
}
.localNav__child {
  border-top: 1px solid #c5b1b1;
}
.localNav__childLink {
  position: relative;
  display: block;
  padding: 12px 16px 12px calc(52 / 224 * 100%);
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(24 / 16);
  color: var(--color-link);
  text-decoration: none;
}
.localNav__childLink::before {
  position: absolute;
  margin-left: calc(-1 * (1em + 2px));
  content: '・';
}
@media (any-hover: hover) {
  .localNav__childLink:hover {
    text-decoration: underline;
  }
}

/* ***************************
langChange
*************************** */
.langChange {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5em;
  justify-content: center;
  padding: 25px 16px 10px;
  font-family: var(--font-family-serif-jp);
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(24 / 16);
  font-weight: var(--font-weight-500);
}
.langChange__item {
  display: flex;
  column-gap: inherit;
}
.langChange__item + .langChange__item::before {
  font-weight: var(--font-weight-700);
  content: '｜';
}
.langChange__link {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
}
.langChange__link::after {
  position: absolute;
  display: block;
  width: 23px;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  border-top: 1px solid var(--color-active);
  opacity: 0;
  
  content: '';
}
:is(
  .langChange[data-current="ja"] .langChange__link[data-lang="ja"],
  .langChange[data-current="en"] .langChange__link[data-lang="en"]
)::after {
  opacity: 1;
}


/* ***************************
bunkaweekLink 
*************************** */
.bunkaweekLink {
  display: grid;
  padding: 30px 16px;
  row-gap: 18px;
  font-family: var(--font-family-serif-jp);
}
* + .bunkaweekLink {
  margin-top: 12px;
}
.bunkaweekLink__banner {
  font-size: calc(17 / 16 * 1rem);
  line-height: calc(21 / 17);
  font-weight: var(--font-weight-700);
  text-align: center;
}
.bunkaweekLink__banner a {
  position: relative;
  display: block;
  padding: 9px 10px 7px;
  background-color: var(--color-text);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  overflow: clip;
  z-index: 0;
}
.bunkaweekLink__banner img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.bunkaweekLink__link {
  position: relative;
  margin-top: 0;
  padding-left: 53px;
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(23 / 16);
  font-weight: var(--font-weight-500);
}
.bunkaweekLink__link a {
  color: var(--color-text);
  text-decoration: none;
}
.bunkaweekLink__link a::before {
  position: absolute;
  width: 44px;
  height: 7px;
  top: 8px;
  left: 0;
  background-image: url('/sp-bunkaweek/2025/common/styles/images/icon_nav_arrow.svg');
  background-size: 100% 100%;
  content: '';
}

/* ***************************
footer
*************************** */
.footer {
  background-color: #fff;
}
:is(.footer__links, .footer__nav) {
  display: grid;
  grid-template-columns: 
    [full-start]
    var(--full)
    [content-start]
    var(--content)
    [content-end]
    var(--full)
    [full-end];
}
:is(.footer__links, .footer__nav) > * {
  grid-column: content;
}

.footer__links {
  padding-top: 21px;
  padding-bottom: 30px;
  background-color: var(--color-text);
  background-image: url('/sp-bunkaweek/2025/common/styles/images/img_bg_texture.webp');
  background-position: center top;
  color: #fff;
}
.footer__nav {
  padding-top: 60px;
  padding-bottom: 134px;
}

/* ***************************
footerLinks
*************************** */
.footerLinks {
  display: grid;
  justify-items: center;
  text-align: center;
}
.footerLinks__head {
  margin-bottom: 17px;
  font-size: calc(24 / 16 * 1rem);
  line-height: calc(35 / 24);
  font-weight: var(--font-weight-700);
}
@media screen and (max-width: 800px) {
  .footerLinks__head {
    margin-bottom: 18px;
    font-size: calc(22 / 16 * 1rem);
    line-height: calc(38 / 22);
  }
}
.footerLinks__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 7px;
}
.footerLinks__link {
  font-size: calc(18 / 16 * 1rem);
  line-height: calc(24 / 18);
  color: #fff;
  text-decoration-color: currentColor;
}
.footerLinks__link::after {
  background-color: currentColor;
}
@media screen and (max-width: 800px) {
  .footerLinks__link {
    font-size: calc(16 / 16 * 1rem);
    line-height: calc(30 / 16);
  }
}

/* ***************************
footerNav
*************************** */
.footerNav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 26px;
}
@media screen and (max-width: 800px) {
  .footerNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;
  }
}
.footerNav__item {
  display: grid;
}
.footerNav__link {
  position: relative;
  display: grid;
  align-items: center;
  padding: 17px 45px 17px 20px;
  font-family: var(--font-family-serif);
  font-size: calc(20 / 16 * 1rem);
  line-height: calc(30 / 20);
  font-weight: var(--font-weight-700);
  text-decoration: none;
  color: var(--color-text);
  border-radius: 8px;
  box-shadow: 0 0 13px 0 #e0e0e0;
  transition: color var(--duration) var(--easing);
  z-index: 0;
}
.footerNav__link::before,
.footerNav__link::after {
  position: absolute;
  display: block;
  margin-block: auto;
  z-index: -1;
  content: '';
}
.footerNav__link::before {
  width: 18px;
  height: 18px;
  top: 0;
  right: 16px;
  bottom: 0;
  background-color: var(--color-accent);
  border-radius: 50%;
}
.footerNav__link::after {
  width: 22px;
  height: 11px;
  right: 24px;
  top: 0;
  bottom: 9px;
  background-color: currentColor;
  mask-image: url('/sp-bunkaweek/2025/common/styles/images/icon_footer_nav_arrow.svg');
  mask-size: 100% 100%;
}
@media (any-hover: hover) {
  .footerNav__link:hover {
    color: var(--color-active);
  }
}
@media screen and (max-width: 800px) {
  .footerNav__link {
    padding: 14px 45px 14px 10px;
    font-size: calc(15 / 16 * 1rem);
    line-height: calc(20 / 15);
  }
  .footerNav__link::before {
    right: 10px;
  }
  .footerNav__link::after {
    right: 18px;
  }
}

/* ***************************
animation
*************************** */
.u-fadeIn {
  opacity: 0;
  transition:
    translate 1.2s var(--easing),
    opacity 1.2s var(--easing);
  
  &.is-visible {
    translate: 0 0%;
    opacity: 1;
  }
  &.is-visible {
    opacity: 1;
  }
}
.u-slideIn {
  translate: 0 max(20px, 10%);
  opacity: 0;
  transition:
    translate 1.2s var(--easing),
    opacity 1.2s var(--easing);
  &.is-visible {
    translate: 0 0%;
    opacity: 1;
  }
}
.u-fadeIn,
.u-slideIn {
  transition-delay: var(--delay-pc, 0s);
}
@media screen and (max-width: 800px) {
  .u-fadeIn,
  .u-slideIn {
    transition-delay: var(--delay-sp, 0s);
  }
}