@charset "UTF-8";
/* 各種設定 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/*
 * 優先して読み込まれるCSSに base/__structure.scss を含むかどうか
 * true : atf.scss に import されます
 * false: common.scss に import されます
 * ※ .pc-block, .sp-block 等、レスポンシブ時の表示非表示に関するCSSを含むため、trueにするとリフローが発生しなくなります。
 */
/*
 * Gutenbergエディタで作成されたコンテンツを表示するCSSを常に読み込むか
 * ・minifyしても80kbほどある（gzipで圧縮転送で 11kb程度）
 * ・falseにした場合、"投稿" コンテンツを表示する際のみ読み込まれる @ single-post.scss
 */
/*
 * 属性セレクタの指定
 */
/*
 * スクロールバーの指定
 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/**
 * スマートフォンに切り替わる際の幅を指定します。
 * この幅を元に一部の @mixin が動作します。
 */
/**
 * Illustrator / Photoshop 等での想定された画面幅を指定する箇所です。
 * この幅を元に vw 系のサイズ指定をする @function が存在します。
 */
/* フォントの変数 */
/* ユーザー投稿関連の設定 (.user_contents 内の変数群) */
/* 各種設定 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/*
 * 優先して読み込まれるCSSに base/__structure.scss を含むかどうか
 * true : atf.scss に import されます
 * false: common.scss に import されます
 * ※ .pc-block, .sp-block 等、レスポンシブ時の表示非表示に関するCSSを含むため、trueにするとリフローが発生しなくなります。
 */
/*
 * Gutenbergエディタで作成されたコンテンツを表示するCSSを常に読み込むか
 * ・minifyしても80kbほどある（gzipで圧縮転送で 11kb程度）
 * ・falseにした場合、"投稿" コンテンツを表示する際のみ読み込まれる @ single-post.scss
 */
/*
 * 属性セレクタの指定
 */
/*
 * スクロールバーの指定
 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/**
 * スマートフォンに切り替わる際の幅を指定します。
 * この幅を元に一部の @mixin が動作します。
 */
/**
 * Illustrator / Photoshop 等での想定された画面幅を指定する箇所です。
 * この幅を元に vw 系のサイズ指定をする @function が存在します。
 */
/* フォントの変数 */
/* ユーザー投稿関連の設定 (.user_contents 内の変数群) */
/* SASS の function 機能 */
/**
【2020/9/12更新】

※pxで記述するものは、pxなしでも動作する。


strip-unit(30px)
  単位の除去

vh(30px, 1200px)
  第2引数を100vhとして、第1引数が何vh かを返す処理

addpx(30)
  単位なしの数値が入ったら px を付与

vwsp(100px)
  100px を vw に変換して返す（スマホ版デザインで算出）

vwpc(100px)
  100px を vw に変換して返す（パソコン版デザインで算出）

*/
/**
 * 単位なしの値には px を付与する
 */
/**
 * スマートフォン用デザイン上でのピクセル数を指定すると、vw換算での値を返す
 * @require $design-width-sp
 */
/**
 * パソコン用デザイン上でのピクセル数を指定すると、vw換算での値を返す
 * @require $design-width-pc
 */
/*
三角関数
https://codepen.io/NyX/pen/dYvymM
*/
/*
$pi: 3.14159265359;
$_precision: 10;

@function pow($base, $exp) {
  $value: $base;

  @if $exp>1 {
    @for $i from 2 through $exp {
      $value: $value * $base;
    }
  }

  @if $exp < 1 {
    @for $i from 0 through -$exp {
      $value: $value / $base;
    }
  }

  @return $value;
}

@function fact($num) {
  $fact: 1;

  @if $num>0 {
    @for $i from 1 through $num {
      $fact: $fact * $i;
    }
  }

  @return $fact;
}

@function _to_unitless_rad($angle) {
  @if unit($angle)=="deg" {
    $angle: $angle / 180deg * $pi;
  }

  @if unit($angle)=="rad" {
    $angle: $angle / 1rad;
  }

  @return $angle;
}

@function sin($angle) {
  $a: _to_unitless_rad($angle);
  $sin: $a;

  @for $n from 1 through $_precision {
    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));
  }

  @return $sin;
}

@function cos($angle) {
  $a: _to_unitless_rad($angle);
  $cos: 1;

  @for $n from 1 through $_precision {
    $cos: $cos + (pow(-1, $n) / fact(2*$n)) * pow($a, 2*$n);
  }

  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}
*/
/*
_sitefont.scss で使用する、自前フォントを使うための mixin集
*/
/*
@function str-replace($substr, $newsubstr, $str, $all:false) {
  $pos: str-index($str, $substr);

  @while $pos !=null {
    $strlen: str-length($substr);
    $start: str-slice($str, 0, $pos - 1);
    $end: str-slice($str, $pos + $strlen);
    $str: $start + $newsubstr + $end;

    @if $all==true {
      $pos: str-index($str, $substr);
    }

    @else {
      $pos: null;
    }
  }

  @return $str;
}
*/
/*
【2020/9/12更新】

※pxで記述するものは、pxなしでも動作する。

解説記事
https://kaminarimagazine.com/web/2017/12/12/sass%E3%81%A7%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8Bmixin%E3%82%92%E7%B4%B9%E4%BB%8B%E3%81%97%E3%81%BE%E3%81%99/



==== 文字系 ====

@include font-rem(16px, 32px, 0.1px, true)
  Illustratorで自動生成されるCSSの値を3つ順に入れると rem + em ベースでの文字指定ができる。
  font-size, line-height, letter-spacing を px単位で打ち込む（単位は省略可）
  第4引数は letter-spacing & text-align:center の場合に位置がずれるのを修正するかどうか。

@include fonti(16px, 32px, 0.1px, true)
  font-remとほぼ同様だが、Illustratorでは文字の上に余白がなく位置調整がしづらいため、
  Webでも上に余白をなくしてしまえ！というmixin。ついでに下の余白もなくす。
  （下にはみ出す英字系フォントではズレが出ると思われる）

@include line-truncate
  1行から溢れたら ... と省略する

@include lines-truncate(3)
  指定行数から溢れたら ... と省略する



==== 段落系 ====

@include justify();
  両端揃えの設定がされる。IEも対応。

@include full-width();
  ブロックの幅をウィンドウ幅全体に変更する。
  ただしPCではスクロールバーの幅の関係でややあふれるため、祖先要素に overflow:hidden; が必要。



==== 画像系 ====
@include fix-aspect(300px, 200px, true)
  ブロックの縦横比を指定する処理。
  横幅、縦幅、子要素も同様にするかの順に指定。

@include object-fit(cover, center center);
  JavaScriptライブラリ Object Fit Images を用いて
  IE でも object-fit および object-fit-position が使用できるようになる。
  ただし別途 Object Fit Images を実行する必要があるので注意。
  （既定では class="ofi" を付与していると自動的に対象となる）

@include pseudo-img(30px, 30px, ../../images/item.jpg);
  疑似要素に画像を入れる場合に使う。
  疑似要素系は記述が多くて面倒なため。



==== レイアウト系 ====

@include dl-table($dt-width, $breakpoint: $width-smartphone)
  dl,dt,dd で2列の表を作るのを簡単にする。
  $dt-width を指定すると、残り幅を dd の幅に割り当てる。
  $breakpoint になると、1列の表に戻す。



==== メディアクエリ系 ====

@include on-sp{
  【 CSSを記述 】
}
  $width-smartphone の値を元に @media(max-width:768px) を作成する。
  ただの省略用。

@include max-width(1400px){
  【 CSSを記述 】
}
  任意のmax-widthでメディアクエリを書く省略形。



==== 入力フォーム系 ====

  input要素はtype属性により表示が全く異なるので、それらをまとめて設定するためのmixin。

@include form-text{
  【 CSSを記述 】
}
  text, email, number, password, tel, search, url, date, datetime, datetime-local, month, week

@include form-datetime{
  【 CSSを記述 】
}
  date, datetime, datetime-local, month, week

@include form-button{
  【 CSSを記述 】
}
  button要素と button, image, submit, reset


*/
/**
 * Illustrator の出力するCSSを rem ベース + em ベースに変換する
 * @param int $font-size      px単位での文字サイズ
 * @param int $line-height    px単位での行の高さ ※0にすると無視
 * @param int $letter-spacing px単位での字間 ※0にすると無視
 * @param bool $is_center     中央揃えで使用する際の調整をするか
 * @require $font-size-root
 * @example1 @font-rem(14px, 28px, 0.4px, true);
 * @example2 @font-rem(14, 28, 0.4, true);
 */
/**
 * Illustrator の出力するCSSを rem ベース + em ベースに変換し、
 * さらに line-height により生じる上下の余白を調整する（Illustrator に合わせる）
 *
 * @param int $font-size      px単位での文字サイズ
 * @param int $line-height    px単位での行の高さ ※0にすると無視
 * @param int $letter-spacing px単位での字間 ※0にすると無視
 * @param bool $is_center     中央揃えで使用する際の調整をするか
 * @require $font-size-root
 * @example1 @font-rem(14px, 28px, 0.4px, true);
 * @example2 @font-rem(14, 28, 0.4, true);
 * @see https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html
 */
