@charset "UTF-8";
/***
 * Core
 * base.................要素セレクタと属性セレクタのデフォルトスタイル
 * function.............プロジェクト全体を通して使用されるmixin,extend等のデフォルトスタイル
 *
 * Layout
 * container............コンポーネントをラップするオブジェクト。`max-width`を指定
 * grid.................グリッドレイアウトのベーススタイル
 *
 * Structure
 * article..............インナーブロック用ベーススタイル
 * box..................boxコンテンツ用ベーススタイル
 * button...............ボタンパーツ用styleを定義
 *
 * Utility
 * align................レスポンシブに対応した`width`を定義するためのヘルパークラス
 * color................カラー情報を定義するためのヘルパークラス
 * margin...............余白用スタイルを定義するためのヘルパークラス
 * position.............位置定義をするためのヘルパークラス
 * animation............アニメーション用スタイルを定義をするためのヘルパークラス
 * shame................一時しのぎ用のイレギュラー対応スタイルを定義をするためのヘルパークラス
 ***/
/* =======================================================================
  Core
  ======================================================================= */
html, body, div,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dt, dd,
table, th, td,
form, fieldset,
header, section, article, aside, footer, figure,
figcaption, nav {
  margin: 0px;
  padding: 0px; }

article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary {
  display: block; }

@-ms-viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom; }

@-o-viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom; }

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1;
  user-zoom: zoom; }

img {
  max-width: 100%; }

input, textarea, select, button {
  outline: none; }

label,
select,
[type="button"],
[type="checkbox"],
[type="radio"],
[type="submit"],
[type="reset"],
[type="file"],
[type="number"] {
  cursor: pointer; }

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: scroll;
  overflow: -moz-scrollbars-vertical;
  overflow-x: scroll; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit; }

ul, ol {
  list-style: none; }

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

p, li, dt, dd, th, td, pre {
  -ms-line-break: strict;
  line-break: strict;
  -ms-word-break: break-strict;
  word-break: break-strict; }

table {
  border-collapse: collapse;
  border-spacing: 0px; }

img {
  border: none;
  vertical-align: middle; }

/* =======================================================================
  Base
  ======================================================================= */
/**
 *
 * name: animation
 * categories: utility
 * prefix:" u"
 * 
**/
/* =======================================================================
  Animation
  ======================================================================= */
/* primary transition timing
------------------------------------ */
/* animation effects
------------------------------------ */
.is-hidden {
  visibility: hidden; }

