/* CSS Document */
/* _reset.scss */
/*
https://github.com/mayank99/reset.css/blob/main/package/index.css
*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

:where([hidden]:not([hidden='until-found'])) {
  display: none !important; }

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light; }

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth; } }
:where(body) {
  block-size: 100%;
  block-size: 100dvb;
  line-height: 1.5;
  font-family: system-ui,sans-serif;
  -webkit-font-smoothing: antialiased; }

:where(input,button,textarea,select) {
  font: inherit;
  color: inherit; }

:where(textarea) {
  resize: vertical;
  resize: block; }

:where(button,label,select,summary,[role='button'],[role='option']) {
  cursor: pointer; }

:where(:disabled) {
  cursor: not-allowed; }

:where(label:has(>input:disabled),label:has(+input:disabled)) {
  cursor: not-allowed; }

:where(button) {
  border-style: solid; }

:where(a) {
  text-underline-offset: .2ex; }

:where(ul,ol) {
  list-style: none; }

:where(img,svg,video,canvas,audio,iframe,embed,object) {
  display: block; }

:where(img,picture,svg) {
  max-inline-size: 100%;
  block-size: auto; }

:where(p,h1,h2,h3,h4,h5,h6) {
  overflow-wrap: break-word; }

:where(h1,h2,h3) {
  line-height: calc(1em + 0.5rem); }

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible; }

:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px; }

:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important; }

/* _layout.scss */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --blue: #14C2FC;
  --yellow: #FFED7E;
  --light-blue: #75DAF1;
  --text-gray: #AEB3AE;
  --bg-gray: #ECEFF3;
  --border-gray:#C5CFDC;
  --gray-500: #ADB6B7;
  --green: #98C22A;
  --salmon: #F8958A;
  --cyan: #65BDD4;
  --purple: #9498D9;
  --indigo: #1F4F7F;
  --kensaku-blue: #1F4F7F;
  --light-blue-300: #a6e0f2;
  --light-blue-100: #c5ebf6;
  --card-base: #F8F5E9;
  --card-base-help: #FFFFFF;
  --card-base-howto: #FFFFFF;
  --font-EN: Lato, sans-serif;
  --font-JA: Zen Maru Gothic, sans-serif;
  --font-TITLE: M PLUS Rounded 1c, sans-serif;
  --font-none: sans-serif; }

/*  */
body {
  background-color: var(--white);
  color: var(--black);
  box-sizing: border-box;
  font-family: var(--font-JA); }

/*  */
.wrap {
  background-attachment: local;
  background-repeat: no-repeat;
  background-image: url("../images/bg-Pen.svg"), url("../images/bg-A1.svg"), url("../images/bg-S.svg"), url("../images/bg-Earth.svg"), url("../images/bg-A2.svg"), url("../images/bg-H.svg"), url("../images/bg-I.svg"), url("../images/bg-Pen.svg"), url("../images/bg-A1.svg"), url("../images/bg-S.svg"), url("../images/bg-Earth.svg"), url("../images/bg-A2.svg"), url("../images/bg-H.svg"), url("../images/bg-I.svg");
  background-position: calc( 50% + 595px ) 256px, calc( 50% - 535px ) 854px, calc( 50% + 595px ) 1350px, calc( 50% - 555px ) 1592px, calc( 50% + 595px ) 1985px, calc( 50% - 520px ) 2375px, calc( 50% + 595px ) 2787px, calc( 50% + 595px ) 4256px, calc( 50% - 535px ) 4854px, calc( 50% + 595px ) 5350px, calc( 50% - 555px ) 5592px, calc( 50% + 595px ) 5985px, calc( 50% - 520px ) 6375px, calc( 50% + 595px ) 6787px; }
  .style-help .wrap {
    background-color: #D6E1E3; }
  .style-howto .wrap {
    background-color: #FFFFFF;
    background-image: none; }

/*  */
.content-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 98px; }
  .content-header .header__inner {
    width: 100%;
    max-width: 1310px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto; }
    .content-header .header__inner .logo a, .content-header .header__inner .logo span {
      display: inline-block;
      vertical-align: bottom; }
      .content-header .header__inner .logo a img, .content-header .header__inner .logo span img {
        max-width: 260px;
        height: auto;
        vertical-align: bottom; }

