@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese");
/*
Theme Name: T&S Offical Site Theme
Author: T&S inc.
Author URI: https://t8s.jp/
Description: T&S Offical Site Theme is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme・™s soft colors and eye-catching ・” yet timeless ・” design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: t8s
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

T&S Offical Site Theme WordPress Theme, (C) 2020 WordPress.org
T&S Offical Site Theme is distributed under the terms of the GNU GPL.
*/
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, /* 1 */
menu {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@font-face {
  font-family: "Druk-Wide";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/Druk-Wide-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "Druk-Wide";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/Druk-Wide-Medium.woff2) format("woff2");
}
body {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  color: #5A5D6C;
  letter-spacing: 0.075em;
  transition: z-index 0ms 5.28455ms;
  background: #fff;
  margin: 0;
}
body a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
body a:hover,
body a:focus,
body a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
body textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
body ul, body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body dl, body dt, body dd, body li {
  margin: 0;
  padding: 0;
}
body img {
  max-width: 100%;
}
body html {
  box-sizing: border-box;
}
body *,
body *::before,
body *::after {
  box-sizing: border-box;
}
body img {
  width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
body {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  color: #5A5D6C;
  letter-spacing: 0.075em;
  transition: z-index 0ms 5.28455ms;
  background: #fff;
  margin: 0;
}
body a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
body a:hover,
body a:focus,
body a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
body textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
body ul, body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body dl, body dt, body dd, body li {
  margin: 0;
  padding: 0;
}
body img {
  max-width: 100%;
}
body html {
  box-sizing: border-box;
}
body *,
body *::before,
body *::after {
  box-sizing: border-box;
}
body img {
  width: 100%;
}
a {
  text-decoration: none;
}
pre {
  background-color: transparent;
  border: none;
  padding: 16px 0;
}
p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
* {
  box-sizing: border-box;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
見出し

ページ内で見出しとして機能する要素のスタイル群です。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>
</div>

Styleguide 1.1
*/
/*
見出し

T&Sで使用するh1~h6の標準設定

Styleguide 1.1.1
*/
h2 {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
h3 {
  margin: 0 0 12px;
  color: #2C2C2E;
  font-size: 18px;
  line-height: 1.8;
}
h4 {
  margin: 0 0 20px;
  color: #2C2C2E;
  font-size: 16px;
  line-height: 1.8;
}
h1, h2, h3, h4 {
  font-feature-settings: "palt";
  -ms-font-feature-settings: "pkna";
}
/*
タイプライター風 見出し

Markup:
.typewriter-heading
  Division

Styleguide 1.1.2
*/
.typewriter-heading {
  position: relative;
  z-index: 0;
  max-width: 564px;
  height: 20vw;
  margin: 0 0 20px;
  padding: 4vw 5vw;
  background: url(/assets/images/common/typewriter_frame.svg) center center no-repeat;
  background-size: 100% auto;
  color: #000;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  transition: all 1s 0.5s;
}
.dark-mode .typewriter-heading {
  color: #fff;
}
.division-section .typewriter-heading {
  margin-bottom: 40px;
}
.typewriter-heading::after, .typewriter-heading::before {
  content: "";
  position: absolute;
  display: block;
  top: 20%;
  left: 0;
  z-index: 1;
  width: 2.5vw;
  height: 2.5vw;
  background-color: #D1CDC3;
}
.typewriter-heading::before {
  top: calc(80% - 2.5vw);
  left: calc(100% - 2.5vw);
}
.typewriter-heading span {
  border-right: 0.05em solid currentColor;
  animation: caret 1s steps(1) infinite;
  transition: opacity 1s 2s;
}
.typewriter-heading.inview {
  opacity: 1;
}
.typewriter-heading.inview::after {
  animation: 2s ease-out 0.5s 1 leftSquare-sp;
}
.typewriter-heading.inview::before {
  animation: 2s ease-out 0.5s 1 rightSquare-sp;
}
.typewriter-heading.animated span {
  opacity: 0;
}
.typewriter-heading.text-center {
  margin-right: auto;
  margin-left: auto;
}
/*
スクロール見出し

スクロールに応じて左右に動く見出しです

Markup:
.scroll-heading
  .scroll-heading__title
    .scroll-heading__title--txt
      New Business

Styleguide 1.1.3
*/
.scroll-heading {
  display: none;
}
/*
ナンバリング見出し

Markup:
.numbering-heading  

Styleguide 1.1.4
*/
.numbering-heading {
  position: relative;
  margin: 80px 0 20px;
  color: #2C2C2E;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  counter-increment: numbering;
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.dark-mode .numbering-heading {
  color: #fff;
}
.numbering-heading span {
  position: relative;
  z-index: 1;
}
.numbering-heading::before {
  content: counter(numbering, decimal-leading-zero);
  position: absolute;
  display: block;
  top: -60px;
  left: 0;
  z-index: 0;
  background-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-text-stroke: 1px #000;
  color: transparent;
  font-size: 96px;
  line-height: 1;
  cursor: pointer;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.dark-mode .numbering-heading::before {
  -webkit-text-stroke: 1px #696969;
}
.numbering-heading.active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-text-stroke: 0.5px #000;
  color: #fff;
}
.numbering-heading.active::before {
  -webkit-text-stroke: 1px #fff;
  color: #000;
}
.dark-mode .numbering-heading.active {
  -webkit-text-stroke: 0.5px #fff;
  color: #000;
}
.dark-mode .numbering-heading.active::before {
  -webkit-text-stroke: 1px #696969;
  color: #696969;
}
/*
アウトライン見出し

Styleguide 1.1.5
*/
.outline-heading {
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-text-stroke: 0.5px #000;
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
文字装飾

文字装飾をするためのスタイル群です。

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

テキストリンクのスタイルです。

Markup:
a(href="#").link さくらのクラウド

Styleguide 1.2.1
*/
a, .link {
  text-decoration: none;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: all 0.4s;
}
a span, .link span {
  background: linear-gradient(currentColor, currentColor) right bottom/0 1px no-repeat;
  transition: background-size 0.4s;
}
a *:focus, .link *:focus {
  outline: none;
}
a:hover, .link:hover {
  text-decoration: none;
}
a:hover span, .link:hover span {
  background-position: left bottom;
  background-size: 100% 1px;
  color: #9B0000;
}
a.underline, .link.underline {
  text-decoration: underline;
}
a.underline:hover, a.underline:active, a.underline:focus, .link.underline:hover, .link.underline:active, .link.underline:focus {
  color: #9B0000;
  text-decoration: underline;
}
/*
テキスト（太字）

テキストを太くするためのスタイルです。

Markup:
p.font-bold この季節にぴったりな商品をご用意しました

Styleguide 1.2.2
*/
.font-bold {
  color: #000;
  font-weight: 700;
}
h1, h2, h3, h4, h5, h6, strong {
  font-weight: 700;
}
/*
テキスト（グレー）

テキストをグレーにするためのスタイルです。

Markup:
p.color-grey 青色が美しい職人が仕上げた吹きガラス

Styleguide 1.2.3
*/
.color-grey {
  color: #9a947e;
}
.color-black {
  color: #000;
}
/*
テキスト（赤）

テキストを赤にするためのスタイルです。

Markup:
p.color-red ¥ 2,728 税込
p.color-accent ¥ 2,728 税込

Styleguide 1.2.4
*/
.color-red {
  color: #D30E18;
}
.color-accent {
  color: #9B0000;
}
/*
フォントサイズ

フォントサイズを指定するためのスタイルです。

Markup:
.font-size-1 さわやかな日差しが過ごしやすい季節
.font-size-2 さわやかな日差しが過ごしやすい季節
.font-size-3 さわやかな日差しが過ごしやすい季節
.font-size-4 さわやかな日差しが過ごしやすい季節
.font-size-5 さわやかな日差しが過ごしやすい季節
.font-size-6 さわやかな日差しが過ごしやすい季節


Styleguide 1.2.5
*/
.font-size-1 {
  font-size: 12px;
}
.font-size-2 {
  font-size: 14px;
}
.font-size-3 {
  font-size: 16px;
}
.font-size-4 {
  font-size: 20px;
}
.font-size-5 {
  font-size: 32px;
}
.font-size-6 {
  font-size: 40px;
}
/*
テキスト水平位置

テキストをセンタリングするためのスタイルです。

Markup:
p.text-ac さわやかな日差しが過ごしやすい季節

Styleguide 1.2.6
*/
.text-ac {
  text-align: center;
}
/*
テキストの位置

テキストや、入れ子にしたインライン要素を
「左揃え」「中央揃え」「右揃え」に設定することができます。

Markup:
h3 左揃え
p.text-left
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 中央揃え
p.text-center
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?
br
h3 右揃え
p.text-right
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt praesentium repellat sapiente suscipit, unde veniam! Doloribus error, expedita id impedit iusto qui sint totam? Aspernatur error facere possimus quam quos?

Styleguide 1.2.7
*/
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
/*
テキスト下部のスペース

テキストの下に余白を追加することができます。 .para-normalで16pxの余白をつけることができます。

Markup:
p.para-normal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。
p.para-normal 万一、ご確認メールが届かない場合は、トラブルの可能性もありますので大変お手数ではございますがもう一度お問い合わせいただくか、お電話にてお問い合わせくださいませ。

Styleguide 1.2.8
*/
.para-normal {
  margin-bottom: 16px;
}
/*
フォント

部分的なフォント指定をすることができます。

Markup:
p.ariel You are what you eat.

Styleguide 1.2.9
*/
.ariel {
  font-family: "Ariel";
}
.en {
  font-family: "Druk-Wide";
}
.ja {
  font-family: "Noto Sans JP", sans-serif;
}
/*
自動改行

Styleguide 1.2.10
*/
.nowrap {
  white-space: nowrap;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
リスト

シンプルなリストを構成するためのスタイル群です。

sg-wrapper:
<div class="role">
  <sg-wrapper-content/>
</div>

Styleguide 1.3
*/
/*
ボーダーリスト

線が添えられたリストを表示します。

Markup:
ul.border-list
  li: p lorem
  li: p lorem
  li: p lorem


Styleguide 1.3.3
*/
.border-list {
  width: 100%;
  list-style: none;
  margin-bottom: 40px;
  padding: 0;
}
.border-list > * {
  border-bottom: 1px solid #D1CDC3;
}
.border-list > *:nth-child(1) {
  border-top: 1px solid #D1CDC3;
}
.border-list dl {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
}
.border-list dl.column {
  flex-direction: column;
}
.border-list dl.column dt, .border-list dl.column dd {
  width: 100%;
}
.border-list dl.column dt {
  padding-bottom: 0.4em;
}
.border-list dl.column dt br {
  display: none;
}
.border-list dl.column dd {
  padding-top: 0.4em;
}
.border-list dt {
  width: 25%;
  padding: 1.4em 0;
  color: #2C2C2E;
  font-weight: 700;
}
.border-list dd {
  width: 75%;
  padding: 1.4em 0;
}
.list-marker-disc {
  list-style-type: disc;
}
.list-marker-circle {
  list-style-type: circle;
}
/*
ボタンサイズ

ボタンサイズを変更するスタイル群です。

sg-wrapper:
<div class="role">
  <sg-wrapper-content/>
</div>

Styleguide 2.1
*/
/*
通常ボタン

インラインの要素としてボタンを定義出来ます。


Markup:
.inlineBtn 住所検索
.inlineBtn--primary もっと見る
.inlineBtn--action カートに入れる
.inlineBtn--cancel キャンセル

Styleguide 2.1.1
*/
.inlineBtn {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #fff;
  color: #2C2C2E;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
}
.inlineBtn:focus, .inlineBtn.focus, .inlineBtn:active:focus, .inlineBtn:active.focus, .inlineBtn.active:focus, .inlineBtn.active.focus {
  outline: none;
}
.inlineBtn:hover, .inlineBtn:focus, .inlineBtn.focus {
  color: #2C2C2E;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.inlineBtn:active, .inlineBtn.active {
  outline: 0;
  background-image: none;
}
.inlineBtn.comingsoon {
  pointer-events: none;
}
.inlineBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.inlineBtn--primary {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #D30E18;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
}
.inlineBtn--primary:focus, .inlineBtn--primary.focus, .inlineBtn--primary:active:focus, .inlineBtn--primary:active.focus, .inlineBtn--primary.active:focus, .inlineBtn--primary.active.focus {
  outline: none;
}
.inlineBtn--primary:hover, .inlineBtn--primary:focus, .inlineBtn--primary.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.inlineBtn--primary:active, .inlineBtn--primary.active {
  outline: 0;
  background-image: none;
}
.inlineBtn--primary.comingsoon {
  pointer-events: none;
}
.inlineBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.inlineBtn--action {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #000;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
}
.inlineBtn--action:focus, .inlineBtn--action.focus, .inlineBtn--action:active:focus, .inlineBtn--action:active.focus, .inlineBtn--action.active:focus, .inlineBtn--action.active.focus {
  outline: none;
}
.inlineBtn--action:hover, .inlineBtn--action:focus, .inlineBtn--action.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.inlineBtn--action:active, .inlineBtn--action.active {
  outline: 0;
  background-image: none;
}
.inlineBtn--action.comingsoon {
  pointer-events: none;
}
.inlineBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.inlineBtn--cancel {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #9499A4;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
}
.inlineBtn--cancel:focus, .inlineBtn--cancel.focus, .inlineBtn--cancel:active:focus, .inlineBtn--cancel:active.focus, .inlineBtn--cancel.active:focus, .inlineBtn--cancel.active.focus {
  outline: none;
}
.inlineBtn--cancel:hover, .inlineBtn--cancel:focus, .inlineBtn--cancel.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.inlineBtn--cancel:active, .inlineBtn--cancel.active {
  outline: 0;
  background-image: none;
}
.inlineBtn--cancel.comingsoon {
  pointer-events: none;
}
.inlineBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.inlineBtn--reverse {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #fff;
  color: #D30E18;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  border: 1px solid #D30E18;
  border-radius: 5px;
  font-size: 14px;
}
.inlineBtn--reverse:focus, .inlineBtn--reverse.focus, .inlineBtn--reverse:active:focus, .inlineBtn--reverse:active.focus, .inlineBtn--reverse.active:focus, .inlineBtn--reverse.active.focus {
  outline: none;
}
.inlineBtn--reverse:hover, .inlineBtn--reverse:focus, .inlineBtn--reverse.focus {
  color: #D30E18;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.inlineBtn--reverse:active, .inlineBtn--reverse.active {
  outline: 0;
  background-image: none;
}
.inlineBtn--reverse.comingsoon {
  pointer-events: none;
}
.inlineBtn--reverse .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.inlineBtn--reverse:hover, .inlineBtn--reverse:focus {
  background-color: #D30E18;
  color: #fff;
}
/*
ブロックボタン（全幅）

ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。

ex [商品詳細ページ　カートボタン部分](http://demo3.cube.net/products/detail/30)

Markup:
p: .blockBtn 住所検索
p: .blockBtn--primary もっと見る
p: .blockBtn--action カートに入れる
p: .blockBtn--cancel キャンセル

Styleguide 2.1.2
*/
.blockBtn {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #fff;
  color: #2C2C2E;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
.blockBtn:focus, .blockBtn.focus, .blockBtn:active:focus, .blockBtn:active.focus, .blockBtn.active:focus, .blockBtn.active.focus {
  outline: none;
}
.blockBtn:hover, .blockBtn:focus, .blockBtn.focus {
  color: #2C2C2E;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.blockBtn:active, .blockBtn.active {
  outline: 0;
  background-image: none;
}
.blockBtn.comingsoon {
  pointer-events: none;
}
.blockBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.blockBtn--primary {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #D30E18;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
.blockBtn--primary:focus, .blockBtn--primary.focus, .blockBtn--primary:active:focus, .blockBtn--primary:active.focus, .blockBtn--primary.active:focus, .blockBtn--primary.active.focus {
  outline: none;
}
.blockBtn--primary:hover, .blockBtn--primary:focus, .blockBtn--primary.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.blockBtn--primary:active, .blockBtn--primary.active {
  outline: 0;
  background-image: none;
}
.blockBtn--primary.comingsoon {
  pointer-events: none;
}
.blockBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.blockBtn--action {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #000;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
.blockBtn--action:focus, .blockBtn--action.focus, .blockBtn--action:active:focus, .blockBtn--action:active.focus, .blockBtn--action.active:focus, .blockBtn--action.active.focus {
  outline: none;
}
.blockBtn--action:hover, .blockBtn--action:focus, .blockBtn--action.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.blockBtn--action:active, .blockBtn--action.active {
  outline: 0;
  background-image: none;
}
.blockBtn--action.comingsoon {
  pointer-events: none;
}
.blockBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.blockBtn--cancel {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #9499A4;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}
.blockBtn--cancel:focus, .blockBtn--cancel.focus, .blockBtn--cancel:active:focus, .blockBtn--cancel:active.focus, .blockBtn--cancel.active:focus, .blockBtn--cancel.active.focus {
  outline: none;
}
.blockBtn--cancel:hover, .blockBtn--cancel:focus, .blockBtn--cancel.focus {
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.blockBtn--cancel:active, .blockBtn--cancel.active {
  outline: 0;
  background-image: none;
}
.blockBtn--cancel.comingsoon {
  pointer-events: none;
}
.blockBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.blockBtn--reverse {
  display: inline-block;
  min-width: 186px;
  margin: 0 auto;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  background-color: #fff;
  color: #D30E18;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  line-height: 1;
  transition: 0.3s ease-in-out;
  border: 1px solid #D30E18;
  border-radius: 5px;
  font-size: 14px;
}
.blockBtn--reverse:focus, .blockBtn--reverse.focus, .blockBtn--reverse:active:focus, .blockBtn--reverse:active.focus, .blockBtn--reverse.active:focus, .blockBtn--reverse.active.focus {
  outline: none;
}
.blockBtn--reverse:hover, .blockBtn--reverse:focus, .blockBtn--reverse.focus {
  color: #D30E18;
  text-decoration: none;
  filter: drop-shadow(1px 2px 2px rgba(182, 183, 184, 0.6)) drop-shadow(2px 2px 4px rgba(163, 166, 170, 0.76)) drop-shadow(5px -5px 12px #FFFFFF);
}
.blockBtn--reverse:active, .blockBtn--reverse.active {
  outline: 0;
  background-image: none;
}
.blockBtn--reverse.comingsoon {
  pointer-events: none;
}
.blockBtn--reverse .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.blockBtn--reverse:hover, .blockBtn--reverse:focus {
  background-color: #D30E18;
  color: #fff;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 3.1
*/
/*
フォーム

`.form` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。

Markup:
p.form
  input(type="number")
p.form
  textarea(rows="6")

Styleguide 3.1.1
*/
.form input[type=radio], .birth input[type=radio], .telInput input[type=radio], .zipInput input[type=radio], .numberInput input[type=radio], .halfInput input[type=radio],
.form input[type=checkbox],
.birth input[type=checkbox],
.telInput input[type=checkbox],
.zipInput input[type=checkbox],
.numberInput input[type=checkbox],
.halfInput input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.form input[type=file], .birth input[type=file], .telInput input[type=file], .zipInput input[type=file], .numberInput input[type=file], .halfInput input[type=file] {
  display: block;
}
.form input[type=range], .birth input[type=range], .telInput input[type=range], .zipInput input[type=range], .numberInput input[type=range], .halfInput input[type=range] {
  display: block;
  width: 100%;
}
.form select[multiple], .birth select[multiple], .telInput select[multiple], .zipInput select[multiple], .numberInput select[multiple], .halfInput select[multiple],
.form select[size],
.birth select[size],
.telInput select[size],
.zipInput select[size],
.numberInput select[size],
.halfInput select[size] {
  height: auto;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder {
  color: #D1CDC3;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder {
  color: #D1CDC3;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .birth input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid {
  background-color: #fff;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .birth input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .form input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .birth input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], fieldset[disabled] .form input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  opacity: 1;
}
.form select, .birth select, .telInput select, .zipInput select, .numberInput select, .halfInput select {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
  padding: 16px;
  background-color: #F9F8F8;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200L7%208L14%200H0Z%22%20fill%3D%22%23D1CDC3%22%2F%3E%3C%2Fsvg%3E");
  background-position: calc(100% - 16px) 50%;
  background-repeat: no-repeat;
}
.form select::-ms-expand, .birth select::-ms-expand, .telInput select::-ms-expand, .zipInput select::-ms-expand, .numberInput select::-ms-expand, .halfInput select::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form select::-moz-placeholder, .birth select::-moz-placeholder, .telInput select::-moz-placeholder, .zipInput select::-moz-placeholder, .numberInput select::-moz-placeholder, .halfInput select::-moz-placeholder {
  color: #D1CDC3;
}
.form select::placeholder, .birth select::placeholder, .telInput select::placeholder, .zipInput select::placeholder, .numberInput select::placeholder, .halfInput select::placeholder {
  color: #D1CDC3;
}
.form select:valid, .birth select:valid, .telInput select:valid, .zipInput select:valid, .numberInput select:valid, .halfInput select:valid {
  background-color: #fff;
}
.form select[disabled], .birth select[disabled], .telInput select[disabled], .zipInput select[disabled], .numberInput select[disabled], .halfInput select[disabled], .form select[readonly], .birth select[readonly], .telInput select[readonly], .zipInput select[readonly], .numberInput select[readonly], .halfInput select[readonly], fieldset[disabled] .form select, fieldset[disabled] .birth select, fieldset[disabled] .telInput select, fieldset[disabled] .zipInput select, fieldset[disabled] .numberInput select, fieldset[disabled] .halfInput select {
  opacity: 1;
}
.form select[multiple], .birth select[multiple], .telInput select[multiple], .zipInput select[multiple], .numberInput select[multiple], .halfInput select[multiple] {
  background-color: #F9F8F8;
  background-image: none;
  height: auto;
}
.form select:focus, .birth select:focus, .telInput select:focus, .zipInput select:focus, .numberInput select:focus, .halfInput select:focus {
  box-shadow: none;
  border-color: #2C2C2E;
}
.form textarea, .birth textarea, .telInput textarea, .zipInput textarea, .numberInput textarea, .halfInput textarea {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
}
.form textarea::-ms-expand, .birth textarea::-ms-expand, .telInput textarea::-ms-expand, .zipInput textarea::-ms-expand, .numberInput textarea::-ms-expand, .halfInput textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form textarea::-moz-placeholder, .birth textarea::-moz-placeholder, .telInput textarea::-moz-placeholder, .zipInput textarea::-moz-placeholder, .numberInput textarea::-moz-placeholder, .halfInput textarea::-moz-placeholder {
  color: #D1CDC3;
}
.form textarea::placeholder, .birth textarea::placeholder, .telInput textarea::placeholder, .zipInput textarea::placeholder, .numberInput textarea::placeholder, .halfInput textarea::placeholder {
  color: #D1CDC3;
}
.form textarea:valid, .birth textarea:valid, .telInput textarea:valid, .zipInput textarea:valid, .numberInput textarea:valid, .halfInput textarea:valid {
  background-color: #fff;
}
.form textarea[disabled], .birth textarea[disabled], .telInput textarea[disabled], .zipInput textarea[disabled], .numberInput textarea[disabled], .halfInput textarea[disabled], .form textarea[readonly], .birth textarea[readonly], .telInput textarea[readonly], .zipInput textarea[readonly], .numberInput textarea[readonly], .halfInput textarea[readonly], fieldset[disabled] .form textarea, fieldset[disabled] .birth textarea, fieldset[disabled] .telInput textarea, fieldset[disabled] .zipInput textarea, fieldset[disabled] .numberInput textarea, fieldset[disabled] .halfInput textarea {
  opacity: 1;
}
.form input:focus, .birth input:focus, .telInput input:focus, .zipInput input:focus, .numberInput input:focus, .halfInput input:focus, .form textarea:focus, .birth textarea:focus, .telInput textarea:focus, .zipInput textarea:focus, .numberInput textarea:focus, .halfInput textarea:focus {
  box-shadow: none;
  border-color: #2C2C2E;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  height: 52px;
  padding: 16px;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .birth input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form textarea, .birth textarea, .telInput textarea, .zipInput textarea, .numberInput textarea, .halfInput textarea {
  height: auto;
  min-height: 100px;
  padding: 16px;
  resize: vertical;
}
.form textarea.error, .birth textarea.error, .telInput textarea.error, .zipInput textarea.error, .numberInput textarea.error, .halfInput textarea.error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form select.error, .birth select.error, .telInput select.error, .zipInput select.error, .numberInput select.error, .halfInput select.error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form p, .birth p, .telInput p, .zipInput p, .numberInput p, .halfInput p {
  line-height: 1.4;
}
.form .errorMessage, .birth .errorMessage, .telInput .errorMessage, .zipInput .errorMessage, .numberInput .errorMessage, .halfInput .errorMessage {
  margin-top: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #D30E18;
}
.error.form input, .error.birth input, .error.telInput input, .error.zipInput input, .error.numberInput input, .error.halfInput input, .error.form select, .error.birth select, .error.telInput select, .error.zipInput select, .error.numberInput select, .error.halfInput select {
  margin-bottom: 5px;
  border-color: #D30E18;
  background: #F9F8F8;
}
.checkbox .errorMessage {
  margin-top: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #D30E18;
}
.error.checkbox input, .error.checkbox label {
  border-color: #D30E18;
  background: #F9F8F8;
}
input.hidden {
  display: none;
}
/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

Markup:
p.halfInput
  input(type="text")
  input(type="text")
p.halfInput
  input(type="text")

Styleguide 3.1.2
*/
.halfInput {
  display: flex;
}
.halfInput input {
  width: calc(50% - 4px);
}
.halfInput input:not(:last-of-type) {
  margin-right: 8px;
}
/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

Markup:
.numberInput
  span 数量
  input(type="number",value="0")

Styleguide 3.1.3
*/
.numberInput input[type=number] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right;
}
/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.zipInput
  span 〒
  input(type="text")
.zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .zipInputHelp__icon
      .icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.zipAuto
  a.inlineBtn 郵便番号から自動入力

Styleguide 3.1.4
*/
.zipInput {
  display: inline-block;
}
.zipInput input {
  display: inline-block;
  text-align: left;
  width: auto;
  max-width: 8em;
  font-size: 16px;
}
.zipInput span {
  display: inline-block;
  padding: 0 5px 0 3px;
  margin-left: 5px;
}
.zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  vertical-align: baseline;
  line-height: 0;
}
.zipInputHelp .zipInputHelp__icon {
  display: inline-block;
  margin-top: -10px;
  width: 22px;
  height: 22px;
  background-color: #97BC65;
  border-radius: 50%;
  font-size: 13px;
  position: relative;
  top: -6px;
}
.zipInputHelp .zipInputHelp__icon .icon img {
  width: 1em;
  height: 1em;
  position: relative;
  left: 5px;
  top: 4px;
}
.zipInputHelp .zipInputHelp__icon + a {
  vertical-align: top;
}
.zipInputHelp span {
  margin-left: 8px;
  display: inline-block;
  color: #0092C4;
  vertical-align: 3px;
}
.zipAuto .inlineBtn {
  font-weight: normal;
}
/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.telInput
  input(type="text")

Styleguide 3.1.5
*/
.telInput input {
  max-width: 10em;
  text-align: left;
}
/*
ファイルアップロードボタン

ファイルアップロードボタンをカスタマイズするための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.fileInput
  input(type="file")

Styleguide 3.1.6
*/
.mw_wp_form .fileInput {
  font-size: 16px !important;
}
.mw_wp_form .fileInput input[type=file] {
  display: none;
}
.mw_wp_form .fileInput + .filename {
  display: block;
  margin-left: 0;
  cursor: pointer;
}
/**
 * スタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 3.1
*/
/*
フォーム

`.form` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。

Markup:
p.form
  input(type="number")
p.form
  textarea(rows="6")

Styleguide 3.1.1
*/
.form input[type=radio], .birth input[type=radio], .halfInput input[type=radio], .numberInput input[type=radio], .zipInput input[type=radio], .telInput input[type=radio],
.form input[type=checkbox],
.birth input[type=checkbox],
.halfInput input[type=checkbox],
.numberInput input[type=checkbox],
.zipInput input[type=checkbox],
.telInput input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.form input[type=file], .birth input[type=file], .halfInput input[type=file], .numberInput input[type=file], .zipInput input[type=file], .telInput input[type=file] {
  display: block;
}
.form input[type=range], .birth input[type=range], .halfInput input[type=range], .numberInput input[type=range], .zipInput input[type=range], .telInput input[type=range] {
  display: block;
  width: 100%;
}
.form select[multiple], .birth select[multiple], .halfInput select[multiple], .numberInput select[multiple], .zipInput select[multiple], .telInput select[multiple],
.form select[size],
.birth select[size],
.halfInput select[size],
.numberInput select[size],
.zipInput select[size],
.telInput select[size] {
  height: auto;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::-moz-placeholder {
  color: #D1CDC3;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .birth input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])::placeholder {
  color: #D1CDC3;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .birth input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]):valid {
  background-color: #fff;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .birth input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])[disabled], .form input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .birth input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], .telInput input:not([type=checkbox]):not([type=radio]):not([type=file])[readonly], fieldset[disabled] .form input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), fieldset[disabled] .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  opacity: 1;
}
.form select, .birth select, .halfInput select, .numberInput select, .zipInput select, .telInput select {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
  padding: 16px;
  background-color: #F9F8F8;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200L7%208L14%200H0Z%22%20fill%3D%22%23D1CDC3%22%2F%3E%3C%2Fsvg%3E");
  background-position: calc(100% - 16px) 50%;
  background-repeat: no-repeat;
}
.form select::-ms-expand, .birth select::-ms-expand, .halfInput select::-ms-expand, .numberInput select::-ms-expand, .zipInput select::-ms-expand, .telInput select::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form select::-moz-placeholder, .birth select::-moz-placeholder, .halfInput select::-moz-placeholder, .numberInput select::-moz-placeholder, .zipInput select::-moz-placeholder, .telInput select::-moz-placeholder {
  color: #D1CDC3;
}
.form select::placeholder, .birth select::placeholder, .halfInput select::placeholder, .numberInput select::placeholder, .zipInput select::placeholder, .telInput select::placeholder {
  color: #D1CDC3;
}
.form select:valid, .birth select:valid, .halfInput select:valid, .numberInput select:valid, .zipInput select:valid, .telInput select:valid {
  background-color: #fff;
}
.form select[disabled], .birth select[disabled], .halfInput select[disabled], .numberInput select[disabled], .zipInput select[disabled], .telInput select[disabled], .form select[readonly], .birth select[readonly], .halfInput select[readonly], .numberInput select[readonly], .zipInput select[readonly], .telInput select[readonly], fieldset[disabled] .form select, fieldset[disabled] .birth select, fieldset[disabled] .halfInput select, fieldset[disabled] .numberInput select, fieldset[disabled] .zipInput select, fieldset[disabled] .telInput select {
  opacity: 1;
}
.form select[multiple], .birth select[multiple], .halfInput select[multiple], .numberInput select[multiple], .zipInput select[multiple], .telInput select[multiple] {
  background-color: #F9F8F8;
  background-image: none;
  height: auto;
}
.form select:focus, .birth select:focus, .halfInput select:focus, .numberInput select:focus, .zipInput select:focus, .telInput select:focus {
  box-shadow: none;
  border-color: #2C2C2E;
}
.form textarea, .birth textarea, .halfInput textarea, .numberInput textarea, .zipInput textarea, .telInput textarea {
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #F9F8F8;
  background-image: none;
  border: 1px solid #D1CDC3;
  outline: none;
  -webkit-appearance: none;
}
.form textarea::-ms-expand, .birth textarea::-ms-expand, .halfInput textarea::-ms-expand, .numberInput textarea::-ms-expand, .zipInput textarea::-ms-expand, .telInput textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}
.form textarea::-moz-placeholder, .birth textarea::-moz-placeholder, .halfInput textarea::-moz-placeholder, .numberInput textarea::-moz-placeholder, .zipInput textarea::-moz-placeholder, .telInput textarea::-moz-placeholder {
  color: #D1CDC3;
}
.form textarea::placeholder, .birth textarea::placeholder, .halfInput textarea::placeholder, .numberInput textarea::placeholder, .zipInput textarea::placeholder, .telInput textarea::placeholder {
  color: #D1CDC3;
}
.form textarea:valid, .birth textarea:valid, .halfInput textarea:valid, .numberInput textarea:valid, .zipInput textarea:valid, .telInput textarea:valid {
  background-color: #fff;
}
.form textarea[disabled], .birth textarea[disabled], .halfInput textarea[disabled], .numberInput textarea[disabled], .zipInput textarea[disabled], .telInput textarea[disabled], .form textarea[readonly], .birth textarea[readonly], .halfInput textarea[readonly], .numberInput textarea[readonly], .zipInput textarea[readonly], .telInput textarea[readonly], fieldset[disabled] .form textarea, fieldset[disabled] .birth textarea, fieldset[disabled] .halfInput textarea, fieldset[disabled] .numberInput textarea, fieldset[disabled] .zipInput textarea, fieldset[disabled] .telInput textarea {
  opacity: 1;
}
.form input:focus, .birth input:focus, .halfInput input:focus, .numberInput input:focus, .zipInput input:focus, .telInput input:focus, .form textarea:focus, .birth textarea:focus, .halfInput textarea:focus, .numberInput textarea:focus, .zipInput textarea:focus, .telInput textarea:focus {
  box-shadow: none;
  border-color: #2C2C2E;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .birth input:not([type=checkbox]):not([type=radio]):not([type=file]), .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]), .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  height: 52px;
  padding: 16px;
}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .birth input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .halfInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .numberInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .zipInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error, .telInput input:not([type=checkbox]):not([type=radio]):not([type=file]).error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form textarea, .birth textarea, .halfInput textarea, .numberInput textarea, .zipInput textarea, .telInput textarea {
  height: auto;
  min-height: 100px;
  padding: 16px;
  resize: vertical;
}
.form textarea.error, .birth textarea.error, .halfInput textarea.error, .numberInput textarea.error, .zipInput textarea.error, .telInput textarea.error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form select.error, .birth select.error, .halfInput select.error, .numberInput select.error, .zipInput select.error, .telInput select.error {
  border-color: #D30E18;
  background: #F9F8F8;
}
.form p, .birth p, .halfInput p, .numberInput p, .zipInput p, .telInput p {
  line-height: 1.4;
}
.form .errorMessage, .birth .errorMessage, .halfInput .errorMessage, .numberInput .errorMessage, .zipInput .errorMessage, .telInput .errorMessage {
  margin-top: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #D30E18;
}
.error.form input, .error.birth input, .error.halfInput input, .error.numberInput input, .error.zipInput input, .error.telInput input, .error.form select, .error.birth select, .error.halfInput select, .error.numberInput select, .error.zipInput select, .error.telInput select {
  margin-bottom: 5px;
  border-color: #D30E18;
  background: #F9F8F8;
}
.checkbox .errorMessage {
  margin-top: 16px;
  font-size: 12px;
  font-weight: bold;
  color: #D30E18;
}
.error.checkbox input, .error.checkbox label {
  border-color: #D30E18;
  background: #F9F8F8;
}
input.hidden {
  display: none;
}
/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

Markup:
p.halfInput
  input(type="text")
  input(type="text")
p.halfInput
  input(type="text")

Styleguide 3.1.2
*/
.halfInput {
  display: flex;
}
.halfInput input {
  width: calc(50% - 4px);
}
.halfInput input:not(:last-of-type) {
  margin-right: 8px;
}
/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

Markup:
.numberInput
  span 数量
  input(type="number",value="0")

Styleguide 3.1.3
*/
.numberInput input[type=number] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right;
}
/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.zipInput
  span 〒
  input(type="text")
.zipInputHelp
  a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
    .zipInputHelp__icon
      .icon
        img(src='/moc/icon/question-white.svg', alt='')
    span 郵便番号検索
.zipAuto
  a.inlineBtn 郵便番号から自動入力

Styleguide 3.1.4
*/
.zipInput {
  display: inline-block;
}
.zipInput input {
  display: inline-block;
  text-align: left;
  width: auto;
  max-width: 8em;
  font-size: 16px;
}
.zipInput span {
  display: inline-block;
  padding: 0 5px 0 3px;
  margin-left: 5px;
}
.zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  vertical-align: baseline;
  line-height: 0;
}
.zipInputHelp .zipInputHelp__icon {
  display: inline-block;
  margin-top: -10px;
  width: 22px;
  height: 22px;
  background-color: #97BC65;
  border-radius: 50%;
  font-size: 13px;
  position: relative;
  top: -6px;
}
.zipInputHelp .zipInputHelp__icon .icon img {
  width: 1em;
  height: 1em;
  position: relative;
  left: 5px;
  top: 4px;
}
.zipInputHelp .zipInputHelp__icon + a {
  vertical-align: top;
}
.zipInputHelp span {
  margin-left: 8px;
  display: inline-block;
  color: #0092C4;
  vertical-align: 3px;
}
.zipAuto .inlineBtn {
  font-weight: normal;
}
/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.telInput
  input(type="text")

Styleguide 3.1.5
*/
.telInput input {
  max-width: 10em;
  text-align: left;
}
/*
ファイルアップロードボタン

ファイルアップロードボタンをカスタマイズするための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

Markup:
.fileInput
  input(type="file")

Styleguide 3.1.6
*/
.mw_wp_form .fileInput {
  font-size: 16px !important;
}
.mw_wp_form .fileInput input[type=file] {
  display: none;
}
.mw_wp_form .fileInput + .filename {
  display: block;
  margin-left: 0;
  cursor: pointer;
}
/*
フォーム部品(その他)

フォーム部品でテキストの入力以外の動作要素を定義します。

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>

Styleguide 3.2
*/
/*
ラジオ（水平）

水平に並ぶラジオボタンフィールドです。

各要素をlabelでくくって、コーディングします。

ex [新規会員登録画面　性別選択部分](http://demo3.cube.net/entry)

Markup:
.radio
  label
    input(type="radio")
    span 男性
  label
    input(type="radio")
    span 女性

Styleguide 3.2.2
*/
.radio label {
  margin-right: 20px;
}
.radio input {
  margin-right: 10px;
}
.radio span {
  font-weight: normal;
}
/*
ラジオ(垂直)

垂直に並ぶラジオボタンフィールドです。

各要素をlabelでくくって、コーディングします。

ex [購入画面 お支払方法](http://demo3.cube.net/shopping)

Markup:
.blockRadio
  label
    input(type="radio")
    span 郵便振替
  label
    input(type="radio")
    span 現金書留
  label
    input(type="radio")
    span 銀行振込
  label
    input(type="radio")
    span 代金引換

Styleguide 3.2.3
*/
.blockRadio label {
  display: block;
}
.blockRadio span {
  padding-left: 10px;
  font-weight: normal;
}
/*
セレクトボックス

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　都道府県選択部分](http://demo3.cube.net/entry)

Markup:
.select
  select
    option 都道府県を選択
    option 北海道
    option 青森県
    option 岩手県
    option ...
.select
  select
    option 選択して下さい
    option 公務員
    option コンサルタント
    option コンピュータ関連技術職
    option コンピュータ関連以外の技術職
    option ...

Styleguide 3.2.4
*/
.selects {
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
}
/*
生年月日選択

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　生年月日選択部分](http://demo3.cube.net/entry)

Markup:
.birth
  select
    option ----
    option 1960
    option 1961
    option 1962
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...
  span /
  select
    option --
    option 01
    option 02
    option 03
    option ...

Styleguide 3.2.5
*/
.birth select {
  display: inline-block;
  width: auto;
  margin: 0 0 10px;
  background-color: #000;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}
.birth select:focus {
  box-shadow: none;
}
.birth span {
  margin-left: 5px;
}
/*
チェックボックス （水平）

水平に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

ex [新規会員登録画面　利用規約](http://demo3.cube.net/entry)

Markup:
.checkbox
  label
    input(type="checkbox")
    span 利用規約に同意する

Styleguide 3.2.6
*/
.checkbox label {
  display: inline-block;
}
.checkbox input {
  margin-bottom: 10px;
}
.checkbox span {
  font-weight: normal;
}
/*
チェックボックス (垂直)

垂直に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

Markup:
.blockCheckbox
  label
    input(type="checkbox")
    span 利用規約に同意する

Styleguide 3.2.7
*/
.blockCheckbox label {
  display: block;
}
.blockCheckbox span {
  font-weight: normal;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
.form dl, .halfInput dl, .numberInput dl, .zipInput dl, .telInput dl, .birth dl {
  display: block;
  margin-top: 40px;
  padding: 0;
}
.form dt, .halfInput dt, .numberInput dt, .zipInput dt, .telInput dt, .birth dt {
  width: 100%;
  padding-bottom: 24px;
  font-weight: 700;
}
.form dd, .halfInput dd, .numberInput dd, .zipInput dd, .telInput dd, .birth dd {
  width: 100%;
}
.form dd.grid2 > *, .halfInput dd.grid2 > *, .numberInput dd.grid2 > *, .zipInput dd.grid2 > *, .telInput dd.grid2 > *, .birth dd.grid2 > * {
  margin-bottom: 0;
}
.form dd.grid2 > * input, .halfInput dd.grid2 > * input, .numberInput dd.grid2 > * input, .zipInput dd.grid2 > * input, .telInput dd.grid2 > * input, .birth dd.grid2 > * input {
  width: 100%;
}
.form .required::after, .halfInput .required::after, .numberInput .required::after, .zipInput .required::after, .telInput .required::after, .birth .required::after {
  content: " ※";
  color: #D30E18;
  font-weight: normal;
}
.form button[type=submit], .halfInput button[type=submit], .numberInput button[type=submit], .zipInput button[type=submit], .telInput button[type=submit], .birth button[type=submit] {
  margin-top: 60px;
}
.form.confirm dd, .confirm.halfInput dd, .confirm.numberInput dd, .confirm.zipInput dd, .confirm.telInput dd, .confirm.birth dd {
  color: #9499A4;
}
.form.confirm dd p, .confirm.halfInput dd p, .confirm.numberInput dd p, .confirm.zipInput dd p, .confirm.telInput dd p, .confirm.birth dd p {
  display: none;
}
.form .error-block, .halfInput .error-block, .numberInput .error-block, .zipInput .error-block, .telInput .error-block, .birth .error-block {
  margin: 20px 0;
  padding: 20px;
  border: 2px solid #D30E18;
}
.form .error-box, .halfInput .error-box, .numberInput .error-box, .zipInput .error-box, .telInput .error-box, .birth .error-box {
  width: 100%;
  margin-top: 10px;
}
.form .error-box li:not(.on-error), .halfInput .error-box li:not(.on-error), .numberInput .error-box li:not(.on-error), .zipInput .error-box li:not(.on-error), .telInput .error-box li:not(.on-error), .birth .error-box li:not(.on-error) {
  display: none;
}
.form .error-box li.on-error, .halfInput .error-box li.on-error, .numberInput .error-box li.on-error, .zipInput .error-box li.on-error, .telInput .error-box li.on-error, .birth .error-box li.on-error {
  display: block;
  color: #D30E18;
}
.form .error-box li.on-error-non, .halfInput .error-box li.on-error-non, .numberInput .error-box li.on-error-non, .zipInput .error-box li.on-error-non, .telInput .error-box li.on-error-non, .birth .error-box li.on-error-non {
  display: none;
}
.mw_wp_form_confirm dd.grid2 > * {
  width: auto;
}
.mw_wp_form_confirm dd p {
  display: none;
}
.recruit .mw_wp_form_confirm .recruit__img,
.recruit .mw_wp_form_confirm #wantedly {
  display: none;
}
.grecaptcha-badge {
  bottom: 46px !important;
  z-index: 10;
}
/*
アイコン

Markup:


Styleguide 4.1
*/
.ec-icon img {
  max-width: 80px;
  max-height: 80px;
}
@font-face {
  font-family: "t8s-icon";
  src: url("/assets/fonts/t8s-icon.ttf?nsrnms") format("truetype"), url("/assets/fonts/t8s-icon.woff?nsrnms") format("woff"), url("/assets/fonts/t8s-icon.svg?nsrnms#t8s-icon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "t8s-icon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-refrect-x::before {
  display: inline-block;
  transform: scaleX(-1);
}
.icon-arrow:before {
  content: "\e900";
}
.icon-external-link:before {
  content: "\e901";
}
.icon-pin:before {
  content: "\e902";
}
.icon-play {
  position: relative;
}
.icon-play::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 15%;
  max-width: 120px;
  height: 0;
  padding-bottom: 15%;
  background: url(/assets/images/common/play.svg) center center no-repeat;
  background-size: contain;
  opacity: 0.7;
}
.icon-close {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.icon-close::before, .icon-close::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 141.421356%;
  height: 0;
  border-bottom: 1px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
グリッド

画面を12分割し、グリッドレイアウトに対応するためのスタイルです。

sg-wrapper:
<div class="role">
  <sg-wrapper-content/>


Styleguide 5.1
*/
.grid {
  display: block;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.grid > * {
  margin-bottom: 24px;
}
/*
2分割グリッド

画面 ２分割の　グリッドです。
Bootstrap の col-sm-6 相当のグリッドを提供します。

Markup:
.grid2
  .grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid2__cell
  .grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid2__cell

sg-wrapper:
<div class="role">
  <sg-wrapper-content/>
</div>

Styleguide 5.1.1
*/
.grid2 {
  display: block;
  margin: 0;
  flex-wrap: wrap;
}
.grid2 > * {
  margin-bottom: 24px;
}
.grid2 > * {
  position: relative;
  min-height: 1px;
}
.grid2 .grid2__cell {
  position: relative;
  min-height: 1px;
}
.grid2 .grid2__cell2 {
  position: relative;
  min-height: 1px;
}
/*
3分割グリッド

画面　３分割の　グリッドです。


Markup:
.grid3
  .grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid3__cell
  .grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid3__cell
  .grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid3__cell

Styleguide 5.1.2
*/
.grid3 {
  display: block;
  margin: 0;
}
.grid3 > * {
  margin-bottom: 24px;
}
.grid3 > * {
  position: relative;
  min-height: 1px;
}
.grid3 > .grid3__cell {
  position: relative;
  min-height: 1px;
}
.grid3 > .grid3__cell2 {
  position: relative;
  min-height: 1px;
}
.grid3 > .grid3__cell2:last-child {
  margin-right: 0;
}
.grid3 > .grid3__cell2 + * {
  margin-right: 0;
}
.grid3 > .grid3__cell3 {
  position: relative;
  min-height: 1px;
  margin-right: 0;
}
/*
4分割グリッド

画面　４分割の　グリッドです。


Markup:
.grid4
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid4__cell

Styleguide 5.1.3
*/
.grid4 {
  display: block;
  margin: 0;
}
.grid4 > * {
  margin-bottom: 24px;
}
.grid4 > * {
  position: relative;
  min-height: 1px;
}
.grid4 .grid4__cell {
  position: relative;
  min-height: 1px;
}
.grid4 .grid4__cell2 {
  position: relative;
  min-height: 1px;
}
.grid4 .grid4__cell3 {
  position: relative;
  min-height: 1px;
}
.grid4 .grid4__cell4 {
  position: relative;
  min-height: 1px;
}
/*
6分割グリッド

2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。


Markup:
.grid6
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
  .grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell
.grid6
  .grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell2
  .grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell2
  .grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell2
.grid6
  .grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell3
  .grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .grid6__cell3

Styleguide 5.1.4
*/
.grid6 {
  display: block;
  margin: 0;
}
.grid6 > * {
  margin-bottom: 24px;
}
.grid6 .grid6__cell {
  position: relative;
  min-height: 1px;
}
.grid6 .grid6__cell2 {
  position: relative;
  min-height: 1px;
}
.grid6 .grid6__cell3 {
  position: relative;
  min-height: 1px;
}
/*
中央寄せグリッド 10/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の１０グリッドです

ex [ご利用規約ページ　本文](http://demo3.cube.net/help/agreement)

Markup:
.off1Grid
  .off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.5
*/
.off1Grid {
  margin: 0;
}
.off1Grid .off1Grid__cell {
  margin: 0;
}
/*
中央寄せグリッド 8/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです


Markup:
.off2Grid
  .off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.6
*/
.off2Grid {
  display: block;
  margin: 0;
}
.off2Grid > * {
  margin-bottom: 24px;
}
.off2Grid .off2Grid__cell {
  margin: 0;
}
/*
中央寄せグリッド 6/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです


Markup:
.off3Grid
  .off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.7
*/
.off3Grid {
  display: block;
  margin: 0;
}
.off3Grid > * {
  margin-bottom: 24px;
}
.off3Grid .off3Grid__cell {
  margin: 0;
}
/*
中央寄せグリッド 4/12

左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです


Markup:
.off4Grid
  .off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod


Styleguide 5.1.8
*/
.off4Grid {
  display: block;
  margin: 0;
}
.off4Grid > * {
  margin-bottom: 24px;
}
.off4Grid .off4Grid__cell {
  margin: 0;
}
/*
グリッドオプション

グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。

sg-wrapper:
<div class="role">
  <sg-wrapper-content/>

Styleguide 5.1.9
*/
/*
グリッドセルの左寄せ

.gridに.grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.grid4.grid--left
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.10
*/
.grid--left {
  justify-content: flex-start !important;
}
/*
グリッドセルの右寄せ

.gridに.grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.grid4.grid--right
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.11
*/
.grid--right {
  justify-content: flex-end !important;
}
/*
グリッドセルの中央寄せ

.gridに.grid--leftを付与すると内包してるセルを左寄せにすることができます。

Markup:
.grid4.grid--center
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
  .grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell

Styleguide 5.1.12
*/
.grid--center {
  justify-content: center !important;
}
.grid--spacebetween {
  justify-content: space-between !important;
}
.grid--top {
  align-items: flex-start;
}
.row-reverse {
  flex-direction: row-reverse;
}
/**
 * スタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
レイアウト

様々なレイアウトを変更する為のスタイル群です。

Styleguide 5.2
*/
/*
画像レイアウト

画像とテキストを水平に並べるレイアウトです。

画像は20%で表示されます。

ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.cube.net/mypage)

Markup:
.imageGrid
  .imageGrid__img: img(src="http://demo3.cube.net/upload/save_image/0701113537_559351f959620.jpeg")
  .imageGrid__content
    p.font-bold ホーローマグ
    p ¥ 1,728 x 1

sg-wrapper:
<div class="ec-role">
  <sg-wrapper-content/>


Styleguide 5.2.1
*/
.imageGrid {
  display: table;
  border-top: 1px dotted #ccc;
  width: 100%;
}
.imageGrid .imageGrid__img {
  display: table-cell;
  padding: 10px;
  width: 100px;
}
.imageGrid .imageGrid__img img {
  width: 100%;
}
.imageGrid .imageGrid__content {
  vertical-align: middle;
  display: table-cell;
  font-size: 16px;
}
.imageGrid .imageGrid__content span {
  margin-left: 10px;
}
.imageGrid .imageGrid__content p {
  margin-bottom: 0;
}
.sp-only {
  display: inherit;
}
.tb-only {
  display: inherit;
}
.pc-only {
  display: none;
}
body article {
  padding-bottom: 32px;
}
body article header {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body article header a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
body article header a:hover,
body article header a:focus,
body article header a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
body article header textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
body article header ul, body article header ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body article header dl, body article header dt, body article header dd, body article header li {
  margin: 0;
  padding: 0;
}
body article header img {
  max-width: 100%;
}
body article header html {
  box-sizing: border-box;
}
body article header *,
body article header *::before,
body article header *::after {
  box-sizing: border-box;
}
body article header img {
  width: 100%;
}
body article footer {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body article footer a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
body article footer a:hover,
body article footer a:focus,
body article footer a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
body article footer textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
body article footer ul, body article footer ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body article footer dl, body article footer dt, body article footer dd, body article footer li {
  margin: 0;
  padding: 0;
}
body article footer img {
  max-width: 100%;
}
body article footer html {
  box-sizing: border-box;
}
body article footer *,
body article footer *::before,
body article footer *::after {
  box-sizing: border-box;
}
body article footer img {
  width: 100%;
}
body section {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body section a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
body section a:hover,
body section a:focus,
body section a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
body section textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
body section ul, body section ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body section dl, body section dt, body section dd, body section li {
  margin: 0;
  padding: 0;
}
body section img {
  max-width: 100%;
}
body section html {
  box-sizing: border-box;
}
body section *,
body section *::before,
body section *::after {
  box-sizing: border-box;
}
body section img {
  width: 100%;
}
body section:not(:first-child) {
  margin-top: 80px;
}
body.home section {
  max-width: inherit;
}
body.home section.news-section {
  max-width: 1200px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * スタイルユーティリティ
 */
/*
モーダル

Styleguide 6.1
*/
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
}
.modal__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  background: rgba(35, 24, 21, 0.9);
}
.modal__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0;
  padding: 20px;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
}
.modal__wrapper::-webkit-scrollbar {
  width: inherit;
}
.modal__content {
  position: relative;
  max-width: 960px;
  height: 0;
  padding-bottom: 56.25%;
  text-align: left;
}
.modal__content iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
a.js-modal-close {
  display: block;
  position: absolute;
  top: 40px;
  right: 40px;
  width: 36px;
  height: 36px;
  text-decoration: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * スタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(0, 102%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    animation-play-state: paused;
  }
}
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
@keyframes leftSquare {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 15px);
  }
  50% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  90% {
    top: calc(100% - 15px);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes leftSquare-sp {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  50% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  90% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes rightSquare {
  0% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  40% {
    top: calc(100% - 15px);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 15px);
  }
  100% {
    top: calc(80% - 15px);
    left: calc(100% - 15px);
  }
}
@keyframes rightSquare-sp {
  0% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  40% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  100% {
    top: calc(80% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
}
@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
/*
キービジュアル

トップページのキービジュアルコンポーネントです。

Markup:
<section class="kv">
  <element>
</section>

Styleguide 7.1
*/
.keyvisual {
  position: relative;
  min-height: 100vh;
  margin-bottom: 100px;
  padding-bottom: 80px;
}
.keyvisual .movie {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  padding: 0;
  max-height: 100vh;
  overflow: hidden;
}
.keyvisual .movie .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  opacity: 1;
  transition: all 0.3s;
}
.keyvisual .movie .loading::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  background: #fff;
  animation-fill-mode: both;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.keyvisual .movie.playable .loading {
  opacity: 0;
}
.keyvisual .movie.no-mask .mask {
  -webkit-mask-image: none;
          mask-image: none;
}
.keyvisual .movie.no-fixed {
  position: relative;
  margin-bottom: -56.25vw;
  top: calc(4500px - 33.75vw);
}
.keyvisual .vision-block {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 4990px;
  padding: 40px 0 80px;
}
.keyvisual .mask {
  position: relative;
  width: 100%;
  height: 56.25vw;
  max-height: 100vh;
  -webkit-mask-image: url(/assets/images/top/mask.svg);
          mask-image: url(/assets/images/top/mask.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position-x: -7.8125%;
  -webkit-mask-position-y: center;
  -webkit-mask-size: auto 60%;
          mask-size: auto 60%;
}
.keyvisual .mask::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.keyvisual .mask video {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.keyvisual .mask video::-webkit-media-controls {
  display: none;
}
.keyvisual .external {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  list-style-type: none;
  width: 100%;
  padding: 0;
}
.keyvisual .external li:not(:last-child) {
  margin-right: 8vw;
}
.keyvisual .external li:nth-child(3) {
  margin-left: -5px;
}
.keyvisual .external li:nth-child(3) a {
  width: calc(12.5vw + 5px);
}
.keyvisual .external a {
  display: block;
  width: 12.5vw;
}
.keyvisual .external a img {
  transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}
.keyvisual .external a:hover {
  filter: brightness(5);
}
.keyvisual .external .contact__button {
  position: inherit;
  top: inherit;
  right: inherit;
  display: block;
  width: 20vw;
  height: 20vw;
}
.keyvisual .external .contact__button a {
  width: 100%;
}
.keyvisual .vision {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin-top: 96px;
  color: #000;
  font-size: 6vw;
  letter-spacing: 0;
  counter-reset: slide;
}
.keyvisual .vision a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
.keyvisual .vision a:hover,
.keyvisual .vision a:focus,
.keyvisual .vision a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
.keyvisual .vision textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
.keyvisual .vision ul, .keyvisual .vision ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.keyvisual .vision dl, .keyvisual .vision dt, .keyvisual .vision dd, .keyvisual .vision li {
  margin: 0;
  padding: 0;
}
.keyvisual .vision img {
  max-width: 100%;
}
.keyvisual .vision html {
  box-sizing: border-box;
}
.keyvisual .vision *,
.keyvisual .vision *::before,
.keyvisual .vision *::after {
  box-sizing: border-box;
}
.keyvisual .vision img {
  width: 100%;
}
.dark-mode .keyvisual .vision {
  color: #fff;
}
.keyvisual .vision .otl-txt {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-text-stroke: 0.5px #000;
  color: #fff;
}
.dark-mode .keyvisual .vision .otl-txt {
  -webkit-text-stroke: 0.5px #fff;
  color: #000;
}
.keyvisual .vision .slide-in {
  overflow: hidden;
}
.keyvisual .vision .slide-in:nth-child(1) p {
  animation-delay: 0.2s !important;
}
.keyvisual .vision .slide-in:nth-child(2) p {
  animation-delay: 0.4s !important;
}
.keyvisual .vision .slide-in:nth-child(3) p {
  animation-delay: 0.6s !important;
}
.keyvisual .vision .slide-in:nth-child(4) p {
  animation-delay: 0.8s !important;
}
.keyvisual .vision .slide-in:nth-child(5) p {
  animation-delay: 1s !important;
}
.keyvisual .vision .slide-in:nth-child(6) p {
  animation-delay: 1.2s !important;
}
.keyvisual .vision .slide-in:nth-child(7) p {
  animation-delay: 1.4s !important;
}
.keyvisual .vision .slide-in:nth-child(8) p {
  animation-delay: 1.6s !important;
}
.keyvisual .vision .slide-in:nth-child(9) p {
  animation-delay: 1.8s !important;
}
.keyvisual .vision .slide-in:nth-child(10) p {
  animation-delay: 2s !important;
}
.keyvisual .vision .slide-in p {
  animation: slide-in 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
  transform: translate(0, 102%);
  opacity: 0;
}
.keyvisual .vision > p {
  opacity: 0;
}
.keyvisual .vision.inview .slide-in p {
  animation-play-state: running;
}
.keyvisual .scroll-down {
  position: absolute;
  top: 80%;
  left: calc(50% - 32px);
  transform: rotate(90deg);
}
.keyvisual .scroll-down .copyright {
  display: none;
}
.keyvisual .scroll-down__arrow {
  margin-bottom: 0;
  white-space: nowrap;
  cursor: pointer;
}
.keyvisual .scroll-down__arrow span {
  display: none;
}
.keyvisual .scroll-down__arrow img {
  display: inline-block;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  filter: brightness(5);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
標準セクション

通常のコンテナブロックです。

ex [商品詳細ページ　コンテナ](http://demo3.cube.net/products/detail/33)

Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-roleRole

Styleguide 11.1
*/
.role {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
.role a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
.role a:hover,
.role a:focus,
.role a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
.role textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
.role ul, .role ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.role dl, .role dt, .role dd, .role li {
  margin: 0;
  padding: 0;
}
.role img {
  max-width: 100%;
}
.role html {
  box-sizing: border-box;
}
.role *,
.role *::before,
.role *::after {
  box-sizing: border-box;
}
.role img {
  width: 100%;
}
section + section {
  margin-top: 40px;
}
p + p {
  margin-top: 1.8em;
}
figure {
  margin: 0 0 20px;
}
figure.radius {
  border-radius: 8px;
  overflow: hidden;
}
figure img {
  display: block;
  width: 100%;
  height: auto;
}
/*
下層ページセクション

Styleguide 11.1.2
*/
.default-section {
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1020px;
}
.default-section:after {
  content: " ";
  display: table;
}
.default-section:after {
  clear: both;
}
.shadow-block {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 32px 16px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04), 0px 11px 20px rgba(169, 174, 194, 0.2);
}
/*
記事一覧セクション

Styleguide 11.1.3
*/
.index-section {
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1020px;
  max-width: 1212px;
}
.index-section:after {
  content: " ";
  display: table;
}
.index-section:after {
  clear: both;
}
#select .index-section {
  position: relative;
}
#select .index-section + .index-section {
  padding-top: 40px;
}
#select .index-section + .index-section::before {
  content: "";
  position: absolute;
  top: 0;
  width: calc(100% - 48px);
  border-top: 1px solid #D1CDC3;
}
.index-section [class^=grid] a {
  display: block;
}
.index-section [class^=grid] a:hover figure {
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.18);
}
#select .index-section [class^=grid] a:hover {
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.18);
}
#select .index-section [class^=grid] a:hover figure {
  box-shadow: none;
}
#select .index-section [class^=grid] a {
  position: relative;
  height: 100%;
  padding-bottom: 60px;
  border-radius: 6px;
  overflow: hidden;
}
.index-section [class^=grid] figure {
  margin: 0 0 10px;
  transition: all 0.4s;
}
.index-section [class^=grid] figure.radius {
  border-radius: 8px;
  overflow: hidden;
}
.index-section [class^=grid] figure.radius img {
  display: block;
}
.index-section [class^=grid] .post-meta {
  font-size: 12px;
}
#select .index-section [class^=grid] .post-meta {
  margin-top: 20px;
  padding: 0 20px;
}
.index-section [class^=grid] .post-meta span {
  background: none;
}
.index-section [class^=grid] .post-meta .tag {
  display: inline-block;
  color: #D30E18;
}
.index-section [class^=grid] .post-meta .tag:not(:first-child)::before {
  content: " / ";
}
.index-section [class^=grid] .post-meta .tag + .date {
  display: block;
}
.index-section [class^=grid] .post-meta .cat {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 16px;
  background-color: #9499A4;
  color: #FFFFFF;
}
.index-section [class^=grid] .post-meta .cat:not(:first-child) {
  margin-left: 8px;
}
.index-section [class^=grid] .post-meta .cat + .date {
  margin-left: 16px;
}
.index-section [class^=grid] .post-meta .date {
  display: inline-block;
}
.index-section [class^=grid] .post-meta .time {
  display: block;
  color: #9499A4;
  font-size: 16px;
  font-weight: 700;
}
.index-section [class^=grid] .post-meta .time::before {
  content: "\e90b";
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  font-family: "animeka-icon" !important;
  font-weight: normal;
  line-height: 1;
  vertical-align: -2px;
}
.index-section [class^=grid] h2, .index-section [class^=grid] h3 {
  margin: 10px 0 5px;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#select .index-section [class^=grid] h2, #select .index-section [class^=grid] h3 {
  padding: 0 20px;
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
}
.index-section [class^=grid] p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}
.index-section [class^=grid] p.copyright {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: calc(100% - 100px);
  color: #9499A4;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  zoom: 0.4;
}
/*
記事詳細セクション

Styleguide 11.1.4
*/
.detail-section {
  margin-right: auto;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1020px;
  word-break: break-all;
}
.detail-section:after {
  content: " ";
  display: table;
}
.detail-section:after {
  clear: both;
}
.detail-section figure {
  margin-right: -38px;
  margin-left: -38px;
}
.detail-section .page-title {
  margin-top: 10px;
  font-size: 20px;
}
.detail-section .post-meta {
  font-size: 12px;
}
.detail-section .post-meta .tag {
  display: inline-block;
  color: #D30E18;
}
.detail-section .post-meta .tag:not(:first-child)::before {
  content: " / ";
}
.detail-section .post-meta .tag + .date {
  display: block;
}
.detail-section .post-meta .cat {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 16px;
  background-color: #9499A4;
  color: #FFFFFF;
}
.detail-section .post-meta .cat:not(:first-child) {
  margin-left: 8px;
}
.detail-section .post-meta .cat + .date {
  margin-left: 16px;
}
.detail-section .post-meta .date {
  display: inline-block;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * スタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(0, 102%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    animation-play-state: paused;
  }
}
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
@keyframes leftSquare {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 15px);
  }
  50% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  90% {
    top: calc(100% - 15px);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes leftSquare-sp {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  50% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  90% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes rightSquare {
  0% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  40% {
    top: calc(100% - 15px);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 15px);
  }
  100% {
    top: calc(80% - 15px);
    left: calc(100% - 15px);
  }
}
@keyframes rightSquare-sp {
  0% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  40% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  100% {
    top: calc(80% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
}
@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
/*
ヘッダー

ヘッダー用のプロジェクトコンポーネントを提供します。

Markup:
<header class="header">
  <element>
</header>

Styleguide 8.2
*/
.header {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.5s, padding 0;
  /*
  ヘッダー：ユーザナビゲーション

  ヘッダー内でユーザに関与するナビゲーションコンポーネントです。

  Markup:
  <header class="header">
    <nav class="header__nav">
      <element>
    </nav>
  </header>

  Styleguide 8.2.1
  */
}
.header a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
.header a:hover,
.header a:focus,
.header a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
.header textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
.header ul, .header ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header dl, .header dt, .header dd, .header li {
  margin: 0;
  padding: 0;
}
.header img {
  max-width: 100%;
}
.header html {
  box-sizing: border-box;
}
.header *,
.header *::before,
.header *::after {
  box-sizing: border-box;
}
.header img {
  width: 100%;
}
.header.fixed {
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.admin-bar .header.fixed {
  top: 32px;
}
.home .header.fixed .logo a {
  display: block;
  opacity: 1;
}
.header.fixed .logo a img {
  filter: grayscale(1) brightness(10);
}
.header.fixed .header__nav .menu-trigger span {
  background-color: #fff;
}
.header .logo {
  margin: 0;
}
.header .logo a {
  display: flex;
  align-items: center;
  background: none;
  transition: opacity 0.5s;
}
.home .header .logo a {
  display: none;
  opacity: 0;
}
.header .logo a img {
  display: block;
  width: 94px;
  transition: all 0.5s;
}
.header .logo a strong {
  color: #000;
  font-size: 14px;
}
#toppage .header .logo a strong, #about .header .logo a strong, #watch .header .logo a strong, #corp-news:not(.detail) .header .logo a strong, #other .header .logo a strong {
  color: #fff;
}
.header .header__nav {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
}
.admin-bar .header .header__nav {
  top: 62px;
}
.header .header__nav > ul {
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: auto;
  margin: 0;
  padding: 64px 64px 0;
  box-sizing: border-box;
  background-color: #000;
  list-style-type: none;
  transition: all 0.5s;
}
.header .header__nav > ul li {
  position: relative;
  text-align: right;
  white-space: nowrap;
  transition: all 0.3s;
}
.header .header__nav > ul li a {
  display: block;
  padding: 24px 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.header .header__nav > ul .sns {
  position: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 24px 0;
}
.header .header__nav > ul .sns li {
  border-bottom: none;
}
.header .header__nav > ul .sns li:not(:first-child) {
  margin-left: 32px;
}
.header .header__nav > ul .sns a {
  padding: 0;
}
.header .header__nav > ul .sns a::after {
  display: none;
}
.header .header__nav .menu-toggle {
  display: none;
}
.header .header__nav .menu-trigger {
  position: relative;
  z-index: 20;
  display: block;
  width: 40px;
  height: 40px;
  padding: 8px 2px;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: all 0.4s;
}
.header .header__nav .menu-trigger span {
  display: block;
  position: absolute;
  right: 2px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background-color: #696969;
  transition: all 0.4s;
}
body.home .header .header__nav .menu-trigger span {
  background-color: #fff;
}
.header .header__nav .menu-trigger span:nth-of-type(1) {
  top: calc(50% - 12px);
}
.header .header__nav .menu-trigger span:nth-of-type(2) {
  top: calc(50% - 1px);
  width: 36px;
}
.header .header__nav .menu-trigger span:nth-of-type(3) {
  top: calc(50% + 10px);
}
.header .header__nav .nav-bg {
  display: none;
}
.header .header__nav .menu-toggle:checked + .menu-trigger span:nth-of-type(1) {
  transform: translateY(11px) rotate(-315deg);
}
.header .header__nav .menu-toggle:checked + .menu-trigger span:nth-of-type(2) {
  opacity: 0;
}
.header .header__nav .menu-toggle:checked + .menu-trigger span:nth-of-type(3) {
  transform: translateY(-10px) rotate(315deg);
}
.header .header__nav .menu-toggle:checked ~ ul {
  left: 0;
  touch-action: none;
}
.header .header__nav .menu-toggle:checked ~ ul li {
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(1) {
  animation-delay: 0.1s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(2) {
  animation-delay: 0.2s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(3) {
  animation-delay: 0.3s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(4) {
  animation-delay: 0.4s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(5) {
  animation-delay: 0.5s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(6) {
  animation-delay: 0.6s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(7) {
  animation-delay: 0.7s;
}
.header .header__nav .menu-toggle:checked ~ ul li:nth-child(8) {
  animation-delay: 0.8s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}
.sns li:not(:first-child) {
  display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * スタイルユーティリティ
 */
/*
フッター

全ページで使用されるフッターのプロジェクトコンポーネントです。


Markup:
<footer class="footer">
  <element>
</footer>

Styleguide 8.3
*/
.footer {
  padding-top: 72px;
  background: #000;
  /*
  フッターナビ

  フッタープロジェクトで使用するナビゲーション用のコンポーネントです。

  Markup:
  <footer class="footer">
    <nav class="footer__nav">
      <element>
    </nav>
  </footer>

  Styleguide 8.3.1
  */
  /*
  フッターナビ

  フッタープロジェクトで使用するナビゲーション用のコンポーネントです。

  Markup:
  <footer class="footer">
    <div class="footer__inner">
      <div class="pagetop">
        <a href="#">TOP</a>
      </div>
    </div>
  </footer>

  Styleguide 8.3.2
  */
}
.footer .footer__inner {
  position: relative;
  padding-right: 24px;
  padding-left: 24px;
  margin-bottom: 64px;
}
.footer .logo {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 24px;
}
.footer .logo a,
.footer .logo img {
  display: block;
  width: 150px;
  margin: 0 auto;
}
.footer .pmark {
  width: 80px;
  height: 80px;
  justify-self: center;
}
.footer .pmark img {
  display: block;
  width: auto;
  height: 100%;
}
.footer .copyright {
  position: relative;
  padding: 14px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: left;
}
.footer .copyright .bottom__nav {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.footer .copyright .bottom__nav a {
  color: #D1CDC3;
}
.footer .copyright .bottom__nav a:hover, .footer .copyright .bottom__nav a:focus, .footer .copyright .bottom__nav a:active {
  color: #9B0000;
}
.footer .footer__nav {
  position: relative;
  margin-bottom: 40px;
  padding: 0;
}
.footer .footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  list-style: none;
}
.footer .footer__nav ul li {
  width: 50%;
  margin-bottom: 40px;
  font-weight: 700;
  white-space: nowrap;
}
.footer .footer__nav ul a {
  color: #fff;
}
.footer .footer__nav ul a:hover, .footer .footer__nav ul a:focus, .footer .footer__nav ul a:active {
  color: #9B0000;
}
.footer .external {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 70px;
  list-style-type: none;
  width: 100%;
  margin-bottom: 32px;
  padding: 0;
}
.footer .external li:last-child a {
  width: 53px;
}
.footer .external a {
  display: block;
  width: 48px;
}
.footer .external a img {
  transition: all 0.85s cubic-bezier(0.48, 0, 0.22, 1);
}
.footer .external a:hover {
  filter: brightness(5);
}
.footer .pagetop {
  position: absolute;
  width: 72px;
  height: 72px;
  top: -16px;
  right: 0;
  z-index: 1;
}
.footer .pagetop a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 36px;
  background-color: #696969;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.footer .pagetop a::before {
  content: "";
  position: absolute;
  display: block;
  top: 18px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-top: 5px solid #000;
  border-right: 5px solid #000;
  transform: rotate(-45deg) translateX(-50%);
  transform-origin: left;
}
/*
フッター リクルートブロック

フッタープロジェクトで使用するリクルート用のコンポーネントです。

Markup:
<section id="recruit">
  <div class="recruit__block">
    <element>
  </div>
</select>

Styleguide 8.3.3
*/
section#recruit {
  position: relative;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
section#recruit video {
  position: absolute;
  top: 0;
  left: calc(50% - 960px);
  z-index: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  pointer-events: none;
}
section#recruit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}
.recruit__block {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: 40px 28px;
  background-color: #fff;
}
.recruit__block a {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 20px;
  transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}
.recruit__block a h2 {
  margin: 0 0 24px;
  color: #2C2C2E;
  font-size: 24px;
}
.recruit__block a p {
  margin-bottom: 24px;
  color: #696969;
  font-size: 16px;
}
.recruit__block a .icon-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid #D1CDC3;
  background-color: transparent;
  color: #2C2C2E;
  font-size: 20px;
  transition: all 0.85s cubic-bezier(0.48, 0, 0.22, 1);
}
.recruit__block a.contact::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  width: 75%;
  border-bottom: 1px solid #D1CDC3;
  transform: translateX(-50%);
}
.recruit__block a:hover .icon-arrow {
  border-color: #9B0000;
  background-color: #9B0000;
  color: #fff;
}
/*
フローティング　コンタクトボタン

フローティング表示しているコンタクトボタン用のコンポーネントです。

Markup:
<div class="contact__button">
  <element>
</div>

Styleguide 8.3.3
*/
.contact__button {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 40px;
  z-index: 10;
  width: 80px;
  height: 80px;
}
.contact__button a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #696969;
  background: #000;
  transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}
.contact__button a .svg {
  display: block;
  width: 100%;
  height: 100%;
}
.contact__button a .svg g {
  transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: 50% 50%;
}
.contact__button a:hover {
  border-color: #9B0000;
  background: #9B0000;
}
.contact__button a:hover .svg g {
  transform: rotate(360deg);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
トップページ

Styleguide 12.1
*/
body.home {
  padding-top: 0;
  background-color: #fff;
  transition: all 4s cubic-bezier(0.19, 1, 0.22, 1);
}
body.home.dark-mode {
  background-color: #000;
}
body.home.light-mode {
  background-color: #fff;
}
picture {
  display: block;
  overflow: hidden;
}
.division-section {
  padding: 0 24px 60px;
  counter-reset: numbering;
}
.division-section figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.division-section figure a {
  display: block;
}
.division-section figure img {
  cursor: pointer;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.division-section figure.active img {
  transform: scale(1.2);
}
.division-section .division-detail {
  padding-left: 0;
}
.division-section .division-detail p {
  font-size: 16px;
}
.dark-mode .division-section .division-detail {
  color: #fff;
}
.dark-mode .division-section .division-detail h3, .dark-mode .division-section .division-detail h4 {
  color: #fff;
}
.new-project,
.creativity,
.ent-media {
  padding: 0 0 60px;
}
.newbusiness {
  margin-bottom: 90px;
}
.newbusiness figure {
  width: 100%;
}
.newbusiness .division-detail {
  margin-right: auto;
}
.projectmanagement figure {
  width: 100%;
}
.projectmanagement .division-detail {
  margin-left: auto;
}
.stillness {
  position: relative;
  max-width: 1164px;
  margin: 0 auto 40px;
}
.thinkandsense {
  margin-bottom: 60px;
}
.thinkandsense.grid {
  justify-content: space-between;
}
.thinkandsense figure {
  width: calc(100% + 48px);
  margin-right: -24px;
  margin-left: -24px;
}
.thinkandsense figure .thinkandsense_img {
  width: 75%;
}
.thinkandsense figure .thinkandsense_movie {
  width: 42.67%;
  margin: -17.87vw 6.13vw 0 auto;
}
.thinkandsense .division-detail {
  margin-right: auto;
}
.thinkandsense .division-detail a {
  display: inline-block;
  margin-top: 2rem;
  margin-right: auto;
}
.thinkandsense .division-detail a .icon-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #D1CDC3;
  background-color: transparent;
  color: #D1CDC3;
  font-size: 20px;
  transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}
.thinkandsense .division-detail a .icon-arrow:hover {
  border-color: #fff;
  color: #fff;
}
.creative {
  margin-bottom: 60px;
}
.creative.grid {
  justify-content: space-between;
}
.creative figure {
  width: 100%;
}
.creative .division-detail {
  margin-left: auto;
}
.system figure {
  width: 100%;
}
.system .division-detail {
  margin-right: auto;
}
.entertainment {
  margin-bottom: 60px;
}
.entertainment.grid {
  justify-content: space-between;
}
.entertainment figure {
  width: calc(100% + 48px);
  margin-right: -24px;
  margin-left: -24px;
  overflow: visible;
}
.entertainment figure .entertainment_movie1 {
  width: auto;
  margin: 0 0 12px 20px;
}
.entertainment figure .entertainment_movie2 {
  position: relative;
  z-index: 0;
  width: 62%;
  margin: -13px auto 0;
  padding-bottom: 64px;
}
.entertainment figure .entertainment_img {
  position: relative;
  z-index: 1;
  width: 38.5%;
  margin-right: 23px;
  margin-left: auto;
}
.entertainment .division-detail {
  align-self: flex-start;
  margin-top: 20px;
  margin-left: auto;
}
.media figure {
  width: 100%;
}
.media figure .media_img1 {
  width: 87.5%;
  margin-left: auto;
}
.media figure .media_img2 {
  width: 71.25%;
  margin-top: -24px;
  margin-right: auto;
}
.media figure .media_movie {
  width: 50%;
  margin-top: 24px;
  margin-left: auto;
}
.media .division-detail {
  margin-right: auto;
}
.ent-media {
  position: relative;
}
.ent-media::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: -24px;
  z-index: -1;
  width: calc(100% + 48px);
  height: 100%;
  background: url(/assets/images/common/linecurve.svg) center 27.5% no-repeat;
  background-size: 200% auto;
}
.news-section {
  padding-right: 0;
  padding-left: 0;
}
.dark-mode .news-section {
  color: #fff;
}
.dark-mode .news-section h3, .dark-mode .news-section h4, .dark-mode .news-section a {
  color: #fff;
}
.news-section .image {
  margin-bottom: 10px;
}
.news-section .image img {
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 1.778;
}
.news-section .grid-item p:first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 5.4em;
  transition: 1s all;
}
.news-section .grid-item:hover p:first-child {
  -webkit-line-clamp: inherit;
  max-height: 400px;
}
.news-section .readmore {
  margin-top: 1.5em;
  text-align: right;
}
.news-section .readmore a {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
.news-section .readmore a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 6px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: translateY(-50%) rotate(45deg);
  transition: all ease-in-out 0.3s;
}
.news-section .readmore a:hover {
  color: #9B0000;
}
.news-section .readmore a:hover::after {
  right: 0;
  border-color: #9B0000;
}
.dark-mode .news-section .blockBtn--action {
  border: 1px solid #fff;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
About Us

Styleguide 12.1
*/
.about #project {
  padding-top: 84px;
  padding-bottom: 110px;
  background-color: #000;
}
.about .about__img {
  width: calc(100% + 48px);
  margin-top: 80px;
  margin-bottom: 24px;
  margin-right: -24px;
  margin-left: -24px;
}
.about .about__img--main {
  width: calc(100% + 48px);
  margin-top: 20px;
  margin-right: -24px;
  margin-left: -24px;
}
.about .about__img figure {
  width: 100%;
  margin: 0;
}
.about .about__txt1 figure {
  width: 100%;
}
.about .about__txt1 div {
  margin-top: 24px;
}
.about .about__txt2 {
  width: 100%;
}
.about .grid3 {
  margin-top: 40px;
}
.about .beyond {
  position: relative;
  max-width: 1164px;
  margin: 0 auto 40px;
}
.about .beyond figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.about .beyond figure a {
  display: block;
}
.about .beyond figure img {
  cursor: pointer;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.about .beyond figure.active img {
  transform: scale(1.2);
}
.about .dark-mode h3 {
  color: #fff;
}
.about .dark-mode a {
  color: #fff;
}
.about .dark-mode a:hover {
  color: #9B0000;
}
.about .dark-mode figcaption {
  margin-top: 8px;
  color: #fff;
}
.about .dark-mode p {
  color: #b5b8be;
}
.about .dark-mode .award__block .adaa {
  padding-left: 48px;
  background: url(/assets/images/about/adaa_logo.svg) left top no-repeat;
  background-size: 40px 40px;
}
.about .dark-mode .ceo__block {
  margin-right: auto;
  margin-left: auto;
}
.about .dark-mode .ceo__block figure {
  width: 100%;
}
.about .dark-mode .ceo__block div {
  position: relative;
  margin: 0 -24px;
  padding: 20% 24px 0 10.67%;
  background: url(/assets/images/common/quot_start.svg) left top no-repeat, url(/assets/images/common/quot_end.svg) right bottom no-repeat;
}
.about .dark-mode .ceo__block div h3 strong {
  font-size: 1.5em;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
Company

Styleguide 13.1
*/
.company section + section {
  padding-top: 240px;
}
.company .border-list {
  margin-bottom: 40px;
}
.company .border-list > * {
  width: 100%;
}
.company .map-block {
  width: 100%;
  max-width: 570px;
}
.company .map-block .maps {
  position: relative;
  width: 100%;
  max-width: 570px;
  height: 0;
  padding-bottom: 56.25%;
  border: 4px solid #D1CDC3;
}
.company .map-block .maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(80%);
}
.company .map-block .maps embed, .company .map-block .maps object {
  filter: grayscale(80%);
}
.company .access-detail {
  width: 100%;
  max-width: 474px;
  margin-bottom: 40px;
}
.company .access-detail a:hover {
  color: #9B0000;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
Recruit

Styleguide 14.1
*/
.recruit .recruit__img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 77.6vw;
  margin-bottom: 80px;
  background-size: cover;
}
.webp .recruit .recruit__img {
  background-image: url(/assets/images/recruit/recruit_sp.webp);
}
.no-webp .recruit .recruit__img {
  background-image: url(/assets/images/recruit/recruit_sp.png);
}
.recruit .recruit__img h2 {
  margin: 0;
  color: #fff;
  line-height: 1.8;
}
.recruit .form__list dd p {
  width: 100%;
  margin: 12px 0 0;
}
/*
wantedly

Styleguide 14.2
*/
.mw_wp_form_confirm + #wantedly {
  display: none;
}
.wantedly-block {
  max-width: 1000px;
  margin: 0 auto;
}
.wantedly-block .fadein {
  opacity: 0;
}
.wantedly-block.inview .fadein {
  position: relative;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}
.wantedly-block .fadein:nth-child(1) {
  animation-delay: 0.2s;
}
.wantedly-block .fadein:nth-child(2) {
  animation-delay: 0.4s;
}
.wantedly-block .fadein:nth-child(3) {
  animation-delay: 0.6s;
}
.wantedly-block .fadein:nth-child(4) {
  animation-delay: 0.8s;
}
.wantedly-block .fadein:nth-child(5) {
  animation-delay: 1s;
}
.wantedly-block .fadein:nth-child(6) {
  animation-delay: 1.2s;
}
.wantedly-block .fadein:nth-child(7) {
  animation-delay: 1.4s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}
.wantedly-block iframe {
  width: 100%;
  height: auto;
  min-height: 302px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お問い合わせ

お問い合わせ に関する Project コンポーネントを定義します。

Styleguide 19.1
*/
.contactRole {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
.contactRole a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
.contactRole a:hover,
.contactRole a:focus,
.contactRole a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
.contactRole textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
.contactRole ul, .contactRole ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contactRole dl, .contactRole dt, .contactRole dd, .contactRole li {
  margin: 0;
  padding: 0;
}
.contactRole img {
  max-width: 100%;
}
.contactRole html {
  box-sizing: border-box;
}
.contactRole *,
.contactRole *::before,
.contactRole *::after {
  box-sizing: border-box;
}
.contactRole img {
  width: 100%;
}
.contactRole .contactRole__actions {
  padding-top: 20px;
}
.contactRole p {
  margin: 16px 0;
}
.contactConfirmRole {
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
.contactConfirmRole a {
  color: #2C2C2E;
  text-decoration: none;
  cursor: pointer;
}
.contactConfirmRole a:hover,
.contactConfirmRole a:focus,
.contactConfirmRole a:active {
  color: #2C2C2E;
  text-decoration: none;
  outline: none;
}
.contactConfirmRole textarea { /* for chrome fontsize bug */
  font-family: sans-serif;
}
.contactConfirmRole ul, .contactConfirmRole ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contactConfirmRole dl, .contactConfirmRole dt, .contactConfirmRole dd, .contactConfirmRole li {
  margin: 0;
  padding: 0;
}
.contactConfirmRole img {
  max-width: 100%;
}
.contactConfirmRole html {
  box-sizing: border-box;
}
.contactConfirmRole *,
.contactConfirmRole *::before,
.contactConfirmRole *::after {
  box-sizing: border-box;
}
.contactConfirmRole img {
  width: 100%;
}
.contactConfirmRole .contactConfirmRole__actions {
  padding-top: 20px;
}
.contactConfirmRole .ec-blockBtn--action {
  margin-bottom: 16px;
}
.contactCompleteRole .page-title {
  margin-top: 60px;
  font-size: 24px;
}
.contactCompleteRole p {
  margin-bottom: 100px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(0, 102%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    animation-play-state: paused;
  }
}
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
@keyframes leftSquare {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 15px);
  }
  50% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  90% {
    top: calc(100% - 15px);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes leftSquare-sp {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  50% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  90% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes rightSquare {
  0% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  40% {
    top: calc(100% - 15px);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 15px);
  }
  100% {
    top: calc(80% - 15px);
    left: calc(100% - 15px);
  }
}
@keyframes rightSquare-sp {
  0% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  40% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  100% {
    top: calc(80% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
}
@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
/*
404ページ

404 エラー画面で使用するページコンポーネントです。

Styleguide 20.1
*/
#notfound .detail-section {
  text-align: center;
}
#notfound .detail-section h1 {
  margin: 0;
  font-size: 28px;
}
#notfound .detail-section p {
  font-size: 14px;
}
#notfound .detail-section figure {
  max-width: 524px;
  margin: 24px auto;
  box-shadow: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(0, 102%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    animation-play-state: paused;
  }
}
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
@keyframes leftSquare {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 15px);
  }
  50% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  90% {
    top: calc(100% - 15px);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes leftSquare-sp {
  0% {
    top: 0;
    left: 0;
  }
  40% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  50% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  90% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  100% {
    top: 20%;
    left: 0;
  }
}
@keyframes rightSquare {
  0% {
    top: calc(100% - 15px);
    left: calc(100% - 15px);
  }
  40% {
    top: calc(100% - 15px);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 15px);
  }
  100% {
    top: calc(80% - 15px);
    left: calc(100% - 15px);
  }
}
@keyframes rightSquare-sp {
  0% {
    top: calc(100% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
  40% {
    top: calc(100% - 2.5vw);
    left: 0;
  }
  50% {
    top: 0;
    left: 0;
  }
  90% {
    top: 0;
    left: calc(100% - 2.5vw);
  }
  100% {
    top: calc(80% - 2.5vw);
    left: calc(100% - 2.5vw);
  }
}
@keyframes square-spin {
  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
/*
プライバシーポリシーページ

プライバシーポリシー画面で使用するページコンポーネントです。

Styleguide 16.2
*/
.privacy h2 {
  margin: 0 0 20px;
}
.privacy h3 {
  margin: 40px 0 20px;
}
.privacy h4, .privacy h5 {
  margin: 20px 0 0;
}
.privacy h5 {
  font-size: 16px;
}
.privacy ul {
  list-style-type: disc;
  padding-left: 20px;
}
.privacy ol {
  list-style-type: decimal;
  margin-top: 20px;
  padding-left: 20px;
}
.privacy ol.type-1 > li {
  list-style-type: decimal;
  margin-bottom: 20px;
}
.privacy ol.type-2 > li {
  list-style-type: upper-alpha;
}
.privacy ol.type-3 > li {
  list-style-type: lower-alpha;
}
.privacy ol.type-4 > li {
  list-style-type: lower-roman;
}
.privacy ol ol {
  margin-bottom: 20px;
}
.privacy .pp-enactment {
  margin-left: auto;
  text-align: right;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
Culture

Styleguide 17.1
*/
.culture {
  counter-reset: numbering;
}
.culture .numbering-heading {
  white-space: normal;
  line-height: 1;
}
.culture .numbering-heading.active {
  -webkit-text-stroke: 0.1px #000;
}
.culture .numbering-heading::before {
  left: 0;
}
.culture .numbering-heading span {
  font-size: 24px;
}
.culture .grid {
  margin-bottom: 80px;
}
.culture .grid .culture-detail {
  width: 100%;
}
.culture .grid figure {
  width: 100%;
}
.culture .grid figure img {
  cursor: pointer;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.culture .grid figure.active img {
  transform: scale(1.2);
}
.culture .grid.row-reverse figure {
  width: 100%;
}
.culture .grid2,
.culture .grid3 {
  margin-bottom: 40px;
}
.culture .tsujikosuke .grid2 > * {
  margin-bottom: 2px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
News

Styleguide 18.1
*/
.news header + section {
  margin-top: 0;
}
.masonry {
  position: relative;
}
.masonry .grid-sizer {
  width: 100%;
}
.masonry .grid-item {
  width: 100%;
  float: left;
  margin-bottom: 40px;
  opacity: 0;
  cursor: pointer;
}
.masonry .grid-item.grid-item--width2::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  z-index: -1;
  width: calc(100% + 48px);
  height: calc(100% + 64px);
  background-color: #f9f8f8;
  animation: fadeIn 0.5s;
}
.masonry .grid-item.grid-item--width2 .article_detail {
  height: auto;
  opacity: 1;
  transform: translateY(0px);
}
.masonry .grid-item.grid-item--width3 {
  margin-bottom: 56px;
}
.masonry .grid-item.grid-item--width3::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -24px;
  z-index: -1;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  background-color: #f9f8f8;
  animation: fadeIn 0.5s;
}
.masonry .grid-item.grid-item--width3 .article_detail {
  height: auto;
  opacity: 1;
  transform: translateY(0px);
}
.masonry .grid-item figure {
  overflow: hidden;
}
.masonry .grid-item figure img {
  transition: all ease-in-out 0.3s;
}
.masonry .grid-item figure img:hover {
  transform: scale(1.3);
}
.masonry .grid-item .article_detail {
  height: 0;
  opacity: 0;
  transform: translateY(100px);
  transition: all ease-in-out 0.5s;
}
.masonry .grid-item .readmore {
  margin-top: 1.5em;
  text-align: right;
}
.masonry .grid-item .readmore a {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
.masonry .grid-item .readmore a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 6px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: translateY(-50%) rotate(45deg);
  transition: all ease-in-out 0.3s;
}
.masonry .grid-item .readmore a:hover {
  color: #9B0000;
}
.masonry .grid-item .readmore a:hover::after {
  right: 0;
  border-color: #9B0000;
}
.singular .post.type-post .posted-by {
  display: flex;
  margin: 20px 0;
}
.singular .post.type-post footer {
  margin-top: 40px;
  padding: 0;
}
.singular .post.type-post footer .nav-links {
  display: flex;
  justify-content: space-between;
}
.singular .post.type-post footer .nav-links .nav-next {
  margin-left: auto;
}
.singular .post.type-post footer .nav-links .nav-previous {
  margin-right: auto;
}
.singular .post.type-post footer .nav-links .meta-nav {
  display: flex;
  align-items: center;
}
@keyframes moveUp {
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@media only screen and (min-width: 560px) {
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 20px;
  }
  h4 {
    font-size: 18px;
  }
  .typewriter-heading {
    height: 130px;
    margin: 0 0 30px;
    padding: 25px 35px;
    font-size: 60px;
  }
  .division-section .typewriter-heading {
    margin-bottom: 60px;
  }
  .typewriter-heading::after, .typewriter-heading::before {
    width: 15px;
    height: 15px;
  }
  .typewriter-heading::before {
    top: calc(80% - 15px);
    left: calc(100% - 15px);
  }
  .typewriter-heading.inview::after {
    animation: 2s ease-out 0.5s 1 leftSquare;
  }
  .typewriter-heading.inview::before {
    animation: 2s ease-out 0.5s 1 rightSquare;
  }
  .scroll-heading {
    display: block;
    margin-bottom: 120px;
    overflow: hidden;
  }
  .scroll-heading .scroll-heading__title {
    font-size: 6vw;
    color: transparent;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform;
    cursor: pointer;
  }
  .scroll-heading .scroll-heading__title--txt {
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-text-stroke: 1px #000;
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    transition: color 0.85s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .scroll-heading .scroll-heading__title.active .scroll-heading__title--txt {
    -webkit-text-stroke: 1px #fff;
    color: #000;
  }
  .scroll-heading .scroll-heading--newbusiness {
    margin-left: -3vw;
  }
  .scroll-heading .scroll-heading--projectmanagement {
    margin-left: -1vw;
  }
  .scroll-heading .scroll-heading--creativity {
    margin-left: -5vw;
  }
  .scroll-heading .scroll-heading--technological {
    margin-left: 10vw;
  }
  .scroll-heading .scroll-heading--entertainment {
    margin-left: -5vw;
  }
  .scroll-heading .scroll-heading--media {
    margin-left: 60vw;
  }
  .numbering-heading {
    margin: 6.5vw 0 20px;
    font-size: 4vw;
  }
  .numbering-heading::before {
    top: -6.5vw;
    left: -9vw;
    font-size: 12vw;
  }
  .outline-heading {
    font-size: 30px;
  }
  .border-list {
    margin-bottom: 80px;
  }
  .border-list > *:nth-child(2) {
    border-top: 1px solid #D1CDC3;
  }
  .border-list dl.column dt {
    width: 25%;
    padding: 1.4em 0;
  }
  .border-list dl.column dt br {
    display: inherit;
  }
  .border-list dl.column dd {
    width: 75%;
    padding: 1.4em 0;
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .grid2 {
    display: flex;
    flex-wrap: wrap;
  }
  .grid2 > * {
    width: calc((100% - (24px * (12 / 6 - 1))) * 6 / 12);
    margin-right: 24px;
  }
  .grid2 > *:nth-child(2n) {
    margin-right: 0;
  }
  .grid2 .grid2__cell {
    width: calc((100% - (24px * (12 / 6 - 1))) * 6 / 12);
    margin-right: 24px;
  }
  .grid2 .grid2__cell2 {
    width: calc((100% - (24px * (12 / 12 - 1))) * 12 / 12);
    margin-right: 24px;
  }
  .grid3 {
    display: flex;
    flex-wrap: wrap;
  }
  .grid3 > * {
    width: calc((100% - (24px * (12 / 4 - 1))) * 4 / 12);
    margin-right: 24px;
  }
  .grid3 > *:nth-child(3n) {
    margin-right: 0;
  }
  .grid3 > .grid3__cell {
    width: calc((100% - (24px * (12 / 4 - 1))) * 4 / 12);
    margin-right: 24px;
  }
  .grid3 > .grid3__cell2 {
    width: calc((100% - (24px * (12 / 8 - 1))) * 8 / 12);
    margin-right: 24px;
  }
  .grid3 > .grid3__cell3 {
    width: calc((100% - (24px * (12 / 12 - 1))) * 12 / 12);
    margin-right: 24px;
  }
  .grid4 {
    display: flex;
    flex-wrap: wrap;
  }
  .grid4 > * {
    width: calc((100% - (24px * (12 / 3 - 1))) * 3 / 12);
    margin-right: 24px;
  }
  .grid4 > *:nth-child(4n) {
    margin-right: 0;
  }
  .grid4 .grid4__cell {
    width: calc((100% - (24px * (12 / 3 - 1))) * 3 / 12);
    margin-right: 24px;
  }
  .grid4 .grid4__cell2 {
    width: calc((100% - (24px * (12 / 6 - 1))) * 6 / 12);
    margin-right: 24px;
  }
  .grid4 .grid4__cell3 {
    width: calc((100% - (24px * (12 / 9 - 1))) * 9 / 12);
    margin-right: 24px;
  }
  .grid4 .grid4__cell4 {
    width: calc((100% - (24px * (12 / 12 - 1))) * 12 / 12);
    margin-right: 24px;
  }
  .grid6 {
    display: flex;
    flex-wrap: wrap;
  }
  .grid6 .grid6__cell {
    width: calc((100% - (24px * (12 / 2 - 1))) * 2 / 12);
    margin-right: 24px;
  }
  .grid6 .grid6__cell2 {
    width: calc((100% - (24px * (12 / 4 - 1))) * 4 / 12);
    margin-right: 24px;
  }
  .grid6 .grid6__cell3 {
    width: calc((100% - (24px * (12 / 6 - 1))) * 6 / 12);
    margin-right: 24px;
  }
  .off2Grid {
    display: flex;
    flex-wrap: wrap;
  }
  .off3Grid {
    display: flex;
    flex-wrap: wrap;
  }
  .off4Grid {
    display: flex;
    flex-wrap: wrap;
  }
  .sp-only {
    display: none;
  }
  body article {
    padding-bottom: 240px;
  }
  .keyvisual .external li:not(:last-child) {
    margin-right: 100px;
  }
  .keyvisual .external li:not(:last-child):nth-child(3) {
    margin-right: 0;
  }
  .keyvisual .external li:nth-child(3) a {
    width: 69px;
  }
  .keyvisual .external a {
    width: 64px;
  }
  .keyvisual .external .contact__button {
    display: none;
  }
  .keyvisual .vision {
    font-size: 36px;
  }
  .keyvisual .scroll-down {
    flex-wrap: nowrap;
    align-items: center;
    top: calc(50% - 200px);
    left: 4vw;
    width: 395px;
    color: #696969;
    font-size: 14px;
    line-height: 1;
    transform-origin: left bottom;
  }
  .keyvisual .scroll-down .copyright {
    display: block;
    margin-right: 125px;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .keyvisual .scroll-down__arrow span {
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
  }
  .keyvisual .scroll-down__arrow img {
    filter: none;
  }
  .default-section {
    padding-right: 38px;
    padding-left: 38px;
  }
  .shadow-block {
    max-width: calc(100% - 76px);
    padding: 60px;
  }
  .index-section {
    padding-right: 38px;
    padding-left: 38px;
  }
  #select .index-section [class^=grid] h2, #select .index-section [class^=grid] h3 {
    font-size: 16px;
  }
  .detail-section {
    padding-right: 38px;
    padding-left: 38px;
  }
  .header .logo a img {
    width: 144px;
  }
  .header .logo a strong {
    font-size: 16px;
  }
  .header .header__nav {
    top: 26px;
  }
  .admin-bar .header .header__nav {
    top: 72px;
  }
  section#recruit video {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .recruit__block {
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 80px 30px;
  }
  .recruit__block a {
    width: 50%;
  }
  .recruit__block a.contact::after {
    top: 50%;
    right: 0;
    bottom: inherit;
    left: inherit;
    width: 0;
    height: calc(100% - 80px);
    border-bottom: none;
    border-right: 1px solid #D1CDC3;
    transform: translateY(-50%);
  }
  .home .contact__button {
    display: block;
  }
  .division-section {
    padding: 90px 0;
  }
  .division-section .grid {
    flex-wrap: nowrap;
  }
  .division-section .division-detail {
    padding-left: 9vw;
  }
  .division-section .division-detail h3 {
    font-size: 3vw;
  }
  .division-section .division-detail h4, .division-section .division-detail p {
    font-size: 2vw;
  }
  .new-project,
.creativity,
.ent-media {
    padding: 60px 0;
  }
  .newbusiness {
    margin-bottom: 120px;
  }
  .newbusiness figure {
    width: 40%;
    margin-right: 5vw;
    margin-left: auto;
  }
  .projectmanagement figure {
    width: 40%;
    margin-right: auto;
    margin-left: 5vw;
  }
  .stillness {
    margin: 0 auto 92px;
  }
  .thinkandsense {
    margin-bottom: 120px;
  }
  .thinkandsense {
    margin-bottom: 180px;
  }
  .thinkandsense figure .thinkandsense_img {
    width: 70%;
  }
  .thinkandsense figure .thinkandsense_movie {
    width: 52.46%;
    margin: -15vw 0 0 auto;
  }
  .thinkandsense figure {
    width: 48%;
    margin-right: -1vw;
    margin-left: 0;
  }
  .creative {
    margin-bottom: 120px;
  }
  .creative {
    margin-bottom: 180px;
  }
  .creative figure {
    width: 55.83%;
    margin-right: 0;
    margin-left: 30px;
  }
  .system figure {
    width: 40%;
    margin-right: 5vw;
    margin-left: auto;
  }
  .entertainment {
    margin-bottom: 120px;
  }
  .entertainment {
    margin-bottom: 180px;
  }
  .entertainment figure {
    width: 53.5%;
    margin-right: 0;
    margin-left: 0;
  }
  .entertainment figure .entertainment_movie1 {
    width: 86%;
    margin: 0 auto 20px;
  }
  .entertainment figure .entertainment_movie2 {
    width: 57.25%;
    margin: -38px auto;
    padding-bottom: 0;
  }
  .entertainment figure .entertainment_img {
    width: 38.5%;
    margin-right: 0;
    margin-left: -40px;
  }
  .media figure {
    width: 58.2%;
    margin-right: 0;
    margin-left: 0;
  }
  .media figure .media_img1 {
    width: 66.59%;
    margin-right: 100px;
  }
  .media figure .media_img2 {
    width: 55.42%;
    margin-top: -52px;
    margin-left: 50px;
  }
  .media figure .media_movie {
    width: 43%;
    margin-top: -52px;
    margin-right: 0;
  }
  .media .division-detail {
    margin-left: -8vw;
  }
  .ent-media::before {
    left: 0;
    width: 100%;
    background-size: contain;
    background-position: center center;
  }
  .about #project {
    padding-top: 172px;
    padding-bottom: 180px;
  }
  .about .about__img {
    width: 100%;
    margin-bottom: 64px;
    margin-right: 0;
    margin-left: 0;
  }
  .about .about__img--main {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .about .about__img figure {
    width: 50%;
  }
  .about .about__txt1 figure {
    width: 50%;
    max-width: 552px;
  }
  .about .about__txt1 div {
    width: 50%;
    max-width: 546px;
  }
  .about .about__txt2 h3 {
    width: 20%;
  }
  .about .about__txt2 div {
    width: 71%;
    margin-left: auto;
  }
  .about .grid3 {
    margin-top: 54px;
  }
  .about .beyond {
    margin: 0 auto 92px;
  }
  .about .dark-mode .award__block .adaa {
    padding-left: 130px;
    background-size: 90px 90px;
  }
  .about .dark-mode .ceo__block figure {
    width: 35.4%;
    max-width: 412px;
  }
  .about .dark-mode .ceo__block div {
    width: 60%;
    max-width: 690px;
    margin: 0;
    padding: 11% 6.7% 8.25% 8.25%;
  }
  .company .border-list {
    display: block;
  }
  .company .border-list > * {
    width: 100%;
  }
  .company .border-list > *:nth-child(2) {
    border-top: none;
  }
  .recruit .recruit__img {
    justify-content: flex-start;
    height: 26.6vw;
  }
  .webp .recruit .recruit__img {
    background-image: url(/assets/images/recruit/recruit_pc.webp);
  }
  .no-webp .recruit .recruit__img {
    background-image: url(/assets/images/recruit/recruit_pc.png);
  }
  .recruit .recruit__img h2 {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  .culture .grid .culture-detail {
    width: 48%;
  }
  .culture .grid figure {
    width: 48%;
    margin-right: 4%;
    margin-left: auto;
  }
  .culture .grid.row-reverse figure {
    width: 48%;
    margin-right: auto;
    margin-left: 4%;
  }
  .culture .tsujikosuke .grid2 > * {
    width: calc(50% - 1px);
    margin-right: 2px;
  }
  .culture .tsujikosuke .grid2 > *:last-child {
    margin-right: 0;
  }
  .masonry .grid-sizer {
    width: calc(50% - 12px);
  }
  .masonry .grid-item {
    width: calc(50% - 12px);
  }
  .masonry .grid-item.grid-item--width2 {
    width: 100%;
    margin-right: 0;
  }
  .masonry .grid-item.grid-item--width2:after {
    content: " ";
    display: table;
  }
  .masonry .grid-item.grid-item--width2:after {
    clear: both;
  }
  .masonry .grid-item.grid-item--width2 .image {
    float: left;
    width: calc(50% - 12px);
    margin-right: 24px;
  }
  .masonry .grid-item.grid-item--width3 {
    width: 100%;
    margin-right: 0;
  }
  .masonry .grid-item.grid-item--width3:after {
    content: " ";
    display: table;
  }
  .masonry .grid-item.grid-item--width3:after {
    clear: both;
  }
  .masonry .grid-item.grid-item--width3 .image {
    float: left;
    width: calc(33% - 12px);
    margin-right: 24px;
    margin-bottom: 0;
  }
}
@media (min-width: 960px) {
  body article header {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  body article footer {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  body section {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .keyvisual .vision {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .role {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .contactRole {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .contactConfirmRole {
    max-width: 1200px;
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media only screen and (min-width: 960px) {
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 24px;
  }
  .division-section .typewriter-heading {
    margin-bottom: 100px;
  }
  .numbering-heading {
    margin: 80px 0 20px;
    font-size: 44px;
  }
  .numbering-heading::before {
    top: -80px;
    left: -100px;
    font-size: 140px;
  }
  .outline-heading {
    font-size: 36px;
  }
  .inlineBtn {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .inlineBtn--primary {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .inlineBtn--action {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .inlineBtn--cancel {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .inlineBtn--reverse {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .inlineBtn--reverse {
    min-width: inherit;
    font-size: 14px;
  }
  .blockBtn {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .blockBtn--primary {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .blockBtn--action {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .blockBtn--cancel {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .blockBtn--reverse {
    max-width: 374px;
    font-size: 20px;
    font-weight: bold;
  }
  .blockBtn--reverse {
    min-width: inherit;
    font-size: 14px;
  }
  .halfInput input {
    width: calc(50% - 12px);
  }
  .halfInput input:not(:last-of-type) {
    margin-right: 24px;
  }
  .mw_wp_form .fileInput + .filename {
    display: inline-block;
    margin-left: 24px;
  }
  .halfInput input {
    width: calc(50% - 12px);
  }
  .halfInput input:not(:last-of-type) {
    margin-right: 24px;
  }
  .mw_wp_form .fileInput + .filename {
    display: inline-block;
    margin-left: 24px;
  }
  .birth select {
    margin: 0 8px 10px;
  }
  .form dl, .halfInput dl, .numberInput dl, .zipInput dl, .telInput dl, .birth dl {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .form dt, .halfInput dt, .numberInput dt, .zipInput dt, .telInput dt, .birth dt {
    width: 32%;
    max-width: 372px;
    padding-top: 10px;
  }
  .form dd, .halfInput dd, .numberInput dd, .zipInput dd, .telInput dd, .birth dd {
    width: 66%;
    max-width: 768px;
  }
  .form dd.no-input, .halfInput dd.no-input, .numberInput dd.no-input, .zipInput dd.no-input, .telInput dd.no-input, .birth dd.no-input {
    padding-top: 10px;
  }
  .form.confirm dt, .confirm.halfInput dt, .confirm.numberInput dt, .confirm.zipInput dt, .confirm.telInput dt, .confirm.birth dt, .form.confirm dd, .confirm.halfInput dd, .confirm.numberInput dd, .confirm.zipInput dd, .confirm.telInput dd, .confirm.birth dd {
    margin: 0;
    padding: 16px 0;
  }
  .mw_wp_form_confirm dd {
    padding-top: 10px;
  }
  .off1Grid {
    display: block;
    margin: 0;
  }
  .off1Grid > * {
    margin-bottom: 24px;
  }
  .off1Grid .off1Grid__cell {
    position: relative;
    min-height: 1px;
  }
  .off2Grid .off2Grid__cell {
    position: relative;
    min-height: 1px;
  }
  .off3Grid .off3Grid__cell {
    position: relative;
    min-height: 1px;
  }
  .off4Grid .off4Grid__cell {
    position: relative;
    min-height: 1px;
  }
  .imageGrid .imageGrid__img {
    padding: 10px;
    width: 130px;
  }
  .tb-only {
    display: none;
  }
  .pc-only {
    display: inherit;
  }
  .keyvisual .vision {
    margin-top: 180px;
    font-size: 36px;
  }
  .keyvisual .vision .otl-txt {
    -webkit-text-stroke: 1px #000;
  }
  .dark-mode .keyvisual .vision .otl-txt {
    -webkit-text-stroke: 1px #fff;
  }
  .default-section {
    padding-top: 40px;
  }
  .shadow-block {
    width: calc(100% - 48px);
    max-width: 966px;
    padding: 50px 86px 40px;
  }
  .index-section {
    padding-top: 40px;
  }
  .detail-section {
    padding-top: 40px;
  }
  .detail-section {
    max-width: 844px;
  }
  .detail-section figure {
    margin-right: 0;
    margin-left: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4.83434px 14.503px rgba(0, 0, 0, 0.3);
  }
  .header {
    padding: 20px 52px;
  }
  .header .logo a img {
    width: 180px;
  }
  .header .logo a strong {
    font-size: 18px;
  }
  .header .header__nav {
    top: 30px;
  }
  .admin-bar .header .header__nav {
    top: 62px;
  }
  .header .header__nav > ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    opacity: 0;
    padding: 74px;
    pointer-events: none;
  }
  .header .header__nav > ul li {
    text-align: center;
    opacity: 0;
  }
  .header .header__nav > ul li a {
    padding: 24px;
  }
  .header .header__nav > ul li a:hover {
    color: #9B0000;
  }
  .header .header__nav > ul .sns {
    padding: 40px 0;
  }
  .header .header__nav > ul .sns li {
    opacity: 1;
  }
  .header .header__nav .menu-trigger:hover span {
    background-color: #9B0000;
  }
  .header .header__nav .nav-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
  }
  .header .header__nav .menu-toggle:checked ~ ul {
    left: 0;
    padding: 10%;
    opacity: 1;
    pointer-events: inherit;
  }
  .header .header__nav .menu-toggle:checked ~ ul li {
    width: 25%;
  }
  .header .header__nav .menu-toggle:checked ~ .nav-bg {
    display: block;
  }
  .footer {
    padding-top: 42px;
  }
  .footer .footer__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 42px;
  }
  .footer .logo {
    width: 100%;
    margin: 0 0 40px;
  }
  .footer .logo a,
.footer .logo img {
    width: 180px;
  }
  .home .footer .pmark {
    position: absolute;
    bottom: -20px;
    right: 160px;
  }
  .footer .pmark {
    position: absolute;
    bottom: 0px;
    right: 10px;
  }
  .footer .copyright {
    text-align: center;
  }
  .footer .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 640px;
  }
  .footer .footer__nav ul {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .footer .footer__nav ul li {
    width: auto;
    margin-bottom: 0;
    font-size: 18px;
  }
  .footer .external {
    gap: 100px;
    margin-bottom: 0;
  }
  .footer .pagetop {
    top: -42px;
    right: 18px;
  }
  .recruit__block {
    max-width: 1164px;
    margin: 103px auto;
  }
  .recruit__block a {
    width: 50%;
    padding: 40px 64px;
  }
  .recruit__block a h2 {
    font-size: 32px;
    line-height: 1.34;
  }
  .recruit__block a p {
    font-size: 18px;
  }
  .division-section {
    padding: 120px 0;
  }
  .division-section .division-detail {
    padding-left: 100px;
  }
  .division-section .division-detail h3 {
    font-size: 24px;
  }
  .division-section .division-detail h4, .division-section .division-detail p {
    font-size: 18px;
  }
  .newbusiness {
    margin-bottom: 180px;
  }
  .newbusiness figure {
    max-width: 495px;
    margin-right: 80px;
    margin-left: auto;
  }
  .projectmanagement figure {
    max-width: 495px;
    margin-right: auto;
    margin-left: 120px;
  }
  .thinkandsense figure .thinkandsense_movie {
    width: 52.46%;
    margin: -200px 0 0 auto;
  }
  .thinkandsense figure {
    width: 55%;
    margin-right: 32px;
    margin-left: 0;
  }
  .creative figure {
    margin-left: 40px;
  }
  .system figure {
    max-width: 495px;
    margin-right: 80px;
    margin-left: auto;
  }
  .media .division-detail {
    margin-left: -6vw;
  }
  .about .grid3 p {
    font-size: 1.33vw;
  }
  .company .border-list {
    display: flex;
    margin-bottom: 80px;
  }
  .company .border-list > * {
    width: calc(50% - 12px);
  }
  .company .border-list > *:nth-child(2) {
    border-top: 1px solid #D1CDC3;
  }
  .company .map-block {
    width: calc(50% - 12px);
    margin-bottom: 40px;
  }
  .company .access-detail {
    width: calc(50% - 68px);
    align-self: center;
    margin-right: 40px;
  }
  .recruit .recruit__img h2 {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }
  section#wantedly {
    margin-top: 300px;
  }
  .contactCompleteRole .page-title {
    font-size: 32px;
  }
  #notfound .detail-section h1 {
    font-size: 48px;
  }
  #notfound .detail-section p {
    font-size: 24px;
  }
  .culture .numbering-heading span {
    font-size: 28px;
  }
  .masonry .grid-sizer {
    width: calc(33.3% - 16px);
  }
  .masonry .grid-item {
    width: calc(33.3% - 16px);
  }
  .masonry .grid-item.grid-item--width2 {
    width: calc(66.6% - 8px);
  }
}
@media only screen and (min-width: 960px) and (min-width: 560px) {
  .off1Grid {
    display: flex;
    flex-wrap: wrap;
  }
  .off1Grid .off1Grid__cell {
    width: calc((100% - (24px * (12 / 10 - 1))) * 10 / 12);
    margin-right: 24px;
  }
  .off2Grid .off2Grid__cell {
    width: calc((100% - (24px * (12 / 8 - 1))) * 8 / 12);
    margin-right: 24px;
  }
  .off3Grid .off3Grid__cell {
    width: calc((100% - (24px * (12 / 6 - 1))) * 6 / 12);
    margin-right: 24px;
  }
  .off4Grid .off4Grid__cell {
    width: calc((100% - (24px * (12 / 4 - 1))) * 4 / 12);
    margin-right: 24px;
  }
}
@media only screen and (min-width: 1164px) {
  .index-section [class^=grid] p.copyright {
    bottom: 34px;
    left: 34px;
    width: calc(100% - 68px);
    zoom: 0.6;
  }
  .media .division-detail {
    margin-left: 0;
  }
  .about .grid3 p {
    font-size: inherit;
  }
}
@media only screen and (min-width: 1200px) {
  #select .index-section [class^=grid] h2, #select .index-section [class^=grid] h3 {
    font-size: 18px;
  }
  .culture .grid .culture-detail {
    max-width: 550px;
  }
  .culture .grid figure {
    max-width: 550px;
    margin-right: 64px;
  }
  .culture .grid.row-reverse figure {
    max-width: 550px;
    margin-left: 64px;
  }
}
@media only screen and (min-width: 1520px) {
  .footer .pmark {
    width: 100px;
    height: 100px;
  }
  .home .contact__button {
    width: 110px;
    height: 110px;
  }
}
@media only screen and (min-width: 560px) and (max-height: 56.25vw) {
  .keyvisual .mask {
    -webkit-mask-position-x: calc((100vw - 143.52vh) / 2);
  }
  .keyvisual .mask video {
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media only screen and (max-device-width: 1164px) and (orientation: portrait) {
  .keyvisual {
    margin-bottom: 4600px;
  }
  .keyvisual .movie {
    margin-bottom: 0;
  }
  .keyvisual .movie.no-mask .mask {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .keyvisual .movie.no-fixed {
    position: absolute;
    top: calc(4115px - 33.75vw);
    margin-bottom: 0;
  }
  .keyvisual .movie.no-fixed ~ .vision-block {
    position: relative;
    top: calc(4115px - 33.75vw + 100vh - 20vw - 50px);
  }
  .keyvisual .movie .mask {
    height: calc(100vh - 20vw - 50px);
    padding-bottom: 0;
    -webkit-mask-size: 217%;
            mask-size: 217%;
    overflow: hidden;
  }
  .keyvisual .movie .mask video {
    left: calc(50% - (100vh - 20vw - 50px) / 0.5625 / 2);
    width: auto;
  }
  .keyvisual .vision-block {
    position: fixed;
    top: calc(100vh - 20vw - 50px);
    left: 0;
    z-index: 0;
    width: 100%;
    margin-top: 0;
  }
}
@media only screen and (max-device-width: 960px) and (orientation: landscape) {
  .header .header__nav .menu-toggle:checked ~ ul {
    touch-action: auto;
  }
}
/*# sourceMappingURL=style.css.map */