@charset "UTF-8";
/* ==========================================================================
  variables
========================================================================== */
:root {
  --color-main: #1D1D1D;
  --color-black: #1D1D1D;
  --color-gray: #F2F2F2;
  --color-dgray: #666666;
  --color-dblue: #475C85;
  --color-yellow: #A39529;
  --padding-sec-pc:160px;
  --padding-sec-sp:77px;
  --padding-sec-side-sp:24px;
  --line-height-default: 1;
  --container-width: 1280px;
  --container-min-width: 976px;
  --header-height-sp: 70px;
}

/* ==========================================================================
   utility
========================================================================== */
/* ---------------------------------------------------------------------------
  show/hide
--------------------------------------------------------------------------- */
/* .spOnly .pcOnly を使用する */
/* ---------------------------------------------------------------------------
  flex
--------------------------------------------------------------------------- */
.u-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.u-flex--pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 640px) {
  .u-flex--pc {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .u-flex--sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.u-flex--wrap.u-flex, .u-flex--wrap.u-flex--pc, .u-flex--wrap.u-flex--sp {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.u-flex--justify-between.u-flex, .u-flex--justify-between.u-flex--pc, .u-flex--justify-between.u-flex--sp {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.u-flex--justify-center.u-flex, .u-flex--justify-center.u-flex--pc, .u-flex--justify-center.u-flex--sp {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.u-flex--flexd-rowr.u-flex, .u-flex--flexd-rowr.u-flex--pc, .u-flex--flexd-rowr.u-flex--sp {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.u-flex--align-end.u-flex, .u-flex--align-end.u-flex--pc, .u-flex--align-end.u-flex--sp {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.u-flex--align-center.u-flex, .u-flex--align-center.u-flex--pc, .u-flex--align-center.u-flex--sp {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* ==========================================================================
  component
========================================================================== */
/* --------------------------------------------------------------------------
  /// template 上書き ///
-------------------------------------------------------------------------- */
#container {
  max-width: inherit;
  min-width: inherit;
}

#container {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#container a:hover span,
#container a:hover p {
  color: inherit;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif !important;
}
#container a:hover img {
  opacity: 1;
}

/* --------------------------------------------------------------------------
  page-ziaino 共通のような base
-------------------------------------------------------------------------- */
.page-ziaino {
  position: relative;
}
.page-ziaino *, .page-ziaino *::before, .page-ziaino *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* --------------------------------------------------------------------------
  c-color
-------------------------------------------------------------------------- */
.c-bg-gray {
  background-color: var(--color-gray);
}

.c-bg-black {
  background-color: var(--color-black);
}

/* --------------------------------------------------------------------------
  c-ap-container c-ap-section
-------------------------------------------------------------------------- */
.c-ap-container {
  max-width: var(--container-width);
  padding-left: clamp(0px, (1320px - 100%) / 2, 20px);
  padding-right: clamp(0px, (1320px - 100%) / 2, 20px);
}
@media screen and (max-width: 640px) {
  .c-ap-container {
    max-width: inherit;
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ap-container {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 640px) {
  .c-ap-section {
    padding-left: var(--padding-sec-side-sp);
    padding-right: var(--padding-sec-side-sp);
  }
}
.c-ap-section.c-ap-section-pd {
  padding-top: var(--padding-sec-pc);
  padding-bottom: var(--padding-sec-pc);
}
@media screen and (max-width: 640px) {
  .c-ap-section.c-ap-section-pd {
    padding-top: var(--padding-sec-sp);
    padding-bottom: var(--padding-sec-sp);
  }
}

.c-ap-section__inner:not(:last-child) {
  padding-bottom: var(--padding-sec-pc);
}
@media screen and (max-width: 640px) {
  .c-ap-section__inner:not(:last-child) {
    padding-bottom: var(--padding-sec-sp);
  }
}

/* ------------------------------------------------
  grid list 3w
------------------------------------------------ */
.c-ap-grid-3w--pc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: minmax(107px, auto);
  gap: 40px;
}
@media screen and (max-width: 640px) {
  .c-ap-grid-3w--pc {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .c-ap-grid-3w__list:not(:nth-last-of-type(1)) {
    margin-bottom: 24px;
  }
}
/* --------------------------------------------------------------------------
  c-ap-under-nav-anchor 下層のアンカーリンクある場合
-------------------------------------------------------------------------- */
.c-ap-under-nav-anchor {
  font-size: 24px;
}
@media screen and (max-width: 640px) {
  .c-ap-under-nav-anchor {
    font-size: 20px;
  }
}
.c-ap-under-nav-anchor a {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 640px) {
  .c-ap-under-nav-anchor a {
    min-height: 91px;
  }
}

/* --------------------------------------------------------------------------
  c-ap-header
-------------------------------------------------------------------------- */
.c-ap-header--wt {
  color: #fff;
}

.c-ap-header--bk, .c-ap-header--wt {
  padding-bottom: 80px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
  .c-ap-header--bk, .c-ap-header--wt {
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }
}
.c-ap-header--bk .c-ap-header__jp, .c-ap-header--wt .c-ap-header__jp {
  font-size: 40px;
  line-height: 1.75;
}
@media screen and (max-width: 640px) {
  .c-ap-header--bk .c-ap-header__jp, .c-ap-header--wt .c-ap-header__jp {
    font-size: 28px;
  }
}
.c-ap-header--bk .c-ap-header__en, .c-ap-header--wt .c-ap-header__en {
  font-size: 20px;
  line-height: 2;
}
@media screen and (max-width: 640px) {
  .c-ap-header--bk .c-ap-header__en, .c-ap-header--wt .c-ap-header__en {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
  c-ap-under-header
-------------------------------------------------------------------------- */
.c-ap-under-header {
  position: relative; /* 乗算グラデーション用 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 348px;
  padding: 0 20px;
  color: #fff;
  font-size: 48px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (max-width: 640px) {
  .c-ap-under-header {
    display: block;
    height: 136.2666666667vw;
    padding: 12.2666666667vw 6.4vw 0;
    font-size: 8.5333333333vw;
  }
}
.c-ap-under-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: rgb(56, 52, 52);
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(56, 52, 52)), color-stop(80%, rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgb(56, 52, 52) 20%, rgba(255, 255, 255, 0) 80%);
}
@media screen and (max-width: 640px) {
  .c-ap-under-header::after {
    background: rgb(56, 52, 52);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(56, 52, 52)), color-stop(80%, rgba(255, 255, 255, 0)));
    background: linear-gradient(180deg, rgb(56, 52, 52) 20%, rgba(255, 255, 255, 0) 80%);
  }
}

.c-ap-under-header-titles {
  position: relative; /* 乗算グラデーション用 */
  z-index: 1; /* 乗算グラデーション用 */
  width: var(--container-width);
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .c-ap-under-header-titles {
    width: 100%;
  }
}

.c-ap-under-header-titles__sub {
  display: block;
  width: 100%;
  font-size: 0.5em;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 640px) {
  .c-ap-under-header-titles__sub {
    font-size: 0.5625em;
    padding-bottom: 2.6666666667vw;
    letter-spacing: 0.04em;
  }
}

.c-ap-under-header-titles__title {
  letter-spacing: 0.2em;
}
@media screen and (max-width: 640px) {
  .c-ap-under-header-titles__title {
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------
  link color => black
------------------------------------------------ */
.c-ap-link-color--bk {
  color: var(--color-black);
}

/* ------------------------------------------------
  link  => underline
------------------------------------------------ */
.c-ap-link-underline--bk {
  color: var(--color-black);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
  link 共通 right
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  link  blank => bk
-------------------------------------------------------------------------- */
.c-ap-link-btn-blank--bk {
  color: var(--color-black);
  border-color: var(--color-black);
  background-color: #fff;
}
.c-ap-link-btn-blank--bk::after {
  content: "";
  display: block;
  position: absolute;
  right: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g id="" data-name="" transform="translate(0 0)"> <path id="" data-name="" fill="%231d1d1d" d="M16,16H0V0H6V1H1V15H15V10h1Z"/><path id="" data-name="" fill="%231d1d1d" d="M.354,7.854l-.707-.707,7.5-7.5.707.707Z" transform="translate(8 0.5)"/><path id="" data-name="" fill="%231d1d1d" d="M16,7H15V1H9V0h7Z"/><rect id="" data-name="" width="16" height="16" fill="none"/></g></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-blank--bk::after {
    right: 18px;
  }
}
@media (hover: hover) {
  .c-ap-link-btn-blank--bk:hover {
    color: #fff;
    background-color: var(--color-black);
  }
  .c-ap-link-btn-blank--bk:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g id="" data-name="" transform="translate(0 0)"> <path id="" data-name="" fill="%23ffffff" d="M16,16H0V0H6V1H1V15H15V10h1Z"/><path id="" data-name="" fill="%23ffffff" d="M.354,7.854l-.707-.707,7.5-7.5.707.707Z" transform="translate(8 0.5)"/><path id="" data-name="" fill="%23ffffff" d="M16,7H15V1H9V0h7Z"/><rect id="" data-name="" width="16" height="16" fill="none"/></g></svg>');
  }
}

/* --------------------------------------------------------------------------
  link  arrow => bk wt
-------------------------------------------------------------------------- */
/* arrow => bk wt */
.c-ap-link-btn-arrow--wt {
  color: #fff;
  border-color: var(--color-black);
  background-color: var(--color-black);
}
.c-ap-link-btn-arrow--wt::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23ffffff" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
}
@media (hover: hover) {
  .c-ap-link-btn-arrow--wt:hover {
    color: var(--color-black);
    background-color: #fff;
  }
  .c-ap-link-btn-arrow--wt:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23var(--color-black)" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
  }
}
.c-ap-link-btn-arrow--wt svg {
  fill: #fff;
}

.c-ap-link-btn-arrow--bk {
  color: var(--color-black);
  border-color: var(--color-black);
  background-color: #fff;
}
.c-ap-link-btn-arrow--bk::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%231d1d1d" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
}
@media (hover: hover) {
  .c-ap-link-btn-arrow--bk:hover {
    color: #fff;
    background-color: var(--color-black);
  }
  .c-ap-link-btn-arrow--bk:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23ffffff" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
  }
}

.c-ap-link-add-arrow--wt::after, .c-ap-link-btn-arrow--wt::after, .c-ap-link-btn-arrow--bk::after {
  content: "";
  display: block;
  position: absolute;
  right: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 7px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .c-ap-link-add-arrow--wt::after, .c-ap-link-btn-arrow--wt::after, .c-ap-link-btn-arrow--bk::after {
    right: 18px;
  }
}

.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow--bk {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding: 1em;
  text-align: center;
  letter-spacing: 0.1em;
  border-width: 1px;
  border-style: solid;
}
.c-ap-link-btn-arrow--textleft.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow--textleft.c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow--textleft.c-ap-link-btn-arrow--bk {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
}
.c-ap-link-btn-arrow--left.c-ap-link-btn-blank--bk::after, .c-ap-link-btn-arrow--left.c-ap-link-btn-arrow--wt::after, .c-ap-link-btn-arrow--left.c-ap-link-btn-arrow--bk::after {
  left: 18px;
  right: auto;
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
}
.c-ap-link-btn-arrow--anchor.c-ap-link-btn-blank--bk::after, .c-ap-link-btn-arrow--anchor.c-ap-link-btn-arrow--wt::after, .c-ap-link-btn-arrow--anchor.c-ap-link-btn-arrow--bk::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--bk {
  border: 1px var(--color-dblue) solid;
  background-color: var(--color-dblue);
}
@media (hover: hover) {
  .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-blank--bk:hover, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--wt:hover, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--bk:hover {
    color: var(--color-dblue);
    background-color: #fff;
  }
  .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-blank--bk:hover::after, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--wt:hover::after, .c-ap-link-btn-arrow-bg--dblue.c-ap-link-btn-arrow--bk:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23475C85" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
  }
}
.c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--bk {
  border: 1px var(--color-dgray) solid;
  background-color: var(--color-dgray);
}
@media (hover: hover) {
  .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-blank--bk:hover, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--wt:hover, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--bk:hover {
    color: var(--color-dgray);
    background-color: #fff;
  }
  .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-blank--bk:hover::after, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--wt:hover::after, .c-ap-link-btn-arrow-bg--dgray.c-ap-link-btn-arrow--bk:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23666666" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
  }
}
.c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--bk {
  border: 1px var(--color-yellow) solid;
  background-color: var(--color-yellow);
}
@media (hover: hover) {
  .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-blank--bk:hover, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--wt:hover, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--bk:hover {
    color: var(--color-yellow);
    background-color: #fff;
  }
  .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-blank--bk:hover::after, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--wt:hover::after, .c-ap-link-btn-arrow-bg--yellow.c-ap-link-btn-arrow--bk:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23A39529" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
  }
}

.c-ap-link-btn-blank--bk, .c-ap-link-btn-arrow--wt, .c-ap-link-btn-arrow--bk {
  -webkit-transition: color 0.3s, background-color 0.3s;
  transition: color 0.3s, background-color 0.3s;
}

/* ------------------------------------------------
  link hover => default
------------------------------------------------ */
.c-ap-link-hover {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .c-ap-link-hover:hover {
    opacity: 0.7;
  }
}

/* ------------------------------------------------
  link hover => SP時希望された場合　default
------------------------------------------------ */
@media (hover: none) {
  .c-ap-link-hover--sp {
    /* hoverが使えないタッチ端末を想定した装飾 */
  }
  .c-ap-link-hover--sp:active {
    opacity: 0.7;
  }
  .c-ap-link-hover--sp:active::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}

/* ------------------------------------------------
  link  hover => underline
------------------------------------------------ */
/* hover => underline */
.c-ap-link-hover-underline {
  display: block;
  position: relative;
}
.c-ap-link-hover-underline::after {
  content: "";
  opacity: 0;
  display: block;
  border-bottom: 1px var(--color-black) solid;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .c-ap-link-hover-underline:hover::after {
    opacity: 1;
  }
}

/* ------------------------------------------------
  link  hover => image zoom up
------------------------------------------------ */
/* hover => image after zoom up */
.c-ap-link-hover-image-after-zoom {
  overflow: hidden;
}
.c-ap-link-hover-image-after-zoom::before {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (hover: hover) {
  .c-ap-link-hover-image-after-zoom:hover::before {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

/* hover => image zoom up */
.c-ap-link-hover-image-zoom {
  overflow: hidden;
}
.c-ap-link-hover-image-zoom img {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (hover: hover) {
  .c-ap-link-hover-image-zoom:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    opacity: 1;
  }
}

/* ------------------------------------------------
  link  add => arrow
------------------------------------------------ */
/* add => arrow */
.c-ap-link-add-arrow--wt {
  position: relative;
}
.c-ap-link-add-arrow--wt::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6px 13px"><path fill="%23fff" d="M970,10124.75a.5.5,0,0,1-.367-.839l5.687-6.161-5.687-6.161a.5.5,0,1,1,.735-.678l6,6.5a.5.5,0,0,1,0,.678l-6,6.5A.5.5,0,0,1,970,10124.75Z" transform="translate(-969.5 -10110.75)" /></svg>');
}

/* add => arrow large */
.c-ap-link-add-arrow-large--wt::after {
  content: "";
  display: block;
  position: absolute;
  right: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 26px;
  height: 55px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/arrow_large_right_wt.svg);
}
@media screen and (max-width: 640px) {
  .c-ap-link-add-arrow-large--wt::after {
    right: 18px;
    width: 7px;
    height: 15px;
    background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/arrow_right_wt.svg);
  }
}

.c-ap-link-add-arrow-large--wt {
  position: relative;
}

/* --------------------------------------------------------------------------
  link  btn => icon
-------------------------------------------------------------------------- */
/* btn => icon */
.c-ap-link-btn-icon--movie::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22px 22px"><path fill="%23000" d="M183.944,11294.885l8.556-5.5-8.556-5.5Zm-5.5,5.5a2.451,2.451,0,0,1-2.444-2.443v-17.111a2.453,2.453,0,0,1,2.444-2.445h17.112a2.453,2.453,0,0,1,2.444,2.445v17.111a2.451,2.451,0,0,1-2.444,2.443Zm0-2.443h17.112v-17.111H178.444Zm0-17.111v0Z" transform="translate(-176 -11278.385)"/></svg>');
  width: 22px;
  height: 22px;
  -webkit-transition: background-image 0.3s;
  transition: background-image 0.3s;
}
@media (hover: hover) {
  .c-ap-link-btn-icon--movie:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22px 22px"><path fill="%23fff" d="M183.944,11294.885l8.556-5.5-8.556-5.5Zm-5.5,5.5a2.451,2.451,0,0,1-2.444-2.443v-17.111a2.453,2.453,0,0,1,2.444-2.445h17.112a2.453,2.453,0,0,1,2.444,2.445v17.111a2.451,2.451,0,0,1-2.444,2.443Zm0-2.443h17.112v-17.111H178.444Zm0-17.111v0Z" transform="translate(-176 -11278.385)"/></svg>');
  }
}

.c-ap-link-btn-icon--pdf::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23000" d="M184.4,11818.6h1.2v-2.4h1.2a1.178,1.178,0,0,0,1.2-1.2v-1.2a1.18,1.18,0,0,0-1.2-1.2h-2.4Zm1.2-3.6v-1.2h1.2v1.2Zm3.6,3.6h2.4a1.178,1.178,0,0,0,1.2-1.2v-3.6a1.18,1.18,0,0,0-1.2-1.2h-2.4Zm1.2-1.2v-3.6h1.2v3.6Zm3.6,1.2h1.2v-2.4h1.2v-1.2h-1.2v-1.2h1.2v-1.2H194Zm-10.8,6.6a2.407,2.407,0,0,1-2.4-2.4v-14.4a2.407,2.407,0,0,1,2.4-2.4h14.4a2.407,2.407,0,0,1,2.4,2.4v14.4a2.407,2.407,0,0,1-2.4,2.4Zm0-2.4h14.4v-14.4H183.2Zm-4.8,7.2a2.407,2.407,0,0,1-2.4-2.4v-16.8h2.4v16.8h16.8v2.4Zm4.8-21.6v0Z" transform="translate(-176 -11806)"/></svg>');
  width: 24px;
  height: 24px;
  -webkit-transition: background-image 0.3s;
  transition: background-image 0.3s;
}
@media (hover: hover) {
  .c-ap-link-btn-icon--pdf:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23fff" d="M184.4,11818.6h1.2v-2.4h1.2a1.178,1.178,0,0,0,1.2-1.2v-1.2a1.18,1.18,0,0,0-1.2-1.2h-2.4Zm1.2-3.6v-1.2h1.2v1.2Zm3.6,3.6h2.4a1.178,1.178,0,0,0,1.2-1.2v-3.6a1.18,1.18,0,0,0-1.2-1.2h-2.4Zm1.2-1.2v-3.6h1.2v3.6Zm3.6,1.2h1.2v-2.4h1.2v-1.2h-1.2v-1.2h1.2v-1.2H194Zm-10.8,6.6a2.407,2.407,0,0,1-2.4-2.4v-14.4a2.407,2.407,0,0,1,2.4-2.4h14.4a2.407,2.407,0,0,1,2.4,2.4v14.4a2.407,2.407,0,0,1-2.4,2.4Zm0-2.4h14.4v-14.4H183.2Zm-4.8,7.2a2.407,2.407,0,0,1-2.4-2.4v-16.8h2.4v16.8h16.8v2.4Zm4.8-21.6v0Z" transform="translate(-176 -11806)"/></svg>');
  }
}

