@charset "UTF-8";
/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */
/* These browsers currently include
** Android 4.3-4.4+,
** Chrome 39-40+,
** Firefox 34-35+,
** Internet Explorer 10-11+,
** iOS 7-8+,
** Safari 7-8+,
** Windows Phone 8.1+.
*/
/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */
/* Display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
@import url("https://fonts.googleapis.com/css?family=Montserrat");
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio, canvas, progress, video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template, [hidden] {
  display: none;
}

/* Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
   ========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */
*, ::before, ::after {
  background-repeat: no-repeat;
  /* 1 */
  box-sizing: inherit;
  /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritence in all browsers (opinionated).
 */
::before, ::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Add a flattened line height in all browsers (opinionated).
 * 4. Prevent font size adjustments after orientation changes in IE and iOS.
 */
html {
  box-sizing: border-box;
  /* 1 */
  cursor: default;
  /* 2 */
  font-family: sans-serif;
  /* 3 */
  line-height: 1.5;
  /* 3 */
  -ms-text-size-adjust: 100%;
  /* 4 */
  -webkit-text-size-adjust: 100%;
  /* 5 */
}

/* Sections (https://www.w3.org/TR/html5/sections.html)
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Correct the font sizes and margins on `h1` elements within
 * `section` and `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: .67em 0;
}

/* Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
   ========================================================================== */
/**
 * 1. Correct font sizing inheritance and scaling in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * 1. Correct the height in Firefox.
 * 2. Add visible overflow in Edge and IE.
 */
hr {
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol, nav ul {
  list-style: none;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Add a bordered underline effect in all browsers.
 * 2. Remove text decoration in Firefox 40+.
 */
abbr[title] {
  border-bottom: 1px dotted;
  /* 1 */
  text-decoration: none;
  /* 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;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct colors in IE 9-.
 */
mark {
  background-color: #ffff00;
  color: #000000;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the font size in all browsers.
 */
small {
  font-size: 83.3333%;
}

/**
 * Change the positioning on superscript and subscript elements
 * in all browsers (opinionated).
 * 1. Correct the font size in all browsers.
 */
sub, sup {
  font-size: 83.3333%;
  /* 1 */
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */
::-moz-selection, ::-moz-selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none;
}
::-moz-selection, ::selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none;
}

/* Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
   ========================================================================== */
/*
 * Change the alignment on media elements in all browers (opinionated).
 */
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/**
 * Hide the overflow in IE.
 */
/* Links (https://www.w3.org/TR/html5/links.html#links)
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

a:hover {
  outline-width: 0;
}

/**
 * Remove the outline when hovering in all browsers (opinionated).
 */
/* Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
   ========================================================================== */
/*
 * Remove border spacing in all browsers (opinionated).
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* transform-style:  (https://www.w3.org/TR/html5/forms.html)
   ========================================================================== */
/**
 * 1. Remove the default styling in all browsers (opinionated).
 * 3. Remove the margin in Firefox and Safari.
 */
button, input, select, textarea {
  background-color: transparent;
  /* 1 */
  border-style: none;
  /* 1 */
  color: inherit;
  /* 1 */
  font-size: 1em;
  /* 1 */
  margin: 0;
  /* 3 */
}

/**
 * Correct the overflow in IE.
 * 1. Correct the overflow in Edge.
 */
button, input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance in Edge, Firefox, and IE.
 * 1. Remove the inheritance in Firefox.
 */
button, select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent the 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"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Correct the focus styles unset by the previous rule.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the border, margin, and padding in all browsers.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 2 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Remove the vertical scrollbar in IE.
 * 2. Change the resize direction on textareas in all browsers (opinionated).
 */
textarea {
  overflow: auto;
  /* 1 */
  resize: vertical;
  /* 2 */
}

/**
 * Remove the padding in IE 10-.
 */
[type="checkbox"], [type="radio"] {
  padding: 0;
}

/**
 * Correct the cursor style on increment and decrement buttons in Chrome.
 */
::-webkit-inner-spin-button, ::-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 for OS X.
 */
::-webkit-search-cancel-button, ::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style on placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}

/**
 * 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 */
}

/* WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
   ========================================================================== */
/**
 * Change the cursor on busy elements (opinionated).
 */
[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements (opinionated).
 */
[aria-disabled] {
  cursor: default;
}

/* User interaction (https://www.w3.org/TR/html5/editing.html)
   ========================================================================== */
/*
 * Remove the tapping delay on clickable elements (opinionated).
 * 1. Remove the tapping delay in IE 10.
 */
a, area, button, input, label, select, textarea, [tabindex] {
  -ms-touch-action: manipulation;
  /* 1 */
  touch-action: manipulation;
}

/*
 * Change the display on visually hidden accessible elements (opinionated).
 */
[hidden][aria-hidden="false"] {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}

[hidden][aria-hidden="false"]:focus {
  clip: auto;
}

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote {
  margin: 0;
  padding: 0;
  /* margin&padding reset */
  font-style: normal;
  font-weight: normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0;
}

table {
  border-collapse: collapse;
  font-size: small;
  margin: 0;
  empty-cells: show;
}

hr, .areaAnchor, .anchor {
  display: none;
}

img {
  vertical-align: bottom;
  border: none;
  /* img do not want a border */
}

li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}

mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

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

/* acronyms and abbreviations styles
-------------------------------------*/
acronym, abbr {
  cursor: help;
}

/* word break
-------------------------------------*/
p {
  word-break: normal;
}

/* image position
-------------------------------------*/
img {
  vertical-align: bottom;
}

/*
===== 2: form setting ===========================
*/
option {
  padding-right: 10px;
}

input, select {
  vertical-align: middle;
}

#header .logo-main a, #footer .block-bnr a {
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background-repeat: no-repeat;
}

#footer .block-bnr a {
  transition: opacity .2s linear;
}

