@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;
}

.operation-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;
}

.operation-hero__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: 0 auto;
  padding: 0;
  max-width: clamp(0px, 10vw / var(--board) * 10 * 1028, var(--max) * 1028);
  height: 100%;
}

.operation-hero__content {
  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: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
}

.operation-hero__title {
  color: var(--color-navy);
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  line-height: 1;
}

.operation-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;
}

.operation-content {
  padding: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40) 0 clamp(0px, 10vw / var(--board) * 10 * 80, var(--max) * 80);
  background-color: var(--color-bg_skyblue);
}

.operation-content__inner {
  margin: 0 auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 1032, var(--max) * 1032);
}

.l-tab_container {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 34, var(--max) * 34);
  margin-right: auto;
  margin-left: auto;
  width: clamp(0px, 10vw / var(--board) * 10 * 1032, var(--max) * 1032);
}

.l-tab_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  color: var(--color-navy);
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28);
  line-height: 1.28;
}

.l-tab_title::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  background-image: url("/miraiseed/assets-common/image/icon_app-deco.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.l-tab_item-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
  width: 100%;
  -webkit-column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  -moz-column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  row-gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.l-tab_item {
  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;
  width: clamp(0px, 10vw / var(--board) * 10 * 336, var(--max) * 336);
  height: clamp(0px, 10vw / var(--board) * 10 * 64, var(--max) * 64);
}

.l-tab_link {
  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;
  width: 100%;
  height: 100%;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  background-color: var(--colorBg);
  color: var(--color-navy) !important;
  text-decoration: none;
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  line-height: 1.5;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.l-tab_link-drillpark {
  border: 2px solid #00a956;
  color: #00a956 !important;
}

.l-tab_link-drillpark:hover,
.l-tab_link-drillpark.is-active {
  background-color: #00a956;
  color: #fff !important;
}

.l-tab_link-okulinkplus {
  border: 2px solid var(--color-okulinkplus);
  color: var(--color-okulinkplus) !important;
}

.l-tab_link-okulinkplus.is-active,
.l-tab_link-okulinkplus:hover {
  background-color: var(--color-okulinkplus);
  color: #fff !important;
}

.l-tab_link-testpark {
  border: 2px solid var(--color-testpark);
  color: var(--color-testpark) !important;
}

.l-tab_link-testpark:hover,
.l-tab_link-testpark.is-active {
  background-color: var(--color-testpark);
  color: #fff !important;
}

.l-tab_link-manager {
  border: 2px solid var(--color-navy);
  color: var(--color-navy) !important;
}

.l-tab_link-manager:hover,
.l-tab_link-manager.is-active {
  background-color: var(--color-navy);
  color: #fff !important;
}

.l-tab_link-marug {
  border: 2px solid #009ea8;
  color: #009ea8 !important;
}

.l-tab_link-marug:hover,
.l-tab_link-marug.is-active {
  background-color: #009ea8;
  color: #fff !important;
}

.l-tab_link-karte {
  border: 2px solid var(--color-karte);
  color: var(--color-karte) !important;
}

.l-tab_link-karte:hover,
.l-tab_link-karte.is-active {
  background-color: var(--color-karte);
  color: #fff !important;
}

.c-detail {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
}

.c-detail__heading {
  color: var(--color-navy);
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  line-height: 2;
}

.c-search_container {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  padding: clamp(0px, 10vw / var(--board) * 10 * 25, var(--max) * 25) clamp(0px, 10vw / var(--board) * 10 * 41, var(--max) * 41);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  background-color: #fff;
}

.c-pageTitleSerch-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 46, var(--max) * 46);
}

.c-pageTitleSerch-container .c-form_label-title {
  color: var(--color-navy);
  white-space: nowrap;
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  line-height: 1.2;
}

