@charset "UTF-8";
/**
 * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
 * 定義されているレイヤー以外にもThemeやScopeなどのレイヤーを追加することもできます。
 * 詳しくは[CSSコーディングルール](https://goo.gl/GAnCmB)を参照してください。
 */
/* =============================================================================
   #Foundation
   ========================================================================== */
/**
 * FoundationレイヤーではSassの変数や関数、`html`や`body`のような広範囲にわたるベーススタイル、
 * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
 * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
 * 変数と関数には接頭辞として`_`がついています。
 */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
/* #Base
   -------------------------------------------------------------------------- */
/**
 * Baseレイヤーにはプロジェクトにおける、基本的なベーススタイルを定義します。
 * 要素セレクタや属性セレクタなど、詳細度はできるかぎり低く保っておきます。
 * 基本的にclass属性は使用しません。
 */
/**
 * `padding`と`border`を`width`に含めます。
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html {
  box-sizing: border-box; }

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

body {
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.7;
  /* アンチエイリアスを指定する */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* メトリクスカーニングを指定する */
  font-kerning: normal; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Condensed", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.4;
  color: inherit; }

ul, ol {
  padding-left: 1.5rem; }

/**
 * ネストされたリストのマージンをリセットします。
 */
li > ul, li > ol {
  margin-bottom: 0; }

/**
 * `dt`と`dd`の左端を揃えます。
 */
dd {
  margin-left: 0; }

table {
  width: 100%; }

th {
  text-align: left; }

a {
  color: #000;
  transition: all 0.2s ease; }
  a:hover, a:active, a:focus {
    color: #000;
    opacity: 0.4;
    text-decoration: none; }

/**
 * フルードイメージにします。
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; }

code,
pre {
  font-family: Consolas, Menlo, Courier, monospace; }

/* =============================================================================
   #Layout
   ========================================================================== */
/**
 * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
 * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
 * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
 * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
 * プレフィックス（接頭辞）として`l-`をつけます。
 */
