/* ------------------------------
    mixin
------------------------------ */
/* ------------------------------
    products
------------------------------ */
#page_products #sec_products .acd, #page_products #sec_products .link,
#page_products_wc #sec_products .acd,
#page_products_wc #sec_products .link {
  border-bottom: 1px solid #aaa;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  padding: 0.5em 1em;
  margin-top: 3rem;
}
#page_products #sec_products .acd,
#page_products_wc #sec_products .acd {
  padding-left: 3em;
  cursor: pointer;
}
#page_products #sec_products .acd .ico,
#page_products_wc #sec_products .acd .ico {
  position: absolute;
  left: 1em;
  top: 50%;
  translate: 0 -50%;
  width: 1em;
  height: 1em;
}
#page_products #sec_products .acd .ico::before, #page_products #sec_products .acd .ico::after,
#page_products_wc #sec_products .acd .ico::before,
#page_products_wc #sec_products .acd .ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 2px;
  background: #222;
  transition: rotate 0.3s ease;
}
#page_products #sec_products .acd .ico::after,
#page_products_wc #sec_products .acd .ico::after {
  rotate: 90deg;
}
#page_products #sec_products .acd.is-open .ico::after,
#page_products_wc #sec_products .acd.is-open .ico::after {
  rotate: 180deg;
}
#page_products #sec_products .link a,
#page_products_wc #sec_products .link a {
  padding-left: 2em;
}
#page_products #sec_products .link a::before,
#page_products_wc #sec_products .link a::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  translate: 0 -50%;
  width: 0.6em;
  height: 0.6em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  rotate: 45deg;
}
#page_products #sec_products .link a[target=_blank]::before,
#page_products_wc #sec_products .link a[target=_blank]::before {
  background: url("../img/common/ico_blank.svg") no-repeat center/contain;
  border: none;
  rotate: 0deg;
  width: 1em;
  height: 1em;
}
#page_products #sec_products .acd_item,
#page_products_wc #sec_products .acd_item {
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .acd_item,
  #page_products_wc #sec_products .acd_item {
    padding-bottom: 6rem;
  }
}
#page_products #sec_products .item,
#page_products_wc #sec_products .item {
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item,
  #page_products_wc #sec_products .item {
    margin-top: 4rem;
  }
}
#page_products #sec_products .item .img img,
#page_products_wc #sec_products .item .img img {
  width: 100%;
}
#page_products #sec_products .item .img + .category,
#page_products_wc #sec_products .item .img + .category {
  margin-top: 1rem;
}
#page_products #sec_products .item .slider,
#page_products_wc #sec_products .item .slider {
  width: 66rem;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item .slider,
  #page_products_wc #sec_products .item .slider {
    width: 100%;
  }
}
#page_products #sec_products .item .slider .img,
#page_products_wc #sec_products .item .slider .img {
  aspect-ratio: 1.7647058824;
  overflow: hidden;
}
#page_products #sec_products .item .slider .img img,
#page_products_wc #sec_products .item .slider .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#page_products #sec_products .item .slider .slick-arrow,
#page_products_wc #sec_products .item .slider .slick-arrow {
  margin-top: -1.5rem;
}
#page_products #sec_products .item .slider .slick-dots,
#page_products_wc #sec_products .item .slider .slick-dots {
  padding: 0;
}
#page_products #sec_products .item .category,
#page_products_wc #sec_products .item .category {
  color: #5F5F5F;
  font-size: 1.4rem;
}
#page_products #sec_products .item .logo,
#page_products_wc #sec_products .item .logo {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 1rem 0;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item .logo,
  #page_products_wc #sec_products .item .logo {
    font-size: 2.2rem;
  }
}
#page_products #sec_products .item .logo img,
#page_products_wc #sec_products .item .logo img {
  height: 7rem;
}
#page_products #sec_products .item .logo._row2 img,
#page_products_wc #sec_products .item .logo._row2 img {
  height: 10rem;
}
#page_products #sec_products .item .catch,
#page_products_wc #sec_products .item .catch {
  font-weight: 500;
  margin: 1em 0;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item .catch,
  #page_products_wc #sec_products .item .catch {
    font-size: 1.8rem;
  }
}
#page_products #sec_products .item .txt,
#page_products_wc #sec_products .item .txt {
  color: #5F5F5F;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item .txt,
  #page_products_wc #sec_products .item .txt {
    font-size: 1.6rem;
  }
}
#page_products #sec_products .item .btn,
#page_products_wc #sec_products .item .btn {
  margin-top: 2rem;
}
#page_products #sec_products .item .btn a,
#page_products_wc #sec_products .item .btn a {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  #page_products #sec_products .item .btn a,
  #page_products_wc #sec_products .item .btn a {
    font-size: 1.8rem;
  }
}
#page_products #sec_products .item._medium .catch, #page_products #sec_products .item._small .catch,
#page_products_wc #sec_products .item._medium .catch,
#page_products_wc #sec_products .item._small .catch {
  margin-bottom: 0.5em;
}

#page_products_wc #sec_products .link {
  padding-left: 3em;
}
#page_products_wc #sec_products .link::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  translate: 0 -50%;
  width: 0.6em;
  height: 0.6em;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  rotate: 45deg;
}

/* ------------------------------
    story
------------------------------ */
#page_products_story #sec_fv .img img {
  width: 100%;
}
#page_products_story #sec_fv .inner {
  padding: 10rem 0;
}
@media screen and (max-width: 767px) {
  #page_products_story #sec_fv .inner {
    padding: 6rem 0 2rem;
  }
}
#page_products_story #sec_fv .inner .txt + .txt {
  margin-top: 2em;
}
#page_products_story #sec_story .box {
  margin-top: 10rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #page_products_story #sec_story .box {
    margin-top: 6rem;
  }
  #page_products_story #sec_story .box .c-ml10,
  #page_products_story #sec_story .box .c-mr10 {
    margin: 0;
  }
  #page_products_story #sec_story .box .c-ml0 {
    margin-right: -5vw;
  }
}
#page_products_story #sec_story .box .txt + .txt {
  margin-top: 2em;
}
@media screen and (max-width: 767px) {
  #page_products_story #sec_story .box .flex {
    justify-content: center;
  }
}
#page_products_story #sec_story .box .flex .arrow {
  flex: 0 0 auto;
  position: relative;
}
#page_products_story #sec_story .box .flex .arrow:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -80% -50%;
  margin-top: -4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  rotate: 45deg;
}
@media screen and (max-width: 767px) {
  #page_products_story #sec_story .box .flex .arrow:before {
    rotate: 135deg;
    top: 2rem;
    width: 2rem;
    height: 2rem;
  }
}

/* 特徴セクション：2列レイアウト比率維持 */
@media screen and (min-width: 768px) {
  .p-feature .c-imgCol_t {
    flex: 0 1 35%;
    min-width: 0;
  }
  .p-feature .c-imgCol_i {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .p-feature .c-imgCol_i img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 開発ストーリー：2列レイアウト比率維持 */
@media screen and (min-width: 768px) {
  #sec_story .c-imgCol_t {
    flex: 0 1 35%;
    min-width: 0;
  }
  #sec_story .c-imgCol_i {
    flex: 0 1 65%;
    min-width: 0;
  }
}