.c-pageTitle_search {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.c-serchForm {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  max-width: clamp(0px, 10vw / var(--board) * 10 * 760, var(--max) * 760);
  width: clamp(0px, 10vw / var(--board) * 10 * 760, var(--max) * 760);
}

.c-serchForm_input {
  position: relative;
  padding: 8px 8px 8px 36px;
  width: 86.9%;
  outline: none;
  border: 1px solid #83bae9;
  border-right: none;
  border-radius: 100vw 0 0 100vw;
  background: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.c-serchForm_icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 24px;
  height: 24px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.c-serchForm_icon img {
  width: 100%;
  height: 100%;
}

.c-serchForm_submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 98px;
  flex: 1 0 98px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 98px;
  border: none;
  border-radius: 0 100vw 100vw 0;
  background: #0977d3;
  color: #fff;
  font-weight: var(--weightBold);
  cursor: pointer;
}

.c-categorySearch-container {
  position: relative;
  overflow: hidden;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  padding-top: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  height: clamp(0px, 10vw / var(--board) * 10 * 154, var(--max) * 154);
  border-top: 1px solid #dedcd7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.c-categorySearch-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: block;
  width: 100%;
  height: clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60);
  background: #fff;
}

.c-categorySearch-container.is-open {
  height: auto;
  height: calc-size(auto, size);
}

.c-categorySearch-container.is-open::before {
  display: none;
}

.c-categorySearch-container.is-open .c-categorySearch_open {
  display: none;
}

.c-categorySearch-container.is-open .c-categorySearch_close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-categorySearch_box {
  padding-bottom: 0;
  border-bottom: none;
}

.c-categoryForm_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: initial;
  -ms-flex: initial;
  flex: initial;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 0;
  -webkit-column-gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  -moz-column-gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  column-gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  row-gap: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
}

.c-categoryForm_check {
  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;
  margin-right: 0;
  padding: 0 clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
  height: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
  border: 1px solid #8187b3;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
  background: none;
  color: var(--color-navy);
  text-decoration: none;
  font-weight: var(--weightRegular);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  cursor: pointer;
}

.c-categorySearch_actionButton {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 25, var(--max) * 25);
}

.c-categorySearch_close {
  position: relative;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) - 1px);
  padding-bottom: calc(clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) - 1px);
  width: clamp(0px, 10vw / var(--board) * 10 * 261, var(--max) * 261);
  border: 1px solid #888;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 100, var(--max) * 100);
  background-color: #fff;
  color: #333;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  cursor: pointer;
}

.c-categorySearch_close::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(0px, 10vw / var(--board) * 10 * 17, var(--max) * 17);
  display: block;
  width: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  height: 2px;
  background-color: #333;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.c-categorySearch_open {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 91;
  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;
  width: clamp(0px, 10vw / var(--board) * 10 * 261, var(--max) * 261);
  height: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  border: none;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 100, var(--max) * 100);
  background-color: #0977d3;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  cursor: pointer;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.c-categorySearch_open::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(0px, 10vw / var(--board) * 10 * 17, var(--max) * 17);
  display: block;
  width: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  height: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  background-image: url("/miraiseed/assets-common/image/ic_search_open.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.l-separator-x8 {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.c-headingLv2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  padding-bottom: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  color: var(--color-navy);
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  line-height: 1.4;
}

.c-headingLv2::before {
  content: "";
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  height: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  background: url("/miraiseed/fansite/assets-fansite/image/operation/icon_drillpark.svg") center/contain no-repeat;
}

.rw08-okulinkplus .c-headingLv2::before {
  background-image: url("/miraiseed/fansite/assets-fansite/image/operation/icon_okulinkplus.svg");
}

.rw08-testpark .c-headingLv2::before {
  background-image: url("/miraiseed/fansite/assets-fansite/image/operation/icon_testpark.svg");
}

.rw08-manager .c-headingLv2::before {
  background-image: url("/miraiseed/fansite/assets-fansite/image/operation/icon_manager.svg");
}

.rw08-marug .c-headingLv2::before {
  background-image: url("/miraiseed/fansite/assets-fansite/image/operation/icon_marug.svg");
}

