@charset "UTF-8";
/*
Theme Name: 早稲田LE
Author: overa
Description: 早稲田LEテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*--------------------------------------------------------------
# identity
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# base
--------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

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

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */ }

body {
  background-color: #fff; }

/*
typography
*/
body,
button,
input,
select,
optgroup,
textarea {
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, sans-serif;
  color: #606060;
  font-size: 14px;
  line-height: 24.5px; }
  @media all and (-ms-high-contrast: none) {
    body,
    button,
    input,
    select,
    optgroup,
    textarea {
      font-family: "メイリオ", Meiryo, sans-serif; } }

/*
link
*/
a {
  text-decoration: none;
  color: #606060; }

/*--------------------------------------------------------------
# elements
--------------------------------------------------------------*/
/*
elements

Styleguide 1
*/
/*
バッチ

Markup:
<span class="badge">バッチ1</span>
<span class="badge">バッチ2</span>
<span class="badge">バッチ3</span>
<span class="badge">バッチ4</span>

Styleguide 1.1
*/
.badge {
  color: #fff;
  font-size: 14px;
  display: inline-block;
  margin: 0 4px;
  line-height: 1;
  padding-top: 6px;
  background: linear-gradient(to top, #000, #000 30px, transparent 30px); }
  @media only screen and (max-width: 768px) {
    .badge {
      font-size: 13px; } }

/*
ボックス

Markup:
<div class='box'>
  ボックス
</div>

Styleguide 1.2
*/
.box {
  background-color: #ededed;
  padding: 40px; }

/*
ボタン

Markup:
<div class="button {$modifiers}">
  <div class="button__icon">
    <svg class="icon">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-circle-down"></use>
    </svg>
  </div>
  <div class="button__text">
    お問い合わせ
  </div>
</div>

.button--sm - sm
.button--radius - radius
.button--gray - gray
.button--white - white

Styleguide 1.3
*/
.button {
  padding: 4px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer; }

.button__text {
  padding: 0 14px; }

.button__icon {
  line-height: 0;
  padding-left: 14px; }

.button--sm {
  font-size: 10px; }
  .button--sm .button__text {
    padding: 0 7px; }
  .button--sm .button__icon {
    line-height: 0;
    padding-left: 7px; }

.button--radius {
  border-radius: 14px; }

.button--gray {
  background-color: #ededed; }

.button--white {
  background-color: #fff; }

/*
アイコンボタン

Markup:
<div class="buttonIcon buttonIcon--rect">
  <div class="buttonIcon__icon">
    <svg class="icon icon--color-white">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#close"></use>
    </svg>
  </div>
  <div class="buttonIcon__text">
    close
  </div>
</div>
<br>
<div class="buttonIcon buttonIcon--rect">
  <div class="buttonIcon__icon">
    <svg class="icon icon--color-white">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#hamburger"></use>
    </svg>
  </div>
  <div class="buttonIcon__text">
    open
  </div>
</div>
<br>
<div class="buttonIcon buttonIcon--rect">
  <div class="buttonIcon__icon">
    <svg class="icon icon--color-white">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#chevron-up"></use>
    </svg>
  </div>
  <div class="buttonIcon__text">
    TOPへ
  </div>
</div>
<br>
<div class="buttonIcon buttonIcon--assist">
  <div class="buttonIcon__icon">
    <svg class="icon icon--color-white" style="width: 14px; height: 14px;">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#plus"></use>
    </svg>
  </div>
</div>

Styleguide 1.4
*/
.buttonIcon {
  cursor: pointer;
  display: inline-block; }

.buttonIcon__icon {
  padding: 9px 0 10px;
  line-height: 0;
  text-align: center; }

.buttonIcon__text {
  text-align: center;
  color: #fff;
  font-family: Futura;
  line-height: 0;
  font-size: 11px; }

.buttonIcon--rect {
  background: #000;
  width: 50px;
  height: 50px; }

.buttonIcon--assist {
  background: #aeaeae;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  padding-top: 4px; }

/*
コピーライト

Markup:
<small class='copyright'>Copyright &copy; 2018 waseda All Rights Reserved.</small>

Styleguide 1.5
*/
.copyright {
  font-size: 10px;
  color: #fff; }
  @media only screen and (max-width: 768px) {
    .copyright {
      text-align: center; } }

/*
　結果がない

Markup:
<div class="empty" style="line-height: 200px;">現在このタグに対応する講座はありません。</div>

Styleguide 1.6
*/
.empty {
  text-align: center;
  vertical-align: middle;
  opacity: 0.5;
  background: #fff; }

/*
フィールド

Markup:
<div style="background: #e9e9e9; padding: 14px;">
	<input type="text" placeholder="姓"/>
	<br>
	<br>
	<input type="text" placeholder="名"/>
	<br>
	<br>
	<input type="email" placeholder="waseda@waseda.jp" />
	<br>
	<br>
	<textarea placeholder="ここにお問い合わせ内を入力ください" rows="10"></textarea>
	<br>
	<br>
	<input type="submit" value="お問い合わせ内容を確認" />
</div>

Styleguide 1.7
*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  border: none;
  padding: 10px 12px; }
  input[type="text"]::-webkit-input-placeholder,
  input[type="email"]::-webkit-input-placeholder,
  input[type="url"]::-webkit-input-placeholder,
  input[type="password"]::-webkit-input-placeholder,
  input[type="search"]::-webkit-input-placeholder,
  input[type="number"]::-webkit-input-placeholder,
  input[type="tel"]::-webkit-input-placeholder,
  input[type="range"]::-webkit-input-placeholder,
  input[type="date"]::-webkit-input-placeholder,
  input[type="month"]::-webkit-input-placeholder,
  input[type="week"]::-webkit-input-placeholder,
  input[type="time"]::-webkit-input-placeholder,
  input[type="datetime"]::-webkit-input-placeholder,
  input[type="datetime-local"]::-webkit-input-placeholder,
  input[type="color"]::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #aeaeae; }
  input[type="text"]:-ms-input-placeholder,
  input[type="email"]:-ms-input-placeholder,
  input[type="url"]:-ms-input-placeholder,
  input[type="password"]:-ms-input-placeholder,
  input[type="search"]:-ms-input-placeholder,
  input[type="number"]:-ms-input-placeholder,
  input[type="tel"]:-ms-input-placeholder,
  input[type="range"]:-ms-input-placeholder,
  input[type="date"]:-ms-input-placeholder,
  input[type="month"]:-ms-input-placeholder,
  input[type="week"]:-ms-input-placeholder,
  input[type="time"]:-ms-input-placeholder,
  input[type="datetime"]:-ms-input-placeholder,
  input[type="datetime-local"]:-ms-input-placeholder,
  input[type="color"]:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #aeaeae; }
  input[type="text"]::-ms-input-placeholder,
  input[type="email"]::-ms-input-placeholder,
  input[type="url"]::-ms-input-placeholder,
  input[type="password"]::-ms-input-placeholder,
  input[type="search"]::-ms-input-placeholder,
  input[type="number"]::-ms-input-placeholder,
  input[type="tel"]::-ms-input-placeholder,
  input[type="range"]::-ms-input-placeholder,
  input[type="date"]::-ms-input-placeholder,
  input[type="month"]::-ms-input-placeholder,
  input[type="week"]::-ms-input-placeholder,
  input[type="time"]::-ms-input-placeholder,
  input[type="datetime"]::-ms-input-placeholder,
  input[type="datetime-local"]::-ms-input-placeholder,
  input[type="color"]::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    color: #aeaeae; }
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="url"]::placeholder,
  input[type="password"]::placeholder,
  input[type="search"]::placeholder,
  input[type="number"]::placeholder,
  input[type="tel"]::placeholder,
  input[type="range"]::placeholder,
  input[type="date"]::placeholder,
  input[type="month"]::placeholder,
  input[type="week"]::placeholder,
  input[type="time"]::placeholder,
  input[type="datetime"]::placeholder,
  input[type="datetime-local"]::placeholder,
  input[type="color"]::placeholder,
  textarea::placeholder {
    color: #aeaeae; }

select {
  border: none; }

textarea {
  width: 100%;
  resize: none; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: #000;
  color: #fff;
  font-size: 16px;
  padding: 16px 40px;
  cursor: pointer; }
  button:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover {
    opacity: 0.8; }

input[type='submit'][disabled] {
  background: #DCDCDC; }
  input[type='submit'][disabled]:hover {
    cursor: not-allowed;
    opacity: 1; }

/*
見出し

おそらくIEでfuturaが使えない

Markup:
<div class='heading {$modifiers}'>
  <div class='heading__main'>学びを探す</div>
  <div class='heading__sub'>FIND YOUR LEARNING</div>
</div>

.heading--about - about
.heading--concierge - concierge
.heading--program - program
.heading--contents - contents
.heading--link - link

Styleguide 1.8
*/
.heading {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 20px 0; }
  @media only screen and (max-width: 768px) {
    .heading {
      display: inline-block;
      padding: 14px 0 0 12px; } }

.heading__main {
  font-size: 50px;
  line-height: 1.5; }
  @media only screen and (max-width: 768px) {
    .heading__main {
      font-size: 30px; } }

.heading__sub {
  font-size: 24px;
  padding-left: 24px;
  font-family: Futura; }
  @media only screen and (max-width: 768px) {
    .heading__sub {
      display: none; } }

.heading--about .heading__main {
  color: #e44d27; }

.heading--concierge .heading__main {
  color: #009ab6; }

.heading--program .heading__main {
  color: #009f3b; }

.heading--contents .heading__main {
  color: #f1a600; }

.heading--link .heading__main {
  color: #000; }

/*
アイテム見出し

Markup:
<div class="headingItem {$modifiers}">
  アイテム見出し
</div>

.headingItem--about - about
.headingItem--concierge - concierge
.headingItem--program - program
.headingItem--contents - contents
.headingItem--other - other

Styleguide 1.9
*/
.headingItem {
  padding: 24px 0px;
  font-size: 32px;
  line-height: 40px; }
  @media only screen and (max-width: 768px) {
    .headingItem {
      padding: 18px 20px;
      font-size: 22px;
      line-height: 30px; } }

.headingItem--about {
  color: #e44d27; }

.headingItem--concierge {
  color: #009ab6; }

.headingItem--program {
  color: #009f3b; }

.headingItem--contents {
  color: #f1a600; }

.headingItem--other {
  color: #000; }

/*
リスト見出し

Markup:
<div class="headingList {$modifiers}">
  リスト見出し
</div>

.headingList--about - about
.headingList--concierge - concierge
.headingList--program - program
.headingList--contents - contents
.headingList--other - other

Styleguide 1.10
*/
.headingList {
  padding: 0 16px;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  border-radius: 12px; }

.headingList--about {
  background-color: #e44d27; }

.headingList--concierge {
  background-color: #009ab6; }

.headingList--program {
  background-color: #009f3b; }

.headingList--contents {
  background-color: #f1a600; }

.headingList--other {
  background-color: #000; }

/*
セクション見出し

Markup:
<div class="headingSection {$modifiers}">
  セクション見出し
</div>
<div class="headingSection">
  <span class="headingSection__icon">
    <svg class="icon icon--size-section">
    	<use xlink:href="images/sprite-bg-icons.svg#arrow-circle-down"></use>
    </svg>
  </span>
  セクション見出し
</div>

.headingSection--about - about
.headingSection--concierge - concierge
.headingSection--program - program
.headingSection--contents - contents
.headingSection--other - other

Styleguide 1.11
*/
.headingSection {
  padding: 24px 30px;
  font-size: 40px;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top; }
  @media only screen and (max-width: 768px) {
    .headingSection {
      font-size: 26px;
      line-height: 36px;
      padding: 18px 20px; } }

.headingSection__icon {
  padding-right: 14px; }
  @media only screen and (max-width: 768px) {
    .headingSection__icon {
      padding-right: 7px; } }

.headingSection--about {
  color: #e44d27; }

.headingSection--concierge {
  color: #009ab6; }

.headingSection--program {
  color: #009f3b; }

.headingSection--contents {
  color: #f1a600; }

.headingSection--other {
  color: #000; }

/*
サイドバー見出し

Markup:
<div class='headingSide {$modifiers}'>
  <div class="headingSide__eng">REPORT</div>
  <div class="headingSide__ja">最新リポート</div>
</div>

.headingSide--contents - contents
.headingSide--other - other

Styleguide 1.12
*/
.headingSide {
  font-size: 16px;
  border-top: solid 1px #c3c3c3;
  border-bottom: solid 1px #c3c3c3;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 114px 1fr;
      grid-template-columns: 114px 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto; }

.headingSide__eng {
  font-family: Futura;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }

.headingSide__ja {
  color: #f1a600;
  padding: 10px 14px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }

.headingSide--contents .headingSide__eng {
  background-color: #f1a600; }

.headingSide--other .headingSide__eng {
  background-color: #000; }

/*
ページ見出し

おそらくIEでfuturaが使えない

Markup:
<div class='headline {$modifiers}'>
  <div class='headline__main'>Learning Hogehoge</div>
  <div class='headline__sub'>
    <div class='headline__primary'>
      学びのHogehoge
    </div>
    <div class='headline__secondary'>
      ビジネスに活用できるFugafuga
    </div>
  </div>
</div>

.headline--about - about
.headline--concierge - concierge
.headline--program - program
.headline--contents - contents
.headline--other - other

Styleguide 1.13
*/
.headline__main {
  color: #fff;
  font-family: Futura;
  font-size: 60px;
  line-height: 105px; }
  @media only screen and (max-width: 768px) {
    .headline__main {
      font-size: 28px;
      line-height: 49px; } }

.headline__sub {
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }

.headline__primary {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 24px;
  padding-top: 12px; }
  @media only screen and (max-width: 768px) {
    .headline__primary {
      font-size: 12px;
      padding-top: 6px; } }

.headline__secondary {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 18px;
  padding-left: 18px; }
  @media only screen and (max-width: 768px) {
    .headline__secondary {
      font-size: 11px; } }

.headline--about .headline__primary {
  background-color: #e44d27; }

.headline--concierge .headline__primary {
  background-color: #009ab6; }

.headline--program .headline__primary {
  background-color: #009f3b; }

.headline--contents .headline__primary {
  background-color: #f1a600; }

.headline--other .headline__primary {
  background-color: #000; }

/*
アイコン

Markup:
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#arrow-circle-down"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#chevron-square-up"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#close-circle"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#external-link-square"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#facebook-circle"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-bg-icons.svg#twitter-circle"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#arrow-right"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#chevron-left"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#chevron-right"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#arrow-circle-left"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#arrow-circle-right"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#external-link"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#chevron-down"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#chevron-up"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#plus"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#close"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-icons.svg#hamburger"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#bar-graph"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#brain"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#calendar"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#canvas"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#certificate"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#community"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#degree"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#flash"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#globe"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#lecture"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#morning"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#paint"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#pie-chart"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#puzzle"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#stairs"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#stand-light"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#student"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#telescope"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#think"></use>
</svg>
<svg class="icon {$modifiers}">
	<use xlink:href="images/sprite-pictogram-icons.svg#time"></use>
</svg>

.icon--color-about - color
.icon--color-concierge - color
.icon--color-program - color
.icon--color-contents - color
.icon--color-other - color
.icon--color-white - color
.icon--color-gray - color
.icon--color-facebook - color
.icon--color-twitter - color
.icon--color-picto - color
.icon--size-tiny - size
.icon--size-sm - size
.icon--size-mid - size
.icon--size-lg - size

Styleguide 1.14
*/
.icon {
  display: inline-block;
  width: 20px;
  height: 20px; }

.icon--color-about {
  fill: #e44d27; }

.icon--color-concierge {
  fill: #009ab6; }

.icon--color-program {
  fill: #009f3b; }

.icon--color-contents {
  fill: #f1a600; }

.icon--color-other {
  fill: #000; }

.icon--color-white {
  fill: #fff; }

.icon--color-gray {
  fill: #aeaeae; }

.icon--color-facebook {
  fill: #3d578e; }

.icon--color-twitter {
  fill: #609ad1; }

.icon--color-picto {
  fill: #0196b2; }

.icon--size-tiny {
  width: 9px;
  height: 9px; }

.icon--size-sm {
  width: 11px;
  height: 11px; }

.icon--size-mediaSection {
  width: 25px;
  height: 25px; }
  @media only screen and (max-width: 768px) {
    .icon--size-mediaSection {
      width: 20px;
      height: 20px; } }

.icon--size-mid {
  width: 34px;
  height: 34px; }

.icon--size-section {
  width: 40px;
  height: 40px; }
  @media only screen and (max-width: 768px) {
    .icon--size-section {
      width: 20px;
      height: 20px; } }

.icon--size-lg {
  width: 64px;
  height: 64px; }
  @media only screen and (max-width: 768px) {
    .icon--size-lg {
      width: 40px;
      height: 40px; } }

.icon--size-lger {
  width: 116px;
  height: 116px; }
  @media only screen and (max-width: 768px) {
    .icon--size-lger {
      width: 52px;
      height: 52px; } }

.icon--size-16 {
  width: 16px;
  height: 16px; }

/*
ラベル

Markup:
<label class="label label--required">
  ラベル
</label>

Styleguide 1.15
*/
.label--required::after {
  content: '*';
  display: inline;
  color: #ff0000; }

/*
ローディング

Styleguide 1.16
*/
.loading {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: inherit; }

.loading__bar {
  background: -webkit-gradient(linear, left top, right top, from(#aaaaaa), to(#e9e9e9));
  background: linear-gradient(to right, #aaaaaa, #e9e9e9);
  width: 0px;
  height: 100%; }

.loading__text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-family: Futura; }

/*
ロゴ

Markup:
<div class='logo'>
  logo
</div>
<div class='admission-logo'>
  <div class='admission-logo__icon'>
    <img src="images/admission.png" />
  </div>
  <div class='admission-logo__text'>
    早稲田大学<br> 
    入学センターへ
  </div>
</div>

Styleguide 1.17
*/
.logo {
  font-size: 10px;
  color: #fff; }

/*
レスポンシブ埋め込み動画

Markup:
<div class="movie">
</div>

Styleguide 1.18
*/
.movie {
  position: relative;
  padding-bottom: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden; }

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*
ノート

Markup:
<div class="note">
  <div class="note__icon">
    <svg class="icon">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-circle-down"></use>
    </svg>
  </div>
  <div class="note__text">
    お問い合わせ
  </div>
</div>

Styleguide 1.19
*/
.note {
  font-size: 13px;
  fill: #aeaeae;
  color: #aeaeae;
  padding: 4px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.note__text {
  padding: 0 7px; }

.note__icon {
  line-height: 0;
  padding-left: 7px; }

/*
タグ

Markup:
<div class="tag">正規課程</div>

Styleguide 1.20
*/
.tag {
  width: 100%;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #009f3b;
  font-size: 18px;
  padding-top: 7px;
  line-height: 1.2; }
  @media only screen and (max-width: 768px) {
    .tag {
      font-size: 14px; } }

/*--------------------------------------------------------------
# components
--------------------------------------------------------------*/
/*
components

Styleguide 2
*/
/*
module

Styleguide 2.1
*/
/*
データ

Markup:
<div class="data data--about">
  <div class="data__heading">
    早稲田大学の歴史
  </div>
  <div class="data__body data__body--history">
    <div class="data__number">
      132<span class="data__unit">年の歴史</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/history.png">
    </div>
  </div>
  <div class="data__footer">
    <div class="data__text">
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。
    </div>
  </div>
</div>
<div class="data data--concierge data--inverse">
  <div class="data__heading">
    受講者数
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__label">
        年間延べ
      </div>
      45,000<span class="data__unit">名</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/student.png">
    </div>
  </div>
</div>
<div class="data data--program">
  <div class="data__heading">
    講座数
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__label">
        年間延べ
      </div>
      000,000<span class="data__unit">回</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/course.png">
    </div>
  </div>
</div>
<div class="data data--contents data--inverse">
  <div class="data__heading">
    講師数
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__label">
        総勢
      </div>
      000,000<span class="data__unit">名</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/speaker.png">
    </div>
  </div>
</div>
<div class="data data--about">
  <div class="data__heading">
    受講者最高年齢・最低年齢
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__list">
        <div class="data__label">
          最低年齢
        </div>
        00<span class="data__unit">歳</span>
      </div>
      <div class="data__list">
        <div class="data__label">
          最低年齢
        </div>
        00<span class="data__unit">歳</span>
      </div>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/age.png">
    </div>
  </div>
</div>
<div class="data data--concierge data--inverse">
  <div class="data__heading">
    ジャンル数
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__label">
        学びのジャンル数
      </div>
      000,000<span class="data__unit">種</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/genre.png">
    </div>
  </div>
</div>
<div class="data data--program">
  <div class="data__heading">
    学び提供機関数
  </div>
  <div class="data__body">
    <div class="data__number">
      <div class="data__label">
        機関数合計
      </div>
      000,000<span class="data__unit">機関</span>
    </div>
    <div class="data__image">
      <img src="<?php echo esc_url(home_url('/')); ?>images/about/organization.png">
    </div>
  </div>
</div>


Styleguide 2.1.1
*/
.data {
  position: relative;
  background-color: #ededed; }

.data__heading {
  position: absolute;
  top: 0;
  left: 50px;
  font-size: 20px;
  line-height: 32px;
  width: 266px;
  text-align: center;
  background-color: #fff; }
  @media only screen and (max-width: 768px) {
    .data__heading {
      left: 0;
      right: 0;
      margin: 0 auto; } }

.data__body {
  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; }
  @media only screen and (max-width: 768px) {
    .data__body {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding-top: 42px; } }

.data__body--history {
  max-width: 1100px;
  margin: 0 auto; }

.data__list {
  display: inline-block; }

.data__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 100px;
  font-weight: bold;
  text-align: left;
  line-height: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }
  @media only screen and (max-width: 768px) {
    .data__number {
      font-size: 60px;
      text-align: center; } }

.data__center {
  display: inline-block; }

.data__label {
  font-size: 32px;
  line-height: 56px;
  text-align: left;
  font-weight: normal; }
  @media only screen and (max-width: 768px) {
    .data__label {
      font-size: 24px;
      line-height: 42px;
      text-align: center; } }

.data__unit {
  font-size: 32px;
  font-weight: normal; }
  @media only screen and (max-width: 768px) {
    .data__unit {
      font-size: 24px;
      line-height: 42px; } }

.data__image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block; }

.data__footer {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 28px; }
  @media only screen and (max-width: 768px) {
    .data__footer {
      padding-left: 20px;
      padding-right: 20px; } }

.data__text {
  color: #606060; }

.data--about {
  color: #e44d27; }

.data--concierge {
  color: #009ab6; }

.data--program {
  color: #009f3b; }

.data--contents {
  color: #f1a600; }

.data--inverse .data__heading {
  top: 0;
  left: auto;
  right: 50px; }

.data--inverse .data__number {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2; }

.data--inverse .data__image {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1; }

@media only screen and (max-width: 768px) {
  .data--inverse .data__heading {
    left: 0;
    right: 0;
    margin: 0 auto; }
  .data--inverse .data__number {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1; }
  .data--inverse .data__image {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2; } }

/*
詳細内容

Markup:
<div class="detail">
  <div class="detail__heading">
    WASEDA NEOのプログラムについて
  </div>
  <div class="detail__body">
    <div class="detail__text">
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。
    </div>
    <div class="detail__location">
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      ここにテキストが入ります。ここにテキストが入ります。
    </div>
  </div>
</div>

Styleguide 2.1.2
*/
.detail__heading {
  font-size: 24px;
  line-height: 42px;
  padding-bottom: 24px;
  color: #009f3b; }

.detail__body {
  margin-left: 200px; }
  @media only screen and (max-width: 768px) {
    .detail__body {
      margin-left: auto; } }

.detail__text {
  padding-bottom: 24px; }

.detail__location {
  background-color: #ededed;
  font-size: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  line-height: 1.6; }

/*
外部リンクリスト

Markup:
<ul class="externalList">
  <li class="externalList__item">
    <div class="headingList headingList--program">リスト見出し</div>
  </li>
  <li class="externalList__item">
    <a href="#">
      <div class="externalList__icon">
        <svg class="icon icon--color-program">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
        </svg>
      </div>
      <div class="externalList__text">
        政治経済学部
      </div>
    </a>
    <ul class="externalList">
      <li class="externalList__item">
        <a href="#">
          <div class="externalList__icon">
            <svg class="icon icon--color-program">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
            </svg>
          </div>
          <div class="externalList__text">
            政治経済学部
          </div>
        </a>
      </li>
      <li class="externalList__item">
        <a href="#">
          <div class="externalList__icon">
            <svg class="icon icon--color-program">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
            </svg>
          </div>
          <div class="externalList__text">
            政治経済学部
          </div>
        </a>
      </li>
      <li class="externalList__item">
        <a href="#">
          <div class="externalList__icon">
            <svg class="icon icon--color-program">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
            </svg>
          </div>
          <div class="externalList__text">
            政治経済学部
          </div>
        </a>
      </li>
    </ul>
  </li>
  <li class="externalList__item">
    <a href="#">
      <div class="externalList__icon">
        <svg class="icon icon--color-program">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
        </svg>
      </div>
      <div class="externalList__text">
        政治経済学部
      </div>
    </a>
  </li>
  <li class="externalList__item">
    <a href="#">
      <div class="externalList__icon">
        <svg class="icon icon--color-program">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
        </svg>
      </div>
      <div class="externalList__text">
        政治経済学部
      </div>
    </a>
  </li>
  <li class="externalList__item">
    <a href="#">
      <div class="externalList__icon">
        <svg class="icon icon--color-program">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#external-link"></use>
        </svg>
      </div>
      <div class="externalList__text">
        政治経済学部
      </div>
    </a>
  </li>
</ul>

Styleguide 2.1.3
*/
.externalList {
  padding-top: 8px;
  padding-bottom: 8px; }

.externalList__item {
  padding-bottom: 8px; }

.externalList__icon {
  display: inline-block;
  line-height: 20px;
  vertical-align: middle;
  padding-right: 8px; }

.externalList__text {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
  color: #009f3b; }

.externalList__item--secondary {
  padding-left: 22px;
  padding-bottom: 4px; }
  .externalList__item--secondary .externalList__text {
    font-size: 14px; }

/*
リンク

Styleguide 2.1.4
*/
.link {
  display: inline-table;
  line-height: 0; }

.link__text {
  display: table-cell;
  font-size: 16px;
  padding: 0 16px;
  vertical-align: middle;
  background-color: #ededed;
  line-height: 28px;
  cursor: pointer; }
  @media only screen and (max-width: 768px) {
    .link__text {
      font-size: 14px;
      padding: 0 14px; } }

.link--small .link__text {
  font-size: 12px;
  padding: 0 12px; }

.link__text--white {
  background-color: #fff; }

.link__icon {
  position: relative;
  display: table-cell;
  text-align: center;
  cursor: pointer; }

/*
アイコンリンク

Markup:
<a class="link">
  <div class="link__icon">
    <svg class="icon icon--color-about icon--size-lg">
    	<use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-square-right"></use>
    </svg>
  </div>
</a>

Styleguide 2.1.3.1
*/
/*
テキストリンク

Markup:
<a class="link">
  <div class="link__text {$modifiers}">詳細を詳しく見る</div>
  <div class="link__icon">
    <svg class="icon icon--color-about icon--size-lg">
    	<use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-square-right"></use>
    </svg>
  </div>
</a>

.link__text - デフォルト
.link__text--white - 白地

Styleguide 2.1.3.2
*/
/*
スモールリンク

Markup:
<a class="link {$modifiers}">
  <div class="link__text">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </div>
  <div class="link__icon">
    <svg class="icon icon--size-mid">
    	<use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#external-link-square"></use>
    </svg>
  </div>
</a>

.link--small - small

Styleguide 2.1.3.3
*/
/*
概要

Markup:
<div class="summary">
  <div class="summary__background"></div>
  <div class="summary__heading">
    <div class='headingSection headingSection--about'>ビジネスに活用できる学び</div>
  </div>
  <div class="summary__text">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。
    <div class="summary__keyword">
      【学びキーワード】
      <span class="badge">バッチ</span><span class="badge">バッチ</span><span class="badge">バッチ</span>
    </div>
  </div>
  <div class="summary__more">
    <div class="buttonIcon buttonIcon--assist js-accordion-icon">
      <div class="buttonIcon__icon">
        <svg class="icon icon--color-white" style="width: 14px; height: 14px;">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#plus"></use>
        </svg>
      </div>
    </div>
    リストをみる
  </div>
</div>

Styleguide 2.1.5
*/
.summary {
  position: relative; }

.summary__background {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ededed;
  height: 150px;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .summary__background {
      height: 230px; } }

.summary__heading {
  position: relative; }

.summary__text {
  position: relative;
  max-width: 800px;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .summary__text {
      padding: 0 20px; } }

.summary__more {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #aeaeae; }
  @media only screen and (max-width: 768px) {
    .summary__more {
      position: relative;
      bottom: auto;
      right: auto;
      text-align: center;
      padding: 14px 0; } }

.summary__keyword {
  color: #000;
  padding-top: 14px; }

.summary__img {
  width: 100%; }

.summary__img img {
  width: 100%;
  max-width: none; }

.summary__smartseImg {
  text-align: center; }

.summary__smartseImg img {
  width: 38%;
  max-width: 300px; }
  @media only screen and (max-width: 768px) {
    .summary__smartseImg img {
      width: 50%;
      max-width: none; } }

/*
概要イメージ

Markup:
<div class="summaryImage">
  <div class="summaryImage__text">
    <span class="badge">バッチバッチバッチ</span><span class="badge">バッチバッチ</span><br>
    <span class="badge">バッチバッチバッチバッチバッチ</span>
  </div>
</div>
<br>
<div class="summaryImage">
  <div class="summaryImage__text">
    <div class="tag">バッチバッチバッチ</div>
  </div>
</div>

.summaryImage--program - program

Styleguide 2.1.6
*/
.summaryImage {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 120px;
  background-color: #ededed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .summaryImage {
      width: 140px;
      height: 140px;
      border-radius: 70px; } }

.summaryImage__image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.summaryImage__text {
  position: absolute;
  bottom: 1em;
  left: 0;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .summaryImage__text {
      bottom: 0em; } }

/*
navigations

Styleguide 2.2
*/
/*
パンくず

Markup:
<ul class='breadcrumb'>
  <li class='breadcrumb__item'>
    <a href='#'>トップ</a> 
  </li>
  <li class='breadcrumb__item'>
    <a href='#'>学びのコンシェルジュ</a> 
  </li>
  <li class='breadcrumb__item'>
    <a href='#'>hogehogeコース</a> 
  </li>
</ul>

Styleguide 2.2.1
*/
.breadcrumb {
  font-size: 12px; }

.breadcrumb__item {
  display: inline-block; }
  .breadcrumb__item::after {
    content: "/";
    color: #fff;
    display: inline-block;
    padding: 0 4px; }
  .breadcrumb__item:last-child::after {
    display: none; }

.breadcrumb__item > a {
  color: #fff;
  text-decoration: none; }

/*
グローバルナビ

Markup:
<ul class="globalNav">
  <li class="globalNav__item globalNav__item--about">
    <a href="#">早稲田大学の生涯教育について</a>
    <ul class="globalNav__menu">
      <ul class="menu menu--about">
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
      </ul>
    </ul>
  </li>
  <li class="globalNav__item globalNav__item--concierge">
    <a href="#">学びのコンシェルジュ</a>
    <ul class="globalNav__menu">
      <ul class="menu menu--concierge">
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
      </ul>
    </ul>
  </li>
  <li class="globalNav__item globalNav__item--program">
    <a href="#">各種プログラム</a>
    <ul class="globalNav__menu">
      <ul class="menu menu--program">
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
      </ul>
    </ul>
  </li>
  <li class="globalNav__item globalNav__item--contents">
    <a href="#">リポート&amp;ニュース</a>
    <ul class="globalNav__menu">
      <ul class="menu menu--contents">
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
        <li class="menu__item"><a href="#">item</a></li>
      </ul>
    </ul>
  </li>
</ul>

Styleguide 2.2.2
*/
.globalNav__item {
  position: relative;
  display: inline-block; }

.globalNav__item > a {
  text-decoration: none;
  color: #606060;
  padding: 20px 10px; }
  .globalNav__item > a:hover, .globalNav__item > a.active {
    border-bottom-style: solid;
    border-bottom-width: 3px; }

.globalNav__item--about > a:hover, .globalNav__item--about > a.active {
  color: #e44d27;
  border-bottom-color: #e44d27; }

.globalNav__item--concierge > a:hover, .globalNav__item--concierge > a.active {
  color: #009ab6;
  border-bottom-color: #009ab6; }

.globalNav__item--program > a:hover, .globalNav__item--program > a.active {
  color: #009f3b;
  border-bottom-color: #009f3b; }

.globalNav__item--contents > a:hover, .globalNav__item--contents > a.active {
  color: #f1a600;
  border-bottom-color: #f1a600; }

.globalNav__menu {
  position: absolute;
  top: 40px;
  height: 0;
  overflow: hidden; }

.globalNav__menu:hover.globalNav__menu {
  display: block; }

/*
ハンバーガーメニュー

Markup:
<div class='hamburger'>
  <div class='hamburger__item'>
    <div class='hamburger__text'>
      について
    </div>
    <div class='hamburger__icon'>
      <svg class="icon icon--color-white icon--size-sm">
        <use xlink:href="images/sprite-icons.svg#chevron-down"></use>
      </svg>
    </div>
  </div>
</div>
<div class='hamburger hamburger--second {$modifiers}'>
  <div class='hamburger__item'>
    <div class='hamburger__text'>
      コンシェルジュ
    </div>
    <div class='hamburger__icon'>
      <svg class="icon icon--size-sm">
        <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
      </svg>
    </div>
  </div>
  <div class='hamburger__item'>
    <div class='hamburger__text'>
      コンシェルジュ
    </div>
    <div class='hamburger__icon'>
      <svg class="icon icon--size-sm">
        <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
      </svg>
    </div>
  </div>
  <div class='hamburger__item'>
    <div class='hamburger__text'>
      コンシェルジュ
    </div>
    <div class='hamburger__icon'>
      <svg class="icon icon--size-sm">
        <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
      </svg>
    </div>
  </div>
</div>
<div class='hamburger'>
  <div class='hamburger__item'>
    <small class='copyright'>Copyright &copy; 2018 waseda All Rights Reserved.</small>
  </div>
</div>

.hamburger--about - about
.hamburger--concierge - concierge
.hamburger--program - program
.hamburger--contents - contents
.hamburger--other - other

Styleguide 2.2.3
*/
.hamburger__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #000;
  color: #fff; }
  .hamburger__item:hover {
    color: #fff;
    fill: #fff; }

.hamburger__text {
  padding: 12px;
  text-align: center;
  width: 100%;
  line-height: 1.6; }

.hamburger__icon {
  width: 34px; }

.hamburger--second .hamburger__item {
  background: #fff;
  color: #000; }
  .hamburger--second .hamburger__item:hover {
    color: #fff;
    fill: #fff; }

.hamburger--about .hamburger__item:hover {
  background-color: #e44d27; }

.hamburger--concierge .hamburger__item:hover {
  background-color: #009ab6; }

.hamburger--program .hamburger__item:hover {
  background-color: #009f3b; }

.hamburger--contents .hamburger__item:hover {
  background-color: #f1a600; }

.hamburger--other .hamburger__item:hover {
  background-color: #000; }

/*
メニュー

Markup:
<ul class='menu {$modifiers}'>
  <li class='menu__item'><a href="#">item</a></li>
  <li class='menu__item'><a href="#">item</a></li>
  <li class='menu__item'><a href="#">item</a></li>
</ul>

.menu--about - about
.menu--concierge - concierge
.menu--program - program
.menu--contents - contents
.menu--link - link

Styleguide 2.2.4
*/
.menu__item > a {
  padding: 14px;
  display: block;
  text-decoration: none;
  color: #fff;
  width: 284px; }

.menu--about > .menu__item {
  background-color: #e44d27; }
  .menu--about > .menu__item:hover {
    background-color: #932c12; }

.menu--concierge > .menu__item {
  background-color: #009ab6; }
  .menu--concierge > .menu__item:hover {
    background-color: #004450; }

.menu--program > .menu__item {
  background-color: #009f3b; }
  .menu--program > .menu__item:hover {
    background-color: #003915; }

.menu--contents > .menu__item {
  background-color: #f1a600; }
  .menu--contents > .menu__item:hover {
    background-color: #8b6000; }

.menu--link > .menu__item {
  background-color: #000; }
  .menu--link > .menu__item:hover {
    background-color: black; }

/*
ページナビ

Markup:
<a class="pageNav" href="#"><img src="images/to-about.png" /></a>

Styleguide 2.2.5
*/
.pageNav {
  line-height: 0; }
  .pageNav:hover {
    opacity: 0.8; }

/*
ページネーション

Markup:
<ul class="pagination">
  <li class="pagination__item pagination__item--arrow">
    <a href="#">&lt;&lt;</a> 
  </li>
  <li class="pagination__item">
    <a href="#">1</a> 
  </li>
  <li class="pagination__item pagination__item.active">
    <a href="#">2</a> 
  </li>
  <li class="pagination__item">
    <a href="#">3</a> 
  </li>
  <li class="pagination__item pagination__item--arrow">
    <a href="#">&gt;&gt;</a> 
  </li>
</ul>

Styleguide 2.2.6
*/
.pagination {
  font-size: 12px; }

.pagination__item {
  display: inline-block;
  margin-left: 12px;
  margin-bottom: 6px; }

.pagination__item > a {
  text-decoration: none;
  width: 44px;
  line-height: 44px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  background-color: #ededed;
  font-size: 16px;
  color: #f1a600; }

.pagination__item--arrow > a {
  background-color: transparent; }

.pagination__item.active > a {
  background-color: #f1a600;
  font-size: 16px;
  color: #fff; }

.pagination__item.disable > a {
  visibility: hidden; }

/*
スクロールダウン

IEでフォントがない問題

Markup:
<nav class='scrollDown js-flashing js-scroll'>
  <a class='scrollDown__item'>
    scroll
  </a>
  <a class='scrollDown__item'>
    <svg class="icon icon--color-other icon--size-mid">
    	<use xlink:href="images/sprite-bg-icons.svg#arrow-circle-down"></use>
    </svg>
  </a>
</nav>

Styleguide 2.2.7
*/
.scrollDown {
  text-align: center;
  cursor: pointer; }

.scrollDown__item {
  font-family: Futura;
  display: block;
  color: #000; }

/*
スクロールトップ

Markup:
<nav class='scrollTop'>
  <a class='scrollTop__item'>TOPへ戻る</a>
  <a class='scrollTop__item'>
    <svg class="icon icon--color-other icon--size-mid">
      <use xlink:href="images/sprite-bg-icons.svg#chevron-square-up"></use>
    </svg>
  </a>
</nav>

Styleguide 2.2.8
*/
.scrollTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.scrollTop__item {
  text-decoration: underline;
  color: #000;
  padding-left: 14px;
  cursor: pointer;
  display: inline-block; }

/*
サイトマップ

Markup:
<div class='grid grid--4'>
  <div class='grid__item'>
    <div class='sitemap'>
      <div class='sitemap__secondary {$modifiers}'>早稲田大学の生涯教育</div>
      <div class='sitemap__tertiary'>ダミーテキストダミーテキスト</div>
      <div class='sitemap__tertiary'>ダミーテキストダミーテキスト</div>
    </div>
  </div>
  <div class='grid__item'>
    <div class='sitemap'>
      <div class='sitemap__secondary {$modifiers}'>
        <div class='sitemap__text'>ダミーテキストダミーテキスト</div>
        <div class='sitemap__icon'>
          <svg class="icon icon--color-white icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#chevron-down"></use>
          </svg>
        </div>
      </div>
      <div class='sitemap__tertiary'>
        <div class='sitemap__text'>ダミーテキストダミーテキスト</div>
        <div class='sitemap__icon'>
          <svg class="icon icon--color-gray icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='sitemap__tertiary'>
        <div class='sitemap__text'>ダミーテキストダミーテキスト</div>
        <div class='sitemap__icon'>
          <svg class="icon icon--color-gray icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

.sitemap__secondary--about - about
.sitemap__secondary--concierge - concierge
.sitemap__secondary--program - program
.sitemap__secondary--contents - contents
.sitemap__secondary--other - other

Styleguide 2.2.9
*/
.sitemap {
  background-color: #fff; }
  @media only screen and (max-width: 768px) {
    .sitemap {
      text-align: center; } }

.sitemap__text {
  display: inline-block; }

.sitemap__icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 14px; }

.sitemap__secondary {
  position: relative;
  padding-left: 7px;
  margin-bottom: 7px;
  color: #fff;
  display: block;
  cursor: pointer; }
  @media only screen and (max-width: 768px) {
    .sitemap__secondary {
      padding: 6px 14px; } }

.sitemap__secondary--about {
  background-color: #e44d27; }

.sitemap__secondary--concierge {
  background-color: #009ab6; }

.sitemap__secondary--program {
  background-color: #009f3b; }

.sitemap__secondary--contents {
  background-color: #f1a600; }

.sitemap__secondary--other {
  background-color: #000; }

.sitemap__tertiary {
  position: relative;
  color: #909090;
  padding-left: 7px;
  display: block; }
  .sitemap__tertiary > a:hover {
    text-decoration: underline; }
  @media only screen and (max-width: 768px) {
    .sitemap__tertiary {
      padding: 6px 14px; }
      .sitemap__tertiary:hover {
        background-color: #ededed; } }

/*
media

Styleguide 2.3
*/
/*
カード

ディスクリプションエリアの背景透過ではないrgbだとどれくらいになるか確認

Markup:
<div class='grid grid--2'>
  <div class='grid__item'>
    <div class='card {$modifiers}'>
      <div class='card__image' style="background-image: url(https://cdn-ak.f.st-hatena.com<?php echo esc_url(home_url('/')); ?>images/fotolife/h/humming_camino/20171002/20171002212620.jpg)">
        <div class='card__meta'>
          <div class='card__type'>COURSE</div>
          <div class='card__info'>WASEDA NEO</div>
          <div class='card__icon'>
            <svg class="icon icon--color-contents icon--size-lg">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-square-right"></use>
            </svg>
          </div>
        </div>
        <div class='card__link'>
          <a class='link link--small'>
            <div class='link__text'>
              外部リンクへ
            </div>
            <div class='link__icon'>
              <svg class="icon icon--color-other icon--size-mid">
                <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#external-link-square"></use>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class='card__description'>
        <div class='card__text'>
          ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
        </div>
      </div>
    </div>
  </div>
</div>

.card--course - 講座
.card--program - program
.card--article - リポート
.card--news - ニュース
.card--links - リンク集

Styleguide 2.3.1
*/
.card {
  width: auto;
  display: block; }

.card__image {
  position: relative;
  height: 200px;
  background-image: url(../../../img/goods/2/4549509257400.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }

.card__link {
  position: absolute;
  top: 0;
  right: 0; }

.card__meta {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }

.card__type {
  background-color: #000;
  color: #fff;
  width: 112px;
  text-align: center;
  font-size: 14px;
  line-height: 24.5px;
  font-family: Futura;
  padding-top: 10px;
  height: 40px; }

.card__info {
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  width: calc(100% - 176px);
  padding: 7px;
  font-size: 16px;
  line-height: 28px;
  height: 40px; }
  @media only screen and (max-width: 768px) {
    .card__info {
      width: calc(100% - 152px); } }

.card__icon {
  line-height: 0;
  width: 64px; }
  @media only screen and (max-width: 768px) {
    .card__icon {
      width: 40px; } }

.card__description {
  background: #909090;
  color: #fff;
  padding: 12px;
  min-height: 72px; }

.card__text {
  word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all; }

.card--course .card__image {
  height: 200px; }

.card--course .card__info {
  width: calc(100% - 112px);
  font-size: 12px; }

.card--course .card__icon {
  display: none; }

.card--course-cloud .card__info {
  width: calc(100% - 112px);
  font-size: 12px; }

@media only screen and (max-width: 768px) {
  .card--course-cloud .card__image {
    height: 150px; }
  .card--course-cloud .card__meta {
    height: calc(100% - 54px);
    width: calc(100% - 40px);
    margin: 0 auto; }
  .card--course-cloud .card__description {
    width: calc(100% - 40px);
    margin: 0 auto;
    background: rgba(0, 0, 0, .6);
    padding: 12px;
    min-height: 54px; }
  .card--course-cloud .card__link {
    width: calc(100% - 40px);
    margin: 0 auto;
    right: 0;
    left: 0;
    top: auto;
    bottom: -34px;
    text-align: right;
    line-height: 0; } }

.card--program .card__image {
  height: 150px; }

.card--program .card__info {
  width: calc(100% - 112px);
  font-size: 12px; }

.card--program .card__icon {
  display: none; }

@media only screen and (max-width: 768px) {
  .card--program .card__meta {
    height: calc(100% - 54px);
    width: calc(100% - 40px);
    margin: 0 auto; }
  .card--program .card__description {
    width: calc(100% - 40px);
    margin: 0 auto;
    background: rgba(0, 0, 0, .6);
    padding: 0 12px;
    min-height: 54px; }
  .card--program .card__link {
    width: calc(100% - 40px);
    margin: 0 auto;
    right: 0;
    left: 0;
    top: auto;
    bottom: -34px;
    text-align: right;
    line-height: 0; } }

.card--article .card__image {
  height: 260px; }

.card--article .card__link {
  display: none; }

.card--article .card__info {
  font-size: 12px;
  padding: 8px; }

.card--article .card__description {
  font-size: 28px;
  line-height: 46px;
  height: 116px; }

@media only screen and (max-width: 768px) {
  .card--article .card__image {
    height: 200px; }
  .card--article .card__description {
    font-size: 14px;
    line-height: 24.5px;
    height: 72px; } }

.card--news .card__image {
  height: 200px; }

.card--news .card__link {
  display: none; }

.card--news .card__info {
  font-size: 12px;
  padding: 8px; }

@media only screen and (max-width: 768px) {
  .card--news .card__image {
    height: auto;
    background-image: none !important; } }

.card--links .card__image {
  height: 200px; }

.card--links .card__type {
  display: none; }

.card--links .card__info {
  width: 100%;
  height: auto;
  line-height: 20px; }

.card--links .card__icon {
  display: none; }

.card--links .card__description {
  display: none; }

/*
インデックスカード

Markup:
<div class="grid grid--2">
  <div class="grid__item">
    <div class="cardIndex" style="background-image: url(dummy.jpg)">
        <div class="cardIndex__body">
          <div class="cardIndex__text">
            ここにタイトル<br>
            が入ります。
          </div>
          <div class="cardIndex__tags">
            <span class="badge">#関連タグ</span>
            <span class="badge">#関連タグ</span>
            <span class="badge">#関連タグ</span>
          </div>
        </div>
        <div class="cardIndex__icon">
          <svg class="icon icon--color-concierge icon--size-lg">
            <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide 2.3.2
*/
.cardIndex {
  width: auto;
  position: relative;
  height: 300px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }
  @media only screen and (max-width: 768px) {
    .cardIndex {
      height: 220px; } }

.cardIndex__icon {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 0; }

.cardIndex__body {
  position: absolute;
  bottom: 20px;
  width: calc(100% - 64px);
  padding-left: 14px; }

.cardIndex__text {
  font-size: 40px;
  line-height: 70px;
  color: #fff;
  padding-bottom: 20px; }
  @media only screen and (max-width: 768px) {
    .cardIndex__text {
      font-size: 26px;
      line-height: 36px; } }

/*
リンクカード

Markup:
<div class="grid grid--2">
  <div class="grid__item">
    <div class="cardLink">
      <div class="cardLink__image" style="background-image: url(dummy.jpg)"></div>
      <div class="cardLink__text">
        ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
      </div>
      <div class="cardLink__footer">
        <div class="cardLink__heading cardLink__heading--about">
          早稲田大学の生涯教育
        </div>
        <div class="cardLink__link">
          <a class="link">
            <div class="link__text">詳しく見る</div>
            <div class="link__icon">
              <svg class="icon icon--color-about icon--size-lg">
                <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="grid__item">
    <div class="cardLink">
      <div class="cardLink__image" style="background-image: url(dummy.jpg)">
      </div>
      <div class="cardLink__text">
        ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
      </div>
      <div class="cardLink__footer">
        <div class="cardLink__heading cardLink__heading--program">
          教育制度について
        </div>
        <div class="cardLink__link">
          <a class="link">
            <div class="link__text">詳しく見る</div>
            <div class="link__icon">
              <svg class="icon icon--color-program icon--size-lg">
                <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

.cardLink__heading--about - abbout
.cardLink__heading--program - program

Styleguide 2.3.3
*/
.cardLink {
  width: auto; }

.cardLink__image {
  position: relative;
  height: 300px;
  background-image: url(../../../img/goods/2/4549509257400.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; }
  @media only screen and (max-width: 768px) {
    .cardLink__image {
      height: 200px; } }

.cardLink__text {
  background-color: #ededed;
  font-size: 16px;
  line-height: 28px;
  padding: 16px; }
  @media only screen and (max-width: 768px) {
    .cardLink__text {
      display: none; } }

.cardLink__footer {
  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;
  background-color: #fff; }
  @media only screen and (max-width: 768px) {
    .cardLink__footer {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; } }

.cardLink__heading {
  font-size: 30px;
  line-height: 52.5px;
  padding-left: 30px; }
  @media only screen and (max-width: 768px) {
    .cardLink__heading {
      font-size: 20px;
      line-height: 0;
      padding-right: 20px; } }
  .cardLink__heading:hover {
    text-decoration: underline; }

.cardLink__heading--about {
  color: #e44d27; }

.cardLink__heading--program {
  color: #009f3b; }

.cardLink__link {
  line-height: 0; }
  @media only screen and (max-width: 768px) {
    .cardLink__link .link__text {
      display: none; } }

.mediaHero {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.mediaHero__body {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%; }
  @media only screen and (max-width: 768px) {
    .mediaHero__body {
      right: 0;
      left: 0;
      margin: 0 auto;
      bottom: 24px;
      width: 90%; } }

.mediaHero__heading {
  font-size: 33px;
  line-height: 58px;
  font-family: Futura;
  color: #fff;
  text-shadow: 0px 1px 20px rgba(0, 0, 0, .2); }
  @media only screen and (max-width: 768px) {
    .mediaHero__heading {
      font-size: 22px;
      line-height: 38.5px; } }

.mediaHero__title {
  display: block;
  color: #fff;
  font-size: 24px;
  word-wrap: break-word;
  word-wrap: break-word;
  line-height: 38px;
  padding: 12px 24px; }
  @media only screen and (max-width: 768px) {
    .mediaHero__title {
      position: relative;
      font-size: 14px;
      line-height: 24.5px;
      padding: 8px 14px; } }

.mediaHero__title--about {
  background-color: #e44d27; }

.mediaHero__title--program {
  background-color: #009f3b; }

.mediaHero__icon {
  display: inline-block;
  position: absolute;
  top: -5px;
  right: 0; }
  @media only screen and (max-width: 768px) {
    .mediaHero__icon {
      top: -40px; } }

/*
ヒーローテキストメディア

タイトルは本当は18pxだけどフォントが多すぎるので、16pxへ

Markup:
<div class='heroimage'>
  <div class='heroimage__contents'>contents</div>
  <div class='heroimage__news'>news</div>
  <div class='heroimage__course'>
    <div class='mediaHeroText mediaHeroText--concierge'>
      <div class='mediaHeroText__body'>
        <div class='mediaHeroText__heading'>COURSE</div>
        <div class='mediaHeroText__title'>
          「宇宙産業のアップル」
        </div>
        <a href="#" class='mediaHeroText__link'>
          <div class='mediaHeroText__link-text'>
            外部リンク
          </div>
          <div class='mediaHeroText__link-icon mediaHeroText__link-icon--concierge'>
            <svg class="icon">
              <use xlink:href="images/sprite-icons.svg#external-link"></use>
            </svg>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class='heroimage__program'>
    <div class='mediaHeroText mediaHeroText--program'>
      <div class='mediaHeroText__body'>
        <div class='mediaHeroText__heading'>PROGRAM</div>
        <div class='mediaHeroText__title'>
          「宇宙産業のアップル」になるために必要なことここにテキストが入ります
        </div>
        <a href="#" class='mediaHeroText__link'>
          <div class='mediaHeroText__link-text'>
            内部リンク
          </div>
          <div class='mediaHeroText__link-icon mediaHeroText__link-icon--program'>
            <svg class="icon">
              <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
            </svg>
          </div>
        </a>
      </div>
    </div>    
  </div>
  </div>

Styleguide 2.3.5
*/
.mediaHeroText {
  width: 100%;
  height: 100%;
  position: relative; }

.mediaHeroText--concierge {
  background-color: #009ab6; }

.mediaHeroText--program {
  background-color: #009f3b; }

.mediaHeroText__body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 559px;
  padding: 18px 0px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__body {
      padding: 24px 0;
      width: 90%; } }

.mediaHeroText__heading {
  color: #fff;
  font-size: 22px;
  line-height: 38.5px;
  font-family: Futura; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__heading {
      font-size: 16px;
      line-height: 28px; } }

.mediaHeroText__title {
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  padding-bottom: 16px; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__title {
      font-size: 12px;
      line-height: 21px; } }

.mediaHeroText__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.mediaHeroText__link-text {
  color: #fff;
  text-decoration: underline;
  padding-right: 14px; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__link-text {
      padding-right: 7px; } }

.mediaHeroText__link-icon {
  background-color: #fff;
  width: 64px;
  height: 64px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__link-icon {
      background-color: transparent;
      width: 30px;
      height: 30px; } }

.mediaHeroText__link-icon--concierge {
  fill: #009ab6; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__link-icon--concierge {
      fill: #fff; } }

.mediaHeroText__link-icon--program {
  fill: #009f3b; }
  @media only screen and (max-width: 768px) {
    .mediaHeroText__link-icon--program {
      fill: #fff; } }

/*
インタビューメディア

Markup:
<div class="mediaInterview">
  <div class="mediaInterview__thumbnail"
    style="background-image: url(dummy.jpg)">
  </div>
  <div class="mediaInterview__name">
    株式会社早稲田 <span class="mediaInterview__position">肩書部 肩書課 早稲田 肩書</span>
    <br />
    早稲田　太郎
  </div>
  <div class="mediaInterview__title">
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
  </div>
  <div class="mediaInterview__text">
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
  </div>
  <div class="mediaInterview__meta">
    【学びキーワード】
    <span class="badge">バッチ</span><span class="badge">バッチ</span><span class="badge">バッチ</span>
  </div>
  <div class="mediaInterview__link">
    <a class="link">
      <div class="link__text link__text--white">このプログラムを詳しく見る</div>
      <div class="link__icon">
        <svg class="icon icon--color-other icon--size-lg">
          <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-square-right"></use>
        </svg>
      </div>
    </a>
  </div>
</div>

Styleguide 2.3.6
*/
.mediaInterview {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  -ms-grid-rows: 76px 76px 1fr 64px 64px;
      grid-template-rows: 76px 76px 1fr 64px 64px; }
  @media only screen and (max-width: 768px) {
    .mediaInterview {
      -ms-grid-columns: 100%;
          grid-template-columns: 100%;
      -ms-grid-rows: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto auto auto auto; } }

.mediaInterview__thumbnail {
  position: relative;
  height: 330px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1 / 5; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__thumbnail {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2;
      height: 210px; } }

.mediaInterview__name {
  background: #fff;
  font-size: 16px;
  padding: 14px 16px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__name {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3; } }

.mediaInterview__position {
  font-size: 12px; }

.mediaInterview__title {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 35px;
  padding: 0 16px; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__title {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      grid-row: 3 / 4;
      font-size: 16px;
      line-height: 28px; } }

.mediaInterview__text {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
  background: #fff;
  padding: 0 16px; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__text {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 4;
      -ms-grid-row-span: 1;
      grid-row: 4 / 5;
      padding: 14px 16px; } }

.mediaInterview__meta {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
  background: #fff;
  color: #000;
  size: 16px;
  line-height: 28px;
  padding: 0 16px; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__meta {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 5;
      -ms-grid-row-span: 1;
      grid-row: 5 / 6;
      padding-left: 14px;
      padding-bottom: 14px; } }

.mediaInterview__link {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5 / 6;
  text-align: right; }
  @media only screen and (max-width: 768px) {
    .mediaInterview__link {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 6;
      -ms-grid-row-span: 1;
      grid-row: 6 / 7; } }

/*
セクションメディア

Markup:
<div class='mediaSection'>
  <div class='mediaSection__background'></div>
  <div class='mediaSection__inner'>
    <div class='mediaSection__heading'>ヘッダー</div>
    <div class='mediaSection__thumbnail'
      style="background-image: url(dummy.jpg)">
    </div>
    <div class='mediaSection__title'>
      ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
    </div>
    <div class='mediaSection__text'>
      ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
      ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
      ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
    </div>
    <div class='mediaSection__meta'>
      【学びキーワード】
      <span class="badge">バッチ</span><span class="badge">バッチ</span><span class="badge">バッチ</span>
    </div>
    <div class='mediaSection__link'>
      <a class='link'>
        <div class='link__text'>このプログラムを詳しく見る</div>
        <div class='link__icon'>
          <svg class="icon icon--color-other icon--size-lg">
            <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
          </svg>
        </div>
      </a>
    </div>
  </div>
</div>

Styleguide 2.3.7
*/
.mediaSection {
  position: relative;
  width: auto; }

.mediaSection__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #ededed; }

.mediaSection__inner {
  position: relative;
  width: 85%;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  -ms-grid-rows: 72px 76px auto 1fr 64px;
      grid-template-rows: 72px 76px auto 1fr 64px; }
  @media only screen and (max-width: 768px) {
    .mediaSection__inner {
      width: 95%;
      -ms-grid-columns: 100%;
          grid-template-columns: 100%;
      -ms-grid-rows: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto auto auto auto; } }

.mediaSection__heading {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  color: #000;
  font-size: 30px;
  line-height: 52.5px; }
  @media only screen and (max-width: 768px) {
    .mediaSection__heading {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2;
      font-size: 20px;
      line-height: 35px;
      padding: 6px 0; } }

.mediaSection__thumbnail {
  position: relative;
  height: 330px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 4;
  grid-row: 2 / 6; }
  @media only screen and (max-width: 768px) {
    .mediaSection__thumbnail {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3;
      height: 210px; } }

.mediaSection__title {
  color: #000;
  font-size: 20px;
  line-height: 35px;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  padding: 0 14px; }
  @media only screen and (max-width: 768px) {
    .mediaSection__title {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      grid-row: 3 / 4;
      font-size: 16px;
      line-height: 28px;
      padding-top: 16px;
      padding-bottom: 16px; } }

.mediaSection__text {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3 / 4;
  padding: 14px 14px; }
  @media only screen and (max-width: 768px) {
    .mediaSection__text {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 4;
      -ms-grid-row-span: 1;
      grid-row: 4 / 5; } }

.mediaSection__meta {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
  color: #000;
  size: 16px;
  line-height: 28px;
  padding: 14px; }
  @media only screen and (max-width: 768px) {
    .mediaSection__meta {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 5;
      -ms-grid-row-span: 1;
      grid-row: 5 / 6; } }

.mediaSection__link {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5 / 6;
  text-align: right; }
  @media only screen and (max-width: 768px) {
    .mediaSection__link {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 6;
      -ms-grid-row-span: 1;
      grid-row: 6 / 7;
      text-align: center; } }

/*
サイドバーメディア

Markup:
<div class="mediaSide">
  <div class="mediaSide__heading">
    <div class="mediaSide__rank">1</div>
    <div class="mediaSide__date">2018.00.00</div>
  </div>
  <div class="mediaSide__body">
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
    ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
  </div>
</div>

Styleguide 2.3.8
*/
.mediaSide {
  display: block; }

.mediaSide__rank {
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  background-color: #f1a600;
  color: #fff; }

.mediaSide__date {
  font-size: 12px;
  color: #606060;
  display: inline-block; }

.mediaSide__body {
  background-color: #ededed;
  padding: 4px 6px; }

.mediaSide-container > .mediaSide:nth-child(1) .mediaSide__rank::before {
  content: "1";
  display: inline; }

.mediaSide-container > .mediaSide:nth-child(2) .mediaSide__rank::before {
  content: "2";
  display: inline; }

.mediaSide-container > .mediaSide:nth-child(3) .mediaSide__rank::before {
  content: "3";
  display: inline; }

/*
js

Styleguide 2.4
*/
/*
アコーディオン

Markup:
<div class="accordion">
  <div
    class="accordion__heading js-accordion-toggle"
    aria-controls="accordion1"
    aria-expanded="false"
  />
    <div class='hamburger'>
      <div class='hamburger__item'>
        <div class='hamburger__text'>
          社会人について
        </div>
        <div class='hamburger__icon js-accordion-icon'>
          <svg class="icon icon--color-white icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#chevron-down"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
  <div id='accordion1' class="accordion__box">
    <div class='hamburger hamburger--second hamburger--about'>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
  <div
    class="accordion__heading js-accordion-toggle"
    aria-controls="accordion2"
    aria-expanded="false"
  />
    <div class='hamburger'>
      <div class='hamburger__item'>
        <div class='hamburger__text'>
          テスト
        </div>
        <div class='hamburger__icon js-accordion-icon'>
          <svg class="icon icon--color-white icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#chevron-down"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
  <div id='accordion2' class="accordion__box">
    <div class='hamburger hamburger--second hamburger--program'>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide 2.4.1
*/
.accordion__box {
  height: 0px;
  overflow: hidden; }

/*
ドロワー

Markup:
<div class="drawer">
  <div
    class="drawer__heading js-drawer-toggle"
    aria-controls="drawer1"
    aria-expanded="false"
  />
    ボタン
  </div>
  <div id='drawer1' class="drawer__box">
    <div class='hamburger hamburger--second hamburger--about'>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
      <div class='hamburger__item'>
        <div class='hamburger__text'>コンシェルジュ</div>
        <div class='hamburger__icon'>
          <svg class="icon icon--size-sm">
            <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

Styleguide 2.4.2
*/
.drawer__box {
  overflow: hidden; }

/*
蛍光ペン

Markup:
<div class="highlighter js-highlighter">
</div>

Styleguide 2.4.3
*/
.highlighter {
  position: relative; }
  .highlighter:hover .highlighter__text {
    color: #fff; }

.highlighter__text {
  position: relative; }

.highlighter__bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  cursor: pointer; }

.js-highlighter-async.active > .highlighter__bg {
  width: 100% !important; }

.js-highlighter-async.active > label {
  color: #fff; }

.highlighter__bg--image {
  z-index: 1;
  opacity: 0.5; }

.highlighter__bg--text {
  z-index: 0;
  opacity: 1; }

.highlighter__bg--about {
  background-color: #e44d27; }

.highlighter__bg--concierge {
  background-color: #009ab6; }

.highlighter__bg--program {
  background-color: #009f3b; }

.highlighter__bg--contents {
  background-color: #f1a600; }

.highlighter__bg--other {
  background-color: #000; }

/*
モーダル

Markup:
<div class="l-modal js-modal-recommend">
  <div class="modal">
    <span class="modal__close">×</span>
    <div class="heading heading--other">
      <div class="heading__main">推奨環境について</div>
    </div>
    <div>
      Webサイトを快適に使うために、以下のブラウザでのご利用を推奨します。<br>
      なお、セキュリティの観点より、ブラウザの自動アップデートを有効にし最新の環境でご利用ください。
    </div>
    <div class='headingItem headingItem--other'>
      [パソコン]
    </div>
    <ul>
      <li>■ Windows</li>
      <li>Google Chrome 最新, Mozilla Firefox 最新</li>
      <li>Internet Explorer 11, Microsoft Edge 最新</li>
      <li>■ Macintosh</li>
      <li>Google Chrome 最新版, Safari 最新</li>
      <li>Mozilla Firefox 最新</li>
    </ul>
    <div class='headingItem headingItem--other'>
      [スマートフォン]
    </div>
    <ul>
      <li>■ iPhone</li>
      <li>Safari 最新, Chrome 最新</li>
      <li>■ Android</li>
      <li>Chrome 最新</li>
    </ul>
  </div>
</div>

Styleguide 2.4.4
*/
.modal {
  position: relative;
  padding: 14px 40px 28px; }
  @media only screen and (max-width: 768px) {
    .modal {
      padding: 14px; } }

.modal__close {
  position: absolute;
  right: 20px;
  top: 26px;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer; }
  @media only screen and (max-width: 768px) {
    .modal__close {
      right: 8px;
      top: 8px;
      font-size: 22px; } }

/**
 * Swiper 4.1.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://www.idangero.us/swiper/
 *
 * Copyright 2014-2018 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 13, 2018
 */
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-no-flexbox .swiper-slide {
  float: left; }

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

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

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

.swiper-container-multirow > .swiper-wrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto; }

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

.swiper-invisible-blank-slide {
  visibility: hidden; }

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform; }

/* 3D Effects */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  perspective: 1200px; }

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10; }

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent));
  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), transparent); }

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(transparent));
  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), transparent); }

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(transparent));
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent); }

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(transparent));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent); }

/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y; }

.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x; }

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat; }

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none; }

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm0%2c22l22%2c0l2.1%2c2.1l4.2%2c22l19.9%2c19.9l22%2c44l0%2c22l0%2c22l0%2c22z'%20fill%3d'%23007aff'%2f%3e%3c%2fsvg%3e");
  left: 10px;
  right: auto; }

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm27%2c22l27%2c22l5%2c44l-2.1-2.1l22.8%2c22l2.9%2c2.1l5%2c0l27%2c22l27%2c22z'%20fill%3d'%23007aff'%2f%3e%3c%2fsvg%3e");
  right: 10px;
  left: auto; }

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm0%2c22l22%2c0l2.1%2c2.1l4.2%2c22l19.9%2c19.9l22%2c44l0%2c22l0%2c22l0%2c22z'%20fill%3d'%23ffffff'%2f%3e%3c%2fsvg%3e"); }

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm27%2c22l27%2c22l5%2c44l-2.1-2.1l22.8%2c22l2.9%2c2.1l5%2c0l27%2c22l27%2c22z'%20fill%3d'%23ffffff'%2f%3e%3c%2fsvg%3e"); }

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm0%2c22l22%2c0l2.1%2c2.1l4.2%2c22l19.9%2c19.9l22%2c44l0%2c22l0%2c22l0%2c22z'%20fill%3d'%23000000'%2f%3e%3c%2fsvg%3e"); }

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20viewbox%3d'0%200%2027%2044'%3e%3cpath%20d%3d'm27%2c22l27%2c22l5%2c44l-2.1-2.1l22.8%2c22l2.9%2c2.1l5%2c0l27%2c22l27%2c22z'%20fill%3d'%23000000'%2f%3e%3c%2fsvg%3e"); }

.swiper-button-lock {
  display: none; }

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10; }

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0; }

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%; }

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
  position: relative; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  transform: scale(1); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  transform: scale(0.33); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  transform: scale(0.66); }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  transform: scale(0.33); }

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2; }

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer; }

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff; }

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0); }

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px; }

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap; }

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform; }

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform; }

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, .25);
  position: absolute; }

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  transform-origin: left top; }

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  transform-origin: right top; }

.swiper-container-horizontal > .swiper-pagination-progressbar {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0; }

.swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0; }

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #ffffff; }

.swiper-pagination-progressbar.swiper-pagination-white {
  background: rgba(255, 255, 255, .25); }

.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
  background: #ffffff; }

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000000; }

.swiper-pagination-progressbar.swiper-pagination-black {
  background: rgba(0, 0, 0, .25); }

.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
  background: #000000; }

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

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, .1); }

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%; }

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%; }

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, .5);
  border-radius: 10px;
  left: 0;
  top: 0; }

.swiper-scrollbar-cursor-drag {
  cursor: move; }

.swiper-scrollbar-lock {
  display: none; }

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center; }

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain; }

.swiper-slide-zoomed {
  cursor: move; }

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite; }

.swiper-lazy-preloader:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20viewbox%3d'0%200%20120%20120'%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20xmlns%3axlink%3d'http%3a%2f%2fwww.w3.org%2f1999%2fxlink'%3e%3cdefs%3e%3cline%20id%3d'l'%20x1%3d'60'%20x2%3d'60'%20y1%3d'7'%20y2%3d'27'%20stroke%3d'%236c6c6c'%20stroke-width%3d'11'%20stroke-linecap%3d'round'%2f%3e%3c%2fdefs%3e%3cg%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(30%2060%2c60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat; }

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg%20viewbox%3d'0%200%20120%20120'%20xmlns%3d'http%3a%2f%2fwww.w3.org%2f2000%2fsvg'%20xmlns%3axlink%3d'http%3a%2f%2fwww.w3.org%2f1999%2fxlink'%3e%3cdefs%3e%3cline%20id%3d'l'%20x1%3d'60'%20x2%3d'60'%20y1%3d'7'%20y2%3d'27'%20stroke%3d'%23fff'%20stroke-width%3d'11'%20stroke-linecap%3d'round'%2f%3e%3c%2fdefs%3e%3cg%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%2f%3e%3cuse%20xlink%3ahref%3d'%23l'%20opacity%3d'.27'%20transform%3d'rotate(30%2060%2c60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000; }

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

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

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

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

.swiper-container-cube {
  overflow: visible; }

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%; }

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

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0; }

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

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible; }

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="50" /></filter></svg>#filter');
  filter: blur(50px);
  z-index: 0; }

.swiper-container-flip {
  overflow: visible; }

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1; }

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

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

.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.swiper-container-coverflow .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px; }

/*
カルーセル

Markup:
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Styleguide 2.4.5
*/
.swiper-outsider {
  position: relative;
  max-width: 1200px;
  min-width: 1100px;
  margin: auto; }
  @media only screen and (max-width: 768px) {
    .swiper-outsider {
      width: 100%;
      min-width: 100%; } }

.swiper-container {
  width: 100%;
  height: 100%; }

.swiper-button-prev, .swiper-button-next {
  background-image: none;
  width: auto;
  height: auto;
  margin-top: -28px; }

.swiper-button-prev {
  left: 0px; }

.swiper-button-next {
  right: 0px; }

/*
ヒーローメディアカルーセル

Markup:
<div class="heroimage">
  <div class="heroimage__contents">
    <div class="swiper-container swiper-container--article js-swiper-heroImage-article">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="mediaHero" style="background-image: url(dummy.jpg)">
            <div class="mediaHero__body">
              <div class="mediaHero__heading">
                REPORT
              </div>
              <div class="mediaHero__title">
                <span class="mediaHero__icon">
                  <svg class="icon icon--color-contents icon--size-lg">
                    <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
                  </svg>
                </span>
                ここにタイトルが入ります。ここにタイトルが入ります。
              </div>
            </div>
          </div>        
        </div>
        <div class="swiper-slide">
          <div class="mediaHero" style="background-image: url(dummy.jpg)">
            <div class="mediaHero__body">
              <div class="mediaHero__heading">
                REPORT
              </div>
              <div class="mediaHero__title">
                <span class="mediaHero__icon">
                  <svg class="icon icon--color-contents icon--size-lg">
                    <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
                  </svg>
                </span>
                ここにタイトルが入ります。ここにタイトルが入ります。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination js-swiper-pagination-heroImage-article"></div>			
    </div>
  </div>
  <div class="heroimage__news">
    <div class="swiper-container swiper-container--news js-swiper-heroImage-news">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="mediaHero" style="background-image: url(dummy.jpg)">
            <div class="mediaHero__body mediaHero__body__1of2">
              <div class="mediaHero__heading">
                NEWS
              </div>
              <div class="mediaHero__title">
                <span class="mediaHero__icon">
                  <svg class="icon icon--color-contents icon--size-lg">
                    <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
                  </svg>
                </span>
                ここにタイトルが入ります。ここにタイトルが入ります。
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="mediaHero" style="background-image: url(dummy.jpg)">
            <div class="mediaHero__body mediaHero__body__1of2">
              <div class="mediaHero__heading">
                NEWS
              </div>
              <div class="mediaHero__title">
                <span class="mediaHero__icon">
                  <svg class="icon icon--color-contents icon--size-lg">
                    <use xlink:href="images/sprite-bg-icons.svg#arrow-square-right"></use>
                  </svg>
                </span>
                ここにタイトルが入ります。ここにタイトルが入ります。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination js-swiper-pagination-heroImage-news"></div>			
    </div>
  </div>
  <div class="heroimage__course">
    <div class="swiper-container swiper-container--text js-swiper-heroTextImage-course">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--concierge">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">COURSE</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-concierge">
                    <use xlink:href="images/sprite-icons.svg#external-link"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--concierge">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">COURSE</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-concierge">
                    <use xlink:href="images/sprite-icons.svg#external-link"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--concierge">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">COURSE</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-concierge">
                    <use xlink:href="images/sprite-icons.svg#external-link"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination js-swiper-pagination-heroTextImage-course"></div>			
    </div>
  </div>
  <div class="heroimage__program">
    <div class="swiper-container swiper-container--text js-swiper-heroTextImage-program">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--program">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">PROGRAM</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-program">
                    <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--program">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">PROGRAM</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-program">
                    <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="mediaHeroText mediaHeroText--program">
            <div class="mediaHeroText__body">
              <div class="mediaHeroText__heading">PROGRAM</div>
              <div class="mediaHeroText__title">
                「宇宙産業のアップル」になるために必要なことここにテキストが入ります
              </div>
              <div class="mediaHeroText__link">
                <div class="mediaHeroText__icon">
                  <svg class="icon icon--color-program">
                    <use xlink:href="images/sprite-icons.svg#arrow-right"></use>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination js-swiper-pagination-heroTextImage-program"></div>			
    </div>
  </div>
</div>

Styleguide 2.4.4.1
*/
@media only screen and (max-width: 768px) {
  .swiper-container--article .swiper-pagination {
    bottom: 0; } }

.swiper-container--article .swiper-pagination-bullet {
  opacity: 1;
  background: #fff; }

.swiper-container--article .swiper-pagination-bullet-active {
  background: #f1a600; }

.swiper-container--news .swiper-pagination {
  left: 0;
  right: 0;
  width: 559px;
  margin: 0 auto;
  bottom: 0;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .swiper-container--news .swiper-pagination {
      width: 90%; } }

.swiper-container--news .swiper-pagination-bullet {
  opacity: 1;
  background: #fff; }

.swiper-container--news .swiper-pagination-bullet-active {
  background: #f1a600; }

.swiper-container--text .swiper-pagination-bullet-active {
  background: #fff; }

.swiper-container--text .swiper-pagination {
  bottom: 0; }

/*
クラウドタグカルーセル

Markup:
<div class="swiper-outsider swiper-outsider--cloudtag">
  <div class="swiper-container js-swiper-cloudtag-course">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card--program">
          <div class="card__image" style="background-image: url(dummy.jpg)">
            <div class="card__meta">
              <div class="card__type">COURSE</div>
              <div class="card__info">WASEDA NEO</div>
            </div>
          </div>
          <div class="card__description">
            <div class="card__text">
              ここにタイトルが入ります。ここにタイトルが入ります。ここにタイトルが入ります。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination js-swiper-pagination-cloudtag-course"></div>
  </div>
  <div class="swiper-button-prev js-swiper-button-prev-cloudtag-course">
    <svg class="icon icon--size-mid icon--color-concierge ">
      <use xlink:href="images/sprite-icons.svg#chevron-left"></use>
    </svg>
  </div>
  <div class="swiper-button-next js-swiper-button-next-cloudtag-course">
    <svg class="icon icon--size-mid icon--color-concierge ">
      <use xlink:href="images/sprite-icons.svg#chevron-right"></use>
    </svg>
  </div>
</div>

Styleguide 2.4.4.2
*/
.swiper-outsider--cloudtag .swiper-container {
  width: 1100px;
  padding-bottom: 44px; }

.swiper-outsider--cloudtag .swiper-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.swiper-outsider--cloudtag .swiper-button-prev, .swiper-outsider--cloudtag .swiper-button-next {
  fill: #009ab6; }

.swiper-outsider--cloudtag .swiper-button-disabled {
  opacity: 1; }

.swiper-outsider--cloudtag .swiper-button-disabled svg {
  fill: #606060; }

.swiper-outsider--cloudtag .swiper-pagination-bullet-active {
  background: #009ab6; }

@media only screen and (max-width: 768px) {
  .swiper-outsider--cloudtag .swiper-container {
    width: 100%;
    padding-bottom: 54px; }
  .swiper-outsider--cloudtag .swiper-button-prev, .swiper-outsider--cloudtag .swiper-button-next {
    fill: #fff;
    bottom: auto; }
    .swiper-outsider--cloudtag .swiper-button-prev > svg, .swiper-outsider--cloudtag .swiper-button-next > svg {
      width: 14px;
      height: 14px; }
  .swiper-outsider--cloudtag .swiper-pagination-bullets {
    text-align: left;
    bottom: 21px;
    padding: 0 14px; } }

/*
イメージ

Markup:
<div class="swiper-container swiper-container--image js-swiper-image">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media.jpg" />
    </div>
  </div>
  <div class="swiper-pagination js-swiper-pagination-image"></div>
  <div class="swiper-button-prev js-swiper-button-prev-image">
    <svg class="icon icon--size-mid">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#chevron-left"></use>
    </svg>
  </div>
  <div class="swiper-button-next js-swiper-button-next-image">
    <svg class="icon icon--size-mid">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#chevron-right"></use>
    </svg>
  </div>
</div>

Styleguide  2.4.4.3
*/
.swiper-container--image .swiper-slide {
  text-align: center; }
  .swiper-container--image .swiper-slide > img {
    min-width: 100%; }

.swiper-container--image .swiper-button-prev, .swiper-container--image .swiper-button-next {
  margin-top: -20px;
  fill: #009f3b; }

.swiper-container--image .swiper-button-prev {
  left: 10px; }

.swiper-container--image .swiper-button-next {
  right: 10px; }

.swiper-container--image .swiper-button-disabled {
  opacity: 1; }

.swiper-container--image .swiper-button-disabled svg {
  fill: #606060; }

.swiper-container--image .swiper-pagination-bullet-active {
  background: #009f3b; }

/*
イメージビュー

Markup:
<div class="swiper-outsider swiper-outsider--imageview">
  <div class="swiper-container js-swiper-imageview">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media-320x200.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media-320x200.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media-320x200.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media-320x200.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media-320x200.jpg" />
      </div>
    </div>
    <div class="swiper-pagination js-swiper-pagination-imageview"></div>
  </div>
  <div class="swiper-button-prev js-swiper-button-prev-imageview">
    <svg class="icon icon--size-mid">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#chevron-left"></use>
    </svg>
  </div>
  <div class="swiper-button-next js-swiper-button-next-imageview">
    <svg class="icon icon--size-mid">
      <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-icons.svg#chevron-right"></use>
    </svg>
  </div>
</div>


Styleguide 2.4.4.4
*/
.swiper-outsider--imageview {
  max-width: 1100px; }
  .swiper-outsider--imageview .swiper-container {
    width: 1100px;
    padding-bottom: 44px; }
    @media only screen and (max-width: 768px) {
      .swiper-outsider--imageview .swiper-container {
        width: 100%; } }
  .swiper-outsider--imageview .swiper-slide {
    text-align: center; }
    .swiper-outsider--imageview .swiper-slide > img {
      min-width: 100%; }
  .swiper-outsider--imageview .swiper-button-prev, .swiper-outsider--imageview .swiper-button-next {
    margin-top: -36px;
    fill: #009f3b; }
  .swiper-outsider--imageview .swiper-button-prev {
    left: 10px; }
  .swiper-outsider--imageview .swiper-button-next {
    right: 10px; }
  .swiper-outsider--imageview .swiper-button-disabled {
    opacity: 1; }
  .swiper-outsider--imageview .swiper-button-disabled svg {
    fill: #606060; }
  .swiper-outsider--imageview .swiper-pagination-bullet-active {
    background: #009f3b; }

/*
タグクラウド

Markup:
<div class="tagcloud">
  <div class="tagcloud__background"></div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">インターネット・コンピュータ</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">エンターテインメント</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">生活・文化社会・経済</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">健康と医療</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">ペット</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">グルメ</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">住まい</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">花・ガーデニング</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">育児旅行・観光</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">写真</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">手芸・ハンドクラフト</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">スポーツアウトドア</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">美容・ビューティー</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">ファッション</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">恋愛・結婚</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">ゲーム</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">乗り物</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">芸術</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">人文学問・科学</span>
  </div>
  <div class="tagcloud__item">
    <span class="tagcloud__text">日記</span>
  </div>
</div>

Styleguide 2.4.6
*/
.tagcloud {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .tagcloud {
      width: 100%;
      min-width: 100%; } }

.tagcloud__background {
  background-color: #ededed;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 1100px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .tagcloud__background {
      width: 100%; } }

.tagcloud__item {
  cursor: pointer;
  display: inline-block;
  text-align: left;
  position: relative;
  height: 50px;
  vertical-align: bottom;
  margin-right: 7px;
  margin-bottom: 7px; }
  @media only screen and (max-width: 768px) {
    .tagcloud__item {
      font-size: 14px !important;
      line-height: 1 !important;
      height: auto;
      margin-bottom: 7px; } }

.tagcloud__item input[type="radio"] {
  display: none; }

.tagcloud__text {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: inline-block;
  height: inherit; }
  @media only screen and (max-width: 768px) {
    .tagcloud__text {
      padding-top: 14px; } }

.tagcloud__item:hover > .tagcloud__text {
  color: #fff; }

.tagcloud__item--concierge-lg {
  color: #009ab6;
  font-size: 42px;
  line-height: 1.4; }

.tagcloud__item--about {
  color: #e44d27;
  font-size: 30px;
  line-height: 2.4; }

.tagcloud__item--contents {
  color: #f1a600;
  font-size: 24px;
  line-height: 3.2; }

.tagcloud__item--program {
  color: #009f3b;
  font-size: 20px;
  line-height: 4.0; }

.tagcloud__item--concierge-sm {
  color: #009ab6;
  font-size: 16px;
  line-height: 5.0; }

[v-cloak] > * {
  display: none; }

.v-enter-active, .v-leave-active {
  -webkit-transition: opacity 1s;
  transition: opacity 1s; }

.v-enter {
  opacity: 0; }

.v-enter-to {
  opacity: 1; }

.v-leave {
  opacity: 1; }

.v-leave-to {
  opacity: 0; }

/*--------------------------------------------------------------
# Compositions
--------------------------------------------------------------*/
/*
Compositions

Styleguide 3
*/
/*
リポート

Markup:
<div class="article">
  <div class="article__heading">
    <h1>
      アリババが1日で2.9兆円を売り上げたカラクリここにタイトルがはいります。ここにタイトルが入ります
    </h1>
  </div>
  <div class="article__meta">
    <div class="article__type">REPORT</div>
    <div class="article__date">2018.00.00</div>
  </div>
  <div class="article__body">
    <h2>
      ここに見出しがはいります。ここに見出しがはいります。ここに見出しがはいります。
      ここに見出しがはいります。ここに見出しがはいります。ここに見出しがはいります。
      ここに見出しがはいります。ここに見出しがはいります。
    </h2>
    <p>
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
      ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
    </p>
    <img src="<?php echo esc_url(home_url('/')); ?>images/sample_media.jpg">
  </div>
  <div class="article__meta">
    <div class="article__type">REPORT</div>
    <div class="article__date">2018.00.00</div>
    <div class="article__share">
      <div class="article__facebook">
        <div class="button button--white">
          <div class="button__icon">
            <svg class="icon">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-circle-down"></use>
            </svg>
          </div>
          <div class="button__text">
            facebook
          </div>
        </div>
      </div>
      <div class="article__twitter">
        <div class="button button--white">
          <div class="button__icon">
            <svg class="icon">
              <use xlink:href="<?php echo esc_url(home_url('/')); ?>images/sprite-bg-icons.svg#arrow-circle-down"></use>
            </svg>
          </div>
          <div class="button__text">
            twitter
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.article--article - リポート
.article--news - ニュース

Styleguide 3.1
*/
.article__meta {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 136px 1fr;
      grid-template-columns: 136px 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  background-color: #909090; }

.article__type {
  font-size: 16px;
  color: #fff;
  background-color: #f1a600;
  padding: 10px 0;
  text-align: center;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }

.article__date {
  font-size: 12px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  padding-left: 12px;
  color: #fff;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }

.article__share {
  position: absolute;
  top: 6px;
  right: 12px; }
  @media only screen and (max-width: 768px) {
    .article__share {
      top: 11px; } }

.article__facebook {
  display: inline-block;
  padding-right: 10px; }

.article__twitter {
  display: inline-block; }

.article__heading > h1 {
  font-size: 28px;
  line-height: 46px;
  background-color: #000;
  color: #fff;
  padding: 28px; }
  @media only screen and (max-width: 768px) {
    .article__heading > h1 {
      padding: 12px; } }

.article__body {
  background-color: #ededed;
  padding: 20px 40px;
  min-height: 100vh; }
  @media only screen and (max-width: 768px) {
    .article__body {
      padding: 20px 20px;
      min-height: auto; } }

.article__body > h1 {
  font-size: 20px;
  line-height: 32px;
  padding-bottom: 20px;
  font-weight: bold; }

.article__body > p {
  font-size: 14px;
  line-height: 25px;
  padding-bottom: 14px; }

.article__body img {
  width: 100%; }

.article__body a {
  text-decoration: underline; }

.article__body blockquote {
  font-style: italic;
  font-size: 13px;
  padding: 14px 28px; }

.article__body sup {
  font-size: 75.5%;
  vertical-align: super; }

.article__body sub {
  font-size: 75.5%;
  vertical-align: sub; }

.article__body strong {
  font-weight: bold; }

.article__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 24px 16px; }
  .article__link > a {
    color: #f1a600; }

/*
エラー

Markup:
<div class="error">
  <div class="error__heading">
    アリババが1日で2.9兆円を売り上げたカラクリここにタイトルがはいります。ここにタイトルが入ります
  </div>
  <div class="error__body">
    ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
    ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
  </div>
  <div class="error__footer">
    ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。
  </div>
</div>

Styleguide 3.2
*/
.error {
  min-height: calc(100vh - 290px); }

.error__heading {
  font-size: 33px;
  line-height: 58px;
  text-align: center;
  padding-bottom: 33px; }

.error__body {
  text-align: center;
  padding-bottom: 14px; }

.error__footer {
  text-align: center; }

.error__footer > a {
  text-decoration: underline; }

.footer {
  background-color: gray; }

.footer__copyright {
  color: white;
  background-color: #000; }

/*
フォーム

Markup:
<div class="form">
  <div class="form__heading">
    <div class='headingSection headingSection--other'>お問い合わせ</div>
  </div>
  <div class="form__description">
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。
    <br>
    <div style="text-align: right; color: #ff0000;">
      *は必須項目です。
    </div>
  </div>
  <div class="form__body">
    <div class="form__block">
      <div class="form__item">
        <label class="label label--required">お名前</label>
      </div>
      <div class="form__item">
        <input type="text" placeholder="姓"/>
        <input type="text" placeholder="名"/>
      </div>
    </div>
    <div class="form__block">
      <div class="form__item">
        <label class="label label--required">フリガナ</label>
      </div>
      <div class="form__item">
        <input type="text" placeholder="セイ"/>
        <input type="text" placeholder="メイ"/>
      </div>
    </div>
    <div class="form__block">
      <div class="form__item">
        <label class="label label--required">メールアドレス</label>
      </div>
      <div class="form__item">
        <input type="email" placeholder="waseda@waseda.jp" />
      </div>
    </div>
    <div class="form__block">
      <div class="form__item">
        <label class="label label--required">お問い合わせ内容</label>
      </div>
      <div class="form__item">
        <textarea placeholder="ここにお問い合わせ内容を入力ください" rows="10"></textarea>
      </div>
    </div>
  </div>
  <div class="form__footer">
    <input type="submit" value="お問い合わせ内容を確認" />
  </div>
</div>

Styleguide 3.4
*/
.form {
  padding: 14px;
  background-color: #ededed;
  width: 100%; }

.form__description {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 14px; }

.form__body {
  display: table;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 40px; }

.form__block {
  padding-bottom: 14px;
  display: table-row; }

.form__item {
  vertical-align: top;
  display: table-cell;
  padding: 12px 14px;
  min-width: 150px; }
  .form__item input {
    width: 100%;
    margin-bottom: 4px; }
  @media only screen and (max-width: 768px) {
    .form__item {
      display: inline-block; } }

.form__name {
  padding-bottom: 14px;
  display: inline; }
  .form__name input {
    width: 45%; }

.form__footer {
  text-align: center;
  padding-bottom: 40px; }
  .form__footer a {
    text-decoration: underline; }
  .form__footer strong {
    font-weight: bold; }

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
/*
layouts

Styleguide 4
*/
.l-header-pc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #fff; }
  @media only screen and (max-width: 768px) {
    .l-header-pc {
      display: none; } }

.l-header-pc__body {
  width: 1100px;
  height: 60px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.l-header-sp {
  display: none; }
  @media only screen and (max-width: 768px) {
    .l-header-sp {
      background: #fff;
      position: fixed;
      z-index: 3;
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }

.l-header-sp__item {
  position: relative;
  line-height: 0; }

.l-header-sp__menu {
  position: absolute;
  z-index: 4;
  top: 50px;
  width: 320px;
  display: none;
  visibility: hidden;
  opacity: 0;
  right: -320px; }

.l-wrapper {
  position: relative;
  z-index: 1;
  padding-top: 60px; }
  @media only screen and (max-width: 768px) {
    .l-wrapper {
      padding-top: 50px; } }

.l-container {
  width: 1100px;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .l-container {
      width: 100%;
      max-width: 414px; } }

.l-footer {
  width: 100%; }

.l-footer__scroll {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1100px;
  padding-right: 7px; }
  @media only screen and (max-width: 768px) {
    .l-footer__scroll {
      width: 95%;
      margin: 0 auto;
      padding-bottom: 14px;
      margin: 0 auto;
      max-width: 414px; } }

.l-footer__sitemap {
  margin: 0 auto;
  padding-bottom: 24px;
  width: 1100px; }
  @media only screen and (max-width: 768px) {
    .l-footer__sitemap {
      width: 95%;
      margin: 0 auto;
      margin: 0 auto;
      max-width: 414px; } }

.l-footer__copyright {
  background-color: #000;
  min-width: 1100px;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .l-footer__copyright {
      min-width: auto; } }

.l-section {
  margin-bottom: 40px; }
  @media only screen and (max-width: 768px) {
    .l-section {
      margin-bottom: 24px; } }

.l-section--gray {
  background-color: #ededed; }

.l-list {
  max-width: 1100px;
  min-width: 1000px; }
  @media only screen and (max-width: 768px) {
    .l-list {
      min-width: auto; } }

.l-list__item {
  margin-bottom: 40px; }
  @media only screen and (max-width: 768px) {
    .l-list__item {
      margin-bottom: 44px; } }

.l-box {
  position: relative;
  background-color: #ededed;
  padding: 0 24px 24px; }
  @media only screen and (max-width: 768px) {
    .l-box {
      padding: 7px 7px 14px; } }

.l-box__link {
  position: absolute;
  right: 0;
  top: 0; }
  @media only screen and (max-width: 768px) {
    .l-box__link {
      position: relative;
      text-align: center; } }

.l-box__body {
  padding: 0 24px 24px; }

.l-box-inner {
  background-color: #ddd;
  padding: 20px 16px; }

.l-pageNav {
  background-color: #ededed; }

.l-pageNav-inner {
  width: 1100px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media only screen and (max-width: 768px) {
    .l-pageNav-inner {
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin: 0 auto;
      max-width: 414px; } }

.l-pageNav__item {
  line-height: 0; }

.l-pageNav__item--start {
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-right: 1%; }
  @media only screen and (max-width: 768px) {
    .l-pageNav__item--start {
      padding-bottom: 2%; } }

.l-pageNav__item--end {
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding-left: 1%; }

.l-modal {
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 5;
  top: 30;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 85%;
  max-width: 780px;
  height: 80vh;
  overflow-y: scroll;
  background-color: rgba(255, 255, 255, .95);
  border: solid 3px #ededed; }

.l-secondary__keyvisual {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  width: 100%;
  min-width: 1100px;
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media only screen and (max-width: 768px) {
    .l-secondary__keyvisual {
      margin-bottom: 26px;
      height: auto;
      min-height: 100px;
      min-width: auto;
      margin: 0 auto;
      max-width: 414px; } }

.l-secondary__breadcrumb {
  padding-top: 32px;
  padding-left: 24px; }
  @media only screen and (max-width: 768px) {
    .l-secondary__breadcrumb {
      display: none; } }

.l-secondary__headline {
  padding-left: 24px;
  padding-bottom: 24px; }
  @media only screen and (max-width: 768px) {
    .l-secondary__headline {
      padding-bottom: 14px; } }

/*
グリッド

Markup:
<div class="grid {$modifiers}">
  <div class="grid__item">item1</div>
  <div class="grid__item">item2</div>
  <div class="grid__item">item3</div>
  <div class="grid__item">item4</div>
  <div class="grid__item">item5</div>
  <div class="grid__item">item6</div>
  <div class="grid__item">item7</div>
  <div class="grid__item">item8</div>
</div>

.grid--1 - 1列.
.grid--2 - 2列.
.grid--3 - 3列.
.grid--4 - 4列.

Styleguide 4.3
*/
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.grid__item {
  margin-right: 2%;
  margin-bottom: 14px; }

.grid--1 > .grid__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%; }
  .grid--1 > .grid__item:nth-child(1n + 1) {
    margin-right: 0; }
  @media only screen and (max-width: 768px) {
    .grid--1 > .grid__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%; }
      .grid--1 > .grid__item:nth-child(1n + 1) {
        margin-right: 0; } }

.grid--2 > .grid__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 49%;
          flex: 0 0 49%; }
  .grid--2 > .grid__item:nth-child(2n + 2) {
    margin-right: 0; }
  @media only screen and (max-width: 768px) {
    .grid--2 > .grid__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%; }
      .grid--2 > .grid__item:nth-child(1n + 1) {
        margin-right: 0; } }

.grid--3 > .grid__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%; }
  .grid--3 > .grid__item:nth-child(3n + 3) {
    margin-right: 0; }
  @media only screen and (max-width: 768px) {
    .grid--3 > .grid__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%; }
      .grid--3 > .grid__item:nth-child(1n + 1) {
        margin-right: 0; } }

.grid--4 > .grid__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 23.5%;
          flex: 0 0 23.5%; }
  .grid--4 > .grid__item:nth-child(4n + 4) {
    margin-right: 0; }
  @media only screen and (max-width: 768px) {
    .grid--4 > .grid__item {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 49%;
              flex: 0 0 49%; }
      .grid--4 > .grid__item:nth-child(2n + 2) {
        margin-right: 0; } }

/*
ヒーローイメージ

Markup:
<div class='heroimage-container'>
  <div class='heroimage-scroll'>
    <nav class='scrollDown js-flashing js-scroll'>
      <a class='scrollDown__item'>scroll</a>
      <a class='scrollDown__item'>
        <svg class="icon icon--size-mid">
          <use xlink:href="images/sprite-bg-icons.svg#arrow-circle-down"></use>
        </svg>
      </a>
    </nav>
  </div>
  <div class='heroimage'>
    <div class='heroimage__contents'>コンテンツ</div>
    <div class='heroimage__news'>ニュース</div>
    <div class='heroimage__course'>コース</div>
    <div class='heroimage__program'>プログラム</div>
  </div>
</div>

Styleguide 4.4
*/
.heroimage-container {
  position: relative;
  min-width: 1100px;
  margin-bottom: 24px; }
  @media only screen and (max-width: 768px) {
    .heroimage-container {
      min-width: auto;
      margin: 0 auto;
      max-width: 414px; } }

.heroimage-scroll {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 50px;
  height: 65px; }
  @media only screen and (max-width: 768px) {
    .heroimage-scroll {
      display: none; } }

.heroimage {
  width: 100%;
  z-index: 1;
  min-width: 1100px;
  height: calc(85vh - 60px); }
  @media only screen and (max-width: 768px) {
    .heroimage {
      height: 350px;
      min-width: auto; } }

/*
サイトマップ

Markup:
<div class='l-sitemap'>
  <div class='l-sitemap__about'>about</div>
  <div class='l-sitemap__concierge'>concierge</div>
  <div class='l-sitemap__program'>program</div>
  <div class='l-sitemap__contents'>contents</div>
  <div class='l-sitemap__link'>link</div>
  <div class='l-sitemap__contact'>contact</div>
  <div class='l-sitemap__logo'>logo</div>
</div>

Styleguide 4.5
*/
.l-sitemap {
  display: -ms-grid;
  display: grid;
  width: 100%;
  -ms-grid-columns: 25% 25% 25% 25%;
      grid-template-columns: 25% 25% 25% 25%;
  -ms-grid-rows: auto auto auto auto;
      grid-template-rows: auto auto auto auto; }
  @media only screen and (max-width: 768px) {
    .l-sitemap {
      -ms-grid-columns: 50% 50%;
          grid-template-columns: 50% 50%;
      -ms-grid-rows: auto auto auto auto auto auto;
          grid-template-rows: auto auto auto auto auto auto; } }

.l-sitemap__about {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  padding: 0 7px; }
  @media only screen and (max-width: 768px) {
    .l-sitemap__about {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2; } }

.l-sitemap__program {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1 / 5;
  padding: 0 7px;
  border-left: 1px solid #ededed; }
  @media only screen and (max-width: 768px) {
    .l-sitemap__program {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3;
      border: none; } }

.l-sitemap__contents {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  grid-row: 1 / 5;
  padding: 0 7px;
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed; }
  @media only screen and (max-width: 768px) {
    .l-sitemap__contents {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      grid-row: 3 / 4;
      border: none; } }

.l-sitemap__link {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  padding: 0 7px; }
  @media only screen and (max-width: 768px) {
    .l-sitemap__link {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 4;
      -ms-grid-row-span: 1;
      grid-row: 4 / 5; } }

.l-sitemap__contact {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  padding: 0 7px; }
  @media only screen and (max-width: 768px) {
    .l-sitemap__contact {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
      -ms-grid-row: 5;
      -ms-grid-row-span: 1;
      grid-row: 5 / 6; } }

.l-article {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 800px 300px;
      grid-template-columns: 800px 300px;
  -ms-grid-rows: auto;
      grid-template-rows: auto; }
  @media only screen and (max-width: 768px) {
    .l-article {
      -ms-grid-columns: 100%;
          grid-template-columns: 100%;
      -ms-grid-rows: auto auto;
          grid-template-rows: auto auto; } }

.l-article > main {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }
  @media only screen and (max-width: 768px) {
    .l-article > main {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2; } }

.l-article > aside {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2; }
  @media only screen and (max-width: 768px) {
    .l-article > aside {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3; } }

.l-sidebar {
  padding-left: 24px; }
  @media only screen and (max-width: 768px) {
    .l-sidebar {
      padding: 14px; } }

.l-sidebar__item {
  padding-bottom: 48px; }

.l-contents__list {
  padding-bottom: 16px; }

.l-contents__pagination {
  text-align: right; }
  @media only screen and (max-width: 768px) {
    .l-contents__pagination {
      text-align: left; } }

.l-tagcloud__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }

.l-tagcloud__search {
  padding-bottom: 24px; }
  @media only screen and (max-width: 768px) {
    .l-tagcloud__search {
      margin: 0 auto;
      max-width: 414px; } }

.l-tagcloud__option {
  text-align: right;
  padding-bottom: 7px; }

.l-tagcloud__note {
  display: inline-block; }
  @media only screen and (max-width: 768px) {
    .l-tagcloud__note {
      display: none; } }

.l-tagcloud__clear {
  display: inline-block; }

.l-tagcloud__result {
  padding-top: 24px;
  background-color: #ededed; }
  @media only screen and (max-width: 768px) {
    .l-tagcloud__result {
      background-color: #fff;
      padding-top: 12px;
      margin: 0 auto;
      max-width: 414px; } }

.l-tagcloud__inner {
  width: 1200px;
  height: 316px;
  margin: 0 auto; }

.l-link-button {
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: right; }
  @media only screen and (max-width: 768px) {
    .l-link-button {
      padding-top: 14px;
      padding-bottom: 20px;
      text-align: center; } }

.l-link-button--gray {
  background-color: #ededed; }
  @media only screen and (max-width: 768px) {
    .l-link-button--gray {
      background-color: transparent; } }

.l-program-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media only screen and (max-width: 768px) {
    .l-program-summary {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.l-program-summary__image {
  width: 240px;
  padding-bottom: 7px; }
  @media only screen and (max-width: 768px) {
    .l-program-summary__image {
      width: 140px; } }

.l-program-summary__text {
  width: 240px; }
  @media only screen and (max-width: 768px) {
    .l-program-summary__text {
      padding-left: 14px;
      width: 180px; } }

/*--------------------------------------------------------------
# utils
--------------------------------------------------------------*/
.onlySp {
  display: none; }
  @media only screen and (max-width: 768px) {
    .onlySp {
      display: block; } }

.onlyPc {
  display: block; }
  @media only screen and (max-width: 768px) {
    .onlyPc {
      display: none; } }

.onlySp-flex {
  display: none; }
  @media only screen and (max-width: 768px) {
    .onlySp-flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.onlyPc-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media only screen and (max-width: 768px) {
    .onlyPc-flex {
      display: none; } }

.onlySp-inb {
  display: none; }
  @media only screen and (max-width: 768px) {
    .onlySp-inb {
      display: inline-block; } }

.onlyPc-inb {
  display: inline-block; }
  @media only screen and (max-width: 768px) {
    .onlyPc-inb {
      display: none; } }

.onlySp-inflex {
  display: none; }
  @media only screen and (max-width: 768px) {
    .onlySp-inflex {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex; } }

.onlyPc-inflex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }
  @media only screen and (max-width: 768px) {
    .onlyPc-inflex {
      display: none; } }

.onlySp-tb-cell {
  display: none; }
  @media only screen and (max-width: 768px) {
    .onlySp-tb-cell {
      display: table-cell; } }

.onlyPc-tb-cell {
  display: table-cell; }
  @media only screen and (max-width: 768px) {
    .onlyPc-tb-cell {
      display: none; } }

.word-ba {
  word-break: break-all; }

/*--------------------------------------------------------------
# for debug
--------------------------------------------------------------*/
.sg-common {
  background-color: #fff;
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, sans-serif;
  color: #606060;
  font-size: 14px;
  line-height: 24.5px; }