#footer .block-bnr a:hover {
  opacity: 0.7;
}

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
/*-------------------------------------------> header */
#header {
  min-width: 1050px;
  width: 100%;
  height: 80px;
  background: #fff;
  overflow: hidden;
}

#header:after {
  content: "";
  display: block;
  clear: both;
}

#header .logo-main a {
  float: left;
  width: 262px;
  height: 35px;
  margin: 22px 0 0 36px;
  background: url(/common/img/logo_main.svg) no-repeat left top;
}

#header #nav ul {
  float: right;
}

#header #nav ul:after {
  content: "";
  display: block;
  clear: both;
}

#header #nav ul li {
  float: left;
}

#header #nav ul li a {
  font-size: 0;
  color: #333;
  transition: color .2s linear;
  display: block;
  padding: 25px 0;
  position: relative;
}

#header #nav ul li a::before {
  content: '';
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 13px;
}

#header #nav ul li a::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 8px;
  margin-left: 12px;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
  background: url(/common/img/ar_rd_nav.svg) no-repeat left center;
}

#header #nav ul li a .txt-ja {
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 2.28571em;
  color: #999;
  position: absolute;
  left: 44px;
  top: 25px;
  z-index: 1;
}

#header #nav ul li a .f-ms {
  position: relative;
  z-index: 2;
  font-size: 13px;
  /* legacy */
  font-size: 0.8125rem;
  /* modern */
  line-height: 2.46154em;
  color: BASE;
  background: #fff;
  transition: opacity .2s linear;
  display: inline-block;
  vertical-align: middle;
}

#header #nav ul li a:hover::after {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}

#header #nav ul li a:hover .f-ms {
  opacity: 0;
}

#header #nav ul li.nav-service a {
  margin-right: 28px;
  letter-spacing: 0.06em;
}

#header #nav ul li.nav-service a::before {
  background: url(/common/img/icon_hd_01.svg) no-repeat center center;
  background-size: 100% auto;
}

#header #nav ul li.nav-work a {
  margin-right: 28px;
  letter-spacing: 0.1em;
}

#header #nav ul li.nav-work a::before {
  background: url(/common/img/icon_hd_02.svg) no-repeat center center;
  background-size: 100% auto;
}

