@charset 'UTF-8';

/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/* =====================================================
 * Base
 * ================================================== */


/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: sans-serif;
}

body {
    margin: 0;
}

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

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-family: 'NotoSansR';
}

dfn {
    font-style: italic;
}

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

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

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    color: inherit;
    font: inherit;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
    cursor: pointer;
    -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input {
    line-height: normal;
}

input[type='checkbox'],
input[type='radio'] {
    box-sizing: border-box;
    padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    height: auto;
}

input[type='search'] {
    box-sizing: content-box;
    -webkit-appearance: textfield;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
    border: 1px solid #c0c0c0;
}

legend {
    padding: 0;
    border: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-family: 'NotoSansR';
}

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

td,
th {
    padding: 0;
}


/* -----------------------------------------------------
 * Font
 * -------------------------------------------------- */

@font-face {
    font-family: 'NotoSansL';
    font-weight: 300;
    font-style: normal;
    src: url('/shared/assets/font/NotoSansJP-Subset-Light.woff2') format('woff2'), url('/shared/assets/font/NotoSansJP-Subset-Light.woff') format('woff');
}

@font-face {
    font-family: 'NotoSansR';
    font-weight: 400;
    font-style: normal;
    src: url('/shared/assets/font/NotoSansJP-Subset-Regular.woff2') format('woff2'), url('/shared/assets/font/NotoSansJP-Subset-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-weight: normal;
    font-style: normal;
    src: url('/shared/assets/font/Gotham-Medium_Web.woff') format('woff');
}

@font-face {
    font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
    src: url('/shared/assets/font/Gotham-Bold_Web.woff') format('woff');
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/* -----------------------------------------------------
 * Init
 * -------------------------------------------------- */

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}


/* normalize overwrite */

html {
    position: relative;
    min-height: 100%;
    font-family: 'NotoSansL';
    font-size: 62.5%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.22;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
}

a {
    color: #0c56a6;
    text-decoration: underline;
    transition: opacity 0.2s ease-in-out;
}

a:hover {
    opacity: 0.7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
figure,
figcaption,
small {
    margin: 0;
    font-size: 100%;
    font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.22;
}

img {
    vertical-align: bottom;
}

ul,
ol {
    list-style-type: none;
    padding: 0;
}

th {
    font-weight: normal;
    text-align: left;
}


/* =====================================================
 * Layout
 * ================================================== */


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-header
name: l-010
category: layout
---

```html
<header class="l-header">
<div class="l-header-inner">
<h1 class="l-header-logo"><a href="../../../">プロジェクト名</a></h1>

<button class="l-header-toggle">MENU</button>

<div class="l-header-menu">
<div class="l-header-menu-inner">
<nav class="l-header-nav">
<ul class="mod-header-nav">
<li><a href="DUMMY">ヘッダーナビ1</a></li>
<li><a href="DUMMY">ヘッダーナビ2</a></li>
<li><a href="DUMMY">ヘッダーナビ3</a></li>
<li><a href="DUMMY">ヘッダーナビ4</a></li>
<li><a href="DUMMY">ヘッダーナビ5</a></li>
<li><a href="DUMMY">ヘッダーナビ6</a></li>
<li><a href="DUMMY">ヘッダーナビ7</a></li>
<li><a href="DUMMY">ヘッダーナビ8</a></li>
</ul>
</nav><!-- /.l-header-nav -->
</div><!-- /.l-header-menu-inner -->
</div><!-- /.l-header-menu -->

</div><!-- /.l-header-inner -->
</header>
```
*/

.l-header {
    width: 100%;
}

.l-header-inner {
    position: relative;
}

.l-header-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4.53125vw 17.96875vw 2.96875vw 4.6875vw;
}

.l-header-subnav {
    display: flex;
}

.l-header-subnav li:nth-child(1) {
    flex: 1 0 auto;
    width: 174px;
    font-size: 1.8rem;
}

.l-header-subnav li:nth-child(1) a {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.l-header-subnav li:nth-child(2) {
    position: relative;
}

.l-header-subnav li:nth-child(2) button {
    outline: none;
    overflow: hidden;
    box-sizing: border-box;
    width: 6.875vw;
    height: 0;
    margin: 0;
    padding: 0;
    padding-top: 100%;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background: url(../img/common/ico_search_01_sp.png) no-repeat 50% 50%, url(../img/common/ico_close_01.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 200%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.l-header-subnav li:nth-child(2) button::-ms-clear {
    display: none;
}

.l-header-subnav li:nth-child(2) button::-ms-reveal {
    display: none;
}

.l-header-subnav li:nth-child(2) button::-ms-expand {
    display: none;
}

.is-search-open .l-header-subnav li:nth-child(2) button {
    background-size: 0 0, 5.3125vw auto;
}

.l-header-subnav li:nth-child(2):after {
    content: '';
    position: absolute;
    bottom: -4.53125vw;
    left: 50%;
    width: 0;
    height: 0;
    border-width: 0 2.1875vw 2.03125vw 2.1875vw;
    border-style: solid;
    border-color: transparent transparent #e6e6e6 transparent;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.is-search-open .l-header-subnav li:nth-child(2):after {
    opacity: 1;
}

.l-header-subnav li:nth-child(3) {
    position: absolute;
    z-index: 100;
    top: 5.3125vw;
    right: 5.78125vw;
    align-items: center;
    height: 7.03125vw;
}

.is-menu-open .l-header-subnav li:nth-child(3) {
    position: fixed;
}

.l-header-subnav li a {
    display: block;
    color: #333;
    text-decoration: none;
}

.l-header-logo span {
    display: block;
    overflow: hidden;
    width: 40vw;
    height: 0;
    padding-top: 9.6875vw;
    background: url(../img/common/logo.png) no-repeat 50% 50%;
    background-size: contain;
    white-space: nowrap;
    text-indent: 200%;
}

.l-header-menu {
    position: relative;
    box-sizing: border-box;
    width: 7.03125vw;
    height: 5.3125vw;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none transparent;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.l-header-menu::-ms-clear {
    display: none;
}

.l-header-menu::-ms-reveal {
    display: none;
}

.l-header-menu::-ms-expand {
    display: none;
}

.l-header-menu-icon {
    display: block;
    position: absolute;
    left: 50%;
    width: 100%;
    height: 0.625vw;
    background: #666;
    transition: all 0.3s ease-in-out;
}

.l-header-menu-icon:nth-child(1) {
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.is-menu-open .l-header-menu-icon:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.l-header-menu-icon:nth-child(2) {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.is-menu-open .l-header-menu-icon:nth-child(2) {
    opacity: 0;
}

.l-header-menu-icon:nth-child(3) {
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.is-menu-open .l-header-menu-icon:nth-child(3) {
    top: 50%;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.l-header-menu-text {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    white-space: nowrap;
    text-indent: 200%;
}

.l-header-nav {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.is-menu-open .l-header-nav {
    visibility: visible;
    opacity: 1;
}

.l-header-nav-inner {
    position: relative;
    overflow-y: scroll;
    width: calc(100vw - 9.355vw);
    height: 100vh;
    padding: 17.8125vw 4.6875vw 17.8125vw 7.8125vw;
    background: #fff;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw);
    -webkit-overflow-scrolling: touch;
}

.is-menu-open .l-header-nav-inner {
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: translateX(9.355vw);
    transform: translateX(9.355vw);
}

.l-header-links {
    margin: 5.9375vw 0 0;
    padding: 0 3.59375vw;
    font-size: 3.4375vw;
    letter-spacing: 0.2em;
}

.l-header-links li {
    margin: 3.75vw 0 0;
}

.l-header-links a {
    display: block;
    padding: 0 0 0 5.625vw;
    background: url(../img/common/ico_arrow_05.png) no-repeat 0 50%;
    background-size: 4.0625vw auto;
    color: #333;
    text-decoration: none;
}

.l-header-contact {
    margin: 6.25vw 1.5625vw 8.75vw;
    font-size: 3.75vw;
    text-align: center;
}

.l-header-contact a {
    display: block;
    position: relative;
    padding: 3.125vw 5.625vw 3.125vw 3.125vw;
    border-radius: 0.78125vw;
    background: #004575;
    color: #fff;
    text-decoration: none;
}

.l-header-contact a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 13.125vw;
    width: 1.875vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_02.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-header-nav {
    border-top: 0.3125vw solid #ccc;
    font-size: 4.375vw;
}

.mod-header-nav a {
    display: block;
    position: relative;
    padding: 6.09375vw 4.6875vw;
    color: #666;
    text-align: left;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mod-header-nav a:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 6.25vw;
    width: 3.4375vw;
    height: 0.3125vw;
    background: #101010;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.mod-header-nav li {
    position: relative;
    flex: 1;
    border-bottom: 0.3125vw solid #ccc;
}

.mod-header-nav li.is-active ul {
    background: #0a4a97;
}

.mod-header-nav li ul {
    overflow: hidden;
    max-height: 0;
    font-size: 1.6rem;
    transition: max-height 0.3s ease-in-out;
}

.mod-header-nav li li {
    border-top: 0.3125vw solid #ccc;
    border-bottom: none;
}

.mod-header-nav li li a {
    padding: 6.09375vw 4.6875vw 6.09375vw 10.9375vw;
    background: #f2f4f7;
}

.mod-header-nav li li a:before {
    display: none;
}

.mod-header-nav li li a:after {
    right: 6.875vw;
    width: 1.875vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_01.png) no-repeat 50% 50%;
    background-size: contain;
}

.mod-header-search {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    background: #e6e6e6;
    transition: max-height 0.3s ease-in-out;
}

.is-search-open .mod-header-search {
    max-height: 1000px;
}

.mod-header-search-inner {
    display: flex;
    align-items: center;
    padding: 4.6875vw;
}

.mod-header-search-form {
    position: relative;
    flex: 1;
}

.mod-header-search-input {
    box-sizing: border-box;
    box-sizing: border-box !important;
    width: 100%;
    margin: 0;
    padding: 0;
    padding: 3.4375vw 11.25vw 3.4375vw 3.90625vw;
    border: 0;
    border-radius: 0;
    border-radius: 0.78125vw;
    background: none transparent;
    background: #fff;
    color: inherit;
    color: #333;
    font-size: inherit;
    font-size: 4.0625vw;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-header-search-input::-ms-clear {
    display: none;
}

.mod-header-search-input::-ms-reveal {
    display: none;
}

.mod-header-search-input::-ms-expand {
    display: none;
}

.mod-header-search-input:placeholder-shown {
    color: rgba(0, 0, 0, 0.5);
}

.mod-header-search-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-header-search-input:-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-header-search-input::-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-header-search-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-header-search-btn {
    position: absolute;
    top: 50%;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 11.25vw;
    height: 0;
    margin: 0;
    padding: 0;
    padding-top: 10.9375vw;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background: url(../img/common/ico_search_02.png) no-repeat 50% 50%;
    background-size: 4.53125vw auto;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 200%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-header-search-btn::-ms-clear {
    display: none;
}

.mod-header-search-btn::-ms-reveal {
    display: none;
}

.mod-header-search-btn::-ms-expand {
    display: none;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-footer
name: l-footer
category: layout
---

```html
<footer class="l-footer">
<div class="l-constrained">
<nav class="l-footer-nav">
<ul class="mod-footer-nav">
<li><a href="DUMMY">フッターーナビ</a></li>
<li><a href="DUMMY">フッターーナビ</a></li>
<li><a href="DUMMY">フッターーナビ</a></li>
<li><a href="DUMMY">フッターーナビ</a></li>
</ul>
</nav>
<p lang="en" class="mod-copyright">Copyright © DUMMY All rights Reserved.</p>
</div><!-- l-constrained -->
</footer>
```
*/

.l-footer {
    position: relative;
    margin: 15.625vw 0 0;
    padding: 9.53125vw 0 7.65625vw;
    border-top: 0.3125vw solid #ccc;
}

.l-contact-mail+.l-footer {
    margin: 0;
    border-top: none;
}

.l-footer-pagetop {
    display: flex;
    position: fixed;
    z-index: 2;
    right: 3.125vw;
    bottom: 3.125vw;
    justify-content: flex-end;
    align-items: flex-end;
    width: 14.0625vw;
    height: 14.0625vw;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}

.is-pagetop-active .l-footer-pagetop {
    opacity: 1;
}

.l-footer-pagetop a {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url(../img/common/ico_pagetop_01_sp.png) no-repeat 50% 50%;
    background-size: contain;
    white-space: nowrap;
    text-indent: 200%;
}

.l-footer-pagetop {
    display: flex;
    position: fixed;
    z-index: 2;
    right: 3.125vw;
    bottom: 3.125vw;
    justify-content: flex-end;
    align-items: flex-end;
    width: 14.0625vw;
    height: 14.0625vw;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}

.is-pagetop-active .l-footer-pagetop {
    opacity: 1;
}

.l-footer-pagetop a {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url(../img/common/ico_pagetop_01_sp.png) no-repeat 50% 50%;
    background-size: contain;
    white-space: nowrap;
    text-indent: 200%;
}

.l-footer-trial {
    display: flex;
    position: fixed;
    z-index: 2;
    bottom: -3.125vw;
    left: 4.6875vw;
    justify-content: flex-end;
    align-items: flex-end;
    width: 90.625vw;
    height: 14.0625vw;
    transition: all 0.3s ease-in-out 0s;
}

.is-pagetop-active .l-footer-trial {
    opacity: 1;
}

.l-footer-trial a {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 17.1875vw;
    background: url(../img/common/btn_trial_01_sp.png) no-repeat 50% 50%;
    background-size: contain;
    white-space: nowrap;
    text-indent: 200%;
}

.l-footer-trial a:hover {
    opacity: 1;
}

.l-footer-column:nth-child(1) {
    padding: 0 9.375vw;
}

.l-footer-btn a {
    display: block;
    position: relative;
    padding: 4.6875vw 10vw 4.0625vw;
    border-radius: 1.5625vw;
    background: #004575;
    color: #fff;
    text-align: left;
    text-decoration: none;
}

.l-footer-btn a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8.125vw;
    width: 1.875vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_03.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.l-footer-btn a span {
    display: block;
    margin: 0 0 1.25vw;
    font-size: 3.125vw;
}

.l-footer-btn a strong {
    font-size: 4.375vw;
}

.l-footer-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 7.5vw 3.125vw 0;
}

.l-footer-list li:nth-child(1) {
    width: 34.6875vw;
}

.l-footer-list li:nth-child(2) {
    width: 34.6875vw;
}

.l-footer-list li img {
    width: 100%;
    height: auto;
}

.l-footer-privacy {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 9.375vw 0 0;
}

.l-footer-privacy img {
    width: 11.09375vw;
    height: auto;
}

.l-footer-privacy a {
    margin: 0 0 0 2.03125vw;
    color: #0a2e8f;
    font-size: 3.75vw;
    text-decoration: none;
}

.mod-footer-nav {
    margin: 10.625vw 0 0;
    border-top: 0.3125vw solid #ccc;
    font-size: 4.375vw;
}

.mod-footer-nav li {
    border-bottom: 0.3125vw solid #ccc;
}

.mod-footer-nav a {
    display: block;
    position: relative;
    padding: 3.4375vw 4.375vw;
    color: #333;
    font-family: 'NotoSansR';
    text-decoration: none;
}

.mod-footer-nav a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 4.6875vw;
    width: 1.875vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_01.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-copyright {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    text-align: center;
}

.mod-copyright small {
    font-family: 'NotoSansR';
}

.grecaptcha-badge {
    bottom: 100px !important;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-contact-tel
name: l-contact-tel
category: layout
---

```html
<section class="l-contact-tel">
<h2 class="l-contact-tel-title">お電話でのお問い合わせ</h2>
<p class="l-contact-tel-lead">お電話でサポートいたします</p>

<div class="l-contact-tel-inner">
<ul class="l-contact-tel-lists">
<li class="l-contact-tel-list">
<h3 class="l-contact-tel-title2">カタログ・無料体験版のご請求、導入前のお問い合わせ</h3>
<p class="l-contact-tel-department">コグニビジョン株式会社【営業部】</p>
<p class="l-contact-tel-tel"><a href="tel:0353511901">03-5351-1901</a></p>
<p class="l-contact-tel-note">受付時間：9：00 - 17：00<br>
※土日・祝日・当社指定休業日を除く</p>
</li><!-- .l-contact-tel-list -->

<li class="l-contact-tel-list">
<h3 class="l-contact-tel-title2">製品の使い方に関するお問い合わせ（通話料無料）</h3>
<p class="l-contact-tel-department">頼れる電話サポート「コグニサポート」</p>
<p class="l-contact-tel-tel"><a href="tel:0120977666">0120-977-666</a></p>
<p class="l-contact-tel-note">受付時間：9：00 - 17：00<br>
※土日・祝日・当社指定休業日を除く</p>
</li><!-- .l-contact-tel-list -->
</ul><!-- .l-contact-tel-lists -->
</div><!-- .l-contact-tel-inner -->
</section><!-- .l-contact-tel -->

```
*/

.l-contact-tel {
    position: relative;
    margin: 25.3125vw 0 0;
    padding: 10.9375vw 4.6875vw 0;
    background: #0068b7;
    color: #fff;
    text-align: center;
}

.l-contact-tel:before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -9.375vw;
    left: 50%;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background: #0068b7 url(../img/common/ico_tel_01.png) no-repeat 50% 50%;
    background-size: 10.15625vw auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.l-contact-tel-title {
    position: relative;
    z-index: 1;
    font-size: 5.625vw;
}

.l-contact-tel-lead {
    margin: 0.625vw 0 0;
    font-size: 3.125vw;
}

.l-contact-tel-lists {
    margin: 8.59375vw 0 0;
    line-height: 1.39;
    text-align: center;
}

.l-contact-tel-list {
    flex: 1;
    padding: 8.75vw 0 9.0625vw;
    border-top: 0.3125vw solid #fff;
}

.l-contact-tel-title2 {
    font-size: 4.375vw;
    line-height: 1.39;
}

.l-contact-tel-department {
    width: 57.5vw;
    margin: 3.90625vw auto 0;
    padding: 1.25vw 0;
    border: 0.3125vw solid #80b4db;
    font-size: 3.125vw;
    letter-spacing: -0.06em;
}

.l-contact-tel-tel {
    margin: 0.625vw 0 0;
    font-size: 7.5vw;
}

.l-contact-tel-tel a {
    display: block;
    color: #fff;
    text-decoration: none;
}

.l-contact-tel-note {
    width: 59.0625vw;
    margin: 1.25vw auto 0;
    padding: 0 4.375vw;
    background: url(../img/common/bg_contact_tel_01.png) no-repeat 0 50%, url(../img/common/bg_contact_tel_02.png) no-repeat 100% 50%;
    background-size: auto 8.59375vw;
    font-size: 3.125vw;
    line-height: 1.45;
    text-align: left;
    letter-spacing: -0.06em;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-contact-mail
name: l-contact-mail
category: layout
---

```html
<p class="l-contact-mail"><a href="{{ dataProject.map.contact }}">メールでのお問い合わせ</a></p><!-- .l-contact-mail -->
```
*/

.l-contact-mail {
    margin: 0;
    font-size: 4.375vw;
    text-align: center;
}

.l-contact-mail a {
    display: block;
    padding: 7.5vw 0 6.25vw;
    background: #004575;
    color: #fff;
    text-decoration: none;
}

.l-contact-mail a:before {
    content: '';
    display: block;
    width: 14.375vw;
    height: 8.125vw;
    margin: 0 auto 2.5vw;
    background: url(../img/common/ico_mail_01.png) no-repeat 50% 50%;
    background-size: contain;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/

.l-main {
    padding: 8.125vw 4.6875vw 0;
}

.page-home .l-main {
    padding: 0 4.6875vw;
}

.l-wrapper {
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    min-height: 100vh;
}

.is-menu-open .l-wrapper {
    position: fixed;
    width: 100%;
}

.l-contents {
    position: relative;
    z-index: 0;
    overflow: hidden;
    flex-grow: 1;
    min-width: 320px;
    background-color: #fff;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-heading
name: l-010
category: layout
---

```html
<div class="l-heading">
<div class="l-heading-inner">
<h1 class="l-heading-title">タイトル</h1>
<p class="l-heading-text">サブタイトル</p>
</div>
</div><!-- /.l-heading -->

```
*/

.l-heading {
    padding: 11.875vw 4.6875vw 10.9375vw;
    background: url(../img/common/bg_blue_01.png) repeat 50% 50%;
    background-size: 266.25vw auto;
    color: #fff;
}

.l-heading-title {
    font-size: 6.5625vw;
}

.l-heading-text {
    margin: 2.5vw 0 0;
    font-size: 3.125vw;
    line-height: 1.8;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .l-breadcrumbs
name: l-010
category: layout
---

```html
<div class="l-breadcrumbs">
<ol>
<li class="home"><a href="../../../">TOP</a></li>
<li><a href="../../../contents/">コンテンツ</a></li>
<li>タイトル</li>
</ol>
</div><!-- /.l-breadcrumbs -->
```
*/

.l-breadcrumbs {
    padding: 3.90625vw 4.6875vw 0vw;
    font-size: 3.4375vw;
    line-height: 1.5;
}

.l-header+.l-breadcrumbs {
    border-top: 0.3125vw solid #ccc;
}

.l-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
}

.l-breadcrumbs li:not(:last-child):after {
    content: '>';
    display: inline-block;
    margin: 0 2.34375vw;
}

.l-breadcrumbs li:last-child {
    color: #0068b7;
}

.l-breadcrumbs a {
    color: #333;
}


/* =====================================================
 * Module
 * ================================================== */


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: テキスト寄せ
name: util-010
category: utilities
---

```html
<p class="mod-left">.mod-left</p>
<p class="mod-center">.mod-center</p>
<p class="mod-right">.mod-right</p>
```
*/

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

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

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

.mod-flex-left {
    justify-content: flex-start !important;
}

.mod-flex-center {
    justify-content: center !important;
}

.mod-flex-right {
    justify-content: flex-end !important;
}


/*docs
---
title: 色
name: util-020
category: utilities
---

```html
<p class="mod-p mod-color-red">mod-color-red</p>
<p class="mod-p mod-color-orange">mod-color-orange</p>
```
*/

.mod-color-red {
    color: #e60047;
}

.mod-color-orange {
    color: #ee9f2d;
}


/*docs
---
title: メディア表示
name: util-030
category: utilities
---

```html
<div class="is-pc-hide">PC非表示（指定がなければSP表示）</div>
<div class="is-pc-show">PCでは必ず表示（指定がなければSP表示）</div>
<div class="is-sp-show">SPでは必ず表示（指定がなければPC表示）</div>
<div class="is-sp-hide">SP非表示（指定がなければPC表示）</div>
<p>テキストテキストテキスト。<br class="is-br-sp-show">SPでは改行が入る。</p>
<p>テキストテキストテキスト。<br class="is-br-pc-show">PCでは改行が入る。</p>
```
*/

.is-br-sp-show {
    display: none;
}

.is-br-pc-show {
    display: none;
}


/*docs
---
title: JSメディアチェック用
name: util-040
category: utilities
---
SP表示チェック。
- jQueryのis(':visible')を利用することで、JSとCSSの同期が取れる。
- SP時に display: block; となる。

```html
<div class="check-media">SP時 display: block;</div>
```
*/

.check-media {
    display: block;
}


/*docs
---
title: IME
name: util-050
category: utilities
---
*/

.mod-ime-disabled {
    ime-mode: disabled;
}


/*docs
---
title: XXなし
name: util-060
category: utilities
---
*/

.mod-border-none {
    border: none !important;
}

.mod-pt-none {
    padding-top: 0 !important;
}

.mod-pb-none {
    padding-bottom: 0 !important;
}

.mod-pl-none {
    padding-left: 0 !important;
}

.mod-pr-none {
    padding-right: 0 !important;
}

.mod-mt-none {
    margin-top: 0 !important;
}

.mod-indent-none {
    padding-left: 0 !important;
    text-indent: 0 !important;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .mod-heading
name: typo-010
category: typography
---

```html
<h2 class="mod-heading1">h2:このダミーテキストは自由に改変することができます</h2>
<h3 class="mod-heading2">h3：タイトル</h3>
<h3 class="mod-heading2 mod-left">h3：タイトル</h3>
<h4 class="mod-heading3">h4：サブコンテンツタイトル</h4>
<h3 class="mod-heading3 mod-heading3-orange">遅刻や欠勤が多い、ミスを連発する……不調な人は何らかのサインを出している</h3>
<h3 class="mod-magazine-heading">バックナンバー</h3>
```
*/

.mod-heading1 {
    margin: 11.71875vw 0 7.5vw;
    font-family: 'NotoSansR';
    font-size: 5.625vw;
    line-height: 1.47;
}

.mod-heading1:first-child {
    margin-top: 0;
}

.mod-heading1+.mod-grid {
    margin-top: -0.3125vw;
}

.mod-heading1+.mod-btn-group {
    margin-top: -2.34375vw !important;
}

.mod-heading2 {
    margin: 11.71875vw 0 7.5vw;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
    line-height: 1.64;
    text-align: center;
}

.mod-heading2:first-child {
    margin-top: 0;
}

.mod-heading2+.mod-grid {
    margin-top: -0.3125vw;
}

.mod-heading2+.mod-tbl {
    margin-top: -2.34375vw;
}

.mod-heading3 {
    margin: 11.71875vw 0 7.5vw;
    padding: 0 0 0 3.125vw;
    border-left: 1.25vw solid #b2b2b2;
    font-size: 4.375vw;
    line-height: 1.5;
}

.mod-heading3:first-child {
    margin-top: 0;
}

.mod-heading3+.mod-grid {
    margin-top: -0.3125vw;
}

.mod-heading3-orange {
    border-color: #ee9f2d;
    color: #ee9f2d;
}

.mod-top-heading {
    margin: 0 0 7.65625vw;
    color: #666;
    font-family: 'NotoSansR';
    font-size: 7.1875vw;
    text-align: center;
}

.mod-magazine-heading {
    margin: 14.21875vw 0 0;
    color: #666;
    font-family: 'NotoSansR';
    font-size: 6.5625vw;
    text-align: center;
}


/*docs
---
title: .mod-p
name: typo-020
category: typography
---

```html
<p class="mod-p">弊社は1974年、損害保険会社等の出資により設立され、ドイツで開発された事故車修理費を迅速かつ正確に算出する「アウダテックスシステム」を参考に、日本の環境に合わせて独自の「事故車修理費見積りシステム」を構築・ご提供してまいりました。</p>
```
*/

.mod-p {
    margin: 7.5vw 0 0;
    font-size: 4.0625vw;
    line-height: 1.76;
}

.mod-p:first-child {
    margin-top: 0;
}


/*docs
---
title: .mod-ul
name: typo-030
category: typography
---

```html
<ul class="mod-ul">
<li>リスト（複数行になる場合■□□□□□□□■□□□□□□□■□□□□□□□■□□□□□□□■□□□□□□□。</li>
<li>リスト</li>
<li>リスト</li>
</ul>
```
*/

.mod-ul {
    margin: 1.37em 0 0;
    font-size: 3.75vw;
    line-height: 1.45;
}

.mod-ul:first-child {
    margin-top: 0;
}

.mod-ul>li {
    margin: 2.8125vw 0 0;
    padding-left: 1em;
    font-family: 'NotoSansR';
    text-indent: -1em;
}

.mod-ul>li:first-child {
    margin-top: 0;
}

.mod-ul>li:before {
    content: '・';
    display: inline-block;
    width: 1em;
    text-align: center;
    text-indent: 0;
}


/*docs
---
title: .mod-ol
name: typo-040
category: typography
---

```html
<ol class="mod-ol">
<li>リスト（複数行になる場合■□□□□□□□■□□□□□□□■□□□□□□□■□□□□□□□■□□□□□□□。</li>
<li>リスト</li>
<li>リスト</li>
</ol>
```
*/

.mod-ol {
    margin: 1.37em 0 0;
    font-size: 3.75vw;
    line-height: 1.45;
}

.mod-ol:first-child {
    margin-top: 0;
}

.mod-ol>li {
    list-style: decimal inside;
    margin: 2.8125vw 0 0;
    padding-left: 1.5em;
    font-family: 'NotoSansR';
    text-indent: -1.5em;
}


/*docs
---
title: .mod-anchor
name: typo-040
category: typography
---

```html
<div class="mod-anchor">
<ul>
<li><a href="#heading">heading</a></li>
<li><a href="#list">list</a></li>
<li><a href="#link">link/btn</a></li>
<li><a href="#grid">grid</a></li>
<li><a href="#table">table</a></li>
<li><a href="#form">form</a></li>
</ul>
</div><!-- /.mod-anchor -->
```
*/

.mod-anchor {
    margin: 7.5vw 0 0;
    padding: 2.1875vw 3.125vw 5.78125vw;
    background: #f2f4f7;
    font-size: 4.0625vw;
}

.mod-anchor ul {
    display: flex;
    flex-wrap: wrap;
}

.mod-anchor li {
    margin: 3.4375vw 3.125vw 0;
}

.mod-anchor a {
    display: inline-block;
    padding: 0 5.625vw 0 0;
    /*background: url(../img/common/ico_anchor_01.png) no-repeat 100% 50%;*/
    background-size: 4.375vw auto;
    color: #333;
    text-decoration: none;
}


/*docs
---
title: .mod-tab-link
name: typo-040
category: typography
---

```html
<div class="mod-tab-link">
<ul>
<li><a href="DUMMY" class="is-active">タブ切替リンク</a></li>
<li><a href="DUMMY">タブ切替リンク</a></li>
<li><a href="DUMMY">タブ切替リンク</a></li>
</ul>
</div><!-- /.mod-tab-link -->
```
*/

.mod-tab-link {
    position: relative;
    margin: 9.6875vw -4.6875vw 0;
    font-size: 4.0625vw;
}

.mod-tab-link:first-child {
    margin-top: 0;
}

.mod-tab-link+.mod-tab-link {
    margin-top: 0;
}

.mod-tab-link-gray {
    background: #f2f4f7;
}

.mod-tab-link-gray:before {
    content: '';
    display: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: 200%;
    height: 100%;
    background: #f2f4f7;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link-line {
    content: '';
    display: none;
    position: absolute;
    left: 50%;
    width: 200%;
    border-top: 0.3125vw solid #ccc;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link:after {
    content: '';
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200%;
    border-top: 0.3125vw solid #ccc;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link ul {
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0 0 0 4.6875vw;
}

.mod-tab-link li:not(:first-child) {
    margin: 0 0 0 7.8125vw;
}

.mod-tab-link a {
    display: block;
    position: relative;
    padding: 3.90625vw 2.65625vw;
    color: #333;
    font-family: 'NotoSansR';
    white-space: nowrap;
    text-decoration: none;
}

.mod-tab-link a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.25vw;
    background: #0068b7;
    opacity: 0;
}

.mod-tab-link a.is-active {
    color: #0c56a6;
}

.mod-tab-link a.is-active:after {
    opacity: 1;
}

.mod-tab-link2 {
    position: relative;
    margin: 9.6875vw 0 0;
    font-size: 4.375vw;
}

.mod-tab-link2:first-child {
    margin-top: 0;
}

.mod-tab-link2+.mod-tab-link {
    margin-top: 0;
}

.mod-tab-link2-gray {
    background: #f2f4f7;
}

.mod-tab-link2-gray:before {
    content: '';
    display: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: 200%;
    height: 100%;
    background: #f2f4f7;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link2-line {
    content: '';
    display: none;
    position: absolute;
    left: 50%;
    width: 200%;
    border-top: 0.3125vw solid #ccc;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link2:after {
    content: '';
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200%;
    border-top: 0.3125vw solid #ccc;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mod-tab-link2 li {
    border-top: 0.3125vw solid #ccc;
}

.mod-tab-link2 a {
    display: block;
    position: relative;
    padding: 4.6875vw 9.375vw 4.6875vw 5.78125vw;
    color: #333;
    font-family: 'NotoSansR';
    white-space: nowrap;
    text-decoration: none;
}

.mod-tab-link2 a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.5625vw;
    height: 100%;
    background: #0068b7;
    opacity: 0;
}

.mod-tab-link2 a:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5.3125vw;
    width: 1.71875vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_01_m.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-tab-link2 a.is-active {
    color: #0c56a6;
}

.mod-tab-link2 a.is-active:after {
    opacity: 1;
}

.mod-tab-link2 a.is-active:before {
    background-image: url(../img/common/ico_arrow_04.png);
}


/*docs
---
title: mod-link-list
name: typo-040
category: typography
---

```html
<ul class="mod-link-list">
<li><a href="DUMMY">テキストリンク/26px：ダミーテキスト</a></li>
<li><a href="DUMMY">テキストリンク/26px：ダミーテキスト<br>
テキストリンク/26px：ダミーテキスト</a></li>
</ul><!-- /.mod-link-list -->
```
*/

.mod-link-list {
    margin: 4.375vw 0 0;
    font-size: 4.0625vw;
    line-height: 1.69;
}

.mod-link-list:first-child {
    margin-top: 0;
}

.mod-link-list>li {
    position: relative;
    margin: 1.71875vw 0 0;
    padding: 0 0 0 3.125vw;
}

.mod-link-list>li:first-child {
    margin-top: 0;
}

.mod-link-list>li:before {
    content: '';
    position: absolute;
    top: 0.85em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0.9375vw 0 0.9375vw 1.25vw;
    border-style: solid;
    border-color: transparent transparent transparent #0068b7;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


/*docs
---
title: mod-btn
name: typo-040
category: typography
---

```html
<div class="mod-btn-group">
<a href="DUMMY" class="mod-btn">ボタン中央</a>
<a href="DUMMY" class="mod-btn">ボタン中央<br>ボタン中央</a>
<a href="DUMMY" class="mod-btn mod-btn-pdf">ボタン中央</a>
<a href="DUMMY" class="mod-btn mod-btn-excel">ボタン中央</a>
<a href="DUMMY" class="mod-btn mod-btn-download">ボタン中央</a>
<a href="../../../contents/magazine/" class="mod-btn mod-btn-list"><span>バックナンバー 一覧</span></a>
<a href="DUMMY" class="mod-btn mod-btn-white">全国各地のコグニ会</a>
</div><!-- /.mod-btn-group -->
```
*/

.mod-btn {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    margin: 4.6875vw 0 0;
    padding: 0;
    padding: 5.15625vw 15.625vw 5.15625vw 9.375vw;
    border: 0;
    border-radius: 0;
    border-radius: 1.5625vw;
    background: none transparent;
    background: #0c56a6;
    color: inherit;
    color: #fff;
    font-family: 'NotoSansR';
    font-size: inherit;
    font-size: 4.375vw;
    vertical-align: middle;
    text-decoration: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-btn::-ms-clear {
    display: none;
}

.mod-btn::-ms-reveal {
    display: none;
}

.mod-btn::-ms-expand {
    display: none;
}

.mod-btn:disabled {
    background: #666;
    opacity: 0.5;
}

.mod-btn:disabled:hover {
    background: #666;
    opacity: 0.5;
    color: #fff;
}

.mod-btn:hover {
    background: #fff;
    opacity: 1;
    color: #0c56a6;
    text-decoration: none;
}

.mod-btn:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 15.625vw;
    height: 3.125vw;
    background: url(../img/common/ico_arrow_02.png) no-repeat 50% 50%, url(../img/common/ico_arrow_04.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-btn-group {
    margin: 13.75vw 0 0;
    padding: 0 4.6875vw;
}

.mod-btn-group.mod-btn-group-liquid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 13.75vw -1.5625vw 0;
    padding: 0;
}

.mod-hr+.mod-btn-group.mod-btn-group-liquid {
    margin-top: -0.9375vw;
}

.mod-btn-pdf:after {
    height: 5.9375vw;
    background-image: url(../img/common/ico_pdf_01.png), url(../img/common/ico_pdf_02.png);
}

.mod-btn-excel:after {
    height: 5.9375vw;
    background-image: url(../img/common/ico_excel_01.png), url(../img/common/ico_excel_02.png);
}

.mod-btn-download:after {
    height: 4.0625vw;
    background-image: url(../img/common/ico_download_01.png), url(../img/common/ico_download_02.png);
}

.mod-btn-list {
    justify-content: center;
    margin: -4.6875vw 0 0;
    padding: 7.03125vw 9.375vw;
}

.mod-btn-list:after {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 7.03125vw;
    height: 5.625vw;
    margin: 0 0 0 4.53125vw;
    background-image: url(../img/common/ico_list_01.png), url(../img/common/ico_list_02.png);
    -webkit-transform: none;
    transform: none;
}

.mod-btn-white {
    justify-content: center;
    margin: 3.125vw 0 0;
    padding: 5vw 9.375vw;
    border: 0.15625vw solid #ccc;
    border-radius: 12.5vw;
    background: transparent;
    color: #333;
    font-family: 'NotoSansL';
    line-height: 1.42;
    text-align: center;
}

.mod-btn-white:after {
    display: none;
}

.mod-btn-white-liquid {
    margin: 3.125vw 1.5625vw 0;
    padding: 3.90625vw 4.6875vw;
    font-size: 3.4375vw;
}


/*docs
---
title: mod-figure
name: typo-040
category: typography
---

```html
<figure class="mod-figure">
<img src="{{ dataProject.path }}img/dummy/560x230.png" alt="">
<figcaption>ダミーテキスト</figcaption>
</figure><!-- /.mod-figure -->
```
*/

.mod-figure {
    margin: 7.8125vw 0 0;
}

.mod-figure:first-child {
    margin: 0;
}

.mod-figure img {
    max-width: 100%;
}

.mod-figure figcaption {
    margin: 2.1875vw 0 0;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    line-height: 1.53;
}

.mod-figure-youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.mod-figure-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mod-figure-bgclor {
    padding-top: 2rem;
}


/*docs
---
title: mod-note
name: typo-040
category: typography
---

```html
<dl class="mod-note mod-note-gray">
<dt>補足テキストエリア</dt>
<dd>弊社は1974年、損害保険会社等の出資により設立され、ドイツで開発された事故車修理費を迅速かつ正確に算出する「アウダテックスシステム」を参考に、日本の環境に合わせて独自の「事故車修理費見積りシステム」を構築・ご提供してまいりました。</dd>
</dl><!-- /.mod-note -->

<dl class="mod-note mod-note-error">
<dt>補足テキストエリア</dt>
<dd>弊社は1974年、損害保険会社等の出資により設立され、ドイツで開発された事故車修理費を迅速かつ正確に算出する「アウダテックスシステム」を参考に、日本の環境に合わせて独自の「事故車修理費見積りシステム」を構築・ご提供してまいりました。</dd>
</dl><!-- /.mod-note -->

<dl class="mod-note">
<dt>補足テキストエリア</dt>
<dd>弊社は1974年、損害保険会社等の出資により設立され、ドイツで開発された事故車修理費を迅速かつ正確に算出する「アウダテックスシステム」を参考に、日本の環境に合わせて独自の「事故車修理費見積りシステム」を構築・ご提供してまいりました。</dd>
</dl><!-- /.mod-note -->

<p class="mod-note-text">注：ご利用の際には”コグニネット会員サイト”の登録が必要となります。</p>
<p class="mod-note-text mod-color-red">注：ご利用の際には”コグニネット会員サイト”の登録が必要となります。</p>

<ul class="mod-note-list">
<li>注意書きテキスト注意書きテキスト注意書きテキスト注意書きテキスト注意書きテキスト注意書きテキスト注意書きテキスト</li>
<li>注意書きテキスト注意書きテキスト注意書きテキスト注意書きテキスト</li>
</ul><!-- /.mod-note-list -->
```
*/

.mod-note {
    margin: 2.8125vw 0 0;
}

.mod-note-gray {
    padding: 5.9375vw 6.5625vw 5.15625vw;
    background: #f2f4f7;
}

.mod-note-error {
    margin-bottom: 9.375vw;
    padding: 5.9375vw 6.5625vw 5.15625vw;
    background: rgba(230, 0, 71, 0.1);
    color: #e60047;
}

.mod-note-wrap {
    overflow-y: scroll;
    max-height: 78.125vw;
    margin: 9.0625vw 0 0;
    padding: 5.9375vw 6.5625vw 5.15625vw;
    background: #f2f4f7;
}

.mod-note-wrap+.mod-note-wrap {
    margin: 9.375vw 0 0;
}

.mod-note-wrap .mod-note-gray {
    margin: 0;
    padding: 0;
    background: none;
}

.mod-note-wrap .mod-p {
    margin: 1.1em 0 0;
    padding: 0 0 0 1em;
    font-size: 3.4375vw;
    line-height: 1.72;
    text-indent: -1em;
}

.mod-note-wrap .mod-p:first-child {
    margin: 3.4375vw 0 0;
}

.mod-note-wrap .mod-ul {
    margin-top: 0;
    padding: 0 0 0 1em;
    font-size: 3.4375vw;
    line-height: 1.72;
}

.mod-note-wrap .mod-ul>li {
    margin-top: 0;
    font-family: 'NotoSansL';
}

.mod-note dt {
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
}

.mod-note dd {
    font-size: 3.4375vw;
    line-height: 1.72;
}

.mod-note dd:first-child {
    margin: 0;
}

.mod-note dd:first-of-type {
    margin: 2.1875vw 0 0;
}

.mod-note-btn {
    position: relative;
}

.mod-note-text {
    margin: 5vw 0 0;
    font-size: 3.125vw;
    line-height: 1.75;
}

.mod-note-list {
    margin: 4.6875vw 0 0;
    font-size: 3.75vw;
    line-height: 1.45;
}

.mod-note-list:first-child {
    margin-top: 0;
}

.mod-note-list>li {
    margin: 2.34375vw 0 0;
    padding: 0 0 0 1em;
    text-indent: -1em;
}

.mod-note-list>li:first-child {
    margin-top: 0;
}

.mod-note-list>li:before {
    content: '※';
    width: 1em;
    text-align: left;
}


/*docs
---
title: mod-tbl
name: typo-040
category: typography
---

```html
<div class="mod-tbl">
<table>
<tr>
<th>ダミーテキスト</th>
<td>ダミーテキスト</td>
</tr>
</table>
</div><!-- /.mod-tbl -->
```
*/

.mod-tbl-common th,
.mod-tbl-common td {
    padding: 10px;
    border: 0.3125vw #ccc solid;
}

.mod-tbl-common th {
    background-color: rgba(191, 206, 228, 0.24);
}

.mod-tbl {
    margin: 13.59375vw 0 0;
}

.mod-tbl table {
    border-bottom: #ccc 0.3125vw solid;
}

.mod-tbl th,
.mod-tbl td {
    font-size: 4.0625vw;
    line-height: 1.69;
}

.mod-tbl th {
    font-family: 'NotoSansR';
}

.mod-tbl .mod-p {
    font-size: 4.0625vw;
    line-height: 1.69;
}

.mod-tbl-entry table {
    width: 100%;
}

.mod-tbl-entry caption {
    padding: 3.4375vw 0;
    border-top: #ccc 0.3125vw solid;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
    line-height: 1.64;
    text-align: left;
}

.mod-tbl-entry th,
.mod-tbl-entry td {
    padding: 3.75vw 0 3.75vw 2.03125vw;
    border-bottom: #ccc 0.3125vw solid;
    font-size: 3.4375vw;
    line-height: 1.72;
    vertical-align: top;
}

.mod-tbl-entry th:first-child,
.mod-tbl-entry td:first-child {
    padding-left: 0;
}

.mod-tbl-entry th {
    width: 15.625vw;
    border-top: #ccc 0.3125vw solid;
    font-family: 'NotoSansR';
    font-size: 3.125vw;
}

.mod-tbl-entry td {
    padding-top: 3.4375vw;
    padding-bottom: 3.4375vw;
}

.mod-tbl-backnumber th:first-child {
    width: 13.59375vw;
}

.mod-tbl-backnumber th:nth-child(2) {
    width: auto;
}

.mod-tbl-backnumber td:nth-child(2) {
    width: 30.15625vw;
}

.mod-tbl-manual th:first-child {
    width: 13.59375vw;
}

.mod-tbl-manual th:nth-child(3) {
    width: auto;
}

.mod-tbl-manual ul>li {
    font-family: 'NotoSansL';
}

.mod-tbl-car2 th:first-child {
    width: 13.59375vw;
}

.mod-tbl-car2 th:nth-child(2) {
    width: auto;
}

.mod-tbl-car1 th {
    width: 30.78125vw;
}

.mod-tbl-car1 th:first-child {
    width: auto;
}

.mod-tbl-car1 td.mod-pt-none:first-child {
    padding-left: 2.03125vw;
}

.mod-tbl-stripes {
    margin-bottom: 13.59375vw;
}

.mod-tbl-stripes tbody tr:nth-child(2n+1) td {
    background: #f2f4f7;
}

.mod-tbl-stripes-error th,
.mod-tbl-stripes-error tbody td,
.mod-tbl-stripes-error tbody tr:nth-child(2n+1) td {
    background: rgba(230, 0, 71, 0.1);
}

.mod-tbl-soft {
    margin: 13.59375vw 0 0;
}

.mod-tbl-soft th,
.mod-tbl-soft td {
    padding: 3.75vw 2.03125vw;
    border: 0.3125vw solid #ccc;
    font-size: 3.4375vw;
    line-height: 1.72;
    vertical-align: middle;
}

.mod-tbl-soft th {
    background: rgba(191, 206, 228, 0.24);
    font-family: 'NotoSansR';
    font-size: 3.125vw;
}

.mod-tbl-soft td {
    padding-top: 3.4375vw;
    padding-bottom: 3.4375vw;
    text-align: center;
}


/*docs
---
title: mod-faq
name: mod-faq
category: typography
---

```html

```
*/

.mod-faq {
    margin: 7.5vw 0 0;
    border-bottom: 0.3125vw solid #ccc;
    font-size: 4.0625vw;
    line-height: 1.69;
}

.mod-faq:first-child {
    margin-top: 0;
}

.mod-heading2+.mod-faq {
    margin: -2.8125vw 0 0;
}

.mod-faq li {
    border-top: 0.3125vw solid #ccc;
}

.mod-faq a {
    display: block;
    position: relative;
    padding: 4.53125vw 7.8125vw 5.46875vw;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.mod-faq a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 2.5vw;
    height: 4.0625vw;
    background: url(../img/common/ico_faq_01.png) no-repeat 50% 50%, url(../img/common/ico_faq_02.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-faq a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 2.5vw;
    height: 4.6875vw;
    background: url(../img/common/ico_arrow_01_l.png) no-repeat 50% 50%, url(../img/common/ico_arrow_04_l.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-faq-category {
    display: block;
    min-width: 46.875vw;
    margin: 0 0 0.78125vw;
    border: 0.3125vw solid #ccc;
    border-radius: 0.78125vw;
    font-size: 3.125vw;
    text-align: center;
    white-space: nowrap;
}


/*docs
---
title: mod-news
name: mod-news
category: typography
---

```html

```
*/

.mod-news {
    margin: 7.5vw 0 0;
    font-size: 4.0625vw;
    line-height: 1.69;
}

.mod-heading1+.mod-news {
    margin: -5.625vw 0 0;
}

.mod-news li {
    border-bottom: 0.3125vw solid #ccc;
}

.mod-news a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6.25vw 0 5.15625vw;
    color: #333;
    text-decoration: none;
}

.mod-news-category {
    min-width: 31.25vw;
    border: 0.3125vw solid #ccc;
    border-radius: 0.78125vw;
    font-size: 3.125vw;
    text-align: center;
    white-space: nowrap;
}

.mod-news-date {
    margin: 0 0 0 3.125vw;
    font-size: 3.4375vw;
}

.mod-news-text {
    display: block;
    width: 100%;
    margin: 2.5vw 0 0;
    font-size: 3.75vw;
    line-height: 1.58;
}


/*docs
---
title: mod-search
name: mod-search
category: typography
---

```html

```
*/

.mod-search {
    position: relative;
    margin: 9.375vw 0 0;
}

.mod-search:first-child {
    margin-top: 0;
}

.mod-search-btn {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 15.625vw;
    height: 0;
    margin: 0;
    padding: 0;
    padding-top: 10.9375vw;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background: url(../img/common/ico_search_01.png) no-repeat 50% 50%;
    background-size: 5.625vw auto;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 200%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-search-btn::-ms-clear {
    display: none;
}

.mod-search-btn::-ms-reveal {
    display: none;
}

.mod-search-btn::-ms-expand {
    display: none;
}


/*docs
---
title: mod-input
name: mod-input
category: typography
---

```html

```
*/

.mod-input {
    box-sizing: border-box;
    width: 100%;
    height: 10.9375vw;
    margin: 0;
    padding: 0;
    padding: 0 15.625vw 0 4.6875vw;
    border: 0;
    border: 0.3125vw solid #ccc;
    border-radius: 0;
    border-radius: 0.78125vw;
    background: none transparent;
    color: inherit;
    font-size: inherit;
    font-size: 3.4375vw;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-input::-ms-clear {
    display: none;
}

.mod-input::-ms-reveal {
    display: none;
}

.mod-input::-ms-expand {
    display: none;
}

.mod-input:placeholder-shown {
    color: rgba(0, 0, 0, 0.5);
}

.mod-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-input:-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-input::-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}


/*docs
---
title: mod-textarea
name: mod-textarea
category: typography
---

```html

```
*/

.mod-textarea {
    resize: none;
    box-sizing: border-box;
    width: 100%;
    height: 20vw;
    margin: 0;
    padding: 0;
    padding: 3.28125vw 3.125vw;
    border: 0;
    border: 0.3125vw solid #ccc;
    border-radius: 0;
    background: none transparent;
    color: inherit;
    font-size: inherit;
    font-size: 4.0625vw;
    line-height: 1.61;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-textarea::-ms-clear {
    display: none;
}

.mod-textarea::-ms-reveal {
    display: none;
}

.mod-textarea::-ms-expand {
    display: none;
}

.mod-textarea:placeholder-shown {
    color: rgba(0, 0, 0, 0.5);
}

.mod-textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-textarea:-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-textarea::-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
}

.mod-textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.mod-textarea-large {
    height: 39.6875vw;
}


/*docs
---
title: mod-radio, mod-checkbox
name: mod-radio, mod-checkbox
category: typography
---

```html

```
*/

.mod-radio,
.mod-checkbox {
    margin: 9.375vw 0 0;
}

.mod-radio:first-child,
.mod-checkbox:first-child {
    margin: 0;
}

.mod-radio label,
.mod-checkbox label {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 5.3125vw;
    padding: 0.3125vw 0 0 7.5vw;
    font-size: 4.0625vw;
    line-height: 1.23;
}

.mod-radio label:only-child,
.mod-checkbox label:only-child {
    display: inline-block;
}

.mod-radio label:not(:first-child),
.mod-checkbox label:not(:first-child) {
    margin: 2.1875vw 0 0;
}

.mod-radio label span,
.mod-checkbox label span {
    display: block;
    word-wrap: break-word;
    word-break: break-all;
}

.mod-radio label span:before,
.mod-checkbox label span:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 5.3125vw;
    height: 5.3125vw;
    background: url(../img/common/ico_radio_01.png) no-repeat 0 50%;
    background-size: auto 100%;
}

.mod-radio label input:checked+span:before,
.mod-checkbox label input:checked+span:before {
    background-position: 100% 50%;
}

.mod-radio input,
.mod-checkbox input {
    position: absolute;
    top: -100%;
    left: -100%;
}

.mod-radio strong,
.mod-checkbox strong {
    display: block;
    margin: 2.1875vw 0 0;
    color: #666;
    font-family: 'NotoSansL';
}

.mod-checkbox label span:before {
    background-image: url(../img/common/ico_checkbox_01.png);
}


/*docs
---
title: mod-select
name: typo-040
category: typography
---

```html
<div class="mod-select">
<select name="shop">
<option value="" selected="selected">販売店を選んでください</option>
<option value="サンワ機器販売株式会社">サンワ機器販売株式会社</option>
</div>
```
*/

.mod-select {
    position: relative;
    width: 100%;
}

.mod-select-small {
    width: 42.5vw;
}

.mod-select:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12.34375vw;
    height: 12.5vw;
    background: url(../img/common/bg_select_01.png) no-repeat 50% 50%;
    background-size: 2.8125vw auto;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    pointer-events: none;
}

.mod-select:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12.34375vw;
    height: 12.5vw;
    border-left: 0.3125vw solid #ccc;
    pointer-events: none;
}

.mod-select select {
    outline: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 12.8125vw;
    margin: 0;
    padding: 0;
    padding: 0 12.34375vw 0 3.125vw;
    border: 0;
    border: 0.3125vw solid #ccc;
    border-radius: 0;
    background: none transparent;
    color: inherit;
    font-size: inherit;
    font-size: 4.0625vw;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-select select::-ms-clear {
    display: none;
}

.mod-select select::-ms-reveal {
    display: none;
}

.mod-select select::-ms-expand {
    display: none;
}

.mod-select select::-ms-expand {
    display: none;
}


/*docs
---
title: mod-pager
name: typo-040
category: typography
---

```html
<div class="mod-pager">
<ol>
<li class="mod-pager-prev"><a href="DUMMY">前へ</a></li>
<li class="mod-pager-next"><a href="DUMMY">次へ</a></li>
</ol>
</div><!-- /.mod-pager -->

```
*/

.mod-pager {
    position: relative;
    margin: 12.5vw -4.6875vw 0;
    padding: 0 4.6875vw;
    border-bottom: 0.3125vw solid #ccc;
    background: #f2f4f7;
    font-size: 4.0625vw;
}

.mod-pager ol {
    display: flex;
    position: relative;
    z-index: 1;
    justify-content: center;
    height: 11.25vw;
}

.mod-pager ol:empty {
    display: none;
}

.mod-pager li {
    display: flex;
    flex: 1;
    justify-content: center;
}

.mod-pager li.mod-pager-prev {
    justify-content: flex-start;
}

.mod-pager li.mod-pager-next {
    justify-content: flex-end;
}

.mod-pager li.is-active a {
    color: #0c56a6;
}

.mod-pager li.is-active a:after {
    opacity: 1;
}

.mod-pager a {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 14.53125vw;
    color: #0c56a6;
    font-family: 'NotoSansR';
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.mod-pager a:hover {
    opacity: 1;
    color: #0c56a6;
}

.mod-pager a:hover:after {
    opacity: 1;
}

.mod-pager a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.25vw;
    background: #0c56a6;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.mod-pager span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14.53125vw;
    padding: 0 1.71875vw;
    font-family: 'NotoSansR';
}


/*docs
---
title: mod-news-list
name: typo-040
category: typography
---

```html

```
*/

.mod-news-list {
    margin: 15.625vw 0 0;
}

.mod-news-list dt {
    margin: 0 0 5.3125vw;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
}

.mod-news-list dd {
    margin: 3.90625vw 0 0;
    font-size: 3.75vw;
}

.mod-news-list a {
    display: block;
    padding: 0 0 0 5.9375vw;
    background: url(../img/common/ico_arrow_05.png) no-repeat 0 50%;
    background-size: 4.0625vw auto;
    color: #333;
    font-family: 'NotoSansR';
    text-decoration: none;
}

.mod-news-list a.is-active {
    background-image: url(../img/common/ico_arrow_06.png);
    color: #0c56a6;
}


/*docs
---
title: mod-file
name: mod-file
category: typography
---

```html

```
*/

.mod-file {
    margin: 9.6875vw 0 0;
    padding: 4.6875vw 4.6875vw 6.25vw;
    background: #f2f4f7;
}

.mod-file+.mod-file {
    margin: 6.25vw 0 0;
}

.mod-file p {
    margin-top: 0;
    font-size: 4.0625vw;
    line-height: 1.76;
}

.mod-file .mod-btn {
    margin: 3.75vw 0 0;
}


/*docs
---
title: mod-youtube
name: mod-youtube
category: typography
---

```html

```
*/

.mod-youtube {
    margin: 7.5vw 0 0;
}

.mod-youtube figure {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.mod-youtube figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*docs
---
title: mod-toggle
name: mod-toggle
category: typography
---

```html

```
*/

.mod-toggle {
    border-top: 0.3125vw solid #ccc;
}

.mod-toggle dt {
    border-bottom: 0.3125vw solid #ccc;
}

.mod-toggle dt.is-open button {
    color: #0c56a6;
}

.mod-toggle dt.is-open button:before {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-toggle dt.is-open+dd {
    max-height: 100%;
}

.mod-toggle button {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    padding: 3.75vw 3.28125vw;
    border: 0;
    border-radius: 0;
    background: none transparent;
    color: inherit;
    font-family: 'NotoSansR';
    font-size: inherit;
    font-size: 4.375vw;
    text-align: left;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.mod-toggle button::-ms-clear {
    display: none;
}

.mod-toggle button::-ms-reveal {
    display: none;
}

.mod-toggle button::-ms-expand {
    display: none;
}

.mod-toggle button:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 3.125vw;
    width: 3.4375vw;
    height: 0.3125vw;
    background: #101010;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.mod-toggle button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3.125vw;
    width: 3.4375vw;
    height: 0.3125vw;
    background: #101010;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-toggle dd {
    overflow: hidden;
    max-height: 0;
    background: #f2f4f7;
    transition: max-height 0.3s ease-in-out;
}

.mod-toggle .mod-faq li:first-child {
    border-top: none;
}


/*docs
---
title: mod-hr
name: mod-hr
category: typography
---

```html

```
*/

.mod-hr {
    margin: 7.1875vw 0;
    border: none;
    border-top: 0.3125vw solid #ccc;
}


/*docs
---
title: mod-reference
name: mod-reference
category: typography
---

```html

```
*/

.mod-reference {
    margin: 9.375vw 0 0;
    padding: 6.25vw;
    background: #f2f4f7;
}

.mod-reference dt {
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    text-align: center;
}

.mod-reference dd {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6.875vw -3.125vw 0;
}

.mod-reference a {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    margin: 0 3.125vw;
    padding: 3.90625vw;
    border: 0.3125vw solid #ccc;
    border-radius: 1.5625vw;
    background: #fff;
    color: #333;
    font-size: 3.4375vw;
    text-decoration: none;
}

.mod-reference a:hover {
    border-color: #0c56a6;
    color: #0c56a6;
}


/*docs
---
title: mod-ondemand-list
name: mod-ondemand-list
category: typography
---

```html

```
*/

.mod-ondemand-list {
    font-size: 3.75vw;
    line-height: 1.5;
}

.mod-ondemand-list li {
    border-bottom: 0.3125vw solid #ccc;
}

.mod-ondemand-list a {
    display: block;
    position: relative;
    padding: 3.28125vw 17.1875vw 3.28125vw 6.25vw;
    color: #333;
    font-family: 'NotoSansR';
    text-decoration: none;
}

.mod-ondemand-list a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6.25vw;
    width: 4.84375vw;
    height: 4.84375vw;
    background: url(../img/common/ico_arrow_07.png) no-repeat 50% 50%, url(../img/common/ico_arrow_08.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mod-ondemand-list a span {
    margin: 10px 0 0;
    font-family: 'NotoSansL';
    font-size: 1.4rem;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .mod-grid
name: l-030
category: layout
---

```html
<div class="mod-grid">

<div class="mod-grid-column1">
column1
</div>

<div class="mod-grid-column11">
column11
</div>

<div class="mod-grid-column10">
column10
</div>

<div class="mod-grid-column2">
column2
</div>

<div class="mod-grid-column9">
column9
</div>

<div class="mod-grid-column3">
column3
</div>

<div class="mod-grid-column8">
column8
</div>

<div class="mod-grid-column4">
column4
</div>

<div class="mod-grid-column7">
column7
</div>

<div class="mod-grid-column5">
column5
</div>

<div class="mod-grid-column6">
column6
</div>

<div class="mod-grid-column6">
column6
</div>

</div><!-- /.mod-grid -->
```
*/

.mod-grid {
    margin: 7.8125vw 0 0;
}

.mod-grid:first-child {
    margin-top: 0;
}

.mod-grid img {
    max-width: 100%;
    height: auto;
}

.mod-grid-text {
    margin-top: 5vw;
}

.mod-grid .mod-btn-group:first-child {
    margin-top: 0;
}

.mod-grid .mod-btn-group+.mod-p {
    margin-top: 2.1875vw;
    padding: 0 4.6875vw;
}

.mod-grid .mod-btn:first-child {
    margin-top: 0;
}

.mod-grid4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


/* =====================================================
 * Blocks
 * ================================================== */


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-grid
name: block-grid
category: block
---

```html
<div class="block-grid mod-grid mod-grid3">
<div class="mod-grid-col">
<a href="{{ dataProject.map.contents_ondemand }}">
<figure class="mod-figure">
<img src="{{ dataProject.path }}img/common/ph_contents_01.jpg" alt="">
</figure><!-- /.mod-figure -->
<h3 class="block-grid-title">コグニオンデマンド</h3>
<p class="block-grid-text">弊社製品・サービスの操作方法や便利な使い方、その他さまざまな情報をインターネット回線を通じて、パソコン・スマートフォン・タブレットなどで無料で視聴できるサービスです。</p>
</a>
</div><!-- /.mod-grid-col -->
<div class="mod-grid-col">
<a href="{{ dataProject.map.contents_magazine }}">
<figure class="mod-figure">
<img src="{{ dataProject.path }}img/common/ph_contents_02.jpg" alt="">
</figure><!-- /.mod-figure -->
<h3 class="block-grid-title">コグニマガジン</h3>
<p class="block-grid-text">人気コラム「チェックアップ・レポート」がWebでも楽しめるようになりました！外出先でスマートフォンややご自宅のパソコンでも閲覧できます。過去の記事も一挙公開中！</p>
</a>
</div><!-- /.mod-grid-col -->
<div class="mod-grid-col">
<a href="{{ dataProject.map.contents_kikanauda }}">
<figure class="mod-figure">
<img src="{{ dataProject.path }}img/common/ph_contents_03.jpg" alt="">
</figure><!-- /.mod-figure -->
<h3 class="block-grid-title">季刊cognivision</h3>
<p class="block-grid-text">「季刊cognivision」は、1995年5月に創刊した情報季刊誌です。ワンポイントアドバイスやその時々の旬な話題を特集し、お役に立つ情報など内容は盛りだくさんです！</p>
</a>
</div><!-- /.mod-grid-col -->
</div><!-- /.block-grid.mod-grid3 -->
```
*/

.block-grid a {
    display: block;
    color: #333;
    text-decoration: none;
}

.block-grid .mod-figure {
    position: relative;
}

.block-grid .mod-figure:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0c56a6;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.block-grid-title {
    margin: 3.75vw 0 0;
    font-family: 'NotoSansR';
    font-size: 5.3125vw;
}

.block-grid-text {
    margin: 1.5625vw 0 0;
    font-size: 3.75vw;
    line-height: 1.7;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-slide
name: block-slide
category: block
---

```html
<div class="block-slide">
<div class="mod-grid js-slide">
<div class="mod-grid-col">
<figure class="mod-figure">
<img src="{{ dataProject.path }}img/dummy/580x290.png" alt="" class="is-pc-hide">
<img src="{{ dataProject.path }}img/dummy/1160x300.png" alt="" class="is-sp-hide">
</figure>
</div>
</div>
</div><!-- /.block-slide -->
```
*/

.block-slide-shadow .slick-list {
    box-shadow: 0 0 1.5625vw 1.5625vw rgba(34, 23, 20, 0.13);
}

.block-slide .slick-slider {
    padding: 0 0 6.71875vw;
}

.block-slide a {
    display: block;
}

.block-slide .mod-grid {
    margin-top: 0;
}

.block-slide .mod-grid-col {
    margin-top: 0 !important;
}

.block-slide img {
    width: 100%;
    height: auto;
}

.block-slide .slick-slider .slick-list {
    margin: 0;
    padding: 0;
    background: none;
}

.block-slide .slick-dots {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    justify-content: center;
    width: 100%;
}

.block-slide .slick-dots li {
    margin: 0 1.25vw;
    font-size: 0;
}

.block-slide .slick-dots li.slick-active button {
    background: #0068b7;
}

.block-slide .slick-dots button {
    overflow: hidden;
    box-sizing: border-box;
    width: 2.1875vw;
    height: 0;
    margin: 0;
    padding: 0;
    padding-top: 2.1875vw;
    border: 0;
    border-radius: 0;
    border-radius: 50%;
    background: none transparent;
    background: #ccc;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 200%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.block-slide .slick-dots button::-ms-clear {
    display: none;
}

.block-slide .slick-dots button::-ms-reveal {
    display: none;
}

.block-slide .slick-dots button::-ms-expand {
    display: none;
}

.block-slide .slick-arrow {
    position: absolute;
    top: 50%;
    overflow: hidden;
    box-sizing: border-box;
    width: 2.8125vw;
    height: 0;
    margin: 0;
    padding: 0;
    padding-top: 4.375vw;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background: no-repeat 50% 50%;
    background-size: contain;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 200%;
    -webkit-transform: translateY(calc(-50% - 3.4375vw));
    transform: translateY(calc(-50% - 3.4375vw));
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.block-slide .slick-arrow::-ms-clear {
    display: none;
}

.block-slide .slick-arrow::-ms-reveal {
    display: none;
}

.block-slide .slick-arrow::-ms-expand {
    display: none;
}

.block-slide .slick-arrow.slick-prev {
    left: -5vw;
    background-image: url(../img/home/ico_slide_01.png);
}

.block-slide .slick-arrow.slick-next {
    right: -5vw;
    background-image: url(../img/home/ico_slide_02.png);
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-hero
name: block-home-hero
category: layout
---

```html
<section class="block-home-hero">
<div class="block-home-hero-inner">
<h1>Connecting Values, Connecting Futures. かつてない繋がりで、かつてない未来をつくる。</h1>
</div><!-- /.block-home-hero-inner -->
</section><!-- /.block-home-hero -->
```
*/

.block-home-hero {
    margin: 0 -4.6875vw;
    background: url(../img/home/bg_hero_01_sp.png) no-repeat 50% 50%;
    background-size: cover;
}

.block-home-hero-inner {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 125%;
    white-space: nowrap;
    text-indent: 200%;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-news
name: block-home-news
category: layout
---

```html
<section class="block-home-news">
<h2 class="block-home-news-title">News</h2>

<ul class="block-home-news-lists">
<li class="block-home-news-list">
<a href="DUMMY" class="block-home-news-link">
<span class="block-home-news-category">コグニセブン</span>
<span class="block-home-news-date">2018/12/06</span>
<span class="block-home-news-text">「コグニセブン」最新データ情報　2018年12月提供データメンテナンスメンテナンス</span>
</a>
</li>

<li class="block-home-news-list">
<a href="DUMMY" class="block-home-news-link">
<span class="block-home-news-category">アセスプロⅡ</span>
<span class="block-home-news-date">2018/12/06</span>
<span class="block-home-news-text">「アセスプロⅡ」最新データ情報　2018年12月提供データメンテナンスメンテナンス</span>
</a>
</li>

<li class="block-home-news-list">
<a href="DUMMY" class="block-home-news-link">
<span class="block-home-news-category">アセスプロⅡ</span>
<span class="block-home-news-date">2018/12/06</span>
<span class="block-home-news-text">「アセスプロⅡ」最新データ情報　2018年12月提供データメンテナンスメンテナンス</span>
</a>
</li>
</ul>
</section><!-- /.block-home-news -->
```
*/

.block-home-news {
    padding: 13.59375vw 0 15.625vw;
}

.block-home-news-title {
    margin: 0 0 -0.78125vw;
    font-family: 'Gotham', sans-serif;
    font-size: 7.5vw;
    font-weight: bold;
}

.block-home-news-text {
    flex: 1;
}

.block-home-news .mod-news {
    margin: 0;
}

.block-home-news-link {
    margin: 5vw 0 0;
    font-family: 'Gotham', sans-serif;
    font-size: 4.375vw;
    font-weight: bold;
}

.block-home-news-link a {
    display: inline-block;
    position: relative;
    padding: 0 3.90625vw 0 0;
    color: #333;
}

.block-home-news-link a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.25vw;
    height: 2.1875vw;
    background: url(../img/common/ico_arrow_01_m.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-service
name: block-home-service
category: layout
---

```html
<section class="block-home-service">
<div class="block-home-service-inner">
<h2 class="block-home-service-title">コグニビジョンの<br>
ビジネスを構成する３つの領域</h2>
<ul class="mod-grid mod-grid3">
<li class="mod-grid-col">
<figure class="block-home-service-photo"><img src="{{ dataProject.path }}img/home/ph_service_01.jpg" alt="DATA & SOFTWARE DEVELOPMENT"></figure>
<h3 class="block-home-service-title2">DATA & SOFTWARE <br>DEVELOPMENT</h3>
<p class="block-home-service-text">事故車修理費見積りの標準「コグニセブン」輸入車/トラック/二輪車の事故車修理費簡易見積り「アセスプロⅡ」など、時代変化にスピーディに対応したソフト開発とデータサービスを提供しています。</p>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<figure class="block-home-service-photo"><img src="{{ dataProject.path }}img/home/ph_service_02.jpg" alt="ONLINE SERVICE"></figure>
<h3 class="block-home-service-title2">ONLINE SERVICE</h3>
<p class="block-home-service-text">画像伝送サービスの業界標準「コグニフォトベース」など、業界ビジネスをサポート&活性化していくサービスの企画開発とその安定的提供&運営を行なっています。</p>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<figure class="block-home-service-photo"><img src="{{ dataProject.path }}img/home/ph_service_03.jpg" alt="Ｒ&Ｄ"></figure>
<h3 class="block-home-service-title2">Ｒ&Ｄ</h3>
<p class="block-home-service-text">画像認識技術、画像解析技術、AI技術、VR/AR技術、ビッグデータ技術、セキュリティ技術など、次の時代をリードする先端技術の研究および開発につとめています。</p>
</li><!-- /.mod-grid-col -->
</ul><!-- /.mod-grid3 -->
</div><!-- /.block-home-service-inner -->
</section><!-- /.block-home-service -->
```
*/

.block-home-service {
    position: relative;
    margin: 0 -4.6875vw;
    padding: 14.0625vw 4.6875vw 0;
    background: url(../img/common/bg_blue_02.png) repeat 50% 0;
    background-size: 668px auto;
    color: #fff;
}

.block-home-service:before {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18.75vw;
    background: #fff;
}

.block-home-service-title {
    font-family: 'NotoSansR';
    font-size: 5.3125vw;
    line-height: 1.5;
    text-align: center;
}

.block-home-service-title2 {
    margin: 7.8125vw 0 4.0625vw;
    font-family: 'Gotham', sans-serif;
    font-size: 5.9375vw;
    font-weight: bold;
    line-height: 1.29;
    text-align: center;
    text-transform: uppercase;
}

.block-home-service .mod-grid {
    margin: 10.9375vw 0 0;
    color: #0068b7;
}

.block-home-service .mod-grid-col {
    position: relative;
    padding: 0 7.8125vw 6.5625vw;
    background: #fff;
    box-shadow: 3px 3px 30px 0 rgba(0, 0, 0, 0.4);
}

.block-home-service .mod-grid-col:nth-child(2) .block-home-service-title2,
.block-home-service .mod-grid-col:nth-child(3) .block-home-service-title2 {
    line-height: 2.58;
}

.block-home-service-photo {
    margin: 0 -7.8125vw;
}

.block-home-service-photo img {
    width: 100%;
    height: auto;
}

.block-home-service-text {
    font-size: 3.75vw;
    line-height: 1.68;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-slide
name: block-home-slide
category: layout
---

```html
<section class="block-home-slide">
</section><!-- /.block-home-slide -->
```
*/

.block-home-slide {
    padding: 15.78125vw 0 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-products
name: block-home-products
category: layout
---

```html
<section class="block-home-products">
<h2 class="mod-top-heading">製品・サービス</h2>

<ul class="block-home-products-lists">
<li class="block-home-products-list">
<p class="block-home-products-icon"><img src="{{ dataProject.path }}img/home/ico_products_01.png" alt=""></p>
<h3 class="block-home-products-title">職場のどなたでも、<br>
簡単に見積書が作成可能。</h3>
<p class="block-home-products-text">コグニビジョンが目指しているのは、操作が簡単な製品・サービスづくり。特に「コグニセブン」での見積書作成手順は、いたってシンプルです。</p>
</li>

<li class="block-home-products-list">
<p class="block-home-products-icon"><img src="{{ dataProject.path }}img/home/ico_products_02.png" alt=""></p>
<h3 class="block-home-products-title">操作がわからない方のための、<br>
手厚いサポート体制。</h3>
<p class="block-home-products-text">お電話によるサポートはもちろんのこと、「コグニセブン」では、新規に導入されたお客様に順次、訪問サポートや講習会なども行っています。</p>
</li>

<li class="block-home-products-list">
<p class="block-home-products-icon"><img src="{{ dataProject.path }}img/home/ico_products_03.png" alt=""></p>
<h3 class="block-home-products-title">カーオーナー様も<br>
安心の見積りが完成。</h3>
<p class="block-home-products-text">コグニビジョンは多くのお客様に支持される事故車修理費見積りシステムのパイオニア。カーオーナー様にも安心の見積りをご提示できます。</p>
</li>

<li class="block-home-products-list">
<p class="block-home-products-icon"><img src="{{ dataProject.path }}img/home/ico_products_04.png" alt=""></p>
<h3 class="block-home-products-title">作業効率アップに<br>
貢献するサービスが充実。</h3>
<p class="block-home-products-text">「コグニセブン」には車両の構造資料や指数テーブルなどの豊富なデータを収録。「コグニフォトベース」とも連携でき、作業効率のUPに繋がります。</p>
</li>
</ul>

<div class="mod-grid mod-grid1">
<div class="mod-grid-col">
<div class="block-home-products-inner">
<figure class="mod-figure"><img src="{{ dataProject.path }}img/home/ph_products_01.png" alt="コグニセブン"></figure>
<div class="block-home-products-inner2">
<p class="block-home-products-text2">「コグニセブン」は、国産車向けの事故車修理費見積りシステムです。簡単な操作と分かりやすい画面表示、豊富で正確なデータや信頼のおける指数データなどによって、誰でも簡単に正確な見積書を作成することができます。</p>
<ul class="block-home-products-links">
<li><a href="{{ dataProject.map.product_cogniseven }}">MORE</a></li>
</ul>
</div>
</div>
</div><!-- /.mod-grid-col -->

<div class="mod-grid-col">
<div class="block-home-products-inner">
<figure class="mod-figure"><img src="{{ dataProject.path }}img/home/ph_products_02.png" alt="アセスプロ２"></figure>
<div class="block-home-products-inner2">
<p class="block-home-products-text2">「アセスプロⅡ」は、輸入車・トラック・二輪車のための事故車修理費簡易見積りシステムです。アジャスターパーツガイドからの豊富なデータと、「コグニセブン」に近い画面構成と操作性で、正確な見積書を素早く作成することができます。</p>
<ul class="block-home-products-links">
<li><a href="{{ dataProject.map.product_acespro }}">MORE</a></li>
</ul>
</div>
</div>
</div><!-- /.mod-grid-col -->

<div class="mod-grid-col">
<div class="block-home-products-inner">
<figure class="mod-figure"><img src="{{ dataProject.path }}img/home/ph_products_03.png" alt="コグニフォトベース"></figure>
<div class="block-home-products-inner2">
<p class="block-home-products-text2">「コグニフォトベース」は、見積書と事故車の画像を工場（自動車整備工場・自動車販売会社サービス工場等）と保険会社（損害保険会社・各種共済組合）の間でやりとりするために生まれた、画像伝送サービスです。</p>
<ul class="block-home-products-links">
<li><a href="{{ dataProject.map.product_photobase }}">MORE</a></li>
<li><a href="https://www.cogninet.jp/apb/fct/8hKjs9/" target="_blank">ご利用はこちら</a></li>
</ul>
</div>
</div>
</div><!-- /.mod-grid-col -->
</div><!-- /.mod-grid1 -->
</section><!-- /.block-home-products -->
```
*/

.block-home-products {
    margin: 14.0625vw -4.6875vw 0;
}

.block-home-products .mod-top-heading {
    margin: 0 0 11.25vw;
    color: #0068b7;
    font-family: 'NotoSansR';
}

.block-home-products-lists {
    color: #fff;
}

.block-home-products-list {
    padding: 11.25vw 12.5vw 9.6875vw;
}

.block-home-products-list:nth-child(1) {
    background: #004ea2;
}

.block-home-products-list:nth-child(2) {
    background: #0068b7;
}

.block-home-products-list:nth-child(3) {
    background: #358ac7;
}

.block-home-products-list:nth-child(4) {
    background: #73a9d8;
}

.block-home-products-title {
    margin: 7.34375vw 0 2.65625vw;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
    line-height: 1.39;
    text-align: center;
}

.block-home-products-icon {
    width: 33.125vw;
    margin: 0 auto;
}

.block-home-products-icon img {
    width: 100%;
    height: auto;
}

.block-home-products-text {
    font-size: 3.75vw;
    line-height: 1.66;
}

.block-home-products .mod-grid1 {
    margin-top: 0;
}

.block-home-products .mod-grid-col {
    display: block;
    padding: 9.53125vw 12.5vw 8.75vw;
    color: #fff;
    text-decoration: none;
}

.block-home-products .mod-grid-col:not(:first-child) {
    margin-top: 0;
}

.block-home-products .mod-grid-col:nth-child(1) {
    margin-top: 0;
    background: #002650;
}

.block-home-products .mod-grid-col:nth-child(2) {
    background: #ab1617;
}

.block-home-products .mod-grid-col:nth-child(3) {
    background: #368ac8;
}

.block-home-products .mod-figure {
    width: 70.9375vw;
    margin: 0 auto;
}

.block-home-products-text2 {
    font-size: 3.75vw;
    line-height: 1.91;
}

.block-home-products-links {
    display: flex;
    margin: 3.90625vw 0 0;
}

.block-home-products-links li {
    position: relative;
    padding: 0 3.90625vw 0 0;
}

.block-home-products-links li:nth-child(1) {
    font-family: 'Gotham', sans-serif;
    font-size: 4.375vw;
    font-weight: bold;
}

.block-home-products-links li:nth-child(2) {
    margin: 0 0 0 9.6875vw;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
}

.block-home-products-links li:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.25vw;
    height: 2.1875vw;
    background: url(../img/common/ico_arrow_02.png) no-repeat 50% 50%;
    background-size: contain;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.block-home-products-links a {
    color: #fff;
}

.block-home-products-inner2 {
    margin: 4.375vw 0 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-contents
name: block-home-contents
category: layout
---

```html
<section class="block-home-contents">

</section><!-- /.block-home-contents -->
```
*/

.block-home-contents {
    margin: 14.6875vw 0 0;
}

.block-home-contents .block-grid {
    margin-top: 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-recruit
name: block-home-recruit
category: layout
---

```html
<section class="block-home-recruit">
<h2 class="mod-top-heading">Recruit</h2>

<ul class="mod-grid3">
<li class="mod-grid-col">
<a href="{{ dataProject.map.recruit_about }}" target="_blank" class="block-home-recruit-link">
<span class="block-home-recruit-icon"><img src="{{ dataProject.path }}img/home/ico_recruit_01.png" alt=""></span>
<span class="block-home-recruit-text">5分でわかるコグニビジョン</span>
</a>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<a href="{{ dataProject.map.recruit_jobs }}" target="_blank" class="block-home-recruit-link">
<span class="block-home-recruit-icon"><img src="{{ dataProject.path }}img/home/ico_recruit_02.png" alt=""></span>
<span class="block-home-recruit-text">職種紹介</span>
</a>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<a href="{{ dataProject.map.recruit_recruit }}" target="_blank" class="block-home-recruit-link">
<span class="block-home-recruit-icon"><img src="{{ dataProject.path }}img/home/ico_recruit_03.png" alt=""></span>
<span class="block-home-recruit-text">募集職種</span>
</a>
</li><!-- /.mod-grid-col -->
</ul><!-- /.mod-grid3 -->
</section><!-- /.block-home-recruit -->
```
*/

.block-home-recruit {
    margin: 13.59375vw 0 0;
}

.block-home-recruit-link {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 45.3125vw;
    padding: 1.5625vw 0 0;
    background: url(../img/common/bg_blue_03.png) repeat 50% 50%;
    background-size: 44.0625vw auto;
    color: #fff;
    font-size: 4.375vw;
    text-decoration: none;
}

.block-home-recruit-icon {
    height: 16.5625vw;
    margin: 0 0 4.53125vw;
}

.block-home-recruit-icon img {
    width: auto;
    height: 100%;
}

.block-home-recruit .mod-grid {
    margin-top: 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-company
name: block-home-company
category: layout
---

```html
<section class="block-home-company">
<h2 class="mod-top-heading">company</h2>

<ul class="mod-grid3">
<li class="mod-grid-col">
<a href="{{ dataProject.map.greetings }}" class="block-home-company-link"><span class="block-home-company-text">ご挨拶</span></a>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<a href="{{ dataProject.map.company }}" class="block-home-company-link"><span class="block-home-company-text">会社概要</span></a>
</li><!-- /.mod-grid-col -->

<li class="mod-grid-col">
<a href="{{ dataProject.map.history }}" class="block-home-company-link"><span class="block-home-company-text">沿革</span></a>
</li><!-- /.mod-grid-col -->
</ul><!-- /.mod-grid3 -->
</section><!-- /.block-home-company -->
```
*/

.block-home-company {
    margin: 14.375vw 0 0;
}

.block-home-company .mod-grid-col:nth-child(1) .block-home-company-link {
    background-image: url(../img/home/bg_comapny_01.png);
}

.block-home-company .mod-grid-col:nth-child(2) .block-home-company-link {
    background-image: url(../img/home/bg_comapny_02.png);
}

.block-home-company .mod-grid-col:nth-child(3) .block-home-company-link {
    background-image: url(../img/home/bg_comapny_03.png);
}

.block-home-company-link {
    display: block;
    position: relative;
    padding-top: 56.39%;
    background: no-repeat 50% 50%;
    background-size: contain;
    color: #fff;
    font-size: 4.375vw;
}

.block-home-company-link:hover {
    text-decoration: none;
}

.block-home-company-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 29.6875vw;
    padding: 3.59375vw;
    background: #0068b7;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.block-home-company .mod-grid {
    margin-top: 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-home-emergency
name: block-home-emergency
category: layout
---

```html
<div class="block-home-emergency">
<div class="block-home-emergency-inner">
<ul class="mod-news">
<li><a href="{{ dataProject.map.news }}/detail.html">
<span class="mod-news-category">お知らせ</span>
<time class="mod-news-date">2019/02/01</time>
<span class="mod-news-text">「インターネットエクスプローラの起動に失敗しました」のエラーが発生する件について</span>
</a></li>
</ul><!-- /.mod-news -->
</div><!-- /.block-home-emergency-inner -->
</div><!-- /.block-home-emergency -->
```
*/

.block-home-emergency {
    margin: 0 -4.6875vw;
    background: rgba(230, 0, 71, 0.1);
}

.block-home-emergency-inner {
    display: flex;
    width: 100%;
}

.block-home-emergency .mod-news {
    margin: 0;
}

.block-home-emergency .mod-news li {
    border: none;
}

.block-home-emergency .mod-news li a {
    padding: 6.25vw 4.6875vw 5.15625vw;
    color: #e60047;
    font-family: 'NotoSansR';
}

.block-home-emergency .mod-news-category {
    border-color: #e60047;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-entry
name: block-entry
category: block
---
*/

.block-entry-news {
    padding: 0.625vw 0 0;
}

.block-entry .block-entry-event+p {
    margin-top: 0;
}

.block-entry p {
    margin: 7.5vw 0 0;
    font-size: 4.0625vw;
    line-height: 1.76;
}

.block-entry p:first-child {
    margin-top: 0;
}

.block-entry p img {
    max-width: 100%;
    height: auto;
}

.block-entry ul {
    margin: 1.37em 0 0;
    font-size: 3.75vw;
    line-height: 1.45;
}

.block-entry ul:first-child {
    margin-top: 0;
}

.block-entry ul>li {
    margin: 2.8125vw 0 0;
    padding-left: 1em;
    text-indent: -1em;
}

.block-entry ul>li:first-child {
    margin-top: 0;
}

.block-entry ul>li:before {
    content: '・';
    display: inline-block;
    width: 1em;
    text-align: center;
    text-indent: 0;
}

.block-entry ol {
    margin: 1.37em 0 0;
    font-size: 3.75vw;
    line-height: 1.45;
}

.block-entry ol:first-child {
    margin-top: 0;
}

.block-entry ol>li {
    list-style: decimal inside;
    margin: 2.8125vw 0 0;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.block-entry .mod-link-list {
    margin: 4.375vw 0 0;
}

.block-entry .mod-link-list:first-child {
    margin-top: 0;
}

.block-entry .mod-link-list>li {
    margin: 1.71875vw 0 0;
    padding: 0 0 0 3.125vw;
    font-family: 'NotoSansL';
    text-indent: 0;
}

.block-entry .mod-link-list>li:before {
    content: '';
    display: initial;
}

.block-entry .mod-note-text {
    margin: 5vw 0 0;
    color: #e60047;
    font-size: 3.125vw;
    line-height: 1.75;
}

.block-entry .mod-note-list {
    margin: 4.6875vw 0 0;
    color: #e60047;
}

.block-entry .mod-note-list:first-child {
    margin-top: 0;
}

.block-entry .mod-note-list>li {
    margin: 2.34375vw 0 0;
    padding: 0 0 0 1em;
    font-family: 'NotoSansL';
    text-indent: -1em;
}

.block-entry .mod-note-list>li:first-child {
    margin-top: 0;
}

.block-entry .mod-note-list>li:before {
    content: '※';
    width: 1em;
    text-align: left;
}

.block-entry h2 {
    margin: 11.71875vw 0 7.5vw;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
    line-height: 1.64;
}

.block-entry h2:first-child {
    margin-top: 0;
}

.block-entry h2+.mod-grid {
    margin-top: -0.3125vw;
}

.block-entry h2+.mod-tbl {
    margin-top: -2.34375vw;
}

.block-entry h3 {
    margin: 11.71875vw 0 7.5vw;
    padding: 0 0 0 3.125vw;
    border-left: 1.25vw solid #b2b2b2;
    font-size: 4.375vw;
    line-height: 1.5;
}

.block-entry h3:first-child {
    margin-top: 0;
}

.block-entry h3+.mod-grid {
    margin-top: -0.3125vw;
}

.block-entry .mod-heading1 {
    margin: 11.71875vw 0 7.5vw;
    font-family: 'NotoSansR';
    font-size: 5.625vw;
    line-height: 1.47;
}

.block-entry .mod-heading1:first-child {
    margin-top: 0;
}

.block-entry .mod-heading1+.mod-grid {
    margin-top: -0.3125vw;
}

.block-entry .mod-heading1+.mod-btn-group {
    margin-top: -2.34375vw !important;
}

.block-entry .mod-heading2 {
    margin: 11.71875vw 0 7.5vw;
    padding: 0;
    border-left: none;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
    line-height: 1.64;
    text-align: center;
}

.block-entry .mod-heading2:first-child {
    margin-top: 0;
}

.block-entry .mod-heading2+.mod-grid {
    margin-top: -0.3125vw;
}

.block-entry .mod-tbl-manual ul>li {
    font-family: 'NotoSansL';
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-search
name: block-search
category: block
---

```html

```
*/

.block-search {
    margin: 11.875vw 0 0;
}

.block-search-text {
    font-size: 4.0625vw;
}

.block-search-lists {
    margin: 8.4375vw 0 0;
}

.block-search-lists dt {
    margin: 4.375vw 0 0;
    font-family: 'NotoSansR';
    font-size: 5.625vw;
}

.block-search-lists dd {
    margin: 3.125vw 0 0;
    font-size: 3.4375vw;
    line-height: 1.72;
}

.block-search-list {
    display: none;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-contact-index
name: block-contact-index
category: block
---

```html

```
*/

.block-contact-index-link {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 54.6875vw;
    background: url(../img/common/bg_blue_03.png) repeat 50% 50%;
    background-size: 93.75vw auto;
    color: #fff;
    font-size: 5.3125vw;
    line-height: 1.14;
    text-align: center;
    text-decoration: none;
}

.block-contact-index .mod-grid {
    margin-top: 0;
}


/*docs
---
title: .block-form
name: block-form
category: block
---

```html

```
*/

.mod-p+.block-form {
    margin: 7.5vw 0 0;
}

.mod-file+.block-form {
    margin: 9.375vw 0 0;
}

.block-form-list {
    padding: 7.8125vw 0 7.8125vw;
    border-bottom: 0.3125vw solid #ccc;
}

.block-form-list:first-child {
    border-top: 0.3125vw solid #ccc;
}

.block-form-list-error {
    background: rgba(230, 0, 71, 0.1);
}

.block-form-list>dt {
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    line-height: 1.23;
}

.block-form-list>dt sup {
    color: #e60047;
    font-size: 3.125vw;
}

.block-form-list>dd {
    margin: 3.75vw 0 0;
}

.block-form-confirm .block-form-list>dd {
    font-size: 4.0625vw;
    line-height: 1.76;
    word-wrap: break-word;
    word-break: break-all;
}

.block-form-address,
.block-form-tel {
    display: flex;
    align-items: center;
}

.block-form-address span,
.block-form-tel span {
    display: block;
    overflow: hidden;
    width: 3.125vw;
    height: 0;
    margin: 0 1.25vw;
    padding-top: 0.3125vw;
    background: #ccc;
    white-space: nowrap;
    text-indent: 200%;
}

.block-form-address .mod-input,
.block-form-tel .mod-input {
    flex: 1;
    min-width: 0;
}

.block-form .mod-input {
    height: 12.8125vw;
    margin: 4.6875vw 0 0;
    padding: 0 3.125vw;
    border-radius: 0;
    font-size: 4.0625vw;
}

.block-form .mod-input:first-child {
    margin-top: 0;
}

.block-form-address .mod-input {
    margin-top: 0;
}

.block-form-tel {
    width: 81.25vw;
}

.block-form-tel .mod-input {
    margin-top: 0;
}

.block-form .mod-textarea {
    margin: 4.6875vw 0 0;
}

.block-form .mod-textarea:first-child {
    margin-top: 0;
}

.block-form-text {
    margin: 7.1875vw 0 0;
    font-size: 3.125vw;
}

.block-form-note {
    margin: 2.03125vw 0 0;
    font-size: 3.4375vw;
    line-height: 1.76;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-userkai
name: block-userkai
category: block
---

```html

```
*/

.block-userkai {
    position: relative;
    margin: 3.28125vw 0 0;
}

.block-userkai-photo {
    margin: 5.46875vw 0 0;
}

.block-userkai-photo img {
    width: 100%;
    height: auto;
}

.block-userkai-link li {
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: 473px;
}

.block-userkai-link li:nth-child(1) {
    top: 95px;
    left: 789px;
}

.block-userkai-link li:nth-child(2) {
    top: 301px;
    left: 679px;
}

.block-userkai-link li:nth-child(3) {
    left: 598px;
}

.block-userkai-link li:nth-child(4) {
    top: 417px;
    left: 469px;
}

.block-userkai-link li:nth-child(5) {
    left: 448px;
}

.block-userkai-link li:nth-child(6) {
    left: 298px;
}

.block-userkai-link li:nth-child(7) {
    top: 550px;
    left: 178px;
}

.block-userkai-link a {
    display: flex;
    align-items: center;
    padding: 9px 28px;
    border: 0.3125vw solid #ccc;
    border-radius: 50px;
    background: #fff;
    color: #333;
    font-size: 1.4rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.block-userkai-link a:hover {
    border-width: 1px;
    border-color: #0c56a6;
    background: #0c56a6;
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

.block-userkai .mod-grid {
    margin-top: 16.40625vw;
}

.block-userkai .mod-grid .mod-heading2 {
    margin-bottom: 3.125vw;
}

.block-userkai-tbl {
    width: 100%;
}

.block-userkai-tbl a {
    display: inline-block;
    position: relative;
    padding: 0 0 0 3.125vw;
    font-family: 'NotoSansR';
}

.block-userkai-tbl a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0.9375vw 0 0.9375vw 1.25vw;
    border-style: solid;
    border-color: transparent transparent transparent #0068b7;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.block-userkai-tbl thead th {
    padding: 4.375vw 0;
    border-top: 0.3125vw solid #ccc;
    border-bottom: 0.3125vw solid #ccc;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    text-align: center;
}

.block-userkai-tbl thead th:first-child {
    width: 50%;
}

.block-userkai-tbl tbody th,
.block-userkai-tbl tbody td {
    padding: 0.625vw;
    font-size: 4.0625vw;
    line-height: 1.69;
}

.block-userkai-tbl tbody tr:first-child th,
.block-userkai-tbl tbody tr:first-child td {
    padding-top: 3.59375vw;
}

.block-userkai-tbl tbody th {
    padding-left: 15.46875vw;
}

.block-userkai-tbl tbody td {
    padding-left: 9.84375vw;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-serial
name: block-serial
category: layout
---

```html
div class="block-serial js-emergency-issue-link">
<div class="block-serial-inner">
<a href="{{ dataProject.map.news }}/detail.html">
<dl>
<dt>緊急動作シリアルNo.発行</dt>
<dd>緊急動作シリアルNo.発行リンク緊急動作シリアルNo.発行リンク</dd>
</dl>
</a>
</div><!-- /.block-serial-inner -->
</div><!-- /.block-serial -->
```
*/

.block-serial {
    border-top: 0.3125vw solid #ccc;
}

.block-serial:empty {
    display: none;
}

.block-serial-inner {
    display: flex;
    width: 100%;
    padding: 5.15625vw 4.6875vw;
}

.block-serial-inner>dl {
    width: 100%;
    padding: 5.15625vw 4.6875vw;
    background: rgba(0, 69, 117, 0.2);
    color: #0c56a6;
}

.block-serial-inner>dl dt {
    text-decoration: none;
}

.block-serial a {
    display: block;
    width: 100%;
    padding: 5.15625vw 4.6875vw;
    background: rgba(0, 69, 117, 0.2);
    color: #0c56a6;
    text-decoration: none;
}

.block-serial dt {
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    text-decoration: underline;
}

.block-serial dd {
    margin: 1.875vw 0 0;
    font-size: 3.4375vw;
    line-height: 1.59;
}


/* =====================================================
 * Pages
 * ================================================== */


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-kikanauda
name: l-030
category: block
---

```html
<div class="block-kikanauda">
<figure class="block-kikanauda-photo"><img src="{{ dataProject.path }}img/dummy/ph_latest.png" alt=""></figure>
<div class="block-kikanauda-text">
<h3 class="mod-heading2 mod-left">季刊cognivision2019年2月号（Vol.8）</h3>
<dl class="block-kikanauda-index">
<dt>コグニビジョン・チェックアップレポート</dt>
<dd>職場でできるメンタルケアの注意点と対策を知っておこう</dd>
</dl><!-- /.block-kikanauda-index -->

<dl class="mod-note mod-note-gray">
<dt>次回予告</dt>
<dd>次号は2019年5月発行予定です。企画が決まり次第こちらで告知させて頂きます。ご期待ください。</dd>
</dl><!-- /.mod-note -->

</div><!-- /.block-kikanauda-text -->
</div><!-- /.block-kikanauda -->
```
*/

.block-kikanauda {
    margin: 10.625vw 0 0;
}

.block-kikanauda-photo {
    width: 43.75vw;
    margin: 0 auto;
}

.block-kikanauda-photo img {
    width: 100%;
    height: auto;
}

.block-kikanauda-text {
    margin: 4.6875vw 0 0;
}

.block-kikanauda-index {
    margin: 5.15625vw 0 0;
}

.block-kikanauda-index dt {
    margin: 4.0625vw 0 0;
    color: #ee9f2d;
    font-size: 3.125vw;
}

.block-kikanauda-index dd {
    margin: 2.03125vw 0 0;
    font-size: 4.375vw;
    line-height: 1.5;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-magazine-heading
name: l-030
category: block
---

```html
```
*/

.block-magazine-heading-lead {
    margin: 0 0 -9.375vw;
}

.block-magazine-heading-vol {
    display: inline-block;
    margin: 0 0 2.5vw;
    padding: 1.09375vw 1.5625vw;
    background: #004575;
    color: #fff;
    font-family: 'Gotham', sans-serif;
    font-size: 3.4375vw;
    font-weight: bold;
}

.block-magazine-heading-text {
    display: block;
    color: #ee9f2d;
    font-family: 'NotoSansR';
    font-size: 5.3125vw;
}


/*docs
---
title: .block-magazine-note
name: l-030
category: block
---

```html
```
*/

.block-magazine-note {
    margin: 9.21875vw 0 0;
    padding: 6.40625vw 6.5625vw 4.6875vw;
    background: #f2f4f7;
}

.block-magazine-note-photo {
    width: 24.84375vw;
    margin: 0 auto 4.53125vw;
}

.block-magazine-note-photo img {
    width: 100%;
    height: auto;
}

.block-magazine-note .mod-figure {
    margin: 0 auto 4.53125vw;
}

.block-magazine-note-title {
    margin-top: 4.53125vw;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
}

.block-magazine-note-title:first-child {
    margin-top: 0;
}

.block-magazine-note-title+* {
    margin-top: 2.1875vw;
}

.block-magazine-note .mod-p {
    margin-top: 2.65625vw;
    font-size: 3.75vw;
    line-height: 1.75;
}

.block-magazine-note .mod-p:first-child {
    margin-top: 0;
}


/*docs
---
title: .block-magazine-backnumber
name: l-030
category: block
---

```html
```
*/

.block-magazine-backnumber .mod-grid-col a {
    display: block;
    text-decoration: none;
}

.block-magazine-backnumber-vol {
    margin: 4.0625vw 0 0;
    font-family: 'Gotham', sans-serif;
    font-size: 3.4375vw;
    font-weight: bold;
}

.block-magazine-backnumber-title {
    margin: 0.46875vw 0 0;
    color: #333;
    font-family: 'NotoSansR';
    font-size: 5.3125vw;
    line-height: 1.52;
}

.block-magazine-backnumber-text {
    margin: 2.03125vw 0 0;
    color: #333;
    font-size: 3.75vw;
    line-height: 1.66;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-product
name: block-product
category: block
---

```html
```
*/

.block-product .mod-figure img {
    width: 100%;
}

.block-product .mod-heading1 {
    margin: 11.71875vw 0 0;
}

.block-product-feature .mod-note-text {
    margin: 2.1875vw 0 0;
    font-size: 3.4375vw;
    line-height: 1.73;
}

.block-product-feature .mod-note-text+.mod-note-text {
    margin: 0;
}

.block-product-feature .mod-figure {
    margin: 0;
}

.block-product-application .mod-note-list+.mod-note-list {
    margin: 10.9375vw 0 0;
}

.block-product-jirei .block-grid-title {
    font-size: 5.625vw;
    line-height: 1.47;
}

.block-product-jirei .block-grid-text {
    font-size: 4.0625vw;
    line-height: 1.77;
}

.block-product-other .block-grid-title {
    margin: 3.125vw 0 0;
    font-size: 5.3125vw;
    line-height: 1.15;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-jirei-article
name: block-jirei-article
category: block
---

```html
```
*/

.block-jirei-article .mod-figure img {
    width: 100%;
}

.block-jirei-article-title .mod-heading1 {
    margin: 4.6875vw 0 0;
}

.block-jirei-article-title .mod-p {
    margin: 1.5625vw 0 0;
}

.block-jirei-article-main .mod-p {
    margin: 3.4375vw 0 0;
}

.block-jirei-article-main .mod-p+.mod-p {
    margin: 7.1875vw 0 0;
}

.block-jirei-article-main .mod-figure {
    margin: 4.6875vw 0 0;
}

.block-jirei-article-company {
    margin: 9.375vw 0 0;
    padding: 4.6875vw 6.25vw 3.125vw;
    background: #f2f4f7;
}

.block-jirei-article-company .mod-grid-col:first-child .mod-note {
    margin: 0;
}

.block-jirei-article-company .mod-grid-col:first-child .mod-note dt {
    line-height: 1.77;
}

.block-jirei-article-other .mod-heading1 {
    margin: 12.5vw 0 0;
}

.block-jirei-article-other .block-grid-title {
    font-size: 5.625vw;
    line-height: 1.47;
}

.block-jirei-article-other .block-grid-text {
    font-size: 4.0625vw;
    line-height: 1.77;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-trial
name: block-trial
category: block
---

```html
```
*/

.block-trial .mod-tbl table {
    width: 100%;
}

.block-trial-notes {
    counter-reset: trial-note;
    margin-top: 9.375vw;
}

.block-trial-notes>li {
    position: relative;
    list-style: none;
    padding-left: 3em;
    text-indent: 0;
}

.block-trial-notes>li:before {
    content: '※ ' counter(trial-note) '.';
    counter-increment: trial-note;
    position: absolute;
    top: 0;
    left: 0;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-rd
name: block-rd
category: block
---

```html
```
*/


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-company
name: block-company
category: block
---

```html
```
*/

.block-company .mod-grid-col2 .mod-heading3 {
    margin: 6.25vw 0 0;
}

.block-company .mod-grid-col2 .mod-heading3:first-child {
    margin: 0;
}

.block-company .mod-grid-col2 .mod-heading3+.mod-p {
    margin: 3.125vw 0 0;
}

.block-company-logo-01 img {
    width: 84.21875vw;
}

.block-company-logo-02 img {
    width: 48.59375vw;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-outline
name: block-outline
category: block
---

```html
```
*/

.block-outline .mod-heading1 {
    margin: 17.5vw 0 5vw;
}

.block-outline-tbl table {
    width: 100%;
    font-size: 4.0625vw;
    line-height: 1.77;
}

.block-outline-tbl table tr {
    border-bottom: 0.3125vw solid #ccc;
}

.block-outline-tbl table th {
    width: 34.0625vw;
    padding: 2.8125vw;
    padding-left: 0;
    font-family: 'NotoSansR';
    vertical-align: top;
}

.block-outline-tbl table td {
    padding: 2.8125vw 0;
    vertical-align: top;
}

.block-outline-gmap-inner {
    position: relative;
}

.block-outline-gmap-inner:before {
    content: '';
    display: block;
    padding: 39.31% 0 0;
}

.block-outline-gmap-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.block-outline .mod-heading2 {
    margin: 1.5625vw 0 0;
}

.block-outline-access-address {
    font-size: 3.75vw;
    line-height: 1.92;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-history
name: block-history
category: block
---

```html
```
*/

.block-history-period-heading {
    color: #004ea2;
    font-family: 'NotoSansR';
    font-size: 5.625vw;
    line-height: 1.94;
}

.block-history-period-heading:first-of-type {
    margin-top: 15vw;
}

.block-history-period {
    margin: 0 0 0 3.28125vw;
    border-left: 0.625vw solid #004ea2;
}

.block-history-period dl {
    padding: 7.34375vw 4.6875vw 0 9.53125vw;
}

.block-history-period dl dt {
    margin: 7.8125vw 0 0;
    color: #004ea2;
    font-family: 'NotoSansR';
    font-size: 5.625vw;
    line-height: 1.17;
}

.block-history-period dl dt:first-child {
    margin: 0;
}

.block-history-period dl dd {
    margin: 3.125vw 0 0;
    font-size: 4.0625vw;
    line-height: 1.38;
}

.block-history-period-products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1.5625vw 0 8.59375vw 3.90625vw;
}

.block-history-period-products figure {
    width: 50%;
    margin: 12.03125vw 0 0;
}

.block-history-period-products figure img {
    width: 100%;
}

.block-history-period-products figure figcaption {
    margin: 1.40625vw 0 0;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    line-height: 1.38;
    text-align: center;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-privacy
name: block-privacy
category: block
---

```html
```
*/

.block-privacy-tbl {
    margin: 2.8125vw 0 0;
    font-size: 2.8125vw;
}

.block-privacy-tbl table {
    border-collapse: collapse;
    width: 500px;
}

.block-privacy-tbl td {
    padding: 0.46875vw;
    border: #ccc 0.3125vw solid;
    vertical-align: top;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-popup04
name: block-popup04
category: block
---

```html
```
*/

.block-popup04 .mod-p {
    margin: 0;
}

.block-popup04-steps {
    counter-reset: popup04-step;
}

.block-popup04-step-text {
    position: relative;
    margin-top: 2.1875vw;
    padding: 0 0 0 7.8125vw;
    font-size: 4.0625vw;
    line-height: 1.77;
}

.block-popup04-step-text:first-child {
    margin-top: 0;
}

.block-popup04-step-text:before {
    content: counter(popup04-step) '.';
    counter-increment: popup04-step;
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'NotoSansR';
    font-size: 5vw;
    line-height: 1.44;
}


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-company
name: block-company
category: block
---

```html
```
*/


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-jirei
name: block-jirei
category: block
---

```html
```
*/


/*
#colors

@primary #33ccaa
@secondary #aa55cc
@primary-text #cccccc
*/


/*docs
---
title: .block-ondemand-index
name: block-ondemand-index
category: block
---
*/

.block-ondemand-index .block-grid-title {
    margin: 3.4375vw 0 0;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    line-height: 1.5;
}

.block-ondemand-index-title2 {
    margin: 14.0625vw 0 0;
    text-align: center;
}

.block-ondemand-index-title3 {
    display: flex;
    align-items: center;
    padding: 4.6875vw 5.9375vw;
    background: url(../img/common/bg_blue_03.png) repeat 50% 50%;
    background-size: 44.0625vw auto;
    color: #fff;
    font-family: 'NotoSansR';
    font-size: 4.375vw;
}

.block-ondemand-index-title3 span:nth-child(1) {
    width: 7.96875vw;
    margin: 0 3.28125vw 0 0;
}

.block-ondemand-index-title3 span:nth-child(2) {
    flex: 1;
}

.block-ondemand-index-list {
    background: #f2f4f7;
    font-size: 3.75vw;
    line-height: 1.58;
}

.block-ondemand-index-list a {
    display: block;
    position: relative;
    padding: 3.28125vw 17.1875vw 3.28125vw 6.25vw;
    color: #333;
    font-family: 'NotoSansR';
    text-decoration: none;
}

.block-ondemand-index-list a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6.25vw;
    width: 4.84375vw;
    height: 4.84375vw;
    background: url(../img/common/ico_arrow_07.png) no-repeat 50% 50%, url(../img/common/ico_arrow_08.png) no-repeat 50% 50%;
    background-size: contain, 0 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.block-ondemand-index-list li {
    border-bottom: 0.3125vw solid #ccc;
}

.block-ondemand-index-list li:nth-child(1) a {
    padding: 6.25vw 17.1875vw 5vw 6.25vw;
}

.block-ondemand-index-list li:nth-child(1) span {
    display: block;
}

.block-ondemand-index-list li:nth-child(1) span:nth-child(1) {
    width: 43.75vw;
}

.block-ondemand-index-list li:nth-child(1) span:nth-child(2) {
    margin: 2.1875vw 0 0;
}

.block-ondemand-index-list img {
    max-width: 100%;
    height: auto;
}

.block-ondemand-index-more {
    display: block;
    padding: 4.53125vw 6.25vw;
    border-bottom: 0.3125vw solid #ccc;
    background: #f2f4f7;
    color: #333;
    font-size: 3.4375vw;
    text-decoration: none;
}

.block-ondemand-index-more:after {
    content: '';
    display: inline-block;
    width: 4.21875vw;
    height: 4.21875vw;
    margin: -0.3125vw 0 0 3.125vw;
    background: url(../img/common/ico_arrow_05.png) no-repeat 50% 50%, url(../img/common/ico_arrow_06.png) no-repeat 50% 50%;
    background-size: 100% auto, 0 0;
    vertical-align: middle;
}


/*docs
---
title: .block-ondemand-list
name: block-ondemand-list
category: block
---
*/

.block-ondemand-list .mod-toggle {
    margin: 5vw 0 0;
    border-top: none;
}


/*docs
---
title: .block-ondemand-detail
name: block-ondemand-detail
category: block
---
*/

.block-ondemand-detail {
    padding: 0.625vw 0 0;
}

.block-ondemand-detail .block-grid-title {
    margin: 3.4375vw 0 0;
    font-family: 'NotoSansR';
    font-size: 4.0625vw;
    line-height: 1.5;
}

@media print,
screen and (min-width: 768px) {
    .l-header a {
        transition: opacity 0.2s ease-in-out;
    }
    .l-header a:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .l-header-inner {
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .l-header-submenu {
        padding: 0;
    }
    .l-header-subnav {
        border-right: 1px solid #ccc;
    }
    .l-header-subnav li {
        border-left: 1px solid #ccc;
    }
    .l-header-subnav li:nth-child(1) {
        display: flex !important;
    }
    .is-search-open .l-header-subnav li:nth-child(1) {
        display: none !important;
    }
    .is-search-open .l-header-subnav li:nth-child(2) {
        border-left: none;
    }
    .l-header-subnav li:nth-child(2) button {
        width: 106px;
        padding-top: 106px;
        background-image: url(../img/common/ico_search_01.png), url(../img/common/ico_close_01.png);
        background-size: 27px auto, 0 0;
    }
    .is-search-open .l-header-subnav li:nth-child(2) button {
        background-size: 0 0, 17px auto;
    }
    .l-header-subnav li:nth-child(2):after {
        display: none;
    }
    .l-header-logo span {
        width: 231px;
        padding-top: 57px;
    }
    .l-header-nav {
        visibility: visible;
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        padding: 0;
        border-top: 1px solid #ccc;
        background: none;
        opacity: 1;
    }
    .l-header-nav:hover:before {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .l-header-nav:hover ul ul {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    .l-header-nav:before {
        content: '';
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 50%;
        width: 200%;
        height: 253px;
        max-height: 1000px;
        background: #0c56a6;
        opacity: 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        pointer-events: none;
    }
    .l-header-nav:after {
        content: '';
        display: block;
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 200%;
        border-top: 1px solid #ccc;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .l-header-nav-inner {
        overflow-y: visible;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        transition: none;
        -webkit-transform: none;
        transform: none;
    }
    .mod-header-nav {
        display: flex;
        justify-content: space-between;
        border-top: none;
        font-size: 2.0rem;
    }
    .mod-header-nav>li:first-child ul {
        border-left: 1px solid #306fb3;
    }
    .mod-header-nav a {
        padding: 30px 0 31px;
        font-family: 'NotoSansR';
        text-align: center;
        transition: color 0.2s ease-in-out;
    }
    .mod-header-nav a:after {
        content: '';
        display: block;
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #0068b7;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .mod-header-nav a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-header-nav a:hover:after {
        opacity: 1;
    }
    .mod-header-nav a:before {
        display: none;
    }
    .mod-header-nav li {
        border-bottom: none;
        text-align: center;
    }
    .mod-header-nav li.is-active a {
        color: #0068b7;
    }
    .mod-header-nav li.is-active ul a {
        color: #fff;
    }
    .mod-header-nav li ul {
        display: flex;
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        flex-direction: column;
        width: 100%;
        height: 253px;
        max-height: 1000px;
        padding: 34px 0;
        border-right: 1px solid #306fb3;
        background: #0c56a6;
        opacity: 0;
        font-size: 1.4rem;
        line-height: 1.28;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        pointer-events: none;
    }
    .mod-header-nav li li {
        flex: 0 0 auto;
        border-top: none;
    }
    .mod-header-nav li li a {
        padding: 7px 20px;
        background: none;
        color: #fff;
        font-family: 'NotoSansL';
        text-align: left;
        transition: opacity 0.2s ease-in-out;
    }
    .mod-header-nav li li a:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .mod-header-nav li li a:hover {
        color: #fff;
    }
    .mod-header-nav li li a:after {
        top: 50%;
        right: 20px;
        left: auto;
        width: 4px;
        height: 8px;
        background: url(../img/common/ico_arrow_02.png) no-repeat 50% 50%;
        background-size: contain;
        opacity: 1;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .mod-header-search {
        top: 0;
        right: 50%;
        width: auto;
        max-width: 0;
        max-height: 1000px;
        background: #fff;
        opacity: 0;
        transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, max-width 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        -webkit-transform: translateX(372px);
        transform: translateX(372px);
    }
    .is-search-open .mod-header-search {
        width: 821px;
        max-width: 821px;
        opacity: 1;
        -webkit-transform: translateX(272px);
        transform: translateX(272px);
    }
    .mod-header-search-inner {
        position: relative;
        height: 106px;
        padding: 26px 40px 20px 76px;
    }
    .mod-header-search-input {
        padding: 16px 22px 16px 56px;
        border-radius: 5px;
        font-size: 1.8rem;
    }
    .mod-header-search-btn {
        right: auto;
        left: 0;
        width: 50px;
        padding-top: 50px;
        background-image: url(../img/common/ico_search_01.png);
        background-size: 27px auto;
    }
    .l-footer {
        margin: 100px 0 0;
        padding: 40px 0 35px;
        border-top-width: 1px;
    }
    .l-contact-mail+.l-footer {
        padding: 35px 0;
    }
    .l-footer-pagetop {
        right: 30px;
        bottom: 30px;
        width: 60px;
        height: 60px;
    }
    .l-footer-pagetop a {
        background-image: url(../img/common/ico_pagetop_01.png);
    }
    .l-footer-pagetop {
        right: 30px;
        bottom: 30px;
        width: 60px;
        height: 60px;
    }
    .l-footer-pagetop a {
        background-image: url(../img/common/ico_pagetop_01.png);
    }
    .l-footer-trial {
        right: -10px;
        bottom: 30px;
        left: auto;
        width: 172px;
        height: 180px;
    }
    .l-footer-trial a {
        padding-top: 100%;
        background-image: url(../img/common/btn_trial_01.png);
    }
    .l-footer-trial a:hover {
        opacity: 0.7;
    }
    .l-footer-inner {
        display: flex;
        justify-content: space-between;
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .l-footer-column:nth-child(1) {
        padding: 15px 0 0;
    }
    .l-footer-column:nth-child(2) {
        width: 387px;
        border-left: 1px solid #ccc;
    }
    .l-footer-btn {
        width: 460px;
    }
    .l-footer-btn a {
        padding: 25px 22px 21px;
        border-radius: 5px;
        text-align: center;
        transition: opacity 0.2s ease-in-out;
    }
    .l-footer-btn a:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .l-footer-btn a:after {
        display: none;
    }
    .l-footer-btn a span {
        margin: 0 0 4px;
        font-size: 1.5rem;
    }
    .l-footer-btn a strong {
        font-size: 2.3rem;
    }
    .l-footer-list {
        justify-content: flex-start;
        margin: 44px 0 0;
    }
    .l-footer-list li:nth-child(1) {
        width: 198px;
    }
    .l-footer-list li:nth-child(2) {
        width: 236px;
        margin: 0 0 0 32px;
    }
    .l-footer-privacy {
        justify-content: flex-start;
        padding: 22px 21px 0;
    }
    .l-footer-privacy img {
        width: 56px;
    }
    .l-footer-privacy a {
        margin: 0 0 0 9px;
        font-size: 1.6rem;
    }
    .mod-footer-nav {
        margin: 0;
        border-top: none;
        font-size: 1.6rem;
    }
    .mod-footer-nav li {
        border-bottom-width: 1px;
    }
    .mod-footer-nav a {
        padding: 9px 34px;
    }
    .mod-footer-nav a:after {
        right: 15px;
        width: 6px;
        height: 10px;
    }
    .mod-copyright {
        margin: 21px 0 0;
        padding: 0 0 9px 27px;
        font-size: 1.2rem;
        text-align: left;
    }
    .l-contact-tel {
        margin: 131px 0 0;
        padding: 70px 0 59px;
    }
    .l-contact-tel:before {
        top: -40px;
        width: 121px;
        height: 121px;
        background-size: 61px auto;
    }
    .l-contact-tel-title {
        font-size: 3.2rem;
    }
    .l-contact-tel-lead {
        margin: 7px 0 0;
        font-size: 1.6rem;
    }
    .l-contact-tel-inner {
        width: 1240px;
        margin: 47px auto 0;
        padding: 0 40px;
    }
    .l-contact-tel-lists {
        display: flex;
        margin: 0;
        border-right: 1px solid #fff;
    }
    .l-contact-tel-list {
        padding: 18px 0 27px;
        border-top: none;
        border-left: 1px solid #fff;
    }
    .l-contact-tel-title2 {
        font-size: 2.2rem;
        line-height: 1.54;
    }
    .l-contact-tel-department {
        width: 333px;
        margin: 22px auto 0;
        padding: 6px 4px;
        border-width: 1px;
        font-size: 1.8rem;
    }
    .l-contact-tel-tel {
        margin: 6px 0 0;
        font-size: 4.2rem;
    }
    .l-contact-tel-tel a {
        cursor: default;
        pointer-events: none;
    }
    .l-contact-tel-note {
        width: 254px;
        margin: 4px auto 0;
        padding: 0 13px;
        background-size: auto 37px;
        font-size: 1.4rem;
    }
    .l-contact-mail {
        font-size: 2.2rem;
    }
    .l-contact-mail a {
        padding: 42px 0 34px;
        transition: opacity 0.2s ease-in-out;
    }
    .l-contact-mail a:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .l-contact-mail a:before {
        width: 56px;
        height: 32px;
        margin: 0 auto 16px;
    }
    .l-main {
        width: 1240px;
        margin: 0 auto;
        padding: 30px 40px 0;
    }
    .page-home .l-main {
        width: auto;
        padding: 0;
    }
    .l-wrapper {
        min-width: 1240px;
        padding: 0;
    }
    .l-heading {
        padding: 0;
        background-size: 852px auto;
    }
    .l-heading-inner {
        width: 1240px;
        margin: 0 auto;
        padding: 75px 50px 76px;
    }
    .l-heading-title {
        font-size: 4.0rem;
    }
    .l-heading-text {
        margin: 24px 0 0;
        font-size: 1.6rem;
    }
    .l-breadcrumbs {
        padding: 22px 0 0;
        font-size: 1.6rem;
    }
    .l-header+.l-breadcrumbs {
        border-top-width: 1px;
    }
    .l-breadcrumbs ol {
        width: 1240px;
        margin: 0 auto;
        padding: 0 50px;
    }
    .l-breadcrumbs li:not(:last-child):after {
        margin: 0 11px;
    }
    .mod-pc-left {
        text-align: left !important;
    }
    .is-pc-hide {
        display: none !important;
    }
    .is-pc-show {
        display: block !important;
    }
    .is-br-pc-show {
        display: inline-block !important;
    }
    .check-media {
        display: none;
    }
    .mod-heading1 {
        margin: 65px 0 36px;
        font-size: 3.2rem;
        text-align: center;
    }
    .mod-heading1+.mod-grid {
        margin-top: 46px;
    }
    .mod-heading1+.mod-btn-group {
        margin-top: -5px !important;
    }
    .mod-heading2 {
        margin: 61px 0 36px;
        font-size: 2.4rem;
    }
    .mod-heading2+.mod-grid {
        margin-top: 46px;
    }
    .mod-heading2+.mod-tbl {
        margin-top: -14px;
    }
    .mod-heading3 {
        margin: 61px 0 36px;
        padding: 1px 0 1px 12px;
        border-left-width: 5px;
        font-size: 1.8rem;
    }
    .mod-heading3+.mod-grid {
        margin-top: 46px;
    }
    .mod-top-heading {
        margin: 0 0 30px;
        font-size: 3.8rem;
    }
    .mod-magazine-heading {
        margin: 50px 0 -9px;
        font-size: 4.2rem;
    }
    .mod-p {
        margin: 36px 0 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .mod-ul {
        margin: 1em 0 0;
        font-size: 1.6rem;
    }
    .mod-ul>li {
        margin: 7px 0 0;
    }
    .mod-ol {
        margin: 1em 0 0;
        font-size: 1.6rem;
    }
    .mod-ol>li {
        margin: 7px 0 0;
    }
    .mod-anchor {
        margin: 48px 0 0;
        padding: 0 9px 20px;
        font-size: 1.6rem;
    }
    .mod-anchor li {
        margin: 20px 19px 0;
    }
    .mod-anchor a {
        padding: 0 25px 0 0;
        background-size: 14px auto;
    }
    .mod-tab-link {
        position: relative;
        margin: 33px 0 0;
        padding: 0 0 1px;
        border-bottom: none;
        font-size: 1.6rem;
    }
    .mod-tab-link-gray:before {
        display: block;
    }
    .mod-tab-link-line {
        display: block;
        border-top-width: 1px;
    }
    .mod-tab-link:after {
        display: block;
        border-top-width: 1px;
    }
    .mod-tab-link ul {
        position: relative;
        z-index: 1;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        padding: 0;
    }
    .mod-tab-link li:first-child {
        margin: 0 30px;
    }
    .mod-tab-link li:not(:first-child) {
        margin: 0 30px;
    }
    .mod-tab-link a {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 29px;
        transition: all 0.2s ease-in-out;
    }
    .mod-tab-link a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-tab-link a:hover:after {
        opacity: 1;
    }
    .mod-tab-link a:after {
        height: 4px;
        transition: all 0.2s ease-in-out;
    }
    .mod-tab-link2 {
        position: relative;
        margin: 33px 0 0;
        padding: 0 0 1px;
        border-bottom: none;
        font-size: 1.6rem;
    }
    .mod-tab-link2-gray:before {
        display: block;
    }
    .mod-tab-link2-line {
        display: block;
        border-top-width: 1px;
    }
    .mod-tab-link2:after {
        display: block;
        border-top-width: 1px;
    }
    .mod-tab-link2 ul {
        display: flex;
        position: relative;
        z-index: 1;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }
    .mod-tab-link2 li {
        border-top: none;
    }
    .mod-tab-link2 li:first-child {
        margin: 0 30px;
    }
    .mod-tab-link2 li:not(:first-child) {
        margin: 0 30px;
    }
    .mod-tab-link2 a {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 29px;
        transition: all 0.2s ease-in-out;
    }
    .mod-tab-link2 a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-tab-link2 a:hover:after {
        opacity: 1;
    }
    .mod-tab-link2 a:after {
        width: 100%;
        height: 4px;
        transition: all 0.2s ease-in-out;
    }
    .mod-tab-link2 a:before {
        display: none;
    }
    .mod-link-list {
        margin: 14px 0 0;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .mod-link-list>li {
        margin: 14px 0 0;
        padding: 0 0 0 12px;
    }
    .mod-link-list>li:before {
        border-width: 5px 0 5px 6px;
    }
    .mod-btn {
        width: 260px;
        margin: 30px 20px 0;
        padding: 23px 66px 23px 28px;
        border: 1px solid #0c56a6;
        border-radius: 5px;
        font-size: 1.6rem;
        transition: all 0.2s ease-in-out;
    }
    .mod-btn:disabled {
        border-color: #666;
    }
    .mod-btn:disabled:hover:after {
        background-size: contain, 0 0;
    }
    .mod-btn:hover:after {
        background-size: 0 0, contain;
    }
    .mod-btn:after {
        width: 65px;
        height: 14px;
    }
    .mod-btn-large {
        justify-content: center;
        width: 540px;
        padding: 23px 66px;
    }
    .mod-btn-group {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 19px 0 0;
        padding: 0;
    }
    .mod-btn-group.mod-btn-group-liquid {
        margin: 19px -10px 0;
    }
    .mod-hr+.mod-btn-group.mod-btn-group-liquid {
        margin-top: -10px;
    }
    .mod-btn-pdf:after {
        height: 24px;
    }
    .mod-btn-excel:after {
        height: 24px;
    }
    .mod-btn-download:after {
        height: 17px;
    }
    .mod-btn-list {
        width: 360px;
        margin: 54px 15px 0;
        padding: 21px 28px;
        font-size: 2.2rem;
    }
    .mod-btn-list:after {
        width: 45px;
        height: 36px;
        margin: 0 0 0 22px;
    }
    .mod-btn-white {
        padding: 22px 15px;
        border: 1px solid #ccc;
        border-radius: 50px;
    }
    .mod-btn-white:hover {
        border-color: #0c56a6;
        background: #0c56a6;
        color: #fff;
    }
    .mod-btn-white-liquid {
        width: auto;
        margin: 20px 10px 0;
        padding: 23px 36px;
    }
    .mod-figure {
        margin: 60px 0 0;
    }
    .mod-figure figcaption {
        margin: 10px 0 0;
        font-size: 1.6rem;
    }
    .mod-note {
        margin: 18px 0 0;
    }
    .mod-note-gray {
        padding: 19px 20px 17px;
    }
    .mod-note-error {
        margin-bottom: 60px;
        padding: 19px 20px 17px;
    }
    .mod-note-wrap {
        overflow: hidden;
        max-height: initial;
        margin: 59px 0 0;
        padding: 19px 20px 17px;
    }
    .mod-note-wrap+.mod-note-wrap {
        margin: 40px 0 0;
    }
    .mod-note-wrap .mod-note-gray {
        padding: 0;
    }
    .mod-note-wrap .mod-p {
        font-size: 1.4rem;
        line-height: 1.57;
    }
    .mod-note-wrap .mod-p:first-child {
        margin: 16px 0 0;
    }
    .mod-note-wrap .mod-ul {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .mod-note dt {
        font-size: 1.6rem;
    }
    .mod-note dd {
        font-size: 1.4rem;
        line-height: 1.57;
    }
    .mod-note dd:first-of-type {
        margin: 7px 0 0;
    }
    .mod-note-btn {
        min-height: 104px;
        padding-right: 295px;
    }
    .mod-note-btn .mod-btn {
        position: absolute;
        top: 50%;
        right: 20px;
        margin: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .mod-note-text {
        margin: 22px 0 0;
        padding: 0;
        font-size: 1.6rem;
    }
    .mod-note-list {
        margin: 21px 0 0;
        font-size: 1.6rem;
    }
    .mod-note-list>li {
        margin: 14px 0 0;
    }
    .mod-tbl-common th,
    .mod-tbl-common td {
        border-width: 1px;
    }
    .mod-tbl {
        margin: 53px 0 0;
    }
    .mod-tbl table {
        table-layout: fixed;
        width: 100%;
        border-bottom-width: 1px;
    }
    .mod-tbl th,
    .mod-tbl td {
        padding: 26px 38px;
        border-top: #ccc 1px solid;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .mod-tbl th {
        width: 238px;
        vertical-align: top;
    }
    .mod-tbl .mod-p {
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .mod-tbl-entry caption {
        padding: 15px 42px;
        border-top-width: 1px;
        font-size: 1.8rem;
    }
    .mod-tbl-entry th,
    .mod-tbl-entry td {
        padding: 10px 0 10px 18px;
        border-bottom-width: 1px;
        font-size: 1.6rem;
        line-height: 2;
    }
    .mod-tbl-entry th:first-child,
    .mod-tbl-entry td:first-child {
        padding-left: 42px;
    }
    .mod-tbl-entry th:last-child,
    .mod-tbl-entry td:last-child {
        padding-right: 46px;
    }
    .mod-tbl-entry th {
        width: 184px;
        border-top-width: 1px;
        font-size: 1.8rem;
    }
    .mod-tbl-entry td {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .mod-tbl-backnumber th:first-child {
        width: 206px;
    }
    .mod-tbl-backnumber th:last-child {
        width: 224px;
    }
    .mod-tbl-backnumber td:nth-child(2) {
        width: 364px;
    }
    .mod-tbl-manual th:first-child {
        width: 206px;
    }
    .mod-tbl-manual th:last-child {
        width: 224px;
    }
    .mod-tbl-car2 th:first-child {
        width: 206px;
    }
    .mod-tbl-car2 th:last-child {
        width: 224px;
    }
    .mod-tbl-car1 th {
        width: 361px;
    }
    .mod-tbl-car1 th:first-child {
        width: 391px;
    }
    .mod-tbl-car1 th:last-child {
        width: 410px;
    }
    .mod-tbl-car1 td.mod-pt-none:first-child {
        padding-left: 18px;
    }
    .mod-tbl-stripes {
        margin-bottom: 53px;
    }
    .mod-tbl-stripes td {
        vertical-align: middle;
    }
    .mod-tbl-soft {
        margin: 53px 0 0;
    }
    .mod-tbl-soft table {
        width: 100%;
    }
    .mod-tbl-soft th,
    .mod-tbl-soft td {
        padding: 10px 18px;
        border-width: 1px;
        font-size: 1.6rem;
        line-height: 2;
    }
    .mod-tbl-soft th {
        font-size: 1.8rem;
    }
    .mod-tbl-soft td {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .mod-faq {
        margin: 36px 0 0;
        border-bottom-width: 1px;
        font-size: 1.6rem;
        line-height: 1.25;
    }
    .mod-heading2+.mod-faq {
        margin: -16px 0 0;
    }
    .mod-faq li {
        border-top-width: 1px;
    }
    .mod-faq a {
        padding: 30px 80px 29px 73px;
    }
    .mod-faq a:hover {
        background: #f2f4f7;
        opacity: 1;
        color: #0c56a6;
    }
    .mod-faq a:hover:before,
    .mod-faq a:hover:after {
        background-size: 0 0, contain;
    }
    .mod-faq a:before {
        left: 39px;
        width: 13px;
        height: 21px;
    }
    .mod-faq a:after {
        right: 40px;
        width: 10px;
        height: 20px;
    }
    .mod-faq-category {
        display: inline-block;
        min-width: 200px;
        margin: 0 20px 0 0;
        padding: 4px 10px;
        border-width: 1px;
        border-radius: 5px;
        font-size: 1.6rem;
        transition: all 0.2s ease-in-out;
    }
    .ie .mod-faq-category {
        padding: 5px 0 3px;
    }
    .mod-news {
        margin: 36px 0 0;
        font-size: 1.6rem;
        line-height: 1.25;
    }
    .mod-heading1+.mod-news {
        margin: -18px 0 0;
    }
    .mod-news li {
        border-bottom-width: 1px;
    }
    .mod-news a {
        flex-wrap: nowrap;
        align-items: flex-start;
        padding: 20px 40px 18px;
        transition: all 0.2s ease-in-out;
    }
    .mod-news a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-news a:hover .mod-news-category {
        border-color: #0c56a6;
    }
    .mod-news-category {
        min-width: 180px;
        padding: 4px 10px;
        border-width: 1px;
        border-radius: 5px;
        font-size: 1.6rem;
        transition: all 0.2s ease-in-out;
    }
    .ie .mod-news-category {
        padding: 5px 0 3px;
    }
    .mod-news-date {
        margin: 0 20px;
        font-size: 1.6rem;
        line-height: calc(2rem + 10px);
    }
    .mod-news-text {
        flex: 1;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 2px 0 0;
        font-size: 1.6rem;
        word-wrap: break-word;
        word-break: break-all;
    }
    .mod-search {
        margin: 40px 0 0;
    }
    .mod-search-btn {
        width: 107px;
        padding-top: 60px;
        background-size: 27px auto;
        transition: opacity 0.2s ease-in-out;
    }
    .mod-search-btn:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .mod-input {
        height: 60px;
        padding: 0 107px 0 39px;
        border-width: 1px;
        border-radius: 5px;
        font-size: 1.6rem;
    }
    .mod-textarea {
        height: 40px;
        padding: 7px 14px;
        border-width: 1px;
        font-size: 1.6rem;
    }
    .mod-textarea-large {
        height: 240px;
    }
    .mod-radio,
    .mod-checkbox {
        display: flex;
        margin: 60px 0 0;
    }
    .mod-radio label,
    .mod-checkbox label {
        min-height: 19px;
        padding: 0 0 0 29px;
        font-size: 1.6rem;
    }
    .mod-radio label:not(:first-child),
    .mod-checkbox label:not(:first-child) {
        margin: 0 0 0 57px;
    }
    .mod-radio label span:before,
    .mod-checkbox label span:before {
        width: 19px;
        height: 19px;
    }
    .mod-radio strong,
    .mod-checkbox strong {
        display: inline;
    }
    .mod-select {
        width: 390px;
    }
    .mod-select-small {
        width: 150px;
    }
    .mod-select:after {
        width: 43px;
        height: 40px;
        background-size: 7px auto;
    }
    .mod-select:before {
        width: 43px;
        height: 40px;
        border-width: 1px;
    }
    .mod-select select {
        height: 40px;
        padding: 0 43px 0 14px;
        border-width: 1px;
        font-size: 1.6rem;
    }
    .edge .mod-select select {
        padding: 8px 43px 0 14px;
    }
    .mod-pager {
        margin: 60px 0 0;
        padding: 0;
        border-bottom: none;
        font-size: 1.6rem;
    }
    .mod-pager:before,
    .mod-pager:after {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #f2f4f7;
    }
    .mod-pager:before {
        right: 100%;
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    .mod-pager:after {
        left: 100%;
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    .mod-pager ol {
        height: 55px;
    }
    .mod-pager a {
        width: 110px;
    }
    .mod-pager a:after {
        height: 4px;
    }
    .mod-pager span {
        width: 110px;
    }
    .mod-file {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 60px 0 0;
        padding: 30px 40px;
    }
    .mod-file+.mod-file {
        margin: 40px 0 0;
    }
    .mod-file p {
        flex: 1;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .mod-file .mod-btn {
        margin: 0;
    }
    .mod-youtube {
        width: 560px;
        margin: 53px auto 0;
    }
    .mod-toggle {
        border-top: none;
    }
    .mod-toggle dt {
        border-bottom-width: 1px;
    }
    .mod-toggle button {
        padding: 27px 0;
        font-size: 2.4rem;
        transition: color 0.2s ease-in-out;
    }
    .mod-toggle button:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-toggle button:before {
        right: 40px;
        width: 22px;
        height: 2px;
    }
    .mod-toggle button:after {
        right: 40px;
        width: 22px;
        height: 2px;
    }
    .mod-hr {
        margin: 51px 0;
        border-top-width: 1px;
    }
    .mod-reference {
        margin: 60px 0 0;
        padding: 32px 40px 40px;
    }
    .mod-reference dt {
        font-size: 1.6rem;
    }
    .mod-reference dd {
        margin: 28px -20px 0;
    }
    .mod-reference a {
        flex: 0 0 auto;
        width: 260px;
        margin: 0 10px;
        padding: 23px;
        border-width: 1px;
        border-radius: 5px;
        font-size: 1.6rem;
        transition: all 0.2s ease-in-out;
    }
    .mod-ondemand-list {
        font-size: 1.6rem;
        line-height: 1.25;
    }
    .mod-ondemand-list li {
        border-bottom-width: 1px;
    }
    .mod-ondemand-list a {
        padding: 23px 90px 23px 40px;
        transition: color 0.2s ease-in-out;
    }
    .mod-ondemand-list a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .mod-ondemand-list a:after {
        right: 40px;
        width: 27px;
        height: 27px;
    }
    .mod-ondemand-list a span {
        display: block;
    }
    .mod-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin: 60px -20px 0;
    }
    .mod-grid-text {
        margin-top: -10px;
    }
    .mod-grid-reverse {
        flex-direction: row-reverse !important;
    }
    .mod-grid-col {
        margin-right: 20px;
        margin-left: 20px;
    }
    .mod-grid .mod-btn-group+.mod-p {
        margin-top: 16px;
        padding: 0;
        line-height: 1.5;
    }
    .mod-grid .mod-btn {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .mod-grid1 {
        margin-right: 0;
        margin-left: 0;
    }
    .mod-grid1 .mod-grid-col {
        flex-basis: 100%;
        max-width: 100%;
        margin: 60px 0 0;
    }
    .mod-grid1 .mod-grid-col:first-child {
        margin-top: 0;
    }
    .mod-grid2 .mod-grid-col {
        flex-basis: calc(50% - 40px);
        max-width: calc(50% - 40px);
    }
    .mod-grid3 .mod-grid-col {
        flex-basis: calc(33.33333% - 40px);
        max-width: calc(33.33333% - 40px);
    }
    .mod-grid3 .mod-grid-col2 {
        flex-basis: calc(66.66667% - 40px);
        max-width: calc(66.66667% - 40px);
    }
    .mod-grid4 {
        margin-right: -10px;
        margin-left: -10px;
    }
    .mod-grid4 .mod-grid-col {
        flex-basis: calc(25% - 20px);
        max-width: calc(25% - 20px);
        margin-right: 10px;
        margin-left: 10px;
    }
    .mod-grid4 .mod-grid-col2 {
        flex-basis: calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
    .mod-grid4 .mod-grid-col3 {
        flex-basis: calc(75% - 20px);
        max-width: calc(75% - 20px);
    }
    .block-grid a {
        transition: color 0.2s ease-in-out;
    }
    .block-grid a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .block-grid a:hover .mod-figure:after {
        opacity: 0.5;
    }
    .block-grid-title {
        margin: 35px 0 0;
        padding: 0 10px;
        font-size: 2.4rem;
    }
    .block-grid-text {
        margin: 13px 0 0;
        padding: 0 10px;
        font-size: 1.6rem;
        line-height: 1.93;
    }
    .block-slide-shadow .slick-list {
        box-shadow: 0 0 10px 10px rgba(34, 23, 20, 0.13);
    }
    .block-slide .slick-slider {
        padding: 0 0 43px;
    }
    .block-slide .slick-dots li {
        margin: 0 8px;
    }
    .block-slide .slick-dots button {
        width: 12px;
        padding-top: 12px;
    }
    .block-home-hero {
        margin: 0;
        background-image: url(../img/home/bg_hero_01.png);
    }
    .block-home-hero-inner {
        padding-top: 41.67%;
    }
    .block-home-news {
        display: flex;
        width: 1240px;
        margin: 0 auto;
        padding: 50px 40px 66px;
    }
    .block-home-news-title {
        width: 154px;
        margin: 0;
        padding: 13px 0 0;
        font-size: 3.0rem;
    }
    .block-home-news .mod-news a {
        padding: 14px 10px 6px;
    }
    .block-home-news-link {
        margin: 22px 0 0;
        font-size: 1.6rem;
    }
    .block-home-news-link a {
        padding: 0 18px 0 10px;
    }
    .block-home-news-link a:after {
        width: 5px;
        height: 9px;
    }
    .block-home-service {
        margin: 0;
        padding: 42px 0 0;
    }
    .block-home-service:before {
        height: 71px;
    }
    .block-home-service-inner {
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .block-home-service-title {
        font-size: 3.2rem;
    }
    .block-home-service-title2 {
        margin: 34px 0 18px;
        font-size: 2.4rem;
    }
    .block-home-service .mod-grid {
        margin: 40px -20px 0;
    }
    .block-home-service .mod-grid-col {
        padding: 0 40px 42px;
    }
    .block-home-service-photo {
        margin: 0 -40px;
    }
    .block-home-service-text {
        font-size: 1.6rem;
        line-height: 1.7;
    }
    .block-home-slide {
        width: 1240px;
        margin: 89px auto 0;
        padding: 0 40px;
    }
    .block-home-products {
        margin: 76px 0 0;
    }
    .block-home-products .mod-top-heading {
        margin: 0 0 42px;
    }
    .block-home-products-lists {
        display: flex;
    }
    .block-home-products-list {
        flex: 1;
        padding: 40px 60px 46px;
    }
    .block-home-products-title {
        margin: 22px -15px 23px;
        font-size: 1.8rem;
        line-height: 1.55;
    }
    .block-home-products-icon {
        width: 108px;
    }
    .block-home-products-text {
        font-size: 1.6rem;
    }
    .block-home-products .mod-grid-col {
        padding: 0;
    }
    .block-home-products .mod-figure {
        width: 309px;
    }
    .block-home-products-text2 {
        font-size: 1.8rem;
        line-height: 1.94;
    }
    .block-home-products-links {
        margin: 16px 0 0;
    }
    .block-home-products-links li {
        padding: 0 18px 0 0;
    }
    .block-home-products-links li:nth-child(1) {
        font-size: 1.6rem;
    }
    .block-home-products-links li:nth-child(2) {
        margin: 0 0 0 26px;
        font-size: 1.6rem;
    }
    .block-home-products-links li:after {
        width: 5px;
        height: 9px;
    }
    .block-home-products-inner {
        display: flex;
        align-items: center;
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        padding: 71px 45px 71px 55px;
    }
    .block-home-products-inner2 {
        flex: 1;
        margin: 0 0 0 37px;
    }
    .block-home-contents {
        width: 1240px;
        margin: 92px auto 0;
        padding: 0 40px;
    }
    .block-home-recruit {
        width: 1240px;
        margin: 67px auto 0;
        padding: 0 40px;
    }
    .block-home-recruit-link {
        height: 203px;
        padding: 0 0 1px;
        background-size: 141px auto;
        font-size: 2.0rem;
        transition: opacity 0.2s ease-in-out;
    }
    .block-home-recruit-link:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .block-home-recruit-icon {
        height: 76px;
        margin: 0 0 22px;
    }
    .block-home-company {
        width: 1240px;
        margin: 76px auto 0;
        padding: 0 40px;
    }
    .block-home-company-link {
        font-size: 2.0rem;
        transition: opacity 0.2s ease-in-out;
    }
    .block-home-company-link:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .block-home-company-text {
        width: 120px;
        padding: 9px;
    }
    .block-home-emergency {
        margin: 0;
    }
    .block-home-emergency-inner {
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
    }
    .block-home-emergency .mod-news li a {
        padding: 20px 40px;
    }
    .block-home-emergency .mod-news li a:hover {
        opacity: 0.7;
    }
    .block-home-emergency .mod-news li a:hover .mod-news-category {
        border-color: #e60047;
    }
    .block-home-emergency .mod-news-text {
        flex: 1 0 auto;
    }
    .block-entry-news {
        padding: 84px 0 0;
    }
    .block-entry p {
        margin: 36px 0 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-entry ul {
        margin: 1em 0 0;
        font-size: 1.6rem;
    }
    .block-entry ul>li {
        margin: 7px 0 0;
    }
    .block-entry ol {
        margin: 1em 0 0;
        font-size: 1.6rem;
    }
    .block-entry ol>li {
        margin: 7px 0 0;
    }
    .block-entry .mod-link-list {
        margin: 14px 0 0;
    }
    .block-entry .mod-link-list>li {
        margin: 14px 0 0;
        padding: 0 0 0 12px;
    }
    .block-entry .mod-note-text {
        margin: 22px 0 0;
        padding: 0;
        font-size: 1.6rem;
    }
    .block-entry .mod-note-list {
        margin: 21px 0 0;
    }
    .block-entry .mod-note-list>li {
        margin: 14px 0 0;
    }
    .block-entry h2 {
        margin: 61px 0 36px;
        font-size: 2.4rem;
        text-align: center;
    }
    .block-entry h2+.mod-grid {
        margin-top: 46px;
    }
    .block-entry h2+.mod-tbl {
        margin-top: -14px;
    }
    .block-entry h3 {
        margin: 61px 0 36px;
        padding: 1px 0 1px 12px;
        border-left-width: 5px;
        font-size: 1.8rem;
    }
    .block-entry h3+.mod-grid {
        margin-top: 46px;
    }
    .block-entry .mod-heading1 {
        margin: 65px 0 36px;
        font-size: 3.2rem;
        text-align: center;
    }
    .block-entry .mod-heading1+.mod-grid {
        margin-top: 46px;
    }
    .block-entry .mod-heading1+.mod-btn-group {
        margin-top: -5px !important;
    }
    .block-entry .mod-heading2 {
        margin: 61px 0 36px;
        padding: 0;
        border-left: none;
        font-size: 2.4rem;
    }
    .block-entry .mod-heading2+.mod-grid {
        margin-top: 46px;
    }
    .block-search {
        margin: 78px 0 0;
    }
    .block-search-text {
        font-size: 1.6rem;
    }
    .block-search-lists {
        margin: 53px 0 0;
    }
    .block-search-lists dt {
        margin: 31px 0 0;
        font-size: 3.2rem;
    }
    .block-search-lists dd {
        margin: 13px 0 0;
        font-size: 1.4rem;
        line-height: 1.57;
    }
    .block-contact-index-link {
        height: 230px;
        background-size: 600px auto;
        font-size: 2.4rem;
        line-height: 1.62;
        transition: opacity 0.2s ease-in-out;
    }
    .block-contact-index-link:hover {
        opacity: 0.7;
        text-decoration: none;
    }
    .mod-p+.block-form {
        margin: 36px 0 0;
    }
    .mod-file+.block-form {
        margin: 59px 0 0;
    }
    .block-form-list {
        display: flex;
        padding: 18px 39px;
        border-bottom-width: 1px;
    }
    .block-form-list:first-child {
        border-top-width: 1px;
    }
    .block-form-list>dt {
        width: 260px;
        padding: 10px 15px 0 0;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .block-form-confirm .block-form-list>dt {
        padding: 10px 35px 10px 0;
    }
    .block-form-list>dt sup {
        font-size: 1.0rem;
    }
    .block-form-list>dd {
        flex: 1;
        margin: 0;
    }
    .block-form-confirm .block-form-list>dd {
        padding: 10px 0;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .block-form-address span,
    .block-form-tel span {
        width: 20px;
        margin: 0 10px;
        padding-top: 2px;
    }
    .block-form .mod-input {
        height: 40px;
        margin: 20px 0 0;
        padding: 0 14px;
        border-radius: 0;
        font-size: 1.6rem;
    }
    .block-form-address {
        width: 279px;
    }
    .block-form-address .mod-input {
        margin-top: 0;
    }
    .block-form-tel {
        width: 437px;
    }
    .block-form-tel .mod-input {
        margin-top: 0;
    }
    .block-form .mod-textarea {
        margin: 20px 0 0;
    }
    .block-form-text {
        margin: 19px 0 0;
        padding: 0 39px;
        font-size: 1.4rem;
    }
    .block-form-note {
        margin: 3px 0 0;
        font-size: 1.4rem;
        line-height: 2.25;
    }
    .block-userkai {
        margin: 29px 0 0;
    }
    .block-userkai>.mod-link-list {
        position: absolute;
        z-index: 1;
        top: -4px;
        left: 0;
    }
    .block-userkai-photo {
        position: relative;
        z-index: 0;
        width: 760px;
        margin: 0 auto;
    }
    .block-userkai .mod-grid {
        margin-top: 53px;
    }
    .block-userkai .mod-grid .mod-heading2 {
        margin-bottom: 11px;
    }
    .block-userkai .mod-grid-col:nth-child(n+4) {
        margin-top: 42px;
    }
    .block-userkai-tbl a {
        padding: 0 0 0 12px;
    }
    .block-userkai-tbl a:before {
        border-width: 5px 0 5px 6px;
    }
    .block-userkai-tbl thead th {
        padding: 17px 0;
        border-width: 1px;
        font-size: 1.8rem;
        text-align: left;
    }
    .block-userkai-tbl thead th:first-child {
        text-align: center;
    }
    .block-userkai-tbl thead th:nth-child(2) {
        padding-left: 10px;
    }
    .block-userkai-tbl tbody th,
    .block-userkai-tbl tbody td {
        padding: 7px;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .block-userkai-tbl tbody tr:first-child th,
    .block-userkai-tbl tbody tr:first-child td {
        padding-top: 15px;
    }
    .block-userkai-tbl tbody th {
        padding-left: 62px;
    }
    .block-userkai-tbl tbody td {
        padding-left: 10px;
    }
    .block-serial {
        border-top-width: 1px;
    }
    .block-serial-inner {
        width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        padding: 20px 70px;
    }
    .block-serial-inner>dl {
        padding: 19px 20px;
    }
    .block-serial a {
        padding: 19px 20px;
    }
    .block-serial a:hover dt {
        text-decoration: none;
    }
    .block-serial dt {
        font-size: 1.6rem;
    }
    .block-serial dd {
        margin: 10px 0 0;
        font-size: 1.6rem;
    }
    .block-kikanauda {
        display: flex;
        margin: 56px 0 0;
    }
    .block-kikanauda-photo {
        width: 360px;
        margin: 0 40px 0 0;
    }
    .block-kikanauda-text {
        flex: 1;
        margin: -7px 0 0;
    }
    .block-kikanauda-index {
        margin: 21px 0 0;
    }
    .block-kikanauda-index dt {
        margin: 14px 0 0;
        font-size: 1.6rem;
    }
    .block-kikanauda-index dd {
        margin: 2px 0 0;
        font-size: 1.8rem;
    }
    .block-magazine-heading-lead {
        display: flex;
        align-items: center;
        margin: 0 0 -51px;
    }
    .block-magazine-heading-vol {
        margin: 0 12px 0 0;
        padding: 5px 10px;
        font-size: 1.6rem;
    }
    .block-magazine-heading-text {
        font-size: 2.4rem;
    }
    .block-magazine-note {
        display: flex;
        margin: 59px 0 0;
        padding: 61px 60px;
    }
    .block-magazine-note-photo {
        width: 159px;
        margin: 0 60px 0 0;
    }
    .block-magazine-note .mod-figure {
        width: 248px;
        margin: 0 60px 0 0;
    }
    .block-magazine-note-text {
        flex: 1;
    }
    .block-magazine-note-title {
        margin-top: 35px;
        font-size: 1.6rem;
    }
    .block-magazine-note-title+* {
        margin-top: 7px;
    }
    .block-magazine-note .mod-p {
        margin-top: 10px;
        font-size: 1.6rem;
        line-height: 1.75;
    }
    .block-magazine-note .mod-p:first-child {
        margin-top: -7px;
    }
    .block-magazine-backnumber .mod-grid-col:nth-child(n+4) {
        margin-top: 42px;
    }
    .block-magazine-backnumber-vol {
        margin: 38px 0 0;
        padding: 0 16px;
        font-size: 1.6rem;
    }
    .block-magazine-backnumber-title {
        margin: 12px 0 0;
        padding: 0 16px;
        font-size: 2.4rem;
        line-height: 1.29;
    }
    .block-magazine-backnumber-text {
        margin: 10px 0 0;
        padding: 0 16px;
        font-size: 1.6rem;
        line-height: 1.75;
    }
    .block-product .mod-heading1 {
        margin: 65px 0 0;
    }
    .block-product-title-adjust {
        padding: 60px 0 54px;
    }
    .block-product-feature {
        padding: 0 180px;
    }
    .block-product-feature .mod-note-text {
        margin: 12px 0 0;
        font-size: 1.4rem;
        line-height: 2.29;
    }
    .block-product-application .mod-figure img {
        width: 640px;
    }
    .block-product-application .mod-note-list+.mod-note-list {
        margin: 48px 0 0;
    }
    .block-product-jirei>.mod-p {
        margin: 0;
        text-align: center;
    }
    .block-product-jirei .block-grid {
        margin-top: 50px;
    }
    .block-product-jirei .block-grid .mod-grid-col:nth-child(n+4) {
        margin-top: 30px;
    }
    .block-product-jirei .block-grid-title {
        margin: 10px 0 0;
        padding: 0;
        font-size: 1.8rem;
        line-height: 1.78;
    }
    .block-product-jirei .block-grid-text {
        margin: -4px 0 0;
        padding: 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-product-other .block-grid-title {
        margin: 6px 0 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-jirei-article-title {
        padding: 0 200px;
    }
    .block-jirei-article-title .mod-heading1 {
        margin: 32px 0 0;
    }
    .block-jirei-article-title .mod-p {
        margin: 2px 0 0;
        text-align: center;
    }
    .block-jirei-article-main {
        padding: 0 200px;
    }
    .block-jirei-article-main .mod-heading2 {
        margin: 60px 0 0;
    }
    .block-jirei-article-main .mod-p {
        margin: 12px 0 0;
        line-height: 2;
    }
    .block-jirei-article-main .mod-p+.mod-p {
        margin: 36px 0 0;
    }
    .block-jirei-article-main .mod-figure {
        margin: 20px 0 0;
    }
    .block-jirei-article-company {
        margin: 46px 0 0;
        padding: 20px;
    }
    .block-jirei-article-company .mod-grid-col:first-child .mod-note {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
    .block-jirei-article-company .mod-grid-col:first-child .mod-note dt {
        line-height: 1.38;
    }
    .block-jirei-article-company .mod-grid-col:nth-child(2) .mod-figure {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .block-jirei-article-other {
        padding: 0 200px;
    }
    .block-jirei-article-other .mod-heading1 {
        margin: 72px 0 0;
    }
    .block-jirei-article-other>.mod-p {
        margin: 0;
        text-align: center;
    }
    .block-jirei-article-other .block-grid {
        margin-top: 50px;
    }
    .block-jirei-article-other .block-grid .mod-grid-col:nth-child(n+3) {
        margin-top: 30px;
    }
    .block-jirei-article-other .block-grid-title {
        margin: 10px 0 0;
        padding: 0;
        font-size: 1.8rem;
        line-height: 1.78;
    }
    .block-jirei-article-other .block-grid-text {
        margin: -4px 0 0;
        padding: 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-trial .mod-grid3 .mod-grid-col:nth-child(n+4) {
        margin-top: 30px;
    }
    .block-trial-notes {
        margin-top: 40px;
    }
    .block-company .mod-grid1 {
        margin: 40px 0 0;
    }
    .block-company .mod-grid-col2 .mod-heading3 {
        margin: 40px 0 0;
    }
    .block-company .mod-grid-col2 .mod-heading3+.mod-p {
        margin: 10px 0 0;
    }
    .block-company-logo-01 {
        margin: 84px 0 0;
        padding: 0 0 44px;
    }
    .block-company-logo-01 img {
        width: 660px;
    }
    .block-company-logo-02 {
        margin: 163px 0 -10px;
    }
    .block-company-logo-02 img {
        width: 193px;
    }
    .block-outline .mod-heading1 {
        margin: 70px 0 22px;
    }
    .block-outline-tbl table {
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .block-outline-tbl table tr {
        border-width: 1px;
    }
    .block-outline-tbl table th {
        width: 276px;
        padding: 20px 36px;
    }
    .block-outline-tbl table td {
        padding: 20px 0;
    }
    .block-outline-tbl-grid2 {
        display: flex;
        flex-direction: row;
    }
    .block-outline-tbl-grid2-col {
        width: 326px;
        padding-right: 40px;
    }
    .block-outline .mod-heading2 {
        margin: 16px 0 0;
    }
    .block-outline-access-address {
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .block-history-period-heading {
        font-size: 3.2rem;
        line-height: 2.06;
    }
    .block-history-period-heading:first-of-type {
        margin-top: 73px;
    }
    .block-history-period {
        display: flex;
        margin: 0 0 0 41px;
        border-width: 4px;
    }
    .block-history-period dl {
        width: 555px;
        padding: 47px 0 45px 165px;
    }
    .block-history-period dl dt {
        margin: 47px 0 0;
        font-size: 2.4rem;
        line-height: 1.25;
    }
    .block-history-period dl dd {
        margin: 13px 0 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-history-period-products {
        flex-direction: column;
        justify-content: space-around;
        width: 560px;
        padding: 0 0 0 160px;
    }
    .block-history-period-products figure {
        width: 265px;
        margin: 0;
    }
    .block-history-period-products figure figcaption {
        margin: 12px 0 0;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-privacy-tbl {
        margin: 10px 0 0;
        font-size: 1.6rem;
    }
    .block-privacy-tbl table {
        width: 700px;
    }
    .block-privacy-tbl td {
        padding: 3px 5px;
        border-width: 1px;
    }
    .block-popup04 .mod-grid {
        margin-top: 20px;
    }
    .block-popup04 .mod-grid3 .mod-grid-col:nth-child(n+4) {
        margin-top: 14px;
    }
    .block-popup04-step-text {
        margin-top: 10px;
        padding: 0 0 0 40px;
        font-size: 1.6rem;
        line-height: 2.25;
    }
    .block-popup04-step-text:before {
        font-size: 2.4rem;
        line-height: 1.5;
    }
    .block-links .mod-link-list>li:nth-child(-n+4),
    .block-support-grade .mod-link-list>li:nth-child(-n+4) {
        margin-top: 0;
    }
    .block-jirei .mod-grid-col:nth-child(n+4) {
        margin-top: 42px;
    }
    .block-ondemand-index .block-grid-title {
        margin: 16px 0 0;
        padding: 0;
        font-size: 1.6rem;
    }
    .block-ondemand-index-title2 {
        position: relative;
        margin: 72px 0 0;
    }
    .block-ondemand-index-title2 .mod-btn-group {
        position: absolute;
        top: 50%;
        right: 0;
        margin: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .block-ondemand-index-title2 .mod-btn-white {
        width: 100px;
        margin: 0;
        padding: 7px;
        font-size: 1.4rem;
    }
    .block-ondemand-index-title3 {
        padding: 30px 38px;
        background-size: 282px auto;
        font-size: 2.4rem;
    }
    .block-ondemand-index-title3 span:nth-child(1) {
        width: 53px;
        margin: 0 19px 0 0;
    }
    .block-ondemand-index .mod-grid2 .mod-grid-col:nth-child(n+3) {
        margin-top: 40px;
    }
    .block-ondemand-index-list {
        font-size: 1.6rem;
    }
    .block-ondemand-index-list a {
        padding: 23px 90px 23px 40px;
        transition: color 0.2s ease-in-out;
    }
    .block-ondemand-index-list a:hover {
        opacity: 1;
        color: #0c56a6;
    }
    .block-ondemand-index-list a:hover:after {
        background-size: 0 0, contain;
    }
    .block-ondemand-index-list a:after {
        right: 40px;
        width: 27px;
        height: 27px;
    }
    .block-ondemand-index-list li {
        border-bottom-width: 1px;
    }
    .block-ondemand-index-list li:nth-child(1) a {
        display: flex;
        padding: 30px 90px 30px 40px;
    }
    .block-ondemand-index-list li:nth-child(1) span:nth-child(1) {
        width: 275px;
    }
    .block-ondemand-index-list li:nth-child(1) span:nth-child(2) {
        flex: 1;
        margin: 0 0 0 19px;
    }
    .block-ondemand-index-more {
        padding: 30px 40px;
        border-bottom: none;
        font-size: 1.6rem;
        transition: color 0.2s ease-in-out;
    }
    .block-ondemand-index-more:hover {
        opacity: 1;
        color: #0c56a6;
        text-decoration: none;
    }
    .block-ondemand-index-more:hover:after {
        background-size: 0 0, 100% auto;
    }
    .block-ondemand-index-more:after {
        width: 14px;
        height: 14px;
        margin: -4px 0 0 19px;
    }
    .block-ondemand-list .mod-toggle {
        margin: 27px 0 0;
    }
    .block-ondemand-detail {
        padding: 84px 0 0;
    }
    .block-ondemand-detail .mod-grid-col:nth-child(n+5) {
        margin-top: 25px;
    }
    .block-ondemand-detail .block-grid-title {
        margin: 16px 0 0;
        padding: 0;
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 767px) {
    .l-header-subnav li:nth-child(3) {
        display: flex !important;
    }
    .mod-header-nav a.is-self:after {
        right: 6.875vw;
        width: 1.875vw;
        height: 3.125vw;
        background: url(../img/common/ico_arrow_01.png) no-repeat 50% 50%;
        background-size: contain;
    }
    .mod-header-nav a.is-self:before {
        display: none;
    }
    .mod-header-nav a:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 6.25vw;
        width: 3.4375vw;
        height: 0.3125vw;
        background: #101010;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .mod-header-nav li.is-open a:before {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .mod-header-nav li.is-open ul {
        max-height: 1000px;
    }
    .is-sp-show {
        display: block !important;
    }
    .is-sp-hide {
        display: none !important;
    }
    .is-br-sp-show {
        display: inline-block !important;
    }
    .mod-mt-sp-none {
        margin-top: 0 !important;
    }
    .mod-tab-link {
        overflow-x: scroll;
        border-bottom: 0.3125vw solid #ccc;
        -webkit-overflow-scrolling: touch;
    }
    .mod-tab-link2 {
        border-bottom: 0.3125vw solid #ccc;
    }
    .mod-btn {
        width: 100%;
    }
    .mod-btn-white-liquid {
        width: auto;
    }
    .mod-tbl tr {
        display: block;
        padding: 6.5625vw 3.125vw 6.25vw;
        border-top: #ccc 0.3125vw solid;
    }
    .mod-tbl th,
    .mod-tbl td {
        display: block;
    }
    .mod-tbl td {
        margin: 2.1875vw 0 0;
    }
    .mod-tbl-stripes th:first-child {
        width: 28.90625vw;
    }
    .mod-tbl-stripes .mod-checkbox label {
        font-size: 3.4375vw;
    }
    .mod-tbl-soft {
        overflow-x: scroll;
        border: 0.3125vw solid #0068b7;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%;
        background-repeat: no-repeat;
        background-attachment: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .is-pc-hide+.mod-tbl-soft,
    .mod-tbl-soft+.is-pc-hide {
        margin-top: 2.65625vw;
    }
    .mod-tbl-soft table {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        min-width: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), white 15px) 0 0/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), white 15px) right/50px 100%;
        background-repeat: no-repeat;
        background-attachment: local;
    }
    .mod-grid-col {
        margin: 7.8125vw 0 0;
    }
    .mod-grid-col>img {
        max-width: 100vw;
        margin: 0 -4.6875vw;
    }
    .mod-grid1:first-child .mod-grid-col:first-child {
        margin-top: 0;
    }
    .mod-grid4 {
        margin: 0 -1.5625vw;
    }
    .mod-grid4.is-sp-grid1 .mod-grid-col {
        flex-basis: 100%;
        max-width: 100%;
    }
    .mod-grid4 .mod-grid-col {
        flex-basis: calc(50% - 3.125vw);
        max-width: calc(50% - 3.125vw);
        margin-right: 1.5625vw;
        margin-left: 1.5625vw;
    }
    .block-home-service .mod-grid-col {
        margin: 4.84375vw 0 0;
    }
    .block-home-recruit .mod-grid-col {
        margin-top: 4.6875vw;
    }
    .block-home-recruit .mod-grid-col:first-child {
        margin-top: 0;
    }
    .block-home-company .mod-grid-col {
        margin-top: 4.6875vw;
    }
    .block-home-company .mod-grid-col:first-child {
        margin-top: 0;
    }
    .block-contact-index .mod-grid-col {
        margin-top: 6.25vw;
    }
    .block-contact-index .mod-grid-col:first-child {
        margin-top: 0;
    }
    .block-product-title img {
        width: 100vw;
    }
    .block-product-feature .mod-p {
        margin: 3.125vw 0 0;
    }
    .block-product-jirei>.mod-p {
        margin: 2.5vw 0 0;
        font-size: 3.4375vw;
        line-height: 1.73;
    }
    .block-product-other .block-grid .mod-grid-col:not(:first-child) {
        margin-top: 5.625vw;
    }
    .block-jirei-article-title .mod-grid-col>img {
        width: 100vw;
    }
    .block-jirei-article-main .mod-heading2 {
        margin: 10.625vw 0 0;
        text-align: left;
    }
    .block-jirei-article-company .mod-grid-col:first-child {
        margin-top: 0;
    }
    .block-jirei-article-company .mod-grid-col:first-child .mod-note dt+dd {
        margin: 0.9375vw 0 0;
    }
    .block-jirei-article-company .mod-grid-col:nth-child(2) {
        margin-top: 2.1875vw;
    }
    .block-jirei-article-company .mod-grid-col:nth-child(2) .mod-figure img {
        width: 43.75vw;
    }
    .block-jirei-article-other>.mod-p {
        margin: 2.5vw 0 0;
        font-size: 3.4375vw;
        line-height: 1.73;
    }
    .block-trial .mod-grid-text {
        margin-top: 1.5625vw;
    }
    .block-rd-grid3 .mod-heading1 {
        margin: 0;
    }
    .block-rd-grid3 .mod-grid-col2 {
        margin-top: 5vw;
    }
    .block-company .mod-grid1 .mod-grid-col>img {
        width: 100vw;
    }
    .block-company .mod-grid-col2 {
        margin: 6.5625vw 0 0;
    }
    .block-company-logo {
        margin: 15.625vw 0 0;
    }
    .block-company-logo-01 {
        padding: 0 0 6.5625vw;
    }
    .block-company-logo-02 {
        padding: 0 0 0.625vw;
    }
    .block-privacy-tbl {
        overflow-x: scroll;
    }
    .block-popup04 .mod-grid-text {
        margin-top: 2.8125vw;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}