@charset "UTF-8";
/*
* top.css
*
*/
/* ------------------------
  reset
------------------------ */
:where(.renewal) *,
:where(.renewal) *::after,
:where(.renewal) *::before {
  box-sizing: border-box;
}
:where(.renewal) * {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
:where(.renewal) pre,
:where(.renewal) textarea {
  overflow: auto;
}
:where(.renewal) template {
  display: none;
}
:where(.renewal) details,
:where(.renewal) main,
:where(.renewal) summary {
  display: block;
}
:where(.renewal) input[type=number] {
  width: auto;
}
:where(.renewal) input[type=search] {
  -webkit-appearance: textfield;
}
:where(.renewal) input[type=search]::-webkit-search-cancel-button,
:where(.renewal) input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
:where(.renewal) progress {
  display: inline-block;
}
:where(.renewal) small {
  font-size: 75%;
}
:where(.renewal) sub,
:where(.renewal) sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}
:where(.renewal) sup {
  top: -0.5em;
}
:where(.renewal) sub {
  bottom: -0.25em;
}
:where(.renewal) textarea {
  resize: vertical;
}
:where(.renewal) audio,
:where(.renewal) canvas,
:where(.renewal) iframe,
:where(.renewal) img,
:where(.renewal) svg,
:where(.renewal) video {
  vertical-align: middle;
}
:where(.renewal) audio:not([controls]) {
  display: none;
}
:where(.renewal) img {
  border: 0;
  max-width: 100%;
  height: auto;
}
:where(.renewal) button,
:where(.renewal) input,
:where(.renewal) select,
:where(.renewal) textarea {
  min-height: 1.5em;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}
:where(.renewal) button {
  overflow: visible;
}
:where(.renewal) button,
:where(.renewal) select {
  text-transform: none;
}
:where(.renewal) input {
  line-height: normal;
}
:where(.renewal) button,
:where(.renewal) html input[type=button],
:where(.renewal) input[type=reset],
:where(.renewal) input[type=submit] {
  border-style: none;
  cursor: pointer;
  background-color: transparent;

  -webkit-appearance: button;
}
:where(.renewal) button[disabled],
:where(.renewal) html input[disabled] {
  cursor: default;
}
:where(.renewal) button::-moz-focus-inner,
:where(.renewal) input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:where(.renewal) code,
:where(.renewal) kbd,
:where(.renewal) pre,
:where(.renewal) samp {
  font-family: monospace;
}
:where(.renewal) ol,
:where(.renewal) ul {
  list-style: none;
}
:where(.renewal) select {
     -moz-appearance: none;
  -webkit-appearance: none;
}
:where(.renewal) table {
  border-spacing: 0;
  border-collapse: collapse;
}
:where(.renewal) fieldset {
  border: 0;
}

/* ------------------------
  Base Settings
------------------------ */
:where(.renewal) {
  background-color: #fff;
  text-align: initial;
  word-wrap: break-word;
  color: #303030;
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: calc(14 * var(--base-font, 1) / 10);
  line-height: 1.6875;

  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  --base-font: 2.6667vw;
  --c-btn-navy: 66, 53, 128;
  --c-btn-yellow: 246, 236, 61;
  --c-carousel-pagination-default: 217, 217, 217;
  --c-fat-and-constipation-pink: 228, 0, 110;
  --c-font-navy: 66, 53, 128;
  --c-font-pink: 228, 0, 110;
  --c-font-blue: 0, 94, 174;
  --c-kracie-yellow: 246, 236, 61;
  --c-marker-yellow: 246, 236, 61;
  --c-swelling-blue: 0, 94, 174;
  --c-text-navy: 66, 53, 128;
  --c-true-black: 51, 51, 51;
  --c-true-white: 255, 255, 255;
  --c-bg-coccoapo-theme: 234, 232, 221;
  --c-carousel-pager: 141, 95, 41;
  --c-carousel-pager-active: 54, 54, 54;
  --c-shadow-lineup: 115, 61, 25;
  --c-heading-line: 54, 54, 54;
  --c-diagnosis-label: 87, 38, 5;
  --c-category-theme-fat: 238, 150, 121;
  --c-category-theme-hie: 117, 177, 229;
  --c-category-theme-constipation: 213, 150, 209;
  --c-category-theme-kanpo: 157, 201, 110;
  --c-category-theme-mukumi: 225, 175, 24;
  --c-category-theme-chokatsu: 183, 173, 84;
}
@media (min-width: 640px) {
  :where(.renewal) {
    font-size: calc(15 * var(--base-font, 1) / 10);

    --base-font: 1rem;
  }
}
:where(.renewal) a {
  text-decoration: underline;
  color: #00f;
}
:where(.renewal) a:visited {
  color: #000080;
}
:where(.renewal) a:hover {
  text-decoration: none;
  color: #f00;
}
:where(.renewal) a:active {
  text-decoration: none;
  color: #ff8000;
}
:where(.renewal) a[href^="tel:"]:hover {
  color: #00f;
}
@media (min-width: 640px) {
  :where(.renewal) a[href^="tel:"] {
    cursor: text;
    text-decoration: none;
  }
}