#header #nav ul li.nav-company a {
  margin-right: 28px;
  letter-spacing: 0.06em;
}

#header #nav ul li.nav-company a::before {
  background: url(/common/img/icon_hd_03.svg) no-repeat center center;
  background-size: 100% auto;
}

#header #nav ul li.nav-recruit {
  background: #d91616;
}

#header #nav ul li.nav-recruit a {
  width: 195px;
  height: 80px;
  letter-spacing: 0.06em;
  padding: 25px 0 25px 30px;
}

#header #nav ul li.nav-recruit a .txt-ja, #header #nav ul li.nav-recruit a .f-ms {
  color: #fff;
}

#header #nav ul li.nav-recruit a .txt-ja {
  left: 74px;
}

#header #nav ul li.nav-recruit a .f-ms {
  background: #d91616;
}

#header #nav ul li.nav-recruit a::before {
  background: url(/common/img/icon_hd_04.svg) no-repeat center center;
  background-size: 100% auto;
}

#header #nav ul li.nav-recruit a::after {
  background: url(/common/img/ar_wt_nav.svg) no-repeat left center;
}

body[data-cate="service"] #header #nav ul li.nav-service a::before {
  background: url(/common/img/icon_hd_c_01.svg) no-repeat center center;
  background-size: 100% auto;
}

body[data-cate="facility"] #header #nav ul li.nav-work a::before {
  background: url(/common/img/icon_hd_c_02.svg) no-repeat center center;
  background-size: 100% auto;
}

body[data-cate="company"] #header #nav ul li.nav-company a::before {
  background: url(/common/img/icon_hd_c_03.svg) no-repeat center center;
  background-size: 100% auto;
}

body[data-cate="recruit"] #header #nav ul li.nav-recruit a::before {
  background: url(/common/img/icon_hd_c_04.svg) no-repeat center center;
  background-size: 100% auto;
}

/*-------------------------------------------> nav */
/*--------------------------------------------------------------- */
/* 全体で使用する common style を記述
/*--------------------------------------------------------------- */
@font-face {
  font-family: "NotoSansCJKjp";
  font-style: normal;
  font-weight: normal;
  src: local("NotoSansCJKjp-Light.otf"), url("/font/NotoSansCJKjp.woff2") format("woff2"), url("/font/NotoSansCJKjp.woff") format("woff");
}

@font-face {
  font-family: 'NotoSansCJKjp-R';
  font-style: normal;
  font-weight: 400;
  src: local("NotoSansCJKjp-Regular.otf"), url("/font/NotoSansCJKjp-R.woff2") format("woff2"), url("/font/NotoSansCJKjp-R.woff") format("woff");
}

/*-------------------------------------------> body style */
body {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  color: #333;
  font-size: 12px;
  /* legacy */
  font-size: 0.75rem;
  /* modern */
  line-height: 2em;
  letter-spacing: 0.06em;
  font-family: 'NotoSansCJKjp', YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
  -webkit-font-kerning: normal;
          font-kerning: normal;
  overflow-x: hidden;
}

.f-ms {
  font-family: 'Montserrat', sans-serif;
}

.bold {
  font-family: 'NotoSansCJKjp-R', 'NotoSansCJKjp', sans-serif;
}

.hide {
  display: none;
}

.is-hidden {
  overflow: hidden;
}

/*-------------------------------------------> link style */
a {
  outline: none;
  cursor: default;
  color: #333;
  cursor: pointer;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #999;
}

a:active {
  text-decoration: none;
}

/*-------------------------------------------> breadcrumbs style */
#breadcrumbs {
  width: 100%;
}

#breadcrumbs ol {
  width: 960px;
  margin: 0 auto;
  font-size: 0;
}

#breadcrumbs ol li {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  /* legacy */
  font-size: 0.75rem;
  /* modern */
  line-height: 4.16667em;
  line-height: 50px;
  margin-right: 12px;
}

#breadcrumbs ol li a {
  color: #808080;
}

#breadcrumbs ol li a::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 12px;
  margin-left: 12px;
  background: url(/common/img/ar_breadcrumbs.png) no-repeat left 3px;
  background-size: 100% auto;
}