/*  */
.section {
  width: 100%;
  /**/ }
  .section__inner {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 10px;
    text-align: center; }
  .section-title {
    overflow-x: hidden; }
  .section-title .section__inner {
    padding-top: 19px;
    padding-bottom: 119px; }
    .style-help .section-title .section__inner, .style-howto .section-title .section__inner {
      padding-bottom: 50px; }
  .section-list .section__inner {
    padding-top: 0;
    padding-bottom: 60px; }
    .style-howto .section-list .section__inner {
      padding-top: 40px;
      padding-bottom: 20px; }
  .section-info {
    text-align: center;
    background-color: var(--bg-gray); }
    .section-info .section__inner {
      padding-top: 69px;
      padding-bottom: 79px; }
  .section-footer {
    background-color: var(--bg-gray);
    border-top: 1px var(--border-gray) solid;
    font-family: var(--font-none);
    font-size: 13px;
    line-height: 1.5; }
    .section-footer .section__inner {
      padding-top: 18px;
      max-width: 750px; }
    .section-footer h3 {
      font-size: 15px;
      line-height: 1.3;
      text-align: center;
      margin-bottom: 8px; }
    .section-footer p {
      text-align: left; }
    .section-footer .copyright {
      font-size: 10px;
      line-height: 1.3;
      text-align: center;
      margin-top: 18px; }
  .section h2 {
    margin-bottom: 31px;
    letter-spacing: .2em;
    position: relative;
    display: inline-block;
    margin: 0 auto 31px; }
    .section h2 .icon {
      position: absolute; }
      .section h2 .icon::before {
        content: "";
        display: inline-block;
        transform: translateY(-50%); }
      .section h2 .icon-A1 {
        left: -80px;
        top: 50%; }
        .section h2 .icon-A1::before {
          content: url("../images/chara-A1.svg"); }
      .section h2 .icon-S {
        right: -80px;
        top: 50%; }
        .section h2 .icon-S::before {
          content: url("../images/chara-S.svg"); }
      .section h2 .icon-A2 {
        right: -70px;
        top: 50%; }
        .section h2 .icon-A2::before {
          content: url("../images/chara-A2.svg"); }
      .section h2 .icon-H {
        left: -85px;
        top: 50%; }
        .section h2 .icon-H::before {
          content: url("../images/chara-H.svg"); }
      .section h2 .icon-I {
        right: -80px;
        top: 50%; }
        .section h2 .icon-I::before {
          content: url("../images/chara-I.svg"); }
      .section h2 .icon-Shimbun {
        left: -85px;
        top: 50%; }
        .section h2 .icon-Shimbun::before {
          content: url("../images/chara-Paper.svg"); }
      .section h2 .icon-Tab {
        left: -90px;
        top: 50%; }
        .section h2 .icon-Tab::before {
          content: url("../images/chara-Tab.svg"); }

/**/
.style-howto .section-list {
  background-attachment: local;
  background-repeat: no-repeat; }
