@charset "UTF-8";




.the-cacao {
  
  --tc_PcDesign: 1440;
  --tc_SpDesign: 375;
  --tc_spViewport: 768;
  --tc_breakPointSpMin: 374px;
  --tc_breakPointWide: 768px;
  --tc_widthDefault: 1088px;
  --tc_widthMax: 1200px;
  --tc_widthMin: 1000px;
  --tc_headerHeightSp: 64px;
  --tc_headerHeightPc: 64px;
  --tc_vh:100vh;
  --tc_vw:100vw;
  --tc_sidePaddingSp1:calc(25 / var(--tc_SpDesign) * 100vw);
  --tc_sidePaddingSp2:calc(25 / var(--tc_SpDesign) * 100vw);
  --tc_sidePaddingPc1:40px;
  --tc_fontGothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --tc_fontMincho: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --tc_fontEB: "EB Garamond", serif;
  --tc_gothicWeight_medium:400;
  --tc_gothicWeight_demiBold:600;
  --tc_gothicWeight_bold:700;
  --tc_colorMain1: #351807;
  --tc_colorMain2: #a7874b;
  --tc_colorMain3: #FFFFFF;
  --tc_colorMain4: #EEEEEE;
  --tc_colorMain5: #EAE4DC;
  --tc_colorProduct1: #f18d00;
  --tc_colorProduct2: #006c7e;
  --tc_colorProduct3: #a62e6a;
  --tc_colorProduct4: #b24f00;
  --tc_gradient1: linear-gradient( 90deg, #ffdb96 0%, #c39e57 100%);
  --tc_zIndexLoading:9002;
  --tc_zIndexHeader:100;
  --tc_zIndexModal:calc(var(--tc_zIndexHeader) + 1);
  --tc_filterColorWhite:invert(100%) sepia(0%) saturate(0%) hue-rotate(34deg) brightness(103%) contrast(104%);
  --tc_transitionBase:.3s;
}



.the-cacao {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
.the-cacao *,
.the-cacao ::before,
.the-cacao ::after {
  background-repeat: no-repeat; 
  box-sizing: border-box;
}
.the-cacao ::before,
.the-cacao ::after {
  text-decoration: inherit; 
  vertical-align: inherit;
}
.the-cacao * {
  padding: 0; 
  margin: 0;
}
.the-cacao hr {
  overflow: visible; 
  height: 0; 
  color: inherit; 
}
.the-cacao details,
.the-cacao main {
  display: block; 
}
.the-cacao summary {
  display: list-item; 
}
.the-cacao small {
  font-size: 80%; 
}
.the-cacao [hidden] {
  display: none; 
}
.the-cacao abbr[title] {
  border-bottom: none; 
  
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.the-cacao a {
  background-color: transparent; 
}
.the-cacao a:active,
.the-cacao a:hover {
  outline-width: 0; 
}
.the-cacao code,
.the-cacao kbd,
.the-cacao pre,
.the-cacao samp {
  font-family: monospace, monospace; 
}
.the-cacao pre {
  font-size: 1em; 
}
.the-cacao b,
.the-cacao strong {
  font-weight: bolder; 
}
.the-cacao sub,
.the-cacao sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.the-cacao sub {
  bottom: -0.25em;
}
.the-cacao table {
  border-color: inherit; 
  text-indent: 0; 
}
.the-cacao iframe {
  border-style: none;
}
.the-cacao input {
  border-radius: 0;
}
.the-cacao [type=number]::-webkit-inner-spin-button,
.the-cacao [type=number]::-webkit-outer-spin-button {
  height: auto; 
}
.the-cacao [type=search] {
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}
.the-cacao [type=search]::-webkit-search-decoration {
  -webkit-appearance: none; 
}
.the-cacao textarea {
  overflow: auto; 
  resize: vertical; 
}
.the-cacao button,
.the-cacao input,
.the-cacao optgroup,
.the-cacao select,
.the-cacao textarea {
  font: inherit; 
}
.the-cacao optgroup {
  font-weight: bold; 
}
.the-cacao button {
  overflow: visible; 
}
.the-cacao button,
.the-cacao select {
  text-transform: none; 
}
.the-cacao button,
.the-cacao [type=button],
.the-cacao [type=reset],
.the-cacao [type=submit],
.the-cacao [role=button] {
  cursor: pointer;
}
.the-cacao button::-moz-focus-inner,
.the-cacao [type=button]::-moz-focus-inner,
.the-cacao [type=reset]::-moz-focus-inner,
.the-cacao [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.the-cacao button:-moz-focusring,
.the-cacao [type=button]::-moz-focus-inner,
.the-cacao [type=reset]::-moz-focus-inner,
.the-cacao [type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}
.the-cacao button,
.the-cacao html [type=button],
.the-cacao [type=reset],
.the-cacao [type=submit] {
  -webkit-appearance: button; 
}
.the-cacao button,
.the-cacao input,
.the-cacao select,
.the-cacao textarea {
  background-color: transparent;
  border-style: none;
}
.the-cacao a:focus,
.the-cacao button:focus,
.the-cacao input:focus,
.the-cacao select:focus,
.the-cacao textarea:focus {
  outline-width: 0;
}
.the-cacao select {
  -moz-appearance: none; 
  -webkit-appearance: none; 
}
.the-cacao select::-ms-expand {
  display: none; 
}
.the-cacao select::-ms-value {
  color: currentColor; 
}
.the-cacao legend {
  border: 0; 
  color: inherit; 
  display: table; 
  max-width: 100%; 
  white-space: normal; 
  max-width: 100%; 
}
.the-cacao ::-webkit-file-upload-button {
  
  -webkit-appearance: button;
  color: inherit;
  font: inherit; 
}
.the-cacao [disabled] {
  cursor: default;
}
.the-cacao img {
  border-style: none; 
}
.the-cacao progress {
  vertical-align: baseline;
}
.the-cacao [aria-busy=true] {
  cursor: progress;
}
.the-cacao [aria-controls] {
  cursor: pointer;
}
.the-cacao [aria-disabled=true] {
  cursor: default;
}

.l-main {
  margin-bottom: 0;
}

.the-cacao-drawer-open,
.the-cacao-basicModal-active,
body:not(.the-cacao-loaded) {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}

.the-cacao {
  position: relative;
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: var(--tc_colorMain1);
  font-family: var(--tc_fontMincho);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  overflow-wrap: break-word;
  font-feature-settings: "palt";
}
.the-cacao picture {
  display: block;
}
.the-cacao img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.the-cacao a {
  outline: none;
  color: var(--tc_colorMain1);
  text-decoration: none;
}
.the-cacao a[data-anchor] {
  cursor: pointer;
}
.the-cacao a:focus,
.the-cacao *:focus {
  outline: none;
}
.the-cacao em {
  font-style: normal;
}
.the-cacao select, .the-cacao input, .the-cacao textarea, .the-cacao button {
  font-family: inherit;
  border-radius: 0;
  -webkit-appearance: none;
  display: block;
}
.the-cacao select, .the-cacao button {
  cursor: pointer;
}
.the-cacao input[type=number] {
  -moz-appearance: textfield;
}
.the-cacao input[type=number]::-webkit-inner-spin-button, .the-cacao input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.the-cacao input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.the-cacao input::-webkit-input-placeholder, .the-cacao textarea::-webkit-input-placeholder, .the-cacao select::-webkit-input-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #b9b9b9;
  opacity: 1;
}
.the-cacao input:-moz-placeholder, .the-cacao textarea:-moz-placeholder, .the-cacao select:-moz-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #b9b9b9;
  opacity: 1;
}
.the-cacao input::-moz-placeholder, .the-cacao textarea::-moz-placeholder, .the-cacao select::-moz-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #b9b9b9;
  opacity: 1;
}
.the-cacao input:-ms-input-placeholder, .the-cacao textarea:-ms-input-placeholder, .the-cacao select:-ms-input-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #b9b9b9;
  opacity: 1;
}