/*-------------------------------------------> contents style */
.block-content-inner {
  width: 1080px;
  margin: auto;
}

.block-sec-inner {
  width: 960px;
  margin: auto;
}

.block-sec-inner > h1 {
  font-size: 16px;
  /* legacy */
  font-size: 1rem;
  /* modern */
  line-height: 1em;
  text-align: center;
  letter-spacing: 0.2em;
}

.block-inner {
  width: 840px;
  margin: auto;
}

/*-------------------------------------------> MORE button */
.btn-more {
  border-top: 1px solid #d9d9d9;
  display: block;
  text-align: right;
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 2.85714em;
  line-height: 58px;
  letter-spacing: 0.2em;
}

.btn-more::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 8px;
  margin-left: 22px;
  background: url(/common/img/ar_rd_nav.svg) no-repeat left center;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.btn-more:hover::after {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}

/*-------------------------------------------> title style */
.m-cate-title {
  width: 240px;
  text-align: center;
}

.m-cate-title figure {
  margin-bottom: 24px;
}

.m-cate-title h3 {
  color: #d91616;
  font-size: 15px;
  /* legacy */
  font-size: 0.9375rem;
  /* modern */
  line-height: 1em;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.m-cate-title h2 {
  color: #d91616;
  font-size: 24px;
  /* legacy */
  font-size: 1.5rem;
  /* modern */
  line-height: 1em;
  margin-bottom: 33px;
}

.m-cate-title.l-small {
  width: 100%;
  margin: auto;
}

.m-cate-title.l-small figure {
  margin-bottom: 10px;
}

.m-cate-title.l-small figure svg {
  padding: 1px;
}

.m-cate-title.l-small figure svg .path {
  fill: #d91616;
}

.m-cate-title.l-small h3 {
  font-size: 13px;
  /* legacy */
  font-size: 0.8125rem;
  /* modern */
  line-height: 1em;
  margin-bottom: 20px;
}

.m-cate-title.l-small .txt {
  text-align: center;
  margin-bottom: 20px;
}

.m-cate-title.l-content {
  width: 960px;
  margin: 0 auto;
  padding: 92px 0 60px;
}

.m-cate-title.l-content h2 {
  margin-bottom: 0;
  letter-spacing: 0.14em;
}

.m-cate-title.l-content h2 span {
  font-size: 18px;
  /* legacy */
  font-size: 1.125rem;
  /* modern */
  line-height: 2.77778em;
}

/*-------------------------------------------> red botton style */
.btn-rd {
  position: relative;
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 3em;
  letter-spacing: 0.2em;
  color: #fff;
  background: #d91616;
  padding-left: 24px;
  display: block;
  transition: background .2s linear;
}

.btn-rd::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 22px;
  height: 14px;
  background: url(/common/img/ar_wt_nav.svg) no-repeat right center;
  background-size: 20px auto;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.btn-rd.link-blank::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 17px;
  height: 28px;
  background: url(/common/img/icon_wt_blank.png) no-repeat center center;
  background-size: 100% auto;
}

.btn-rd:hover {
  background: #eb1717;
  color: #fff;
}

.btn-rd:hover::after {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}

.btn-rd.l-txt-center {
  text-align: center;
}

.btn-wt {
  position: relative;
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 3em;
  letter-spacing: 0.2em;
  color: #d91616;
  background: #fff;
  padding-left: 24px;
  display: block;
  transition: color .2s linear;
}

.btn-wt::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 22px;
  height: 14px;
  background: url(/common/img/ar_rd_nav.svg) no-repeat right center;
  background-size: 20px auto;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.btn-wt:hover {
  color: #ff6666;
}

.btn-wt:hover::after {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
}

.link-blank::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-top: -6px;
  margin-left: 10px;
  width: 17px;
  height: 28px;
  background: url(/common/img/icon_rd_blank.png) no-repeat center center;
  background-size: 100% auto;
}

/*-------------------------------------------> テレコリスト */
div[class^="alternate-list"] dl {
  width: 100%;
  padding: 0 30px;
  display: table;
}