.c-ap-link-btn-icon--glass::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 15px"><path fill="%23000" d="M1057,11827.128v-2.4h12v2.4Zm0-6v-2.4h6v2.4Zm0-6v-2.4h6v2.4Zm22.32,12-4.62-4.62a5.38,5.38,0,0,1-1.575.766,6.009,6.009,0,0,1-1.725.255,6,6,0,1,1,6-6,6.008,6.008,0,0,1-.255,1.725,5.357,5.357,0,0,1-.765,1.575l4.62,4.62Zm-7.92-6a3.585,3.585,0,1,0-2.55-1.05A3.471,3.471,0,0,0,1071.4,11821.128Z" transform="translate(-1057 -11811.528)"/></svg>');
  width: 24px;
  height: 15px;
  -webkit-transition: background-image 0.3s;
  transition: background-image 0.3s;
}
@media (hover: hover) {
  .c-ap-link-btn-icon--glass:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 15px"><path fill="%23fff" d="M1057,11827.128v-2.4h12v2.4Zm0-6v-2.4h6v2.4Zm0-6v-2.4h6v2.4Zm22.32,12-4.62-4.62a5.38,5.38,0,0,1-1.575.766,6.009,6.009,0,0,1-1.725.255,6,6,0,1,1,6-6,6.008,6.008,0,0,1-.255,1.725,5.357,5.357,0,0,1-.765,1.575l4.62,4.62Zm-7.92-6a3.585,3.585,0,1,0-2.55-1.05A3.471,3.471,0,0,0,1071.4,11821.128Z" transform="translate(-1057 -11811.528)"/></svg>');
  }
}

