@charset "UTF-8";
/*
* multi_device.css
*
*/
:root {
  --color-black: #231200;
  --color-white: #fff;
  --color-ktn-yellow: #ffbf00;
  --color-yellow-01: #ffcb31;
  --color-yellow-02: #ffdb4f;
  --color-yellow-03: #ffe84f;
  --color-yellow-04: #fff8b5;
  --color-orange: #ff8f00;
  --color-orange-01: #ff4c00;
  --color-bg: #fff5e1;
  --color-bg-overlay: color-mix(in srgb, var(--color-black-btn) 30%, transparent);
  --color-line-dashed: #999;
  --color-line-solid: #d6d5d5;
  --color-panel: #f3f3f3;
  --color-black-btn: #333;
  --color-black-txt: #666;
  --color-accent-red: #ff4949;
  --color-accent-pink: #e23a9a;
  --color-accent-yellowgreen: #95d542;
  --color-accent-emerald: #09cd96;
  --color-accent-turquoise: #26d1db;
  --color-accent-blue: #3139e8;
  --color-accent-bluegray: #c5cfd6;
  --color-error: #c00;
  --weight-thin: 100;
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;
  --weight-black: 900;
  --color-hover-gray: #f2f0f0;
}

/* ------------------------
  ストアバッジ
------------------------ */
.store {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.store_item a {
  display: block;
  transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .store_item a:hover {
    opacity: 0.7;
  }
}
.store_item img {
  display: block;
  width: auto;
  height: 36px;
}
@media (min-width: 768px) {
  .store_item img {
    height: 44px;
  }
}

/* ------------------------
  3つの運用STEP
------------------------ */
.step_list {
  display: grid;
  max-width: 480px;

  grid-template-columns: minmax(0, 1fr);
  gap: 50px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .step_list {
    max-width: none;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

.step_item {
  position: relative;
}
.step_item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  margin: auto;
  width: 12px;
  background: url("/assets_2025/img/common/deco/arw_down.svg") no-repeat center/contain;

  aspect-ratio: 38/21;
}
@media (min-width: 1024px) {
  .step_item:not(:first-child)::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: -26px;
    transform: rotate(-90deg);
  }
}

.step_card {
  position: relative;
  padding: 30px 15px;
  border-radius: 10px;
  height: 100%;
  background-color: var(--ordinary-color);
}
.c-section:nth-of-type(even) .step_card {
  background-color: var(--reversal-color);
}
@media (min-width: 768px) {
  .step_card {
    padding: 30px;
  }
}

.step_label {
  position: absolute;
  z-index: 1;
  top: -10px;
  right: 0;
  left: 0;
  margin: auto;
  padding: 2px 10px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--color-black-btn);
  text-align: center;
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .step_label {
    font-size: 0.75rem;
  }
}
.step_label::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -4px;
  left: 0;
  margin: auto;
  border-bottom-right-radius: 2px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background-color: var(--color-black-btn);
}

.step_card_inner {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.step_ttl {
  text-align: center;
}

.step_illust {
  max-width: 200px;

  aspect-ratio: 2/1;
  margin-inline: auto;
}
.step_illust img {
  width: 100%;
  height: 100%;

  -o-object-fit: contain;

     object-fit: contain;
}

/* ------------------------
  ダウンロードセクション（黄色背景）
------------------------ */
.c-section.download:nth-of-type(even) {
  background-color: var(--ordinary-color);

  --ordinary-color: var(--color-yellow-02);
  --reversal-color: var(--color-white);
}
.c-section.download:nth-of-type(even) .c-point {
  background-color: var(--color-black-btn);
  color: var(--color-white);
}