div[class^="alternate-list"] dl dt, div[class^="alternate-list"] dl dd {
  display: table-cell;
  vertical-align: top;
}

.alternate-list-gr dl:nth-child(odd) {
  background: #f5f5f7;
}

.alternate-list-gr dl:nth-child(even) {
  background: #fff;
}

.alternate-list-wt dl:nth-child(odd) {
  background: #fff;
}

.alternate-list-wt dl:nth-child(even) {
  background: #f5f5f7;
}

/*-------------------------------------------> category main visual */
.sec-mv-wrap {
  width: 100%;
  height: 360px;
  display: table;
  overflow: hidden;
}

.sec-mv-wrap .m-cate-title {
  display: table-cell;
  vertical-align: middle;
  margin: auto;
}

.sec-mv-wrap .m-cate-title figure svg {
  padding: 1px;
}

.sec-mv-wrap .m-cate-title figure svg .path {
  fill: rgba(255, 255, 255, 0);
  stroke: white;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: DASH-W 3s ease-in-out 1s alternate forwards;
          animation: DASH-W 3s ease-in-out 1s alternate forwards;
}

body.ie .sec-mv-wrap .m-cate-title figure svg .path {
  opacity: 0;
  fill: white;
  -webkit-animation: ie-fadein 3s ease-in-out 1s alternate forwards;
          animation: ie-fadein 3s ease-in-out 1s alternate forwards;
}

.sec-mv-wrap .m-cate-title h2, .sec-mv-wrap .m-cate-title h3 {
  color: #fff;
}

.sec-mv-wrap .m-cate-title h2 {
  margin-bottom: 0;
}

/*-------------------------------------------> サブカテゴリタブ */
.sec-tab-wrap {
  border-top: 1px solid #d9d9d9;
}

.sec-tab-wrap ul {
  display: table;
  height: 120px;
  table-layout: fixed;
}