.c-ap-link-btn-icon--movie,
.c-ap-link-btn-icon--pdf,
.c-ap-link-btn-icon--glass {
  color: var(--color-black);
  background-color: #fff;
}
@media (hover: hover) {
  .c-ap-link-btn-icon--movie:hover,
  .c-ap-link-btn-icon--pdf:hover,
  .c-ap-link-btn-icon--glass:hover {
    color: #fff;
    background-color: var(--color-black);
  }
}

.c-ap-link-btn-icon--none {
  padding-left: 15px !important;
  color: var(--color-black);
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-icon--none {
    padding-left: 9px !important;
  }
}
@media (hover: hover) {
  .c-ap-link-btn-icon--none:hover {
    color: #fff;
    background-color: var(--color-black);
  }
}

.c-ap-link-btn-icon--movie,
.c-ap-link-btn-icon--pdf,
.c-ap-link-btn-icon--glass, .c-ap-link-btn-icon--none {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 2.5em;
  font-size: 20px;
  letter-spacing: 0.1em;
  border-top: 1px var(--color-black) solid;
  border-bottom: 1px var(--color-black) solid;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-icon--movie,
  .c-ap-link-btn-icon--pdf,
  .c-ap-link-btn-icon--glass, .c-ap-link-btn-icon--none {
    font-size: 16px;
    padding: 1em 1em 1em 3em;
    letter-spacing: 0.04em;
  }
}

