@charset "UTF-8";
:root {
  --board: 1280;
  --max: 1px;
}

:root {
  --colorBlack: #333;
  --colorBg: #fff;
  --colorCurrent: #c7c7c7;
  --color-primary: #2e2f54;
  --color-primary_hover: #0a66c2;
  --color-primary_regular: #3f498c;
  --color-secondary: #f78e26;
  --color-secondary_hover: #dd6e00;
  --color-key: #537fed;
  --color-key_hover: #2c5cd3;
  --color-black: #333;
  --color-primary_light: #0a66c2;
  --color-yellow: #ffe940;
  --color-sub_yellow: #ffd932;
  --color-line: #06c755;
  --color-youtube: #f00;
  --color-newsletter: #0b318f;
  --color-blue: #0a66c2;
  --color-gray: #666;
  --color-bg_skyblue: #e9f5fc;
  --color-deepNavy: #2c3152;
  --color-navy: #3f498c;
  --color-drillpark: #158167;
  --color-okulinkplus: #ed7d31;
  --color-testpark: #0e91ef;
  --color-karte: #2d318c;
}

:root {
  --fontGothic: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  --fontMincho: 'Zen Old Mincho', '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
  --fontEnglish: 'Oswald', sans-serif;
  --fontMaru: 'Zen Maru Gothic', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

:root {
  --weightLight: 300;
  --weightRegular: 400;
  --weightMedium: 500;
  --weightBold: 700;
}

:root {
  --fontSize: 16rem;
  --letterSpacing: 0;
  --lineHeight: 1.75;
  --kerning: unset;
}

:root {
  --bodyBg: var(--colorBg);
  --speed: .3s;
}

.connection-hero {
  padding: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30) 0;
  height: clamp(0px, 10vw / var(--board) * 10 * 160, var(--max) * 160);
  background-color: #fff;
  background-image: url("/miraiseed/fansite/assets-fansite/image/usecase/bg_usecase-left.webp"), url("/miraiseed/fansite/assets-fansite/image/usecase/bg_usecase-right.webp");
  background-position: left top, right top;
  background-size: contain;
  background-repeat: no-repeat;
}
.connection-hero__inner {
  display: flex;
  align-items: flex-end;
  margin: 0 auto;
  padding: 0;
  max-width: clamp(0px, 10vw / var(--board) * 10 * 1028, var(--max) * 1028);
  height: 100%;
}
.connection-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.connection-hero__title {
  color: var(--color-navy);
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  line-height: 1;
}
.connection-hero__lead {
  color: var(--color-navy);
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  line-height: 1.6;
}

.connection-cards {
  padding: clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60) 0 clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80);
  background-color: var(--color-bg_skyblue);
}
.connection-cards__inner {
  margin: 0 auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 1032, var(--max) * 1032);
}

@media (max-width: 768px){
  :root {
    --board: 375;
    --max: 9999px;
  }
  .connection-hero {
    position: relative;
    padding: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28) 0;
    height: clamp(0px, 10vw / var(--board) * 10 * 174, var(--max) * 174);
    background-image: url("/miraiseed/fansite/assets-fansite/image/usecase/bg_usecase_sp.webp");
    background-position: center;
    background-size: cover;
  }
  .connection-hero__inner {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    padding: 0 clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    max-width: none;
    width: 100%;
  }
  .connection-hero__content {
    justify-content: center;
    gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
    width: 100%;
  }
  .connection-hero__title {
    text-align: center;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }
  .connection-hero__lead {
    margin: 0 auto;
    max-width: clamp(0px, 10vw / var(--board) * 10 * 280, var(--max) * 280);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
    line-height: 1.41666667;
  }
  .connection-cards {
    padding: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36) 0 clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60);
  }
  .connection-cards__inner {
    padding: 0 clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    width: 100%;
  }
}