@charset "UTF-8";

.main-container {
  --font-zen-maru: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-family: var(--font-zen-maru);
  --color-black: #211815;
}

/* --------------------------------------------------------------------------
LINEUP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .cm-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: calc(80 / var(--font) * 1rem) calc(0 / var(--font) * 1rem);
    margin-top: calc(78 / var(--font) * 1rem);
  }
  .cm-list-item {
    max-width: calc(735 / var(--font) * 1rem);
    width: 100%;
  }
  .cm-list-item--gray {
    --movie-ico: var(--c-gray-999);
  }
  .cm-list-item--border {
  }
  .cm-list-card {
  }
  .cm-list-card__inner {
  }
  .cm-list-card-img {
    display: block;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .cm-list-card-img {
    background-color: #fff;
    border: solid calc(6 / var(--font) * 1rem) #fff;
    filter: drop-shadow(calc(20 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) calc(28 / var(--font) * 1rem) #aeaeae);
    border-radius:calc(8 / var(--font) * 1rem);
  }
  .cm-list-card-img .mc-img{
    border-radius:calc(8 / var(--font) * 1rem);
    overflow:hidden;
  }
  .cm-list-card-img img {
    transition: var(--transition-all);
  }
  .cm-list-card-img:hover img {
    transform: scale(1.1);
  }
  .cm-list-card-img-ico {
    background: url("/assets_v2/img/company/profile/statement/ico_movie.svg") no-repeat center / contain;
    width: calc(84 / var(--font) * 1rem);
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
  }
  .cm-list-card-read {
    margin-top: calc(35 / var(--font) * 1rem);
  }
  .cm-list-card-read-text {
  }
  .cm-list-card-read-text .mc-text {
    font-size: calc(20 / var(--font) * 1rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .cm-list-card-read-link {
    margin-top: calc(8 / var(--font) * 1rem);
  }
  .cm-list-card-read-text-link-text {
    display: flex;
  }
  .cm-list-card-read-text-link-text:hover::after {
    transform: translateX(calc(4 / var(--font) * 1rem));
  }
  .cm-list-card-read-text-link-text::after {
    content: "";
    display: block;
    width: calc(24 / var(--font) * 1rem);
    aspect-ratio: 1 / 1;
    background: url("/assets_v2/img/common/link_ico_arrow.svg") no-repeat center / contain;
    margin-left: calc(17 / var(--font) * 1rem);
    transition: var(--transition-all);
  }
  .cm-list-card-read-text-link-text__label {
    font-size: calc(16 / var(--font) * 1rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .introduction-btn-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: calc(80 / var(--font) * 1rem);
  }
  .introduction-youtube-btn {
    max-width: calc(480 / var(--font) * 1rem);
    width: 100%;
  }
  .introduction-top-btn {
    margin-top: calc(24 / var(--font) * 1rem);
    max-width: calc(380 / var(--font) * 1rem);
    width: 100%;
  }
  .introduction-youtube-btn .mc-button-text__label {
    font-weight: bold;
    letter-spacing: 0;
  }
  .cm-modal-content__body.mc-modal-content__body {
    padding-bottom: calc(42 / var(--font) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .cm-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: calc(40 / var(--font) * 1rem) calc(0 / var(--font) * 1rem);
    margin-top: calc(40 / var(--font) * 1rem);
  }
  .cm-list-item {
    max-width: calc(232 / var(--font) * 1rem);
    width: 100%;
  }
  .cm-list-item--gray {
    --movie-ico: var(--c-gray-999);
  }
  .cm-list-item--border {
  }
  .cm-list-card {
  }
  .cm-list-card__inner {
  }
  .cm-list-card-img {
    display: block;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }
  .cm-list-card-img {
    background-color: #fff;
    border: solid calc(3 / var(--font) * 1rem) #fff;
    filter: drop-shadow(calc(6 / var(--font) * 1rem) calc(6 / var(--font) * 1rem) calc(8 / var(--font) * 1rem) #aeaeae);
    border-radius:calc(2.6 / var(--font) * 1rem);
  }
  .cm-list-card-img .mc-img{
    border-radius:calc(2.6 / var(--font) * 1rem);
    overflow:hidden;
  }
  .cm-list-card-img img {
    transition: var(--transition-all);
  }
  .cm-list-card-img:hover img {
    transform: scale(1.1);
  }
  .cm-list-card-img-ico {
    background: url("/assets_v2/img/company/profile/statement/ico_movie.svg") no-repeat center / contain;
    width: calc(26 / var(--font) * 1rem);
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
  }
  .cm-list-card-read {
    margin-top: calc(12 / var(--font) * 1rem);
  }
  .cm-list-card-read-text {
  }
  .cm-list-card-read-text .mc-text {
    font-size: calc(10 / var(--font) * 1rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .cm-list-card-read-link {
    margin-top: calc(8 / var(--font) * 1rem);
  }
  .cm-list-card-read-text-link-text {
    display: flex;
  }
  .cm-list-card-read-text-link-text:hover::after {
    transform: translateX(calc(4 / var(--font) * 1rem));
  }
  .cm-list-card-read-text-link-text::after {
    content: "";
    display: block;
    width: calc(24 / var(--font) * 1rem);
    aspect-ratio: 1 / 1;
    background: url("/assets_v2/img/common/link_ico_arrow.svg") no-repeat center / contain;
    margin-left: calc(17 / var(--font) * 1rem);
    transition: var(--transition-all);
  }
  .cm-list-card-read-text-link-text__label {
    font-size: calc(16 / var(--font) * 1rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .introduction-btn-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: calc(80 / var(--font) * 1rem);
  }
  .introduction-youtube-btn {
    max-width: calc(480 / var(--font) * 1rem);
    width: 100%;
  }
  .introduction-top-btn {
    margin-top: calc(24 / var(--font) * 1rem);
    max-width: calc(380 / var(--font) * 1rem);
    width: 100%;
  }
  .introduction-youtube-btn .mc-button-text__label {
    font-weight: bold;
    letter-spacing: 0;
  }
  .cm-modal-content__body.mc-modal-content__body {
    padding-bottom: calc(42 / var(--font) * 1rem);
  }
}

/* --------------------------------------------------------------------------
STYLE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .section__title {
    max-width: calc(200 / var(--font) * 1rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .section__title__in {
    padding-bottom: calc(20 / var(--font) * 1rem);
    border-bottom: calc(2 / var(--font) * 1rem) solid var(--color-black);
    font-size: calc(40 / var(--font) * 1rem);
    font-weight: 700;
    line-height: calc(65 / 40);
    text-align: center;
    letter-spacing: 0.1em;
    display: block;
    position: relative;
  }
}

@media all and (max-width: 767px) {
  .section__title {
    max-width: calc(125 / var(--font) * 1rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .section__title__in {
    padding-bottom: calc(15 / var(--font) * 1rem);
    border-bottom: calc(2 / var(--font) * 1rem) solid var(--color-black);
    font-size: calc(16 / var(--font) * 1rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0em;
    display: block;
    position: relative;
  }
}


/* --------------------------------------------------------------------------
MAINVISUAL
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .mainvisual {
  }
}
@media all and (max-width: 767px) {
  .mainvisual {
  }
}

/* --------------------------------------------------------------------------
INTRO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .intro-section {
    margin-top: calc(120 / var(--font) * 1rem);
  }
  .intro__text {
    display: block;
    font-size: calc(20 / var(--font) * 1rem);
    font-weight: 700;
    line-height: calc(69 / 20);
    text-align: center;
    letter-spacing: 0.1em;
  }
}
@media all and (max-width: 767px) {
  .intro-section {
    margin-top: calc(60 / var(--font) * 1rem);
  }
  .intro__text {
    display: block;
    font-size: calc(11 / var(--font) * 1rem);
    font-weight: 700;
    line-height: calc(34 / 11);
    text-align: center;
    letter-spacing:0.1em;
  }
}

/* --------------------------------------------------------------------------
CM
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .cm-section {
    margin-top: calc(120 / var(--font) * 1rem);
  }
  .cm-section__body{
    padding-bottom: calc(270 / var(--font) * 1rem);
  }
}
@media all and (max-width: 767px) {
  .cm-section {
    margin-top: calc(50 / var(--font) * 1rem);
  }
  .cm-section__body{
    padding-bottom: calc(85 / var(--font) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  FADE-IN
-------------------------------------------------------------------------- */
.fadein-contents {
  opacity: 0;
  transform: translateY(calc(40 / var(--font) * 1rem));
  transition: all 0.7s ease;
}
.fadein-contents.fadein-active {
  opacity: 1;
  transform: translateY(0);
}