.c-ap-link-btn-icon--movie,
.c-ap-link-btn-icon--pdf,
.c-ap-link-btn-icon--glass {
  position: relative;
}
.c-ap-link-btn-icon--movie::after,
.c-ap-link-btn-icon--pdf::after,
.c-ap-link-btn-icon--glass::after {
  content: "";
  display: block;
  position: absolute;
  left: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-icon--movie::after,
  .c-ap-link-btn-icon--pdf::after,
  .c-ap-link-btn-icon--glass::after {
    left: 10px;
  }
}

.c-ap-link-btn-icon--movie,
.c-ap-link-btn-icon--pdf,
.c-ap-link-btn-icon--glass, .c-ap-link-btn-icon--none {
  -webkit-transition: color 0.3s, background-color 0.3s;
  transition: color 0.3s, background-color 0.3s;
}

/* --------------------------------------------------------------------------
 c-ap-case-links-return 
-------------------------------------------------------------------------- */
.c-ap-case-links-return {
  width: 320px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .c-ap-case-links-return {
    width: 90%;
    min-width: 130px;
  }
}

/* --------------------------------------------------------------------------
  link  btn => 2w

  c-ap-ssi-footer-info-purchaser__links　と同じように
-------------------------------------------------------------------------- */
.c-ap-link-btn-parent2w__links .c-ap-link-btn-parent2w__link {
  width: 49%;
  max-width: 620px;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-parent2w__links .c-ap-link-btn-parent2w__link {
    max-width: inherit;
    width: 100%;
  }
}

.c-ap-link-btn-parent2w__links {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1%;
}
.c-ap-link-btn-parent2w__links .c-ap-link-btn-parent2w__link {
  font-size: 24px;
}
@media screen and (max-width: 640px) {
  .c-ap-link-btn-parent2w__links .c-ap-link-btn-parent2w__link {
    font-size: 20px;
  }
  .c-ap-link-btn-parent2w__links .c-ap-link-btn-parent2w__link:not(:nth-last-of-type(1)) {
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
  c-tag => case ssi_ap_case_interview
-------------------------------------------------------------------------- */
.c-tag--type {
  color: #fff;
  background-color: var(--color-black);
}

.c-tag--interview {
  color: #fff;
  background-color: #A35C29;
}

.c-tag--type, .c-tag--interview {
  padding: 0 1em;
  letter-spacing: 0;
}
@media screen and (max-width: 640px) {
  .c-tag--type, .c-tag--interview {
    padding: 0.25em 0.75em;
    font-size: 2.6666666667vw;
  }
}
.c-tag--type:not(:nth-last-of-type(1)), .c-tag--interview:not(:nth-last-of-type(1)) {
  margin-right: 1em;
}

/* --------------------------------------------------------------------------
  さらに表示ボタン
-------------------------------------------------------------------------- */
/* SP時のみ */
.c-ap-moreview-contents--sp button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

@media screen and (max-width: 640px) {
  .c-ap-moreview-contents--sp {
    position: relative;
    display: grid;
    grid-template-rows: 0.7fr;
    -webkit-transition: grid-template-rows 0.5s ease-out;
    transition: grid-template-rows 0.5s ease-out;
    transition: grid-template-rows 0.5s ease-out, -ms-grid-rows 0.5s ease-out;
  }
  .c-ap-moreview-contents--sp.is-open {
    grid-template-rows: 1fr;
  }
  .c-ap-moreview-contents--sp.is-open .c-ap-moreview-contents__inner::before {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  .c-ap-moreview-contents--sp.is-open .c-ap-moreview-contents__button {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-moreview-contents--sp .c-ap-moreview-contents__inner {
    overflow-y: hidden;
    position: relative;
  }
  .c-ap-moreview-contents--sp .c-ap-moreview-contents__inner::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: rgb(255, 255, 255);
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.c-ap-moreview-contents--sp .c-ap-moreview-contents__button {
  display: none;
}
@media screen and (max-width: 640px) {
  .c-ap-moreview-contents--sp .c-ap-moreview-contents__button {
    opacity: 1;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 160px;
    height: 44px;
    margin: 0 auto;
    font-size: 16px;
    border: 1px var(--color-black) solid;
    background-color: #fff;
  }
  .c-ap-moreview-contents--sp .c-ap-moreview-contents__button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/plus_bk.svg);
  }
}

/* ------------------------------------------------
  js-scroll-area => js.scroll-hint
------------------------------------------------ */
/* scroll hint */
.scroll-hint-icon {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 80px;
  height: 86px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.8);
}

/* スクロールバー */
@media screen and (max-width: 640px) {
  .c-ap-scroll-area-box::-webkit-scrollbar {
    background: #DCDCDC;
    width: 14px;
    height: 14px;
    border-radius: 16px;
  }
  .c-ap-scroll-area-box::-webkit-scrollbar-thumb {
    background-color: #AAAAAA;
    border-radius: 16px;
  }
}
.c-ap-scroll-area-content {
  padding-bottom: 20px;
}
@media screen and (max-width: 640px) {
  .c-ap-scroll-area-content {
    padding-bottom: 20px;
  }
}

/* ------------------------------------------------
  c-ap-splide => js.splide
------------------------------------------------ */
.c-ap-splide.c-ap-pagination--circle .splide__pagination button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
}
.c-ap-splide.c-ap-pagination--circle .splide__pagination .splide__pagination__page {
  border-radius: 100%;
}
.c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow::after {
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/arrow_right_bk.svg);
}
.c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow::after {
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/arrow_right_stroke_wt.svg);
}
.c-ap-splide.c-ap-splide-arrow--bg .splide__arrow::after {
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/icon/arrow_right_wt.svg);
}

.c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow, .c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow, .c-ap-splide.c-ap-splide-arrow--bg .splide__arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  border: 1px var(--color-black) solid;
}
.c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow--prev.splide__arrow, .c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow--prev.splide__arrow, .c-ap-splide.c-ap-splide-arrow--bg .splide__arrow--prev.splide__arrow {
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
}
.c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow::after, .c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow::after, .c-ap-splide.c-ap-splide-arrow--bg .splide__arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  width: 8px;
  height: 15px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 640px) {
  .c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow::after, .c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow::after, .c-ap-splide.c-ap-splide-arrow--bg .splide__arrow::after {
    width: 1.8666666667vw;
    height: 3.7333333333vw;
  }
}
.c-ap-splide.c-ap-splide-arrow--borderbk .splide__arrow svg, .c-ap-splide.c-ap-splide-arrow--borderwt .splide__arrow svg, .c-ap-splide.c-ap-splide-arrow--bg .splide__arrow svg {
  display: none;
}

