@charset "UTF-8";
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
:root {
  --color-primary: #4374d5;
  --color-yellow: #bfc85b;
  --color-green: #00ff00;
  --color-red-1: #C0294A;
  --color-red-2: #E32929;
  --color-gray-light-1: #f8f8f8;
  --color-gray-light-2: #DAD9E1;
  --color-gray-light-3: #afafaf;
  --color-gray-dark-1: #2A2A2A;
  --color-gray-dark-2: #474747;
  --color-gray-dark-3: #828282;
  --shadow-dark: 0 2rem 6rem rgba(0,0,0,.3);
  --shadow-light: 0 2rem 5rem rgba(0,0,0,.06); }

body {
  font-family: "Noto Sans JP", Arial, Verdana, Helvetica, Roboto, "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; }

.image.is-16by9 .has-ratio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eaeaea; }
  @media screen and (min-width: 1088px) {
    .navbar {
      flex-wrap: nowrap; } }
  .navbar-brand {
    }
    @media screen and (min-width: 1088px) {
      .navbar-brand {
        padding: 1em; } }
    .navbar-brand.brand_logo {
        width: 50px;
        height: 45px;
        padding: 0;
      }
      @media screen and (max-width: 1087px) {
        .navbar-brand.brand_logo {
          margin: auto;
          width: 35px;
          height: 32px;
          min-height: auto; } }
      @media screen and (min-width: 1088px) {
        .navbar-brand.brand_logo {
          margin-right: 30px; } }
    .navbar-brand.brand_twitter {
      }
      @media screen and (max-width: 1087px) {
        .navbar-brand.brand_twitter {
          order: -1;
          align-items: center;
          width: 3.25rem; } }
      @media screen and (min-width: 1088px) {
        .navbar-brand.brand_twitter {
          order: 1; } }
    .navbar-brand.brand_twitter .button.is-primary {
      background-color: #1da1f2; }
      @media screen and (max-width: 1087px) {
        .navbar-brand.brand_twitter .button.is-primary {
          margin: auto;
          padding: 0.25em;
          font-size: 0.75em; } }
  .navbar-burger {
    margin: 0.85rem;
    margin-left: 0; }
  .navbar-burger:hover {
    backgroud-color: #f6f6f6; }
  .navbar-burger span {
    height: 2px; }
  .navbar-menu {
    width: 100%;
    background-color: #f6f6f6; }
    @media screen and (min-width: 1088px) {
      .navbar-menu {
        flex: none;
        width: auto;
        background-color: #ffffff; } }
  .navbar-item {
    padding: 1em; }
    @media screen and (min-width: 1088px) {
      .navbar-item {
        padding: 0 1rem;
        line-height: 80px; } }

.hero{
  padding: 0.5em; }
  @media screen and (min-width: 1088px) {
    .hero{
      padding: 1.5em; } }
  .hero_line {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 1em 0; }
  .hero_line img {
    flex: 1;
    width: 0%; }

.footer {
  }
  .footer .level {
    margin: 1rem auto 3rem; }
  .footer .back-to-top {
    /* Back To Top */
    position: fixed;
    bottom: 30px;
    right: 30px; }
    .footer .back-to-top a {
      display: block;
      width: 50px;
      height: 50px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      border-radius: 50%;
      background: linear-gradient(to top right, #0066ff 30%, #66ff66 100%);
      color: #fff;
      font-size: 16px;
      font-family: 'Genericons';
      line-height: 50px;
      text-align: center;
      opacity: 0.8;
      -moz-opacity: 0.8;
      filter: alpha(opacity=80);
      -ms-transition: all 0.5s ease-out;
      -moz-transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      transition: all 0.5s ease-out; }
    .footer .back-to-top a:hover {
      opacity: 10;
      -moz-opacity: 10;
      filter: alpha(opacity=100);
      background: #336699; }
    .footer .back-to-top a:before {
      content: '\f106';
      font-family: FontAwesome; }

.section {
  }
  @media screen and (max-width: 475px) {
    .section {
      padding: 2rem 1rem; } }

.main_section {
  }
  .main_section h1.title {
    padding-bottom: 1rem;
    border-bottom: 1px solid; }
    @media screen and (max-width: 1087px) {
      .main_section h1.title {
        margin-bottom: 1rem;
        margin-right: 1rem;
        margin-left: -1.5rem;
        padding-left: 1.5rem; } }
    @media screen and (min-width: 1088px) {
      .main_section h1.title {
        margin-top: 1rem;
        margin-right: -3rem; } }
  .main_section p {
    padding: 1rem;
    line-height: 2; }
  .main_section .column.image img {
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3); }

.main_portal {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 1) 75%), url(../img/digichalle_01.jpg);
  background-position: center center, bottom center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  padding-bottom: 5rem;
  font-weight: bold;
  text-shadow: 1px 1px 1px #ffffff; }
  @media screen and (min-width: 1088px) {
    .main_portal {
      background-position: center center, top center; } }
  .main_portal .container {
    max-width: 800px; }
  .main_portal h1.title {
    }
    @media screen and (max-width: 475px) {
      .main_portal h1.title {
        font-size: 7vw; } }
  .main_portal p {
    padding: 1rem;
    font-size: 1.2rem;
    line-height: 2; }
    @media screen and (max-width: 475px) {
      .main_portal p {
        padding: 0.5rem;
        font-size: 1rem; } }

.main_social {
  background: repeating-linear-gradient(-45deg,#ccc,#ccc 1px,#fff 0,#fff 29px);
  padding-bottom: 5rem; }
  .main_social .container {
    max-width: 800px; }

.main_news {
  background-color: #00a69c; }
  .main_news h1.title {
    color: #ffffff; }
  .main_news .columns {
    margin: 2rem auto 1.5rem;
    background-color: rgba(255,255,255,0.5);
    border-radius: 16px; }
    @media screen and (min-width: 1088px) {
      .main_news .columns {
        max-width: 75%; } }
  .main_news .columns .card {
    margin: 0.5rem;
    box-shadow: none;
    border-radius: 8px; }
    .main_news .columns .card a {
      display: flex;
      flex-wrap: nowrap; }
    .main_news .columns .card .title,
    .main_news .columns .card .subtitle {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0.5rem; }
    .main_news .columns .card .title {
      flex: 1; }
      @media screen and (min-width: 1088px) {
        .main_news .columns .card .title {
          padding: 1.5rem; } }
    .main_news .columns .card .subtitle {
      width: 5rem;
      justify-content: center;
      background-color: #e8e600;
      border-radius: 8px 0 0 8px; }

.main_notice {
  background-color: #e8e600; }
  .main_notice h1.title {
    }
    @media screen and (max-width: 475px) {
      .main_notice h1.title {
        font-size: 5.5vw; } }
  .main_notice .buttons {
    padding:1em; }
  .main_notice a.button {
    padding: 2em;
    background-color: #00a69c;
    color: #ffffff;
    white-space: normal; }
    @media screen and (min-width: 1088px) {
      .main_notice a.button {
        font-size: 1.5rem; } }
  .main_notice span.wbr {
    display: inline-block; }

.main_notice.notice_company {
  background-color: #00a69c; }
  .main_notice.notice_company  a.button {
    background-color: #e8e600;
    color: #363636; }

.main_inquiry {
  margin-top: 5rem;
  padding: 8rem 1.5rem;
  background-color: #3273dc; }
  .main_inquiry a {
    color: #ffffff; }