.the-cacao-container {
  padding: 0 calc(24 / var(--tc_SpDesign) * 100vw);
}

.the-cacao .page-top {
  text-align: center;
  padding-top: calc(127 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .page-top__heading {
  font-weight: var(--tc_gothicWeight_medium);
  font-size: calc(28 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.2em;
}
.the-cacao .page-top__heading-sm {
  display: block;
  font-size: calc(24 / var(--tc_SpDesign) * 100vw);
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.the-cacao .page-top__heading-en {
  display: block;
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(8 / var(--tc_SpDesign) * 100vw);
  letter-spacing: 1.2px;
}
.the-cacao .page-top__sub-heading {
  margin-top: calc(50 / var(--tc_SpDesign) * 100vw);
  font-size: calc(20 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .page-top__text {
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  line-height: 1.55;
  letter-spacing: 0.16em;
  margin-top: calc(10 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
}
.the-cacao .page-top__text:first-of-type {
  margin-top: calc(12 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .page-top__caption {
  text-align: center;
  font-size: calc(12 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5833333333;
  letter-spacing: 0.16em;
  font-family: var(--tc_fontGothic);
  margin-top: calc(15 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .section-heading {
  font-weight: var(--tc_gothicWeight_medium);
  font-size: calc(28 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.03em;
}
.the-cacao .parallax-bg {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1 !important;
  transform: translate(0) !important;
}
.the-cacao .parallax-bg.opacity-0 {
  opacity: 0;
}
.the-cacao .parallax-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.the-cacao .splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.the-cacao .splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}
.the-cacao .splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.the-cacao .splide--rtl {
  direction: rtl;
}
.the-cacao .splide__track--ttb > .splide__list {
  display: block;
}
.the-cacao .splide__container {
  box-sizing: border-box;
  position: relative;
}
.the-cacao .splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.the-cacao .splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}
.the-cacao .splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.the-cacao .splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.the-cacao .splide:not(.is-overflow) .splide__pagination {
  display: none;
}
.the-cacao .splide__progress__bar {
  width: 0;
}
.the-cacao .splide {
  position: relative;
  visibility: hidden;
}
.the-cacao .splide.is-initialized, .the-cacao .splide.is-rendered {
  visibility: visible;
}
.the-cacao .splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.the-cacao .splide__slide img {
  vertical-align: bottom;
}
.the-cacao .splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
.the-cacao .splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.the-cacao .splide__toggle.is-active .splide__toggle__play, .the-cacao .splide__toggle__pause {
  display: none;
}
.the-cacao .splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}
.the-cacao .splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.the-cacao .tc-m-inner {
  width: 100%;
  padding-right: var(--tc_sidePaddingSp1);
  padding-left: var(--tc_sidePaddingSp1);
}
.the-cacao .tc-m-page-inner {
  width: 100%;
  padding-right: var(--tc_sidePaddingSp1);
  padding-left: var(--tc_sidePaddingSp1);
}

.the-cacao .base-common-button {
  border: 1px solid white;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--tc_fontEB);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
  color: white;
  width: 100%;
  max-width: calc(176 / var(--tc_SpDesign) * 100vw);
  padding: calc(14 / var(--tc_SpDesign) * 100vw) 0 calc(18 / var(--tc_SpDesign) * 100vw);
  font-size: calc(16 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .base-common-button::after {
  content: "";
  position: absolute;
  background-image: url("/products/brand/the-cacao/assets/img/common/right-arrow.svg");
  width: calc(16 / var(--tc_SpDesign) * 100vw);
  height: calc(16 / var(--tc_SpDesign) * 100vw);
  top: calc(50% - 8 / var(--tc_SpDesign) * 100vw);
  right: calc(22 / var(--tc_SpDesign) * 100vw);
  z-index: 10;
}
.the-cacao .base-common-button[grad-button] {
  display: inline-block;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.02em;
}
.the-cacao .base-common-button--normal {
  border: 1px solid #351807;
  color: #351807;
}
.the-cacao .base-common-button--normal::after {
  background-size: contain;
  background-image: url("/products/brand/the-cacao/assets/img/common/right-arrow-brown.svg");
}
.the-cacao .base-common-button--white {
  border: 1px solid white;
  color: white;
}
.the-cacao .base-common-button--white::after {
  background-size: contain;
  background-image: url("/products/brand/the-cacao/assets/img/common/right-arrow-white.svg");
}
.the-cacao .tc-m-more-button {
  color: var(--tc_colorMain1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s;
  font-family: var(--tc_fontGothic);
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-more-button--size-small {
  font-size: calc(22 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-more-button::before {
  content: "";
  display: block;
  background: black;
  background: url("/products/brand/the-cacao/assets/img/common/circle-arrow.svg") no-repeat center/contain;
  position: absolute;
  height: calc(24 / var(--tc_SpDesign) * 100vw);
  width: calc(24 / var(--tc_SpDesign) * 100vw);
  right: calc(-32 / var(--tc_SpDesign) * 100vw);
  top: 50%;
  transform: translate(0, -50%);
  transition: 0.3s;
  pointer-events: none;
}
.the-cacao .tc-m-more-button__text {
  border-bottom: 1px solid var(--tc_colorMain1);
}
.the-cacao .tc-m-more-button:not(.tc-m-more-button--active) .tc-m-more-button__text--close {
  display: none;
}
.the-cacao .tc-m-more-button[aria-expanded=true] .tc-m-more-button__text--default,
.the-cacao .tc-m-more-button--active .tc-m-more-button__text--default {
  display: none;
}
.the-cacao .tc-m-more-button[aria-expanded=true] .tc-m-more-button__text--close {
  display: block;
}
.the-cacao .tc-m-more-button[aria-expanded=true] {
  opacity: 1;
  background: none;
  color: var(--tc_colorMain1);
}
.the-cacao .tc-m-more-button[aria-expanded=true]::before, .the-cacao .tc-m-more-button[aria-expanded=true]::after {
  background: var(--tc_colorMain1);
}
.the-cacao .tc-m-line-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: inherit;
}
.the-cacao .tc-m-line-link::after {
  content: "";
  display: block;
  background: url("/products/brand/the-cacao/assets/img/common/right-arrow-brown.svg") no-repeat center center/contain;
  aspect-ratio: 16/18;
  width: calc(15 / var(--tc_SpDesign) * 100vw);
  margin-left: calc(6 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(1 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-line-link__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  display: inline-block;
  font-family: var(--tc_fontEB);
  font-weight: normal;
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  letter-spacing: 0.08em;
}

.the-cacao .tc-m-section-heading {
  font-weight: var(--tc_gothicWeight_medium);
  text-align: center;
}
.the-cacao .tc-m-section-heading--color-gold {
  color: var(--tc_colorMain2);
}
.the-cacao .tc-m-section-heading--color-dark-gold {
  color: #a7874b;
}
.the-cacao .tc-m-section-heading--color-white {
  color: #FFF;
}
.the-cacao .tc-m-section-heading__en,
.the-cacao .tc-m-section-heading__jp {
  display: block;
}
.the-cacao .tc-m-section-heading__en {
  font-size: calc(60 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
}
.the-cacao .tc-m-section-heading__jp {
  font-family: var(--tc_fontGothic);
  font-size: calc(32 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(10 / var(--tc_SpDesign) * 100vw);
}

.the-cacao .tc-m-article-panel {
  margin-bottom: calc(32 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-article-panel:last-child {
  margin-bottom: 0;
}
.the-cacao .tc-m-article-panel__link {
  display: flex;
  width: 100%;
  gap: calc(4 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-article-panel__date {
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  flex: none;
  font-family: var(--tc_fontGothic);
  letter-spacing: 0.45px;
}
.the-cacao .tc-m-article-panel__text {
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
  letter-spacing: 0.45px;
}

.the-cacao .tc-m-page-top {
  padding: 0 var(--tc_sidePaddingSp1) 0;
}

.tc-m-page-top__title-text {
  color: #351807;
  text-align: center;
  display: block;
  line-height: 1;
}
.tc-m-page-top__title-text--en {
  font-family: var(--tc_fontEB);
  font-weight: 400;
  font-size: calc(38 / var(--tc_SpDesign) * 100vw);
}
.tc-m-page-top__title-text--ja {
  font-size: calc(12 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(8 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
  line-height: 1.5;
}

.the-cacao .collapse:not(.show) {
  display: none;
}
.the-cacao .collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

body.scroll-lock {
  overflow: hidden !important;
}
body.scroll-lock-windows {
  position: fixed !important;
  overflow-y: scroll !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

.the-cacao .tc-m-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: calc(var(--tc_zIndexHeader) + 1);
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
}
.the-cacao .tc-m-video-modal[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
}
.the-cacao .tc-m-video-modal__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.the-cacao .tc-m-video-modal__overlay .blur {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.the-cacao .tc-m-video-modal__overlay .blur::before {
  content: "";
  position: absolute;
  display: block;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}
.the-cacao .tc-m-video-modal__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: calc(30 / var(--tc_SpDesign) * 100vw);
  margin: 0 auto;
  overflow: auto;
}
.the-cacao .tc-m-video-modal__close {
  width: calc(32 / var(--tc_SpDesign) * 100vw);
  height: calc(32 / var(--tc_SpDesign) * 100vw);
  background: white;
  border-radius: 50%;
  border: 1px solid #351807;
  margin-left: auto;
  position: relative;
  transition: opacity 0.3s;
}
.the-cacao .tc-m-video-modal__close::before, .the-cacao .tc-m-video-modal__close::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: calc(12 / var(--tc_SpDesign) * 100vw);
  height: calc(1 / var(--tc_SpDesign) * 100vw);
  background-color: #351807;
  top: 50%;
  left: 50%;
}
.the-cacao .tc-m-video-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.the-cacao .tc-m-video-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.the-cacao .tc-m-video-thumbnail {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.the-cacao .tc-m-video-thumbnail::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  background: url("/products/brand/the-cacao/assets/img/common/icon_video.svg") no-repeat center center/contain;
  z-index: 2;
  width: calc(40 / var(--tc_SpDesign) * 100vw);
}

@keyframes tcFadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes tcFadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tcFadeup {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.the-cacao .tc-m-animation {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}
.the-cacao .tc-m-animation--fadein {
  opacity: 0;
}
.the-cacao .tc-m-animation--fadein.js-intersection.is-intersect {
  pointer-events: auto;
  animation-name: tcFadein;
}
.the-cacao .tc-m-animation--child-fadein {
  opacity: 0;
}
.the-cacao .tc-m-animation--fadeup {
  opacity: 0;
  transform: translateY(10px);
}
.the-cacao .tc-m-animation--fadeup.js-intersection.is-intersect {
  pointer-events: auto;
  animation-name: tcFadeup;
}
.the-cacao .tc-m-animation--child-fadeup {
  opacity: 0;
  transform: translateY(10px);
}
.the-cacao .tc-m-animation--light-fadein {
  opacity: 0;
  transition: opacity 1.1s;
  transition-delay: 0.4s;
}
.the-cacao .js-intersection.is-intersect .tc-m-animation--child-fadeup {
  pointer-events: auto;
  animation-name: tcFadeup;
}
.the-cacao .js-intersection.is-intersect .tc-m-animation--child-fadein {
  pointer-events: auto;
  animation-name: tcFadein;
}
.the-cacao .js-intersection.is-intersect .tc-m-animation--light-fadein {
  opacity: 1;
}

.the-cacao .tc-m-no-save img {
  pointer-events: none;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}
.the-cacao .tc-m-book-item__sub-heading {
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
  letter-spacing: 0.1em;
}
.the-cacao .tc-m-book-item__heading {
  margin-top: calc(4 / var(--tc_SpDesign) * 100vw);
  font-size: calc(20 / var(--tc_SpDesign) * 100vw);
  letter-spacing: 0.15em;
  position: relative;
}
.the-cacao .tc-m-book-item__heading::after {
  content: "";
  display: block;
  width: calc(254 / var(--tc_SpDesign) * 100vw);
  height: calc(2 / var(--tc_SpDesign) * 100vw);
  background: linear-gradient(175deg, #361909 0%, #815832 39%, #251106 100%);
  position: absolute;
  bottom: calc(5 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-book-item__text {
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(10 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
  line-height: 1.5;
}
.the-cacao .tc-m-book-item__text:first-of-type {
  margin-top: calc(22 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-book-item__btn {
  margin-top: calc(24 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-book-item__btn .base-common-button {
  border-color: #fff;
  color: #fff;
}

.the-cacao .tc-m-book-img {
  position: relative;
}
.the-cacao .tc-m-book-img .tc-m-video-thumbnail {
  overflow: visible;
}
.the-cacao .tc-m-book-img__inner {
  position: relative;
}
.the-cacao .tc-m-book-img__light {
  position: absolute;
  top: -28%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 100%;
}
.the-cacao .tc-m-book-img__img {
  position: relative;
  z-index: 1;
  mix-blend-mode: hard-light;
}
.the-cacao .tc-m-book-img__label {
  font-family: Regina;
  font-size: calc(42 / var(--tc_SpDesign) * 100vw);
  line-height: 1;
  mix-blend-mode: plus-lighter;
  position: absolute;
  bottom: calc(-22 / var(--tc_SpDesign) * 100vw);
  right: calc(-2 / var(--tc_SpDesign) * 100vw);
  transform: rotate(-5deg);
  z-index: 2;
  letter-spacing: 0;
  color: rgb(70, 52, 41);
}
.the-cacao .tc-m-book-img__caption {
  font-family: var(--tc_fontGothic);
  font-size: calc(12 / var(--tc_SpDesign) * 100vw);
  padding: 0 calc(24 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(24 / var(--tc_SpDesign) * 100vw);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.the-cacao .tc-m-flow-item {
  color: #351807;
  list-style: none;
}
.the-cacao .tc-m-flow-item--right {
  flex-direction: row-reverse;
}
.the-cacao .tc-m-flow-item--top {
  flex-direction: column;
}
.the-cacao .tc-m-flow-item--bottom {
  flex-direction: column-reverse;
}
.the-cacao .tc-m-flow-item__img-box {
  width: 100%;
  position: relative;
}
.the-cacao .tc-m-flow-item__img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.the-cacao .tc-m-flow-item__text-box {
  margin-top: calc(19 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
  letter-spacing: 0.03em;
  width: 100%;
}
.the-cacao .tc-m-flow-item__title {
  color: #BA5418;
  font-size: calc(20 / var(--tc_SpDesign) * 100vw);
  font-weight: 600;
}
.the-cacao .tc-m-flow-item__text-title {
  color: #BA5418;
}
.the-cacao .tc-m-flow-item__text {
  margin-top: calc(8 / var(--tc_SpDesign) * 100vw);
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.the-cacao .tc-m-flow-item__caution {
  font-size: calc(12 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(16 / var(--tc_SpDesign) * 100vw);
  font-family: var(--tc_fontGothic);
}
.the-cacao .tc-m-flow-item__more {
  width: 100%;
  margin-top: calc(48 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-flow-item__slider-list {
  max-width: 97%;
}
.the-cacao .the-cacao-bean-to-bar .bar-flow__slider__pagination .splide__pagination__page {
  padding: calc(4 / var(--tc_SpDesign) * 100vw) calc(6 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .the-cacao-bean-to-bar .bar-flow__slider__pagination .splide__pagination__page::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #EAE4DC !important;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.15) inset, -1px -1px 1px 0px rgba(0, 0, 0, 0.15) inset;
}
.the-cacao .the-cacao-bean-to-bar .bar-flow__slider__pagination .splide__pagination__page.is-active::after {
  background-color: #351807 !important;
}

.the-cacao .tc-m-accordion-contents__btn {
  position: relative;
}
.the-cacao .tc-m-accordion-contents__btn::before, .the-cacao .tc-m-accordion-contents__btn::after {
  content: "";
  display: block;
  background: #000;
  position: absolute;
  height: 1px;
  width: calc(20 / var(--tc_SpDesign) * 100vw);
  right: calc(25 / var(--tc_SpDesign) * 100vw);
  top: 50%;
  color: #000;
  transform: translate(0, -50%);
  transition: 0.3s;
  pointer-events: none;
}
.the-cacao .tc-m-accordion-contents__btn::before {
  transform: translate(0, -50%) rotate(90deg);
}
.the-cacao .tc-m-accordion-contents__btn[aria-expanded=true]::before, .the-cacao .tc-m-accordion-contents__btn--active::before {
  transform: translate(0, -50%) rotate(180deg);
}
.the-cacao .tc-m-accordion-contents__btn[aria-expanded=true]::after, .the-cacao .tc-m-accordion-contents__btn--active::after {
  transform: translate(0, -50%) rotate(90deg);
  opacity: 0;
}

.the-cacao .tc-m-bg-leather {
  background-color: var(--tc_colorMain1);
}
.the-cacao .tc-m-bg-leather::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("/products/brand/the-cacao/assets/img/common/bg_leather_overlay.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
.the-cacao .tc-m-bg-leather .tc-m-bg-leather__frame {
  width: calc(100% - 20 / var(--tc_SpDesign) * 100vw);
  height: calc(100% - 20 / var(--tc_SpDesign) * 100vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, #533508 0%, #875D18 18%, #533508 39%, #875D18 82%, #533508 98%);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.35) inset;
  z-index: 1;
}
.the-cacao .tc-m-bg-leather .tc-m-bg-leather__frame::after {
  width: calc(100% - 18 / var(--tc_SpDesign) * 100vw);
  height: calc(100% - 18 / var(--tc_SpDesign) * 100vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background-color: var(--tc_colorMain1);
  background-image: url("/products/brand/the-cacao/assets/img/common/bg_leather_overlay.png");
  background-size: cover;
}
.the-cacao .tc-m-bg-leather .tc-m-bg-leather__inner {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0.6;
  background: radial-gradient(100% 35.45% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  filter: blur(12px);
}

.the-cacao .tc-m-decoration-text {
  position: absolute;
  color: var(--tc_colorMain1);
  font-family: var(--tc_fontEB);
  font-weight: 500;
  writing-mode: vertical-rl;
  bottom: 0;
}
.the-cacao .tc-m-decoration-text::before {
  content: "";
  width: 1px;
  position: absolute;
  height: calc(85 / var(--tc_SpDesign) * 100vw);
  background-color: var(--tc_colorMain1);
  bottom: 0;
  left: calc(3 / var(--tc_SpDesign) * 100vw);
}

.the-cacao .tc-m-basic-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--tc_zIndexModal);
  overflow: auto;
}
.the-cacao .tc-m-basic-modal:not(.js-basicModalActive) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s 0.2s;
}
.the-cacao .tc-m-basic-modal__overlay {
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
.the-cacao .js-basicModalActive .tc-m-basic-modal__overlay {
  opacity: 1;
}
.the-cacao .tc-m-basic-modal__inner {
  padding: 0 var(--tc_sidePaddingSp1);
}
.the-cacao .tc-m-basic-modal__sub-inner {
  padding: calc(80 / var(--tc_SpDesign) * 100vw) 0 calc(120 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-basic-modal__content {
  background: #fff;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s;
  border-radius: calc(8 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .js-basicModalActive .tc-m-basic-modal__content {
  opacity: 1;
}
.the-cacao .tc-m-basic-modal__close {
  aspect-ratio: 1/1;
  background: #FFF;
  border: 1px solid var(--tc_colorMain1);
  position: absolute;
  top: calc(-10 / var(--tc_SpDesign) * 100vw);
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(40 / var(--tc_SpDesign) * 100vw);
  border-radius: 50%;
  translate: 0 -100%;
}
.the-cacao .tc-m-basic-modal__close::before, .the-cacao .tc-m-basic-modal__close::after {
  content: "";
  display: block;
  background: var(--tc_colorMain1);
  transition: transform 0.3s;
  height: 1px;
  width: calc(16 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-m-basic-modal__close::before {
  transform: rotate(45deg);
}
.the-cacao .tc-m-basic-modal__close::after {
  transform: rotate(-45deg);
  margin-top: -1px;
}

.the-cacao .tc-l-loading {
  z-index: var(--tc_zIndexLoading);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("../img/common/bg_marble.jpg") center top/100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 / var(--tc_SpDesign) * 100vw);
  background-size: cover;
}
.the-cacao-loaded .the-cacao .tc-l-loading {
  animation: tcFadeout 0.7s 0.2s forwards;
  pointer-events: none;
}

@keyframes flip-beans {
  0%, 50% {
    transform: rotate(15deg);
  }
  51%, 100% {
    transform: rotate(-15deg);
  }
}
.the-cacao .tc-l-loading__beans {
  width: 37px;
  transform: rotate(15deg);
  animation: flip-beans 1.2s infinite steps(1);
}

.the-cacao-drawer-open .tc-l-header {
  background-color: rgb(185, 185, 185);
}
.the-cacao-drawer-open .tc-l-header__btn-icon::before {
  transform: translate(-50%, calc(0 / var(--tc_SpDesign) * 100vw)) rotate(30deg) !important;
}
.the-cacao-drawer-open .tc-l-header__btn-icon::after {
  transform: translate(-50%, calc(0 / var(--tc_SpDesign) * 100vw)) rotate(-30deg) !important;
}

.the-cacao .tc-l-header {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--tc_headerHeightSp);
  z-index: var(--tc_zIndexHeader);
  margin-bottom: calc(var(--tc_headerHeightSp) * -1);
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: 0.5s 0.15s;
}
body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header {
  transition: 0s 0s;
}
.the-cacao .tc-l-header * {
  pointer-events: auto;
}
.the-cacao .tc-l-header__logo {
  padding-left: calc(29 / var(--tc_SpDesign) * 100vw);
  display: flex;
  align-items: center;
  padding-top: calc(4 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-header__logo a {
  max-width: 66px;
}
.the-cacao .tc-l-header__logo .white {
  display: none;
}
.the-cacao .tc-l-header__btn {
  cursor: pointer;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  width: 100px;
  align-items: center;
  justify-content: center;
  font-family: var(--tc_fontEB);
  font-size: calc(16 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
  transition: color 0.3s;
}
.the-cacao .tc-l-header__btn-icon {
  width: calc(40 / var(--tc_SpDesign) * 100vw);
  height: calc(20 / var(--tc_SpDesign) * 100vw);
  border: 1px solid #351807;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.3s;
}
.the-cacao .tc-l-header__btn-icon::before, .the-cacao .tc-l-header__btn-icon::after {
  content: "";
  position: absolute;
  width: calc(16 / var(--tc_SpDesign) * 100vw);
  height: calc(1 / var(--tc_SpDesign) * 100vw);
  background-color: #351807;
  transition: background-color 0.3s;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.5s 0.15s;
}
body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header__btn-icon::before, body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header__btn-icon::after {
  transition: 0s 0s;
}
.the-cacao .tc-l-header__btn-icon::before {
  transform: translate(-50%, calc(-2 / var(--tc_SpDesign) * 100vw));
}
.the-cacao .tc-l-header__btn-icon::after {
  transform: translate(-50%, calc(2 / var(--tc_SpDesign) * 100vw));
}
.the-cacao .tc-l-header__humberger {
  display: none;
}
.the-cacao .tc-l-header__humberger__line {
  display: block;
  background: var(--tc_colorMain3);
  width: calc(60 / var(--tc_SpDesign) * 100vw);
  height: calc(4 / var(--tc_SpDesign) * 100vw);
  transition: transform 0.3s;
}
.the-cacao .tc-l-header__humberger__line:nth-child(2) {
  margin: calc(20 / var(--tc_SpDesign) * 100vw) 0;
}
.the-cacao-drawer-open .the-cacao .tc-l-header__humberger__line:nth-child(1) {
  transform: rotate(45deg);
}
.the-cacao-drawer-open .the-cacao .tc-l-header__humberger__line:nth-child(2) {
  display: none;
}
.the-cacao-drawer-open .the-cacao .tc-l-header__humberger__line:nth-child(3) {
  transform: rotate(-45deg);
  margin-top: -1px;
}
.the-cacao .tc-l-header__drawer {
  position: absolute;
  left: 0;
  top: var(--tc_headerHeightSp);
  width: 100%;
  height: calc(100vh - var(--tc_headerHeightSp));
  z-index: 1;
  overflow: auto;
  color: #fff;
  transition: opacity 0.5s;
}
body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header__drawer {
  opacity: 0;
  pointer-events: none;
}
body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header__drawer * {
  pointer-events: none;
}
.the-cacao .tc-l-header__drawer__inner {
  transition: 0.5s 0.15s;
  padding: calc(110 / var(--tc_SpDesign) * 100vw) calc(45 / var(--tc_SpDesign) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: auto;
  min-height: 100%;
}
body:not(.the-cacao-drawer-open) .the-cacao .tc-l-header__drawer__inner {
  opacity: 0;
  transition: 0s 0s;
}
.the-cacao .menu-frame {
  position: absolute;
  width: calc(64 / var(--tc_SpDesign) * 100vw);
  aspect-ratio: 1/1;
  z-index: 1;
}
.the-cacao .menu-frame--tl {
  top: calc(30 / var(--tc_SpDesign) * 100vw);
  left: calc(30 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .menu-frame--tr {
  top: calc(30 / var(--tc_SpDesign) * 100vw);
  right: calc(30 / var(--tc_SpDesign) * 100vw);
  transform: rotate(90deg);
}
.the-cacao .menu-frame--br {
  bottom: calc(30 / var(--tc_SpDesign) * 100vw);
  right: calc(30 / var(--tc_SpDesign) * 100vw);
  transform: rotate(180deg);
}
.the-cacao .menu-frame--bl {
  bottom: calc(30 / var(--tc_SpDesign) * 100vw);
  left: calc(30 / var(--tc_SpDesign) * 100vw);
  transform: rotate(-90deg);
}
.the-cacao .tc-l-header__drawer__logo {
  display: block;
}
.the-cacao .tc-l-header__drawer__logo img {
  width: 100%;
}
.the-cacao .tc-l-header__drawer__menu {
  list-style-type: none;
  position: relative;
  z-index: 1;
}
.the-cacao .tc-l-header__drawer__menu__link {
  display: block;
  font-size: calc(18 / var(--tc_SpDesign) * 100vw);
  line-height: 1.5;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding-block: calc(7 / var(--tc_SpDesign) * 100vw);
  letter-spacing: 0.04em;
}
.the-cacao .tc-l-header__drawer__sub__menu__item {
  list-style: none;
  font-family: var(--tc_fontGothic);
  font-size: calc(15 / var(--tc_SpDesign) * 100vw);
  padding-left: 1em;
  margin-top: calc(8 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-header__drawer__sub__menu__item:not(:first-of-type) {
  margin-top: calc(12 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-header__drawer__sub__menu__link {
  color: #fff;
  line-height: 1.5;
}
.the-cacao .tc-l-header__wrapper {
  position: relative;
  z-index: 1;
}
.the-cacao .tc-l-header__drawer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  gap: calc(27 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(18 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-header__drawer__sns__icon {
  width: calc(24 / var(--tc_SpDesign) * 100vw);
  aspect-ratio: 1/1;
}
.the-cacao .tc-l-header__drawer__sns__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.the-cacao .tc-l-header--white .tc-l-header__btn {
  color: #fff;
}
.the-cacao .tc-l-header--white .tc-l-header__btn-icon {
  border-color: #fff;
}
.the-cacao .tc-l-header--white .tc-l-header__btn-icon::before, .the-cacao .tc-l-header--white .tc-l-header__btn-icon::after {
  background-color: #fff;
}

.the-cacao .tc-l-parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 2506/807;
  z-index: -1;
}
.the-cacao .tc-l-parallax-image .tc-l-parallax-image__content {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.the-cacao .tc-l-parallax-image .tc-l-parallax-image__content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.the-cacao .tc-l-footer {
  color: var(--tc_colorMain1);
  text-align: center;
  padding: calc(80 / var(--tc_SpDesign) * 100vw) 0;
  position: relative;
}
.the-cacao .tc-l-footer__hashtag {
  font-size: calc(34 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-footer__lead-text {
  font-size: calc(12 / var(--tc_SpDesign) * 100vw);
  line-height: 1.6;
  font-family: var(--tc_fontGothic);
  margin-top: calc(25 / var(--tc_SpDesign) * 100vw);
  font-weight: 500;
}
.the-cacao .tc-l-footer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  gap: calc(27 / var(--tc_SpDesign) * 100vw);
  margin-top: calc(34 / var(--tc_SpDesign) * 100vw);
}
.the-cacao .tc-l-footer__sns__icon {
  width: calc(24 / var(--tc_SpDesign) * 100vw);
  aspect-ratio: 1/1;
}
.the-cacao .tc-l-footer__sns__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (any-hover: hover) {
  .the-cacao a {
    transition: opacity var(--tc_transitionBase);
  }
  .the-cacao a:hover {
    opacity: 0.7;
  }
  .the-cacao .tc-m-line-link::after {
    transition: translate 0.3s;
  }
  .the-cacao .tc-m-line-link:hover::after {
    translate: 3px 0;
  }
  .the-cacao .tc-m-video-modal__close:hover {
    opacity: 0.8;
  }
  .the-cacao .tc-m-video-thumbnail img {
    transition: transform 0.35s;
  }
  .the-cacao .tc-m-video-thumbnail:hover img {
    transform: scale(1.07, 1.07);
  }
  .the-cacao .tc-m-book-img .tc-m-video-thumbnail:hover img {
    transform: scale(1);
  }
  .the-cacao .tc-l-header__drawer__logo:hover {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .the-cacao input::-webkit-input-placeholder, .the-cacao textarea::-webkit-input-placeholder, .the-cacao select::-webkit-input-placeholder {
    font-size: 16px;
  }
  .the-cacao input:-moz-placeholder, .the-cacao textarea:-moz-placeholder, .the-cacao select:-moz-placeholder {
    font-size: 16px;
  }
  .the-cacao input::-moz-placeholder, .the-cacao textarea::-moz-placeholder, .the-cacao select::-moz-placeholder {
    font-size: 16px;
  }
  .the-cacao input:-ms-input-placeholder, .the-cacao textarea:-ms-input-placeholder, .the-cacao select:-ms-input-placeholder {
    font-size: 16px;
  }
  .the-cacao-container {
    padding: 0 65px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
  .the-cacao .page-top {
    padding-top: 142px;
  }
  .the-cacao .page-top__heading {
    font-size: 36px;
    letter-spacing: 0.1em;
  }
  .the-cacao .page-top__heading-sm {
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 6px;
  }
  .the-cacao .page-top__heading-en {
    letter-spacing: 1.28px;
    font-size: 16px;
    margin-top: 16px;
  }
  .the-cacao .page-top__sub-heading {
    margin-top: 80px;
    font-size: 22px;
  }
  .the-cacao .page-top__text:first-of-type {
    margin-top: 24px;
  }
  .the-cacao .page-top__text {
    font-size: 16px;
    margin-top: 7px;
  }
  .the-cacao .page-top__caption {
    font-size: 14px;
    margin-top: 22px;
  }
  .the-cacao .section-heading {
    font-size: 28px;
    letter-spacing: 0.15em;
  }
  .the-cacao .tc-u-only-sp {
    display: none !important;
  }
  .the-cacao .tc-m-inner {
    max-width: calc(var(--tc_widthDefault) + var(--tc_sidePaddingPc1) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--tc_sidePaddingPc1);
    padding-left: var(--tc_sidePaddingPc1);
  }
  .the-cacao .tc-m-page-inner {
    max-width: calc(var(--tc_widthMax) + var(--tc_sidePaddingPc1) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--tc_sidePaddingPc1);
    padding-left: var(--tc_sidePaddingPc1);
  }
  .the-cacao .base-common-button {
    padding: 14px 0 18px;
    font-size: 16px;
    max-width: 200px;
  }
  .the-cacao .base-common-button::after {
    top: calc(50% - 8px);
    right: 22px;
    width: 16px;
    height: 16px;
  }
  .the-cacao .base-common-button[grad-button] {
    transition: background 0.5s ease;
  }
  .the-cacao .base-common-button--normal[grad-button] {
    background: linear-gradient(var(--deg, 290deg), var(--start-color, rgba(53, 24, 7, 0.2)) var(--start, -150%), var(--middle-color, rgba(255, 246, 229, 0.4)) var(--middle, -100%), var(--end-color, transparent) var(--end, 0%));
  }
  .the-cacao .base-common-button--white[grad-button] {
    background: linear-gradient(var(--deg, 290deg), var(--start-color, rgba(255, 246, 229, 0.2)) var(--start, -150%), var(--middle-color, rgba(255, 246, 229, 0.7)) var(--middle, -100%), var(--end-color, transparent) var(--end, 0%));
  }
  .the-cacao .base-common-button:hover {
    opacity: 1;
  }
  .the-cacao .tc-m-more-button {
    font-size: 16px;
    letter-spacing: 0.48px;
  }
  .the-cacao .tc-m-more-button--size-small {
    font-size: 14px;
  }
  .the-cacao .tc-m-more-button::before {
    width: 24px;
    height: 24px;
    right: -32px;
  }
  .the-cacao .tc-m-line-link::after {
    width: 16px;
    margin-left: 5px;
    margin-top: 1px;
  }
  .the-cacao .tc-m-line-link__text {
    font-size: 16px;
  }
  .the-cacao .tc-m-section-heading__en {
    font-size: 40px;
  }
  .the-cacao .tc-m-section-heading__jp {
    font-size: 16px;
    margin-top: 3px;
  }
  .the-cacao .tc-m-article-panel {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }
  .the-cacao .tc-m-article-panel__link {
    gap: 16px;
  }
  .the-cacao .tc-m-article-panel__date {
    letter-spacing: 0.48px;
    font-size: 16px;
  }
  .the-cacao .tc-m-article-panel__text {
    letter-spacing: 0.48px;
    font-size: 16px;
  }
  .the-cacao .tc-m-page-top {
    padding: 0 var(--tc_sidePaddingPc1);
  }
  .tc-m-page-top__title-text--en {
    font-size: 50px;
  }
  .tc-m-page-top__title-text--ja {
    margin-top: 16px;
    font-size: 14px;
  }
  .the-cacao .tc-m-video-modal__wrapper {
    padding: 0 var(--tc_sidePaddingPc1);
    max-width: calc(960px + var(--tc_sidePaddingPc1) * 2);
  }
  .the-cacao .tc-m-video-modal__close {
    width: 40px;
    height: 40px;
    right: -40px;
  }
  .the-cacao .tc-m-video-modal__close::before, .the-cacao .tc-m-video-modal__close::after {
    width: 12px;
    height: 1px;
  }
  .the-cacao .tc-m-video-thumbnail::before {
    width: 80px;
  }
  .the-cacao .tc-m-book-item--column .tc-m-book-item__heading {
    font-size: 22px;
    margin-top: 30px;
  }
  .the-cacao .tc-m-book-item__sub-heading {
    font-size: 18px;
    margin-top: 11px;
  }
  .the-cacao .tc-m-book-item__heading::after {
    width: 100%;
    max-width: 352px;
    height: 2px;
    bottom: 7px;
    left: 0;
  }
  .the-cacao .tc-m-book-item__heading {
    margin-top: 5px;
    font-size: 24px;
  }
  .the-cacao .tc-m-book-item__text:first-of-type {
    margin-top: 41px;
  }
  .the-cacao .tc-m-book-item__text {
    font-size: 16px;
    margin-top: 16px;
  }
  .the-cacao .tc-m-book-item__btn {
    margin-top: 48px;
  }
  .the-cacao .tc-m-book-img__label {
    font-size: 55px;
    bottom: 0;
    right: -33px;
  }
  .the-cacao .tc-m-book-img__caption {
    font-size: 14px;
    padding: 0 42px;
    margin-top: 32px;
  }
  .the-cacao .tc-m-flow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -moz-column-gap: min(5.972222vw, 86px);
         column-gap: min(5.972222vw, 86px);
  }
  .the-cacao .tc-m-flow-item--top .tc-m-flow-item__text-box {
    margin-top: 40px;
  }
  .the-cacao .tc-m-flow-item--bottom .tc-m-flow-item__img {
    margin-top: 24px;
  }
  .the-cacao .tc-m-flow-item__text-box {
    margin-top: 0;
    max-width: 418px;
  }
  .the-cacao .tc-m-flow-item__sub-title {
    font-size: 14px;
  }
  .the-cacao .tc-m-flow-item__title {
    font-size: 22px;
  }
  .the-cacao .tc-m-flow-item__text-title {
    font-size: 18px;
    font-family: var(--tc_fontGothic);
    margin-top: 16px;
    margin-bottom: -16px;
  }
  .the-cacao .tc-m-flow-item__text {
    font-size: 16px;
    margin-top: 24px;
  }
  .the-cacao .tc-m-flow-item__caution {
    font-size: 12px;
    margin-top: 16px;
  }
  .the-cacao .tc-m-flow-item__more {
    margin-top: 48px;
  }
  .the-cacao .tc-m-flow-item__slider-list {
    max-width: 99%;
  }
  .the-cacao .the-cacao-bean-to-bar .bar-flow__slider__pagination .splide__pagination__page {
    padding: 10px 8px;
  }
  .the-cacao .tc-m-accordion-contents__btn::before, .the-cacao .tc-m-accordion-contents__btn::after {
    width: 13px;
    right: 15px;
  }
  .the-cacao .tc-m-bg-leather .tc-m-bg-leather__frame {
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.35) inset;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
  }
  .the-cacao .tc-m-bg-leather .tc-m-bg-leather__frame::after {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }
  .the-cacao .tc-m-bg-leather .tc-m-bg-leather__inner {
    background: radial-gradient(44.45% 44.45% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: overlay;
    filter: blur(12px);
  }
  .the-cacao .tc-m-decoration-text::before {
    left: 6px;
    height: 142px;
  }
  .the-cacao .tc-m-basic-modal__inner {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 calc(var(--tc_sidePaddingPc1) + 10px);
  }
  .the-cacao .tc-m-basic-modal__sub-inner {
    padding: 70px 0;
  }
  .the-cacao .tc-m-basic-modal__content {
    width: 100%;
    max-width: 1088px;
    margin: 0 auto;
    border-radius: 8px;
  }
  .the-cacao .tc-m-basic-modal__close {
    width: 40px;
    top: 0;
    translate: 100% -100%;
  }
  .the-cacao .tc-m-basic-modal__close::before, .the-cacao .tc-m-basic-modal__close::after {
    width: 15px;
  }
  .the-cacao .tc-l-loading {
    gap: 24px;
  }
  .the-cacao .tc-l-header {
    height: var(--tc_headerHeightPc);
    margin-bottom: calc(var(--tc_headerHeightPc) * -1);
  }
  .the-cacao .tc-l-header__btn {
    font-size: 16px;
  }
  .the-cacao .tc-l-header__btn-icon {
    width: 40px;
    height: 20px;
  }
  .the-cacao .tc-l-header__btn-icon::before, .the-cacao .tc-l-header__btn-icon::after {
    width: 16px;
    height: 1px;
  }
  .the-cacao .tc-l-header__btn-icon::before {
    transform: translate(-50%, -2px);
  }
  .the-cacao .tc-l-header__btn-icon::after {
    transform: translate(-50%, 2px);
  }
  .the-cacao .tc-l-header__humberger__line {
    width: 40px;
    height: 2px;
  }
  .the-cacao .tc-l-header__humberger__line:nth-child(2) {
    margin: 14px 0;
  }
  .the-cacao .tc-l-header__drawer {
    padding: 0;
    display: flex;
    align-items: center;
  }
  .the-cacao .tc-l-header__drawer__inner {
    overflow: hidden;
    height: 100%;
    min-height: calc(100vh - var(--tc_headerHeightSp) - 101px);
    padding: clamp(0px,7.7142857143vw,90px) max((100% - 1086px) / 2, clamp(0px,7.7142857143vw,90px));
    display: flex;
    justify-content: space-between;
    -moz-column-gap: clamp(0px,3.4285714286vw,40px);
         column-gap: clamp(0px,3.4285714286vw,40px);
    max-width: 100%;
    background-size: cover;
    flex-direction: row;
  }
  .the-cacao .tc-l-header__drawer__inner .tc-m-bg-leather__frame {
    width: calc(100% - clamp(0px,5.4857142857vw,64px));
    height: calc(100% - clamp(0px,5.4857142857vw,64px));
  }
  .the-cacao .menu-frame {
    width: clamp(0px,8.9142857143vw,104px);
  }
  .the-cacao .menu-frame--tl {
    top: clamp(0px,5.1428571429vw,60px);
    left: clamp(0px,5.1428571429vw,60px);
  }
  .the-cacao .menu-frame--tr {
    top: clamp(0px,5.1428571429vw,60px);
    right: clamp(0px,5.1428571429vw,60px);
  }
  .the-cacao .menu-frame--br {
    bottom: clamp(0px,5.1428571429vw,60px);
    right: clamp(0px,5.1428571429vw,60px);
  }
  .the-cacao .menu-frame--bl {
    bottom: clamp(0px,5.1428571429vw,60px);
    left: clamp(0px,5.1428571429vw,60px);
  }
  .the-cacao .tc-l-header__drawer__logo {
    margin: 0 auto;
    grid-area: logo;
    width: clamp(0px,15.4285714286vw,180px);
  }
  .the-cacao .tc-l-header__drawer__menu {
    display: flex;
    gap: clamp(0px,4.8vw,56px);
  }
  .the-cacao .tc-l-header__drawer__menu__item {
    display: flex;
    font-size: 22px;
  }
  .the-cacao .tc-l-header__drawer__menu__link {
    letter-spacing: 0.05em;
    padding-block: clamp(0px,1.0285714286vw,12px);
    font-size: clamp(0px,2.3571428571vw,22px);
    align-items: flex-start;
  }
  .the-cacao .tc-l-header__drawer__sub__menu__list {
    padding-top: 2px;
  }
  .the-cacao .tc-l-header__drawer__sub__menu__item {
    margin-top: 0;
    font-size: 18px;
    padding-left: 40px;
  }
  .the-cacao .tc-l-header__drawer__sub__menu__item:not(:first-of-type) {
    margin-top: 16px;
  }
  .the-cacao .tc-l-header__drawer__sns {
    margin-top: 40px;
    margin-bottom: auto;
    gap: 24px;
    grid-area: sns;
  }
  .the-cacao .tc-l-header__drawer__sns__icon {
    width: 24px;
  }
  .the-cacao .tc-l-parallax-image {
    aspect-ratio: 2880/2174;
  }
  .the-cacao .tc-l-footer {
    padding: 106px 0 232px;
  }
  .the-cacao .tc-l-footer__hashtag {
    font-size: 50px;
  }
  .the-cacao .tc-l-footer__lead-text {
    line-height: 1.5;
    font-size: 14px;
    margin-top: 15px;
  }
  .the-cacao .tc-l-footer__sns {
    margin-top: 40px;
    gap: 31px;
  }
  .the-cacao .tc-l-footer__sns__icon {
    width: 42px;
  }
}
@media (max-width: 767px) {
  .the-cacao .tc-u-only-tab {
    display: none !important;
  }
  .the-cacao .tc-u-only-wide {
    display: none !important;
  }
  .the-cacao .tc-u-only-pc {
    display: none !important;
  }
  .the-cacao .tc-m-article-panel__link {
    flex-direction: column;
  }
  .the-cacao .tc-m-video-modal__close {
    margin-bottom: calc(8 / var(--tc_SpDesign) * 100vw);
  }
  .the-cacao .tc-m-book-item__text-contents {
    padding-top: calc(28 / var(--tc_SpDesign) * 100vw);
  }
  .the-cacao .tc-m-book-item__heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .the-cacao .tc-m-flow-item__text-box {
    padding-right: calc(24 / var(--tc_SpDesign) * 100vw);
  }
  .the-cacao .tc-l-header__drawer__logo {
    width: calc(220 / var(--tc_SpDesign) * 100vw);
    margin: 0 auto;
  }
  .the-cacao .tc-l-header__box {
    display: contents;
  }
}
@media (min-width: 1024px) {
  .the-cacao .tc-u-only-tab {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .the-cacao .tc-u-only-pc {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .the-cacao .collapsing {
    transition: none;
  }
}
@media (min-width: 768px) and (max-height: 780px) {
  .the-cacao .tc-l-header__drawer__menu__link {
    font-size: 17px;
    padding-block: 5px;
  }
}