.rw08-karte .c-headingLv2::before {
  background-image: url("/miraiseed/fansite/assets-fansite/image/operation/icon_karte.svg");
}

.l-separator-x3 {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 34, var(--max) * 34);
}

.l-separator-x3:first-of-type {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 25, var(--max) * 25);
}

.l-separator-x3_heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  font-weight: var(--weightBold);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28);
  line-height: 1.28;
}

.l-separator-x3_heading span {
  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;
  width: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
  height: clamp(0px, 10vw / var(--board) * 10 * 38, var(--max) * 38);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  background-color: var(--color-navy);
  color: #fff;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.l-grid {
  display: -ms-grid;
  display: grid;
  gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16) clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  -ms-grid-columns: 1fr clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) 1fr clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) 1fr;
  grid-template-columns: repeat(3, 1fr);
}

.l-grid-halfGutter {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
  -webkit-column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  -moz-column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  column-gap: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  row-gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.l-grid_item {
  min-width: 100%;
}

.operation-content .c-verticalCard_container {
  padding: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10) clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
}

.operation-content .c-verticalCard_category {
  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;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  padding: 0 clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 13, var(--max) * 13);
  background-color: #def2e8;
  color: #00a956;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  line-height: 1.16;
}

.operation-content.rw08-okulinkplus .c-verticalCard_category,
.operation-content .rw08-okulinkplus .c-verticalCard_category {
  background-color: #fae9d2;
  color: var(--color-okulinkplus);
}

.operation-content.rw08-testpark .c-verticalCard_category,
.operation-content .rw08-testpark .c-verticalCard_category {
  background-color: #dcecf8;
  color: var(--color-testpark);
}

.operation-content.rw08-manager .c-verticalCard_category,
.operation-content .rw08-manager .c-verticalCard_category {
  background-color: #e5e8f7;
  color: var(--color-navy);
}

.operation-content.rw08-marug .c-verticalCard_category,
.operation-content .rw08-marug .c-verticalCard_category {
  background-color: #d9f4f5;
  color: #009ea8;
}

.operation-content.rw08-karte .c-verticalCard_category,
.operation-content .rw08-karte .c-verticalCard_category {
  background-color: #dcecf8;
  color: var(--color-karte);
}

.operation-content .c-verticalCard_title {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  color: var(--colorBlack);
  line-height: 1.21;
}

.operation-content .c-verticalCard_description {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6);
  color: #333;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 13, var(--max) * 13);
  line-height: 1.23;
}

.operation-content .c-verticalCard_tag {
  gap: clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  padding-left: 0;
}

.operation-content .c-verticalCard_tag::before {
  display: none;
}

.operation-content .c-verticalCard_tagItem {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: clamp(0px, 10vw / var(--board) * 10 * 2, var(--max) * 2) clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  background-color: #f0f3f8;
  color: var(--color-navy);
  font-size: clamp(0px, 10vw / var(--board) * 10 * 11, var(--max) * 11);
  line-height: 1.4;
}

.c-serchMatch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.c-serchMatch.l-contentInner {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.c-serchMatch_value {
  position: relative;
  padding-left: clamp(0px, 10vw / var(--board) * 10 * 22, var(--max) * 22);
  color: #666;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.c-serchMatch_value::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  height: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  background: url("https://bso.benesse.ne.jp/miraiseed/fansite/assets/img/icons/ic_serch.svg") center/contain no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.c-serchArticles {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.c-searchNotfound {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  padding: clamp(0px, 10vw / var(--board) * 10 * 155, var(--max) * 155) clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  background-color: #fff;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.02);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.02);
}

.c-searchNotfound_title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
}

.c-searchNotfound_text {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  text-align: center;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  line-height: 1.5;
}

.c-searchNotfound .l-grid-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c-searchNotfound .l-grid_item {
  max-width: clamp(0px, 10vw / var(--board) * 10 * 336, var(--max) * 336);
  width: 100%;
}