.style-howto .section-list:nth-of-type(2n) {
  background-color: #a6e0f2; }
.style-howto .section-list:nth-of-type(2n+1) {
  background-color: #c5ebf6; }
.style-howto .section-list:nth-of-type(4n-2) {
  background-image: url("../images/bg-A1-w.svg");
  background-position: calc( 50% - 535px ) 98px; }
.style-howto .section-list:nth-of-type(4n-1) {
  background-image: url("../images/bg-S-w.svg");
  background-position: calc( 50% + 595px ) -98px; }
.style-howto .section-list:nth-of-type(4n) {
  background-image: url("../images/bg-Earth-w.svg");
  background-position: calc( 50% - 500px ) 68px; }
.style-howto .section-list:nth-of-type(4n+1) {
  background-image: url("../images/bg-I-w.svg");
  background-position: calc( 50% + 595px ) 100px; }

/*  */
.content-slider {
  max-width: 960px; }
  .content-slider .carousel-cell {
    width: 100%;
    /* full width */
    height: 220px;
    /* height of carousel */
    margin-bottom: 0;
    display: block; }
    .content-slider .carousel-cell figure {
      margin-bottom: 0; }
      .content-slider .carousel-cell figure img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
        margin-bottom: 0; }
  .content-slider .flickity-slider .carousel-cell {
    margin-right: 10px; }
  .content-slider .flickity-button.flickity-prev-next-button.previous {
    left: -50px; }
  .content-slider .flickity-button.flickity-prev-next-button.next {
    right: -50px; }
.content-title {
  display: inline-block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  .content-title-h1 {
    display: block;
    margin-top: 30px;
    font-family: var(--font-TITLE);
    font-weight: 500;
    font-size: 36px;
    line-height: 1; }
    .content-title-h1 em {
      display: inline-block;
      font-style: normal;
      font-weight: 700;
      color: var(--blue);
      margin-right: -.2em; }
  .content-title-sub {
    display: inline-block;
    font-family: var(--font-EN);
    font-weight: 900;
    letter-spacing: .2em;
    text-align: center;
    color: var(--indigo);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--light-blue);
    font-size: 16px;
    line-height: 1;
    padding: 9px 10px 10px;
    border-radius: 17.5px;
    min-width: 172px; }
  .content-title .icon {
    position: absolute; }
    .content-title .icon::before {
      display: inline-block; }
    .content-title .icon-A1 {
      left: -220px;
      top: 80%; }
      .content-title .icon-A1::before {
        content: url("../images/chara-A1.svg"); }
    .content-title .icon-S {
      left: -136px;
      top: 55%; }
      .content-title .icon-S::before {
        content: url("../images/chara-S.svg"); }
    .content-title .icon-A2 {
      right: -128px;
      top: 65%; }
      .content-title .icon-A2::before {
        content: url("../images/chara-A2.svg"); }
    .content-title .icon-H {
      right: -193px;
      top: 75%; }
      .content-title .icon-H::before {
        content: url("../images/chara-H.svg"); }
    .content-title .icon-I {
      right: -275px;
      top: 60%; }
      .content-title .icon-I::before {
        content: url("../images/chara-I.svg"); }
.content-h2 {
  text-align: center;
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto; }
  .content-h2 span {
    position: relative;
    z-index: 0; }
    .content-h2 span::before {
      content: "";
      width: calc( 100% + 0.5em );
      height: 10px;
      background-color: var(--yellow);
      z-index: -1;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%); }
      .style-howto .content-h2 span::before, .style-help .content-h2 span::before {
        background-color: var(--gray-500); }
  .content-h2.mod--green span::before {
    background-color: var(--green); }
  .content-h2.mod--salmon span::before {
    background-color: var(--salmon); }
  .content-h2.mod--cyan span::before {
    background-color: var(--cyan); }
  .content-h2.mod--purple span::before {
    background-color: var(--purple); }
  .content-h2.mod--yellow span::before {
    background-color: var(--yellow); }
  .content-h2.mod--gray span::before {
    background-color: var(--gray-500); }