/* header
-------------------------------------------------------------------------- */
.l-header {
  width: 100%;
  z-index: 100;
  background-color: #fff; }

/* Footer
-------------------------------------------------------------------------- */
.l-footer {
  height: 288px;
  position: relative;
  z-index: 10; }
  .l-footer > .container {
    width: 100%; }
  @media (max-width: 767px) {
    .l-footer {
      height: 240px; } }

/* main
-------------------------------------------------------------------------- */
.l-main {
  padding-top: 0;
  background-color: #f9f9f9; }

/* #Sidebar
  -------------------------------------------------------------------------- */
/* =============================================================================
   #Object
   ========================================================================== */
/**
 * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
 * 拡張性などによって、3つのレイヤーにわけられます。
 * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
 * 1. Component（`c-`）
 * 2. Project（`p-`）
 * 3. Utility（`u-`）
 *
 * ランディングページのようにページ特有のスタイルを多く含む場合は、ページ専用のCSSファイルを作成します。
 * ページ専用のスタイルは、そのページにだけ読み込ませ、プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
 */
/* -----------------------------------------------------------------------------
   #Component
   -------------------------------------------------------------------------- */
/**
 * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
 * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
 * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
 * 例えばbuttonのベーススタイルやgridやmediaといったレイアウトパターンが該当します。
 * プレフィックス（接頭辞）として`c-`をつけます。
 */
/* Form parts
-------------------------------------------------------------------------- */
form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 14px;
  border: none !important;
  outline: none; }
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form textarea:focus {
    outline: 1px solid #ef816d;
    outline-offset: 0; }
form input[type="text"],
form input[type="email"] {
  height: 48px; }
@media (max-width: 767px) {
  form input[type="text"],
  form input[type="email"],
  form textarea {
    padding: 7px; } }

.c-input-label {
  color: #fff; }

.c-select {
  position: relative; }
  .c-select::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-image: url(../img/btn-pulldown.png);
    background-size: 48px;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: all 0.2s ease; }
  .c-select:hover::after {
    opacity: 0.8; }
  .c-select select {
    width: 100%;
    height: 48px;
    padding: 14px;
    border: none;
    outline: none;
    vertical-align: middle;
    background: #fff;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    letter-spacing: 0.1em; }
    .c-select select option {
      color: #000; }
  .c-select select::-ms-expand {
    display: none; }
  .c-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #828c9a; }
  @media (max-width: 767px) {
    .c-select {
      position: relative; }
      .c-select::after {
        width: 24px;
        height: 24px;
        background-size: 24px; }
      .c-select select {
        height: 24px;
        padding: 7px;
        line-height: 12px; } }

.c-radio {
  display: block;
  float: left;
  cursor: pointer;
  height: 48px;
  margin-bottom: 10px;
  margin-right: 30px; }
  .c-radio input[type="radio"] {
    display: none; }
  .c-radio .c-input-label {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center; }
    .c-radio .c-input-label::before {
      content: "";
      display: block;
      position: relative;
      top: 0;
      float: left;
      width: 36px;
      height: 48px;
      margin-right: 14px;
      background-image: url(../img/btn-radio_off.png);
      background-size: 36px;
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.2s ease; }
  .c-radio input[type="radio"]:checked + .c-input-label::before {
    background-image: url(../img/btn-radio_on.png); }
  @media (max-width: 767px) {
    .c-radio {
      height: 24px;
      margin-right: 15px; }
      .c-radio .c-input-label::before {
        width: 18px;
        height: 24px;
        margin-right: 7px;
        background-size: 18px; } }

.c-checkbox {
  display: block;
  float: left;
  cursor: pointer;
  height: 48px;
  margin-bottom: 0;
  margin-right: 30px; }
  .c-checkbox input[type="checkbox"] {
    display: none; }
  .c-checkbox .c-input-label {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    letter-spacing: 0.1em; }
    .c-checkbox .c-input-label::before {
      content: "";
      display: block;
      position: relative;
      top: 0;
      float: left;
      width: 36px;
      height: 48px;
      margin-right: 7px;
      background-image: url(../img/btn-checkbox_off.png);
      background-size: 36px;
      background-position: center;
      background-repeat: no-repeat;
      transition: all 0.2s ease; }
  .c-checkbox input[type="checkbox"]:checked + .c-input-label::before {
    background-image: url(../img/btn-checkbox_on.png); }
  @media (max-width: 767px) {
    .c-checkbox {
      height: 24px;
      margin-right: 15px; }
      .c-checkbox .c-input-label::before {
        width: 18px;
        height: 24px;
        background-size: 18px; } }

.c-file {
  padding-top: 14px;
  color: #fff; }
  .c-file .c-input-label {
    display: inline-block;
    padding-right: 14px;
    width: 140px; }
  .c-file input[type="file" i]::-webkit-file-upload-button {
    border: none;
    background-color: #fff;
    padding: 14px;
    outline: none; }
  @media (max-width: 767px) {
    .c-file {
      padding-top: 0; }
      .c-file .c-input-label {
        padding-right: 7px; }
      .c-file input[type="file" i]::-webkit-file-upload-button {
        padding: 7px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; } }

/* -----------------------------------------------------------------------------
   #Project
   -------------------------------------------------------------------------- */
/**
 * Projectレイヤーはプロジェクト固有のパターンで、コンテンツを構成する要素です。
 * 具体的なスタイルを持ち、複数のページで使い回せるコンポーネントです。
 * もし、このレイヤーの3箇所で同じパターンが使われていたら、Componentとしてまとめられないかを検討しましょう。
 * もし、ページ専用のスタイルで3箇所同じパターンが使われていたら、このProjectレイヤーでまとめられないかを検討しましょう。
 * プレフィックス（接頭辞）として`p-`をつけます。
 */
/* =============================================================================
   common
   ========================================================================== */
.p-contact input[type="text"],
.p-contact input[type="email"],
.p-contact textarea {
  border: 1px solid #e5e5e5 !important;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0; }

.p-header .p-site-branding__logo {
  width: 320px;
  margin: 60px auto; }
  .p-header .p-site-branding__logo img {
    width: 100%;
    height: auto; }
  @media (max-width: 767px) {
    .p-header .p-site-branding__logo {
      width: 240px;
      margin: 60px auto;
      line-height: 0;
      font-size: 16px;
      font-size: 1.14286rem; } }
.p-header .p-nav {
  background-color: rgba(255, 255, 255, 0.95);
  text-align: center;
  z-index: 100; }
  .p-header .p-nav .p-nav__menu {
    margin-bottom: 0;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: "Roboto Condensed", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 300; }
  .p-header .p-nav .p-nav__item {
    display: inline-block;
    margin-right: 60px;
    font-size: 15px;
    font-size: 1.07143rem;
    text-transform: uppercase;
    letter-spacing: 0.05em; }
    .p-header .p-nav .p-nav__item:last-child {
      margin-right: 0; }
    .p-header .p-nav .p-nav__item a {
      display: block;
      position: relative; }
      .p-header .p-nav .p-nav__item a::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -30px;
        height: 3px;
        width: 100%;
        background-color: #000;
        opacity: 0;
        transition: all 0.2s ease; }
      .p-header .p-nav .p-nav__item a:hover, .p-header .p-nav .p-nav__item a:active, .p-header .p-nav .p-nav__item a:focus {
        opacity: 1 !important; }
        .p-header .p-nav .p-nav__item a:hover::after, .p-header .p-nav .p-nav__item a:active::after, .p-header .p-nav .p-nav__item a:focus::after {
          opacity: 1; }
      .p-header .p-nav .p-nav__item a.active::after {
        opacity: 1; }
  .p-header .p-nav.js-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; }
  @media (max-width: 767px) {
    .p-header .p-nav {
      display: none;
      position: fixed;
      top: 0px;
      width: 100%;
      height: 100vh;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.95);
      text-align: center; }
      .p-header .p-nav div {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        height: 100vh; }
      .p-header .p-nav .p-nav__item {
        display: block;
        margin-right: 0; }
        .p-header .p-nav .p-nav__item a {
          padding: 15px;
          color: #fff; }
          .p-header .p-nav .p-nav__item a::after {
            content: none; }
          .p-header .p-nav .p-nav__item a.active {
            font-weight: bold; } }

.p-menu-btn {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 120; }
  @media (max-width: 767px) {
    .p-menu-btn {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center; } }
  .p-menu-btn a, .p-menu-btn a span {
    display: inline-block;
    transition: all 0.2s;
    box-sizing: border-box; }
  .p-menu-btn a {
    position: relative;
    width: 24px;
    height: 11px; }
    .p-menu-btn a span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #000; }
      .p-menu-btn a span:nth-of-type(1) {
        top: 0; }
      .p-menu-btn a span:nth-of-type(2) {
        top: 5px; }
      .p-menu-btn a span:nth-of-type(3) {
        bottom: 0; }
    .p-menu-btn a.is-open span:nth-of-type(1) {
      -webkit-transform: translateY(5px) rotate(-45deg);
      transform: translateY(5px) rotate(-45deg);
      background-color: #000; }
    .p-menu-btn a.is-open span:nth-of-type(2) {
      opacity: 0; }
    .p-menu-btn a.is-open span:nth-of-type(3) {
      -webkit-transform: translateY(-5px) rotate(45deg);
      transform: translateY(-5px) rotate(45deg);
      background-color: #000; }
    .p-menu-btn a:hover {
      opacity: 1; }

.p-pagetop {
  position: fixed;
  bottom: -80px;
  right: 15px;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 99999; }
  .p-pagetop img {
    width: 60px;
    height: auto; }
  .p-pagetop::after {
    position: absolute;
    content: "";
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
    top: 50%;
    right: 50%;
    margin-right: -9px;
    margin-top: -3px; }

.p-copy {
  padding: 60px 0;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  font-size: 12px;
  font-size: 0.85714rem; }

.p-item__body p {
  margin-bottom: 30px;
  line-height: 1.8;
  letter-spacing: 0.05em; }

.p-btn {
  display: inline-block;
  width: 240px;
  margin: 30px auto;
  padding: 10px 15px;
  border: 1px solid #000;
  text-align: center; }
  .p-btn::after {
    display: block;
    float: right;
    content: "\f105";
    font-family: FontAwesome; }

.p-section {
  padding: 60px 0; }
  @media (max-width: 767px) {
    .p-section {
      padding: 60px 0; } }
  .p-section:nth-child(even) {
    background-color: #fff; }
  .p-section .p-item__title {
    position: relative;
    margin-bottom: 0;
    font-size: 24px;
    font-size: 1.71429rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em; }
    .p-section .p-item__title span {
      display: block;
      padding-top: 30px;
      font-size: 14px;
      font-size: 1rem; }
    .p-section .p-item__title::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -30px;
      left: 50%;
      margin-left: -30px;
      height: 1px;
      width: 60px;
      background-color: #000; }
  .p-section .p-item__body {
    padding: 90px 0 0 0; }

.p-about .p-item__body {
  text-align: center; }
  .p-about .p-item__body p {
    font-size: 16px;
    font-size: 1.14286rem; }

.p-frame {
  padding: 30px;
  height: 100%;
  border: 1px solid #e5e5e5;
  background-color: #fff; }
  .p-frame .p-frame__title {
    margin-bottom: 15px;
    font-size: 17.5px;
    font-size: 1.25rem;
    text-align: center; }

.p-for-customer [class^="col-"] {
  margin-bottom: 15px; }

.p-article a {
  display: block; }
  .p-article a:hover {
    opacity: 0.8; }
.p-article p {
  font-size: 12px;
  font-size: 0.85714rem;
  color: #999; }
.p-article .p-article__title {
  font-size: 14px;
  font-size: 1rem; }
.p-article .p-article__date {
  font-size: 12px;
  font-size: 0.85714rem;
  color: #999; }

.p-works .p-lead {
  margin-bottom: 60px; }

.p-works-list {
  list-style: none;
  padding-left: 0; }
  .p-works-list .p-works-item {
    margin-bottom: 30px; }
  .p-works-list .p-works-item__title {
    font-size: 15px;
    font-size: 1.07143rem; }
  .p-works-list .p-works-item__image {
    width: 100%; }
  .p-works-list p {
    margin-bottom: 0; }
    .p-works-list p a {
      text-decoration: underline; }
  .p-works-list .p-part dd, .p-works-list .p-part dt {
    font-size: 12px;
    font-size: 0.85714rem;
    color: #999; }
  .p-works-list .p-part dt {
    font-weight: normal; }

.p-works-excerpt {
  padding-left: 0;
  list-style: none; }
  .p-works-excerpt .p-works-excerpt-item {
    margin-bottom: 30px; }
  .p-works-excerpt .p-works-excerpt-item__title {
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    font-size: 1rem; }
  .p-works-excerpt .p-works-item {
    margin-bottom: 15px; }
    .p-works-excerpt .p-works-item .p-works-item__title {
      font-size: 14px;
      font-size: 1rem; }
    .p-works-excerpt .p-works-item p {
      font-size: 12px;
      font-size: 0.85714rem;
      color: #999; }

.p-btn-submit {
  margin: 30px auto;
  padding: 10px 15px;
  width: 240px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #000;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.2s ease;
  cursor: pointer; }

/* -----------------------------------------------------------------------------
   #Utility
   -------------------------------------------------------------------------- */
/**
 * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
 * `10px`のような絶対値を指定するより、`1rem`や`25%`のような相対値をもたせることを推奨します。
 * 確実にスタイルを反映させるために`!important`を使用します。
 * プレフィックス（接頭辞）として`u-`をつけます。
 */
/* utility
 -------------------------------------------------------------------------- */
.u-sp-visible-pc-hide {
  display: none !important; }
  @media (max-width: 767px) {
    .u-sp-visible-pc-hide {
      display: block !important; } }

.u-pc-visible-sp-hide {
  display: block !important; }
  @media (max-width: 767px) {
    .u-pc-visible-sp-hide {
      display: none !important; } }

.u-tab-visible-pc-hide {
  display: none !important; }
  @media (max-width: 991px) {
    .u-tab-visible-pc-hide {
      display: block !important; } }

.u-pc-visible-tab-hide {
  display: block !important; }
  @media (max-width: 991px) {
    .u-pc-visible-tab-hide {
      display: none !important; } }

.u-font--1 {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Noto Sans JP", Meiryo, sans-serif; }

.u-font--2 {
  font-family: "Roboto Condensed", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Noto Sans JP", Meiryo, sans-serif; }

/* -----------------------------------------------------------------------------
   #Text
   -------------------------------------------------------------------------- */
/*doc
---
title: text
name: text
categories: [utility]
---

テキストのスタイルを指定する汎用クラスです。

```block
<p class="u-text-light">font-weight 300</p>
<p class="u-text-normal">font-weight 400</p>
<p class="u-text-bold">font-weight 600</p>
<p class="u-text-indent">先頭の1文字目を1文字分字下げします。</p>
<p class="u-text-note">2行目以降の1文字目を1文字分字下げします。<br>2行目以降の1文字目を1文字分字下げします。</p>
<p class="u-text-nowrap">テキストを折り返させません。横幅を超えても、このテキストは折り返さずに表示されます。</p>
<p class="u-text-breakword">テキストを折り返させます。長文になっても、このテキストは必ず折り返して表示されます。</p>
<p class="u-text-justify">テキストを両端揃え（均等割り付け）させます。通常のテキストと文字間が違うのが分かると思います。</p>
<p class="u-text-none">記述した通りに表示します。</p>
<p class="u-text-lowercase">abcdEFGH すべての英単語を小文字で表示します。</p>
<p class="u-text-uppercase">abcdEFGH すべての英単語を大文字で表示します。</p>
<p class="u-text-capitalize">abcdEFGH 英単語の先頭を大文字で表示します。</p>
<p class="u-text-smallcaps">abcdEFGH スモールキャップ（小文字と同じ高さで作られた大文字）で表示します。</p>
<p class="u-text-vertical">abcdEFGH 縦書きで表示します。</p>
<p class="u-text-vertical u-text-vertical--upright">abcdEFGH 英文も縦書きにする場合はModifierを指定します。</p>
<p class="u-text-right">text-align right</p>
<p class="u-text-center">text-align center</p>
<p class="u-text-left">text-align left</p>
<p class="u-text-top">vertical-align top</p>
<p class="u-text-middle">vertical-align middle</p>
<p class="u-text-bottom">vertical-align bottom</p>
```
*/
/* 文字に余白付きの下線を引きます */
.u-text-underline {
  padding-bottom: 3px;
  border-bottom: 1px solid #000; }

/* 文字色を指定します。 */
.u-text-color__orange {
  color: #ef816d !important; }

/* font-weightを指定します。 */
.u-text-light {
  font-weight: 300 !important; }

.u-text-normal {
  font-weight: 500 !important; }

.u-text-bold {
  font-weight: 600 !important; }

/* 先頭の1文字目を1文字分字下げします。 */
.u-text-indent {
  text-indent: 1em !important; }

/* 2行目以降の1文字目を1文字分字下げします。 */
.u-text-note {
  margin-left: 1em !important;
  text-indent: -1em !important; }

/* テキストを改行させません。 */
.u-text-nowrap {
  white-space: nowrap !important; }

/* テキストを改行させます。 */
.u-text-breakword {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important; }

/* テキストを両端揃えさせます。 */
.u-text-justify {
  text-align: justify !important;
  text-justify: inter-ideograph !important; }

/* 記述した通りに表示します。 */
.u-text-none {
  text-transform: none !important; }

/* すべての英単語を小文字にします。 */
.u-text-lowercase {
  text-transform: lowercase !important; }

/* すべての英単語を大文字にします。 */
.u-text-uppercase {
  text-transform: uppercase !important; }

/* 英単語の先頭を大文字にします。 */
.u-text-capitalize {
  text-transform: capitalize !important; }

/* スモールキャップ（小文字と同じ高さで作られた大文字）にします。 */
.u-text-smallcaps {
  font-variant: small-caps !important; }

/* 縦書きにします。 */
.u-text-vertical {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important; }

/* 英文も縦書きにする場合はModifierを指定します。 */
.u-text-vertical--upright {
  text-orientation: upright !important; }

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

.u-text-center {
  text-align: center !important; }

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

.u-text-top {
  vertical-align: top !important; }

.u-text-middle {
  vertical-align: middle !important; }

.u-text-bottom {
  vertical-align: bottom !important; }

/* -----------------------------------------------------------------------------
   #Scope
   -------------------------------------------------------------------------- */
/**
 * ブログなどの投稿部分のようなクラス属性をすべてに振り分けることが適切でない場合に使います。
 * このレイヤーでは`.foo p`のような要素セレクタとの結合子を使うことができます。
 * プレフィックス（接頭辞）として`s-`をつけます。
 */

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