@charset "UTF-8";
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes left-to-normal {
  from {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes left-to-normal {
  from {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes right-to-normal {
  from {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes right-to-normal {
  from {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

section, article, main, header, footer {
  display: block;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

@media (max-width: 767px) {
  html {
    font-size: 2.66vw;
  }
}

body {
  font-size: 1.5rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
  line-height: 2;
  color: #1E1E1E;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

p:not([class]) + p:not([class]) {
  margin-top: 2em;
}

@media (max-width: 768px) {
  p:not([class]) + p:not([class]) {
    margin-top: 1.5em;
  }
}

a {
  color: inherit;
}

a[class] {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

sup {
  line-height: 1;
  vertical-align: text-top;
  font-size: 70%;
}

small {
  font-size: 70%;
}

/*
#styleguide

@components

```
<div class="c-AnimationSlide js-Effect">
  <img src="/build/images/scholarship/index/photo-02.jpg" srcset="/build/images/scholarship/index/photo-02@2x.jpg 2x" alt="" width="585" height="585" loading="lazy" class="c-AnimationSlide__Item">
</div>
```

*/
.c-AnimationSlide {
  overflow: hidden;
  position: relative;
}

.c-AnimationSlide::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.c-AnimationSlide .c-AnimationSlide__Item {
  opacity: 0;
  z-index: 1;
}

.c-AnimationSlide.is-Entry::before {
  background: #1E1E1E;
  -webkit-animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
  animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
}

.c-AnimationSlide.is-Entry .c-AnimationSlide__Item {
  -webkit-animation: fade-in 0.5s step-end both;
  animation: fade-in 0.5s step-end both;
}

/*
#styleguide


```
<a href="#"class="c-ArticleCard">
  <div class="c-ArticleCard__Thumbnail">
    <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
  </div>
  <div class="c-ArticleCard__Body">
    <div class="c-ArticleCard__Tag">
      <div class="c-ListCategory">
        <ul class="c-ListCategory__List">
          <li class="c-ListCategory__Item">2期生</li>
          <li class="c-ListCategory__Item">インタビュー</li>
        </ul>
      </div>
    </div>
    <h3 class="c-ArticleCard__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
    <div class="c-ArticleCard__DateTime"><time datetime="2020-01-21"class="c-TextDate">2020.01.21</time></div>
  </div>
</a>
```

*/
.c-ArticleCard {
  display: flex;
  flex-flow: column;
  height: 100%;
  transition: opacity 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-ArticleCard:hover {
    opacity: 0.4;
  }
}

@media (max-width: 768px) {
  .c-ArticleCard {
    flex-flow: row;
    align-items: flex-start;
  }
}

.c-ArticleCard__Thumbnail {
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .c-ArticleCard__Thumbnail {
    width: 200px;
    flex-shrink: 0;
    margin-right: 20px;
  }
}

@media (max-width: 767px) {
  .c-ArticleCard__Thumbnail {
    width: 10rem;
    margin-right: 1rem;
  }
}

.c-ArticleCard__Thumbnail::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.c-ArticleCard__Thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.c-ArticleCard.js-Effect .c-ArticleCard__Thumbnail {
  overflow: hidden;
}

.c-ArticleCard.js-Effect .c-ArticleCard__Thumbnail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.c-ArticleCard.js-Effect .c-ArticleCard__Thumbnail img {
  opacity: 0;
  z-index: 1;
}

.c-ArticleCard.js-Effect.is-Entry .c-ArticleCard__Thumbnail::before {
  background: #1E1E1E;
  -webkit-animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
  animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
}

.c-ArticleCard.js-Effect.is-Entry .c-ArticleCard__Thumbnail img {
  -webkit-animation: fade-in 0.5s step-end both;
  animation: fade-in 0.5s step-end both;
}

.c-ArticleCard__Body {
  width: 100%;
  flex-grow: 1;
  position: relative;
}

@media (max-width: 768px) {
  .c-ArticleCard__Body {
    padding: 0 0 2rem;
  }
}

.c-ArticleCard__Tag {
  margin-top: 0.8rem;
  font-size: 1.4rem;
  color: #818181;
}

@media (max-width: 768px) {
  .c-ArticleCard__Tag {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .c-ArticleCard__Tag {
    font-size: 1.3rem;
  }
}

.c-ArticleCard__Headline {
  margin-top: 0.8rem;
  font-size: 1.8rem;
  overflow: hidden;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .c-ArticleCard__Headline {
    -webkit-line-clamp: 3;
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  .c-ArticleCard__Headline {
    font-size: 1.4rem;
  }
}

.c-ArticleCard__Arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2rem;
  display: none;
}

@media (max-width: 768px) {
  .c-ArticleCard__Arrow {
    display: block;
  }
}

.c-ArticleCard__Arrow use {
  fill: #1E1E1E;
}

.c-ArticleCard2 {
  display: block;
  line-height: 1.6;
  transition: opacity 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-ArticleCard2:hover {
    opacity: 0.4;
  }
}

.c-ArticleCard2__Thumbnail {
  width: 100%;
  position: relative;
}

.c-ArticleCard2__Thumbnail::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.c-ArticleCard2__Thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}

.c-ArticleCard2:hover .c-ArticleCard2__Thumbnail img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.c-ArticleCard2.js-Effect .c-ArticleCard2__Thumbnail {
  overflow: hidden;
}

.c-ArticleCard2.js-Effect .c-ArticleCard2__Thumbnail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.c-ArticleCard2.js-Effect .c-ArticleCard2__Thumbnail img {
  opacity: 0;
  z-index: 1;
}

.c-ArticleCard2.js-Effect.is-Entry .c-ArticleCard2__Thumbnail::before {
  background: #1E1E1E;
  -webkit-animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
  animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
}

.c-ArticleCard2.js-Effect.is-Entry .c-ArticleCard2__Thumbnail img {
  -webkit-animation: fade-in 0.5s step-end both;
  animation: fade-in 0.5s step-end both;
}

.c-ArticleCard2__Tag {
  font-size: 14px;
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .c-ArticleCard2__Tag {
    font-size: 1.3rem;
  }
}

.c-ArticleCard2__Name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.6;
  margin-top: 0.5rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .c-ArticleCard2__Name {
    font-size: 1.8rem;
  }
}

.c-ArticleCard2__Genre {
  font-size: 14px;
  margin-top: 1rem;
  color: #818181;
}

@media (max-width: 767px) {
  .c-ArticleCard2__Genre {
    font-size: 1.3rem;
  }
}

.c-ArticleCard2__SubGenre {
  font-size: 12px;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .c-ArticleCard2__SubGenre {
    font-size: 1rem;
  }
}

/*
#styleguide

奨学生ページの詳細などで使用するニュース

```
<div class="c-ArticleList">
  <ul class="c-ArticleList__List">
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
    <li class="c-ArticleList__Item">
      コンテンツ
    </li>
  </ul>
</div>
```
*/
/*
#styleguide

example

```
<div class="c-ArticleList">
  <ul class="c-ArticleList__List">
    <li class="c-ArticleList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-ArticleList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-ArticleList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-ArticleList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>
```

*/
.c-ArticleList {
  --column-size: 25%;
  --margin-size: 20px;
}

.c-ArticleList.--Column2 {
  --column-size: 50%;
  --margin-size: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .c-ArticleList.--Column2 {
    max-width: none;
  }
}

.c-ArticleList.--Column3 {
  --column-size: 33.33%;
  --margin-size: 60px;
}

.c-ArticleList__List {
  display: flex;
  flex-wrap: wrap;
  margin-top: -40px;
  justify-content: center;
  margin-left: -10px;
  margin-right: -10px;
}

@media (max-width: 768px) {
  .c-ArticleList__List {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-bottom: solid 1px #B9B9B9;
  }
}

.c-ArticleList__Item {
  width: calc(var(--column-size) - var(--margin-size));
  margin-top: 40px;
  margin-left: calc(var(--margin-size) / 2);
  margin-right: calc(var(--margin-size) / 2);
}

@media (max-width: 768px) {
  .c-ArticleList__Item {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: solid 1px #B9B9B9;
  }
}

/*
#styleguide

*/
.c-AspectBox {
  position: relative;
}

.c-AspectBox::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.c-AspectBox__Item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/*
#styleguide

色付きのボックス

.t-Contents__Section クラスの状態によって色を自動変更

modifierクラスにて強制変更可能

```
```
*/
.c-BoxColor {
  border-radius: 1rem;
  background: var(--section-color-secondary, #FFFFFF);
  padding-top: 60px;
  padding-bottom: 80px;
}

@media (max-width: 767px) {
  .c-BoxColor {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
}

.c-BoxColor.--White {
  background: #FFFFFF;
}

.c-BoxColor.--Gray {
  background: #EEEEEE;
}

.c-BoxColor.--Preset1 {
  border-radius: 0;
  padding: 40px 60px;
  height: 100%;
}

@media (max-width: 1023px) {
  .c-BoxColor.--Preset1 {
    padding: 40px 20px;
  }
}

@media (max-width: 767px) {
  .c-BoxColor.--Preset1 {
    padding: 4rem 2rem;
  }
}

.c-Breadcrumb {
  color: #818181;
  font-size: 1.3rem;
}

.c-Breadcrumb__Link {
  text-decoration: none;
}

.c-Breadcrumb__Link:hover {
  text-decoration: underline;
}

/*
#styleguide

*/
/*
#styleguide

アイコンがついているだけのアコーディオン用のボタン

```
<button type="button" class="c-ButtonAccordion js-Accordion">
ボタンですよ
</button>
```
*/
/*
#styleguide

FAQとの組み合わせ

@example

```
<button type="button" class="c-ButtonAccordion js-Accordion">
  <div class="c-Faq --Question">
    <div class="c-Faq__Inner">
      <p class="c-Faq__Title">活動支援をいただいた場合、他に何か対応しないといけないことはありますか？</p>
    </div>
  </div>
</button>
```
*/
.c-ButtonAccordion {
  --color: #1E1E1E;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  position: relative;
  padding-right: 5rem;
  text-align: inherit;
  cursor: pointer;
  width: 100%;
}

.c-ButtonAccordion::before, .c-ButtonAccordion::after {
  content: '';
  display: block;
  height: 1px;
  width: 1.1rem;
  background: var(--color);
  position: absolute;
  right: 0;
  top: 50%;
  right: 20px;
}

.c-ButtonAccordion::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.c-ButtonAccordion.is-State--Active:after {
  display: none;
}

.c-ButtonAccordionText {
  --color: #1E1E1E;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  position: relative;
  padding: 4px 40px;
  color: var(--color);
  cursor: pointer;
  font-size: 1.6rem;
  border-radius: 0.3rem;
}

@media (max-width: 767px) {
  .c-ButtonAccordionText {
    width: 100%;
    padding: 0.4rem 3rem 0.4rem 2rem;
  }
}

.c-ButtonAccordionText::before, .c-ButtonAccordionText::after {
  content: '';
  display: block;
  height: 1px;
  width: 1.1rem;
  background: var(--color);
  position: absolute;
  right: 0;
  top: 50%;
  right: 1rem;
}

.c-ButtonAccordionText::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.c-ButtonAccordionText.is-State--Active:after {
  display: none;
}

.c-ButtonAccordionText:hover {
  background: rgba(255, 255, 255, 0.4);
}

.c-ButtonAccordionText.--White {
  --color: #FFFFFF;
}

/*
#styleguide

アンカー用のボタン

- hrefが#で始まるものは自動的にアンカーリンクの対象


```
<a href="#section-01" class="c-ButtonAnchor">
  <span class="c-ButtonAnchor__Number">01</span>
  <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
  <span class="c-ButtonAnchor__Text"><span class="c-TextBreake">クリエイター<wbr>奨学金</span></span>
</a>
```
*/
.c-ButtonAnchor {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 10px 10px 40px;
  box-shadow: 0 0 0 2px #1E1E1E inset;
  width: 100%;
  height: 100%;
  position: relative;
}

@media (max-width: 767px) {
  .c-ButtonAnchor {
    padding: 1rem 1rem 4rem;
  }
}

@media (min-width: 1024.1px) {
  .c-ButtonAnchor:hover {
    box-shadow: 0 0 0 4px #1E1E1E inset;
  }
}

.c-ButtonAnchor::before {
  content: '';
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-bottom: solid 2px #1E1E1E;
  border-right: solid 2px #1E1E1E;
  position: absolute;
  bottom: 2rem;
  right: 50%;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-ButtonAnchor__Number {
  font-size: 3.2rem;
  font-family: "hiragino kaku gothic pro", helvetica, arial, sans-serif;
  font-weight: 800;
}

.c-ButtonAnchor__Catch {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.c-ButtonAnchor__Text {
  font-size: 2.4rem;
  margin-top: 0.8rem;
  line-height: 1.6;
  text-align: center;
}

/*
#styleguide

ボーダータイプのボタン

@atom

```
<a href="#"class="c-ButtonBorder">
  <span class="c-ButtonBorder__Text">寄附についての詳細を見る</span>
  <span class="c-ButtonBorder__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

白バージョン

```
<a href="#"class="c-ButtonBorder --White">
  <span class="c-ButtonBorder__Text">寄附についての詳細を見る</span>
  <span class="c-ButtonBorder__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

アイコン

- Pdf

```
<a href="#"class="c-ButtonBorder">
  <span class="c-ButtonBorder__Icon --Pdf">
    <span class="c-Icon --Pdf">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#pdf"></use>
      </svg>
    </span>
  </span>
  <span class="c-ButtonBorder__Text">プロフィールブック</span>
  <span class="c-ButtonBorder__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
.c-ButtonBorder {
  --color: #1E1E1E;
  --bg-color: transparent;
  --border-color: #1E1E1E;
  border: solid 2px var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 40px;
  color: var(--color);
  background: var(--bg-color);
  min-height: 65px;
  position: relative;
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  .c-ButtonBorder {
    padding: 0.4rem 2.4rem 0.4rem 2.4rem;
    min-height: 5.5rem;
  }
}

@media (min-width: 1024.1px) {
  .c-ButtonBorder:hover {
    --color: #FFFFFF;
    --bg-color: #1E1E1E;
  }
}

.c-ButtonBorder.--White {
  --color: #FFFFFF;
  --bg-color: transparent;
  --border-color: #FFFFFF;
}

@media (min-width: 1024.1px) {
  .c-ButtonBorder.--White:hover {
    --color: #1E1E1E;
    --bg-color: #FFFFFF;
  }
}

.c-ButtonBorder__Icon {
  margin-right: 1rem;
}

.c-ButtonBorder__Icon use {
  fill: var(--color);
}

.c-ButtonBorder__Icon.--Pdf {
  width: 1.5rem;
}

.c-ButtonBorder__Text {
  display: block;
  line-height: 1.4;
  text-align: center;
}

.c-ButtonBorder__Arrow {
  position: absolute;
  right: 20px;
  width: 0.8rem;
}

@media (max-width: 767px) {
  .c-ButtonBorder__Arrow {
    right: 1rem;
  }
}

.c-ButtonBorder__Arrow use {
  fill: var(--color);
}

.c-ButtonBorder__Arrow.--Back {
  right: auto !important;
  left: 20px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .c-ButtonBorder__Arrow.--Back {
    left: 1.5rem;
  }
}

/*
#styleguide

@atom

```
<a href="/scholarship/guideline/" class="c-ButtonConversion">
  <p class="c-ButtonConversion__Headline">奨学金<br>【第6期生】募集中</p>
  <div class="c-ButtonConversion__Date">
    <p class="c-ButtonConversion__Row">
      <span class="c-ButtonConversion__Label">前期</span>
      <span class="c-ButtonConversion__Date">2022.<strong>1.31</strong>まで</span>
    </p>
    <p class="c-ButtonConversion__Row">
      <span class="c-ButtonConversion__Label">後期</span>
      <span class="c-ButtonConversion__Date">2022.<span>3.31</span>まで</span>
    </p>
  </div>
</a>
```

*/
.c-ButtonConversion {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  width: 190px;
  height: 190px;
  background: #1E1E1E;
  border: solid 1px #B9B9B9;
  color: #FFFFFF;
  padding-bottom: 10px;
}

@media (min-width: 1024.1px) {
  .c-ButtonConversion:hover {
    background: #fff;
    color: #1E1E1E;
    border: solid 1px #1E1E1E;
  }
}

@media (max-width: 767px) {
  .c-ButtonConversion {
    width: 100%;
    height: 5.5rem;
    flex-flow: row;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 157fr 178fr;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }
}

.c-ButtonConversion__Headline {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-ButtonConversion__Headline {
    align-self: center;
    text-align: left;
    padding-left: 2rem;
    font-feature-settings: 'palt';
    -webkit-font-feature-settings: 'palt';
  }
}

@media (max-width: 767px) {
  .c-ButtonConversion__Headline > span {
    font-size: 1.3rem;
  }
}

.c-ButtonConversion__Body {
  border-top: solid 1px #B9B9B9;
  margin-top: 8px;
  padding-top: 8px;
  line-height: 1.6;
  width: 70%;
  text-align: center;
}

@media (max-width: 767px) {
  .c-ButtonConversion__Body {
    background: #EEEEEE;
    color: #1E1E1E;
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    border-left: solid 1px #B9B9B9;
    margin-left: 1rem;
    padding-left: 1rem;
  }
}

.c-ButtonConversion__Days {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.c-ButtonConversion__Row {
  font-size: 14px;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .c-ButtonConversion__Row {
    display: flex;
    align-items: baseline;
    font-size: 1.5rem;
  }
}

.c-ButtonConversion__Label {
  display: block;
  margin-right: 0.5em;
}

.c-ButtonConversion__Date {
  display: block;
}

@media (max-width: 767px) {
  .c-ButtonConversion__Date {
    font-size: 1.3rem;
  }
}

.c-ButtonConversion__Date > strong {
  font-size: 22px;
}

@media (max-width: 767px) {
  .c-ButtonConversion__Date > strong {
    font-size: 1.8rem;
  }
}

/*
#styleguide

```
<button type="button" class="c-ButtonDropdown">過去の展示作品を見る</button>
```
*/
.c-ButtonDropdown {
  --color: #1E1E1E;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: 100%;
  border-top: solid 1px var(--color);
  border-bottom: solid 1px var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  position: relative;
  padding: 8px 40px;
  color: var(--color);
  cursor: pointer;
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  .c-ButtonDropdown {
    padding: 0.4rem 2.4rem 0.4rem 2.4rem;
    min-height: 5.5rem;
  }
}

.c-ButtonDropdown::before, .c-ButtonDropdown::after {
  content: '';
  display: block;
  height: 2px;
  width: 1.1rem;
  background: var(--color);
  position: absolute;
  right: 0;
  top: 50%;
  right: 2rem;
}

@media (max-width: 767px) {
  .c-ButtonDropdown::before, .c-ButtonDropdown::after {
    right: 1rem;
  }
}

.c-ButtonDropdown::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.c-ButtonDropdown.is-State--Active:after {
  display: none;
}

@media (max-width: 767px) {
  .c-ButtonDropdown.is_post {
    padding-left: 0rem;
  }
}

.c-ButtonDropdown.--White {
  --color: #FFFFFF;
}

/*
#styleguide

ボーダータイプのボタン

@atom

```
<a href="#"class="c-ButtonFill">
  <span class="c-ButtonFill__Text">寄附についての詳細を見る</span>
  <span class="c-ButtonFill__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

白バージョン

```
<a href="#"class="c-ButtonFill --White">
  <span class="c-ButtonFill__Text">寄附についての詳細を見る</span>
  <span class="c-ButtonFill__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

アイコン付き

- .c-ButtonFill__Icon--Pdf
- .c-ButtonFill__Icon--Pdf
- .c-ButtonFill__Icon--Pdf
- .c-ButtonFill__Icon--Pdf


```
<a href="#"class="c-ButtonFill">
  <span class="c-ButtonFill__Icon --Pdf">
    <span class="c-Icon --Pdf">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#pdf"></use>
      </svg>
    </span>
  </span>
  <span class="c-ButtonFill__Text">プロフィールブック</span>
  <span class="c-ButtonFill__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

少し小さめのサイズ

@modify

```
<a href="#"class="c-ButtonFill --Navigation">
  <span class="c-ButtonFill__Text">エントリーはこちら</span>
  <span class="c-ButtonFill__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
/*
#styleguide

大きめ

@modify

```
<a href="#"class="c-ButtonFill --Large">
  <span class="c-ButtonFill__Icon --Mail">
    <span class="c-Icon --Mail03">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#mail-03"></use>
      </svg>
    </span>
  </span>
  <span class="c-ButtonFill__Text">エントリーはこちら</span>
  <span class="c-ButtonFill__Arrow">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
.c-ButtonFill {
  --button-height: 65px;
  --font-size: 1.6rem;
  --color: #FFFFFF;
  --bg-color: #1E1E1E;
  --border-color: #1E1E1E;
  --arrow-width: 0.8rem;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 40px;
  color: var(--color);
  background: var(--bg-color);
  border: solid 2px var(--border-color);
  min-height: var(--button-height);
  position: relative;
  font-size: var(--font-size);
}

@media (max-width: 767px) {
  .c-ButtonFill {
    --font-size: 1.4rem;
    --button-height: 5.5rem;
    --arrow-width: 0.6rem;
    padding: 0.8rem 2rem;
  }
}

@media (min-width: 1024.1px) {
  .c-ButtonFill:hover {
    --bg-color: transparent;
    --color: #1E1E1E;
  }
}

.c-ButtonFill.--White {
  --color: #1E1E1E;
  --bg-color: #FFFFFF;
  --border-color: #FFFFFF;
}

@media (min-width: 1024.1px) {
  .c-ButtonFill.--White:hover {
    --bg-color: transparent;
    --color: #FFFFFF;
  }
}

.c-ButtonFill.--Navigation {
  --button-height: 4rem;
  --font-size: 1.3rem;
}

.c-ButtonFill.--Large {
  --button-height: 85px;
  --font-size: 24px;
  --arrow-width: 14px;
}

@media (max-width: 767px) {
  .c-ButtonFill.--Large {
    --button-height: 5.5rem;
    --font-size: 1.6rem;
    --arrow-width: 0.8rem;
  }
}

.c-ButtonFill:disabled, .c-ButtonFill.--Disabled {
  pointer-events: none;
  --color: #FFFFFF;
  --bg-color: #EEEEEE;
  --border-color: #EEEEEE;
}

.c-ButtonFill__Icon {
  margin-right: 1rem;
  width: var(--icon-width, 0px);
}

.c-ButtonFill__Icon use {
  fill: var(--color);
}

.c-ButtonFill__Icon.--Pdf {
  --icon-width: 1.5rem;
}

.c-ButtonFill__Icon.--Mail {
  --icon-width: 1.8rem;
}

.c-ButtonFill.--Large .c-ButtonFill__Icon.--Mail {
  --icon-width: 3.2rem;
}

@media (max-width: 767px) {
  .c-ButtonFill.--Large .c-ButtonFill__Icon.--Mail {
    --icon-width: 1.8rem;
  }
}

.c-ButtonFill__Text {
  display: block;
}

.c-ButtonFill__Arrow {
  position: absolute;
  right: 20px;
  width: var(--arrow-width, 0.8rem);
}

@media (max-width: 767px) {
  .c-ButtonFill__Arrow {
    right: 1rem;
  }
}

.c-ButtonFill__Arrow use {
  fill: var(--color);
}

.c-ButtonFill__Arrow.--Back {
  right: auto;
  left: 20px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .c-ButtonFill__Arrow.--Back {
    left: 1.5rem;
  }
}

/*
#styleguide

メニュー用のボタン

```
<button type="button"class="c-ButtonMenu">
  <span class="c-ButtonMenu__Bar"></span>
  <span class="c-ButtonMenu__Bar"></span>
  <span class="c-ButtonMenu__Bar"></span>
  <span class="c-ButtonMenu__Bar"></span>
  <span class="c-ButtonMenu__Bar"></span>
</button>
```

*/
.c-ButtonMenu {
  --primary-color: #FFFFFF;
  --secondary-color: #1E1E1E;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  display: block;
  background: var(--primary-color);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: relative;
}

.c-ButtonMenu__Bar {
  height: 0.2rem;
  position: absolute;
  background: var(--secondary-color);
  width: 60%;
  left: 20%;
  display: block;
}

.c-ButtonMenu__Bar:nth-child(1) {
  top: calc(50% - 0.9rem);
  transition: width 0.2s ease;
  transition-delay: 0.2s;
}

.c-ButtonMenu__Bar:nth-child(2) {
  top: calc(50% - 0.1rem);
  transition: width 0.2s ease;
  transition-delay: 0.1s;
}

.c-ButtonMenu__Bar:nth-child(3) {
  bottom: calc(50% - 0.9rem);
  transition: width 0.2s ease;
  transition-delay: 0s;
}

.c-ButtonMenu__Bar:nth-child(4) {
  width: 0%;
  left: 50%;
  bottom: calc(50% - 1px);
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  transition: width 0.2s ease;
  transition-delay: 0s;
}

.c-ButtonMenu__Bar:nth-child(5) {
  width: 0%;
  left: 50%;
  bottom: calc(50% - 1px);
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  transition: width 0.2s ease;
  transition-delay: 0s;
}

.c-ButtonMenu.is-State--Active .c-ButtonMenu__Bar:nth-child(1) {
  width: 0%;
  transition: width 0.2s ease;
  transition-delay: 0s;
}

.c-ButtonMenu.is-State--Active .c-ButtonMenu__Bar:nth-child(2) {
  width: 0%;
  transition: width 0.2s ease;
  transition-delay: 0.1s;
}

.c-ButtonMenu.is-State--Active .c-ButtonMenu__Bar:nth-child(3) {
  width: 0%;
  transition: width 0.2s ease;
  transition-delay: 0.2s;
}

.c-ButtonMenu.is-State--Active .c-ButtonMenu__Bar:nth-child(4) {
  width: 60%;
  transition: width 0.2s ease;
  transition-delay: 0.5s;
}

.c-ButtonMenu.is-State--Active .c-ButtonMenu__Bar:nth-child(5) {
  width: 60%;
  transition: width 0.2s ease;
  transition-delay: 0.5s;
}

/*
#styleguide

headerのナビゲーション用のボタン（リンク）

ドロップダウンメニュー用と通常リンクで共有

*/
.c-ButtonNavigation {
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  height: 90px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--header-color);
}

@media (max-width: 1445px) {
  .c-ButtonNavigation {
    font-size: 12px;
  }
}

/*
#styleguide

```
<a href="#"class="c-ButtonPageTop">
  <span class="c-ButtonPageTop__Icon">
    <span class="c-Icon --ArrowBorderTop">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-top"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
.c-ButtonPageTop {
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.c-ButtonPageTop::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: #EEEEEE;
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
  transition: transform 0.1s ease, opacity 0.1s ease;
  transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-ButtonPageTop:hover::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.c-ButtonPageTop__Icon {
  position: absolute;
  width: 70%;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*
#styleguide

ボタンひとつ分のサイズのコンテナ

```
<div class="c-ButtonSingle">
  <a href="#"class="c-ButtonBorder">
    <span class="c-ButtonBorder__Text">KUMA EXHIBITION 2021</span>
    <span class="c-ButtonBorder__Arrow">
      <span class="c-Icon --ArrowBorderRight">
        <svg role="img">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
        </svg>
      </span>
    </span>
  </a>
</div>
```
*/
/*
#styleguide

```
<div class="c-ButtonSingle --MarginTop">
  <a href="#"class="c-ButtonBorder">
    <span class="c-ButtonBorder__Text">KUMA EXHIBITION 2021</span>
    <span class="c-ButtonBorder__Arrow">
      <span class="c-Icon --ArrowBorderRight">
        <svg role="img">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
        </svg>
      </span>
    </span>
  </a>
</div>
```
*/
.c-ButtonSingle {
  --width: 425px;
  max-width: var(--width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ButtonSingle {
    --width: 27.5rem;
  }
}

.c-ButtonSingle.--Large {
  --width: 55rem;
}

.c-ButtonSingle.--MarginTop {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .c-ButtonSingle.--MarginTop {
    margin-top: 4rem;
  }
}

.c-CatchNumber {
  font-size: 42px;
  text-align: center;
  font-family: "hiragino kaku gothic pro", helvetica, arial, sans-serif;
  font-weight: 800;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-CatchNumber {
    font-size: 3.2rem;
  }
}

/*
#styleguide
汎用チェックボックス

フィルター等で使用する汎用的なチェックボックス

@atom

```
<label class="c-CheckBoxLabel">
  <input type="checkbox"class="c-CheckBoxLabel__Input">
  <span class="c-CheckBoxLabel__Card">
    <span class="c-CheckBoxLabel__Icon"></span>
    <span class="c-CheckBoxLabel__Textn">ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</span>
  </span>
</label>
```
*/
.c-CheckBoxLabel {
  position: relative;
  display: flex;
  font-size: 1.4rem;
  line-height: 1.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  height: 100%;
}

.c-CheckBoxLabel__Input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.c-CheckBoxLabel__Card {
  width: 100%;
  border-radius: 3px;
  background: #5A5A5A;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 7px;
}

.c-CheckBoxLabel__Input:checked + .c-CheckBoxLabel__Card {
  color: #1E1E1E;
  background: #FFFFFF;
}

.c-CheckBoxLabel__Icon {
  width: 1.4rem;
  height: 1.4rem;
  border: solid 1px #fff;
  display: block;
  position: relative;
  flex-shrink: 0;
  margin-right: 1rem;
}

.c-CheckBoxLabel__Icon::before {
  content: '';
  display: block;
  width: 0.7rem;
  height: 1.2rem;
  border-right: solid 0.2rem #fff;
  border-bottom: solid 0.2rem #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  bottom: 10%;
  right: 65%;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  display: none;
}

.c-CheckBoxLabel__Input:checked + .c-CheckBoxLabel__Card .c-CheckBoxLabel__Icon {
  border-color: #1E1E1E;
  background: #1E1E1E;
}

.c-CheckBoxLabel__Input:checked + .c-CheckBoxLabel__Card .c-CheckBoxLabel__Icon::before {
  display: block;
}

.c-CheckBoxLabel__Textn {
  flex-grow: 1;
}

.c-ContactBox {
  background: #EEEEEE;
  padding-top: 70px;
  padding-bottom: 80px;
  padding-left: 4rem;
  padding-right: 4rem;
}

@media (max-width: 767px) {
  .c-ContactBox {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 767px) {
  .c-ContactBox {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
}

.c-ContactBox__Headline {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 767px) {
  .c-ContactBox__Headline {
    font-size: 1.6rem;
  }
}

.c-ContactBox__Button {
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .c-ContactBox__Button {
    margin-top: 3rem;
    max-width: none;
  }
}

/*
#styleguide

フッターコンバージョンエリア

@atom

```
<div class="c-ConversionArea">
  <div class="c-ConversionArea__Inner">
    <h2 class="c-ConversionArea__Headline">ご質問は下記のフォームより<br class="a-Visible--Tb">お問い合わせください。</h2>
    <div class="c-ConversionArea__Button">
      <a href="#"class="c-ButtonFill --Large">
        <span class="c-ButtonFill__Icon --Mail">
          <span class="c-Icon --Mail03">
            <svg role="img">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#mail-03"></use>
            </svg>
          </span>
        </span>
        <span class="c-ButtonFill__Text">エントリーはこちら</span>
        <span class="c-ButtonFill__Arrow">
          <span class="c-Icon --ArrowBorderRight">
            <svg role="img">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
            </svg>
          </span>
        </span>
      </a>
    </div>
  </div>
</div>
```

*/
.c-ConversionArea {
  background: #EEEEEE;
  padding-top: 7rem;
  padding-bottom: 8rem;
}

@media (max-width: 767px) {
  .c-ConversionArea {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
}

.c-ConversionArea__Inner {
  box-sizing: content-box;
  padding-left: 4rem;
  padding-right: 4rem;
}

@media (max-width: 767px) {
  .c-ConversionArea__Inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-ConversionArea__Headline {
  font-size: 1.8rem;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-ConversionArea__Headline {
    font-size: 1.8rem;
  }
}

.c-ConversionArea__Text {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
}

.c-ConversionArea__Button {
  margin-top: 3rem;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-ConversionArea__Button {
    max-width: none;
    margin-top: 2rem;
  }
}

/*
#styleguide

*/
.c-CreatorExhivition {
  display: grid;
  -webkit-column-gap: 60px;
  -moz-column-gap: 60px;
  column-gap: 60px;
  grid-template-columns: 280px 1fr;
}

@media (max-width: 767px) {
  .c-CreatorExhivition {
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    grid-template-columns: 1fr 1fr;
    padding-top: 1rem;
    background: #1E1E1E;
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

.c-CreatorExhivition__Image {
  grid-row: 1 / 3;
  grid-column: 1;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Image {
    grid-row: 1;
    grid-column: 2;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.c-CreatorExhivition__Profile1 {
  grid-row: 1;
  grid-column: 2;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Profile1 {
    padding-left: 2rem;
    padding-right: 2rem;
    color: #fff;
    grid-row: 1;
    grid-column: 1;
  }
}

.c-CreatorExhivition__Profile2 {
  grid-row: 2;
  grid-column: 2;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Profile2 {
    margin-top: 1rem;
    padding-top: 1rem;
    background: #fff;
    grid-row: 2;
    grid-column: 1 / 3;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-CreatorExhivition__Join {
  line-height: 1.4;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Join {
    font-size: 1.2rem;
  }
}

.c-CreatorExhivition__Name {
  font-size: 32px;
  margin-top: 10px;
  line-height: 1.4;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Name {
    margin-top: 1rem;
    font-size: 2.2rem;
  }
}

.c-CreatorExhivition__NameEn {
  font-size: 14px;
  color: #818181;
  line-height: 1.6;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__NameEn {
    margin-top: 0.4rem;
    font-size: 1.1rem;
  }
}

.c-CreatorExhivition__Genre {
  margin-top: 10px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__Genre {
    margin-top: 1rem;
    font-size: 1.3rem;
  }
}

.c-CreatorExhivition__SubGenre {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-CreatorExhivition__SubGenre {
    margin-top: 0.4rem;
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .c-CreatorExhivition__More {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

.c-Snses + .c-CreatorExhivition__More {
  margin-top: 2rem;
}

/*
#styleguide

*/
.c-DropdownMenu {
  position: relative;
}

.c-DropdownMenu__Navigation {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 30rem;
  background: #1E1E1E;
  overflow: auto;
  z-index: 100;
}

.c-DropdownMenu__List {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.c-DropdownMenu__Link {
  display: flex;
  padding: 1rem 2rem;
  color: #fff;
}

.c-DropdownMenu__Link:hover {
  background: #fff;
  color: #1E1E1E;
}

/*
#styleguide

@molecules

```
<div class="c-DropDownmenuList">
  <ul class="c-DropDownmenuList__List">
    <li class="c-DropDownmenuList__Item"><a href="#"class="c-LinkArrow">クリエイター奨学金について</a></li>
    <li class="c-DropDownmenuList__Item"><a href="#"class="c-LinkArrow">応募要項</a></li>
    <li class="c-DropDownmenuList__Item"><a href="#"class="c-LinkArrow">FAQ</a></li>
  </ul>
</div>
```

*/
.c-DropDownmenuList {
  overflow: hidden;
}

.c-DropDownmenuList__List {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -30px;
  margin-left: -50px;
  margin-right: -50px;
}

.c-DropDownmenuList__Item {
  margin-top: 30px;
  margin-left: 50px;
  margin-right: 50px;
}

/*
#styleguide

WordpressのWysi

*/
.c-EditorBasic *:first-child {
  margin-top: 0 !important;
}

.c-EditorBasic *:last-child {
  margin-bottom: 0 !important;
}

.c-EditorBasic p {
  display: inline-block;
  width: 100%;
}

.c-EditorBasic blockquote {
  font-size: 14px;
  border: solid 1px #B9B9B9;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px;
  display: block;
}

.c-EditorBasic ul li {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.c-EditorBasic ul li::before {
  content: '・';
}

.c-EditorBasic ol {
  counter-reset: item;
  padding-left: 2em;
  position: relative;
}

.c-EditorBasic ol li:before {
  counter-increment: item;
  content: counter(item) " .";
  position: absolute;
  left: 0;
}

/*
#styleguide

FAQ用のレイアウト

*/
.c-Faq {
  display: flex;
}

.c-Faq::before {
  content: var(--faq-content, "");
  flex-shrink: 0;
  width: 55px;
  font-size: 36px;
  color: var(--faq-color, inherit);
  line-height: 1;
}

@media (max-width: 767px) {
  .c-Faq::before {
    width: 3.6rem;
    font-size: 2.8rem;
  }
}

.c-Faq.--Question {
  --faq-content: 'Q.';
}

.c-Faq.--Answer {
  --faq-content: 'A.';
  --faq-color: #818181;
}

.c-Faq.--MarginTop {
  margin-top: 10px;
}

.c-Faq__Inner {
  flex-grow: 1;
  padding-top: 4px;
}

@media (max-width: 767px) {
  .c-Faq__Inner {
    padding-top: 0;
  }
}

.c-Faq__Title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .c-Faq__Title {
    font-size: 1.6rem;
  }
}

.c-FigureImage {
  display: block;
}

.c-FigureImage__Caption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

/*
#styleguide

*/
.c-FitCenter {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1023px) {
  .c-FitCenter.--DisabledLaptopLess {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}

/*
#styleguide

*/
.c-FloatingArea {
  position: fixed;
  z-index: 3000;
  right: 2rem;
  bottom: calc(2rem + constant(safe-area-inset-bottom));
  bottom: calc(2rem + env(safe-area-inset-bottom));
}

@media (max-width: 767px) {
  .c-FloatingArea {
    width: calc(100% - 4rem);
  }
}

.c-Footer {
  background: #818181;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #fff;
}

@media (max-width: 767px) {
  .c-Footer {
    padding-top: 4rem;
    padding-bottom: calc(8.5rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
  }
}

.c-Footer__Sitemap {
  margin-top: 60px;
  padding-top: 50px;
  border-top: solid 1px #B9B9B9;
}

@media (max-width: 767px) {
  .c-Footer__Sitemap {
    margin-top: 4rem;
    padding-top: 0;
    border-top: none;
  }
}

.c-Footer__SitemapPage {
  margin-top: 5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-Footer__SitemapPage {
    margin-left: 0;
  }
}

.c-Footer__CopyRight {
  color: #C6C6C6;
  margin-top: 40px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/*
#styleguide

ヘッダー用コンポーネント

- 通常時は sticky
-


*/
.c-Header {
  padding-right: 150px;
  position: sticky;
  left: 0;
  top: -100px;
  width: 100%;
  z-index: 5000;
  background: var(--header-background, #FFFFFF);
  transition: top 0.3s ease, background 0.3s ease;
  color: var(--header-color, #1E1E1E);
}

@media (max-width: 1445px) {
  .c-Header {
    padding-right: 0;
  }
}

@media (min-width: 1024.1px) {
  .c-Header:hover {
    --logo-color: #1E1E1E;
    --header-color: #1E1E1E;
    --header-background: #FFFFFF;
  }
}

.c-Header.--RemoveSticky {
  top: -100px;
}

.c-Header.--Sticky {
  --logo-color: #1E1E1E;
  --header-color: #1E1E1E;
  --header-background: #FFFFFF;
  top: 0px;
}

.c-Header.--Opened {
  --logo-color: #1E1E1E;
  --header-color: #1E1E1E;
  --header-background: #FFFFFF;
}

.c-Header__Inner {
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .c-Header__Inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 1023px) {
  .c-Header__Inner {
    height: 6rem;
  }
}

.c-Header__Logo {
  width: 150px;
  flex-shrink: 0;
}

@media (max-width: 1445px) {
  .c-Header__Logo {
    width: 100px;
  }
}

@media (max-width: 1023px) {
  .c-Header__Logo {
    width: 8.5rem;
  }
}

.c-Header__Logo use {
  fill: var(--logo-color, #1E1E1E);
}

.c-Header__Navigation {
  flex-grow: 1;
}

@media (max-width: 1023px) {
  .c-Header__Navigation {
    display: none;
  }
}

.c-Header__Menu {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  border-top: solid 1px #B9B9B9;
  background: #fff;
  padding-top: 60px;
  padding-bottom: 60px;
}

.c-Header__MenuButton {
  max-width: 425px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.c-Header__ModalBackground {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 4000;
  top: 0;
  left: 0;
}

/*
#styleguide

背景ベタ塗りの見出し

@components

```
<p class="c-HeadlineFill">給付金額</p>
```
*/
/*
#styleguide

中央寄せ

@modifier

```
<p class="c-HeadlineFill --Center">給付金額</p>
```
*/
.c-HeadlineFill {
  color: #fff;
  padding: 0 20px;
  background: #1E1E1E;
  font-size: 1.4rem;
}

.c-HeadlineFill.--Center {
  text-align: center;
}

.c-HeadlineFill.--MarginBottom {
  margin-bottom: 1rem;
}

/*
#styleguide

*/
.c-HeadlineIcon {
  display: flex;
  gap: 0.5em;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .c-HeadlineIcon {
    font-size: 1.8rem;
  }
}

.c-HeadlineIcon.--MarginBottom {
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .c-HeadlineIcon.--MarginBottom {
    margin-bottom: 2rem;
  }
}

.c-HeadlineIcon__Number {
  flex-shrink: 0;
}

/*
#styleguide

下層ページのH1

@atom

```
<h1 class="c-HeadlineLevel1">財団概要・沿革</h1>
```
*/
/*
#styleguide

白バージョン

@modifier

```
<h1 class="c-HeadlineLevel1 --White">財団概要・沿革</h1>
```
*/
/*
#styleguide

マージンボトム

@modifier

```
<h1 class="c-HeadlineLevel1 --MarginBottom">財団概要・沿革</h1>
```
*/
.c-HeadlineLevel1 {
  --color: #1E1E1E;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--color);
}

@media (max-width: 767px) {
  .c-HeadlineLevel1 {
    font-size: 2.4rem;
  }
}

.c-HeadlineLevel1.--White {
  --color: #FFFFFF;
}

.c-HeadlineLevel1.--MarginBottom {
  margin-bottom: 80px;
}

@media (max-width: 767px) {
  .c-HeadlineLevel1.--MarginBottom {
    margin-bottom: 6rem;
  }
}

/*
#styleguide

下層ページのH1

@atom

```
<h1 class="c-HeadlineLevel1Border">財団概要・沿革</h1>
```
*/
/*
#styleguide

白バージョン

@modifier

```
<h1 class="c-HeadlineLevel1Border --White">財団概要・沿革</h1>
```
*/
/*
#styleguide

マージンボトム

@modifier

```
<h1 class="c-HeadlineLevel1Border --MarginBottom">財団概要・沿革</h1>
```
*/
.c-HeadlineLevel1Border {
  --color: #1E1E1E;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--color);
}

@media (max-width: 767px) {
  .c-HeadlineLevel1Border {
    font-size: 2.4rem;
  }
}

.c-HeadlineLevel1Border::after {
  margin-left: auto;
  margin-right: auto;
  content: '';
  width: 100px;
  height: 0.4rem;
  background: var(--color);
  margin-top: 3rem;
  display: block;
}

@media (max-width: 767px) {
  .c-HeadlineLevel1Border::after {
    width: 8rem;
  }
}

.c-HeadlineLevel1Border.--White {
  --color: #FFFFFF;
}

.c-HeadlineLevel1Border.--MarginBottom {
  margin-bottom: 80px;
}

@media (max-width: 767px) {
  .c-HeadlineLevel1Border.--MarginBottom {
    margin-bottom: 6rem;
  }
}

.c-HeadlineLevel1Border--Small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--color);
  margin-top: 20px;
}

@media (max-width: 767px) {
  .c-HeadlineLevel1Border--Small {
    font-size: 1.3rem;
    margin-top: 2rem;
  }
}

/*
#styleguide

見出しH2

@atom

```
<h2 class="c-HeadlineLevel2">財団概要・沿革</h2>
```
*/
/*
#styleguide

白バージョン

@modifier

```
<h2 class="c-HeadlineLevel2 --White">財団概要・沿革</h2>
```
*/
/*
#styleguide

マージンボトム

@modifier

```
<h2 class="c-HeadlineLevel2 --MarginBottom">財団概要・沿革</h2>
```
*/
.c-HeadlineLevel2 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--color, inherit);
  margin-bottom: var(--HeadlineLevel2--margin-bottom, 0);
}

@media (max-width: 767px) {
  .c-HeadlineLevel2 {
    font-size: 1.8rem;
  }
}

.c-HeadlineLevel2.--White {
  --color: #FFFFFF;
}

.c-HeadlineLevel2.--MarginBottom {
  --HeadlineLevel2--margin-bottom: 60px;
}

@media (max-width: 767px) {
  .c-HeadlineLevel2.--MarginBottom {
    --HeadlineLevel2--margin-bottom: 5rem;
  }
}

.c-HeadlineLevel2.--MarginBottom2 {
  --HeadlineLevel2--margin-bottom: 40px;
}

@media (max-width: 767px) {
  .c-HeadlineLevel2.--MarginBottom2 {
    --HeadlineLevel2--margin-bottom: 3rem;
  }
}

.c-HeadlineLevel2.--PcCenter {
  text-align: left;
}

@media (max-width: 767px) {
  .c-HeadlineLevel2.--PcCenter {
    text-align: center;
  }
}

.c-HeadlineLevel2.--Left {
  text-align: left;
}

.c-HeadlineLevel2.--Border::after {
  margin-left: auto;
  margin-right: auto;
  content: '';
  width: 50px;
  height: 0.4rem;
  background: var(--color, #1E1E1E);
  margin-top: 1rem;
  display: block;
}

@media (max-width: 767px) {
  .c-HeadlineLevel2.--Border::after {
    width: 4rem;
  }
}

/*
#styleguide

見出しH2

@atom

```
<h2 class="c-HeadlineLevel3">財団概要・沿革</h2>
```
*/
.c-HeadlineLevel3 {
  --color: #1E1E1E;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--color);
}

@media (max-width: 767px) {
  .c-HeadlineLevel3 {
    font-size: 1.4rem;
  }
}

.c-HeadlineLevel3.--White {
  --color: #FFFFFF;
}

/*
#styleguide

セクション間のヘッドライン

*/
.c-HeadlineSection {
  --HeadlineSection-font-size: 32px;
  --HeadlineSection-color: 32px;
  font-size: var(--HeadlineSection, 32px);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  color: var(--HeadlineSection-color, inherit);
}

@media (max-width: 767px) {
  .c-HeadlineSection {
    --HeadlineSection-font-size: 1.8rem;
  }
}

.c-HeadlineSection.--Left {
  text-align: left;
}

.c-HeadlineSection.--White {
  --HeadlineSection-color: #FFFFFF;
}

/*
#styleguide

細身の見出し

```
<h3 class="c-HeadlineTin">創作活動の資金援助</h3>
```
*/
/*
#styleguide

マージンつき

```
<h3 class="c-HeadlineTin  c-HeadlineTin--MarginBottom">創作活動の資金援助</h3>
```
*/
.c-HeadlineTin {
  --HeadlineTin-FontSize: 32px;
  font-size: var(--HeadlineTin-FontSize);
  text-align: center;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-HeadlineTin {
    --HeadlineTin-FontSize: 2.4rem;
  }
}

.c-HeadlineTin.--MarginBottom {
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .c-HeadlineTin.--MarginBottom {
    margin-bottom: 4rem;
  }
}

.c-HeadlineTin.--PcCenter {
  text-align: left;
}

@media (max-width: 767px) {
  .c-HeadlineTin.--PcCenter {
    text-align: center;
  }
}

.c-HeadlineTin.--Preset1 {
  text-align: left;
  --HeadlineTin-FontSize: 24px;
  margin-bottom: 3rem;
}

@media (max-width: 767px) {
  .c-HeadlineTin.--Preset1 {
    text-align: center;
    --HeadlineTin-FontSize: 1.8rem;
  }
}

/*
#styleguide

英字 + 日本語のタイトル

```
<div class="c-HeadlineTypography">
  <p class="c-HeadlineTypography__English">NEWS</p>
  <h1 class="c-HeadlineTypography__Japanese">ニュース</h1>
</div>
```

*/
.c-HeadlineTypography {
  line-height: 1.4;
  text-align: center;
}

.c-HeadlineTypography__English {
  font-size: 62px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-HeadlineTypography__English {
    font-size: 4rem;
  }
}

.c-HeadlineTypography__Japanese {
  font-size: 24px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-HeadlineTypography__Japanese {
    font-size: 1.6rem;
  }
}

.c-HeadlineTypography--MarginBottom {
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .c-HeadlineTypography--MarginBottom {
    margin-bottom: 40px;
  }
}

/*
#overview

ブレイクポイント - 非表示

.c-Hidden.--MaximumOver
.c-Hidden.--Maximum
.c-Hidden.--MaximumLess
.c-Hidden.--PcOver
.c-Hidden.--Pc
.c-Hidden.--PcLess
.c-Hidden.--LaptopOver
.c-Hidden.--Laptop
.c-Hidden.--LaptopLess
.c-Hidden.--TbOver
.c-Hidden.--Tb
.c-Hidden.--TbLess
.c-Hidden.--SpOver
.c-Hidden.--Sp
.c-Hidden.--SpLess
.c-Hidden.--Over
.c-Hidden.--MinimumOver
*/
@media (min-width: 2000.1px) {
  .c-Hidden.--MaximumOver {
    display: none;
  }
}

@media (max-width: 2000px) {
  .c-Hidden.--Maximum {
    display: none;
  }
}

@media (max-width: 1999px) {
  .c-Hidden.--MaximumLess {
    display: none;
  }
}

@media (min-width: 1446.1px) {
  .c-Hidden.--PcOver {
    display: none;
  }
}

@media (max-width: 1446px) {
  .c-Hidden.--Pc {
    display: none;
  }
}

@media (max-width: 1445px) {
  .c-Hidden.--PcLess {
    display: none;
  }
}

@media (min-width: 1024.1px) {
  .c-Hidden.--LaptopOver {
    display: none;
  }
}

@media (max-width: 1024px) {
  .c-Hidden.--Laptop {
    display: none;
  }
}

@media (max-width: 1023px) {
  .c-Hidden.--LaptopLess {
    display: none;
  }
}

@media (min-width: 768.1px) {
  .c-Hidden.--TbOver {
    display: none;
  }
}

@media (max-width: 768px) {
  .c-Hidden.--Tb {
    display: none;
  }
}

@media (max-width: 767px) {
  .c-Hidden.--TbLess {
    display: none;
  }
}

@media (min-width: 480.1px) {
  .c-Hidden.--SpOver {
    display: none;
  }
}

@media (max-width: 480px) {
  .c-Hidden.--Sp {
    display: none;
  }
}

@media (max-width: 479px) {
  .c-Hidden.--SpLess {
    display: none;
  }
}

@media (min-width: 320.1px) {
  .c-Hidden.--MinimumOver {
    display: none;
  }
}

@media (max-width: 320px) {
  .c-Hidden.--Minimum {
    display: none;
  }
}

/*
#styleguide

💡 SVGアイコンを一括で管理しているCSSです。

@atom
*/
.c-Icon {
  display: block;
  position: relative;
}

.c-Icon::before {
  content: '';
  display: block;
}

.c-Icon > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/*
#styleguide

⭐️ PDF

```
<span class="c-Icon --Pdf">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#pdf"></use>
  </svg>
</span>
```
*/
.c-Icon.--Pdf::before {
  padding-top: 133.33333%;
}

/*
#styleguide

⭐️ メールアイコン

```
<span class="c-Icon --Mail03">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#mail-03"></use>
  </svg>
</span>
```
*/
.c-Icon.--Mail03::before {
  padding-top: 73.65269%;
}

/*
#styleguide

⭐️ ボーダーの矢印（右）

```
<span class="c-Icon --ArrowBorderRight">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowBorderRight::before {
  padding-top: 177.04918%;
}

/*
#styleguide

⭐️ ボーダーの矢印（上）

```
<span class="c-Icon --ArrowBorderTop">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-top"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowBorderTop::before {
  padding-top: 56.48148%;
}

/*
#styleguide

⭐️ 矢印（右）

```
<span class="c-Icon --ArrowRight">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowRight::before {
  padding-top: 60%;
}

/*
#styleguide

⭐️ facebook

```
<span class="c-Icon --Facebook">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#facebook-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#facebook-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Facebook::before {
  padding-top: 100%;
}

.c-Icon.--Facebook use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Facebook use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ twitter

```
<span class="c-Icon --Twitter">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#twitter-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#twitter-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Twitter::before {
  padding-top: 100%;
}

.c-Icon.--Twitter use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Twitter use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ instagram

```
<span class="c-Icon --Instagram">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#instagram-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#instagram-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Instagram::before {
  padding-top: 100%;
}

.c-Icon.--Instagram use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Instagram use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ YouTube

```
<span class="c-Icon --YouTube">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#youtube-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#youtube-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--YouTube::before {
  padding-top: 100%;
}

.c-Icon.--YouTube use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--YouTube use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ SoundCloud

```
<span class="c-Icon --SoundCloud">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#sound-cloud-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#sound-cloud-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--SoundCloud::before {
  padding-top: 100%;
}

.c-Icon.--SoundCloud use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--SoundCloud use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ Vimeo

```
<span class="c-Icon --Vimeo">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#vimeo-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#vimeo-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Vimeo::before {
  padding-top: 100%;
}

.c-Icon.--Vimeo use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Vimeo use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ Thumblr

```
<span class="c-Icon --Tumblr">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#tumblr-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#tumblr-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Tumblr::before {
  padding-top: 100%;
}

.c-Icon.--Tumblr use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Tumblr use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ website

```
<span class="c-Icon --Website">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#website-circle"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#website-icon"></use>
  </svg>
</span>
```
*/
.c-Icon.--Website::before {
  padding-top: 100%;
}

.c-Icon.--Website use:nth-child(1) {
  transition: fill 0.1s ease;
  fill: var(--circle, #1E1E1E);
}

.c-Icon.--Website use:nth-child(2) {
  fill: var(--icon, #FFFFFF);
}

/*
#styleguide

⭐️ クマ財団ロゴ（縦長）

```
<span class="c-Icon --LogoVertical">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#logo-vertical"></use>
  </svg>
</span>
```
*/
.c-Icon.--LogoVertical::before {
  padding-top: 143.87543%;
}

/*
#styleguide

⭐️ クマ財団ロゴ（横長）

```
<span class="c-Icon --LogoHorizontal">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#logo-horizontal"></use>
  </svg>
</span>
```
*/
.c-Icon.--LogoHorizontal::before {
  padding-top: 36.91275%;
}

/*
#styleguide

⭐️ クマ財団ロゴのオブジェクト部分（ドット）

```
<span class="c-Icon --LogoObjectDotted">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#logo-object-dotted"></use>
  </svg>
</span>
```
*/
.c-Icon.--LogoObjectDotted::before {
  padding-top: 99.98907%;
}

/*
#styleguide

⭐️ クマ財団ロゴのオブジェクト部分（塗り）

```
<span class="c-Icon --LogoObjectFill">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#logo-object-fill"></use>
  </svg>
</span>
```
*/
.c-Icon.--LogoObjectFill::before {
  padding-top: 100%;
}

/*
#styleguide

⭐️ twitter（正方形）

```
<span class="c-Icon --TwitterRect">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#twitter-rect"></use>
  </svg>
</span>
```
*/
.c-Icon.--TwitterRect::before {
  padding-top: 100%;
}

/*
#styleguide

⭐️ instagram（正方形）

```
<span class="c-Icon --InstagramRect">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#instagram-rect"></use>
  </svg>
</span>
```
*/
.c-Icon.--InstagramRect::before {
  padding-top: 100%;
}

/*
#styleguide

⭐️ 矢印

```
<span class="c-Icon --ArrowRightStroke">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right-stroke"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowRightStroke use {
  fill: none;
  stroke: #000;
}

.c-Icon.--ArrowRightStroke::before {
  padding-top: 8.43905%;
}

/*
#styleguide

⭐️ 矢印（短）

```
<span class="c-Icon --ArrowRightStrokeShort">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right-stroke-short"></use>
  </svg>
</span>
```
*/
.c-Icon.--ArrowRightStrokeShort use {
  fill: none;
  stroke: #000;
}

.c-Icon.--ArrowRightStrokeShort::before {
  padding-top: 21.96576%;
}

/*
#styleguide

⭐️ google map のピン

```
<span class="c-Icon --Pin">
  <svg role="img">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#pin"></use>
  </svg>
</span>
```
*/
.c-Icon.--Pin::before {
  padding-top: 100%;
}

/*
#styleguide

画像の角丸

```
<img src="https://placehold.jp/150x150.png" width="150" height="150" alt=""class="c-ImageRound">
```
*/
.c-ImageRound {
  border-radius: 50%;
}

/*
#styleguide

サイト内で使用するインナー（コンテナ/ラッパー）

*/
.c-Inner {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

@media (max-width: 767px) {
  .c-Inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-Inner.--Max1250 {
  max-width: 125rem;
}

.c-Inner.--Max1000 {
  max-width: 100rem;
}

.c-Inner.--Max960 {
  max-width: 96rem;
}

.c-Inner.--Max860 {
  max-width: 86rem;
}

.c-Inner.--Max840 {
  max-width: 84rem;
}

.c-Inner.--Max810 {
  max-width: 81rem;
}

.c-Inner.--Max710 {
  max-width: 71rem;
}

.c-Inner.--Max640 {
  max-width: 64rem;
}

.c-Inner.--NoPadding {
  padding-left: 0;
  padding-right: 0;
}

.c-Inner.--Button2Column {
  max-width: 890px;
}

@media (max-width: 767px) {
  .c-Inner.--Button2Column {
    max-width: 27.5rem;
  }
}

/*
#styleguide

@atom

```
<p class="c-LabelBox">5期生</p>
```
*/
.c-LabelBox {
  --color: #818181;
  text-align: center;
  color: var(--color);
  border: solid 1px var(--color);
  font-size: 1.2rem;
  padding: 0.2rem 0.4rem;
  line-height: 1.6;
}

/*
#styleguide

@atom

```
<p class="c-LabelFill">5期生</p>
```
*/
.c-LabelFill {
  background: #1E1E1E;
  color: #fff;
  padding: 0.4rem 0.8rem;
  line-height: 1;
  font-size: 14px;
}

@media (max-width: 767px) {
  .c-LabelFill {
    font-size: 1.3rem;
  }
}

.c-LabelGenre {
  background: #fff;
  line-height: 1.6;
  padding-left: 0.4rem 0.8rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .c-LabelGenre {
    font-size: 1.3rem;
  }
}

.c-LabelGenre.--Alpha {
  background: none;
}

/*
#styleguide

```
<div class="c-LabelHeadline">
  <p class="c-LabelHeadline__Main">クリエイター奨学金</p>
  <p class="c-LabelHeadline__Sub">用途自由の資金援助</p>
</div>
```
*/
.c-LabelHeadline {
  --bg-color: #EEEEEE;
  border-radius: 1rem;
  background: var(--bg-color);
  padding: 1rem;
  min-height: 120px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-LabelHeadline {
    min-height: 8rem;
  }
}

.c-LabelHeadline__Main {
  font-size: 2.4rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 767px) {
  .c-LabelHeadline__Main {
    font-size: 1.8rem;
  }
}

.c-LabelHeadline__Small {
  font-size: 1.6rem;
}

@media (max-width: 1023px) {
  .c-LabelHeadline__Small {
    display: block;
  }
}

@media (max-width: 767px) {
  .c-LabelHeadline__Small {
    display: inline;
    font-size: 1.4rem;
  }
}

.c-LabelHeadline__Sub {
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  .c-LabelHeadline__Sub {
    font-size: 1.4rem;
  }
}

.c-LabelHeadline__Sub.--Normal {
  font-weight: normal;
}

/*
#styleguide

アコーディオンのボディ部分
*/
.c-LayoutAccordionBody {
  display: none;
}

.c-LayoutAccordionBody__Inner {
  padding-top: 1rem;
}

/*
#styleguide

基本のカラム

```
<div class="c-LayoutMultipleColumns">
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    コンテンツ
  </div>
</div>
```
*/
/*
#styleguide

アンカー用のプリセット

```
<div class="c-LayoutMultipleColumns --Preset1">
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumns__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
</div>
```
*/
.c-LayoutMultipleColumns {
  --column-width: 33.33%;
  --column-margin-side: 0.5rem;
  --column-margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--column-margin-top) * -1);
  margin-right: calc(var(--column-margin-side) / 2 * -1);
  margin-left: calc(var(--column-margin-side) / 2 * -1);
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset1 {
    --column-width: 50%;
  }
}

.c-LayoutMultipleColumns.--Preset2 {
  --column-width: 25%;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset2 {
    --column-width: 50%;
  }
}

.c-LayoutMultipleColumns.--Preset3 {
  --column-width: 25%;
  --column-margin-top: 60px;
  --column-margin-side: 40px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset3 {
    --column-width: 50%;
    --column-margin-top: 4rem;
    --column-margin-side: 2.4rem;
  }
}

.c-LayoutMultipleColumns.--Preset4 {
  --column-width: 50%;
  --column-margin-side: 60px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset4 {
    --column-margin-side: 2rem;
  }
}

.c-LayoutMultipleColumns.--Preset5 {
  --column-margin-side: 5px;
  --column-margin-top: 5px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset5 {
    --column-margin-side: 0.5rem;
    --column-margin-top: 0.5rem;
  }
}

.c-LayoutMultipleColumns.--Preset6 {
  --column-margin-side: 16px;
  --column-margin-top: 0.8rem;
  align-items: center;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset6 {
    --column-margin-side: 1rem;
  }
}

.c-LayoutMultipleColumns.--Preset7 {
  --column-margin-side: 40px;
  --column-margin-top: 1rem;
  justify-content: center;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumns.--Preset7 {
    --column-margin-side: 3rem;
  }
}

.c-LayoutMultipleColumns__Item {
  width: calc(var(--column-width) - var(--column-margin-side));
  margin-top: var(--column-margin-top);
  margin-right: calc(var(--column-margin-side) / 2);
  margin-left: calc(var(--column-margin-side) / 2);
}

.c-LayoutMultipleColumns__Item.--Right {
  margin-left: auto;
}

.c-LayoutMultipleColumns__Item.--Auto {
  width: auto;
}

/*
#styleguide

基本のカラム

```
<div class="c-LayoutMultipleColumnsToSingle">
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    コンテンツ
  </div>
</div>
```
*/
/*
#styleguide

アンカー用のプリセット

```
<div class="c-LayoutMultipleColumnsToSingle --Preset1">
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
  <div class="c-LayoutMultipleColumnsToSingle__Item">
    <a href="#"class="c-ButtonAnchor">
      <span class="c-ButtonAnchor__Number">01</span>
      <span class="c-ButtonAnchor__Catch">創作活動の資金援助</span>
      <span class="c-ButtonAnchor__Text">クリエイター奨学金</span>
    </a>
  </div>
</div>
```
*/
.c-LayoutMultipleColumnsToSingle {
  --column-width: 25%;
  --column-margin-side: 20px;
  --column-margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--column-margin-top) * -1);
  margin-right: calc(var(--column-margin-side) / 2 * -1);
  margin-left: calc(var(--column-margin-side) / 2 * -1);
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle {
    --column-margin-top: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset1 {
  --column-width: 33.33%;
}

.c-LayoutMultipleColumnsToSingle.--Preset2 {
  --column-width: 50%;
  --column-margin-side: 40px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset2 {
    --column-margin-top: 4rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset3 {
  --column-width: 50%;
  --column-margin-side: 100px;
  align-items: center;
}

@media (max-width: 1024px) {
  .c-LayoutMultipleColumnsToSingle.--Preset3 {
    --column-margin-side: 60px;
  }
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset3 {
    flex-flow: column-reverse;
    --column-margin-top: 4rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset4 {
  --column-width: 50%;
  --column-margin-side: 40px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset4 {
    --column-margin-top: 1rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset5 {
  --column-width: 33.33%;
  --column-margin-side: 2px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset5 {
    --column-margin-top: 0.2rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset6 {
  --column-width: 50%;
  --column-margin-side: 80px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset6 {
    --column-margin-top: 3rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset7 {
  --column-width: 50%;
  --column-margin-side: 20px;
  --column-margin-top: 2rem;
  justify-content: center;
}

.c-LayoutMultipleColumnsToSingle.--Preset8 {
  --column-width: 50%;
  --column-margin-side: 40px;
  --column-margin-top: 40px;
}

@media (max-width: 1023px) {
  .c-LayoutMultipleColumnsToSingle.--Preset8 {
    --column-margin-side: 20px;
    --column-margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset8 {
    --column-margin-top: 2rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset9 {
  --column-width: 50%;
  --column-margin-side: 10px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset9 {
    --column-margin-top: 1rem;
  }
}

.c-LayoutMultipleColumnsToSingle.--Preset10 {
  --column-width: 50%;
  --column-margin-side: 60px;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Preset10 {
    --column-margin-top: 4rem;
  }
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle.--Reverse {
    flex-flow: column-reverse;
  }
}

.c-LayoutMultipleColumnsToSingle__Item {
  width: calc(var(--column-width) - var(--column-margin-side));
  margin-top: var(--column-margin-top);
  margin-right: calc(var(--column-margin-side) / 2);
  margin-left: calc(var(--column-margin-side) / 2);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle__Item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.c-LayoutMultipleColumnsToSingle__Summary {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

@media (max-width: 767px) {
  .c-LayoutMultipleColumnsToSingle__Summary {
    max-width: none;
  }
}

/*
#styleguide
矢印付きのリンク

```
<a href="#"class="c-LinkArrow">
  <span class="c-LinkArrow__Text">応募要項</span>
  <span class="c-LinkArrow__Icon">
    <span class="c-Icon --ArrowBorderRight">
      <svg role="img">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-border-right"></use>
      </svg>
    </span>
  </span>
</a>
```
*/
.c-LinkArrow {
  --color: #1E1E1E;
  display: flex;
  align-items: center;
  color: var(--color);
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-LinkArrow::before {
  content: '';
  display: block;
  height: 1px;
  width: 0%;
  background: var(--color);
  transition: width 0.2s ease;
  position: absolute;
  left: 0;
  bottom: 0;
}

.c-LinkArrow:hover::before {
  width: 100%;
}

.c-LinkArrow.--White {
  --color: #FFFFFF;
}

.c-LinkArrow__Text {
  display: block;
}

.c-LinkArrow__Icon {
  display: block;
  width: 0.8rem;
  flex-shrink: 0;
  margin-left: 2rem;
}

.c-LinkArrow__Icon use {
  fill: var(--color);
}

.c-LinkIcon {
  display: block;
  border-radius: 50%;
  overflow: hidden;
}

@media (min-width: 1024.1px) {
  .c-LinkIcon.--Facebook:hover {
    --circle: #1877f2;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkIcon.--Twitter:hover {
    --circle: #c1c1cb;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkIcon.--Instagram:hover {
    --circle: #de2cb5;
  }
}

@media (min-width: 1024.1px) {
  .c-LinkIcon.--YouTube:hover {
    --circle: #ff0000;
  }
}

/*
#styleguide

*/
.c-LinkSns {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
}

.c-LinkSns__Icon {
  width: 26px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  .c-LinkSns__Icon {
    width: 2.2rem;
    margin-right: 1rem;
  }
}

.c-LinkSns__Label {
  font-size: 14px;
}

.c-LinkSns__Label .is-fsXS {
  font-size: 12px;
}

@media (max-width: 767px) {
  .c-LinkSns__Label {
    font-size: 1.3rem;
  }
  .c-LinkSns__Label .is-fsXS {
    font-size: 1rem;
  }
}

/*
#styleguide

ボーダーで挟まれたリスト

```
<ul class="c-ListBorder">
  <div class="c-ListBorder__Item">
    <div class="c-Faq --Question">
      <div class="c-Faq__Inner">
        <p class="c-Faq__Title">活動支援をいただいた場合、他に何か対応しないといけないことはありますか？</p>
      </div>
    </div>
    <div class="c-Faq --Answer --MarginTop">
      <div class="c-Faq__Inner">
        <p>映像制作や映画など、制作協力でクレジットをいれることが可能な場合は、クマ財団ロゴの掲載をお願いします。</p>
      </div>
    </div>
  </div>
  <div class="c-ListBorder__Item">
    <div class="c-Faq --Question">
      <div class="c-Faq__Inner">
        <p class="c-Faq__Title">採択された計画のものであれば、採択される前の制作費や機材費なども支援金を使用できますか？</p>
      </div>
    </div>
    <div class="c-Faq --Answer --MarginTop">
      <div class="c-Faq__Inner">
        <p>採択以前に決済を行う「事前処理」については、原則認めておりません。領収書の日付が採択日以降のものが対象となります。</p>
      </div>
    </div>
  </div>
</ul>
```

*/
.c-ListBorder {
  --ListBorder-Padding: 30px;
  border-bottom: solid 1px #B9B9B9;
}

@media (max-width: 767px) {
  .c-ListBorder {
    --ListBorder-Padding: 2rem;
  }
}

.c-ListBorder__Item {
  border-top: solid 1px #B9B9B9;
  padding-top: var(--ListBorder-Padding);
  padding-bottom: var(--ListBorder-Padding);
}

/*
#styleguide

カテゴリーのリスト

- 多段対応

@atom

```
<div class="c-ListCategory">
  <ul class="c-ListCategory__List">
    <li class="c-ListCategory__Item">2期生</li>
    <li class="c-ListCategory__Item">インタビュー</li>
  </ul>
</div>
```
*/
.c-ListCategory {
  font-size: 1.3rem;
  line-height: 1.2;
  overflow: hidden;
}

.c-ListCategory__List {
  display: flex;
  flex-wrap: wrap;
  margin-top: -rem(8px);
}

.c-ListCategory__Item {
  margin-top: 0.8rem;
  border-left: solid 1px #B9B9B9;
  padding-left: 8px;
  padding-right: 8px;
  margin-right: 8px;
  margin-left: -8px;
}

/*
#styleguide

シンプルな タイトル + 本文のリスト

```
<dl class="c-ListData">
  <dt class="c-ListData__Title"><p class="c-TextBorder">ビジョン</p></dt>
  <dd class="c-ListData__Data">次なる未来を探求し、新たな価値を生み出す 創造性。</dd>
  <dt class="c-ListData__Title"><p class="c-TextBorder">チャレンジ</p></dt>
  <dd class="c-ListData__Data">自らの専門領域を拡張・更新し、未開発な領域を切り開く 挑戦心。</dd>
  <dt class="c-ListData__Title"><p class="c-TextBorder">パッション</p></dt>
  <dd class="c-ListData__Data">情熱を持って創作に取り組み、高いレベルで結実させる強い 創作意欲。</dd>
  <dt class="c-ListData__Title"><p class="c-TextBorder">アクション</p></dt>
  <dd class="c-ListData__Data">創作機会、評価の機会を逃さず、自らの作品を世の中へ送り出す 行動力。</dd>
  <dt class="c-ListData__Title"><p class="c-TextBorder">インフルエンス</p></dt>
  <dd class="c-ListData__Data">自らの創作活動、創作意義を、世の中へ伝達する 発信力。</dd>
</dl>
```
*/
.c-ListData__Data {
  margin-top: 8px;
}

.c-ListData__Data + .c-ListData__Title {
  margin-top: 16px;
}

/*
#styleguide

```
<ul class="c-ListDotted">
  <li class="c-ListDotted__Item"></li>
  <li class="c-ListDotted__Item"></li>
  <li class="c-ListDotted__Item"></li>
</ul>
```
*/
.c-ListDotted.--Red {
  color: #EA0000;
}

.c-ListDotted.--Bold {
  font-weight: bold;
}

.c-ListDotted__Item {
  display: flex;
}

.c-ListDotted__Item:before {
  content: '・';
  flex-shrink: 0;
  margin-right: 0.4rem;
}

/*
#styleguide

*/
.c-ListHorizontalTo2Column {
  --ListHorizontalTo2Column--Top: 1rem;
  --ListHorizontalTo2Column--MarginSide: 4rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--ListHorizontalTo2Column--Top) * -1);
  margin-left: calc(var(--ListHorizontalTo2Column--MarginSide) / 2 * -1);
  margin-right: calc(var(--ListHorizontalTo2Column--MarginSide) / 2 * -1);
}

@media (max-width: 767px) {
  .c-ListHorizontalTo2Column {
    --ListHorizontalTo2Column--MarginSide: 1rem;
  }
}

.c-ListHorizontalTo2Column__Item {
  margin-top: 1rem;
  margin-left: calc(var(--ListHorizontalTo2Column--MarginSide) / 2);
  margin-right: calc(var(--ListHorizontalTo2Column--MarginSide) / 2);
}

@media (max-width: 767px) {
  .c-ListHorizontalTo2Column__Item {
    width: calc(50% - var(--ListHorizontalTo2Column--MarginSide));
  }
}

/*
#styleguide

@atom

```
<ul class="c-ListMenu">
  <li class="c-ListMenu--Item">
    <a href="#"class="c-NavigationLink">クマ財団について</a>
  </li>
</ul>
```

*/
.c-ListMenu__Item + .c-ListMenu__Item {
  margin-top: 2rem;
}

/*
#styleguide

@atom

```
<ul class="c-ListMenuSub">
  <li class="c-ListMenuSub--Item">
    <a href="#"class="c-NavigationLink">クマ財団について</a>
  </li>
</ul>
```

*/
.c-ListMenuSub__Item + .c-ListMenuSub__Item {
  margin-top: 1rem;
}

/*
#styleguide

2桁の数字付きのリスト

```
<ol class="c-ListNumber">
  <li class="c-ListNumber__Item">クリエイターの発掘</li>
  <li class="c-ListNumber__Item">創作活動の資金援助</li>
  <li class="c-ListNumber__Item">クリエイターの発信</li>
  <li class="c-ListNumber__Item">ジャンルを超えたクリエイター同士の繋がりの構築</li>
  <li class="c-ListNumber__Item">クリエイターと社会の繋がりの構築</li>
  <li class="c-ListNumber__Item">業界関係者との繋がりの構築</li>
  <li class="c-ListNumber__Item">発表の場の創出</li>
</ol>
```
*/
.c-ListNumber {
  counter-reset: list-number;
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  .c-ListNumber {
    font-size: 1.5rem;
  }
}

.c-ListNumber__Item {
  counter-increment: list-number;
  display: flex;
  font-weight: 800;
}

.c-ListNumber__Item + .c-ListNumber__Item {
  margin-top: 0.8rem;
}

.c-ListNumber__Item.--WeightNormal {
  font-weight: normal;
}

.c-ListNumber__Item::before {
  font-weight: 800;
  content: counter(list-number, decimal-leading-zero) ".　";
  color: #818181;
  font-family: "hiragino kaku gothic pro", helvetica, arial, sans-serif;
  flex-shrink: 0;
}

/*
#styleguide

マージン設定用の汎用クラス

PC < SP の順で上書きされる
*/
.c-Margin.--Top120 {
  margin-top: 12rem !important;
}

.c-Margin.--Top100 {
  margin-top: 10rem !important;
}

.c-Margin.--Top80 {
  margin-top: 8rem !important;
}

.c-Margin.--Top60 {
  margin-top: 6rem !important;
}

.c-Margin.--Top50 {
  margin-top: 5rem !important;
}

.c-Margin.--Top40 {
  margin-top: 4rem !important;
}

.c-Margin.--Top30 {
  margin-top: 3rem !important;
}

.c-Margin.--Top20 {
  margin-top: 2rem !important;
}

.c-Margin.--Top15 {
  margin-top: 1.5rem !important;
}

.c-Margin.--Top10 {
  margin-top: 1rem !important;
}

@media (max-width: 767px) {
  .c-Margin.--Top120TbLess {
    margin-top: 12rem !important;
  }
  .c-Margin.--Top100TbLess {
    margin-top: 10rem !important;
  }
  .c-Margin.--Top80TbLess {
    margin-top: 8rem !important;
  }
  .c-Margin.--Top60TbLess {
    margin-top: 6rem !important;
  }
  .c-Margin.--Top50TbLess {
    margin-top: 5rem !important;
  }
  .c-Margin.--Top40TbLess {
    margin-top: 4rem !important;
  }
  .c-Margin.--Top30TbLess {
    margin-top: 3rem !important;
  }
  .c-Margin.--Top20TbLess {
    margin-top: 2rem !important;
  }
  .c-Margin.--Top15TbLess {
    margin-top: 1.5rem !important;
  }
  .c-Margin.--Top10TbLess {
    margin-top: 1rem !important;
  }
}

.c-Margin.--Paragraph {
  margin-top: 2em;
}

@media (max-width: 768px) {
  .c-Margin.--Paragraph {
    margin-top: 1.5em;
  }
}

.c-MenuButton {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 20000;
  cursor: pointer;
}

@media (min-width: 1023.1px) {
  .c-MenuButton {
    display: none;
  }
}

/*
#styleguide

@atom

```
<a href="#"class="c-NavigationLink">クマ財団について</a>
```
*/
/*
#styleguide

アコーディオン用のボタン

@modifier

```
<button type="button"class="c-NavigationLink  --Accordion">支援クリエイター</button>
```
*/
.c-NavigationLink {
  --color: #1E1E1E;
  font-size: 1.6rem;
  text-align: center;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.c-NavigationLink.--Accordion {
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  position: relative;
  width: 100%;
  padding-right: 2rem;
  padding-left: 2rem;
  cursor: pointer;
}

.c-NavigationLink.--Accordion::before, .c-NavigationLink.--Accordion::after {
  content: '';
  display: block;
  height: 1px;
  width: 1.1rem;
  background: var(--color);
  position: absolute;
  right: 0;
  top: 50%;
}

.c-NavigationLink.--Accordion::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.c-NavigationLink.--Accordion.is-State--Active:after {
  display: none;
}

/*
#styleguide

@atom

```
<a href="#"class="c-NavigationLinkSub">クマ財団について</a>
```
*/
.c-NavigationLinkSub {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.3rem;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/*
#styleguide

headerのナビゲーションのリスト

*/
.c-NavigationList {
  display: flex;
  justify-content: center;
}

.c-NavigationList__Item + .c-NavigationList__Item {
  margin-left: 30px;
}

@media (max-width: 1445px) {
  .c-NavigationList__Item + .c-NavigationList__Item {
    margin-left: 20px;
  }
}

.c-NavigationSns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-NavigationSns__Item {
  width: 3.6rem;
}

.c-NavigationSp {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  background: #FFFFFF;
  display: none;
}

.c-NavigationSp__Container {
  height: 100%;
  overflow: auto;
}

.c-NavigationSp__Inner {
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 6rem;
}

@media (max-width: 767px) {
  .c-NavigationSp__Inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-NavigationSp__Header {
  display: flex;
  height: 6rem;
  align-items: center;
}

.c-NavigationSp__HeaderLogo {
  width: 8.5rem;
}

.c-NavigationSp__List {
  margin-top: 2rem;
  max-width: 32.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-NavigationSp__List {
    max-width: 25.4rem;
  }
}

.c-NavigationSp__SubBody {
  display: none;
}

.c-NavigationSp__SubInner {
  padding-top: 1rem;
}

.c-NavigationSp__Button {
  margin-top: 1rem;
}

.c-NavigationSp__Bottom {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: solid 1px #B9B9B9;
}

.c-NavigationSp__Contact {
  max-width: 32.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-NavigationSp__Contact {
    max-width: 25.4rem;
  }
}

.c-NavigationSp__Sns {
  margin-top: 2rem;
  max-width: 32.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-NavigationSp__Sns {
    max-width: 22.5rem;
  }
}

/*
#styleguide

トップページ用のニュース

@atom

奨学生詳細ページ用のニュースは .c-NewsCardBox

```
<a href="#"class="c-NewsCard">
  <div class="c-NewsCard__Thumbnail">
    <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
  </div>
  <div class="c-NewsCard__Body">
    <div class="c-NewsCard__Tag">
      <div class="c-ListCategory">
        <ul class="c-ListCategory__List">
          <li class="c-ListCategory__Item">2期生</li>
          <li class="c-ListCategory__Item">インタビュー</li>
        </ul>
      </div>
    </div>
    <h3 class="c-NewsCard__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
    <div class="c-NewsCard__DateTime"><time datetime="2020-01-21"class="c-TextDate">2020.01.21</time></div>
  </div>
</a>
```

*/
.c-NewsCard {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.c-NewsCard:not(.--Disabled) {
  transition: opacity 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-NewsCard:not(.--Disabled):hover {
    opacity: 0.4;
  }
}

.c-NewsCard.--Disabled {
  pointer-events: none;
}

.c-NewsCard__Thumbnail {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.c-NewsCard__Thumbnail::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.c-NewsCard.js-Effect .c-NewsCard__Thumbnail {
  overflow: hidden;
}

.c-NewsCard.js-Effect .c-NewsCard__Thumbnail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.c-NewsCard.js-Effect.is-Entry .c-NewsCard__Thumbnail::before {
  background: #1E1E1E;
  -webkit-animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
  animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
}

.c-NewsCard__ThumbnailContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.c-NewsCard__ThumbnailContainer img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-NewsCard:not(.--Disabled):hover .c-NewsCard__ThumbnailContainer img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.c-NewsCard.js-Effect .c-NewsCard__ThumbnailContainer {
  opacity: 0;
  z-index: 1;
}

.c-NewsCard.js-Effect.is-Entry .c-NewsCard__ThumbnailContainer {
  -webkit-animation: fade-in 0.5s step-end both;
  animation: fade-in 0.5s step-end both;
}

.c-NewsCard__ThumbnailTag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 16px;
  line-height: 1;
  color: #fff;
  z-index: 5;
  font-size: 13px;
}

.c-NewsCard__ThumbnailTag.--Blue {
  background: #234164;
}

.c-NewsCard__ThumbnailTag.--Orange {
  background: #f24e56;
}

.c-NewsCard__Body {
  width: 100%;
  flex-grow: 1;
  position: relative;
  padding-bottom: 4rem;
}

.c-NewsCard__Tag {
  margin-top: 0.8rem;
}

.c-NewsCard__Headline {
  margin-top: 0.8rem;
  font-size: 1.8rem;
  overflow: hidden;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-height: 1.6;
}

.c-NewsCard__DateTime {
  position: absolute;
  left: 0;
  bottom: 0;
}

/*
#styleguide

トップページ用のニュース

@atom

トップページ用のニュースは .c-NewsCard

```
<a href="#"class="c-NewsCardBox">
  <div class="c-NewsCardBox__Thumbnail">
    <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
  </div>
  <div class="c-NewsCardBox__Body">
    <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
    <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="c-TextDate">2020.01.21</time></div>
    <div class="c-NewsCardBox__Arrow">
      <span class="c-Icon --ArrowRight">
        <svg role="img">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
        </svg>
      </span>
    </div>
  </div>
</a>
```

*/
.c-NewsCardBox {
  display: flex;
  flex-flow: column;
  background: #fff;
  height: 100%;
}

@media (max-width: 768px) {
  .c-NewsCardBox {
    flex-flow: row;
    align-items: flex-start;
    background: transparent;
  }
}

.c-NewsCardBox:not(.--Disabled) {
  transition: opacity 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-NewsCardBox:not(.--Disabled):hover {
    opacity: 0.4;
  }
}

.c-NewsCardBox.--Disabled {
  pointer-events: none;
}

.c-NewsCardBox__Thumbnail {
  overflow: hidden;
  width: 100%;
  position: relative;
}

@media (max-width: 768px) {
  .c-NewsCardBox__Thumbnail {
    width: 200px;
    flex-shrink: 0;
    margin-right: 20px;
  }
}

@media (max-width: 767px) {
  .c-NewsCardBox__Thumbnail {
    width: 10rem;
    margin-right: 1rem;
  }
}

.c-NewsCardBox__Thumbnail::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.c-NewsCardBox__Thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-NewsCardBox:hover .c-NewsCardBox__Thumbnail img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.c-NewsCardBox.js-Effect .c-NewsCardBox__Thumbnail {
  overflow: hidden;
}

.c-NewsCardBox.js-Effect .c-NewsCardBox__Thumbnail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.c-NewsCardBox.js-Effect .c-NewsCardBox__Thumbnail img {
  opacity: 0;
  z-index: 1;
}

.c-NewsCardBox.js-Effect.is-Entry .c-NewsCardBox__Thumbnail::before {
  background: #1E1E1E;
  -webkit-animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
  animation: slide-in 0.5s ease both, slide-out 0.5s 0.5s ease forwards;
}

.c-NewsCardBox.js-Effect.is-Entry .c-NewsCardBox__Thumbnail img {
  -webkit-animation: fade-in 0.5s step-end both;
  animation: fade-in 0.5s step-end both;
}

.c-NewsCardBox__Body {
  width: 100%;
  flex-grow: 1;
  position: relative;
  padding: 30px 20px 60px;
}

@media (max-width: 768px) {
  .c-NewsCardBox__Body {
    display: flex;
    flex-flow: column-reverse;
    padding: 0 0 2rem;
  }
}

.c-NewsCardBox__Headline {
  font-size: 18px;
  overflow: hidden;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .c-NewsCardBox__Headline {
    -webkit-line-clamp: 3;
    margin-top: 1rem;
  }
}

@media (max-width: 767px) {
  .c-NewsCardBox__Headline {
    font-size: 1.4rem;
  }
}

.c-NewsCardBox__DateTime {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

@media (max-width: 768px) {
  .c-NewsCardBox__DateTime {
    position: static;
  }
}

.c-NewsCardBox__Arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2rem;
  display: none;
}

@media (max-width: 768px) {
  .c-NewsCardBox__Arrow {
    display: block;
  }
}

.c-NewsCardBox__Arrow use {
  fill: #1E1E1E;
}

/*
#styleguide

奨学生ページの詳細などで使用するニュース

```
<div class="c-NewsList">
  <ul class="c-NewsList__List">
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
    <li class="c-NewsList__Item">
      コンテンツ
    </li>
  </ul>
</div>
```
*/
/*
#styleguide

example

```
<div class="c-NewsList">
  <ul class="c-NewsList__List">
    <li class="c-NewsList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-NewsList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-NewsList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
    <li class="c-NewsList__Item">
      <a href="#"class="c-NewsCardBox">
        <div class="c-NewsCardBox__Thumbnail">
          <img src="https://placehold.jp/300x300.png" width="300" height="300" alt="">
        </div>
        <div class="c-NewsCardBox__Body">
          <h3 class="c-NewsCardBox__Headline">ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜ドキュメンタリーの役割は、何かを訴えようとする人の“実存”を描くこと。〜4期生インタビュー〜</h3>
          <div class="c-NewsCardBox__DateTime"><time datetime="2020-01-21"class="a-TextDate">2020.01.21</time></div>
          <div class="c-NewsCardBox__Arrow">
            <span class="a-Icon --ArrowRight">
              <svg role="img">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/svg-sprite/sprite.svg#arrow-right"></use>
              </svg>
            </span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>
```

*/
.c-NewsList__List {
  display: flex;
  flex-wrap: wrap;
  margin-top: -40px;
  margin-left: -10px;
  margin-right: -10px;
}

@media (max-width: 767px) {
  .c-NewsList__List {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-bottom: solid 1px #B9B9B9;
  }
}

.c-NewsList__Item {
  width: calc(25% - 20px);
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  .c-NewsList__Item {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: solid 1px #B9B9B9;
  }
}

/*
#styleguide

*/
.c-NoticeBox__Header {
  background: #1E1E1E;
  color: #fff;
  padding: 10px 40px;
  line-height: 1.6;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-NoticeBox__Header {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
}

.c-NoticeBox__Body {
  border: solid 2px #1E1E1E;
  border-top: none;
  padding-top: 40px;
  padding-bottom: 60px;
}

@media (max-width: 767px) {
  .c-NoticeBox__Body {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

.c-PageTop {
  margin-top: 160px;
}

@media (max-width: 767px) {
  .c-PageTop {
    margin-top: 10rem;
  }
}

/*
#styleguide

*/
.c-Pagination {
  --Pagination-button-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .c-Pagination {
    --Pagination-button-size: 2.8rem;
  }
}

.c-Pagination.--MarginTop {
  margin-top: 160px;
}

@media (max-width: 767px) {
  .c-Pagination.--MarginTop {
    margin-top: 8rem;
  }
}

.c-Pagination__Item + .c-Pagination__Item {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .c-Pagination__Item + .c-Pagination__Item {
    margin-left: 0.5rem;
  }
}

.c-Pagination__Item.--Dot {
  line-height: 1;
}

.c-Pagination__Link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--Pagination-button-size);
  height: var(--Pagination-button-size);
}

.c-Pagination__Link.--Active {
  pointer-events: none;
  border: solid 1px #1E1E1E;
}

@media (min-width: 1024.1px) {
  .c-Pagination__Link:not(.--Active):hover {
    background: #EEEEEE;
  }
}

.c-Pagination__Arrow {
  display: block;
  width: var(--Pagination-button-size);
  height: var(--Pagination-button-size);
  position: relative;
}

@media (min-width: 1024.1px) {
  .c-Pagination__Arrow:hover {
    background: #EEEEEE;
  }
}

.c-Pagination__Arrow::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 1px #1E1E1E;
  position: absolute;
  top: 50%;
}

.c-Pagination__Arrow.--Prev::before {
  border-left: solid 1px #1E1E1E;
  left: 40%;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.c-Pagination__Arrow.--Next::before {
  border-right: solid 1px #1E1E1E;
  right: 40%;
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-Person__Header {
  display: flex;
  align-items: center;
}

.c-Person__Photo {
  width: 160px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-Person__Photo {
    width: 12rem;
  }
}

.c-Person__Name {
  flex-grow: 1;
  line-height: 1.6;
}

.c-Person__NameInner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.c-Person__NameJp {
  font-size: 2.4rem;
  font-weight: 800;
}

.c-Person__NameEn {
  color: #818181;
  font-size: 1.3rem;
}

.c-Person__Body {
  margin-top: 3rem;
}

.c-Person__Profile {
  font-size: 14px;
}

@media (max-width: 767px) {
  .c-Person__Profile {
    font-size: 1.3rem;
  }
}

.c-Person__Message {
  font-size: 18px;
  margin-top: 1.5em;
}

@media (max-width: 767px) {
  .c-Person__Message {
    font-size: 1.6rem;
  }
}

.c-Persons__List {
  display: flex;
  flex-wrap: wrap;
  margin-left: -40px;
  margin-right: -40px;
}

@media (max-width: 767px) {
  .c-Persons__List {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
}

.c-Persons__Item {
  width: calc(50% - 80px);
  margin-left: 40px;
  margin-right: 40px;
}

@media (max-width: 767px) {
  .c-Persons__Item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.c-Persons__Item:nth-child(n+3) {
  margin-top: 60px;
  padding-top: 40px;
  border-top: solid 1px #B9B9B9;
}

@media (max-width: 767px) {
  .c-Persons__Item:nth-child(n+2) {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: solid 1px #B9B9B9;
  }
}

.c-PersonThumbnail__Caption {
  font-size: 13px;
  color: #818181;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  line-height: 1.6;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .c-PersonThumbnail__Caption {
    margin-top: 0.8rem;
    font-size: 0.9rem;
  }
}

.c-PersonThumbnail__Name {
  margin-top: 28px;
  line-height: 1.6;
  font-size: 24px;
  font-weight: 800;
}

@media (max-width: 767px) {
  .c-PersonThumbnail__Name {
    margin-top: 2.8rem;
    font-size: 1.5rem;
  }
}

.c-PersonThumbnail__Name.--MarginSmall {
  margin-top: 0.4rem;
}

/*
#styleguide

クリエイターページなどのアコーディオン

```
```
*/
.c-SearchAccordion {
  border-top: solid 1px #B9B9B9;
  border-bottom: solid 1px #B9B9B9;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.c-SearchAccordion__Body {
  display: none;
}

.c-SearchAccordion__Inner {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

/*
#styleguide

*/
.c-SearchActives {
  display: flex;
  align-items: flex-start;
}

.c-SearchActives__Label {
  font-size: 1.3rem;
  color: #818181;
  flex-wrap: nowrap;
  margin-right: 1rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 2.5rem;
}

.c-SearchActives__Body {
  flex-grow: 1;
}

.c-SearchActives__Empty {
  font-size: 1.3rem;
}

.c-SearchActives__Empty:blank {
  display: none;
}

.c-SearchActives__Tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: -0.4rem;
  margin-left: -0.2rem;
  margin-right: -0.2rem;
}

.c-SearchActives__TagsItem {
  margin-top: 0.4rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}

/*
#styleguide

クリエイターなどの検索用のボックス

*/
.c-SearchArea {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: #1E1E1E;
}

.c-SearchArea__Row + .c-SearchArea__Row {
  margin-top: 4rem;
}

.c-SearchCategory {
  display: flex;
}

@media (max-width: 767px) {
  .c-SearchCategory {
    display: block;
  }
}

.c-SearchCategory__Label {
  width: 170px;
  flex-shrink: 0;
  color: #FFFFFF;
  text-align: center;
}

@media (max-width: 767px) {
  .c-SearchCategory__Label {
    width: auto;
  }
}

.c-SearchCategory__Body {
  flex-grow: 1;
}

@media (max-width: 767px) {
  .c-SearchCategory__Body {
    margin-top: 1rem;
  }
}

.c-Section2ColumnToSingle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -20px;
  margin-right: -20px;
}

@media (max-width: 767px) {
  .c-Section2ColumnToSingle {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
}

.c-Section2ColumnToSingle__Item {
  width: calc(50% - 40px);
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 20px;
}

@media (max-width: 767px) {
  .c-Section2ColumnToSingle__Item {
    width: 100%;
    margin-top: 3rem;
    margin-left: 0;
    margin-right: 0;
  }
}

/*
#styleguide


```
<div class="c-SitemapList">
  <ul class="c-SitemapList__List">
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">クマ財団について</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">支援クリエイター</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">クリエイター奨学金</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">活動支援</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">KUMA EXHIBITION</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">ニュース</a>
    </li>
    <li class="c-SitemapList__Item">
      <a href="#"class="c-TextLink">寄附について</a>
    </li>
  </ul>
</div>
```

*/
.c-SitemapList {
  overflow: hidden;
  font-size: 1.4rem;
}

.c-SitemapList__List {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -3rem;
  margin-left: -30px;
  margin-right: -30px;
}

@media (max-width: 767px) {
  .c-SitemapList__List {
    flex-flow: column;
    align-items: flex-start;
  }
}

.c-SitemapList__Item {
  justify-content: center;
  margin-top: 3rem;
  margin-left: 30px;
  margin-right: 30px;
}

.c-SitemapList__Category {
  font-weight: 800;
}

.c-SitemapList__Menus {
  margin-top: 1.5rem;
}

@media (max-width: 767px) {
  .c-SitemapList__Menus {
    padding-left: 1em;
  }
}

.c-SitemapList__MenusItem + .c-SitemapList__MenusItem {
  margin-top: 0.5rem;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.c-SliderBanner {
  overflow: hidden;
}

.c-SliderBanner .swiper-container {
  overflow: visible;
}

.c-SliderBanner .swiper-wrapper {
  align-items: center;
  overflow: visible;
}

.c-SliderBanner__Container {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
  padding-left: 145px;
  padding-right: 145px;
  position: relative;
}

@media (max-width: 767px) {
  .c-SliderBanner__Container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.c-SliderBanner.--Disabled .c-SliderBanner__Container {
  padding-left: 4rem;
  padding-right: 4rem;
}

@media (max-width: 767px) {
  .c-SliderBanner.--Disabled .c-SliderBanner__Container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.c-SliderBanner__Inner {
  position: relative;
  margin-left: -5px;
  margin-right: -5px;
}

@media (max-width: 767px) {
  .c-SliderBanner__Inner {
    margin-left: -0.3rem;
    margin-right: -0.3rem;
  }
}

.c-SliderBanner__Card {
  padding: 0 5px;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

@media (max-width: 767px) {
  .c-SliderBanner__Card {
    padding: 0 0.3rem;
  }
}

.swiper-slide:not(.swiper-slide-visible) .c-SliderBanner__Card {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
}

.c-SliderBanner__Link {
  display: block;
  transition: opacity 0.1s ease;
}

@media (min-width: 1024.1px) {
  .c-SliderBanner__Link:hover {
    opacity: 0.4;
  }
}

.c-SliderBanner__Arrow {
  position: absolute;
  border-top: solid 2px #fff;
  width: 40px;
  height: 40px;
  top: 50%;
  z-index: 10;
  cursor: pointer;
}

@media (max-width: 767px) {
  .c-SliderBanner__Arrow {
    display: none;
  }
}

.c-SliderBanner__Arrow.--Prev {
  left: 40px;
  border-left: solid 2px #fff;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.c-SliderBanner__Arrow.--Next {
  right: 40px;
  border-right: solid 2px #fff;
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-SliderBanner__Arrow.swiper-button-disabled {
  display: none;
}

.c-SliderBanner__Pagination {
  display: flex;
  justify-content: center;
}

.c-SliderBanner__Pagination:not(:empty) {
  margin-top: 3rem;
}

.c-SliderBanner__Pagination.swiper-pagination-lock {
  display: none;
}

.c-SliderBanner__PaginationBullet {
  display: block;
  width: 10px;
  height: 10px;
  background: #B9B9B9;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .c-SliderBanner__PaginationBullet {
    width: 0.8rem;
    height: 0.8rem;
  }
}

.c-SliderBanner__PaginationBullet.swiper-pagination-bullet-active {
  background: #1E1E1E;
}

.c-SliderBanner__PaginationBullet + .c-SliderBanner__PaginationBullet {
  margin-left: 25px;
}

@media (max-width: 767px) {
  .c-SliderBanner__PaginationBullet + .c-SliderBanner__PaginationBullet {
    margin-left: 2rem;
  }
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.c-SliderFade {
  position: relative;
}

.c-SliderFade__Pagination {
  display: flex;
  width: 100%;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 1000;
}

.c-SliderFade__Pagination:empty {
  display: none;
}

.c-SliderFade__PaginationBullet {
  display: block;
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .c-SliderFade__PaginationBullet {
    width: 0.8rem;
    height: 0.8rem;
  }
}

.c-SliderFade__PaginationBullet.swiper-pagination-bullet-active {
  background: #1E1E1E;
}

.c-SliderFade__PaginationBullet + .c-SliderFade__PaginationBullet {
  margin-left: 25px;
}

@media (max-width: 767px) {
  .c-SliderFade__PaginationBullet + .c-SliderFade__PaginationBullet {
    margin-left: 2rem;
  }
}

/*
#styleguide

*/
.c-SnsButtons {
  width: 40px;
  position: fixed;
  right: 20px;
  bottom: 260px;
  z-index: 3000;
}

@media (max-width: 1023px) {
  .c-SnsButtons {
    display: none;
  }
}

.c-SnsButtons__Item + .c-SnsButtons__Item {
  margin-top: 1.5rem;
}

/*
#styleguide

*/
.c-Snses {
  --Snses-min-width: calc(33.33% - 20px);
  --Snses-margin-top: 20px;
  --Snses-margin-side: 10px;
}

@media (max-width: 767px) {
  .c-Snses {
    --Snses-min-width: calc(33.33% - 1rem);
    --Snses-margin-top: 0.5rem;
    --Snses-margin-side: 0.5rem;
  }
}

.c-Snses.--Preset1 {
  --Snses-min-width: auto;
  --Snses-margin-top: 10px;
  --Snses-margin-side: 10px;
}

@media (max-width: 767px) {
  .c-Snses.--Preset1 {
    --Snses-min-width: calc(33.33% - 1rem);
    --Snses-margin-top: 0.5rem;
    --Snses-margin-side: 0.5rem;
  }
}

.c-Snses__List {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--Snses-margin-top) * -1);
  margin-left: calc(var(--Snses-margin-side) * -1);
  margin-right: calc(var(--Snses-margin-side) * -1);
}

.c-Snses__Item {
  min-width: var(--Snses-min-width);
  margin-top: var(--Snses-margin-top);
  margin-left: var(--Snses-margin-side);
  margin-right: var(--Snses-margin-side);
}

/*
#styleguide

Twitter と Facebook

```
<div class="c-SnsTimelines">
  <div class="c-SnsTimelines__Item">
    <div class="c-TimeLineBox">
      <h3 class="a-HeadlineLevel3">Facebook</h3>
      <div class="c-TimeLineBox__Body">
        ここにタイムラインを表示
      </div>
    </div>
  </div>
  <div class="c-SnsTimelines__Item">
    <div class="c-TimeLineBox">
      <h3 class="a-HeadlineLevel3">Twitter</h3>
      <div class="c-TimeLineBox__Body">
        ここにタイムラインを表示
      </div>
    </div>
  </div>
</div>
```

*/
.c-SnsTimelines {
  display: flex;
  flex-wrap: wrap;
  margin-top: -60px;
  margin-left: -30px;
  margin-right: -30px;
}

@media (max-width: 767px) {
  .c-SnsTimelines {
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-top: -4rem;
  }
}

.c-SnsTimelines__Item {
  width: calc(33.33% - 60px);
  margin-top: 60px;
  margin-left: 30px;
  margin-right: 30px;
}

@media (max-width: 1023px) {
  .c-SnsTimelines__Item {
    width: calc(50% - 60px);
  }
}

@media (max-width: 767px) {
  .c-SnsTimelines__Item {
    width: 100%;
    margin-top: 4rem;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 1023px) {
  .c-SnsTimelines__Item.--Instagram {
    width: calc(100% - 60px);
  }
}

@media (max-width: 767px) {
  .c-SnsTimelines__Item.--Instagram {
    width: 100%;
  }
}

/*
#styleguide

汎用的なテーブル
PC版2カラム、SP版で1カラム

@atom

```
<table class="c-Table2Column">
  <tr class="c-Table2Column__Row">
    <th class="c-Table2Column__Header">タイトル</th>
    <td class="c-Table2Column__Body">本文</td>
  </tr>
  <tr class="c-Table2Column__Row">
    <th class="c-Table2Column__Header">タイトル</th>
    <td class="c-Table2Column__Body">本文</td>
  </tr>
</table>
```
*/
.c-Table2Column {
  border-bottom: solid 1px #B9B9B9;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.c-Table2Column__Header {
  vertical-align: middle;
  text-align: center;
  padding: 20px 0;
  background: #EEEEEE;
  width: 150px;
  flex-shrink: 0;
  border-top: solid 1px #B9B9B9;
  font-weight: inherit;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .c-Table2Column__Header {
    font-size: 1.4rem;
    padding: 1.5rem 0;
    width: 11rem;
  }
}

.c-Table2Column__Header.--Large {
  width: 200px;
}

@media (max-width: 767px) {
  .c-Table2Column__Header.--Large {
    width: 14.5rem;
  }
}

.c-Table2Column__Header.--Large2 {
  width: 200px;
}

@media (max-width: 767px) {
  .c-Table2Column__Header.--Large2 {
    width: 11rem;
  }
}

.c-Table2Column__Data {
  padding: 20px 60px;
  flex-grow: 1;
  border-top: solid 1px #B9B9B9;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .c-Table2Column__Data {
    padding: 2rem 1.5rem;
  }
}

/*
#styleguide

汎用的なテーブル
PC版2カラム、SP版で1カラム

@atom

```
<div class="c-Table2ColumnToSingle">
  <div class="c-Table2ColumnToSingle__Row">
    <div class="c-Table2ColumnToSingle__Header">タイトル</div>
    <div class="c-Table2ColumnToSingle__Body">本文</div>
  </div>
  <div class="c-Table2ColumnToSingle__Row">
    <div class="c-Table2ColumnToSingle__Header">タイトル</div>
    <div class="c-Table2ColumnToSingle__Body">本文</div>
  </div>
</div>
```
*/
.c-Table2ColumnToSingle {
  border-bottom: solid 1px #B9B9B9;
}

.c-Table2ColumnToSingle__Row {
  display: flex;
  border-top: solid 1px #B9B9B9;
}

@media (max-width: 767px) {
  .c-Table2ColumnToSingle__Row {
    display: block;
  }
}

.c-Table2ColumnToSingle__Header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  background: var(--section-color-secondary, #EEEEEE);
  width: 280px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-Table2ColumnToSingle__Header {
    padding: 1.5rem 0;
    width: 100%;
  }
}

.c-Table2ColumnToSingle__Body {
  padding: 20px 60px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .c-Table2ColumnToSingle__Body {
    border-top: solid 1px #B9B9B9;
    padding: 2rem 0 4rem;
  }
}

/*
#styleguide

*/
.c-TableCourse {
  border-bottom: solid 1px #B9B9B9;
}

.c-TableCourse__Header {
  display: flex;
}

.c-TableCourse__Item {
  width: 100%;
}

.c-TableCourse__Item + .c-TableCourse__Item {
  margin-left: 1px;
}

.c-TableCourse__Detail {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.4rem;
  text-align: center;
}

.c-TableCourse__Detail + .c-TableCourse__Detail {
  border-top: solid 1px #B9B9B9;
}

/*
#styleguide

*/
.c-Text.--Strong {
  font-weight: 800;
  font-size: 16px;
}

@media (max-width: 767px) {
  .c-Text.--Strong {
    font-size: 1.4rem;
  }
}

.c-Text.--Strong a.is-underlineBold {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

@media (min-width: 768.1px) {
  .c-Text.--Strong a.is-underlineBold:hover {
    text-decoration: none;
  }
}

.c-Text.--Red {
  color: #EA0000;
}

.c-Text.--MarginTop {
  margin-top: 2em;
}

@media (max-width: 768px) {
  .c-Text.--MarginTop {
    margin-top: 1.5em;
  }
}

.c-Text.--MarginTopXS {
  margin-top: 1em;
}

@media (max-width: 768px) {
  .c-Text.--MarginTopXS {
    margin-top: 0.75em;
  }
}

.c-Text.--CenterPc {
  text-align: center;
}

@media (max-width: 767px) {
  .c-Text.--CenterPc {
    text-align: inherit;
  }
}

.c-Text + .c-Text {
  margin-top: 2em;
}

@media (max-width: 768px) {
  .c-Text + .c-Text {
    margin-top: 1.5em;
  }
}

/*
#styleguide

注釈

注釈用のテキスト。米印（※）は自動付与。

@components

```
<p class="c-TextAnnotation">年度により採択人数は増減します。</p>
```
*/
/*
#styleguide

マージン

@modifier

```
<p class="c-TextAnnotation --MarginTop">年度により採択人数は増減します。</p>
```
*/
/*
#styleguide

右付き

@modifier

```
<p class="c-TextAnnotation --Right">年度により採択人数は増減します。</p>
```
*/
.c-TextAnnotation {
  font-size: 1.4rem;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.8;
}

.c-TextAnnotation:before {
  content: '※';
}

.c-TextAnnotation.--MarginTop {
  margin-top: 1rem;
}

.c-TextAnnotation.--Right {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}

.c-TextAnnotation.--IconNone {
  padding-left: 0;
  text-indent: 0;
}

.c-TextAnnotation.--IconNone::before {
  display: none;
}

/*
#styleguide

```
<p class="c-TextBorder">30万円</p>
```
*/
.c-TextBorder {
  border-left: solid 4px #1E1E1E;
  padding-left: 8px;
  font-weight: 800;
  line-height: 1;
}

/*
#styleguide

テキストの折返し位置を動的に指定する
*/
.c-TextBreake {
  word-break: keep-all;
}

@media (max-width: 767px) {
  .c-TextBreake.is-NewLineSP {
    white-space: normal;
    word-break: keep-all;
  }
}

/*
#styleguide

```
<p class="c-TextCopyRight">Copyright © 2019 公益財団法人クマ財団 All Rights Reserved.</p>
```
*/
.c-TextCopyRight {
  font-size: 14px;
}

@media (max-width: 767px) {
  .c-TextCopyRight {
    font-size: 1.1rem;
  }
}

/*
#styleguide

@atom

```
<time datetime="2020-01-21"class="c-TextDate">2020.01.21</time>
```
*/
.c-TextDate {
  font-size: 1.4rem;
  color: #818181;
}

/*
#styleguide

フィルターの結果が見つからない場合のテキスト

```
<p class="c-TextFilterEmpty js-Filter__Empty">条件に一致するクリエイターは見つかりませんでした。</p>
```
*/
.c-TextFilterEmpty {
  font-size: 1.8rem;
  font-weight: 800;
  color: #818181;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/*
#styleguide

```
<a href="#"class="c-TextLink">テキストリンク</a>
```

*/
.c-TextLink {
  --color: #1E1E1E;
  text-decoration: none;
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-TextLink::before {
  content: '';
  width: 0%;
  height: 1px;
  background: var(--color);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: width 0.1s ease;
}

.c-TextLink.--White {
  --color: #FFFFFF;
}

@media (min-width: 1024.1px) {
  .c-TextLink:hover::before {
    width: 100%;
  }
}

/*
#styleguide

タイムラインのレイアウト

```
<div class="c-TimeLineBox">
  <h3 class="c-HeadlineLevel3">Facebook</h3>
  <div class="c-TimeLineBox__Body">
    ここにタイムラインを表示
  </div>
</div>
```

*/
.c-TimeLineBox__Header {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .c-TimeLineBox__Header {
    font-size: 1.8rem;
  }
}

.c-TimeLineBox__Body {
  margin-top: 40px;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  position: relative;
}

.c-TimeLineBox__Body::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

@media (max-width: 767px) {
  .c-TimeLineBox__Body {
    margin-top: 2rem;
  }
}

.c-TimeLineBox__Inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  overflow: auto;
}

.c-TimeLineBox__Facebook {
  text-align: center;
}

.load-instagram {
  overflow: hidden;
}

/*
#overview

ブレイクポイント - 表示

.c-Visible--Maximum
.c-Visible--MaximumLess
.c-Visible--PcOver
.c-Visible--Pc
.c-Visible--PcLess
.c-Visible--LaptopOver
.c-Visible--Laptop
.c-Visible--LaptopLess
.c-Visible--TbOver
.c-Visible--Tb
.c-Visible--TbLess
.c-Visible--SpOver
.c-Visible--Sp
.c-Visible--SpLess
.c-Visible--Over
.c-Visible--MinimumOver
*/
@media (min-width: 2000.1px) {
  .c-Visible--Maximum {
    display: none;
  }
}

@media (min-width: 2000px) {
  .c-Visible--MaximumLess {
    display: none;
  }
}

@media (max-width: 1446px) {
  .c-Visible--PcOver {
    display: none;
  }
}

@media (min-width: 1446.1px) {
  .c-Visible--Pc {
    display: none;
  }
}

@media (min-width: 1446px) {
  .c-Visible--PcLess {
    display: none;
  }
}

@media (max-width: 1024px) {
  .c-Visible--LaptopOver {
    display: none;
  }
}

@media (min-width: 1024.1px) {
  .c-Visible--Laptop {
    display: none;
  }
}

@media (min-width: 1024px) {
  .c-Visible--LaptopLess {
    display: none;
  }
}

@media (max-width: 768px) {
  .c-Visible--TbOver {
    display: none;
  }
}

@media (min-width: 768.1px) {
  .c-Visible--Tb {
    display: none;
  }
}

@media (min-width: 768px) {
  .c-Visible--TbLess {
    display: none;
  }
}

@media (max-width: 480px) {
  .c-Visible--SpOver {
    display: none;
  }
}

@media (min-width: 480.1px) {
  .c-Visible--Sp {
    display: none;
  }
}

@media (min-width: 480px) {
  .c-Visible--SpLess {
    display: none;
  }
}

@media (max-width: 320px) {
  .c-Visible--MinimumOver {
    display: none;
  }
}

@media (min-width: 320.1px) {
  .c-Visible--Minimum {
    display: none;
  }
}

/*
#styleguide

*/
.c-YouTube {
  position: relative;
  display: block;
}

.c-YouTube::before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.c-YouTube > iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  position: absolute;
}

.t-BreadCrumb {
  margin-top: 2rem;
}

/*
#styleguide

セクション

@templates

```
<article class="t-Contents">
  <section class="t-Contents__Section">
    <div class="a-Inner a-Inner--640">
      <p>コンテンツ</p>
    </div>
  </section>

  <section class="t-Contents__Section">
    <div class="a-Inner a-Inner--640">
      <p>コンテンツ</p>
    </div>
  </section>

  <section class="t-Contents__Section">
    <div class="a-Inner a-Inner--640">
      <p>コンテンツ</p>
    </div>
  </section>

  <section class="t-Contents__Section">
    <div class="a-Inner a-Inner--640">
      <p>コンテンツ</p>
    </div>
  </section>

  <section class="t-Contents__Section">
    <div class="a-Inner a-Inner--640">
      <p>コンテンツ</p>
    </div>
  </section>
</article>
```
*/
.t-Contents {
  overflow: hidden;
}

.t-Contents.--Visible {
  overflow: visible;
}

.t-Contents__Section {
  background: var(--section-color-primary);
}

.t-Contents__Section:nth-child(odd) {
  --section-color-primary: #FFFFFF;
  --section-color-secondary: #EEEEEE;
  margin-top: 80px;
}

@media (max-width: 768px) {
  .t-Contents__Section:nth-child(odd) {
    margin-top: 6rem;
  }
}

.t-Contents__Section:nth-child(even) {
  --section-color-primary: #EEEEEE;
  --section-color-secondary: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 10rem;
  margin-top: 10rem;
}

@media (max-width: 768px) {
  .t-Contents__Section:nth-child(even) {
    padding-top: 6rem;
  }
}

.t-Contents__Section:first-child {
  margin-top: 0 !important;
}

.t-Contents__Section.--NoMargin {
  margin-top: 0;
}

.t-Main {
  margin-top: var(--main-margin, 100px);
}

@media (max-width: 1023px) {
  .t-Main {
    margin-top: var(--main-margin, 6rem);
  }
}