.body-operation-list .c-searchNotfound .c-btn {
  display: block;
  margin: 0 auto;
  padding: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12) clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  max-width: clamp(0px, 10vw / var(--board) * 10 * 336, var(--max) * 336);
  border-radius: 3em;
  background-color: #0977d3;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
}

.l-grid-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.l-grid-noGutter {
  margin-right: 0;
  margin-left: 0;
}

.l-grid-noGutter .l-grid_item {
  padding-right: 0;
  padding-left: 0;
}

.body-operation-list .l-tab_container {
  margin-top: 0;
}

.body-operation-list .c-heading-keyword {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.body-operation-list .c-heading-keyword.c-headingLv2::before {
  display: none;
}

.body-operation-list .c-heading-keyword_label {
  font-weight: var(--weightBold);
  font-style: normal;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
}

.body-operation-list .c-heading-keyword_reset {
  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;
  padding-right: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
  min-width: clamp(0px, 10vw / var(--board) * 10 * 200, var(--max) * 200);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  border: 1px solid #ccc;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 100, var(--max) * 100);
  background-color: #fff;
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 400;
  font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
}

.body-operation-list .c-heading-keyword_reset::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  width: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  height: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  background-image: url("https://bso.benesse.ne.jp/miraiseed/fansite/assets/image/icon_reset-close.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.body-operation-list .c-heading-keyword:empty {
  display: none;
}

.body-operation-list .usecase-pagination {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 40, var(--max) * 40);
}

.body-operation-list .l-separator-x4-sm-imp {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32) !important;
}

.body-operation-list .l-separator-x6 {
  margin-top: clamp(0px, 10vw / var(--board) * 10 * 48, var(--max) * 48);
}