/* --------------------------------------------------------------------------
  c-ap-graph-position => graph
-------------------------------------------------------------------------- */
.c-ap-graph-position .c-mask {
  width: 100%;
  height: 100%;
}
.c-ap-graph-position .c-mask::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
}
.c-ap-graph-position .c-mask.c-line-yel {
  position: relative;
  z-index: 1;
}
.c-ap-graph-position .c-mask.c-line-yel::before {
  background-color: var(--color-yellow);
}
.c-ap-graph-position .c-mask.c-line-blue::before {
  background-color: var(--color-dblue);
}
.c-ap-graph-position .c-mask.c-line-black::before {
  background-color: #000;
}
.c-ap-graph-position .c-mask.c-line-gray {
  position: relative;
  z-index: 1;
}
.c-ap-graph-position .c-mask.c-line-gray::before {
  background-color: #595757;
}
.c-ap-graph-position .c-mask.c-line-red {
  position: relative;
  z-index: 1;
}
.c-ap-graph-position .c-mask.c-line-red::before {
  background-color: #E2007F;
}
.c-ap-graph-position svg {
  width: 1px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 0;
}

/* --------------------------------------------------------------------------
  img w100
-------------------------------------------------------------------------- */
.c-img-w100 {
  width: 100%;
}

/* ==========================================================================
  component => ssi
========================================================================== */
#container .c-ap-ssi-interview a:hover span,
#container .c-ap-ssi-cases-interview-lists a:hover span {
  color: #fff;
}
#container .c-ap-ssi-interview a:hover .c-ap-ssi-interview__text,
#container .c-ap-ssi-cases-interview-lists a:hover .c-ap-ssi-interview__text {
  color: var(--color-dblue);
}
#container .c-ap-ssi-interview a:hover .c-ap-ssi-interview__name,
#container .c-ap-ssi-cases-interview-lists a:hover .c-ap-ssi-interview__name {
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
  ssi common的な
-------------------------------------------------------------------------- */
.c-ap-grid-3w--pc.c-ap-ssi-footer-info__lists--3w {
  grid-auto-rows: minmax(80px, auto);
}

/* --------------------------------------------------------------------------
  ssi_ap_footer_info_news
-------------------------------------------------------------------------- */
.c-ap-ssi-footer-info-news {
  border-top: 1px var(--color-black) solid;
}
.c-ap-ssi-footer-info-news__newsarea {
  max-width: 948px;
  width: 82%;
  padding-left: 160px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news__newsarea {
    width: 100%;
    max-width: inherit;
    padding-left: 0;
  }
}

.c-ap-ssi-footer-info-news__lists {
  line-height: 2;
  font-size: 16px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news__lists {
    font-size: 14px;
  }
}