/*  */
.card {
  width: 23%;
  max-width: 220px;
  border: var(--bg-gray) 2px solid;
  border-radius: 10px;
  background-color: var(--card-base);
  text-align: center;
  margin-left: 2.66%;
  margin-bottom: 30px;
  text-decoration: none;
  padding: 29px 10px 13px;
  padding-bottom: 52px;
  box-shadow: 2.92px 2.92px 4.8667px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  /**/
  /**/ }
  .style-help .card {
    background-color: var(--card-base-help); }
  .style-howto .card {
    background-color: var(--card-base-howto);
    border-bottom-right-radius: 0; }
  .card::before, .card::after {
    display: inline-block;
    content: "";
    padding-left: 26px;
    padding-top: 26px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background-color: var(--bg-gray);
    position: absolute;
    right: -56px;
    bottom: -56px;
    transition: .3s transform ease;
    z-index: 0; }
    .style-howto .card::before, .style-howto .card::after {
      border-radius: 0;
      transform: rotate(45deg); }
  .card::after {
    background-color: var(--card-base);
    z-index: 1;
    transform: scale(0); }
    .style-help .card::after {
      background-color: var(--card-base-help); }
    .style-howto .card::after {
      background-color: var(--card-base-howto);
      transform: scale(0) rotate(45deg); }
  .card:not(div):hover::before {
    transform: scale(1000%); }
    .style-howto .card:not(div):hover::before {
      transform: scale(1000%) rotate(45deg); }
  .card:not(div):hover::after {
    transform: scale(100%); }
    .style-howto .card:not(div):hover::after {
      transform: scale(100%) rotate(45deg); }
  .card:nth-child(4n+1) {
    margin-left: 0; }
  .card .ico {
    display: block;
    width: 100%;
    height: 82px;
    position: relative;
    z-index: 2; }
    .card .ico::before {
      display: inline-block;
      content: "";
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%); }
    .card .ico-light::before {
      content: url("../images/icon/icon-light.svg"); }
    .card .ico-flask::before {
      content: url("../images/icon/icon-flask.svg"); }
    .card .ico-search::before {
      content: url("../images/icon/icon-search.svg"); }
    .card .ico-earth::before {
      content: url("../images/icon/icon-earth.svg"); }
    .card .ico-leef::before {
      content: url("../images/icon/icon-leef.svg"); }
    .card .ico-book::before {
      content: url("../images/icon/icon-book.svg"); }
    .card .ico-helmet::before {
      content: url("../images/icon/icon-helmet.svg"); }
    .card .ico-key::before {
      content: url("../images/icon/icon-key.svg"); }
    .card .ico-graph::before {
      content: url("../images/icon/icon-graph.svg"); }
    .card .ico-composition::before {
      content: url("../images/icon/icon-composition.svg"); }
    .card .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs.svg"); }
    .card .ico-interview::before {
      content: url("../images/icon/icon-interview.svg"); }
    .card .ico-health::before {
      content: url("../images/icon/icon-health.svg"); }
    .card .ico-festival::before {
      content: url("../images/icon/icon-festival.svg"); }
    .card .ico-map::before {
      content: url("../images/icon/icon-map.svg"); }
    .card .ico-news::before {
      content: url("../images/icon/icon-news.svg"); }
    .card .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy.svg"); }
    .card .ico-weather::before {
      content: url("../images/icon/icon-weather.svg"); }
    .card .ico-food::before {
      content: url("../images/icon/icon-food.svg"); }
    .card .ico-es::before {
      content: url("../images/icon/icon-es.svg"); }
    .card .ico-jhs::before {
      content: url("../images/icon/icon-jhs.svg"); }
    .card .ico-hs::before {
      content: url("../images/icon/icon-hs.svg"); }
    .card .ico-everyone::before {
      content: url("../images/icon/icon-everyone.svg"); }
  .card:not(div):hover .ico-light::before {
    content: url("../images/icon/icon-light-w.svg"); }
  .card:not(div):hover .ico-flask::before {
    content: url("../images/icon/icon-flask-w.svg"); }
  .card:not(div):hover .ico-search::before {
    content: url("../images/icon/icon-search-w.svg"); }
  .card:not(div):hover .ico-earth::before {
    content: url("../images/icon/icon-earth-w.svg"); }
  .card:not(div):hover .ico-leef::before {
    content: url("../images/icon/icon-leef-w.svg"); }
  .card:not(div):hover .ico-book::before {
    content: url("../images/icon/icon-book-w.svg"); }
  .card:not(div):hover .ico-helmet::before {
    content: url("../images/icon/icon-helmet-w.svg"); }
  .card:not(div):hover .ico-key::before {
    content: url("../images/icon/icon-key-w.svg"); }
  .card:not(div):hover .ico-graph::before {
    content: url("../images/icon/icon-graph-w.svg"); }
  .card:not(div):hover .ico-composition::before {
    content: url("../images/icon/icon-composition-w.svg"); }
  .card:not(div):hover .ico-SDGs::before {
    content: url("../images/icon/icon-SDGs-w.svg"); }
  .card:not(div):hover .ico-interview::before {
    content: url("../images/icon/icon-interview-w.svg"); }
  .card:not(div):hover .ico-health::before {
    content: url("../images/icon/icon-health-w.svg"); }
  .card:not(div):hover .ico-festival::before {
    content: url("../images/icon/icon-festival-w.svg"); }
  .card:not(div):hover .ico-map::before {
    content: url("../images/icon/icon-map-w.svg"); }
  .card:not(div):hover .ico-news::before {
    content: url("../images/icon/icon-news-w.svg"); }
  .card:not(div):hover .ico-politicsy::before {
    content: url("../images/icon/icon-politicsy-w.svg"); }
  .card:not(div):hover .ico-weather::before {
    content: url("../images/icon/icon-weather-w.svg"); }
  .card:not(div):hover .ico-food::before {
    content: url("../images/icon/icon-food-w.svg"); }
  .card:not(div):hover .ico-es::before {
    content: url("../images/icon/icon-es-w.svg"); }
  .card:not(div):hover .ico-jhs::before {
    content: url("../images/icon/icon-jhs-w.svg"); }
  .card:not(div):hover .ico-hs::before {
    content: url("../images/icon/icon-hs-w.svg"); }
  .card:not(div):hover .ico-everyone::before {
    content: url("../images/icon/icon-everyone-w.svg"); }
  .card .category {
    display: inline-block;
    font-family: var(--font-EN);
    font-size: 13px;
    line-height: 14.25px;
    font-weight: 700;
    margin: 0 auto;
    background-color: var(--bg-gray);
    color: var(--card-base);
    padding: 6.375px 1em;
    min-width: 125px;
    border-radius: 13.5px;
    letter-spacing: .1em;
    transition: .3s background ease;
    position: relative;
    z-index: 2; }
    .style-help .card .category {
      color: var(--card-base-help); }
    .style-howto .card .category {
      color: var(--card-base-howto); }
  .card:not(div):hover .category {
    background-color: var(--card-base); }
    .style-help .card:not(div):hover .category {
      background-color: var(--card-base-help); }
    .style-howto .card:not(div):hover .category {
      background-color: var(--card-base-howto); }
  .card .date {
    display: block;
    font-family: var(--font-EN);
    font-size: 13px;
    line-height: 23px;
    width: 190px;
    padding-bottom: 5px;
    margin: 11px auto 0;
    height: 28px;
    color: var(--text-gray);
    transition: .3s color ease;
    position: relative;
    z-index: 2;
    background: url("../images/arrow-w.svg") right bottom no-repeat;
    position: absolute;
    right: 50%;
    bottom: 13px;
    transform: translateX(50%); }
    .style-help .card .date {
      background-image: url("../images/arrow-cw.svg"); }
    .style-howto .card .date {
      background-image: url("../images/arrow-cw.svg"); }
  .card:not(div):hover .date {
    color: var(--card-base); }
    .style-help .card:not(div):hover .date {
      color: var(--card-base-help); }
    .style-howto .card:not(div):hover .date {
      color: var(--card-base-howto); }
  .card .title {
    font-size: 22px;
    line-height: 30px;
    margin: 0;
    transition: .3s color ease;
    position: relative;
    z-index: 2;
    min-height: 60px; }
    .card .title span {
      display: inline-block;
      line-height: 30px; }
  .card:not(div):hover .title {
    color: var(--card-base); }
    .style-help .card:not(div):hover .title {
      color: var(--card-base-help); }
    .style-howto .card:not(div):hover .title {
      color: var(--card-base-howto); }
  .card-movie {
    width: 48.67%;
    max-width: 100%;
    padding: 10px; }
    .card-movie::before, .card-movie::after {
      display: none; }
    .card-movie .movie {
      max-width: 100%;
      padding-top: 56.25%;
      position: relative; }
      .card-movie .movie iframe {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: 100%;
        max-height: 100%;
        transform: translate(-50%, -50%); }
      .card-movie .movie + .title {
        margin-top: 12px; }
    .card-movie .title {
      width: 100%;
      text-align: left;
      padding-left: 10px;
      padding-right: 10px; }
    .card-movie .date {
      position: relative;
      right: auto;
      bottom: auto;
      width: 100%;
      text-align: left;
      background: none !important;
      transform: translateX(0);
      padding-left: 10px;
      padding-right: 10px; }
  .card-green {
    color: var(--green);
    border-color: var(--green); }
    .card-green::before {
      background-color: var(--green); }
    .card-green .category {
      background-color: var(--green); }
    .card-green .ico-light::before {
      content: url("../images/icon/icon-light-g.svg"); }
    .card-green .ico-flask::before {
      content: url("../images/icon/icon-flask-g.svg"); }
    .card-green .ico-search::before {
      content: url("../images/icon/icon-search-g.svg"); }
    .card-green .ico-earth::before {
      content: url("../images/icon/icon-earth-g.svg"); }
    .card-green .ico-leef::before {
      content: url("../images/icon/icon-leef-g.svg"); }
    .card-green .ico-book::before {
      content: url("../images/icon/icon-book-g.svg"); }
    .card-green .ico-helmet::before {
      content: url("../images/icon/icon-helmet-g.svg"); }
    .card-green .ico-key::before {
      content: url("../images/icon/icon-key-g.svg"); }
    .card-green .ico-graph::before {
      content: url("../images/icon/icon-graph-g.svg"); }
    .card-green .ico-composition::before {
      content: url("../images/icon/icon-composition-g.svg"); }
    .card-green .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs-g.svg"); }
    .card-green .ico-interview::before {
      content: url("../images/icon/icon-interview-g.svg"); }
    .card-green .ico-health::before {
      content: url("../images/icon/icon-health-g.svg"); }
    .card-green .ico-festival::before {
      content: url("../images/icon/icon-festival-g.svg"); }
    .card-green .ico-map::before {
      content: url("../images/icon/icon-map-g.svg"); }
    .card-green .ico-news::before {
      content: url("../images/icon/icon-news-g.svg"); }
    .card-green .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy-g.svg"); }
    .card-green .ico-weather::before {
      content: url("../images/icon/icon-weather-g.svg"); }
    .card-green .ico-food::before {
      content: url("../images/icon/icon-food-g.svg"); }
    .card-green .ico-es::before {
      content: url("../images/icon/icon-es-g.svg"); }
    .card-green .ico-jhs::before {
      content: url("../images/icon/icon-jhs-g.svg"); }
    .card-green .ico-hs::before {
      content: url("../images/icon/icon-hs-g.svg"); }
    .card-green .ico-everyone::before {
      content: url("../images/icon/icon-everyone-g.svg"); }
    .card-green:hover .category {
      color: var(--green); }
    .card-green:hover .date {
      background-image: url("../images/arrow-g.svg"); }
  .card-pink {
    color: var(--salmon);
    border-color: var(--salmon); }
    .card-pink::before {
      background-color: var(--salmon); }
    .card-pink .category {
      background-color: var(--salmon); }
    .card-pink .ico-light::before {
      content: url("../images/icon/icon-light-s.svg"); }
    .card-pink .ico-flask::before {
      content: url("../images/icon/icon-flask-s.svg"); }
    .card-pink .ico-search::before {
      content: url("../images/icon/icon-search-s.svg"); }
    .card-pink .ico-earth::before {
      content: url("../images/icon/icon-earth-s.svg"); }
    .card-pink .ico-leef::before {
      content: url("../images/icon/icon-leef-s.svg"); }
    .card-pink .ico-book::before {
      content: url("../images/icon/icon-book-s.svg"); }
    .card-pink .ico-helmet::before {
      content: url("../images/icon/icon-helmet-s.svg"); }
    .card-pink .ico-key::before {
      content: url("../images/icon/icon-key-s.svg"); }
    .card-pink .ico-graph::before {
      content: url("../images/icon/icon-graph-s.svg"); }
    .card-pink .ico-composition::before {
      content: url("../images/icon/icon-composition-s.svg"); }
    .card-pink .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs-s.svg"); }
    .card-pink .ico-interview::before {
      content: url("../images/icon/icon-interview-s.svg"); }
    .card-pink .ico-health::before {
      content: url("../images/icon/icon-health-s.svg"); }
    .card-pink .ico-festival::before {
      content: url("../images/icon/icon-festival-s.svg"); }
    .card-pink .ico-map::before {
      content: url("../images/icon/icon-map-s.svg"); }
    .card-pink .ico-news::before {
      content: url("../images/icon/icon-news-s.svg"); }
    .card-pink .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy-s.svg"); }
    .card-pink .ico-weather::before {
      content: url("../images/icon/icon-weather-s.svg"); }
    .card-pink .ico-food::before {
      content: url("../images/icon/icon-food-s.svg"); }
    .card-pink .ico-es::before {
      content: url("../images/icon/icon-es-s.svg"); }
    .card-pink .ico-jhs::before {
      content: url("../images/icon/icon-jhs-s.svg"); }
    .card-pink .ico-hs::before {
      content: url("../images/icon/icon-hs-s.svg"); }
    .card-pink .ico-everyone::before {
      content: url("../images/icon/icon-everyone-s.svg"); }
    .card-pink:hover .category {
      color: var(--salmon); }
    .card-pink:hover .date {
      background-image: url("../images/arrow-s.svg"); }
  .card-blue {
    color: var(--cyan);
    border-color: var(--cyan); }
    .card-blue::before {
      background-color: var(--cyan); }
    .card-blue .category {
      background-color: var(--cyan); }
    .card-blue .ico-light::before {
      content: url("../images/icon/icon-light-c.svg"); }
    .card-blue .ico-flask::before {
      content: url("../images/icon/icon-flask-c.svg"); }
    .card-blue .ico-search::before {
      content: url("../images/icon/icon-search-c.svg"); }
    .card-blue .ico-earth::before {
      content: url("../images/icon/icon-earth-c.svg"); }
    .card-blue .ico-leef::before {
      content: url("../images/icon/icon-leef-c.svg"); }
    .card-blue .ico-book::before {
      content: url("../images/icon/icon-book-c.svg"); }
    .card-blue .ico-helmet::before {
      content: url("../images/icon/icon-helmet-c.svg"); }
    .card-blue .ico-key::before {
      content: url("../images/icon/icon-key-c.svg"); }
    .card-blue .ico-graph::before {
      content: url("../images/icon/icon-graph-c.svg"); }
    .card-blue .ico-composition::before {
      content: url("../images/icon/icon-composition-c.svg"); }
    .card-blue .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs-c.svg"); }
    .card-blue .ico-interview::before {
      content: url("../images/icon/icon-interview-c.svg"); }
    .card-blue .ico-health::before {
      content: url("../images/icon/icon-health-c.svg"); }
    .card-blue .ico-festival::before {
      content: url("../images/icon/icon-festival-c.svg"); }
    .card-blue .ico-map::before {
      content: url("../images/icon/icon-map-c.svg"); }
    .card-blue .ico-news::before {
      content: url("../images/icon/icon-news-c.svg"); }
    .card-blue .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy-c.svg"); }
    .card-blue .ico-weather::before {
      content: url("../images/icon/icon-weather-c.svg"); }
    .card-blue .ico-food::before {
      content: url("../images/icon/icon-food-c.svg"); }
    .card-blue .ico-es::before {
      content: url("../images/icon/icon-es-c.svg"); }
    .card-blue .ico-jhs::before {
      content: url("../images/icon/icon-jhs-c.svg"); }
    .card-blue .ico-hs::before {
      content: url("../images/icon/icon-hs-c.svg"); }
    .card-blue .ico-everyone::before {
      content: url("../images/icon/icon-everyone-c.svg"); }
    .card-blue:hover .category {
      color: var(--cyan); }
    .card-blue:hover .date {
      background-image: url("../images/arrow-c.svg"); }
  .card-purple {
    color: var(--purple);
    border-color: var(--purple); }
    .card-purple::before {
      background-color: var(--purple); }
    .card-purple .category {
      background-color: var(--purple); }
    .card-purple .ico-light::before {
      content: url("../images/icon/icon-light-p.svg"); }
    .card-purple .ico-flask::before {
      content: url("../images/icon/icon-flask-p.svg"); }
    .card-purple .ico-search::before {
      content: url("../images/icon/icon-search-p.svg"); }
    .card-purple .ico-earth::before {
      content: url("../images/icon/icon-earth-p.svg"); }
    .card-purple .ico-leef::before {
      content: url("../images/icon/icon-leef-p.svg"); }
    .card-purple .ico-book::before {
      content: url("../images/icon/icon-book-p.svg"); }
    .card-purple .ico-helmet::before {
      content: url("../images/icon/icon-helmet-p.svg"); }
    .card-purple .ico-key::before {
      content: url("../images/icon/icon-key-p.svg"); }
    .card-purple .ico-graph::before {
      content: url("../images/icon/icon-graph-p.svg"); }
    .card-purple .ico-composition::before {
      content: url("../images/icon/icon-composition-p.svg"); }
    .card-purple .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs-p.svg"); }
    .card-purple .ico-interview::before {
      content: url("../images/icon/icon-interview-p.svg"); }
    .card-purple .ico-health::before {
      content: url("../images/icon/icon-health-p.svg"); }
    .card-purple .ico-festival::before {
      content: url("../images/icon/icon-festival-p.svg"); }
    .card-purple .ico-map::before {
      content: url("../images/icon/icon-map-p.svg"); }
    .card-purple .ico-news::before {
      content: url("../images/icon/icon-news-p.svg"); }
    .card-purple .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy-p.svg"); }
    .card-purple .ico-weather::before {
      content: url("../images/icon/icon-weather-p.svg"); }
    .card-purple .ico-food::before {
      content: url("../images/icon/icon-food-p.svg"); }
    .card-purple .ico-es::before {
      content: url("../images/icon/icon-es-p.svg"); }
    .card-purple .ico-jhs::before {
      content: url("../images/icon/icon-jhs-p.svg"); }
    .card-purple .ico-hs::before {
      content: url("../images/icon/icon-hs-p.svg"); }
    .card-purple .ico-everyone::before {
      content: url("../images/icon/icon-everyone-p.svg"); }
    .card-purple:hover .category {
      color: var(--purple); }
    .card-purple:hover .date {
      background-image: url("../images/arrow-p.svg"); }
  .card-indigo {
    color: var(--indigo);
    border-color: var(--indigo); }
    .card-indigo::before {
      background-color: var(--indigo); }
    .card-indigo .category {
      background-color: var(--indigo); }
    .card-indigo .ico-light::before {
      content: url("../images/icon/icon-light-i.svg"); }
    .card-indigo .ico-flask::before {
      content: url("../images/icon/icon-flask-i.svg"); }
    .card-indigo .ico-search::before {
      content: url("../images/icon/icon-search-i.svg"); }
    .card-indigo .ico-earth::before {
      content: url("../images/icon/icon-earth-i.svg"); }
    .card-indigo .ico-leef::before {
      content: url("../images/icon/icon-leef-i.svg"); }
    .card-indigo .ico-book::before {
      content: url("../images/icon/icon-book-i.svg"); }
    .card-indigo .ico-helmet::before {
      content: url("../images/icon/icon-helmet-i.svg"); }
    .card-indigo .ico-key::before {
      content: url("../images/icon/icon-key-i.svg"); }
    .card-indigo .ico-graph::before {
      content: url("../images/icon/icon-graph-i.svg"); }
    .card-indigo .ico-composition::before {
      content: url("../images/icon/icon-composition-i.svg"); }
    .card-indigo .ico-SDGs::before {
      content: url("../images/icon/icon-SDGs-i.svg"); }
    .card-indigo .ico-interview::before {
      content: url("../images/icon/icon-interview-i.svg"); }
    .card-indigo .ico-health::before {
      content: url("../images/icon/icon-health-i.svg"); }
    .card-indigo .ico-festival::before {
      content: url("../images/icon/icon-festival-i.svg"); }
    .card-indigo .ico-map::before {
      content: url("../images/icon/icon-map-i.svg"); }
    .card-indigo .ico-news::before {
      content: url("../images/icon/icon-news-i.svg"); }
    .card-indigo .ico-politicsy::before {
      content: url("../images/icon/icon-politicsy-i.svg"); }
    .card-indigo .ico-weather::before {
      content: url("../images/icon/icon-weather-i.svg"); }
    .card-indigo .ico-food::before {
      content: url("../images/icon/icon-food-i.svg"); }
    .card-indigo .ico-es::before {
      content: url("../images/icon/icon-es-i.svg"); }
    .card-indigo .ico-jhs::before {
      content: url("../images/icon/icon-jhs-i.svg"); }
    .card-indigo .ico-hs::before {
      content: url("../images/icon/icon-hs-i.svg"); }
    .card-indigo .ico-everyone::before {
      content: url("../images/icon/icon-everyone-i.svg"); }
    .card-indigo:hover .category {
      color: var(--indigo); }
    .card-indigo:hover .date {
      background-image: url("../images/arrow-i.svg"); }
  .card-list__inner {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap; }

.movie-list__inner {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%; }

/*  */
.btns {
  display: flex;
  flex-wrap: wrap;
  max-width: 788px;
  margin-left: auto;
  margin-right: auto; }
  .btns .btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 48%;
    height: 120px;
    background-color: var(--white);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2.6369px 2.6369px 4.3948px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    transition: box-shadow .3s ease,transform .3s ease; }
    .btns .btn:nth-child(2n) {
      margin-left: 4%; }
    .btns .btn:hover {
      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.06);
      transform: scale(105%); }

/*# sourceMappingURL=style.css.map */