.sec-tab-wrap ul li {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.sec-tab-wrap ul li::after {
  content: '';
  width: 1px;
  height: 63px;
  background: #d9d9d9;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.sec-tab-wrap ul li:first-child::after {
  display: none;
}

.sec-tab-wrap ul li a {
  display: table;
  text-align: center;
  height: 100%;
  width: 100%;
}

.sec-tab-wrap ul li a .txt-wrap {
  display: table-cell;
  vertical-align: middle;
}

.sec-tab-wrap ul li a .txt-sub {
  font-size: 12px;
  /* legacy */
  font-size: 0.75rem;
  /* modern */
  line-height: 1.5em;
  margin-bottom: 8px;
}

.sec-tab-wrap ul li a .txt-sub.f-ms {
  font-size: 13px;
  /* legacy */
  font-size: 0.8125rem;
  /* modern */
  line-height: 1.38462em;
  letter-spacing: 0.1em;
}

.sec-tab-wrap ul li a .txt-main {
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 1.71429em;
  letter-spacing: 0.06em;
}

.sec-tab-wrap ul li.current::after {
  display: none;
}

.sec-tab-wrap ul li.current a {
  background: #bebfbf;
  color: #fff;
}

.sec-tab-wrap ul li.current a:hover {
  cursor: default;
}

.sec-tab-wrap ul li.current + li::after {
  display: none;
}

/*-------------------------------------------> ACCESS */
.sec-access-wrap {
  background: #f5f5f7;
}

.block-map-inner {
  position: relative;
  width: 960px;
  margin: auto;
}

.block-map-inner .m-cate-title h3 {
  margin-bottom: 15px;
}

.block-map-inner .m-cate-title .txt {
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 2.14286em;
  text-align: center;
}

.block-map-inner .link-blank {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 13px;
  /* legacy */
  font-size: 0.8125rem;
  /* modern */
  line-height: 2.30769em;
  letter-spacing: 0.06em;
}

.block-map-wrap {
  width: 100%;
  height: 360px;
}

.block-map-wrap iframe {
  width: 100%;
}

/*-------------------------------------------> サークル */
.m-circle-anim {
  width: 780px;
  height: 270px;
  margin: 0 auto 60px;
  position: relative;
}

.m-circle-anim li {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -135px;
  border: 1px solid #d91616;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  display: table;
  transition: -webkit-transform 1s ease-out;
  transition: transform 1s ease-out;
  transition: transform 1s ease-out, -webkit-transform 1s ease-out;
}

.m-circle-anim li p {
  text-align: center;
  color: #d91616;
  font-size: 17px;
  /* legacy */
  font-size: 1.0625rem;
  /* modern */
  line-height: 1.94118em;
  letter-spacing: 0.06em;
  display: table-cell;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .5s linear;
  transition-delay: 1.3s;
}

.m-circle-anim.is-anim li.circle-left {
  -webkit-transform: translateX(-255px);
      -ms-transform: translateX(-255px);
          transform: translateX(-255px);
}

.m-circle-anim.is-anim li.circle-right {
  -webkit-transform: translateX(255px);
      -ms-transform: translateX(255px);
          transform: translateX(255px);
}

.m-circle-anim.is-anim li p {
  opacity: 1;
}

/*-------------------------------------------> module : 2column */
[class^="m-2clm-"], [class^="m-3clm-"] {
  width: 100%;
}

[class^="m-2clm-"] .box .clm-title, [class^="m-3clm-"] .box .clm-title {
  color: #d91616;
  font-size: 20px;
  /* legacy */
  font-size: 1.25rem;
  /* modern */
  line-height: 1.8em;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

[class^="m-2clm-"] .box .clm-title span, [class^="m-3clm-"] .box .clm-title span {
  font-size: 18px;
  /* legacy */
  font-size: 1.125rem;
  /* modern */
  line-height: 2em;
}

[class^="m-2clm-"] .box .clm-txt, [class^="m-3clm-"] .box .clm-txt {
  text-align: justify;
  font-size: 14px;
  /* legacy */
  font-size: 0.875rem;
  /* modern */
  line-height: 2.14286em;
  letter-spacing: 0.06em;
}

[class^="m-2clm-"] .box dl, [class^="m-3clm-"] .box dl {
  letter-spacing: 0.06em;
}

[class^="m-2clm-"] .box dl dt, [class^="m-3clm-"] .box dl dt {
  font-size: 13px;
  /* legacy */
  font-size: 0.8125rem;
  /* modern */
  line-height: 1.38462em;
  margin-bottom: 12px;
}

[class^="m-2clm-"] .box dl dt::before, [class^="m-3clm-"] .box dl dt::before {
  content: '◎ ';
  color: #d91616;
}

[class^="m-2clm-"] .box dl dd, [class^="m-3clm-"] .box dl dd {
  font-size: 12px;
  /* legacy */
  font-size: 0.75rem;
  /* modern */
  line-height: 1.5em;
  margin-bottom: 18px;
}

[class^="m-2clm-"] .box .btn-more, [class^="m-3clm-"] .box .btn-more {
  margin-top: 32px;
}

/*-------------------------------------------> module A : 2column */
.m-2clm-even:after {
  content: "";
  display: block;
  clear: both;
}

.m-2clm-even .box {
  width: 392px;
  float: left;
}

.m-2clm-even .box:nth-child(odd) {
  margin-right: 56px;
}

.m-2clm-even .box figure {
  margin-bottom: 30px;
}

/*-------------------------------------------> module B : 2column uneven */
.m-2clm-uneven {
  display: table;
}

.m-2clm-uneven .box {
  width: 240px;
  display: table-cell;
  vertical-align: middle;
}

.m-2clm-uneven .box:first-child {
  box-sizing: content-box;
  padding-right: 60px;
}

.m-2clm-uneven .box.large {
  width: 540px;
}

.m-2clm-uneven .box figure {
  padding-top: 10px;
  margin-bottom: 30px;
}

/*-------------------------------------------> module C : 2column table */
.m-2clm-table {
  display: table;
}

.m-2clm-table .box {
  display: table-cell;
  vertical-align: middle;
}

.m-2clm-table .box:nth-child(odd) {
  padding-right: 60px;
}

/*-------------------------------------------> module D : 3column table */
.m-3clm-table {
  display: table;
}

.m-3clm-table .box {
  display: table-cell;
  vertical-align: top;
  padding-right: 60px;
}

.m-3clm-table .box:last-child {
  padding-right: 0;
}

.m-3clm-table .box figure {
  margin-bottom: 30px;
}

.m-3clm-table .box .clm-title {
  font-size: 18px;
  /* legacy */
  font-size: 1.125rem;
  /* modern */
  line-height: 2em;
}

.js-fadein {
  opacity: 0;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  transition: all 1s ease-in-out;
  transition-delay: .6s;
}

.js-fadein.is-fade {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/*-------------------------------------------> keyframes */
@-webkit-keyframes DASH-W {
  0% {
    stroke-dashoffset: 1000;
  }
  80% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0);
    stroke: white;
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
    stroke: rgba(255, 255, 255, 0);
  }
}
@keyframes DASH-W {
  0% {
    stroke-dashoffset: 1000;
  }
  80% {
    stroke-dashoffset: 500;
    fill: rgba(255, 255, 255, 0);
    stroke: white;
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
    stroke: rgba(255, 255, 255, 0);
  }
}

@-webkit-keyframes DASH-R {
  0% {
    stroke-dashoffset: 1000;
  }
  80% {
    stroke-dashoffset: 500;
    fill: rgba(217, 22, 22, 0);
    stroke: #d91616;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #d91616;
    stroke: rgba(217, 22, 22, 0);
  }
}

@keyframes DASH-R {
  0% {
    stroke-dashoffset: 1000;
  }
  80% {
    stroke-dashoffset: 500;
    fill: rgba(217, 22, 22, 0);
    stroke: #d91616;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #d91616;
    stroke: rgba(217, 22, 22, 0);
  }
}

@-webkit-keyframes ie-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ie-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*-------------------------------------------> plugin style */
/*-------------------------------------------> footer */
#footer {
  width: 100%;
  border-bottom: 4px solid #d91616;
  position: relative;
  padding-top: 12px;
}