/**
 * 溢れたテキストは … にする。
 * 1行限定だが、ブラウザ依存なし。
 */
/**
 * 溢れたテキストを … にする。
 * 任意行指定可能だが、-webkit が使える環境限定。
 * @param int $lines  最大行数
 */
/**
 * 幅をウィンドウ幅すべての幅にする
 * ただしPC版ではスクロールバーも含めたサイズとなるため、親要素を overflow:hidden; にしておくこと。
 */
/**
 * 縦横比を強制する
 * @param int $width        ブロックの幅
 * @param int $height       ブロックの高さ
 * @param bool $isFixChild  子要素にも縦横比を強制するか（既定値は false）
 */
/**
 * 疑似要素に画像をはめ込む
 */
/**
 * スマホ表示時のメディアクエリ
 */
/**
 * max-width のメディアクエリを作成する
 *  @param : $max-width  最大幅  数値に単位がない場合は px を付与。既定値はスマホの幅
 */
/**
 * dl要素を2列の表として表示する際のmixin
 * @param $dt-width: dt要素の幅
 * @param $breakpoint: 1列にする際の幅　既定値はスマホの幅
 */
/**
 * input要素のうちテキストボックス型にCSSをまとめて適用
 */
/**
 * input要素の日付関連のみCSSをまとめて適用
 */
/**
 * input要素およびbutton要素のみCSSをまとめて適用
 */
/*
JavaScriptが無効な場合に適用するCSSを記述する
ex)
  .caution{
    @include no-js(){
      color: red;
    }
  }
*/
/* SASS の function 機能 */
/**
【2020/9/12更新】

※pxで記述するものは、pxなしでも動作する。


strip-unit(30px)
  単位の除去

vh(30px, 1200px)
  第2引数を100vhとして、第1引数が何vh かを返す処理

addpx(30)
  単位なしの数値が入ったら px を付与

vwsp(100px)
  100px を vw に変換して返す（スマホ版デザインで算出）

vwpc(100px)
  100px を vw に変換して返す（パソコン版デザインで算出）

*/
/**
 * 単位なしの値には px を付与する
 */
/**
 * スマートフォン用デザイン上でのピクセル数を指定すると、vw換算での値を返す
 * @require $design-width-sp
 */
/**
 * パソコン用デザイン上でのピクセル数を指定すると、vw換算での値を返す
 * @require $design-width-pc
 */
/*
三角関数
https://codepen.io/NyX/pen/dYvymM
*/
/*
$pi: 3.14159265359;
$_precision: 10;

@function pow($base, $exp) {
  $value: $base;

  @if $exp>1 {
    @for $i from 2 through $exp {
      $value: $value * $base;
    }
  }

  @if $exp < 1 {
    @for $i from 0 through -$exp {
      $value: $value / $base;
    }
  }

  @return $value;
}

@function fact($num) {
  $fact: 1;

  @if $num>0 {
    @for $i from 1 through $num {
      $fact: $fact * $i;
    }
  }

  @return $fact;
}

@function _to_unitless_rad($angle) {
  @if unit($angle)=="deg" {
    $angle: $angle / 180deg * $pi;
  }

  @if unit($angle)=="rad" {
    $angle: $angle / 1rad;
  }

  @return $angle;
}

@function sin($angle) {
  $a: _to_unitless_rad($angle);
  $sin: $a;

  @for $n from 1 through $_precision {
    $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));
  }

  @return $sin;
}

@function cos($angle) {
  $a: _to_unitless_rad($angle);
  $cos: 1;

  @for $n from 1 through $_precision {
    $cos: $cos + (pow(-1, $n) / fact(2*$n)) * pow($a, 2*$n);
  }

  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}
*/
/*
_sitefont.scss で使用する、自前フォントを使うための mixin集
*/
/*
@function str-replace($substr, $newsubstr, $str, $all:false) {
  $pos: str-index($str, $substr);

  @while $pos !=null {
    $strlen: str-length($substr);
    $start: str-slice($str, 0, $pos - 1);
    $end: str-slice($str, $pos + $strlen);
    $str: $start + $newsubstr + $end;

    @if $all==true {
      $pos: str-index($str, $substr);
    }

    @else {
      $pos: null;
    }
  }

  @return $str;
}
*/
/* 各種設定 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/*
 * 優先して読み込まれるCSSに base/__structure.scss を含むかどうか
 * true : atf.scss に import されます
 * false: common.scss に import されます
 * ※ .pc-block, .sp-block 等、レスポンシブ時の表示非表示に関するCSSを含むため、trueにするとリフローが発生しなくなります。
 */
/*
 * Gutenbergエディタで作成されたコンテンツを表示するCSSを常に読み込むか
 * ・minifyしても80kbほどある（gzipで圧縮転送で 11kb程度）
 * ・falseにした場合、"投稿" コンテンツを表示する際のみ読み込まれる @ single-post.scss
 */
/*
 * 属性セレクタの指定
 */
/*
 * スクロールバーの指定
 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/**
 * スマートフォンに切り替わる際の幅を指定します。
 * この幅を元に一部の @mixin が動作します。
 */
/**
 * Illustrator / Photoshop 等での想定された画面幅を指定する箇所です。
 * この幅を元に vw 系のサイズ指定をする @function が存在します。
 */