.c-ap-ssi-footer-info-news__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news__list {
    display: block;
  }
}
.c-ap-ssi-footer-info-news__list:not(:last-child) {
  padding-bottom: 1em;
}
.c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__time {
  display: inline-block;
  margin-right: 2em;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__time {
    margin-right: 0;
  }
}
.c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__link {
  display: inline-block;
  color: var(--color-black);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__link {
    display: block;
  }
}
.c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__link:hover {
  text-decoration: underline;
}
.c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__link.c-ap-ssi-footer-info-news__link--external {
  position: relative;
}
.c-ap-ssi-footer-info-news__list .c-ap-ssi-footer-info-news__link.c-ap-ssi-footer-info-news__link--external::after {
  content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22%22%20data-name%3D%22%22%20transform%3D%22translate(0%200)%22%3E%20%3Cpath%20id%3D%22%22%20data-name%3D%22%22%20fill%3D%22%231d1d1d%22%20d%3D%22M16%2C16H0V0H6V1H1V15H15V10h1Z%22%2F%3E%3Cpath%20id%3D%22%22%20data-name%3D%22%22%20fill%3D%22%231d1d1d%22%20d%3D%22M.354%2C7.854l-.707-.707%2C7.5-7.5.707.707Z%22%20transform%3D%22translate(8%200.5)%22%2F%3E%3Cpath%20id%3D%22%22%20data-name%3D%22%22%20fill%3D%22%231d1d1d%22%20d%3D%22M16%2C7H15V1H9V0h7Z%22%2F%3E%3Crect%20id%3D%22%22%20data-name%3D%22%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  margin-left: 4px;
}
/* news下のボタン */
.c-ap-ssi-footer-info-news-under .c-ap-ssi-footer-info-news-under__link {
  width: 48%;
  margin: 0;
  padding-top: 85px;
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-news-under .c-ap-ssi-footer-info-news-under__link {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
  ssi_ap_footer_info_purchaser
-------------------------------------------------------------------------- */
.c-ap-ssi-footer-info-purchaser__inner:not(:nth-last-of-type(1)) {
  padding-bottom: 100px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__inner:not(:nth-last-of-type(1)) {
    padding-bottom: 40px;
  }
}

.c-ap-ssi-footer-info-purchaser__notes {
  padding-top: 65px;
  font-size: 18px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__notes {
    padding-top: 24px;
    font-size: 14px;
    text-align: left;
  }
}

.c-ap-ssi-footer-info-purchaser__links .c-ap-ssi-footer-info-purchaser__link, .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink {
  width: 49%;
  max-width: 620px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__links .c-ap-ssi-footer-info-purchaser__link, .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink {
    max-width: inherit;
    width: 100%;
  }
}

/* /// template 上書き /// */
#container .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink a:hover span,
#container .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink a:hover p {
  color: #fff;
}

.c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink {
  height: 349px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink {
    height: 65.6vw;
  }
  .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink:not(:nth-last-of-type(1)) {
    margin-bottom: 6.4vw;
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink.c-ap-ssi-footer-info-purchaser-2week a::before {
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/ssi/ssi_ap_footer_info_purchaser/bg_experience_pc@2x.webp);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink.c-ap-ssi-footer-info-purchaser-2week a::before {
    background-image: url(/hvac-cc/biz/products/ziaino/img/common/ssi/ssi_ap_footer_info_purchaser/bg_experience_sp@2x.webp);
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink.c-ap-ssi-footer-info-purchaser-contact a::before {
  background-image: url(/hvac-cc/biz/products/ziaino/img/common/ssi/ssi_ap_footer_info_purchaser/bg_contact_pc@2x.webp);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink.c-ap-ssi-footer-info-purchaser-contact a::before {
    background-image: url(/hvac-cc/biz/products/ziaino/img/common/ssi/ssi_ap_footer_info_purchaser/bg_contact_sp@2x.webp);
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink a {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-left: 60px;
  padding-right: 60px;
  color: #fff;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink a {
    padding-left: 24px;
    padding-right: 30px;
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks .c-ap-ssi-footer-info-purchaser__imagelink a::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.c-ap-ssi-footer-info-purchaser__imagelinks h3 {
  width: 100%;
  font-size: 30px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks h3 {
    font-size: 20px;
    letter-spacing: 0.04em;
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks h3 span {
  font-size: 1.333em;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks h3 span {
    letter-spacing: 0.04em;
  }
}
.c-ap-ssi-footer-info-purchaser__imagelinks p {
  padding-top: 2em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__imagelinks p {
    padding-top: 1em;
    font-size: 14px;
    letter-spacing: 0.04em;
  }
}

.c-ap-ssi-footer-info-purchaser__links {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1%;
}
.c-ap-ssi-footer-info-purchaser__links .c-ap-ssi-footer-info-purchaser__link {
  font-size: 24px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-purchaser__links .c-ap-ssi-footer-info-purchaser__link {
    font-size: 20px;
  }
  .c-ap-ssi-footer-info-purchaser__links .c-ap-ssi-footer-info-purchaser__link:not(:nth-last-of-type(1)) {
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
  ssi_ap_footer_info_inuse
-------------------------------------------------------------------------- */
.c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--subtitle {
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--subtitle {
    font-size: 12px;
  }
}
.c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--title {
  padding: 0.3em 0;
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--title {
    font-size: 16px;
  }
}
.c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--subtext {
  font-size: 10px;
}

.c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--subtitle, .c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--title, .c-ap-ssi-footer-info-inuse__custom-list .c-ap-ssi-footer-info-inuse__custom-list--subtext {
  display: block;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
  ssi_ap_footer_info_constructioncompany
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  ssi_ap_case_fixed_nav
-------------------------------------------------------------------------- */
/* 閉じるボタンSP */
.c-ap-ssi-fixed-nav__close--sp {
  display: none;
  right: -8px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__close--sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/* 閉じるボタンPC */
.c-ap-ssi-fixed-nav__close--pc {
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__close--pc {
    display: none;
  }
}

.c-ap-ssi-fixed-nav__close--sp, .c-ap-ssi-fixed-nav__close--pc {
  /* reset */
  padding: 0;
  border: none;
  outline: none;
}

.c-ap-ssi-fixed-nav__close--sp, .c-ap-ssi-fixed-nav__close--pc {
  position: absolute;
  top: -8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 1px #fff solid;
  background-color: var(--color-black);
}
/* js */
.c-ap-ssi-fixed-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 16px;
  bottom: 180px;
  -webkit-transition: opacity 0.3s, visibility 0.3s, pointer-events 0.3s;
  transition: opacity 0.3s, visibility 0.3s, pointer-events 0.3s;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav {
    right: auto;
    left: 0;
    bottom: 0;
  }
}
.c-ap-ssi-fixed-nav .shadow::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(3px) translateY(3px);
          transform: translateX(3px) translateY(3px);
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 102, 102, 0.7);
  -webkit-filter: blur(6px);
          filter: blur(6px);
  mix-blend-mode: multiply;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav .shadow::after {
    -webkit-transform: translateX(0px) translateY(-2px);
            transform: translateX(0px) translateY(-2px);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    background-color: rgba(102, 102, 102, 0.5);
  }
}
.c-ap-ssi-fixed-nav.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.c-ap-ssi-fixed-nav.is-show.is-fixed {
  position: fixed;
  right: 16px;
  bottom: 78px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav.is-show.is-fixed {
    right: 0;
    bottom: 0;
  }
}
.c-ap-ssi-fixed-nav.is-hide {
  display: none;
}

.c-ap-ssi-fixed-nav {
  z-index: 4;
  width: 352px;
  height: auto;
  display: none;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav {
    z-index: 7;
    height: 80px;
    width: 80%;
    display: block;
  }
}

.c-ap-ssi-fixed-nav__lists {
  overflow: hidden;
  border: 2px #fff solid;
  border-radius: 10px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__lists {
    overflow: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: none;
    border: 0;
    border-radius: 0;
  }
}

.c-ap-ssi-fixed-nav__list {
  height: 100px;
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list {
    overflow: hidden;
    width: 100%;
    height: 80px;
    font-size: 14px;
    line-height: 1.428;
    border-radius: 10px 10px 0 0;
    border: 1px solid #fff;
  }
}
@media screen and (min-width: 641px) {
  .c-ap-ssi-fixed-nav__list:not(:nth-last-of-type(1)) {
    border-bottom: 2px #fff solid;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list:not(:nth-last-of-type(1)) {
    border-right: none;
  }
}
.c-ap-ssi-fixed-nav__list.c-ap-ssi-fixed-nav__list--2week .c-ap-ssi-fixed-nav__icon {
  height: 59px;
}
.c-ap-ssi-fixed-nav__list.c-ap-ssi-fixed-nav__list--contact .c-ap-ssi-fixed-nav__icon {
  height: 31px;
}
@media screen and (min-width: 641px) {
  .c-ap-ssi-fixed-nav__list.c-ap-ssi-fixed-nav__list--contact a {
    border-top: none;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list.c-ap-ssi-fixed-nav__list--contact a {
    border-left: none;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__icon {
    display: block;
    width: 50px;
  }
}
.c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__arrow {
  display: inline-block;
  position: absolute;
  right: 37px;
  top: 45%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__arrow {
    top: 44%;
    right: 25px;
  }
}
.c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__arrow svg {
  fill: #fff;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__arrow svg {
    width: 10px;
  }
}
@media screen and (max-width: 350px) {
  .c-ap-ssi-fixed-nav__list .c-ap-ssi-fixed-nav__text {
    width: 60%;
  }
}
.c-ap-ssi-fixed-nav__list a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  background-color: var(--color-dgray);
  width: 100%;
  height: 100%;
  padding: 0 1em;
}
@media (hover: hover) {
  .c-ap-ssi-fixed-nav__list a:hover .c-ap-ssi-fixed-nav__arrow {
    -webkit-transform: translateY(-50%) translateX(3px);
            transform: translateY(-50%) translateX(3px);
  }
  .c-ap-ssi-fixed-nav__list a:hover .c-ap-ssi-fixed-nav__arrow svg {
    fill: var(--color-dgray);
  }
  .c-ap-ssi-fixed-nav__list a:hover::before {
    background-color: #fff;
  }
}
.c-ap-ssi-fixed-nav__list a::before {
  content: "";
  display: block;
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px #fff solid;
  background-color: var(--color-dgray);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-fixed-nav__list a::before {
    right: 18px;
    width: 24px;
    height: 24px;
  }
}

.c-ap-ssi-fixed-nav.is-move {
  width: 100px;
  cursor: pointer;
}
.c-ap-ssi-fixed-nav.is-move .c-ap-ssi-fixed-nav__list-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  background-color: var(--color-dgray);
  width: 100%;
  height: 100%;
  text-align: center;
}

.c-ap-ssi-fixed-nav .c-ap-ssi-fixed-nav--all {
  display: block;
}
.c-ap-ssi-fixed-nav .c-ap-ssi-fixed-nav--small {
  display: none;
}
.c-ap-ssi-fixed-nav.is-move .c-ap-ssi-fixed-nav--all {
  display: none;
}
.c-ap-ssi-fixed-nav.is-move .c-ap-ssi-fixed-nav--small {
  display: block;
}
.c-ap-ssi-fixed-nav.is-move .c-ap-ssi-fixed-nav__close--pc {
  display: none;
}

/* --------------------------------------------------------------------------
  ssi_ap_case_interview
-------------------------------------------------------------------------- */
/* c-ap-container の上書き */
.c-ap-ssi-new-interview-area .c-ap-container {
  padding-left: clamp(0px, (1420px - 100%) / 2, 70px);
  padding-right: clamp(0px, (1420px - 100%) / 2, 70px);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-new-interview-area .c-ap-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.c-ap-ssi-interview {
  position: relative;
}

.c-ap-ssi-interview__inner {
  height: 100%;
  background-color: #fff;
}
.c-ap-ssi-interview__inner a {
  display: block;
  height: 100%;
}

.c-ap-ssi-interview__photo {
  overflow: hidden;
  width: 100%;
  height: 240px;
}
.c-ap-ssi-interview__photo img {
  width: 100%;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-ap-ssi-interview__texts {
  padding: 24px;
}

.c-ap-ssi-interview__text {
  padding: 0.5em 0;
  color: var(--color-dblue);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-interview__text {
    font-size: 20px;
  }
}

.c-ap-ssi-interview__name {
  color: var(--color-black);
  font-size: 16px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-interview__name {
    font-size: 18px;
  }
}

/* splide => ssi_ap_case_interview */
.c-ap-ssi-interview .c-ap-splide .splide__slide {
  background-color: #fff;
}
.c-ap-ssi-interview .c-ap-splide .splide__arrow {
  width: 38px;
  height: 38px;
  background-color: var(--color-black);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-interview .c-ap-splide .splide__arrow {
    top: 53%;
    width: 8vw;
    height: 8vw;
  }
}
.c-ap-ssi-interview .c-ap-splide .splide__arrow.splide__arrow--prev {
  left: -51px;
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-interview .c-ap-splide .splide__arrow.splide__arrow--prev {
    left: -13px;
  }
}
.c-ap-ssi-interview .c-ap-splide .splide__arrow.splide__arrow--next {
  right: -51px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-interview .c-ap-splide .splide__arrow.splide__arrow--next {
    right: -13px;
  }
}

/* --------------------------------------------------------------------------
  ssi_ap_case**_interview_lists　カテゴリ別　一覧
  （事例詳細ページの上部）
-------------------------------------------------------------------------- */
.c-ap-ssi-cases-interview-lists {
  padding-top: 77px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-container {
  padding-bottom: 77px;
  border-bottom: 1px #ccc solid;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-container {
    padding-bottom: 60px;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-cases-interview-lists__lists {
  display: grid;
  grid-template-columns: min(22.7%, 290px) min(22.7%, 290px) min(22.7%, 290px) min(22.7%, 290px);
  grid-auto-rows: auto;
  gap: 40px 3.06%;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-cases-interview-lists__lists {
    grid-template-columns: 47% 47%;
    gap: 10.6666666667vw 5.3333333333vw;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__texts {
  padding: 16px 0 0;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__tags .c-tag--type,
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__tags .c-tag--interview {
    display: block;
    max-width: 26.6666666667vw;
    width: 70%;
    margin-right: 0;
    text-align: center;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__tags .c-tag--interview {
    margin-top: 0.8vw;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__text {
  padding: 0.5em 0;
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__text {
    font-size: 15px;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__name {
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  .c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__name {
    font-size: 11px;
  }
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__photo {
  height: auto;
  -o-object-fit: none;
     object-fit: none;
}
.c-ap-ssi-cases-interview-lists .c-ap-ssi-interview__photo img {
  height: auto;
}

/* ==========================================================================
  component => ssi => parts c-ap-ssi-site-nav
========================================================================== */
.c-ap-site-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  overflow: hidden;
  margin: 0;
  z-index: 5;
  pointer-events: none;
}
.c-ap-site-nav.js-active {
  pointer-events: auto;
}
.c-ap-site-nav.js-active::before {
  content: "";
  position: absolute;
  display: block;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.6);
}
.c-ap-site-nav__inner {
  position: relative;
  max-width: 976px;
  width: 100%;
  margin: auto;
}
.c-ap-site-nav__btn {
  position: absolute;
  z-index: 6;
  height: 70px;
  width: 70px;
  border-radius: 9999px;
  border: 3px solid #475c85;
  background-color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  pointer-events: auto;
  font-weight: bold !important;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.c-ap-site-nav__btn--open {
  position: absolute;
  top: 40px;
  right: -133px;
  color: #475c85;
  font-size: 10px;
  font-weight: 500;
  -webkit-box-shadow: 0 3px 6px;
          box-shadow: 0 3px 6px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 1240px) {
  .c-ap-site-nav__btn--open {
    right: 0;
  }
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__btn--open {
    top: 10px;
    right: 10px;
  }
}
.c-ap-site-nav__btn--open:hover {
  background-color: #475c85;
  border: 3px solid #fff;
  color: #fff;
  -webkit-box-shadow: 0 3px 6px #333;
          box-shadow: 0 3px 6px #333;
}
.c-ap-site-nav__btn--open:hover::before {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.c-ap-site-nav__btn--open::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 7px;
  background-size: 30px 7px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="8" viewBox="0 0 30 8"><g transform="translate(12157.117 20754.5)"><line x1="30" transform="translate(-12157.117 -20747)" fill="none" stroke="%23475c85" stroke-width="1.5"/><line x2="30" transform="translate(-12157.117 -20754)" fill="none" stroke="%23475c85" stroke-width="1.5"/></g></svg>');
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-ap-site-nav__btn--close {
  top: 40px;
  right: 20px;
  bottom: initial;
  color: #475c85;
  font-size: 12px;
  font-weight: 500;
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__btn--close {
    background: initial;
    border: none;
    top: 25px;
    right: initial;
    left: 1%;
    display: none;
    position: fixed;
  }
}
@media only screen and (min-width: 640px) {
  .c-ap-site-nav__btn--close.c-ap-site-nav__btn--close-pcNodisplay {
    display: none;
  }
}
.c-ap-site-nav__btn--close.c-ap-site-nav__btn--close-spNodisplay {
  position: sticky;
  right: initial;
  left: 100%;
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__btn--close.c-ap-site-nav__btn--close-spNodisplay {
    display: none !important;
  }
}
.c-ap-site-nav__btn--close::before {
  content: "";
  display: inline-block;
  width: 33px;
  height: 10px;
  background-size: 33px 10px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33.289' height='10.957' viewBox='0 0 33.289 10.957'><g transform='translate(0.066 34249.83)'><line x1='33' y2='10' transform='translate(0.078 -34249.352)' fill='none' stroke='%23475c85' stroke-width='1'/><line x2='33' y2='10' transform='translate(0.078 -34249.352)' fill='none' stroke='%23475c85' stroke-width='1'/></g></svg>");
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__btn--close::before {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.707' height='30.707' viewBox='0 0 30.707 30.707'><g id='menu' transform='translate(12190.471 20746.416)'><g id='btn' transform='translate(-12190.117 -20746.063)'><g id='border' transform='translate(0 0)'><line id='線_1682' data-name='線 1682' x1='30' y2='30' fill='none' stroke='%23fff' stroke-width='1'/><line id='線_1684' data-name='線 1684' x2='30' y2='30' fill='none' stroke='%23fff' stroke-width='1'/></g></g></g></svg>");
  }
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__btn--close .c-ap-site-nav__btn-text {
    display: none;
  }
}
.c-ap-site-nav__btn-text {
  margin-top: 3px;
}
.c-ap-site-nav__area {
  max-width: 500px;
  height: 100vh;
  overflow-y: scroll;
  width: 100%;
  padding: 0 24px 60px;
  margin-left: auto;
  margin-right: 0;
  background-color: rgba(71, 92, 133, 0.9);
  -webkit-transition: 0.55s ease;
  transition: 0.55s ease;
  visibility: hidden;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  z-index: 5;
  position: relative;
  pointer-events: none;
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__area {
    width: 80%;
    height: calc(100vh + 24px);
    padding: 30px 24px 60px;
  }
}
.c-ap-site-nav__area.js-active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}
.c-ap-site-nav__ul {
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh + 120px);
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__ul {
    overflow-y: scroll;
  }
}
.c-ap-site-nav__ul-li {
  position: relative;
}
.c-ap-site-nav__ul-li::after {
  content: "";
  display: block;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 4px;
  height: 9px;
  background-size: 4px 9px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4.874" height="9.664" viewBox="0 0 4.874 9.664"><path id="arrow" d="M750,10550.25l4,4.5-4,4.5" transform="translate(-749.626 -10549.918)" fill="none" stroke="%23fff" stroke-linejoin="round" stroke-width="1"/></svg>');
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.c-ap-site-nav__ul-li a {
  display: block;
  color: #fff !important;
  border-bottom: 1px solid #fff;
  padding: 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__ul-li a {
    padding: 10px 15px;
  }
}
.c-ap-site-nav__ul-li a:hover {
  opacity: 0.7;
}
.c-ap-site-nav__ul-li--more {
  border: none;
  max-width: 132px;
  margin: 15px auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-ap-site-nav__ul-li--more:hover {
  opacity: 0.7;
}
.c-ap-site-nav__ul-li--more::after {
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
  width: 4px;
  height: 9px;
  background-size: 4px 9px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4.874" height="9.664" viewBox="0 0 4.874 9.664"><path id="arrow" d="M750,10550.25l4,4.5-4,4.5" transform="translate(-749.626 -10549.918)" fill="none" stroke="%23fff" stroke-linejoin="round" stroke-width="1"/></svg>');
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.c-ap-site-nav__ul-li--bnr {
  color: #666;
  padding: initial;
  margin-top: 15px;
}
.c-ap-site-nav__ul-li--bnr::after {
  content: none;
}
.c-ap-site-nav__ul-li--bnr a {
  padding: 16px;
  background-color: #fff;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 640px) {
  .c-ap-site-nav__ul-li--bnr a {
    padding: 8px 16px;
  }
}
.c-ap-site-nav__ul-li--bnr a:hover {
  color: #666 !important;
}
.c-ap-site-nav__ul-li--bnr a:hover span {
  color: #666 !important;
}
.c-ap-site-nav__ul-li--bnr a::before {
  content: "";
  display: block;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px #666 solid;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.c-ap-site-nav__ul-li__link {
  color: #fff !important;
}
.c-ap-site-nav__ul-li--bnr-text {
  color: #666;
  font-size: 16px;
}
.c-ap-site-nav__ul-li--bnr-arrow {
  content: "";
  display: block;
  position: absolute;
  right: 21px;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.c-ap-site-nav__ul-li--bnr-arrow svg {
  width: 7px;
  height: 3px;
}
.c-ap-site-nav__more-btn {
  background-color: #677899;
  color: #fff;
  padding: 7px 10px;
  border: none;
  max-width: 132px;
  margin: 0 auto;
  width: 100%;
  border-radius: 9999px;
}
.c-ap-site-nav__icon {
  margin-right: 10px;
}
/* ===== 移管対応(ziaino独立) ===== */
/* SP(touch)時、共有ヘッダーのPC用共通ナビ(titlenavigation holdings-titlenav)がSPに灰帯として漏れるため非表示。
   PC(no-touch)では表示のまま。旧holdings-header-footer.css非読込による崩れの補正(fan §8-8と同type)。 */
.touch .page-ziaino .titlenavigation.holdings-titlenav { display: none; }

/* デスクトップ窓縮小時の幅方針＝旧live一致（ユーザー決定 2026-07-07）。
   旧サイトは biz style.css の #page{min-width:980px} により、非タッチ(デスクトップ)では
   980px固定＋横スクロール、SP(≤640・touch)のみ流動、という viewport固定型（メタは width=device-width で
   SP流動を担保しつつ、PC幅は CSS min-width で固定＝メタでなくCSSで実現）。新ziainoは biz style.css 非読込で
   解放され流動化していたため、同じ #page min-width で旧挙動に揃える。
   ★#container でなく #page に付与＝共有ヘッダー(holdings-header)も含めページ全体を一律980にする
   （#container だけだと新共通ヘッダーが流動し「ヘッダーだけレスポンシブ／本文980固定」の不一致になる）。
   セレクタは #page 自身が .page-ziaino を持つため複合 `#page.page-ziaino`（`.page-ziaino #page`は不発）。
   touch(実機SP)には付与せず従来どおり流動。v3固定幅wrapper(title_block_in02/breadcrumb_in=976px)は980内に収まる。
   ※fanは #container 方式(ヘッダー流動)＝挙動差あり。統一するならfanも #page 方式へ（申し送り）。 */
.no-touch #page.page-ziaino { min-width: 980px; }

/* SP(touch)時の横オーバーフロー対策（ユーザー報告 2026-07-08）。
   旧サイトはSSI(サーバ側includeで同期挿入)だったが、新ziainoはヘッダー/フッター/ナビ等を
   JS include(data-include)で非同期注入するため、注入完了前＝レイアウト確定前の一瞬に
   コンテンツがビューポート幅を超えて横スクロール(オーバーフロー)が出る。
   ★overflow:hidden ではなく overflow-x:clip を使う理由：
     clip はスクロールコンテナを生成しないため、コラム等で使う position:sticky(縦)を壊さない。
     hidden は新スクロールコンテナを作りstickyの吸着基準が変わって破綻するため使用不可(ユーザー指示)。
   overflow-y は visible のまま(clip×visibleは有効な組合せ)＝縦stickyの吸着挙動は維持。
   スコープは .touch(SP/タブレット)限定＝問題の無い no-touch(PC)には一切影響させない。
   ※Safari<16 等 clip 非対応環境では visible にフォールバック(=従来どおり)＝無害。 */
.touch #page.page-ziaino { overflow-x: clip; }

/* <th> のブラウザ既定の復元（社内FB 2026-07-28：事例/インタビューページの表のカテゴリ名が左寄せ）。
   原因＝新サイト共通 reset.css 冒頭の
     *:where(:not(html,iframe,…)) { all: unset; display: revert }
   により <th> のブラウザ既定 text-align:center / vertical-align:middle が消え、
   親から left・baseline を継承して左寄せ・上寄せ表示になる。
   旧サイトは reset.css を読まず、th の揃えをブラウザ既定に任せていた（v2/v3 common.css にth指定なし）ため
   中央揃えで表示されていた＝これは移管起因の回帰。
   ★reset.css は biz/assets 共通(編集禁止領域)かつ all:unset を外すと影響が広範すぎるため、
     ziaino 側で「失われた既定値だけ」を復元する方針（ユーザー判断 2026-07-28）。
   ・font-weight:bold は復元しない＝現行の細字の見た目を維持（ユーザー判断）。
   ・スコープを .page-ziaino に置くことで、今後移管する表にも自動で効き対応漏れが出ない。
   ・詳細度(0,1,1)のため、自前で揃えを持つ表は影響を受けない：
       column table01(center) / tenume sec02・sec05 data表(right) / tenume/sim table--sim(center)
   ・tenume の .table_default は旧サイトでは biz style.css の
     table.table_default th{text-align:center} が効いていた（新ziainoは style.css 非読込）ため、
     このルールで中央揃えに戻る＝旧サイト準拠。 */
.page-ziaino th { text-align: center; vertical-align: middle; }