#footer:after {
  content: "";
  display: block;
  clear: both;
}

#footer .btn-pagetop {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  bottom: -2px;
  background: #d91616;
  transition: background .2s linear;
}

#footer .btn-pagetop:hover {
  background: #eb1717;
}

#footer .block-bnr {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}

#footer .block-bnr a {
  height: 96px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 12px;
  opacity: 1;
}

#footer .block-bnr a:first-child {
  border-right: 1px solid #d9d9d9;
}

#footer .block-bnr a.bnr-denso {
  width: 300px;
  background: url(/common/img/logo_denso.svg) no-repeat center center;
  background-size: 167px auto;
}

#footer .block-bnr a.bnr-todex {
  width: 300px;
  background: url(/common/img/logo_todex.svg) no-repeat center center;
  background-size: 145px auto;
}
#footer .block-bnr a.bnr-m-tokyo {
  width: 300px;
  background: url(/common/img/logo_motoridetokyo.png) no-repeat center center;
  background-size: 145px auto;
}

#footer .block-ft-inner {
  width: 960px;
  margin: auto;
  padding: 22px 0;
}

#footer .block-ft-inner:after {
  content: "";
  display: block;
  clear: both;
}

#footer .block-ft-nav {
  float: right;
  font-size: 0;
  height: 12px;
}

#footer .block-ft-nav a {
  display: inline-block;
  vertical-align: top;
  font-size: 11px;
  /* legacy */
  font-size: 0.6875rem;
  /* modern */
  line-height: 1.09091em;
  line-height: 12px;
  padding: 0 12px;
}

#footer .block-ft-nav a:nth-child(odd) {
  border-right: 1px solid #d9d9d9;
}

#footer .block-ft-nav a:last-child {
  padding: 0 0 0 12px;
}

#footer .txt-copy {
  float: left;
  font-size: 11px;
  /* legacy */
  font-size: 0.6875rem;
  /* modern */
  line-height: 1.09091em;
  line-height: 12px;
  letter-spacing: 0.06em;
}