/* フォントの変数 */
/* ユーザー投稿関連の設定 (.user_contents 内の変数群) */
/*
ゴシック体にしたい場合
  @extend %sans-serif;
明朝体にしたい場合
  @extend %serif;

変数指定だととても長くなるため、CSSのサイズ縮小用
*/
.bl_streaming {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.bl_streaming--title_ja {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif;
}

/* 各種設定 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/*
 * 優先して読み込まれるCSSに base/__structure.scss を含むかどうか
 * true : atf.scss に import されます
 * false: common.scss に import されます
 * ※ .pc-block, .sp-block 等、レスポンシブ時の表示非表示に関するCSSを含むため、trueにするとリフローが発生しなくなります。
 */
/*
 * Gutenbergエディタで作成されたコンテンツを表示するCSSを常に読み込むか
 * ・minifyしても80kbほどある（gzipで圧縮転送で 11kb程度）
 * ・falseにした場合、"投稿" コンテンツを表示する際のみ読み込まれる @ single-post.scss
 */
/*
 * 属性セレクタの指定
 */
/*
 * スクロールバーの指定
 */
/* 色の変数 */
/**
 * 他で使用する色
 */
/**
 * スマートフォンに切り替わる際の幅を指定します。
 * この幅を元に一部の @mixin が動作します。
 */
/**
 * Illustrator / Photoshop 等での想定された画面幅を指定する箇所です。
 * この幅を元に vw 系のサイズ指定をする @function が存在します。
 */
/* フォントの変数 */
/* ユーザー投稿関連の設定 (.user_contents 内の変数群) */
body {
  padding-top: 0 !important;
}

.fr_header {
  position: static;
  z-index: 999999;
  top: 0;
  transition: transform 0.35s;
}
html.out-of-firstview .fr_header {
  top: 0;
  position: fixed;
  z-index: 999999;
}

@media (max-width: 768px) {
  .fr_header {
    position: absolute;
  }
}

.fr_inner {
  position: relative;
  z-index: 1;
}

/*
.bl_top {
  user-select: none;
  z-index: auto !important;
  // background: url('http://sirxemic.github.io/jquery.ripples/img/bg2.jpg');

  &--inner {
    // padding: (63px + 90px) 0 19px;
    padding: 120px 0 37px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    color: $color-blue;
    @extend %serif;
    font-weight: 600;
    position: relative;
  }

  &--heading,
  &--description {
    width: 273px;
    margin-top: 50px;
    white-space: nowrap;
  }

  &--title,
  &--description-f,
  &--description {
    writing-mode: vertical-rl;
  }

  &--description-f,
  &--description {
    // @include font-rem-pt(16px, 36.85px, 3.2px);
    @include font-rem-pt(15px, 28px, 3px);
  }

  &--heading,
  &--description {
    width: 273px;
  }

  &--image {
    order: 2;
    width: 375/956*100%;

    img {
      margin: auto;
    }
  }

  &--heading {
    order: 3;
    // transform: translateX(-50%);
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  &--title {
    margin-left: 32px;
    @include font-rem-pt(21px, 53px, 6.3px);
    line-height: 1;
  }

  &--description-f {}

  &--description {
    order: 1;
    display: flex;
    align-items: center;
    align-self: center;

    a {
      display: block;
      width: 100%;
    }

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

  &--badge {
    position: absolute;
    z-index: 10;
    bottom: -120px;
    right: 50px;
    max-width: 258px;
    max-height: 281px;
    width: 258/1366*100vw;
    height: auto;
  }

  &--badge3 {
    position: fixed;
    z-index: 9999;
    bottom: 19px;
    right: 19px;
    max-width: 630px;
    width: 415px;
    height: 80px;
  }

  @media(max-width:1000px) {

    &--image {
      width: 30%;
    }

    &--heading,
    &--description {
      width: 225px;
    }

    &--description-f,
    &--description {
      line-height: 1.6;
      min-width: auto;
    }
  }


  @media(max-width:768px) {

    &--inner {
      padding-top: 130/750*100vw;
      flex-flow: row wrap;
      justify-content: center;
    }

    &--image {
      order: -1;
      width: 100%;

      img {
        // width: 392/750*100%;
        width: 50%;
      }
    }

    &--heading,
    &--description {
      width: auto;
      margin-top: 55/750*100vw;
    }

    &--title {
      font-size: 24px;
      letter-spacing: 5px;
    }

    &--description {
      // display: none;
      // font-size: 17px;
    }

    &--badge3 {
      width: 630/750*100vw;
      height: auto;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      transform: translateY(0);
      transition: .5s .5s;

      @at-root html.scroll-top & {
        transform: translateY(100%);
        transition: .5s -1s;
      }
    }

    &--description {
      width: vwsp(587);
    }
  }
}
*/
@keyframes map_goal {
  0% {
    transform: translate(0, 0);
  }
  2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24% {
    transform: translate(1%, -1%);
  }
  1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23% {
    transform: translate(-1%, 1%);
  }
  25% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes map_goal2 {
  0%, 20%, 100% {
    transform: rotate(0deg);
  }
  2.5%, 12.5% {
    transform: rotate(-8deg);
  }
  7.5%, 17.5% {
    transform: rotate(8deg);
  }
}
@keyframes car_frequency {
  0% {
    transform: translate(0, 0) rotateX(0);
  }
  25% {
    transform: translate(2%, -1%) rotateZ(1.5deg);
  }
  50% {
    transform: translate(1.5%, 2%) rotateZ(0);
  }
  75% {
    transform: translate(-2%, 1.8%) rotateZ(-1.2deg);
  }
  100% {
    transform: translate(0, 0) rotateX(0);
  }
}
@keyframes car_frequency2 {
  0% {
    transform: translate(0, 0) rotateX(0);
  }
  25% {
    transform: translate(2%, -1%) rotateZ(-1.5deg);
  }
  50% {
    transform: translate(1.5%, 2%) rotateZ(0);
  }
  75% {
    transform: translate(-2%, 1.8%) rotateZ(1.2deg);
  }
  100% {
    transform: translate(0, 0) rotateX(0);
  }
}
@keyframes panel_frequency {
  0% {
    transform: none;
  }
  2%, 4%, 6%, 8%, 10%, 12%, 14% {
    transform: rotateZ(8deg);
  }
  3%, 5%, 7%, 9%, 11%, 13% {
    transform: rotateZ(-8deg);
  }
  15% {
    transform: none;
  }
  100% {
    transform: none;
  }
}
@keyframes bubble_animation {
  0% {
    top: 100%;
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    top: -160px;
  }
}
@keyframes bubble_animation_inner {
  0% {
    transform: scaleY(1) translateX(0);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: scaleY(0.9) translateX(-150%);
  }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: scaleY(1.06) translateX(155%);
  }
  100% {
    transform: scaleY(1) translateX(0);
  }
}
@keyframes bubble_animation_own {
  0% {
    transform: scaleY(1) translateX(-16%);
    margin-bottom: 12px;
  }
  50% {
    transform: scaleY(0.8) translateX(14%);
    margin-bottom: 6px;
  }
  100% {
    transform: scaleY(1) translateX(-16%);
    margin-bottom: 12px;
  }
}
.bl_bubble {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.bl_bubbles--bubble {
  animation: bubble_animation 135s infinite;
  animation-timing-function: linear;
  top: 100%;
  position: absolute;
  z-index: 10;
  transform-origin: center center;
}
.bl_bubbles--bubble .inner {
  width: 41px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  animation: bubble_animation_inner 135s infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}
.bl_bubbles--bubble .inner > b {
  display: block;
  width: 39px;
  height: 30px;
  background: url(../../images/bubble/bubble1.png) no-repeat center center/contain;
  margin-bottom: 17px;
  animation: bubble_animation_own 6s -3s infinite;
}
.bl_bubbles--bubble .inner > i {
  display: block;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 17px;
}
.bl_bubbles--bubble .inner > i:nth-of-type(1) {
  width: 22px;
  height: 16px;
  animation: bubble_animation_own 6s infinite;
}
.bl_bubbles--bubble .inner > i:nth-of-type(2) {
  width: 16px;
  height: 12px;
  animation: bubble_animation_own 6s -3s infinite;
}
.bl_bubbles--bubble .inner > i:nth-of-type(3) {
  width: 9px;
  height: 6px;
  animation: bubble_animation_own 6s -4.5s infinite;
}
.bl_bubbles--bubble:nth-of-type(5n) {
  left: 8%;
}
.bl_bubbles--bubble:nth-of-type(5n+1) {
  left: 23%;
}
.bl_bubbles--bubble:nth-of-type(5n+2) {
  left: 33%;
}
.bl_bubbles--bubble:nth-of-type(5n+3) {
  left: 72%;
}
.bl_bubbles--bubble:nth-of-type(5n+4) {
  left: 92%;
}
.bl_bubbles--bubble:nth-of-type(3n+1) {
  transform: scale(1);
}
.bl_bubbles--bubble:nth-of-type(3n+1) .inner {
  opacity: 0.3;
}
.bl_bubbles--bubble:nth-of-type(3n+2) {
  transform: scale(0.82);
}
.bl_bubbles--bubble:nth-of-type(3n+2) .inner {
  opacity: 0.2;
}
.bl_bubbles--bubble:nth-of-type(3n) {
  transform: scale(0.7);
}
.bl_bubbles--bubble:nth-of-type(3n) .inner {
  opacity: 0.1;
}
.bl_bubbles--bubble:nth-of-type(4n) {
  animation-duration: 162s;
}
.bl_bubbles--bubble:nth-of-type(4n+1) {
  animation-duration: 94.5s;
}
.bl_bubbles--bubble:nth-of-type(4n+2) {
  animation-duration: 141.75s;
}
.bl_bubbles--bubble:nth-of-type(4n+3) {
  animation-duration: 121.5s;
}
.bl_bubbles--bubble:nth-of-type(1) {
  animation-delay: -121.5s;
}
.bl_bubbles--bubble:nth-of-type(2) {
  animation-delay: -118.8s;
}
.bl_bubbles--bubble:nth-of-type(3) {
  animation-delay: -110.7s;
}
.bl_bubbles--bubble:nth-of-type(4) {
  animation-delay: -102.6s;
}
.bl_bubbles--bubble:nth-of-type(5) {
  animation-delay: -95.85s;
}
.bl_bubbles--bubble:nth-of-type(6) {
  animation-delay: -93.15s;
}
.bl_bubbles--bubble:nth-of-type(7) {
  animation-delay: -86.4s;
}
.bl_bubbles--bubble:nth-of-type(8) {
  animation-delay: -79.65s;
}
.bl_bubbles--bubble:nth-of-type(9) {
  animation-delay: -74.25s;
}
.bl_bubbles--bubble:nth-of-type(10) {
  animation-delay: -66.15s;
}
.bl_bubbles--bubble:nth-of-type(11) {
  animation-delay: -63.45s;
}
.bl_bubbles--bubble:nth-of-type(12) {
  animation-delay: -54s;
}
.bl_bubbles--bubble:nth-of-type(13) {
  animation-delay: -49.95s;
}
.bl_bubbles--bubble:nth-of-type(14) {
  animation-delay: -41.85s;
}
.bl_bubbles--bubble:nth-of-type(15) {
  animation-delay: -35.1s;
}
.bl_bubbles--bubble:nth-of-type(16) {
  animation-delay: -29.7s;
}
.bl_bubbles--bubble:nth-of-type(17) {
  animation-delay: -22.95s;
}
.bl_bubbles--bubble:nth-of-type(18) {
  animation-delay: -16.2s;
}
.bl_bubbles--bubble:nth-of-type(19) {
  animation-delay: -9.45s;
}
.bl_bubbles--bubble:nth-of-type(20) {
  animation-delay: 0s;
}
@media (max-width: 768px) {
  .bl_bubbles--bubble:nth-of-type(3n) {
    transform: scale(0.4);
  }
  .bl_bubbles--bubble:nth-of-type(3n+1) {
    transform: scale(0.7);
  }
  .bl_bubbles--bubble:nth-of-type(3n+2) {
    transform: scale(0.5);
  }
}

.bl_sumit--map {
  overflow: hidden;
}
.bl_sumit--map .goal {
  transform-origin: 25% 65%;
  animation: map_goal2 4s 0s infinite;
  animation-timing-function: ease;
}

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

@keyframes animation-wave-switch {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.bl_tsunagite3, .bl_island--image {
  position: relative;
  z-index: 1;
}
.bl_tsunagite3:before, .bl_island--image:before, .bl_tsunagite3:after, .bl_island--image:after {
  content: "";
  display: block;
  background: repeat-y top center/contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 1136px;
  margin: auto;
  z-index: -1;
  opacity: 0;
}
.bl_tsunagite3:before, .bl_island--image:before {
  animation: animation-wave-switch 12s 0s infinite;
}
.bl_tsunagite3:after, .bl_island--image:after {
  animation: animation-wave-switch 12s 6s infinite;
}

.bl_island {
  margin-top: 100px;
  background-color: #45AFE1;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.1814191661%;
  position: relative;
}
.bl_island--image {
  position: absolute;
  top: 0;
  left: 0;
  padding: 46px 0 37px;
}
.bl_island--image:before {
  background-image: url(../../images/202104/index/wave-island1.png);
}
.bl_island--image:after {
  background-image: url(../../images/202104/index/wave-island2.png);
}
.bl_island img {
  display: block;
  width: 100%;
  height: auto;
}
.bl_island--map {
  display: block;
  position: absolute;
  z-index: 1;
}
.bl_island--map:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background: no-repeat center center/contain;
}
.bl_island--map:hover:after {
  z-index: 1;
  opacity: 1;
}
.bl_island--map.school {
  top: 6.2865497076vw;
  left: 10.8918128655vw;
  width: 16.3742690058vw;
  height: 14.2543859649vw;
}
.bl_island--map.school:after {
  transform: translate(-20%, -90%);
  background-image: url(../../images/202104/index/dialog/school.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.school:after {
    background-image: url(../../images/202104/index/dialog/school@2x.png?2);
  }
}
.bl_island--map.school:hover:after {
  width: 15.4239766082vw;
  height: 14.2543859649vw;
}
.bl_island--map.caravan {
  top: 4.0204678363vw;
  left: 74.0497076023vw;
  width: 18.8961988304vw;
  height: 14.5102339181vw;
}
.bl_island--map.caravan:after {
  transform: translate(11%, -79%);
  background-image: url(../../images/202104/index/dialog/caravan.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.caravan:after {
    background-image: url(../../images/202104/index/dialog/caravan@2x.png?2);
  }
}
.bl_island--map.caravan:hover:after {
  width: 16.5935672515vw;
  height: 14.3274853801vw;
}
.bl_island--map.jinzai {
  top: 22.2076023392vw;
  left: 18.3771929825vw;
  width: 16.8859649123vw;
  height: 15.4970760234vw;
}
.bl_island--map.jinzai:after {
  transform: translate(11%, -72%);
  background-image: url(../../images/202104/index/dialog/jinzai.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.jinzai:after {
    background-image: url(../../images/202104/index/dialog/jinzai@2x.png?2);
  }
}
.bl_island--map.jinzai:hover:after {
  width: 15.4970760234vw;
  height: 14.6198830409vw;
}
.bl_island--map.summit {
  top: 21.081871345vw;
  left: 42.0614035088vw;
  width: 18.735380117vw;
  height: 15.8903508772vw;
}
.bl_island--map.summit:after {
  transform: translate(9%, -74%);
  background-image: url(../../images/202104/index/dialog/summit.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.summit:after {
    background-image: url(../../images/202104/index/dialog/summit@2x.png?2);
  }
}
.bl_island--map.summit:hover:after {
  width: 15.4239766082vw;
  height: 14.6198830409vw;
}
.bl_island--map.channel {
  top: 20.5409356725vw;
  left: 67.4707602339vw;
  width: 17.0073099415vw;
  height: 16.5453216374vw;
}
.bl_island--map.channel:after {
  transform: translate(19%, -69%);
  background-image: url(../../images/202104/index/dialog/channel.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.channel:after {
    background-image: url(../../images/202104/index/dialog/channel@2x.png?2);
  }
}
.bl_island--map.channel:hover:after {
  width: 16.5204678363vw;
  height: 14.6198830409vw;
}
.bl_island--map.future-v2 {
  top: 39.3859649123vw;
  left: 32.9532163743vw;
  width: 19.3114035088vw;
  height: 13.5950292398vw;
}
.bl_island--map.future-v2:after {
  transform: translate(0%, -96%);
  background-image: url(../../images/202104/index/dialog/future-v2.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.future-v2:after {
    background-image: url(../../images/202104/index/dialog/future-v2@2x.png?2);
  }
}
.bl_island--map.future-v2:hover:after {
  width: 19.5175438596vw;
  height: 14.1081871345vw;
}
.bl_island--map.tsunagite {
  top: 37.3903508772vw;
  left: 56.5497076023vw;
  width: 13.7039473684vw;
  height: 15.4546783626vw;
}
.bl_island--map.tsunagite:after {
  transform: translate(25%, -74%);
  background-image: url(../../images/202104/index/dialog/tsunagite.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.tsunagite:after {
    background-image: url(../../images/202104/index/dialog/tsunagite@2x.png?2);
  }
}
.bl_island--map.tsunagite:hover:after {
  width: 16.2280701754vw;
  height: 14.6929824561vw;
}
.bl_island--map.junior {
  top: 36.1476608187vw;
  left: 6.2134502924vw;
  width: 23.0263157895vw;
  height: 15.2558479532vw;
}
.bl_island--map.junior:after {
  transform: translate(16%, -69%);
  background-image: url(../../images/202104/index/dialog/junior.png?2);
}
@media (min-width: 1369px) {
  .bl_island--map.junior:after {
    background-image: url(../../images/202104/index/dialog/junior@2x.png?2);
  }
}
.bl_island--map.junior:hover:after {
  width: 20.0073099415vw;
  height: 15.7748538012vw;
}
.bl_island--map.caravan:after {
  transform: translate(-93%, -38%);
}
.bl_island--map.channel:after {
  transform: translate(-62%, -60%);
}
.bl_island--map.school:after {
  transform: translate(90%, -53%);
}
.bl_island--map.jinzai:after {
  transform: translate(-67%, -56%);
}
.bl_island--map.summit:after {
  transform: translate(-79%, -53%);
}
.bl_island--map.future:after {
  transform: translate(-74%, -70%);
}
@media (max-width: 768px) {
  .bl_island {
    margin-top: 0;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 252.2666666667%;
    position: relative;
  }
  .bl_island--image {
    padding: 4.9333333333vw 0 10.6666666667vw;
  }
  .bl_island--image:before {
    background-image: url(../../images/202104/index/sp/wave-island1.png);
  }
  .bl_island--image:after {
    background-image: url(../../images/202104/index/sp/wave-island2.png);
  }
  .bl_island--map.school {
    top: 154vw;
    left: 30vw;
    width: 39.2666666667vw;
    height: 34.1333333333vw;
  }
  .bl_island--map.school:after {
    background-image: url(../../images/202104/index/sp/dialog/school.png?2);
    width: 73.7333333333vw !important;
    height: 67.5466666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(-13%, -91%);
  }
  .bl_island--map.school.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.school:hover:after {
    display: none;
  }
  .bl_island--map.caravan {
    top: 26.8vw;
    left: 7.2vw;
    width: 40.1066666667vw;
    height: 41.4666666667vw;
  }
  .bl_island--map.caravan:after {
    background-image: url(../../images/202104/index/sp/dialog/caravan.png?2);
    width: 80.8533333333vw !important;
    height: 67.7466666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(2%, -77%);
  }
  .bl_island--map.caravan.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.caravan:hover:after {
    display: none;
  }
  .bl_island--map.jinzai {
    top: 77.8666666667vw;
    left: 22.4vw;
    width: 38.6666666667vw;
    height: 35.4666666667vw;
  }
  .bl_island--map.jinzai:after {
    background-image: url(../../images/202104/index/sp/dialog/jinzai.png?2);
    width: 73.7333333333vw !important;
    height: 70.0933333333vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(2%, -79%);
  }
  .bl_island--map.jinzai.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.jinzai:hover:after {
    display: none;
  }
  .bl_island--map.summit {
    top: 51.3333333333vw;
    left: 54.4vw;
    width: 39.7333333333vw;
    height: 33.7066666667vw;
  }
  .bl_island--map.summit:after {
    background-image: url(../../images/202104/index/sp/dialog/summit.png?2);
    width: 73.7333333333vw !important;
    height: 67.0666666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(-48%, -95%);
  }
  .bl_island--map.summit.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.summit:hover:after {
    display: none;
  }
  .bl_island--map.channel {
    top: 116.4vw;
    left: 6.1333333333vw;
    width: 41.4666666667vw;
    height: 40.3733333333vw;
  }
  .bl_island--map.channel:after {
    background-image: url(../../images/202104/index/sp/dialog/channel.png?2);
    width: 78.2666666667vw !important;
    height: 69.0266666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(-3%, -77%);
  }
  .bl_island--map.channel.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.channel:hover:after {
    display: none;
  }
  .bl_island--map.future-v2 {
    top: 189.8666666667vw;
    left: 53.0666666667vw;
    width: 41.7333333333vw;
    height: 29.4666666667vw;
  }
  .bl_island--map.future-v2:after {
    background-image: url(../../images/202104/index/sp/dialog/future-v2.png?2);
    width: 73.3333333333vw !important;
    height: 49.4666666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(-62%, -91%);
  }
  .bl_island--map.future-v2.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.future-v2:hover:after {
    display: none;
  }
  .bl_island--map.tsunagite {
    top: 94.1333333333vw;
    left: 54.9333333333vw;
    width: 30.476vw;
    height: 41.036vw;
  }
  .bl_island--map.tsunagite:after {
    background-image: url(../../images/202104/index/sp/dialog/tsunagite.png?2);
    width: 73.7333333333vw !important;
    height: 65.4666666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(-60%, -65%);
  }
  .bl_island--map.tsunagite.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.tsunagite:hover:after {
    display: none;
  }
  .bl_island--map.junior {
    top: 204vw;
    left: 0vw;
    width: 52.4vw;
    height: 34.7466666667vw;
  }
  .bl_island--map.junior:after {
    background-image: url(../../images/202104/index/sp/dialog/junior.png?2);
    width: 94.6666666667vw !important;
    height: 72.3066666667vw !important;
    z-index: -1;
    transition: opacity 0.35s;
    transform: translate(3%, -106%);
  }
  .bl_island--map.junior.is-center:after {
    display: block !important;
    opacity: 1;
  }
  .bl_island--map.junior:hover:after {
    display: none;
  }
}

.bl_title_mid {
  margin-top: 109px;
}
.bl_title_mid img {
  margin: auto;
}
.bl_title_mid--description {
  margin-top: 84px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.3275rem;
  line-height: 1.6071428571;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: center;
  font-weight: 900;
  position: relative;
}
.bl_title_mid--description:after {
  content: "";
  display: block;
  background: #E19A00;
  max-height: 478px;
  height: 63.7333333333vw;
  width: 300vw;
  z-index: -1;
  top: 50%;
  left: -100vw;
  position: absolute;
}
@media (max-width: 768px) {
  .bl_title_mid--description {
    margin-top: 8.8vw;
    font-size: calc(3.92vw - 1px);
    line-height: 6.3vw;
    letter-spacing: 1px;
  }
}

.bl_border {
  display: block;
  background: url(../../images/index/bg-human-repeat-s.png) repeat-x center left/contain;
  border: 0;
  width: 255px;
  height: 15px;
  margin: auto;
}
.bl_border.width4 {
  width: 92px;
  height: 20px;
}

.bl_tsunagite3 {
  padding: 90px 0 313px;
  background: #288ACC;
}
.bl_tsunagite3.pref-less .el_profile--row {
  width: 100%;
  align-items: center;
}
.bl_tsunagite3.pref-less .el_profile--twitter {
  margin-left: 0;
  margin-right: 8px;
  min-width: 32px;
}
.bl_tsunagite3.pref-less .el_profile--button {
  margin-top: 0;
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.bl_tsunagite3:before {
  background-image: url(../../images/202104/index/wave-tsunagite1.png);
}
.bl_tsunagite3:after {
  background-image: url(../../images/202104/index/wave-tsunagite2.png);
}
.bl_tsunagite3--inner {
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.bl_tsunagite3--title-ja {
  color: #fff;
}
.bl_tsunagite3--title-member {
  margin-top: 90px;
}
.bl_tsunagite3--itemswrap {
  margin: 60px auto 0;
  max-width: 772px;
  width: 100%;
  overflow: hidden;
}
.bl_tsunagite3--items {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-right: -35px;
  margin-left: -35px;
}
.bl_tsunagite3--item {
  margin-bottom: 78px;
  width: 137px;
  box-sizing: content-box;
  padding-left: 35px;
  padding-right: 35px;
}
.bl_tsunagite3--button {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #2861CC;
  text-align: center;
  color: #fff;
  font-size: 1.16375rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  font-weight: 700;
  border-radius: 10px;
  transition: 0.35s;
}
.bl_tsunagite3--button:hover {
  background: #0046C3;
}
@media (max-width: 768px) {
  .bl_tsunagite3 {
    margin-top: -15vw;
    padding: 9.6vw 0 34.6862133333vw;
  }
  .bl_tsunagite3:before, .bl_tsunagite3:after {
    background-repeat: no-repeat;
    width: 88.5333333333vw;
  }
  .bl_tsunagite3:before {
    background-image: url(../../images/202104/index/sp/wave-tsunagite1.png);
    animation-delay: 3s;
  }
  .bl_tsunagite3:after {
    background-image: url(../../images/202104/index/sp/wave-tsunagite2.png);
    animation-delay: 9s;
  }
  .bl_tsunagite3--inner {
    width: 562px;
    max-width: 74.9333333333vw;
  }
  .bl_tsunagite3--title-en {
    width: 41.5466666667vw;
  }
  .bl_tsunagite3--title-ja {
    margin-top: 6.12vw;
  }
  .bl_tsunagite3--description {
    margin-top: 12.1333333333vw;
  }
  .bl_tsunagite3--title-member {
    margin-top: 21.7333333333vw;
    width: 481px;
    max-width: 64.1333333333vw;
  }
  .bl_tsunagite3--itemswrap {
    margin-top: 8.9333333333vw;
  }
  .bl_tsunagite3--items {
    margin: 0 -3.3333333333vw;
  }
  .bl_tsunagite3--item {
    margin-bottom: 12.2666666667vw;
    padding-right: 3.3333333333vw;
    padding-left: 3.3333333333vw;
    width: 50%;
    box-sizing: border-box;
  }
}

.el_tsunagite3 .el_profile--photo {
  margin-right: 0 !important;
}
.el_tsunagite3 .el_profile--photo img {
  margin-right: 0 !important;
}
.el_tsunagite3 .el_profile--name {
  margin-top: 19px;
}
.el_tsunagite3 .el_profile--twitter {
  width: 32px;
  height: 32px;
  margin-left: 8px;
}
.el_tsunagite3 .el_profile--button {
  margin-top: 12px;
  position: static;
  color: #288ACC;
  background: #fff;
  font-weight: 900;
}
.el_tsunagite3 .el_profile--button:hover {
  color: #fff;
  background: #0046C3;
}
@media (max-width: 768px) {
  .el_tsunagite3 .el_profile--photo img {
    width: 100%;
    height: auto;
  }
  .el_tsunagite3 .el_profile--row {
    width: 100%;
    justify-content: space-between;
  }
  .el_tsunagite3 .el_profile--born {
    width: 176px;
    max-width: 23.4666666667vw;
    height: 57px;
    max-height: 7.6vw;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.3333333333vw;
    display: none;
  }
  .el_tsunagite3 .el_profile--twitter {
    width: 7.6vw;
    height: 7.6vw;
  }
  .el_tsunagite3 .el_profile--button {
    height: 5.76vw;
    line-height: 5.76vw;
    border-radius: 1.0666666667vw;
    font-size: 3.0666666667vw;
  }
}

.bl_aboutus .bg-blue {
  background: #F9F9F9;
}
.bl_aboutus--inner {
  margin: auto;
}
.bl_aboutus--border {
  margin-top: 100px;
  margin-bottom: 37px;
  height: 1px;
  background-color: #040000;
}
.bl_aboutus--wave {
  margin: 75px auto 85px;
}
.bl_aboutus--wave img {
  margin: auto;
}

.el_aboutus {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  padding: 92px 5px 101px;
  font-feature-settings: "palt";
}
.el_aboutus--title {
  margin-bottom: 52px;
}
.el_aboutus--title img {
  margin: auto;
}
.el_aboutus--whats {
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  font-weight: 900;
  color: #000;
}
.el_aboutus--description {
  margin: 25px auto 0;
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: #040000;
  text-align: center;
  max-width: 667px;
  font-weight: 500;
}
.el_aboutus--description:before, .el_aboutus--description:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.el_aboutus--description:before {
  margin-top: -0.5em;
}
.el_aboutus--description:after {
  margin-bottom: -0.5em;
}
.el_aboutus--description.center {
  text-align: center;
  text-indent: -1.2px;
}
@media (max-width: 768px) {
  .el_aboutus {
    padding: 17.6vw 5px;
  }
  .el_aboutus--whats {
    font-size: 3.4666666667vw;
    font-weight: 500;
  }
  .el_aboutus--description {
    font-size: 3.4666666667vw;
    font-weight: 400;
    line-height: 8vw;
    color: #4e4e4e;
  }
  .el_aboutus.umi-and-nippon img {
    width: 65.7333333333vw;
  }
  .el_aboutus.kaidou img {
    width: 68.9333333333vw;
  }
  .el_aboutus.netsugen img {
    width: 49.8133333333vw;
  }
}

.el_twitter {
  position: absolute;
  z-index: 10;
  max-width: 380px;
  width: 40.3825717322%;
  height: 251px;
  color: #fff;
  border-radius: 4px;
  padding: 23px 3.4006376196%;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  box-shadow: 2px 2px 2px #888;
}
.el_twitter:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  display: block;
  width: 33px;
  height: 42px;
  background: no-repeat top center/contain;
}
.el_twitter.west {
  left: 0;
  background: #CB2318;
  transform: translateX(-35%);
}
.el_twitter.west:after {
  left: 25%;
  background-image: url(../../images/index/s2-tweet-arrow-west.png);
}
.el_twitter.east {
  right: 0;
  background: #1E5AAC;
  transform: translateX(35%);
}
.el_twitter.east:after {
  right: 25%;
  background-image: url(../../images/index/s2-tweet-arrow-east.png);
}
.el_twitter--sp_header {
  display: none;
}
.el_twitter--about {
  border-bottom: solid 1px #fff;
  font-size: 1.579375rem;
  letter-spacing: 0em;
  padding-bottom: 13px;
  margin-bottom: 13px;
}
.el_twitter--time {
  margin-top: -4px;
  text-align: right;
  font-size: 0.9975rem;
  letter-spacing: 0em;
}
.el_twitter--header {
  margin-top: -8px;
  display: flex;
  flex-flow: row nowrap;
}
.el_twitter--icon {
  border-radius: 4px;
}
.el_twitter--info {
  margin-left: 8px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}
.el_twitter--name {
  font-size: 1.246875rem;
  letter-spacing: 0em;
}
.el_twitter--id {
  margin-top: 0.5em;
  font-size: 0.9975rem;
  letter-spacing: 0em;
}
.el_twitter--tweet {
  margin-top: 12px;
  font-size: 1.16375rem;
  line-height: 1.9285714286;
  letter-spacing: 0.05em;
  font-weight: 400;
  -webkit-line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 81px;
  word-break: break-all;
}
.el_twitter--tweet a {
  color: inherit;
  text-decoration: underline;
  margin: 0 0.33em;
}
.el_twitter--more {
  margin-top: 9px;
  display: block;
  font-size: 1.246875rem;
  letter-spacing: 0em;
  font-weight: 500;
  color: #fff;
  opacity: 0.5;
}
@media (max-width: 1242px) {
  .el_twitter.west {
    transform: translateX(-15%);
  }
  .el_twitter.west:after {
    left: 3%;
  }
  .el_twitter.east {
    transform: translateX(15%);
  }
  .el_twitter.east:after {
    right: 3%;
  }
}
@media (max-width: 1135px) {
  .el_twitter {
    width: 45%;
  }
  .el_twitter.west {
    transform: translateX(-50%);
  }
  .el_twitter.west:after {
    left: 40%;
  }
  .el_twitter.east {
    transform: translateX(50%);
  }
  .el_twitter.east:after {
    right: 40%;
  }
}
@media (max-width: 966px) {
  .el_twitter {
    width: 36%;
  }
  .el_twitter.west {
    transform: translateX(-20%);
  }
  .el_twitter.west:after {
    left: 3%;
  }
  .el_twitter.east {
    transform: translateX(20%);
  }
  .el_twitter.east:after {
    right: 3%;
  }
}
@media (max-width: 530px) {
  .el_twitter {
    width: 46.6666666667vw;
    height: auto;
    top: 4vw;
    padding: 5.6vw 2.8vw 4.2666666667vw;
  }
  .el_twitter.west, .el_twitter.east {
    transform: none;
  }
  .el_twitter.west:after {
    left: 25%;
  }
  .el_twitter.east:after {
    right: 25%;
  }
  .el_twitter.goal {
    width: 33.3vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
  }
  .el_twitter.goal.west {
    transform: translateX(-100%) !important;
  }
  .el_twitter.goal.east {
    transform: translateX(100%) !important;
  }
  .el_twitter--sp_header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 9.3333333333vw;
  }
  .el_twitter--sp_header img {
    width: 9.3333333333vw;
    height: auto;
    object-fit: contain;
  }
  .el_twitter--sp_info {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
  }
  .el_twitter--about, .el_twitter--time {
    opacity: 0.5;
    text-align: right;
    line-height: 1;
    font-size: 3.4666666667vw;
  }
  .el_twitter--about {
    border: 0;
    padding: 0;
    margin: 0;
  }
  .el_twitter--header {
    margin-top: 4px;
  }
  .el_twitter--info {
    margin-left: 0;
  }
  .el_twitter--name {
    margin-top: 13px;
    margin-left: -3px;
    font-size: 3.5vw;
  }
  .el_twitter--id {
    margin-top: 2vw;
    margin-left: -3px;
    font-size: 2.94vw;
  }
  .el_twitter--tweet {
    font-size: 3.4666666667vw;
    line-height: 1.7692307692;
    height: 24.5333333333vw;
    -webkit-line-clamp: 4;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  .el_twitter--more {
    font-size: 3.4666666667vw;
  }
  .el_twitter > .el_twitter--about, .el_twitter > .el_twitter--time {
    display: none;
  }
}

.bl_videoblog--videowrap:after {
  display: none !important;
}

@keyframes fish-frequency {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, 6px);
  }
  50% {
    transform: translate(-4px, 8px);
  }
  75% {
    transform: translate(3px, -4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
#el_modal {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1.2s;
  opacity: 1;
}
#el_modal.clear {
  opacity: 0;
}
#el_modal .message {
  border: solid 2px #1E5AA4;
  border-radius: 10px;
  height: 34px;
  line-height: 30px;
  text-align: center;
  background: #fff;
  color: #1E5AA4;
  display: inline-block;
  padding: 0 2em;
}

.bl_writer {
  margin: 75px auto 0;
  width: 732px;
  max-width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  border-bottom: rgba(255, 255, 255, 0.7) solid 1px;
  position: relative;
  z-index: 0;
}
.bl_writer:after {
  content: "";
  display: block;
  background: url(../../images/index/bgi-big.png) repeat-x center center/contain;
  width: 300vw;
  height: 264px;
  position: absolute;
  z-index: -1;
  left: -100vw;
  bottom: 0;
  transform: translateY(27%);
}
.bl_writer--title {
  text-align: center;
  position: relative;
  z-index: 1;
}
.bl_writer--title .inner {
  display: inline-block;
  background: #CCA462;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 1.49625rem;
  letter-spacing: 1.05em;
  text-indent: 1.05em;
}
.bl_writer--title .inner:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: -1;
}
.bl_writer--container {
  margin: 28px auto 45px;
  width: 561px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.bl_writer--image {
  width: 30.7486631016%;
}
.bl_writer--caption {
  width: 61.9012477718%;
}
.bl_writer--name {
  font-weight: 700;
  font-size: 1.6625rem;
  letter-spacing: 0.2em;
}
.bl_writer--profile {
  margin-top: 14px;
  font-weight: 400;
  font-size: 0.9975rem;
  line-height: 1.8333333333;
  letter-spacing: 0em;
}
@media (max-width: 768px) {
  .bl_writer {
    width: 87.0666666667vw;
    margin-left: auto;
    margin-right: auto;
  }
  .bl_writer:after {
    height: 15.6vw;
  }
  .bl_writer--container {
    display: block;
    width: 100%;
  }
  .bl_writer--image, .bl_writer--caption {
    width: 100%;
  }
  .bl_writer--image img {
    max-width: 341px;
    width: 45.4666666667vw;
    margin: auto;
  }
  .bl_writer--name {
    margin-top: 5.8666666667vw;
    text-align: center;
  }
  .bl_writer--profile {
    margin-top: 6.6666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 400;
  }
}

.bl_comingsoon {
  margin: 64px auto 20px;
  max-width: 84vw;
}
.bl_comingsoon img {
  margin: auto;
}

@keyframes fish_lr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes fish_rl {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fish_self {
  0% {
    transform: translate(0, 0) rotate3d(0, 0, 20px) rotate3d(0, 1, 0, 0deg);
  }
  24% {
    transform: translate(16.8%, -12%) rotate3d(0, 1, 0, 10deg);
  }
  50% {
    transform: translate(-20%, 9.6%) rotate3d(0, 1, 0, -12deg);
  }
  74% {
    transform: translate(26.4%, 15.2%) rotate3d(0, 1, 0, 8deg);
  }
  100% {
    transform: translate(0, 0);
  }
}
.el_fish {
  margin-top: 35px;
  position: relative;
  width: calc(100vw + 280px);
  margin-left: -140px;
}
.el_fish img {
  display: block;
  max-width: 18.6666666667vw;
  animation: fish_self 6s infinite;
}
.el_fish.rl {
  animation: fish_rl 45s infinite;
}
.el_fish.lr {
  animation: fish_lr 45s infinite;
}

.el_netsugen_profile {
  width: 160px;
}
@media (max-width: 768px) {
  .el_netsugen_profile {
    max-width: 160px;
    width: 40%;
    margin-left: 10px;
    margin-right: 10px;
  }
}

.bl_special {
  width: 884px;
  max-width: 90%;
  margin: auto;
}
.bl_special a {
  display: block;
  padding: 84px 0 75px;
  transition: 0.35s;
}
.bl_special a:hover {
  opacity: 0.6;
}
.bl_special:after {
  content: "";
  display: block;
  width: 100%;
  height: 29px;
  background: url(../../images/index/banner/i.png) repeat-x left center/contain;
}
@media (max-width: 768px) {
  .bl_special:after {
    height: 16px;
  }
}

.bl_streaming {
  background: #FFB914;
  font-feature-settings: "palt";
  padding-bottom: 330px;
}
.bl_streaming .fr_inner {
  width: 797px;
}
.bl_streaming--title, .bl_streaming--videowrap {
  position: relative;
}
.bl_streaming--title:after, .bl_streaming--videowrap:after {
  content: "";
  display: block;
  background: #6DA4C4;
  width: 300vw;
  height: 100%;
  position: absolute;
  left: -100vw;
  z-index: -1;
}
.bl_streaming--title:after {
  height: 100%;
  bottom: 0;
}
.bl_streaming--videowrap:after {
  height: 50%;
  top: 0;
}
.bl_streaming--title {
  margin: 0 auto;
  padding: 132px 0 35px;
  width: 743px;
  max-width: 100%;
  text-align: center;
  position: relative;
  z-index: 0;
  font-weight: 700;
}
.bl_streaming--title .date {
  font-size: 2.743125rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 53.2px;
  -webkit-hogehoge-b: 43.89px;
  -webkit-hogehoge-c: 1.2121212121;
  line-height: 1.2121212121;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.bl_streaming--title .date:before, .bl_streaming--title .date:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--title .date:before {
  margin-top: -0.1060606061em;
}
.bl_streaming--title .date:after {
  margin-bottom: -0.1060606061em;
}
.bl_streaming--title .date:before, .bl_streaming--title .date:after {
  content: "";
  display: block;
  width: 4px;
  height: 84px;
  background: #000;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
  bottom: 35px;
}
.bl_streaming--title .date:before {
  left: 0;
  transform: rotate(-30deg);
}
.bl_streaming--title .date:after {
  right: 0;
  transform: rotate(30deg);
}
.bl_streaming--title .main {
  margin-top: 20px;
  font-size: 2.9925rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 66.5px;
  -webkit-hogehoge-b: 47.88px;
  -webkit-hogehoge-c: 1.3888888889;
  line-height: 1.3888888889;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.bl_streaming--title .main:before, .bl_streaming--title .main:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--title .main:before {
  margin-top: -0.1944444444em;
}
.bl_streaming--title .main:after {
  margin-bottom: -0.1944444444em;
}
.bl_streaming--video {
  background: #9FA0A0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bl_streaming--video.image {
  background: #fff;
}
.bl_streaming--video.image img {
  transition: 0.35s;
}
.bl_streaming--video.image:hover img {
  opacity: 0.7;
}
.bl_streaming--videowrap {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 59.8494353827%;
  position: relative;
  position: relative;
}
.bl_streaming--title_en {
  margin: 79px auto 63px;
  width: 600px;
}
.bl_streaming--title_ja {
  margin-top: 55px;
  text-align: center;
  font-size: 2.9925rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 75.3977px;
  -webkit-hogehoge-b: 47.88px;
  -webkit-hogehoge-c: 1.5747222222;
  line-height: 1.5747222222;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  font-weight: 900;
  position: relative;
}
.bl_streaming--title_ja:before, .bl_streaming--title_ja:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--title_ja:before {
  margin-top: -0.2873611111em;
}
.bl_streaming--title_ja:after {
  margin-bottom: -0.2873611111em;
}
.bl_streaming--title_ja:before, .bl_streaming--title_ja:after {
  content: "";
  display: block;
  width: 146px;
  height: 120px;
  background: no-repeat center center/contain;
  position: absolute;
  bottom: 10px;
}
.bl_streaming--title_ja:before {
  left: 0;
  background-image: url(../../images/index/goal/tako.png);
}
.bl_streaming--title_ja:after {
  right: 0;
  background-image: url(../../images/index/goal/sakana.png);
}
.bl_streaming--description {
  margin-top: 74.5px;
  padding: 0 5px;
  text-align: center;
  font-size: 1.49625rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 53.2px;
  -webkit-hogehoge-b: 23.94px;
  -webkit-hogehoge-c: 2.2222222222;
  line-height: 2.2222222222;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  font-weight: bold;
}
.bl_streaming--description:before, .bl_streaming--description:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--description:before {
  margin-top: -0.6111111111em;
}
.bl_streaming--description:after {
  margin-bottom: -0.6111111111em;
}
.bl_streaming--time {
  padding-top: 49px;
  margin-top: 62px;
  border-top: solid 1px #fff;
  text-align: center;
  font-size: 1.995rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 63.1484px;
  -webkit-hogehoge-b: 31.92px;
  -webkit-hogehoge-c: 1.9783333333;
  line-height: 1.9783333333;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  font-weight: 700;
}
.bl_streaming--time:before, .bl_streaming--time:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--time:before {
  margin-top: -0.4891666667em;
}
.bl_streaming--time:after {
  margin-bottom: -0.4891666667em;
}
.bl_streaming--note {
  margin-top: 58px;
  text-align: center;
  font-size: 1.413125rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 31.92px;
  -webkit-hogehoge-b: 22.61px;
  -webkit-hogehoge-c: 1.4117647059;
  line-height: 1.4117647059;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.bl_streaming--note:before, .bl_streaming--note:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_streaming--note:before {
  margin-top: -0.2058823529em;
}
.bl_streaming--note:after {
  margin-bottom: -0.2058823529em;
}
.bl_streaming--note a {
  color: inherit;
  text-decoration: none;
}
.bl_streaming--note a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .bl_streaming .fr_inner {
    max-width: 100%;
  }
  .bl_streaming--title {
    padding-top: 14.2666666667vw;
    padding-bottom: 6.6666666667vw;
  }
  .bl_streaming--title .date {
    font-size: 4.4746666667vw;
  }
  .bl_streaming--title .date:before, .bl_streaming--title .date:after {
    height: 100px;
    bottom: 6.6666666667vw;
  }
  .bl_streaming--title .date:before {
    left: 14vw;
    transform: rotate(-20deg);
  }
  .bl_streaming--title .date:after {
    right: 14vw;
    transform: rotate(20deg);
  }
  .bl_streaming--title .main {
    font-size: 4.9133333333vw;
  }
  .bl_streaming--title_en, .bl_streaming--title_ja, .bl_streaming--description, .bl_streaming--time, .bl_streaming--note {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
  }
  .bl_streaming--title_en {
    margin-top: 11.7333333333vw;
    margin-bottom: 14.1333333333vw;
  }
  .bl_streaming--title_ja {
    font-size: 5.3333333333vw;
  }
  .bl_streaming--title_ja:before, .bl_streaming--title_ja:after {
    width: 16.5333333333vw;
  }
  .bl_streaming--description {
    margin-top: 9.8666666667vw;
    font-size: 4vw;
    text-align: justify;
    text-justify: inter-ideograph;
    font-weight: normal;
  }
  .bl_streaming--date {
    margin-top: 66px;
    padding-top: 58px;
    font-size: 5.3333333333vw;
  }
}

.module_wave.type1 {
  margin: -100px 0;
  height: 110px;
}
@media (max-width: 768px) {
  .module_wave.type1 {
    margin: -24vw 0 0;
  }
  .module_wave.type1 .top:after {
    height: 200px;
  }
}

.bl_channel {
  background-color: #45AFE1;
}
.bl_channel .bx-controls-direction {
  height: 1px;
}
.bl_channel--badge {
  position: absolute;
  top: 0;
  right: 4%;
  z-index: 99;
}
.bl_channel--inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5% 1% 87px;
  position: relative;
  z-index: 0;
}
.bl_channel--shadow {
  position: absolute;
  z-index: 0;
  animation-name: bl_channel--fish;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.bl_channel--shadow.right {
  animation-direction: reverse;
}
.bl_channel--shadow.l1 {
  top: 4%;
  animation-duration: 88s;
  animation-delay: -181s;
}
.bl_channel--shadow.l2 {
  top: 32%;
  animation-duration: 71s;
  animation-delay: -240s;
}
.bl_channel--shadow.l3 {
  top: 72%;
  animation-duration: 48s;
  animation-delay: -381s;
}
.bl_channel--shadow.l4 {
  top: 25%;
  animation-duration: 52s;
  animation-delay: -221s;
}
.bl_channel--shadow.r1 {
  top: 44%;
  animation-duration: 192s;
  animation-delay: -5534s;
}
.bl_channel--shadow.r2 {
  top: 60%;
  animation-duration: 35s;
  animation-delay: -489s;
}
.bl_channel--movie {
  width: 100%;
  height: 100%;
}
.bl_channel #ytplayer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.bl_channel #ytplayer-sound {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 16px;
  cursor: pointer;
}
.bl_channel--fukidashi {
  position: absolute;
  top: 0%;
  left: 10%;
  z-index: 11;
  transform-origin: right bottom;
  animation: bl_channel--buruburu 3s 0s infinite;
}
.bl_channel--plant {
  position: absolute;
  z-index: -1;
  bottom: 12%;
  width: 81px;
  height: 158px;
}
.bl_channel--plant.small {
  width: 46px;
  height: 76px;
  bottom: 7%;
}
.bl_channel--plant.small.left {
  left: 1%;
}
.bl_channel--plant.small.right {
  right: 1%;
}
.bl_channel--plant.left {
  left: 3%;
  animation: bl_channel--plant 4s 0s infinite;
}
.bl_channel--plant.right {
  right: 3%;
  transform: rotateY(180deg);
  animation: bl_channel--plant-right 5s 0s infinite;
}
.bl_channel--carousel {
  position: absolute;
  z-index: 1;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: auto;
}
.bl_channel--items {
  visibility: hidden;
}
.bl_channel--item {
  background: #fff;
  position: relative;
  width: 272px;
}
.bl_channel--item[data-youtube-id] {
  cursor: pointer;
}
.bl_channel--item[data-youtube-id]:hover .bl_channel--figure {
  opacity: 0.5;
}
.bl_channel--figure {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
  background: #4C7B9C no-repeat center center/cover;
  position: relative;
}
.bl_channel--figure > span {
  font-size: 1.246875rem;
  letter-spacing: 0em;
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 48px;
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.bl_channel--figure > span.reserved > span {
  display: block;
  text-align: center;
}
.bl_channel--figure > span.reserved > span:nth-of-type(2) {
  font-size: 1.413125rem;
  letter-spacing: 0em;
}
.bl_channel--figure > img {
  display: none;
}
.bl_channel--caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  padding: 12px 16px;
  background-color: rgba(0, 0, 0, 0.81);
  color: #fff;
}
.bl_channel--subject {
  font-size: 0.9975rem;
  -webkit-hogehoge: 0;
  -webkit-hogehoge-a: 23.94px;
  -webkit-hogehoge-b: 15.96px;
  -webkit-hogehoge-c: 1.5;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 900;
  height: 31.3px;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.bl_channel--subject:before, .bl_channel--subject:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_channel--subject:before {
  margin-top: -0.25em;
}
.bl_channel--subject:after {
  margin-bottom: -0.25em;
}
.bl_channel--time {
  margin-top: 6px;
  display: block;
  font-size: 0.83125rem;
  line-height: 1;
  letter-spacing: 0em;
}
.bl_channel .bx-wrapper {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  margin: auto;
}
.bl_channel .bx-wrapper .bl_channel--items {
  visibility: visible;
}
@media (max-width: 1232px) {
  .bl_channel .bx-wrapper {
    width: 852px;
  }
}
.bl_channel .bx-wrapper .bx-pager {
  display: none;
}
.bl_channel .bx-wrapper .bx-prev,
.bl_channel .bx-wrapper .bx-next {
  width: 31px;
  height: 32px;
  background: url(../../images/index/channel/icon-left-arrow.png) no-repeat center center/contain;
}
.bl_channel .bx-wrapper .bx-prev:hover, .bl_channel .bx-wrapper .bx-prev:focus,
.bl_channel .bx-wrapper .bx-next:hover,
.bl_channel .bx-wrapper .bx-next:focus {
  background-position: center center;
}
.bl_channel .bx-wrapper .bx-next {
  transform: rotateY(180deg);
  right: -18px;
}
.bl_channel .bx-wrapper .bx-prev {
  left: -18px;
}
.bl_channel .bx-wrapper img {
  opacity: 1;
}
@media (min-width: 769px) {
  .bl_channel--frame {
    background: url(../../images/index/channel/frame-with.png) no-repeat center center/contain;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 49.6794871795%;
    position: relative;
  }
  .bl_channel--moviewrap {
    position: absolute;
    top: 13.1%;
    left: 0;
    right: -0.5%;
    bottom: 0;
    margin: 0 auto;
    width: 71.4%;
    height: 79%;
    background-color: #1E50A5;
  }
}
@media (max-width: 950px) {
  .bl_channel .bx-wrapper .bx-prev {
    left: 3px;
  }
  .bl_channel .bx-wrapper .bx-next {
    right: 3px;
  }
}
@media (max-width: 768px) {
  .bl_channel--inner {
    padding: 0 0 123px;
  }
  .bl_channel--frame {
    position: relative;
    background: url(../../images/index/channel/sp-eyecatch.png) no-repeat top center/contain;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 148%;
    position: relative;
  }
  .bl_channel--badge {
    display: none;
  }
  .bl_channel--shadow {
    transform: scale(0.6);
  }
  .bl_channel--plant {
    display: none;
  }
  .bl_channel--fukidashi,
.bl_channel #ytplayer-sound {
    display: none;
  }
  .bl_channel--moviewrap {
    bottom: 0;
    left: 0;
    margin: auto;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 65.1785714286%;
    position: relative;
    position: absolute !important;
  }
  .bl_channel .bx-wrapper {
    position: absolute;
    bottom: 0;
    left: -100%;
    right: -100%;
  }
  .bl_channel .bx-wrapper .bx-prev,
.bl_channel .bx-wrapper .bx-next {
    height: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .bl_channel .bx-wrapper .bx-prev {
    left: 10px;
  }
  .bl_channel .bx-wrapper .bx-next {
    right: 10px;
  }
  .bl_channel .bx-controls-direction {
    max-width: 100vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

@keyframes bl_channel--buruburu {
  0% {
    transform: rotate(0deg);
  }
  3%, 15% {
    transform: rotate(10deg);
  }
  6%, 18% {
    transform: rotate(0deg);
  }
  9%, 21% {
    transform: rotate(-10deg);
  }
  12%, 24% {
    transform: rotate(0deg);
  }
}
@keyframes bl_channel--plant {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  15% {
    transform: matrix(1, 0.2, 0, 1, 0.15, 0);
  }
  30% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
    transform: matrix(1, -0.2, 0, 1, -0.15, 0);
  }
  63% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes bl_channel--plant-right {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0) rotateY(180deg);
  }
  15% {
    transform: matrix(1, 0.2, 0, 1, 0.15, 0) rotateY(180deg);
  }
  30% {
    transform: matrix(1, 0, 0, 1, 0, 0) rotateY(180deg);
  }
  50% {
    transform: matrix(1, -0.2, 0, 1, -0.15, 0) rotateY(180deg);
  }
  63% {
    transform: matrix(1, 0, 0, 1, 0, 0) rotateY(180deg);
  }
}
@keyframes bl_channel--fish {
  0% {
    left: 125vw;
  }
  100% {
    left: -25vw;
  }
}
.bl_topnews {
  background-color: #DAE13C;
  padding-bottom: 100px;
}
.bl_topnews--inner {
  width: 706px;
  max-width: 95%;
  margin: auto;
}
.bl_topnews img {
  display: block;
  margin: auto;
}
.bl_topnews--title {
  padding-top: 100px;
}
.bl_topnews--items {
  margin-top: 56px;
  font-size: 1rem;
  line-height: 2.12625;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.bl_topnews--items:before, .bl_topnews--items:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bl_topnews--items:before {
  margin-top: -0.563125em;
}
.bl_topnews--items:after {
  margin-bottom: -0.563125em;
}
.bl_topnews--link {
  display: flex;
  flex-flow: row nowrap;
  color: inherit;
}
.bl_topnews--time {
  color: #1E5AA4;
  width: 6em;
}
.bl_topnews--subject {
  width: calc(100% - 6em);
  padding-left: 1.616em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.bl_topnews--more {
  margin-top: 48px;
  width: 100%;
  height: 43px;
  background: #288ACC;
  border-radius: 3px;
  transition: 0.35s;
  display: flex;
  align-items: center;
}
.bl_topnews--more:hover {
  background: #2861B9;
}
@media (max-width: 768px) {
  .bl_topnews--inner {
    width: 84vw;
  }
  .bl_topnews--items {
    font-size: 3.4666666667vw;
  }
}

.bl_infographic {
  position: relative;
  z-index: 1;
  background: repeat center center;
  background-size: 100% auto;
  background-image: url(../../images/202104/infographic/bg.png);
}
html.support-webp .bl_infographic {
  background-image: url(../../images/202104/infographic/bg.webp);
}

.bl_infographic--container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  transform: translateY(-125px);
}
.bl_infographic--description {
  margin: 42px auto 27px;
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  font-weight: 900;
  color: #fff;
}
.bl_infographic--button {
  position: relative;
}
.bl_infographic--button > * {
  transition: 0.35s;
}
.bl_infographic--button > *:nth-of-type(1) {
  position: relative;
  z-index: 1;
  opacity: 1;
}
.bl_infographic--button > *:nth-of-type(2) {
  position: absolute;
  z-index: 0;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.bl_infographic--button:hover > *:nth-of-type(1) {
  opacity: 0;
}
.bl_infographic--button:hover > *:nth-of-type(2) {
  opacity: 1;
}
@media (max-width: 768px) {
  .bl_infographic {
    background-size: auto 100%;
    background-image: url(../../images/202104/infographic/sp/bg.png);
  }
  html.support-webp .bl_infographic {
    background-image: url(../../images/202104/infographic/sp/bg.webp);
  }

  .bl_infographic--container {
    margin: auto;
    max-width: 80vw;
    transform: translateY(-18.1333333333vw);
  }
  .bl_infographic--description {
    margin: 6.4vw auto 3.6vw;
    font-size: 3.7333333333vw;
  }
}

/*# sourceMappingURL=page-index.css.map */