/* ------------------------
  Components
------------------------ */
/* ボタン
-------------------------------- */
.c-btn-link {
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}
@media (max-width: 639.98px) {
  .c-btn-link {
    margin: 9.6vw auto 0;
    height: 13.3333333333vw;
  }
}
@media (min-width: 640px) {
  .c-btn-link {
    margin: calc(60 * var(--base-font, 1) / 10) auto 0;
    height: calc(90 * var(--base-font, 1) / 10);
  }
}
@media (min-width: 640px) {
  .c-btn-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform ease 0.3s;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    background-color: rgba(var(--c-true-white), 0.2);
  }
}
@media (min-width: 640px) {
  .c-btn-link:hover::before {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }
}
.c-btn-link:link,
.c-btn-link:visited {
  text-decoration: none;
  letter-spacing: 0.15em;
  color: rgba(var(--c-diagnosis-label), 1);
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .c-btn-link:link,
  .c-btn-link:visited {
    font-size: 5.0666666667vw;
    line-height: 1.6842105263;
  }
}
@media (min-width: 640px) {
  .c-btn-link:link,
  .c-btn-link:visited {
    font-size: calc(32 * var(--base-font, 1) / 10);
    line-height: 1.625;
  }
}
.c-btn-link.--arrow {
  background-color: #f0b43e;
}
.c-btn-link.--arrow span {
  display: block;
  position: absolute;
  top: 50%;
}
@media (max-width: 639.98px) {
  .c-btn-link.--arrow span {
    right: 2.4vw;
    margin-top: -0.6666666667vw;
    width: 5.6vw;
    height: 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .c-btn-link.--arrow span {
    right: calc(20 * var(--base-font, 1) / 10);
    margin-top: calc(-5 * var(--base-font, 1) / 10);
    width: calc(42 * var(--base-font, 1) / 10);
    height: calc(10 * var(--base-font, 1) / 10);
  }
}
.c-btn-link.--arrow img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.c-btn-link.--x {
  display: grid;
  justify-content: center;
  background-color: #363636;
  text-align: center;
  color: #fff;
}
@media (max-width: 639.98px) {
  .c-btn-link.--x {
    padding: 0 3.3333333333vw 0 2.6666666667vw;
    font-size: 3.7333333333vw;

    grid-template-columns: 5.3333333333vw 1fr 4vw;
  }
}
@media (min-width: 640px) {
  .c-btn-link.--x {
    padding: 0 calc(17 * var(--base-font, 1) / 10) 0 calc(23 * var(--base-font, 1) / 10);
    font-size: calc(22 * var(--base-font, 1) / 10);

    grid-template-columns: calc(40 * var(--base-font, 1) / 10) 1fr calc(30 * var(--base-font, 1) / 10);
  }
}

.c-btn-link.--ripples-anim {
  animation: ripple-anim 4s infinite cubic-bezier(0.6, 0.04, 0.98, 0.335);
  box-shadow: 0px 0px 15px -5px #fff;
}

@keyframes ripple-anim {
  0% {
    box-shadow: 0px 0px 0px -5px #fff;
  }
  50% {
    box-shadow: 0px 0px 35px -5px #fff;
  }
  100% {
    box-shadow: 0px 0px 0px -5px #fff;
  }
}
/* Background
-------------------------------- */
.c-background {
  background: rgba(var(--c-bg-coccoapo-theme), 1) no-repeat right 0/100% auto;
}
@media (max-width: 639.98px) {
  .c-background {
    background-image: url("/ph/coccoapo/img/top/common_bg_sm.webp");
  }
}
@media (min-width: 640px) {
  .c-background {
    background-image: url("/ph/coccoapo/img/top/common_bg_lg.webp");
  }
}

/* ページ見出し
-------------------------------- */
.c-heading {
  text-align: center;
}
.c-heading .c-heading_text-eng img {
  width: auto;
  height: 100%;
}
.lineup .c-heading .c-heading_text-eng {
  display: block;
}
@media (max-width: 639.98px) {
  .lineup .c-heading .c-heading_text-eng {
    margin-bottom: 2.6666666667vw;
    height: 13.3333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup .c-heading .c-heading_text-eng {
    margin-bottom: calc(11 * var(--base-font, 1) / 10);
    height: calc(75 * var(--base-font, 1) / 10);
  }
}
.column .c-heading .c-heading_text-eng {
  display: block;
}
@media (max-width: 639.98px) {
  .column .c-heading .c-heading_text-eng {
    margin-bottom: 2.6666666667vw;
    height: 13.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column .c-heading .c-heading_text-eng {
    margin-bottom: calc(11 * var(--base-font, 1) / 10);
    height: calc(75 * var(--base-font, 1) / 10);
  }
}
.basicinfo .c-heading .c-heading_text-eng {
  display: block;
}
@media (max-width: 639.98px) {
  .basicinfo .c-heading .c-heading_text-eng {
    height: 17.8666666667vw;
  }
}
@media (min-width: 640px) {
  .basicinfo .c-heading .c-heading_text-eng {
    height: calc(102 * var(--base-font, 1) / 10);
  }
}
.movie .c-heading .c-heading_text-eng {
  display: block;
}
@media (max-width: 639.98px) {
  .movie .c-heading .c-heading_text-eng {
    margin-bottom: 2.6666666667vw;
    height: 13.3333333333vw;
  }
}
@media (min-width: 640px) {
  .movie .c-heading .c-heading_text-eng {
    margin-bottom: calc(11 * var(--base-font, 1) / 10);
    height: calc(75 * var(--base-font, 1) / 10);
  }
}
.c-heading .c-heading_text-jp {
  position: relative;
  letter-spacing: 0.2em;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .c-heading .c-heading_text-jp {
    margin-top: 0;
    padding-top: 2.9333333333vw;
    letter-spacing: 0.2em;
    font-size: 3.7333333333vw;
    line-height: 2.3571428571;
  }
}
@media (min-width: 640px) {
  .c-heading .c-heading_text-jp {
    padding-top: calc(22 * var(--base-font, 1) / 10);
    font-size: calc(20 * var(--base-font, 1) / 10);
  }
}
.c-heading .c-heading_text-jp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  background-color: rgba(var(--c-heading-line), 1);
}
@media (max-width: 639.98px) {
  .c-heading .c-heading_text-jp::before {
    margin-left: -6.7333333333vw;
    width: 13.4666666667vw;
    height: 0.2666666667vw;
  }
}
@media (min-width: 640px) {
  .c-heading .c-heading_text-jp::before {
    margin-left: calc(-36 * var(--base-font, 1) / 10);
    width: calc(71 * var(--base-font, 1) / 10);
    height: calc(2 * var(--base-font, 1) / 10);
  }
}
@media (max-width: 639.98px) {
  .basicinfo .c-heading .c-heading_text-jp {
    margin-top: -2vw;
  }
}
@media (min-width: 640px) {
  .basicinfo .c-heading .c-heading_text-jp {
    margin-top: calc(-12 * var(--base-font, 1) / 10);
  }
}
.movie .c-heading .c-heading_text-jp {
  color: rgba(var(--c-true-white), 1);
}
.movie .c-heading .c-heading_text-jp::before {
  background-color: rgba(var(--c-true-white), 1);
}

/* Loder
-------------------------------- */
.loader {
  display: block; /* ローダーを表示 */
  display: flex;
  align-items: center;
  justify-content: center; /* 中央にローディングアイコンを表示 */
  position: fixed; /* 画面全体にフィットさせる */
  z-index: 1001; /* コンテンツより上に表示 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95); /* 背景色、透明度で少しコンテンツを見せる */
}

.loader.is-active {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.loader.is-active-now {
  opacity: 0;
  transition: opacity 0 ease-out;
}

.kvgif {
  width: 100%;
  max-width: 1400px;
  height: auto;
}

/* ------------------------
  utilities Classes
------------------------ */
.u-hidden {
  display: none !important;
  visibility: hidden;
}

@media (max-width: 639.98px) {
  .u-hidden-sm {
    display: none !important;
    visibility: hidden;
  }
}

.u-hidden-up-sm {
  display: none !important;
  visibility: hidden;
}

@media (max-width: 639.98px) {
  .u-hidden-down-sm {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .u-hidden-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 640px) {
  .u-hidden-up-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (max-width: 1023.98px) {
  .u-hidden-down-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .u-hidden-lg {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1024px) {
  .u-hidden-up-lg {
    display: none !important;
    visibility: hidden;
  }
}

@media (max-width: 1439.98px) {
  .u-hidden-down-lg {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1440px) {
  .u-hidden-lq {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1440px) {
  .u-hidden-up-lq {
    display: none !important;
    visibility: hidden;
  }
}

.u-hidden-down-lq {
  display: none !important;
  visibility: hidden;
}

.u-visuallyhidden {
  overflow: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  width: 1px;
  height: 1px;
}

.u-visuallyhidden.focusable:active,
.u-visuallyhidden.focusable:focus {
  overflow: visible;
  clip: auto;
  position: static;
  margin: 0;
  width: auto;
  height: auto;
}

.u-invisible {
  visibility: hidden;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 639.98px) {
  .u-br--visible-down-sm {
    overflow: hidden;
    height: 0;
    text-align: left;
    text-indent: -9999px;
    font-size: 1px;
    line-height: 100%;
  }
}
@media (max-width: 639.98px) {
  .u-br--visible-down-sm::before {
    content: "\a";
    white-space: pre;
    font-size: 1px;
    line-height: 100%;
  }
}
@media (min-width: 640px) {
  .u-br--visible-up-md {
    overflow: hidden;
    height: 0;
    text-align: left;
    text-indent: -9999px;
    font-size: 1px;
    line-height: 100%;
  }
}
@media (min-width: 640px) {
  .u-br--visible-up-md::before {
    content: "\a";
    white-space: pre;
    font-size: 1px;
    line-height: 100%;
  }
}

.u-fontcolor-pink {
  color: rgba(var(--c-font-pink), 1);
}
.u-fontcolor-blue {
  color: rgba(var(--c-font-blue), 1);
}

/* ------------------------
  Keyframes
------------------------ */
@keyframes brightness-animation {
  0% {
    filter: brightness(30%);
  }
  80% {
    filter: brightness(90%);
  }
  90% {
    filter: brightness(50%);
  }
  100% {
    filter: brightness(100%);
  }
}
/* ------------------------
  Layouts
------------------------ */
.l-contents {
  margin: 0 auto;
}
@media (min-width: 640px) {
  .l-contents {
    padding: 0 calc(50 * var(--base-font, 1) / 10);
    max-width: calc(1100 * var(--base-font, 1) / 10);
  }
}

/* ------------------------
  Print Styles
------------------------ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ------------------------
  Modal
------------------------ */
.modal__overlay {
  z-index: 1000;
}

.modal__close {
  margin-left: auto;
  width: calc(40 * var(--base-font, 1) / 10);
  height: calc(40 * var(--base-font, 1) / 10);
  font-size: calc(40 * var(--base-font, 1) / 10);
  font-weight: bold;
}
.modal__close::before {
  color: #fff;
}

.modal__container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
  height: auto;
  background-color: transparent;
}
.modal__container iframe {
  width: 100%;
  height: 56.25vw;
  max-height: 675px;
}

.modal__content {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------
  top
-------------------------------- */
/* header
-------------------------------- */
#breadcrumbNav {
  display: none;
}

.brandLogo {
  text-align: left;
}

@media (max-width: 639.98px) {
  #siteHeader {
    height: 54px;
  }
}
@media (min-width: 640px) {
  #siteHeader {
    height: 92px;
  }
}

#siteHeaderTop {
  position: static;
  margin: 0 auto;
  max-width: 1000px;
}
@media (max-width: 639.98px) {
  #siteHeaderTop {
    padding: 0 0.6666666667vw;
  }
}

@media (max-width: 639.98px) {
  #siteHeaderTop ul.sns li.contact_link {
    display: none;
  }
}

@media (min-width: 640px) {
  #siteHeaderTop ul.sns li.twitter {
    margin-left: 10px;
  }
}

/* Common
-------------------------------- */
.--marker {
  transition: background-size 0.5s 0.2s cubic-bezier(0.42, 0, 1, 1);
  background: linear-gradient(transparent 70%, rgba(var(--c-true-white), 1) 30%) 0 no-repeat;
  background-size: 0% auto;
}
@media (max-width: 639.98px) {
  .--marker {
    padding-bottom: 1.0666666667vw;
  }
}
@media (min-width: 640px) {
  .--marker {
    padding-bottom: calc(4 * var(--base-font, 1) / 10);
  }
}
.is-animation .--marker {
  background-size: 100% auto;
}
.--marker.--delay {
  transition-delay: 0.6s;
}

.scroll-anim {
  opacity: 0;
  position: relative;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (max-width: 639.98px) {
  .scroll-anim {
    top: 5.3333333333vw;
  }
}
@media (min-width: 640px) {
  .scroll-anim {
    top: calc(40 * var(--base-font, 1) / 10);
  }
}
.scroll-anim.is-animation {
  opacity: 1;
  top: 0;
}
.scroll-anim.--delay03s {
  transition-delay: 0.3s;
}
.scroll-anim.--delay06s {
  transition-delay: 0.6s;
}
.scroll-anim.--delay09s {
  transition-delay: 0.9s;
}

.fade-anim {
  opacity: 0;
  position: relative;
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (min-width: 640px) {
  .fade-anim {
    filter: blur(calc(8 * var(--base-font, 1) / 10));
  }
}
.fade-anim.is-animation {
  opacity: 1;

  filter: blur(0);
}
.fade-anim.--delay03s {
  transition-delay: 0.3s;
}

/* Hero
-------------------------------- */
@media (max-width: 639.98px) {
  .hero {
    padding: 0 0 0vw;
  }
}
@media (min-width: 640px) {
  .hero {
    padding: 0 0 calc(0 * var(--base-font, 1) / 10);
  }
}

.hero_inner {
  margin: 0 auto;
  max-width: 1440px;
}
@media (min-width: 640px) {
  .hero_inner {
    padding: 0 calc(0 * var(--base-font, 1) / 10);
  }
}

.hero_carousel {
  position: relative;
}

.hero_carousel-pagination {
  gap: 0 calc(10 * var(--base-font, 1) / 10);
}
@media (max-width: 639.98px) {
  .hero_carousel-pagination {
    padding: 4.9333333333vw 0;
  }
}
@media (min-width: 640px) {
  .hero_carousel-pagination {
    padding: calc(25 * var(--base-font, 1) / 10) 0;
  }
}
@media (max-width: 639.98px) {
  .hero_carousel-pagination li {
    height: 0.8vw;
  }
}
@media (min-width: 640px) {
  .hero_carousel-pagination li {
    height: calc(4 * var(--base-font, 1) / 10);
  }
}

.hero_carousel-page {
  height: 100%;
  min-height: initial;
  background-color: rgba(var(--c-carousel-pager), 0.2);
  vertical-align: top;
}
@media (max-width: 639.98px) {
  .hero_carousel-page {
    width: 5.3333333333vw;
  }
}
@media (min-width: 640px) {
  .hero_carousel-page {
    width: calc(40 * var(--base-font, 1) / 10);
  }
}
.hero_carousel-page.is-active {
  background-color: rgba(var(--c-carousel-pager-active), 1);
}

/* Lineup
-------------------------------- */
@media (max-width: 639.98px) {
  .lineup {
    margin-top: -11.4666666667vw;
    padding: 22.6666666667vw 0 0;
  }
}
@media (min-width: 640px) {
  .lineup {
    margin-top: calc(-54 * var(--base-font, 1) / 10);
    padding: calc(145 * var(--base-font, 1) / 10) 0 0;
  }
}

.lineup-contents {
  position: relative;
  text-align: center;
}

.lineup_lead {
  letter-spacing: 0.15em;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .lineup_lead {
    margin-top: 8vw;
    font-size: 5.8666666667vw;
    line-height: 1.4545454545;

    font-feature-settings: "palt";
  }
}
@media (min-width: 640px) {
  .lineup_lead {
    margin-top: calc(55 * var(--base-font, 1) / 10);
    font-size: calc(32 * var(--base-font, 1) / 10);
    line-height: 1.5625;
  }
}

.lineup-lead_emphasis {
  letter-spacing: 0.15em;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .lineup-lead_emphasis {
    font-size: 6.9333333333vw;
    line-height: 1.4545454545;
  }
}
@media (min-width: 640px) {
  .lineup-lead_emphasis {
    font-size: calc(38 * var(--base-font, 1) / 10);
    line-height: 1.3684210526;
  }
}

.lineup-contents_decoration {
  position: absolute;
  pointer-events: none;

  filter: brightness(30%);
}
@media (max-width: 639.98px) {
  .lineup-contents_decoration {
    top: -22.1333333333vw;
    left: 4.2666666667vw;
    width: 42.6666666667vw;
    height: 37.4666666667vw;
  }
}
@media (min-width: 640px) {
  .lineup-contents_decoration {
    top: calc(-146 * var(--base-font, 1) / 10);
    left: calc(112 * var(--base-font, 1) / 10);
    width: calc(320 * var(--base-font, 1) / 10);
    height: calc(281 * var(--base-font, 1) / 10);
  }
}
.lineup-contents_decoration.is-animation {
  animation: brightness-animation 0.3s cubic-bezier(0, 0, 0.58, 1) forwards;
}

.lineup_text {
  letter-spacing: 0.15em;
}
@media (max-width: 639.98px) {
  .lineup_text {
    margin-top: 0;
    padding-top: 2vw;
    font-size: 4vw;
    line-height: 1.8;
  }
}
@media (min-width: 640px) {
  .lineup_text {
    padding-top: calc(19 * var(--base-font, 1) / 10);
    font-size: calc(20 * var(--base-font, 1) / 10);
    line-height: 2.025;
  }
}

.lineup-text_empasis {
  letter-spacing: 0.15em;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .lineup-text_empasis {
    font-size: 4.5333333333vw;
    line-height: 1.8;
  }
}
@media (min-width: 640px) {
  .lineup-text_empasis {
    font-size: calc(24 * var(--base-font, 1) / 10);
    line-height: 1.6875;
  }
}

.lineup_products {
  display: grid;

  grid-template-rows: repeat(2, auto);
}
@media (max-width: 639.98px) {
  .lineup_products {
    margin-top: 15.2vw;

    gap: 12.8vw 0;
  }
}
@media (min-width: 640px) {
  .lineup_products {
    margin-top: calc(120 * var(--base-font, 1) / 10);

    gap: calc(55 * var(--base-font, 1) / 10) 0;
  }
}

.lineup-products_container {
  display: grid;

  grid-template-rows: repeat(2, auto);
}
@media (max-width: 639.98px) {
  .lineup-products_container {
    gap: 7.2vw 0;
  }
}
@media (min-width: 640px) {
  .lineup-products_container {
    gap: calc(36 * var(--base-font, 1) / 10) 0;
  }
}

.lineup-products_heading {
  display: grid;
  align-items: center;
  justify-content: center;

  grid-template-columns: repeat(2, auto);
}
@media (max-width: 639.98px) {
  .lineup-products_heading {
    gap: 0 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup-products_heading {
    gap: 0 calc(9 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .lineup-products-heading_letter.--fat {
    height: 8.1333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup-products-heading_letter.--fat {
    height: calc(42 * var(--base-font, 1) / 10);
  }
}
@media (max-width: 639.98px) {
  .lineup-products-heading_letter.--swelling {
    height: 7.7333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup-products-heading_letter.--swelling {
    height: calc(39 * var(--base-font, 1) / 10);
  }
}
@media (max-width: 639.98px) {
  .lineup-products-heading_letter.--problem {
    height: 4.9333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup-products-heading_letter.--problem {
    height: calc(30.4 * var(--base-font, 1) / 10);
  }
}
.lineup-products-heading_letter img {
  width: auto;
  height: 100%;
}

.lineup-products_content {
  display: grid;
}
@media (max-width: 639.98px) {
  .lineup-products_content {
    grid-template-columns: repeat(2, 50%);
    gap: 0 0;
  }
}
@media (min-width: 640px) {
  .lineup-products_content {
    justify-content: space-between;

    grid-template-columns: repeat(2, minmax(0, calc(470 * var(--base-font, 1) / 10)));
    gap: 0 calc(10 * var(--base-font, 1) / 10);
  }
}

.lineup-products_item {
  position: relative;
}

.lineup-products_package {
  opacity: 0;
  position: absolute;

  filter: blur(calc(5 * var(--base-font, 1) / 10));
}
@media (max-width: 639.98px) {
  .lineup-products_package {
    bottom: 16.2666666667vw;
    left: 50%;
    margin-left: -11.3333333333vw;
    width: 22.6666666667vw;
  }
}
@media (min-width: 640px) {
  .lineup-products_package {
    top: calc(-20 * var(--base-font, 1) / 10);
    left: calc(20 * var(--base-font, 1) / 10);
    width: 30%;
  }
}
.lineup-products_package img {
  width: 100%;
  height: auto;
}
@media (min-width: 640px) {
  .lineup-products_package {
    top: calc(10 * var(--base-font, 1) / 10);
  }
}
.lineup-products_package.is-animation {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.42, 0, 1, 1), filter 0.4s cubic-bezier(0.42, 0, 1, 1), top 0.4s;

  filter: blur(0);
}
@media (min-width: 640px) {
  .lineup-products_package.is-animation {
    top: calc(-20 * var(--base-font, 1) / 10);
  }
}
.lineup-products_item:nth-of-type(even) .lineup-products_package.is-animation {
  transition-delay: 0.4s;
}

.lineup-products_name {
  background-color: rgba(var(--c-true-white), 1);
}
@media (max-width: 639.98px) {
  .lineup-products_name {
    box-shadow: inset 0 0 4.8vw 0 rgba(var(--c-shadow-lineup), 0.6);
  }
}
@media (min-width: 640px) {
  .lineup-products_name {
    width: 100%;
    height: calc(284.5 * var(--base-font, 1) / 10);
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
  }
}
@media (min-width: 640px) {
  .lineup-products_item:hover .lineup-products_name {
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(5 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
  }
}

/* Diagnosis
-------------------------------- */
.diagnosis {
  position: relative;
}
@media (max-width: 639.98px) {
  .diagnosis {
    padding: 19.4666666667vw 0 34.4vw;
    background: linear-gradient(0deg, rgb(115, 61, 25) 70%, rgba(138, 86, 52, 0.4) 100%);
  }
}
@media (min-width: 640px) {
  .diagnosis {
    padding: calc(198 * var(--base-font, 1) / 10) 0 calc(303 * var(--base-font, 1) / 10);
    background: linear-gradient(0deg, rgb(115, 61, 25) 5%, rgb(234, 232, 221) 100%);
  }
}
.diagnosis::after {
  content: "";
  position: absolute;
  bottom: calc(0 * var(--base-font, 1) / 10);
  left: 0;
  width: 100%;
  background: url("/ph/coccoapo/img/top/decoration_bg_bottom.webp") repeat-x 0 0/auto 100%;
}
@media (max-width: 639.98px) {
  .diagnosis::after {
    height: 24.4vw;
  }
}
@media (min-width: 640px) {
  .diagnosis::after {
    height: calc(286 * var(--base-font, 1) / 10);
  }
}

.diagnosis_contents {
  position: relative;
  padding-top: 26.6666666667vw;
}
@media (min-width: 640px) {
  .diagnosis_contents {
    padding-top: calc(154 * var(--base-font, 1) / 10);
  }
}

.diagnosis_heading {
  display: grid;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-align: center;

  grid-template-columns: 1fr;
}
@media (max-width: 639.98px) {
  .diagnosis_heading {
    gap: 1.3333333333vw 0;
  }
}
@media (min-width: 640px) {
  .diagnosis_heading {
    gap: calc(10 * var(--base-font, 1) / 10) 0;
  }
}

.diagnosis-heading_text {
  color: rgba(var(--c-true-white), 1);
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .diagnosis-heading_text {
    margin-left: 0.5em;
    text-align: center;
    letter-spacing: 0.14em;
    font-size: 7.2vw;
    line-height: 1.1481481481;
  }
}
@media (min-width: 640px) {
  .diagnosis-heading_text {
    letter-spacing: 0.1em;
    font-size: calc(44 * var(--base-font, 1) / 10);
    line-height: 1.1818181818;
  }
}
.diagnosis-heading_text.--small {
  letter-spacing: 0.2em;
}
@media (max-width: 639.98px) {
  .diagnosis-heading_text.--small {
    font-size: 4vw;
    line-height: 1.7333333333;
  }
}
@media (min-width: 640px) {
  .diagnosis-heading_text.--small {
    font-size: calc(24 * var(--base-font, 1) / 10);
    line-height: 1.95;
  }
}

.diagnosis-content_bg {
  position: absolute;
  z-index: 0;
  top: 0;
}
@media (max-width: 639.98px) {
  .diagnosis-content_bg {
    left: 0;
  }
}
@media (min-width: 640px) {
  .diagnosis-content_bg {
    left: 50%;
    margin-left: calc(-450 * var(--base-font, 1) / 10);
    width: calc(900 * var(--base-font, 1) / 10);
  }
}

.diagnosis_contents-box {
  display: grid;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  background: no-repeat center top/100% auto;
}
@media (max-width: 639.98px) {
  .diagnosis_contents-box {
    margin-top: 9.6vw;
    padding: 1.3333333333vw;
    width: 86.6666666667vw;
    background-image: url("/ph/coccoapo/img/top/diagnosis_bg_sm.webp");

    grid-template-rows: 45.3333333333vw 38.4vw 31.2vw;
    grid-template-areas: "title" "guide" "count";
  }
}
@media (min-width: 640px) {
  .diagnosis_contents-box {
    margin-top: calc(57 * var(--base-font, 1) / 10);
    padding: calc(10 * var(--base-font, 1) / 10);
    width: calc(600 * var(--base-font, 1) / 10);
    background-image: url("/ph/coccoapo/img/top/diagnosis_bg_lg.webp");

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "title guide" "count count";
    gap: 0 0;
  }
}

.diagnosis-contents-box_title {
  grid-area: title;
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_title {
    margin-top: -0.2666666667vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box_title {
    padding-bottom: calc(110 * var(--base-font, 1) / 10);
  }
}
.diagnosis-contents-box_title > div {
  position: relative;
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_title > div {
    left: 50%;
    margin-left: -33.3333333333vw;
    width: 66.6666666667vw;
    height: 45.3333333333vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box_title > div {
    left: calc(20 * var(--base-font, 1) / 10);
    width: calc(300 * var(--base-font, 1) / 10);
    height: calc(270 * var(--base-font, 1) / 10);
  }
}

.diagnosis-contents-box_guide {
  position: relative;

  grid-area: guide;
}
.diagnosis-contents-box_guide > div {
  position: absolute;
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_guide > div {
    right: 50%;
    bottom: 0;
    margin-right: -28.6666666667vw;
    width: 57.3333333333vw;
    height: 51.3333333333vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box_guide > div {
    top: calc(-43 * var(--base-font, 1) / 10);
    right: 0;
    width: calc(323 * var(--base-font, 1) / 10);
    height: calc(423 * var(--base-font, 1) / 10);
  }
}

.diagnosis-contents-box_count {
  display: grid;

  grid-area: count;
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_count {
    padding: 0;

    grid-template-columns: auto;
    grid-template-rows: 13.3333333333vw 10.6666666667vw;
    gap: 2.4vw 0;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box_count {
    padding: calc(30 * var(--base-font, 1) / 10) 0 calc(20 * var(--base-font, 1) / 10);

    grid-template-columns: calc(156 * var(--base-font, 1) / 10) 1fr;
    gap: 0 calc(13 * var(--base-font, 1) / 10);
  }
}

@media (min-width: 640px) {
  .diagnosis-contents-box_label {
    display: grid;
    align-items: center;
  }
}
.diagnosis-contents-box_label span {
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgba(var(--c-diagnosis-label), 1);
  letter-spacing: 0.08em;
  color: rgba(var(--c-true-white), 1);
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_label span {
    height: 10.6666666667vw;
    font-size: 4.2666666667vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box_label span {
    width: 100%;
    height: calc(56 * var(--base-font, 1) / 10);
    font-size: calc(22 * var(--base-font, 1) / 10);

    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);

            clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  }
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box_label span::before {
    content: "";
    position: absolute;
    bottom: -3.4666666667vw;
    left: 50%;
    margin-left: -4.1333333333vw;
    width: 8.2666666667vw;
    height: 3.4666666667vw;
    background-color: rgba(var(--c-diagnosis-label), 1);

    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);

            clip-path: polygon(0 0, 50% 100%, 100% 0);
  }
}

.diagnosis-contents-box-count_counter {
  display: grid;
  letter-spacing: 0.08em;
  color: #fff;
  font-weight: bold;

  grid-template-columns: repeat(3, auto);
}
@media (max-width: 639.98px) {
  .diagnosis-contents-box-count_counter {
    align-items: flex-end;
    justify-content: center;
    font-size: 4vw;

    grid-template-columns: repeat(3, auto);
    gap: 0 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-contents-box-count_counter {
    align-items: center;
    justify-content: flex-start;
    font-size: calc(18 * var(--base-font, 1) / 10);

    grid-template-columns: repeat(3, auto);
    gap: 0 calc(10 * var(--base-font, 1) / 10);
  }
}

.lineup-diagnosis_counter-num {
  display: inline-grid;
  line-height: 1;
}
@media (max-width: 639.98px) {
  .lineup-diagnosis_counter-num {
    grid-template-columns: repeat(7, 7.0666666667vw);
    grid-template-rows: 10.6666666667vw;
    gap: 0 2.1333333333vw;
  }
}
@media (min-width: 640px) {
  .lineup-diagnosis_counter-num {
    align-items: center;

    grid-template-columns: repeat(7, calc(40 * var(--base-font, 1) / 10));
    grid-template-rows: calc(56 * var(--base-font, 1) / 10);
    gap: 0 calc(8 * var(--base-font, 1) / 10);
  }
}
.lineup-diagnosis_counter-num span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #fff;
  color: #363636;
}
@media (max-width: 639.98px) {
  .lineup-diagnosis_counter-num span {
    border-radius: 0.8vw;
    font-size: 7.2vw;
  }
}
@media (min-width: 640px) {
  .lineup-diagnosis_counter-num span {
    padding-top: calc(2 * var(--base-font, 1) / 10);
    padding-left: calc(2 * var(--base-font, 1) / 10);
    border-radius: calc(6 * var(--base-font, 1) / 10);
    font-size: calc(38 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .diagnosis_link {
    margin: 9.6vw auto 0;
    width: 64vw;
  }
}
@media (min-width: 640px) {
  .diagnosis_link {
    margin: calc(60 * var(--base-font, 1) / 10) auto 0;
    width: calc(440 * var(--base-font, 1) / 10);
  }
}
@media (min-width: 640px) {
  .diagnosis_link:visited,
  .diagnosis_link:link {
    font-size: calc(26 * var(--base-font, 1) / 10);
  }
}

.diagnosis-content_decoration {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 100%;
  text-align: right;
}
@media (max-width: 639.98px) {
  .diagnosis-content_decoration {
    height: 24vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-content_decoration {
    bottom: calc(0 * var(--base-font, 1) / 10);
    height: calc(286 * var(--base-font, 1) / 10);
  }
}
.diagnosis-content_decoration img {
  width: auto;
  height: 100%;
}

/* Column
-------------------------------- */
@media (max-width: 639.98px) {
  .column {
    padding: 19.4666666667vw 0 18.4vw;
  }
}
@media (min-width: 640px) {
  .column {
    padding: calc(142 * var(--base-font, 1) / 10) 0 calc(120 * var(--base-font, 1) / 10);
  }
}

.column_lead {
  text-align: center;
  letter-spacing: 0.15em;
}
@media (max-width: 639.98px) {
  .column_lead {
    margin-top: 5.8666666667vw;
    font-size: 4vw;
    line-height: 1.8;
  }
}
@media (min-width: 640px) {
  .column_lead {
    margin-top: calc(40 * var(--base-font, 1) / 10);
    font-size: calc(22 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .column_carousel {
    margin-top: 8.5333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel {
    margin-top: calc(70 * var(--base-font, 1) / 10);
  }
}

.column-carousel_slide {
  position: relative;
}

.column-carousel-slide_link {
  display: grid;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_link {
    grid-template-rows: auto 1fr;
    gap: 0 0;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_link {
    grid-template-columns: calc(450 * var(--base-font, 1) / 10) 1fr;
    gap: 0 calc(39 * var(--base-font, 1) / 10);
  }
}
.column-carousel-slide_link:visited,
.column-carousel-slide_link:link {
  text-decoration: none;
  color: #363636;
}
.column-carousel-slide_link:hover {
  text-decoration: none;
}

.column-carousel-slide_thumb {
  overflow: hidden;
}
.column-carousel-slide_thumb img {
  width: 100%;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (min-width: 640px) {
  .column-carousel-slide_link:hover .column-carousel-slide_thumb img {
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: scale(1.25, 1.25);
  }
}

.column-carousel-slide_header {
  display: grid;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_header {
    grid-template-rows: 12vw auto;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_header {
    grid-template-rows: calc(88 * var(--base-font, 1) / 10) 1fr;
  }
}

.column-carousel-slide_point {
  display: grid;
  align-items: center;
  justify-content: center;
  border-bottom: solid rgba(var(--c-true-black), 1);
  text-align: center;
  letter-spacing: 0.2em;
  font-weight: bold;
  line-height: 1.25;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_point {
    margin-top: 0;
    border-bottom-width: 0.2666666667vw;
    font-size: 3.4666666667vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_point {
    border-bottom-width: calc(2 * var(--base-font, 1) / 10);
    font-size: calc(20 * var(--base-font, 1) / 10);
  }
}

.column-carousel-slide_title-container {
  display: grid;
  align-items: start;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_title-container {
    padding: 3.4666666667vw 0 10.6666666667vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_title-container {
    padding-top: calc(18 * var(--base-font, 1) / 10);
  }
}

.column-carousel-slide_title {
  text-align: justify;
  letter-spacing: 0;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_title {
    font-size: 4.2666666667vw;
    line-height: 1.75;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_title {
    font-size: calc(24 * var(--base-font, 1) / 10);
    line-height: 1.75;
  }
}
.column-carousel-slide_link:hover .column-carousel-slide_title {
  text-decoration: underline;
}

.column-carousel-slide_taglist {
  display: flex;
  position: absolute;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_taglist {
    bottom: 1.3333333333vw;
    left: 0;

    gap: 0 2.1333333333vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_taglist {
    bottom: 0;
    left: calc(490 * var(--base-font, 1) / 10);

    gap: 0 calc(10 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .column-carousel-slide_tagitem {
    height: 5.8666666667vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_tagitem {
    height: calc(34 * var(--base-font, 1) / 10);
  }
}

.column-carousel-slide_taglink {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_taglink {
    padding: 0 2.6666666667vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_taglink {
    padding: 0 calc(12 * var(--base-font, 1) / 10);
  }
}
.column-carousel-slide_taglink:visited,
.column-carousel-slide_taglink:link {
  transition: opacity 0.2s;
  text-decoration: none;
  letter-spacing: 0.08em;
  color: #363636;
  line-height: 1;
}
@media (max-width: 639.98px) {
  .column-carousel-slide_taglink:visited,
  .column-carousel-slide_taglink:link {
    font-size: 3.7333333333vw;
  }
}
@media (min-width: 640px) {
  .column-carousel-slide_taglink:visited,
  .column-carousel-slide_taglink:link {
    font-size: calc(22 * var(--base-font, 1) / 10);
  }
}
.column-carousel-slide_taglink[data-category=constipation] {
  background-color: rgba(var(--c-category-theme-constipation), 1);
}
.column-carousel-slide_taglink[data-category=fat] {
  background-color: rgba(var(--c-category-theme-fat), 1);
}
.column-carousel-slide_taglink[data-category=kanpo] {
  background-color: rgba(var(--c-category-theme-kanpo), 1);
}
.column-carousel-slide_taglink[data-category=hie] {
  background-color: rgba(var(--c-category-theme-hie), 1);
}
.column-carousel-slide_taglink[data-category=mukumi] {
  background-color: rgba(var(--c-category-theme-mukumi), 1);
}
.column-carousel-slide_taglink[data-category=chokatsu] {
  background-color: rgba(var(--c-category-theme-chokatsu), 1);
}
.column-carousel-slide_taglink[data-category=benpi] {
  background-color: #d596d1;
}
.column-carousel-slide_taglink:hover {
  opacity: 0.7;
  color: #363636;
}

.column_carousel-arrow-container {
  display: grid;
  justify-content: space-between;
  position: absolute;
  pointer-events: none;

  grid-template-columns: repeat(2, auto);
}
@media (max-width: 639.98px) {
  .column_carousel-arrow-container {
    top: 0vw;
    left: 9.3333333333vw;
    width: 81.3333333333vw;
    height: 45.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel-arrow-container {
    top: 50%;
    left: 50%;
    margin-top: calc(-40 * var(--base-font, 1) / 10);
    margin-left: calc(-460 * var(--base-font, 1) / 10);
    width: calc(920 * var(--base-font, 1) / 10);
  }
}

.column_carousel-arrow {
  transition: transform 0.3s ease;
  pointer-events: initial;
}
@media (max-width: 639.98px) {
  .column_carousel-arrow {
    width: 5.3333333333vw;
    height: 100%;
  }
}
.column_carousel-arrow span {
  display: block;
  overflow: hidden;
  border-right: 1px solid #363636;
  border-bottom: 1px solid #363636;
  transform: rotate(-45deg);
  text-indent: -9999px;
}
@media (max-width: 639.98px) {
  .column_carousel-arrow span {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel-arrow span {
    width: calc(28 * var(--base-font, 1) / 10);
    height: calc(28 * var(--base-font, 1) / 10);
  }
}
.column_carousel-arrow.--prev span {
  transform: rotate(135deg);
}
@media (max-width: 639.98px) {
  .column_carousel-arrow.--prev span {
    margin-left: 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel-arrow:hover {
    transition: transform 0.3s ease;
    transform: scale(1.2);
  }
}

.column_carousel-pagination {
  display: grid !important;
}
@media (max-width: 639.98px) {
  .column_carousel-pagination {
    padding: 6vw 0 10.6666666667vw;

    grid-template-columns: repeat(auto-fit, 5.3333333333vw);
    grid-template-rows: 0.8vw;
    gap: 0 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel-pagination {
    padding: calc(40 * var(--base-font, 1) / 10) 0 calc(30 * var(--base-font, 1) / 10);

    grid-template-columns: repeat(auto-fit, calc(40 * var(--base-font, 1) / 10));
    grid-template-rows: calc(4 * var(--base-font, 1) / 10);
    gap: 0 calc(10 * var(--base-font, 1) / 10);
  }
}
.column_carousel-pagination > li {
  height: 100%;
  min-height: initial;
}

.column_carousel-page {
  height: 100%;
  min-height: initial;
  background-color: rgba(var(--c-carousel-pager), 0.2);
  vertical-align: top;
}
@media (max-width: 639.98px) {
  .column_carousel-page {
    width: 5.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column_carousel-page {
    width: calc(40 * var(--base-font, 1) / 10);
  }
}
.column_carousel-page.is-active {
  background-color: rgba(var(--c-carousel-pager-active), 1);
}

.column_more {
  text-align: right;
}
@media (max-width: 639.98px) {
  .column_more {
    padding: 0 5.6vw;
    line-height: 1;
  }
}

.column-more_link {
  display: inline-flex;
  justify-content: end;
}
@media (max-width: 639.98px) {
  .column-more_link {
    gap: 0 3.2vw;
  }
}
@media (min-width: 640px) {
  .column-more_link {
    gap: 0 calc(20 * var(--base-font, 1) / 10);
  }
}

.column-more-link_text {
  position: relative;
}
@media (max-width: 639.98px) {
  .column-more-link_text {
    width: 24.1333333333vw;
    height: 3.7333333333vw;
  }
}
@media (min-width: 640px) {
  .column-more-link_text {
    width: calc(152 * var(--base-font, 1) / 10);
    height: calc(23 * var(--base-font, 1) / 10);
  }
}
.column-more-link_text::before {
  content: "";
  position: absolute;
  bottom: calc(-8 * var(--base-font, 1) / 10);
  left: 0;
  width: 100%;
  height: calc(1 * var(--base-font, 1) / 10);
  transition: transform ease 0.3s;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  background-color: rgba(var(--c-true-black), 1);
}
.column-more_link:hover .column-more-link_text::before {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}
.column-more-link_text img {
  width: auto;
  height: 100%;
  vertical-align: top;
}

.column-more-link_arrow {
  display: flex;
  align-items: start;
}
@media (max-width: 639.98px) {
  .column-more-link_arrow {
    padding-top: calc(2 * var(--base-font, 1) / 10);
    width: 5.6vw;
    height: 1.3333333333vw;
  }
}
@media (min-width: 640px) {
  .column-more-link_arrow {
    width: calc(42 * var(--base-font, 1) / 10);
    height: calc(10 * var(--base-font, 1) / 10);
    transition: transform ease 0.3s;
  }
}
@media (min-width: 640px) {
  .column-more_link:hover .column-more-link_arrow {
    transform: translateX(calc(5 * var(--base-font, 1) / 10));
  }
}
@media (min-width: 640px) {
  .column-more-link_arrow img {
    margin-top: calc(4 * var(--base-font, 1) / 10);
  }
}

/* Basicinfo
-------------------------------- */
@media (max-width: 639.98px) {
  .basicinfo {
    padding: 19.3333333333vw 0 20vw;
  }
}
@media (min-width: 640px) {
  .basicinfo {
    padding: calc(145 * var(--base-font, 1) / 10) 0 calc(150 * var(--base-font, 1) / 10);
  }
}

.basicinfo_lead {
  text-align: center;
  letter-spacing: 0.15em;
}
@media (max-width: 639.98px) {
  .basicinfo_lead {
    margin-top: 5.8666666667vw;
    font-size: 4vw;
    line-height: 1.8;
  }
}
@media (min-width: 640px) {
  .basicinfo_lead {
    margin-top: calc(40 * var(--base-font, 1) / 10);
    font-size: calc(22 * var(--base-font, 1) / 10);
  }
}

.basicinfo-content_list {
  display: grid;
  justify-content: center;
}
@media (max-width: 639.98px) {
  .basicinfo-content_list {
    margin-top: 8.2666666667vw;

    grid-template-columns: repeat(2, 40.8vw);
    gap: 5.3333333333vw;
  }
}
@media (min-width: 640px) {
  .basicinfo-content_list {
    margin: calc(58 * var(--base-font, 1) / 10) calc(-20 * var(--base-font, 1) / 10) 0;

    grid-template-columns: repeat(4, 20.8%);
    gap: 0 4.2%;
  }
}

@media (max-width: 639.98px) {
  .basicinfo-content_item {
    box-shadow: 0 0 4.8vw 0 rgba(var(--c-true-black), 0.4);
  }
}
@media (min-width: 640px) {
  .basicinfo-content_item {
    box-shadow: 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-true-black), 0.4);
  }
}

.basicinfo-content_link {
  display: grid;
  background-color: #efede2;
  text-align: center;
  letter-spacing: 0.15em;
}
@media (max-width: 639.98px) {
  .basicinfo-content_link {
    box-shadow: inset 0 0 4.8vw 0 rgba(var(--c-shadow-lineup), 0.6);
    font-size: 4vw;
    line-height: 1.4666666667;

    grid-template-rows: 27.0666666667vw 20vw;
  }
}
@media (min-width: 640px) {
  .basicinfo-content_link {
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
    font-size: calc(22 * var(--base-font, 1) / 10);
    line-height: 1.4545454545;

    grid-template-rows: calc(145 * var(--base-font, 1) / 10) calc(107 * var(--base-font, 1) / 10);
  }
}
.basicinfo-content_link:visited,
.basicinfo-content_link:link {
  text-decoration: none;
  color: #363636;
}
@media (min-width: 640px) {
  .basicinfo-content_link:hover {
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 calc(5 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
  }
}

.basicinfo-content_thumb {
  overflow: hidden;
}
.basicinfo-content_thumb img {
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.basicinfo-content_link:hover .basicinfo-content_thumb img {
  opacity: 0.8;
}

.basicinfo-content_title {
  display: grid;
  align-items: center;
}
@media (min-width: 640px) {
  .basicinfo-content_title {
    margin-top: calc(-5 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .basicinfo_link {
    margin-top: 12.2666666667vw;
    width: 64vw;
  }
}
@media (min-width: 640px) {
  .basicinfo_link {
    width: calc(440 * var(--base-font, 1) / 10);
  }
}

/* Movie
-------------------------------- */
.movie {
  position: relative;
  background: linear-gradient(#7a3e18 50%, rgba(var(--c-true-black), 1) 100%) 0 no-repeat;
}
@media (max-width: 639.98px) {
  .movie {
    padding: 19.4666666667vw 0 31.7333333333vw;
  }
}
@media (min-width: 640px) {
  .movie {
    padding: calc(147 * var(--base-font, 1) / 10) 0 calc(298 * var(--base-font, 1) / 10);
  }
}
.movie::after {
  content: "";
  position: absolute;
  bottom: calc(0 * var(--base-font, 1) / 10);
  left: 0;
  width: 100%;
  background: url("/ph/coccoapo/img/top/decoration_bg_bottom.webp") repeat-x 0 0/auto 100%;
  pointer-events: none;
}
@media (max-width: 639.98px) {
  .movie::after {
    height: calc(143 * var(--base-font, 1) / 10);
  }
}
@media (min-width: 640px) {
  .movie::after {
    height: calc(394 * var(--base-font, 1) / 10);
  }
}

.movie_lead {
  text-align: center;
  letter-spacing: 0.15em;
  color: rgba(var(--c-true-white), 1);
}
@media (max-width: 639.98px) {
  .movie_lead {
    margin-top: 6.1333333333vw;
    font-size: 4vw;
    line-height: 1.8;
  }
}
@media (min-width: 640px) {
  .movie_lead {
    margin-top: calc(40 * var(--base-font, 1) / 10);
    font-size: calc(22 * var(--base-font, 1) / 10);
  }
}

.movie_content {
  display: grid;
}
@media (max-width: 639.98px) {
  .movie_content {
    justify-content: center;
    margin-top: 10.1333333333vw;

    grid-template-columns: 86.6666666667vw;
    grid-template-rows: repeat(2, 62vw);
    gap: 11.3333333333vw 0;
  }
}
@media (min-width: 640px) {
  .movie_content {
    justify-content: space-between;
    margin-top: calc(60 * var(--base-font, 1) / 10);

    grid-template-columns: repeat(2, 47%);
    grid-template-rows: min-content;
    gap: 0 calc(5 * var(--base-font, 1) / 10);
  }
}

.movie_item {
  background-color: #eae8dd;
}
@media (max-width: 639.98px) {
  .movie_item {
    padding: 1.3333333333vw;
    box-shadow: inset 0 0 4.2666666667vw 0 rgba(var(--c-shadow-lineup), 1);
  }
}
@media (min-width: 640px) {
  .movie_item {
    padding: calc(10 * var(--base-font, 1) / 10);
    box-shadow: inset 0 0 calc(18 * var(--base-font, 1) / 10) 0 rgba(var(--c-shadow-lineup), 1);
  }
}

.movie_embed {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}
.movie_embed iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.movie_title {
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.15em;
  color: #363636;
  font-weight: bold;
}
@media (max-width: 639.98px) {
  .movie_title {
    height: 11.0666666667vw;
    font-size: 4.2666666667vw;
  }
}
@media (min-width: 640px) {
  .movie_title {
    padding-top: 10px;
    height: calc(67 * var(--base-font, 1) / 10);
    font-size: calc(26 * var(--base-font, 1) / 10);
  }
}

.movie_profile {
  margin: 0 auto;
  border: calc(1 * var(--base-font, 1) / 10) solid rgba(var(--c-true-white), 1);
  color: rgba(var(--c-true-white), 1);
}
@media (max-width: 639.98px) {
  .movie_profile {
    margin-top: 17.0666666667vw;
    padding: 7.7333333333vw;
    width: 86.6666666667vw;
  }
}
@media (min-width: 640px) {
  .movie_profile {
    margin-top: calc(100 * var(--base-font, 1) / 10);
    padding: calc(60 * var(--base-font, 1) / 10);
    width: calc(800 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .movie-profile_inner {
    display: grid;

    grid-template-columns: auto 42.6666666667vw;
    grid-template-rows: auto auto;
    gap: 0 0;
    grid-template-areas: "meta photo" "text text";
  }
}
@media (min-width: 640px) {
  .movie-profile_inner {
    display: grid;

    grid-template-columns: auto calc(260 * var(--base-font, 1) / 10);
    grid-template-rows: auto auto;
    gap: 0 calc(40 * var(--base-font, 1) / 10);
    grid-template-areas: "meta meta" "text photo";
  }
}

.movie-profile_meta {
  display: flex;
  align-items: center;

  grid-area: meta;
}
@media (max-width: 639.98px) {
  .movie-profile_meta {
    flex-direction: column;
    justify-content: center;
    margin-top: 3.7333333333vw;
    margin-left: -4.2666666667vw;

    gap: 5.3333333333vw 0;
  }
}
@media (min-width: 640px) {
  .movie-profile_meta {
    gap: 0 calc(15 * var(--base-font, 1) / 10);
  }
}

@media (max-width: 639.98px) {
  .movie-profile_heading {
    margin-top: 0;
    height: 3.0666666667vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_heading {
    display: flex;
    align-items: center;
    height: calc(17 * var(--base-font, 1) / 10);
  }
}
.movie-profile_heading img {
  width: auto;
  height: 100%;
}

.movie-profile_name {
  grid-area: name;
}
@media (max-width: 639.98px) {
  .movie-profile_name {
    margin-top: 0;
    text-align: center;
    letter-spacing: 0.15em;
    font-size: 5.0666666667vw;
    font-weight: bold;
    line-height: 1.5789473684;
  }
}
@media (min-width: 640px) {
  .movie-profile_name {
    display: flex;
    align-items: center;
    letter-spacing: 0.08em;
    font-size: calc(32 * var(--base-font, 1) / 10);
    font-weight: bold;
    line-height: 1.40625;
  }
}
@media (max-width: 639.98px) {
  .movie-profile_name span {
    display: block;
    letter-spacing: 0.01em;
    font-size: 3.1666666667vw;
    line-height: 1.5789473684;
  }
}
@media (min-width: 640px) {
  .movie-profile_name span {
    margin-left: 0.5em;
    letter-spacing: 0.08em;
    font-size: calc(20 * var(--base-font, 1) / 10);
    line-height: 1.40625;
  }
}

.movie-profile_photo {
  grid-area: photo;
}
@media (min-width: 640px) {
  .movie-profile_photo {
    margin-top: calc(24 * var(--base-font, 1) / 10);
  }
}

.movie-profile_text {
  grid-area: text;
}
@media (max-width: 639.98px) {
  .movie-profile_text {
    letter-spacing: 0em;
    font-size: 3.7333333333vw;
    line-height: 1.9285714286;
  }
}
@media (min-width: 640px) {
  .movie-profile_text {
    margin-top: calc(17 * var(--base-font, 1) / 10);
    letter-spacing: 0.03em;
    font-size: calc(20 * var(--base-font, 1) / 10);
    line-height: 2.025;
  }
}

@media (max-width: 639.98px) {
  .movie-profile_snslist {
    margin-top: 4.8vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_snslist {
    margin-top: calc(30 * var(--base-font, 1) / 10);
  }
}

.movie-profile_snslist {
  display: grid;
}
@media (max-width: 639.98px) {
  .movie-profile_snslist {
    grid-template-columns: repeat(2, 12vw);
    gap: 0 3.3333333333vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_snslist {
    grid-template-columns: repeat(2, calc(70 * var(--base-font, 1) / 10));
    gap: 0 calc(15 * var(--base-font, 1) / 10);
  }
}

.movie-profile_snslink {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: rgba(var(--c-true-white), 1);
}
@media (max-width: 639.98px) {
  .movie-profile_snslink {
    width: 12vw;
    height: 12vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_snslink {
    border: calc(2 * var(--base-font, 1) / 10) solid #fff;
    width: calc(70 * var(--base-font, 1) / 10);
    height: calc(70 * var(--base-font, 1) / 10);
  }
}
.movie-profile_snslink img {
  height: auto;
}
@media (max-width: 639.98px) {
  .movie-profile_snslink img {
    width: 6vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_snslink img {
    width: calc(31 * var(--base-font, 1) / 10);
  }
}
@media (max-width: 639.98px) {
  .movie-profile_snslink svg {
    width: 6vw;
    height: 6vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_snslink svg {
    width: calc(31 * var(--base-font, 1) / 10);
    height: calc(31 * var(--base-font, 1) / 10);
  }
}
@media (min-width: 640px) {
  .movie-profile_snslink:hover {
    background-color: rgba(var(--c-true-black), 1);
  }
}
@media (min-width: 640px) {
  .movie-profile_snslink:hover svg {
    fill: rgba(var(--c-true-white), 1);
  }
}

.movie-profile_decoration {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
}
@media (max-width: 639.98px) {
  .movie-profile_decoration {
    height: 26vw;
  }
}
@media (min-width: 640px) {
  .movie-profile_decoration {
    bottom: calc(0 * var(--base-font, 1) / 10);
    height: calc(286 * var(--base-font, 1) / 10);
  }
}
.movie-profile_decoration img {
  width: auto;
  height: 100%;
}

.diagnosis-bnr {
  opacity: 0;
  position: fixed;
  z-index: 100;
  right: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
@media (max-width: 639.98px) {
  .diagnosis-bnr {
    bottom: 13.3333333333vw;
    width: 42vw;
    height: 25.6vw;
  }
}
@media (min-width: 640px) {
  .diagnosis-bnr {
    bottom: calc(200 * var(--base-font, 1) / 10);
    width: calc(210 * var(--base-font, 1) / 10);
    height: calc(128 * var(--base-font, 1) / 10);
  }
}
.diagnosis-bnr.is-active {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: all;
}
.diagnosis-bnr.is-sleep {
  opacity: 0;
  pointer-events: none;
}