@charset "UTF-8";
/*===== SOCIALCAST基本設定色の上書き用 =====*/
/*--
  base size
--*/
/*--
  break points
--*/
/*--
  colors
--*/
/*--
  font family
--*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
/*--
  font weight
--*/
/*--------------------------------------------------------------
  font-size rem変換
  使用例 font-size: g.fontRem(16)
-------------------------------------------------------------- */
/*--------------------------------------------------------------
  line-height
  XDの行送り / フォントサイズ
  使用例 line-height: g.lineHeight(16, 19);
-------------------------------------------------------------- */
/*--------------------------------------------------------------
  letter-spacing
  XDのAV / 1000で求めた値にemをつける
  使用例 letter-spacing: g.letterSpacing(50);
-------------------------------------------------------------- */
/*--------------------------------------------------------------
  MediaQuery
  使用例
  @include g.mq(md) {
        max-width:768px のときの指定
  }
-------------------------------------------------------------- */
:root {
  --color-master: #0C83AA;
  --color-master-dark: #1D5A6E;
  --color-sub: #EFC129;
  --color-sub-dark: #937424;
  --color-base: #eee;
  --main-black: #0D0D0D;
  --main-grey: #666;
  --color-accent-01: #FFDD00;
  --color-accent-02: #E6B100;
  --grey-01: #ccc;
  --grey-02: #ddd;
  --grey-03: #F2F2F2;
  --grey-04: #F4F2F2;
  --grey-05: #B7B7B7;
  --bg-color-01: #FFFADB;
  --bg-color-02: #F8F8F8;
  --bg-color-03: #F5F5F5;
  --bg-color-04: #E5E9EA;
  --bg-color-05: #5EB1CC;
  --bg-color-06: #67C8E7;
  --bg-color-07: #F7F7F7;
  --bg-color-08: #f8f5d7;
  --color-000: #000;
  --color-fff: #fff;
}

a {
  color: var(--color-master);
}

.page-item .page-link {
  color: var(--color-master);
}

.page-item.active .page-link {
  background-color: var(--color-master);
  border-color: var(--color-master);
}

.nav-tabs .nav-link.active {
  color: var(--color-master) !important;
}

.nav-pills .nav-link.active {
  color: var(--color-fff) !important;
  background-color: var(--color-master) !important;
}

.btn-theme {
  background: var(--color-master);
  border-color: var(--color-master);
}

.btn-theme-ghost {
  border-color: var(--color-master);
  color: var(--color-master) !important;
}

.btn-accent {
  background: var(--color-sub);
  border-color: var(--color-sub);
}

.btn-sample {
  background: var(--color-sub);
  border-color: var(--color-sub);
}

.btn-files {
  background: var(--color-sub);
  border-color: var(--color-sub);
}

.box-form-flow > span + span::after {
  border-left-color: var(--color-master);
}

.ui-widget-header {
  border: 1px solid var(--color-master);
  background: #ffd966;
}

.box-sort .btn {
  color: var(--color-sub);
}
.box-sort .btn[class*=active] {
  background: var(--color-sub);
}

.mycontents-list {
  background: #fff9e6;
}

.box-footer {
  border-top-color: var(--color-master);
}

#toTopBtn {
  border-color: var(--color-master);
}

@media screen and (min-width: 769px) {
  a:visited {
    color: var(--color-master);
  }
  a:focus {
    color: var(--color-master);
  }
  a:hover {
    color: var(--color-master);
  }
  .page-item .page-link:hover {
    color: var(--color-master-dark);
  }
  .btn-theme {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .btn-theme:hover {
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
  }
  .btn-theme-ghost:hover {
    background: var(--color-master);
    border-color: var(--color-master);
  }
  .btn-accent {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .btn-accent:hover {
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
  }
  .btn-sample:hover {
    background: var(--color-sub-dark);
    border-color: var(--color-sub-dark);
  }
  .btn-files:hover {
    background: var(--color-sub-dark);
    border-color: var(--color-sub-dark);
  }
  .btn-global-nav:hover {
    background: var(--color-master);
  }
  .favorite:hover {
    background: var(--color-master);
  }
  .box-sidemenu .content-list-item a:hover {
    background: var(--color-master) !important;
  }
  .box-sort .btn:hover {
    background: var(--color-sub-dark);
  }
  .news-list-item h3 a:hover {
    color: var(--color-master);
  }
  .js-list-slide .slick-slide a:hover {
    color: var(--color-master);
  }
  .link-list a:hover {
    background: var(--color-master);
  }
  .dropdown-wrapper:hover .box-dropdown-key {
    background: var(--color-master);
  }
  .dropdown-wrapper:hover .box-dropdown-key::after {
    border-top-color: var(--color-master);
  }
}