.c-topBanner .l-grid {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

.c-topBannerBtn a {
  display: block;
  overflow: hidden;
  border-radius: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  -webkit-transition: opacity var(--speed);
  transition: opacity var(--speed);
}

.c-topBannerBtn img {
  width: 100%;
  height: auto;
}

.c-img-autoWidth img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  :root {
    --board: 375;
    --max: 9999px;
  }

  .operation-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;
  }

  .operation-hero__inner {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -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;
    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%;
  }

  .operation-hero__content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: clamp(0px, 10vw / var(--board) * 10 * 30, var(--max) * 30);
    width: 100%;
  }

  .operation-hero__title {
    text-align: center;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .operation-hero__lead {
    margin: 0 auto;
    max-width: clamp(0px, 10vw / var(--board) * 10 * 335, var(--max) * 335);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
    line-height: 1.41666667;
  }

  .operation-content {
    padding: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24) 0 clamp(0px, 10vw / var(--board) * 10 * 60, var(--max) * 60);
  }

  .operation-content__inner {
    padding: 0 clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    width: 100%;
  }

  .l-tab_container {
    width: 100%;
  }

  .l-tab_title {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    line-height: 1.5;
  }

  .l-tab_title::before {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6);
    min-width: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    min-height: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    width: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
    height: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .l-tab_item-container {
    -webkit-column-gap: clamp(0px, 10vw / var(--board) * 10 * 9, var(--max) * 9);
    -moz-column-gap: clamp(0px, 10vw / var(--board) * 10 * 9, var(--max) * 9);
    column-gap: clamp(0px, 10vw / var(--board) * 10 * 9, var(--max) * 9);
    row-gap: clamp(0px, 10vw / var(--board) * 10 * 9, var(--max) * 9);
  }

  .l-tab_item {
    width: calc((100% - clamp(0px, 10vw / var(--board) * 10 * 9, var(--max) * 9) * 2) / 3);
    height: clamp(0px, 10vw / var(--board) * 10 * 61, var(--max) * 61);
    text-align: center;
  }

  .l-tab_link {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 14, var(--max) * 14);
    line-height: 1.28;
  }

  .c-search_container {
    padding: clamp(0px, 10vw / var(--board) * 10 * 22, var(--max) * 22) clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    background-image: url("https://bso.benesse.ne.jp/miraiseed/fansite/assets/image/bg_page-title_sp.svg");
    background-size: auto 346px;
  }

  .c-pageTitleSerch-container {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
  }

  .c-pageTitle_search {
    width: 100%;
  }

  .c-serchForm {
    width: 100%;
  }

  .c-categorySearch-container {
    padding-top: clamp(0px, 10vw / var(--board) * 10 * 21, var(--max) * 21);
    height: clamp(0px, 10vw / var(--board) * 10 * 170, var(--max) * 170);
    -webkit-transition: 0.8s;
    transition: 0.8s;
  }

  .c-categorySearch-container::before {
    z-index: 9;
    height: clamp(0px, 10vw / var(--board) * 10 * 50, var(--max) * 50);
  }

  .c-categoryForm_content {
    -webkit-column-gap: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
    -moz-column-gap: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
    column-gap: clamp(0px, 10vw / var(--board) * 10 * 4, var(--max) * 4);
  }

  .c-categoryForm_check {
    height: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    border-radius: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  }

  .c-categorySearch_actionButton {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .c-categorySearch_close {
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
  }

  .c-categorySearch_open {
    z-index: 9;
    width: clamp(0px, 10vw / var(--board) * 10 * 323, var(--max) * 323);
  }

  .l-separator-x8 {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24);
  }

  .c-headingLv2 {
    gap: clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8);
    margin-bottom: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    padding-bottom: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 20, var(--max) * 20);
  }

  .c-headingLv2::before {
    width: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28);
    height: clamp(0px, 10vw / var(--board) * 10 * 28, var(--max) * 28);
  }

  .l-separator-x3_heading {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
    line-height: 1.5;
  }

  .l-separator-x3_heading span {
    width: clamp(0px, 10vw / var(--board) * 10 * 36, var(--max) * 36);
    height: clamp(0px, 10vw / var(--board) * 10 * 26, var(--max) * 26);
    font-size: clamp(0px, 10vw / var(--board) * 10 * 15, var(--max) * 15);
    line-height: 1.73;
  }

  .l-grid {
    gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .l-grid-halfGutter {
    gap: clamp(0px, 10vw / var(--board) * 10 * 16, var(--max) * 16);
  }

  .operation-content .c-verticalCard_container {
    padding: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10) clamp(0px, 10vw / var(--board) * 10 * 8, var(--max) * 8) clamp(0px, 10vw / var(--board) * 10 * 6, var(--max) * 6);
  }

  .operation-content .c-verticalCard_title {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 18, var(--max) * 18);
  }

  .operation-content .c-verticalCard_description {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 12, var(--max) * 12);
  }

  .operation-content .c-verticalCard_tagItem {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10);
  }

  .body-operation-list .c-heading-keyword_label {
    font-size: clamp(0px, 10vw / var(--board) * 10 * 21, var(--max) * 21);
  }

  .body-operation-list .usecase-pagination {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 32, var(--max) * 32);
  }

  .body-operation-list .l-separator-x4-sm-imp {
    margin-top: clamp(0px, 10vw / var(--board) * 10 * 24, var(--max) * 24) !important;
  }

  .c-topBanner .l-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

@media (hover: hover) {
  .c-serchForm_submit:hover {
    background: #1991f5;
  }

  .c-categoryForm_check:hover {
    background-color: #edf9ff;
    text-decoration: none;
    opacity: 1;
  }

  .c-categorySearch_close:hover {
    border-color: #4391ee;
    color: #4391ee;
  }

  .c-categorySearch_close:hover::after {
    background-color: #4391ee;
  }

  .body-operation-list .c-searchNotfound .c-btn:hover {
    background-color: #1991f5;
  }

  .body-operation-list .c-heading-keyword_reset:hover {
    opacity: 0.8;
  }

  .c-topBannerBtn a:hover {
    opacity: 0.8;
  }
}