@-webkit-keyframes is-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes is-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes is-slideinUp_s {
  from {
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinUp_s {
  from {
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes is-slideinUp_l {
  from {
    -webkit-transform: translateY(80px);
    transform: translateY(80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinUp_l {
  from {
    -webkit-transform: translateY(80px);
    transform: translateY(80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes is-slideinDown_s {
  from {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinDown_s {
  from {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes is-slideinDown_l {
  from {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinDown_l {
  from {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

/* fadeinUp
------------------------------------ */
.is-fadeinUp_s {
  -webkit-animation: is-slideinUp_s 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both;
  animation: is-slideinUp_s 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both; }

.is-fadeinUp_l {
  -webkit-animation: is-slideinUp_l 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both;
  animation: is-slideinUp_l 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both; }



/*************** City Animation Set ***************/
.u-menuBalloon {
  -webkit-transition: 0.2s easeIn;
  -o-transition: 0.2s easeIn;
  transition: 0.2s easeIn; }

.u-menuBalloon:hover {
  -webkit-transform: translate(0, -2%);
  -ms-transform: translate(0, -2%);
  transform: translate(0, -2%); }

@media (max-width: 960px) {
  .u-menuBalloon:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }

/* advertiser city
------------------------------------ */
#u-advertiserCar-1, #u-advertiserCar-2, #u-advertiserCar-3, #u-advertiserCar-4, #u-advertiserCar-5,
#u-advertiserTruck-1, #u-advertiserTruck-2, #u-advertiserTruck-3, #u-advertiserTruck-4, #u-advertiserTruck-5,
#u-advertiserManwalk-1, #u-advertiserManwalk-2, #u-advertiserManwalk-3, #u-advertiserManwalk-4, #u-advertiserManwalk-stop {
  display: none; }

/* media city
------------------------------------ */
#u-mediaCar-1, #u-mediaCar-2, #u-mediaCar-3, #u-mediaCar-4, #u-mediaCar-5,
#u-mediaTruck-1, #u-mediaTruck-2, #u-mediaTruck-3, #u-mediaTruck-4, #u-mediaTruck-5,
#u-mediaWalkman-1-1, #u-mediaWalkman-1-2, #u-mediaWalkman-1-3, #u-mediaWalkman-1-4, #u-mediaWalkman-1-5, #u-mediaWalkman-1-6, #u-mediaWalkman-1-7, #u-mediaWalkman-1-8, #u-mediaWalkman-1-9, #u-mediaWalkman-1-10,
#u-mediaWalkman-2-1, #u-mediaWalkman-2-2, #u-mediaWalkman-2-3, #u-mediaWalkman-2-4, #u-mediaWalkman-2-5, #u-mediaWalkman-2-6, #u-mediaWalkman-2-7 {
  display: none; }

/* =======================================================================
  Color
  ======================================================================= */
/**
 * # color define
 */
/**
 * # usage
 */
.ex {
  color: #e74c3c; }

/**
 * # mapping manage
 */
/* color manage for sns
------------------------------------ */
.ex01 {
  background: #e74c3c; }

.ex02 {
  background: #f09188; }

.ex03 {
  background: #b82617; }

.ex04 {
  background: rgba(231, 76, 60, 0.5);
  color: #f29f97; }

.button {
  background: #333; }
  .button:hover {
    background: #888; }
  .button:active {
    background: #2ecc71; }

.sns-twitter {
  background: #55acee; }

.sns-facebook {
  background: #3b5998; }

.sns-gplus {
  background: #dc4e41; }

/* text-link color
------------------------------------ */
:root {
  --base-color: #fcfcfc;
  --primary-bg-color: #4fc3f7;
  --txt-color: #01101b; }

html {
  font-size: 62.5%; }

html, body {
  height: 100%;
  overflow: inherit; }

body {
  background: var(--base-color);
  color: var(--txt-color);
  font-family: "メイリオ";
  font-size: 17px;
  line-height: 1.9;
  font: 1.7rem/1.9 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  -webkit-font-kerning: auto;
  font-kerning: auto;
  letter-spacing: .15em;
  overflow-x: hidden; }

a {
  color: #18aaec;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: .15s;
  transition: .15s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease; }
  a:focus, a:hover {
    color: #0e79aa; }
  a:active, a:focus, a:hover {
    outline: 0; }

::-moz-selection {
  background: #72d1ff;
  color: #fff; }

::selection {
  background: #72d1ff;
  color: #fff; }

::-moz-selection {
  background: #72d1ff;
  color: #fff; }

/* =======================================================================
  Function
  ======================================================================= */
/**
 * # clearfix
 */
/* position
------------------------------------ */
/**
 * # centered horizontally
 */
/**
 * # centered vertically
 */
/**
 * # centering
 */
/* text
------------------------------------ */
/**
 * # text link-color
 */
/**
 * # text(one-line) ellipsis
 */
/**
 * # text(multi-line) ellipsis
 */
/* color
------------------------------------ */
/* =======================================================================
  Layout
  ======================================================================= */
/**
 *
 * name: container
 * categories: layout
 * prefix:" l"
 * 
**/
/* =======================================================================
  Container Base
  ======================================================================= */
/**
 *
 * name: grid
 * categories: layout
 * prefix:" l"
 * 
**/
/* =======================================================================
  Grid
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
.l-grid_c2r3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(270px, 1fr) 5fr;
  grid-template-columns: minmax(270px, 1fr) 5fr;
  -ms-grid-rows: 60px 8fr;
  grid-template-rows: 60px 8fr; }
  @media screen and (max-width: 1038px) {
    .l-grid_c2r3 {
      grid-template-columns: 1fr; } }
  .l-grid_c2r3 > * {
    -ms-grid-column: 1;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > * {
        grid-column: 1; } }
  .l-grid_c2r3 > header {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
    grid-column: 1 / span 2; }
  .l-grid_c2r3 > main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > main {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }
  .l-grid_c2r3 > footer {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 3;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > footer {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE fallback */
  .l-grid_c3r4 > * {
    -ms-grid-column-span: 1;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .l-catch {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toAdvertiser {
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toMediapartner {
    -ms-grid-row-span: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-login {
    -ms-grid-column: 2;
    -ms-grid-row: 2; }
  .l-sns {
    -ms-grid-column: 2;
    -ms-grid-row: 3; } }

.l-grid_c3r4 {
  -ms-grid-columns: 1.5fr 1fr 1.5fr;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  -ms-grid-rows: 400px 300px 150px;
  grid-template-rows: minmax(260px, 25vh) minmax(320px, 30vh) minmax(150px, 10vh);
  grid-gap: 1rem;
  grid-template-areas: "toAdvertiser catch toMediapartner"
 "toAdvertiser login toMediapartner"
 "toAdvertiser sns toMediapartner"; }
  .l-grid_c3r4 > * {
    display: grid; }
  @media screen and (max-width: 768px) {
    .l-grid_c3r4 {
      display: block;
      grid-area: auto; } }

.l-catch,
.l-toAdvertiser,
.l-toMediapartner,
.l-sns,
.l-whatsNendcity,
.l-login {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.l-catch {
  grid-area: catch;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.l-toAdvertiser {
  grid-area: toAdvertiser; }

.l-toMediapartner {
  grid-area: toMediapartner; }

.l-sns {
  grid-area: sns;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.l-login {
  grid-area: login; }

.l-gridHorizontal {
  grid-auto-flow: column; }

@media (max-width: 768px) {
  .l-catch {
    height: 15vmin; }
  .l-toAdvertiser {
    height: 70vmin; }
  .l-toMediapartner {
    height: 55vmin; }
  .l-login {
    height: 25vmin; }
  .l-sns {
    height: 20vmin; } }

@media (max-width: 667px) {
  .l-login {
    height: 30vmin;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .l-sns {
    height: 30vmin;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
/* wrapper
------------------------------------ */
#site-wrapper {
  width: 100%;
  margin: 0px auto;
  background: #4fc3f7; }

/* header
------------------------------------ */
.l-header {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 60px;
  position: absolute;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1; }
  .l-header, .l-header > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

/* container
------------------------------------ */
.l-container {
  display: -ms-grid;
  display: grid;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }

/* article main */
.l-articleMain {
  width: 100%;
  position: relative;
  z-index: 0; }
  .l-articleMain_advertiser::after {
    content: "";
    position: absolute;
    top: -450px;
    opacity: .2;
    display: block;
    width: 100%;
    max-width: 1500px;
    height: 1058px;
    background: url(../img/bg_city_advertiser.png) no-repeat left top/1500px 1058px;
    z-index: -1; }
  .l-articleMain_mediapartner::after {
    content: "";
    position: absolute;
    top: -370px;
    opacity: .2;
    display: block;
    width: 100%;
    max-width: 1500px;
    height: 940px;
    background: url(../img/bg_city_mediapartner.png) no-repeat left top/1500px 940px;
    z-index: -1; }
  .l-articleMain_board::after {
    content: "";
    position: absolute;
    left: -140px;
    top: -300px;
    opacity: .2;
    display: block;
    width: 1500px;
    height: 659px;
    background: url(../img/bg_city_board.png) no-repeat left top/1500px 659px;
    z-index: -1; }

/* footer
------------------------------------ */
.l-footer .c-footContent_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around; }
  @media screen and (max-width: 768px) {
    .l-footer .c-footContent_nav {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: start;
      padding: 2rem; } }

/**
 *
 * name: grid
 * categories: layout
 * prefix:" l"
 * 
**/
/* =======================================================================
  Grid
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
.l-grid_c2r3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(270px, 1fr) 5fr;
  grid-template-columns: minmax(270px, 1fr) 5fr;
  -ms-grid-rows: 60px 8fr;
  grid-template-rows: 60px 8fr; }
  @media screen and (max-width: 1038px) {
    .l-grid_c2r3 {
      grid-template-columns: 1fr; } }
  .l-grid_c2r3 > * {
    -ms-grid-column: 1;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > * {
        grid-column: 1; } }
  .l-grid_c2r3 > header {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
    grid-column: 1 / span 2; }
  .l-grid_c2r3 > main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > main {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }
  .l-grid_c2r3 > footer {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 3;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > footer {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE fallback */
  .l-grid_c3r4 > * {
    -ms-grid-column-span: 1;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .l-catch {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toAdvertiser {
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toMediapartner {
    -ms-grid-row-span: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-login {
    -ms-grid-column: 2;
    -ms-grid-row: 2; }
  .l-sns {
    -ms-grid-column: 2;
    -ms-grid-row: 3; } }

.l-grid_c3r4 {
  -ms-grid-columns: 1.5fr 1fr 1.5fr;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  -ms-grid-rows: 400px 300px 150px;
  grid-template-rows: minmax(280px, 25vh) minmax(330px, 30vh) minmax(150px, 10vh);
  grid-gap: 1rem;
  grid-template-areas: "toAdvertiser catch toMediapartner"
 "toAdvertiser login toMediapartner"
 "toAdvertiser sns toMediapartner"; }
  .l-grid_c3r4 > * {
    display: grid; }
  @media screen and (max-width: 768px) {
    .l-grid_c3r4 {
      display: block;
      grid-area: auto; } }

.l-catch,
.l-toAdvertiser,
.l-toMediapartner,
.l-sns,
.l-whatsNendcity,
.l-login {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.l-catch {
  grid-area: catch;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.l-toAdvertiser {
  grid-area: toAdvertiser; }

.l-toMediapartner {
  grid-area: toMediapartner; }

.l-sns {
  grid-area: sns;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.l-login {
  grid-area: login; }

.l-gridHorizontal {
  grid-auto-flow: column; }

@media (max-width: 768px) {
  .l-catch {
    height: 15vmin; }
  .l-toAdvertiser {
    height: 70vmin; }
  .l-toMediapartner {
    height: 55vmin; }
  .l-login {
    height: 25vmin; }
  .l-sns {
    height: 20vmin; } }

@media (max-width: 667px) {
  .l-login {
    height: 30vmin;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .l-sns {
    height: 30vmin;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

/**
 *
 * name: second
 * categories: layout
 * prefix:" l"
 * 
**/
/* =======================================================================
  Second
  ======================================================================= */
/* 
------------------------------------ */
.l-cityAdvertiser, .l-cityMediapartner {
  position: relative;
  background: #4fc3f7;
  width: 100%;
  min-width: 1200px;
  min-height: 1000px; }

@media (max-width: 600px) {
  .l-container {
    overflow-x: scroll;
    max-width: 600px; } }

@media (max-width: 768px) {
  .l-container {
    overflow-x: scroll;
    max-width: 768px; } }

@media screen and (min-width: 1281px) {
  .l-cityAdvertiser, .l-cityMediapartner {
    min-width: 1200px;
    min-height: 1000px; } }

@media (max-width: 1280px) {
  .l-cityAdvertiser, .l-cityMediapartner {
    min-width: 1000px;
    min-height: 765px; } }

@media (max-width: 960px) {
  .l-cityAdvertiser, .l-cityMediapartner {
    min-width: 860px;
    min-height: 770px; } }

@media (max-width: 767px) {
  .l-cityAdvertiser, .l-cityMediapartner {
    min-width: 860px;
    min-height: 630px; } }

@media (max-width: 600px) {
  .l-cityAdvertiser, .l-cityMediapartner {
    min-width: 660px;
    min-height: 485px; } }

/* =======================================================================
  Structure
  ======================================================================= */
/**
 *
 * name: globalnavi
 * categories: structure
 * prefix:" c"
 * 
**/
/* =======================================================================
  Global Navi
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
.c-navPrimary {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
  -webkit-box-shadow: 0 2px 20px rgba(56, 108, 132, 0.15);
  box-shadow: 0 2px 20px rgba(56, 108, 132, 0.15);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0px auto;
  padding: 0 3em;
  width: 100%; }
  .c-navPrimary_logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    .c-navPrimary_logo img {
      width: 44px; }
  @media screen and (max-width: 1240px) {
    .c-navPrimary {
      padding: 0 2em; } }

@media (max-width: 768px) {
  .c-navPrimary_logo {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3; } }

.c-navPrimary_navMenu {
  display: none;
  cursor: pointer;
  padding: 1em .5em; }
  .c-navPrimary_navMenu span {
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    background: #18aaec;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }
    .c-navPrimary_navMenu span::before, .c-navPrimary_navMenu span::after {
      position: absolute;
      background: #18aaec;
      content: ' ';
      width: 30px;
      height: 3px;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out; }
    .c-navPrimary_navMenu span::before {
      top: -9px; }
    .c-navPrimary_navMenu span::after {
      top: 9px; }
  .c-navPrimary_navMenu.active span {
    background: transparent; }
    .c-navPrimary_navMenu.active span::before {
      -webkit-transform: rotate(45deg) translate(6px, 7px);
      -ms-transform: rotate(45deg) translate(6px, 7px);
      transform: rotate(45deg) translate(6px, 7px); }
    .c-navPrimary_navMenu.active span::after {
      -webkit-transform: rotate(-45deg) translate(6px, -7px);
      -ms-transform: rotate(-45deg) translate(6px, -7px);
      transform: rotate(-45deg) translate(6px, -7px); }
  @media screen and (max-width: 768px) {
    .c-navPrimary_navMenu {
      display: block; } }

.c-globalNav {
  -webkit-box-flex: 9;
  -ms-flex: 9;
  flex: 9; }
  .c-globalNav_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .c-globalNav_list > li:hover .c-megadropMenu {
      opacity: 1;
      visibility: visible;
      margin-top: 0;
      -webkit-box-shadow: 2px 8px 15px 0 rgba(51, 118, 148, 0.1);
      box-shadow: 2px 8px 15px 0 rgba(51, 118, 148, 0.1);
      visibility: visible; }
      @media screen and (max-width: 768px) {
        .c-globalNav_list > li:hover .c-megadropMenu {
          display: none;
          position: inherit;
          -webkit-box-shadow: inset 0 2px 1px #e4e7e8;
          box-shadow: inset 0 2px 1px #e4e7e8;
          background: #f2f4f5; } }
    .c-globalNav_list > li > a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 60px;
      font-size: 1.4rem;
      font-weight: bold;
      padding: 0 1.4em;
      -webkit-transition: all .12s ease-in-out;
      -o-transition: all .12s ease-in-out;
      transition: all .12s ease-in-out; }
      .c-globalNav_list > li > a:hover, .c-globalNav_list > li > a.m-signCurrent {
        background: #ebf8ff;
        color: #36c9ff; }
      .c-globalNav_list > li > a i {
        margin: 0 0 0 .3em; }
      .c-globalNav_list > li > a.m-itemLogin {
        display: none; }
        @media screen and (max-width: 768px) {
          .c-globalNav_list > li > a.m-itemLogin {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex; } }
      @media screen and (max-width: 1038px) {
        .c-globalNav_list > li > a {
          font-size: 1.3rem;
          padding: 0 1.2em;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; } }
      @media screen and (max-width: 960px) {
        .c-globalNav_list > li > a {
          font-size: 1.2rem;
          padding: 0 .8em;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; } }
      @media screen and (max-width: 768px) {
        .c-globalNav_list > li > a {
          font-size: 1.6rem;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; } }
  @media screen and (max-width: 1240px) {
    .c-globalNav {
      -webkit-box-flex: 11;
      -ms-flex: 11;
      flex: 11; } }
  @media screen and (max-width: 960px) {
    .c-globalNav {
      -webkit-box-flex: 12;
      -ms-flex: 12;
      flex: 12; } }

@media (min-width: 769px) {
  .c-globalNav_list {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; } }

@media (max-width: 768px) {
  .c-globalNav_list > li > a i {
    display: none; } }

@media screen and (max-width: 768px) {
  .c-globalNav_list {
    display: none;
    background: #fff;
    -webkit-box-shadow: 0 5px 10px rgba(70, 110, 128, 0.1);
    box-shadow: 0 5px 10px rgba(70, 110, 128, 0.1);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    left: 0;
    position: fixed;
    top: 60px;
    width: 100%; } }

.c-megadropMenu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  list-style: none;
  top: 60px;
  text-align: left;
  margin-top: 30px;
  overflow: hidden;
  background: #f8fcfd;
  -webkit-transition: all 0.12s ease-in-out;
  transition: all 0.12s ease-in-out;
  z-index: 1; }
  .c-megadropMenu_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 770px; }
    .c-megadropMenu_list > li {
      width: 100%; }
      .c-megadropMenu_list > li a.m-signCurrent {
        background: #00aeef;
        color: #fff; }

.c-megamenuLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 175px;
  padding: 1em; }
  .c-megamenuLink img {
    padding: .3em 0; }
    .c-megamenuLink img.m-iconFeatures_adv {
      max-width: 50px; }
    .c-megamenuLink img.m-iconVideo_adv {
      max-width: 55px; }
    .c-megamenuLink img.m-iconBoard_adv {
      max-width: 67px; }
    .c-megamenuLink img.m-iconReq {
      max-width: 60px; }
    .c-megamenuLink img.m-iconFeatures_media {
      max-width: 55px; }
    .c-megamenuLink img.m-iconVideo_media {
      max-width: 53px; }
    .c-megamenuLink img.m-iconBoard_media {
      max-width: 65px; }
    .c-megamenuLink img.m-iconRegist {
      max-width: 50px; }
  .c-megamenuLink:hover {
    background: #00aeef;
    color: #fff; }
  .c-megamenuLink .c-productItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%; }
    .c-megamenuLink .c-productItem h3 {
      font-size: 1.35rem;
      font-weight: bold;
      line-height: 1.4;
      max-width: 100%; }
    .c-megamenuLink .c-productItem span {
      font-size: 1.4rem;
      line-height: 1.4; }

@media (max-width: 870px) {
  .c-megamenuLink {
    height: 160px;
    padding: .5em; }
  .c-megamenuLink .c-productItem h3 {
    font-size: 1.2rem; }
  .c-megamenuLink .c-productItem span {
    font-size: 1.2rem; } }

.c-loginArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 4;
  -ms-flex: 4;
  flex: 4;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }
  @media screen and (max-width: 1240px) {
    .c-loginArea {
      -webkit-box-flex: 3;
      -ms-flex: 3;
      flex: 3; } }
  @media screen and (max-width: 960px) {
    .c-loginArea {
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2; } }
  @media screen and (max-width: 768px) {
    .c-loginArea {
      display: none; } }

/**
 *
 * name: article
 * categories: structure
 * prefix:" c"
 * 
**/
/* =======================================================================
  Article
  ======================================================================= */
.m-articleHead_ttl {
  font-size: 4.8vmin;
  color: #fff;
  line-height: 1.4; }

.c-articleParagraph {
  padding: 6em 2em 0; }

.m-paragraphHead_ttl {
  font-size: 3vmin;
  font-weight: bold;
  line-height: 1.3;
  text-align: center; }
  .m-paragraphHead_ttl::before {
    display: block;
    content: " ";
    border-bottom: 4px solid #f7db14;
    width: 8%;
    margin: 0 auto 30px; }

.m-headFeature {
  margin: 2em 1.3em .6em;
  font-size: 5.2rem;
  color: #fff;
  font-weight: 300; }

@media (max-width: 480px) {
  .m-articleHead_ttl {
    font-size: 4vmin; }
  .c-articleParagraph {
    padding: 4em 1em 0;
    font-size: 1.45rem;
    line-height: 1.95; }
  .m-paragraphHead_ttl {
    font-size: 1.8rem; } }

/* counter numbering
------------------------------------ */
.m-counterNum {
  counter-reset: head; }
  .m-counterNum h3 {
    counter-increment: head;
    font-size: 2.3rem;
    font-weight: bold; }
    .m-counterNum h3::before {
      content: counter(head) ".";
      padding: 0 .3em 0 0; }

/**
 *
 * name: box
 * categories: structure
 * prefix:" c"
 * 
**/
/* =======================================================================
  Box
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
/* =======================================================================
  Ellipsis
  ======================================================================= */
.c-heloArea {
  text-align: center; }
  .c-heloArea_ttl {
    color: #ebf2f5;
    font-size: 1.5rem;
    line-height: 1.7; }
  .c-heloArea img {
    max-width: 90px; }

/* top bg-image
------------------------------------ */
.l-toAdvertiser {
  display: block;
  position: relative;
  z-index: 0; }
  .l-toAdvertiser::after {
    content: " ";
    background: url(../img/bg_city_advertiser.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: .2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1; }

.l-toMediapartner {
  display: block;
  position: relative;
  z-index: 0; }
  .l-toMediapartner::after {
    content: " ";
    background: url(../img/bg_city_mediapartner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: .2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1; }

/* top cloud button
------------------------------------ */
#sprite_adv {
  cursor: pointer;
  background: url(../img/cloud_sprite_anim_adv.png) no-repeat left center;
  width: 350px;
  height: 300px;
  -webkit-filter: drop-shadow(0px 15px 15px #4fb3e0);
  font-size: 2rem;
  font-weight: bold;
  line-height: 2.5; }

#sprite_media {
  cursor: pointer;
  background: url(../img/cloud_sprite_anim_media.png) no-repeat left center;
  width: 350px;
  height: 300px;
  -webkit-filter: drop-shadow(0px 15px 15px #4fb3e0);
  font-size: 2rem;
  font-weight: bold;
  line-height: 2.5; }

#sprite_adv:hover,
#sprite_media:hover {
  -webkit-filter: drop-shadow(0px 25px 20px #3ea8d8); }

#static_adv,
#static_media {
  display: none;
}

@media (max-width: 960px) {
  #sprite_adv,
  #sprite_media {
    font-size: 1.6rem;
    line-height: 4; }
  #sprite_adv {
    width: 200px;
    height: 200px;
    background: url(../img/cloud_sprite_anim_adv.png) no-repeat left center/4000px 90%; }
  #sprite_media {
    width: 200px;
    height: 200px;
    background: url(../img/cloud_sprite_anim_media.png) no-repeat left center/4000px 90%; } }

@media (max-width: 768px) {
  #sprite_adv,
  #sprite_media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 2.2rem;
    line-height: 3.5; }
  #sprite_adv {
    width: 350px;
    height: 300px;
    background: url(../img/cloud_sprite_anim_adv.png) no-repeat left center/7000px 100%; }
  #sprite_media {
    width: 350px;
    height: 300px;
    background: url(../img/cloud_sprite_anim_media.png) no-repeat left center/7000px 100%; } }

@media (max-width: 600px) {
  #sprite_adv,
  #sprite_media {
    font-size: 1.6rem;
    line-height: 4; }
  #sprite_adv {
    width: 250px;
    height: 250px;
    background: url(../img/cloud_sprite_anim_adv.png) no-repeat left center/5000px 90%; }
  #sprite_media {
    width: 250px;
    height: 250px;
    background: url(../img/cloud_sprite_anim_media.png) no-repeat left center/5000px 90%; } }

@media (max-width: 480px) {
  #sprite_adv,
  #sprite_media {
    display: none; }
  #static_adv,
  #static_media {
    display: block;
    width: 200px; } }

/* news list
------------------------------------ */
.c-newsList_item {
  background: #fff;
  padding: 1em 1.8em;
  font-size: .7em;
  text-align: left;
  border-bottom: 1px solid #eff3f5; }
  .c-newsList_item h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; }

/* side menu
------------------------------------ */
.c-anchorMenu {
  padding: 6em 1em 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: calc(90vh - 30px);
  overflow: auto; }
  .c-anchorMenu_ttl {
    color: #fff; }
  .c-anchorMenu_list > li {
    line-height: 2.4; }
  .c-anchorMenu_link {
    border-bottom: 1px solid rgba(237, 242, 245, 0.15);
    color: rgba(255, 255, 255, 0.85);
    display: block;
    font-size: 1.4rem;
    line-height: 1.5;
    padding: 1.4em 1em; }
    .c-anchorMenu_link:hover {
      background: rgba(227, 234, 236, 0.2);
      color: #fff; }
    .c-anchorMenu_link.current {
      background: #f3fdff;
      color: #0083a2; }

.c-ctaReq {
  text-align: center;
  line-height: 5.3;
  bottom: 0;
  position: fixed; }
  .c-ctaReq a {
    width: 16.67%;
    min-width: 270px;
    color: #fff;
    bottom: 0;
    position: fixed; }

/* contents wrap
------------------------------------ */
.c-wrapMid {
  width: 85%;
  max-width: 1200px;
  margin: 0px auto; }

.c-wrapLrg {
  width: 100%;
  margin: 0px auto; }

.c-capClm2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .c-capClm2 > .m-clmHalf {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .c-capClm2 > .m-clmOnethird {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2; }
  .c-capClm2 > img {
    width: 100%;
    height: 100%; }

.c-blockFlex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .c-blockFlex.m-flexColumn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  .c-blockFlex.m-rowReverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
  .c-blockFlex.m-justifyColumn_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .c-blockFlex.m-justifyColumn_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .c-blockFlex.m-justifyColumn_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .c-blockFlex.m-justifyRow_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .c-blockFlex > img {
    width: 90%;
    height: 90%;
    max-width: 430px;
    max-height: 300px;
    margin: 0px auto; }
  .c-blockFlex_bodyTxt {
    width: 55%; }
    .c-blockFlex_bodyTxt + img {
      width: inherit;
      height: inherit;
      max-width: 300px;
      max-height: 240px;
      margin: 0px auto; }

@media (max-width: 1038px) {
  .c-blockFlex_bodyTxt {
    width: 45%; } }

@media (max-width: 768px) {
  .c-blockFlex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; }
    .c-blockFlex.m-rowReverse {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
    .c-blockFlex_bodyTxt {
      width: 100%; }
      .c-blockFlex_bodyTxt + img {
        max-width: 300px;
        max-height: 250px;
        margin: 0 0 2em; } }

@media (max-width: 600px) {
  .c-wrapMid {
    width: 90%; } }

@media (max-width: 480px) {
  .c-blockFlex_bodyTxt + img {
    width: 80%;
    height: 80%;
    max-width: inherit;
    max-height: inherit; }
    .c-blockFlex_bodyTxt + img.m-vImg {
      width: 60%; } }

/* article text
------------------------------------ */
.m-smlHead {
  background: #eeece1;
  border-radius: 2px;
  display: inline-block;
  font-weight: bold;
  padding: 10px; }

.m-txtEmphasis_s {
  font-size: 6.5vw;
  line-height: 1em;
  background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(0%, #ffde00)) repeat scroll 0 -0.06em;
  background: rgba(0, 0, 0, 0) -webkit-linear-gradient(transparent 75%, #ffde00 0%) repeat scroll 0 -0.06em;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 75%, #ffde00 0%) repeat scroll 0 -0.06em; }

.m-txtEmphasis {
  font-size: 8vw;
  line-height: 1em;
  background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(0%, #ffde00)) repeat scroll 0 -0.06em;
  background: rgba(0, 0, 0, 0) -webkit-linear-gradient(transparent 75%, #ffde00 0%) repeat scroll 0 -0.06em;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 75%, #ffde00 0%) repeat scroll 0 -0.06em; }

.m-bgInnerwhite {
  border-radius: 1px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(15%, white), to(white));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, white 15%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, white 15%, white 100%); }

.m-bgInnerthingray {
  border-radius: 1px;
  background: #f9f9f9; }

/* features - admenu_bgimage */
.m-adMenu {
  background: url(../img/advertiser/features/13.png);
  width: 450px;
  height: 450px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 1.9rem;
  font-weight: bold; }
  .m-adMenu_ban {
    top: 30px;
    left: 20px; }
  .m-adMenu_interstitial {
    top: 50px;
    right: 0px; }
  .m-adMenu_videoNative {
    top: 170px;
    right: -90px; }
  .m-adMenu_videoReward {
    top: 310px;
    right: -20px; }
  .m-adMenu_videoInterstitial {
    top: 390px;
    left: 40px; }
  .m-adMenu_native {
    top: 230px;
    left: -30px; }
  @media screen and (max-width: 600px) {
    .m-adMenu {
      width: 100%;
      font-size: 1.4rem; } }

/* cta box
------------------------------------ */
.c-urgeBox {
  position: relative;
  border: 1px solid #9cc0cc;
  border-top: none;
  text-align: center;
  margin: 0px auto;
  width: 100%; }
  .c-urgeBox > h3 {
    position: relative;
    margin-top: -1.8rem;
    font-size: 2.4rem; }
  .c-urgeBox p {
    width: 80%;
    margin: 1.5em auto;
    font-size: 1.4rem;
    line-height: 25px; }
  .c-urgeBox_border {
    position: absolute;
    height: 1px;
    width: 25%;
    background: #9cc0cc; }
    .c-urgeBox_border.m-borderLeft {
      left: 0; }
    .c-urgeBox_border.m-borderRight {
      right: 0; }

@media (max-width: 1280px) {
  .c-urgeBox_border {
    width: 15%; } }

@media (max-width: 1170px) {
  .c-urgeBox > h3 {
    font-size: 2.1rem;
    line-height: 2.6rem; }
  .c-urgeBox_border {
    width: 23%; } }

@media (max-width: 1024px) {
  .c-urgeBox {
    border-top: 1px solid #9cc0cc; }
    .c-urgeBox_border {
      display: none; }
    .c-urgeBox > h3 {
      margin: 1.5em 0 0; } }

@media (max-width: 600px) {
  .c-urgeBox > h3 {
    font-size: 1.9rem; } }

/**
 *
 * name: button
 * categories: structure
 * prefix:" m"
 * 
**/
/* =======================================================================
  Button
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
.m-btn, .m-btnSmall, .m-btnMiddle, .m-btnLarge {
  cursor: pointer;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: all .12s ease;
  transition: all .12s ease; }
  .m-btn:hover, .m-btnSmall:hover, .m-btnMiddle:hover, .m-btnLarge:hover {
    opacity: .75;
    color: #fff; }

.m-btnSmall {
  padding: .2em 2em; }

.m-btnMiddle {
  font-size: 16px;
  padding: .5em 6em; }

.m-btnLarge {
  font-size: 20px;
  padding: 1em 10em; }

.m-btnVerticallong {
  font-size: 20px;
  padding: 40px 18px; }

.m-btnPrimary {
  border: 1px solid #00aeef;
  color: #00aeef; }

.m-btnLogin {
  border: 2px solid #18aaec;
  border-radius: 50px;
  font-size: 1.6rem; }
  .m-btnLogin:hover {
    background: #18aaec;
    color: #fff; }

.m-btnReq {
  background: #79dfea;
  color: #fff; }

.m-btnRegist {
  background: #ead879;
  color: #fff; }

.m-btnBack {
  background: #404040;
  color: #fff; }

.m-btnUrge {
  line-height: 1.4;
  position: relative;
  padding: 1.1em 1.4em;
  -webkit-transition: all .2s ease;
  transition: all .2s ease; }
  .m-btnUrge::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 0px;
    background: rgba(255, 244, 157, 0.7);
    width: 66px;
    height: 66px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
  .m-btnUrge::after {
    content: "⇒";
    position: relative;
    font-size: 2rem;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease; }
  .m-btnUrge span {
    position: relative;
    font-weight: bold; }
  .m-btnUrge:hover {
    color: #18aaec; }
  .m-btnUrge:hover::before {
    width: 100%;
    background: #ffee7a; }
  .m-btnUrge:active {
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98); }

@media (max-width: 1038px) {
  .m-btnUrge::before {
    width: 50px;
    height: 90%;
    top: 6%; } }
@media (max-width: 768px) {
  .m-btnUrge:hover::before {
      width: 50px; } }
@media (max-width: 640px) {
  .m-btnMiddle {
    width: 80%;
    padding: .5em 0; } }

@media (max-width: 480px) {
  .m-btnUrge {
    width: 100%;
    padding: 1.1em 1.2em } }

/* top login
------------------------------------ */
.m-loginUrge_top {
  position: relative;
  color: #fff;
  font-size: 4vmin;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: is-neonBlink 1.5s ease-in-out infinite alternate;
  animation: is-neonBlink 1.5s ease-in-out infinite alternate;
  -webkit-transition: all ease 5s;
  transition: all ease 5s; }
  .m-loginUrge_top.fst {
    padding: .25em 1.5em;
    border-radius: 50px;
    font-size: 3.2vmin;
    background: #87daff;
    box-shadow: 0px 10px 40px rgba(62, 168, 216, 0.6);
    }
  .m-loginUrge_top.fst i {
    margin: 0 .2em;
    font-size: 2.6rem; }
  .m-loginUrge_top.fst::before {
      content: none; }
  .m-loginUrge_top::before {
    content: '▶ ';
    -webkit-animation: is-ozPulse 2s infinite ease;
    animation: is-ozPulse 2s infinite ease;
    font-size: 2.8vmin;
    vertical-align: middle; }

@-webkit-keyframes is-ozPulse {
  0% {
    opacity: 1; }
  48% {
    opacity: 1; }
  50% {
    opacity: 0; }
  52% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes is-ozPulse {
  0% {
    opacity: 1; }
  48% {
    opacity: 1; }
  50% {
    opacity: 0; }
  52% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes is-neonBlink {
  from {
    text-shadow: 0 0 30px rgba(97, 162, 202, 0.3), 0 0 70px rgba(97, 162, 202, 0.3), 0 0 80px rgba(41, 120, 158, 0.5), 0 0 100px rgba(41, 120, 158, 0.4), 0 0 150px rgba(41, 120, 158, 0.4); }
  to {
    text-shadow: 0 0 20px rgba(97, 162, 202, 0.4), 0 0 35px rgba(97, 162, 202, 0.4), 0 0 40px rgba(41, 120, 158, 0.4), 0 0 50px rgba(41, 120, 158, 0.3), 0 0 75px rgba(41, 120, 158, 0.3); } }

@keyframes is-neonBlink {
  from {
    text-shadow: 0 0 30px rgba(97, 162, 202, 0.3), 0 0 70px rgba(97, 162, 202, 0.3), 0 0 80px rgba(41, 120, 158, 0.5), 0 0 100px rgba(41, 120, 158, 0.4), 0 0 150px rgba(41, 120, 158, 0.4); }
  to {
    text-shadow: 0 0 20px rgba(97, 162, 202, 0.4), 0 0 35px rgba(97, 162, 202, 0.4), 0 0 40px rgba(41, 120, 158, 0.4), 0 0 50px rgba(41, 120, 158, 0.3), 0 0 75px rgba(41, 120, 158, 0.3); } }

@-webkit-keyframes is-neonBlink_on {
  from {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 20px rgba(255, 255, 255, 0.45), 0 0 25px rgba(255, 255, 255, 0.35); }
  to {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.35), 0 0 10px #f4f6f7, 0 0 15px #f4f6f7; } }

@keyframes is-neonBlink_on {
  from {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 20px rgba(255, 255, 255, 0.45), 0 0 25px rgba(255, 255, 255, 0.35); }
  to {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.35), 0 0 10px #f4f6f7, 0 0 15px #f4f6f7; } }

@media (max-width: 1080px) {
 .m-loginUrge_top.fst {
  font-size: 3vmin;
  padding: .2em 1em; } }

@media (max-width: 960px) {
  .m-loginUrge_top {
    font-size: 3.1rem; }
  .m-loginUrge_top.fst {
    font-size: 2.8vmin; }
  .m-loginUrge_top.fst i {
    margin: 0 .15em;
    font-size: 1.8rem; } }

@media (max-width: 768px) {
  .m-loginUrge_top.fst {
    font-size: 3.4vmin;
    padding: .4em 5em;
    color: #fff; }
  .m-loginUrge_top.fst i {
    margin: 0 .25em;
    font-size: 2rem;
    line-height: 1.8; } }

@media (min-width: 768px) {
  .m-loginUrge_top:hover,
  .m-loginUrge_top:active,
  .m-loginUrge_top:visited,
  .m-loginUrge_top.fst:hover,
  .m-loginUrge_top.fst:active,
  .m-loginUrge_top.fst:visited {
    color: #fff;
    -webkit-animation: is-neonBlink_on 1.5s ease-in-out infinite alternate;
    animation: is-neonBlink_on 1.5s ease-in-out infinite alternate; } }

@media (max-width: 480px) {
  .m-loginUrge_top.fst {
    padding: .25em 2em;
    font-size: 2rem; }
  .m-loginUrge_top.fst i {
    margin: 0 .15em;
    font-size: 1.8rem; } }

/* for top
------------------------------------ */
.m-acrossLink img {
  width: 55%;
  -webkit-filter: drop-shadow(0px 15px 15px #4fb3e0); }
  @media screen and (max-width: 1240px) {
    .m-acrossLink img {
      width: 70%; } }
  @media screen and (max-width: 768px) {
    .m-acrossLink img {
      width: 55%; } }

.m-acrossLink.m-forMediapartner_link {
  border: 3px solid #f5cf7f;
  color: #f5cf7f;
  background: #fff;
  -webkit-box-shadow: 6px 6px 0px #f5cf7f;
  box-shadow: 6px 6px 0px #f5cf7f;
  font-weight: bold; }
  .m-acrossLink.m-forMediapartner_link:hover {
    background: #ffc03a;
    color: #fff; }

.m-acrossLink.m-forTop_link {
  color: #fff;
  border: 2px solid #fff;
  -webkit-box-shadow: 8px 8px 0px #e3e6ea;
  box-shadow: 8px 8px 0px #e3e6ea;
  padding: 3em;
  border-radius: 2px;
  min-width: 190px; }
  .m-acrossLink.m-forTop_link:hover {
    background: #fff;
    color: #18aaec; }

.l-toTop {
  position: absolute;
  top: 45%; }
  .l-toTop_adv {
    right: 4%; }
    .l-toTop_adv > a {
      font-size: 3.2vmin;
      color: #fff; }
  .l-toTop_media {
    right: 4%;
    top: 50%; }
    .l-toTop_media > a {
      font-size: 3.2vmin;
      color: #fff; }

@media (max-width: 600px) {
  .l-toTop_adv {
    position: absolute;
    top: 85%;
    left: 5%; }
    .l-toTop_adv > a {
      font-size: 2.6rem; } }

@media (max-width: 600px) {
  .l-toTop_media {
    position: absolute;
    top: 85%;
    left: 5%; }
    .l-toTop_media > a {
      font-size: 2.6rem; } }

/* sns badge
------------------------------------ */
.m-snsBadge {
  border-radius: 3px;
  display: inline-block;
  width: 2.6em;
  height: 2.6em;
  margin: 0 6px;
  line-height: 2.6em;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
  opacity: .99;
  text-align: center;
  -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.59); }
  .m-snsBadge:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-shadow: 0 6px 18px 0 rgba(36, 86, 109, 0.4);
    box-shadow: 0 6px 18px 0 rgba(36, 86, 109, 0.4); }
  .m-snsBadge:hover > * {
    color: #fff;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
  .m-snsBadge:focus {
    opacity: .85; }
  .m-snsBadge.facebook {
    color: #3B5998; }
    .m-snsBadge.facebook:hover {
      background: #3B5998; }
    .m-snsBadge.facebook i {
      margin: 0 0 0 .1em; }
  .m-snsBadge.twitter {
    color: #3cf; }
    .m-snsBadge.twitter:hover {
      background: #3cf; }
    .m-snsBadge.twitter i {
      margin: 0 0 0 .1em; }
  .m-snsBadge.facebook .fa {
    color: #3cf; }
  .m-snsBadge.twitter .fa {
    color: #3cf; }
  .m-snsBadge .fa {
    font-size: 28px;
    vertical-align: middle;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); }

/* city balloon link
------------------------------------ */
.m-balloonLink {
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear; }
  .m-balloonLink :hover .u-menuBalloon {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2); }

/**
 *
 * name: footcontent
 * categories: structure
 * prefix:" c"
 * 
**/
/* =======================================================================
  Box
  ======================================================================= */
/**
 *
 * name: grid
 * categories: layout
 * prefix:" l"
 * 
**/
/* =======================================================================
  Grid
  ======================================================================= */
/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
.l-grid_c2r3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(270px, 1fr) 5fr;
  grid-template-columns: minmax(270px, 1fr) 5fr;
  -ms-grid-rows: 60px 8fr;
  grid-template-rows: 60px 8fr; }
  @media screen and (max-width: 1038px) {
    .l-grid_c2r3 {
      grid-template-columns: 1fr; } }
  .l-grid_c2r3 > * {
    -ms-grid-column: 1;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > * {
        grid-column: 1; } }
  .l-grid_c2r3 > header {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
    grid-column: 1 / span 2; }
  .l-grid_c2r3 > main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > main {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }
  .l-grid_c2r3 > footer {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 3;
    grid-column: 1 / span 2; }
    @media screen and (max-width: 1038px) {
      .l-grid_c2r3 > footer {
        grid-column: 1 / span 1;
        font-size: 1.4rem; } }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE fallback */
  .l-grid_c3r4 > * {
    -ms-grid-column-span: 1;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  .l-catch {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toAdvertiser {
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-toMediapartner {
    -ms-grid-row-span: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .l-login {
    -ms-grid-column: 2;
    -ms-grid-row: 2; }
  .l-sns {
    -ms-grid-column: 2;
    -ms-grid-row: 3; } }

.l-grid_c3r4 {
  -ms-grid-columns: 1.5fr 1fr 1.5fr;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  -ms-grid-rows: 400px 300px 150px;
  grid-template-rows: minmax(230px, 23vh) minmax(300px, 30vh) minmax(120px, 10vh);
  grid-gap: 1rem;
  grid-template-areas: "toAdvertiser catch toMediapartner"
 "toAdvertiser login toMediapartner"
 "toAdvertiser sns toMediapartner"; }
  .l-grid_c3r4 > * {
    display: grid; }
  @media screen and (max-width: 768px) {
    .l-grid_c3r4 {
      display: block;
      grid-area: auto; } }

.l-catch,
.l-toAdvertiser,
.l-toMediapartner,
.l-sns,
.l-whatsNendcity,
.l-login {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.l-catch {
  grid-area: catch;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.l-toAdvertiser {
  grid-area: toAdvertiser; }

.l-toMediapartner {
  grid-area: toMediapartner; }

.l-sns {
  grid-area: sns;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.l-login {
  grid-area: login; }

.l-gridHorizontal {
  grid-auto-flow: column; }

@media (max-width: 768px) {
  .l-catch {
    height: 30vmin; }
  .l-toAdvertiser {
    height: 70vmin; }
  .l-toMediapartner {
    height: 55vmin; }
  .l-login {
    height: 25vmin; }
  .l-sns {
    height: 20vmin; } }

@media (max-width: 667px) {
  .l-login {
    height: 20vmin;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .l-sns {
    height: 30vmin;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

@media (max-width: 600px) {
  .l-catch {
    margin: 2em 0 0; } }

@media (max-width: 480px) {
  .l-catch {
    height: 50vmin; }
  .l-login {
    align-items: center;
    height: 30vmin; } }

/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
/* footContent
------------------------------------ */
.c-footContent {
  color: #c2c7cc; }
  .c-footContent_nav {
    background: #3c3e40; }
    @media screen and (max-width: 768px) {
      .c-footContent_nav section {
        width: 50%;
        margin: 0 0 2em; } }
  .c-footContent_meta {
    background: #323335;
    padding: 1.1em 0; }
    .c-footContent_meta > ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .c-footContent_meta > ul > li:not(:last-child):after {
        content: "|";
        color: #ccc;
        margin: 0 .3em; }
  .c-footContent a {
    color: #7fcced;
    font-size: 1.2rem; }
  .c-footContent .copyright {
    color: #92959a;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: .13em; }

/* top anchor
------------------------------------ */
.m-pagetop {
  width: 50px;
  bottom: 20px;
  position: fixed;
  right: 50px; }
  .m-pagetop > a {
    display: block;
    color: #f3f3f3;
    text-align: center;
    font-size: 10px;
    text-decoration: none;
    background: #60889a;
    padding: 8px;
    border-radius: 3px;
    opacity: .6; }
    .m-pagetop > a::before {
      display: block;
      content: "▲"; }
    .m-pagetop > a:hover {
      opacity: 1;
      -webkit-transition: all ease .1s;
      -o-transition: all ease .1s;
      transition: all ease .1s; }

/* sitemap link
------------------------------------ */
.c-sitemapScene {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 60vmin;
  margin: 6em auto 0;
  z-index: 0; }
  .c-sitemapScene_link {
    -ms-flex-item-align: start;
    align-self: flex-start; }
    .c-sitemapScene_linkItem a {
      color: #fff;
      text-shadow: 0 4px 25px rgb(9, 128, 181); }
      .c-sitemapScene_linkItem a::before {
        content: '▶ ';
        font-size: 1.2rem; }
      .c-sitemapScene_linkItem a:hover {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.3); }

@media (max-width: 768px) {
  .c-sitemapScene {
    margin: 0px auto; }
    .c-sitemapScene_link {
      height: 30vmin;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-pack: distribute;
      justify-content: space-around; }
      .c-sitemapScene_linkItem {
        -ms-flex-item-align: center !important;
        align-self: center !important;
        width: 35%; }
        .c-sitemapScene_linkItem a {
          font-size: 2.4vmin;
          line-height: 3.5; } }

@media (max-width: 480px) {
  .c-sitemapScene_linkItem {
    width: 40%; }
    .c-sitemapScene_linkItem a {
      font-size: 1.2rem;
      line-height: 1; } }

@media (max-width: 340px) {
  .c-sitemapScene_linkItem {
    width: 50%; }
  .c-sitemapScene_linkItem a {
    font-size: 1.1rem; } }

.c-sitemapBg {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 100%;
  z-index: -1; }

#c-sitemapScene {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  overflow: hidden; }

.c-sitemapScene_layer {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }
  .c-sitemapScene_layerImg {
    z-index: -1; }

.layerImg-0 {
  position: absolute;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }
  .layerImg-0.layerImg-adv {
    bottom: -60px;
    left: 10%;
    -webkit-transform: scale(0.7) translateX(0px) translateY(0px) !important;
    -ms-transform: scale(0.7) translateX(0px) translateY(0px) !important;
    transform: scale(0.7) translateX(0px) translateY(0px) !important; }
  .layerImg-0.layerImg-media {
    bottom: -50px;
    right: 3%;
    -webkit-transform: scale(.8) translateX(0px) translateY(0px) !important;
    -ms-transform: scale(.8) translateX(0px) translateY(0px) !important;
    transform: scale(.8) translateX(0px) translateY(0px) !important; }

.layerImg-1 {
  position: absolute;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }
  .layerImg-1.layerImg-adv {
    bottom: -18px;
    left: 0;
    -webkit-transform: scale(0.95) translateX(0px) translateY(0px) !important;
    -ms-transform: scale(0.95) translateX(0px) translateY(0px) !important;
    transform: scale(0.95) translateX(0px) translateY(0px) !important; }
  .layerImg-1.layerImg-media {
    bottom: -25px;
    left: -3%;
    -webkit-transform: scale(0.9) translateX(0px) translateY(0px) !important;
    -ms-transform: scale(0.9) translateX(0px) translateY(0px) !important;
    transform: scale(0.9) translateX(0px) translateY(0px) !important; }

@media (max-width: 768px) {
  .layerImg-0.layerImg-adv {
    bottom: -40px; }
  .layerImg-1.layerImg-adv {
    bottom: -13px; }
  .layerImg-0.layerImg-media {
    bottom: -40px; }
  .layerImg-1.layerImg-media {
    bottom: -18px; } }

@media (max-width: 480px) {
  .layerImg-0.layerImg-adv {
    bottom: -25px; }
  .layerImg-1.layerImg-adv {
    bottom: -9px; }
  .layerImg-0.layerImg-media {
    bottom: -30px; }
  .layerImg-1.layerImg-media {
    bottom: -10px; } }

.layerImg-2 {
  width: 25%;
  right: -50px;
  bottom: 50px;
  position: absolute;
  -webkit-animation: slideEffect 30s infinite;
  animation: slideEffect 30s infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

.layerImg-3 {
  width: 45%;
  right: -200px;
  bottom: 180px;
  position: absolute;
  -webkit-animation: slideEffect 15s infinite;
  animation: slideEffect 15s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  animation-direction: alternate; }

.pan-out {
  -webkit-transform: scale(0.3) translateY(40px) translateX(-10px);
  -ms-transform: scale(0.3) translateY(40px) translateX(-10px);
  transform: scale(0.3) translateY(40px) translateX(-10px); }

@-webkit-keyframes slideEffect {
  0% {
    -webkit-transform: translateY(10px) translateX(100%);
    transform: translateY(10px) translateX(100%); }
  100% {
    -webkit-transform: translateY(-10px) translateX(-300%);
    transform: translateY(-10px) translateX(-300%); } }

@keyframes slideEffect {
  0% {
    -webkit-transform: translateY(10px) translateX(100%);
    transform: translateY(10px) translateX(100%); }
  100% {
    -webkit-transform: translateY(-10px) translateX(-300%);
    transform: translateY(-10px) translateX(-300%); } }

/* =======================================================================
  Utility
  ======================================================================= */
/* =======================================================================
  Utility_inc
  ======================================================================= */
/**
 *
 * name: align
 * categories: utility
 * prefix:" u"
 * 
**/
/* =======================================================================
  Align
  ======================================================================= */
.u-txtAlign_c {
  text-align: center !important; }

.u-txtAlign_l {
  text-align: left !important; }

.u-txtAlign_r {
  text-align: right !important; }

/**
 *
 * name: animation
 * categories: utility
 * prefix:" u"
 * 
**/
/* =======================================================================
  Animation
  ======================================================================= */
/* primary transition timing
------------------------------------ */
/* animation effects
------------------------------------ */
.is-hidden {
  visibility: hidden; }

@keyframes is-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes is-slideinUp_s {
  from {
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinUp_l {
  from {
    -webkit-transform: translateY(80px);
    transform: translateY(80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinDown_s {
  from {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes is-slideinDown_l {
  from {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px); }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

/* fadeinUp
------------------------------------ */
.is-fadeinUp_s {
  -webkit-animation: is-slideinUp_s 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both;
  animation: is-slideinUp_s 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 0.8s cubic-bezier(0.03, 0.16, 0.39, 0.99) both; }

.is-fadeinUp_l {
  -webkit-animation: is-slideinUp_l 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both;
  animation: is-slideinUp_l 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both, is-fadeIn 1.2s cubic-bezier(0.03, 0.16, 0.39, 0.99) both; }

/* top cloud sprite_anim
------------------------------------ */
@media (min-width: 961px) {
  #sprite_adv,
  #sprite_media {
    background-position: 0 0;
    -webkit-animation: sprite-anim 2s steps(20) infinite;
    animation: sprite-anim 2s steps(20) infinite;
  }
}

#sprite_adv:hover,
#sprite_media:hover {
  background-position: -7000px 0;
  transition: background 2s steps(20); }

@keyframes sprite-anim {
  0% {
    background-position: 0px 0; }
  100% {
    background-position: -7000px 0; } }

@media (max-width: 960px) {
  #sprite_adv:hover,
  #sprite_media:hover {
    -webkit-animation: none;
    animation: none;
    background-position: 0 10px;
    -webkit-transition: none;
    transition: none; } }

@media (max-width: 768px) {
  #sprite_adv:hover,
  #sprite_media:hover {
    background-position: 0 0; } }

@media (max-width: 600px) {
  #sprite_adv:hover,
  #sprite_media:hover {
    background-position: 0 13px; } }

@media (max-width: 480px) {
  #sprite_adv:hover,
  #sprite_media:hover {
    background-position: 0 10px; } }


/*************** City Animation Set ***************/
.u-menuBalloon {
  -webkit-transition: 0.2s easeIn;
  -o-transition: 0.2s easeIn;
  transition: 0.2s easeIn; }

.u-menuBalloon:hover {
  -webkit-transform: translate(0, -2%);
  -ms-transform: translate(0, -2%);
  transform: translate(0, -2%); }

@media (max-width: 960px) {
  .u-menuBalloon:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }

/* advertiser city
------------------------------------ */
#u-advertiserCar-1, #u-advertiserCar-2, #u-advertiserCar-3, #u-advertiserCar-4, #u-advertiserCar-5,
#u-advertiserTruck-1, #u-advertiserTruck-2, #u-advertiserTruck-3, #u-advertiserTruck-4, #u-advertiserTruck-5,
#u-advertiserManwalk-1, #u-advertiserManwalk-2, #u-advertiserManwalk-3, #u-advertiserManwalk-4, #u-advertiserManwalk-stop {
  display: none; }

/* media city
------------------------------------ */
#u-mediaCar-1, #u-mediaCar-2, #u-mediaCar-3, #u-mediaCar-4, #u-mediaCar-5,
#u-mediaTruck-1, #u-mediaTruck-2, #u-mediaTruck-3, #u-mediaTruck-4, #u-mediaTruck-5,
#u-mediaWalkman-1-1, #u-mediaWalkman-1-2, #u-mediaWalkman-1-3, #u-mediaWalkman-1-4, #u-mediaWalkman-1-5, #u-mediaWalkman-1-6, #u-mediaWalkman-1-7, #u-mediaWalkman-1-8, #u-mediaWalkman-1-9, #u-mediaWalkman-1-10,
#u-mediaWalkman-2-1, #u-mediaWalkman-2-2, #u-mediaWalkman-2-3, #u-mediaWalkman-2-4, #u-mediaWalkman-2-5, #u-mediaWalkman-2-6, #u-mediaWalkman-2-7 {
  display: none; }

/* =======================================================================
  Color
  ======================================================================= */
/**
 * # color define
 */
/**
 * # usage
 */
.ex {
  color: #e74c3c; }

/**
 * # mapping manage
 */
/* color manage for sns
------------------------------------ */
.ex01 {
  background: #e74c3c; }

.ex02 {
  background: #f09188; }

.ex03 {
  background: #b82617; }

.ex04 {
  background: rgba(231, 76, 60, 0.5);
  color: #f29f97; }

.button {
  background: #333; }
  .button:hover {
    background: #888; }
  .button:active {
    background: #2ecc71; }

.sns-twitter {
  background: #55acee; }

.sns-facebook {
  background: #3b5998; }

.sns-gplus {
  background: #dc4e41; }

/* text-link color
------------------------------------ */
/* =======================================================================
  Ellipsis
  ======================================================================= */
/**
 *
 * name: margin
 * categories: utility
 * prefix:" u"
 * 
**/
/* =======================================================================
  Margin
  ======================================================================= */
.u-mgnAuto {
  margin: 0px auto; }

.u-mgnAll_sml {
  margin: .8em; }

.u-mgnAll_mid {
  margin: 1.2em; }

.u-mgnAll_lrg {
  margin: 3em; }

.u-mgnTb_sml {
  margin: 1em 0; }

.u-mgnTb_mid {
  margin: 1.4em 0; }

.u-mgnTb_lrg {
  margin: 4em 0; }

.u-mgnT_sml {
  margin-top: 1em; }

.u-mgnT_mid {
  margin-top: 1.4em; }

.u-mgnT_lrg {
  margin-top: 3em; }

.u-mgnB_xsml {
  margin-bottom: .3em; }

.u-mgnB_sml {
  margin-bottom: 1em; }

.u-mgnB_mid {
  margin-bottom: 1.6em; }

.u-mgnB_lrg {
  margin-bottom: 4.5em; }

/* =======================================================================
  Padding
  ======================================================================= */
.u-pdgAll_mid {
  padding: 1em; }

.u-pdgAll_lrg {
  padding: 3em; }

.u-pdgB_mid {
  padding-bottom: 2.5em; }

.u-pdgB_lrg {
  padding-bottom: 4em; }

/* =======================================================================
  Media Queries
  ======================================================================= */
@media screen and (max-width: 320px) {
  .ex {
    width: 750px; } }

@media screen and (max-width: 480px) {
  .ex {
    width: 970px; } }

/* common layout
------------------------------------ */
/* first-class layout
------------------------------------ */
/* third-class layout
------------------------------------ */
/**
 *
 * name: position
 * categories: utility
 * prefix:" u"
 * 
**/
/* =======================================================================
  Position
  ======================================================================= */
.u-positionPrimary {
  position: relative;
  width: 100%; }
  .u-positionPrimary > * {
    position: absolute; }

/**
 * #top and bottom center position
 */

/* =======================================================================
  Guideline
  ======================================================================= */

.c-guidelineBox {
  display: flex;
  width: 50%;
  min-height: 190px;
  word-break: break-word;
  background: #f2f5f7;
  flex-direction: column;
  justify-content: space-evenly;
}

.m-guideline_explain {
  font-size: 1.4rem;
  line-height: 1.6;
}

.m-guideline_link {
  font-size: 1.6rem;
  line-height: 1.4;
}

.u-flexGap_horizontal {
  gap: 0 1em;
}

@media (max-width: 768px) {
  .u-flexGap_horizontal {
    gap: 1em 0;
  }
  .c-guidelineBox {
    width: 100%;
  }
}