@charset "UTF-8";
/* ================================================================================
   《目次》

       1. プロジェクトのベース（basis/*.scss）
          - リセットCSS
          - フォント設定
          - 文字色

       2. 共通スタイル（common/*.scss）
          - レイアウト要素（配置場所が決まっているもの）
            .container              : コンテナとbody
            .site-header            : ヘッダ
            .site-footer            : フッタ
            .footer-lower           : フッタ（NRIフッタ）
            .footer-upper           : フッタ（asleadフッタ）
            .footer-external-links  : フッタ（関連サイト）
            .sp-menu                : スマホメニュー
            .sp-menu-btn            : スマホメニューボタン
            .gnav                   : グロナビ
            .gnav-submenu           : グロナビのサブメニュー
            .google-search          : Gooleサイト内検索
            .content                : コンテンツ領域
            .content-inner          : コンテンツ領域で幅を定義する要素
            .article-hero           : 大きな背景画像付きの記事タイトル領域
            .contact                : お問い合わせボックス（フッタ上の黒背景のもの）
            .pagetop                : ページトップボタン

          - パーツ（さまざまな場所に配置されうるもの）
            .btn                    : ボタン
            .btn-play               : サムネの上に再生ボタン
            .heading                : 記事共通要素 - 見出し
            .lead                   : 記事共通要素 - リード文
            .local-nav              : 記事共通要素 - ローカルナビ
            .chart                  : 記事共通要素 - 図や画像のボックス
            .columns                : 記事共通要素 - マルチカラムレイアウト
            .side-img               : 記事共通要素 - カラム
            .usecase                : 記事共通要素 - ユースケース
            .functions              : 記事共通要素 - 主な機能
            .features               : 記事共通要素 - 魅力
            .solution-title         : ソリューションタイトル
            .flow                   : フローチャートのようなリスト
            .product-list           : 製品リスト
            .product-list-mini      : 製品リスト（小）
            .case-list              : 導入事例のリスト
            .case-box               : 事例ボックス
            .link-box               : 汎用のリンクボックス
            .common-table           : 汎用のテーブル
            .price-table            : 価格表
            .plan-table             : プラン表
            .license-table          : ライセンス表
            .license-list           : ライセンスリスト
            .table-wrapper : 幅広の要素（テーブル等）が左右にはみ出すときのスクロールラッパー
            .gitlab-license         : GitLabのライセンス表（製品ページと代理店ページで使用）
            .contact-box            : 記事共通要素 - お問い合わせボックス（本文最後に配置されるもの）
            .quote                  : 記事共通要素 - 引用
            .partner-banner         : 代理店バナーエリア
            .extarnal-link          : 外部テキストリンク
            .related-link           : 関連リンク
            .icon-link              : アイコン付きテキストリンク
            .thumbnail              : サムネイル画像
            .delighter              : スクロールで表示する要素
            .sns-btn                : SNSシェアボタン
            .sp-scroll-wrapper      : スクロールラッパー
            a[data-lity]            : 画像拡大表示
            pre.prettyprint *       : コードハイライター

          - フォーム要素（パーツの中でもとくにフォーム関連のもの）
            form-input-text         : テキストフィールド
            form-input-with-text    : 固定テキストが付加されているテキストフィールド
            form-input-radio        : ラジオボタン
            form-input-checkbox     : チェックボックス
            form-input-file         : ファイル選択要素
            form-select             : select   要素
            form-textarea           : textarea 要素


       3. ページ固有スタイル（page/*.scss）
          - トップページ
            .top-visual             : ビジュアル
            .top-four-logo          : 4軸ロゴ(画像)
            .top-info               : ニュース、アクティビティ、Twitterのラッパー
            .top-news-list          : ニュース一覧
            .top-column-list        : コラム一覧
            .top-twitter-frame      : Twitterのフレーム
            .top-gallery-list       : ギャラリー一覧
            .top-about              : asleadについて
            .top-section            : セクション
            .top-section-title      : セクションタイトル
            .top-section-title-large: セクションタイトル（大）
            .top-solution-list      : ソリューションリスト
            .top-product-list       : サポート製品リスト
            .top-service-list       : サービスリスト
            .top-campaign           : キャンペーンバナー

          - ソリューション
            *                       : aslead Remoteページの各要素
            *                       : プライバシーガバナンス構築支援サービスページの各要素

          - 導入事例
            .case-company-profile   : 企業プロフィール

          - お問い合わせ、ホワイトペーパー
            *                       : お問い合わせページの各要素

       4. ユーティリティクラス（util/*.scss）
            ※util.scss にて定義

   --------------------------------------------------------------------------------
   《補足》スタイル定義の競合を防ぐために

     - 当目次に記載したクラス名以外のクラス名（便宜上「子クラス」と呼ぶ）は単独で定義しないようにしてください
     - 区別のため子クラス名の先頭には「アンダースコア(_)」を付加します
     - このシンプルなルールによりスタイル定義の競合をかんたんに回避可能です
     - 目次に記載したクラス名はSASSファイル名と対応しているためファイル名を見るだけでクラス名の重複を防げます
   ================================================================================ */
/* ================================================================================
   1. プロジェクトのベース
   ================================================================================ */
/* --------------------------------------------------------------------------------
   リセットCSS
     - マージン、パディング、ボーダーはすべて0
     - フォントサイズは 16px（1.6rem） に揃える
     - 見出し、em、strong、b、th は太字にする
     - テーブルはボーダーあり
     - など
   --------------------------------------------------------------------------------
   ＜補足＞
     - Meyresweb CSS Reset に一部 Normalize.css を足した感じ
     - Meyersweb CSS Reset : https://meyerweb.com/eric/tools/css/reset/
     - Normalize.css: https://necolas.github.io/normalize.css/
   -------------------------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  font-size: 62.5%; /* rootフォントサイズを10pxにする（16px * 62.55 = 10px） */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  font-feature-settings: "palt";
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, "Helvetica Neue", Verdana, sans-serif;
  font-size: 1.6em; /* 16px（body で rem ではなく em を使うのはChromeのバグ対策） */
  line-height: 2;
  -webkit-text-size-adjust: 100%; /* スマホを横向きにしたとき等に文字サイズを自動調整しない（CSSの指定どおり） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (max-width: 1600px) {
  body {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4em;
  }
}

img {
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
  -webkit-backface-visibility: hidden; /* Chromeで画像がぼやける現象を回避 */
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.8rem;
  font-weight: bold;
}

b,
em,
strong {
  font-style: normal;
  font-weight: bold;
}

small {
  font-size: 80%;
}

/* sub/sup が行間に影響を及ぼすのを防ぐ (normalize.css) */
sub,
sup {
  position: relative;
  margin-left: 0.3em;
  margin-right: 0.3em;
  font-size: 77%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

hr {
  display: block;
  height: 0.1rem;
  margin: 1em 0;
  border-top: 0.1rem solid #ccc;
}

pre,
code,
kbd,
samp,
tt {
  font-family: monospace;
  line-height: 1;
}

/* アンカー */
a {
  color: #03c;
  text-decoration: underline;
}

a:visited {
  color: #60a;
  text-decoration: underline;
}

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

a:focus {
  outline: none;
}

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

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0.5em 0.8em;
  border: 0.1rem solid #ddd;
}

th {
  font-weight: bold;
}

thead th {
  background-color: #e5e5e5;
}

tbody th {
  background-color: #f9f9f9;
}

/* フォーム */
label {
  cursor: pointer;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

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

/* Firefox で button 要素に CSS で消せない padding と border がつくのを消す (normalize.css) */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  border-radius: 0.3rem;
  border: 0.1rem solid #ddd;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  border-color: #aaa;
}

textarea {
  display: block;
  overflow: auto;
  vertical-align: top;
}

input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}

/* 画像リンクのホバー効果 */
a:hover img {
  opacity: 0.9;
}
a:hover img.noeffect img {
  opacity: inherit;
}

/* PCでは電話番号のリンク無効 */
@media screen and (min-width: 767px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/* 印刷用 */
@media print {
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 1.2cm;
  }
}
/* HTML5非対応ブラウザ向け */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

audio[controls],
canvas,
video {
  display: inline-block;
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap;
}
/* --------------------------------------------------------------------------------
   フォントファミリー
     - -apple-system: MacとiOS用フォント SanFrancisco。ヒラギノに近いが欧文はヒラギノより良い
     - BlinkMacSystemFont: ChromeでSanFrancisoを使いたいときの指定
   -------------------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, Arial, sans-serif;
}

body {
  font-size: 1.8em;
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 1.6em;
  }
}

/* Viewport: 1400px 以下のときはルートフォントサイズを .7vw として可変 */
/* その上でスタイル定義の絶対値の単位を px から rem に変更することで */
/* ウィンドウ幅に応じてコンテンツ全体を単純縮小できる */
@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7vw;
  }
}
@media only screen and (max-width: 767px) {
  html {
    font-size: 10px;
  }
}
/* --------------------------------------------------------------------------------
   文字色
   -------------------------------------------------------------------------------- */
body {
  color: #191919;
}

a:link {
  color: #005aa9;
}

a:visited {
  color: #005aa9;
}

a:hover {
  color: rgb(0, 35.6804733728, 67);
}

/* --------------------------------------------------------------------------------
   ユーティリティクラス - その他
     - クリアフィクス
     - display 制御
     - フロート
   -------------------------------------------------------------------------------- */
/* クリアフィクス */
.clearfix {
  *zoom: 1;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* display制御 */
.hide {
  display: none;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

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

@media screen and (max-width: 767px) {
  .sp-hide {
    display: none !important;
  }
  .sp-inline {
    display: inline !important;
  }
  .sp-block {
    display: block !important;
  }
  .sp-inline-block {
    display: inline-block !important;
  }
}
@media screen and (min-width: 767px) {
  .pc-hide {
    display: none !important;
  }
  .pc-inline {
    display: inline !important;
  }
  .pc-block {
    display: block !important;
  }
  .pc-inline-block {
    display: inline-block !important;
  }
}
/* フロート */
.float-left,
.float-l {
  float: left;
}

.float-right,
.float-r {
  float: right;
}

/* ================================================================================
   2. 共通スタイル
     - ヘッダ、フッタ、ナビなどのページ共通／画面共通の要素
     - 見出し、リスト、テーブル、ボタン、フォームなどの繰り返し使用するパーツ
     - SASSファイル名は当該要素のクラス名と一致している
       → ファイル名だけでクラス名の重複を防げる
   ================================================================================ */
/* --------------------------------------------------------------------------------
   コンテナとbody / body および .container
   -------------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
  background-color: #f2f2f2;
}

.container {
  z-index: 2;
  position: relative;
  max-width: 192rem;
  margin: 0 auto;
  padding-top: 10rem;
  background-color: #fff;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.05);
}
body.page-top .container {
  background: #fff url(/images/top/bg.png) no-repeat center 0rem;
  background-size: 300rem;
}

@media only screen and (max-width: 1600px) {
  .container {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .container {
    padding-top: 15vw;
  }
  body.page-top .container {
    background: #fff url(/images/top/bg.svg) no-repeat center -300px;
    background-attachment: fixed;
    background-size: 300rem;
  }
}
@media only screen and (max-width: 767px) {
  body.page-solution .container {
    padding-top: 0;
  }
}
/* --------------------------------------------------------------------------------
   ヘッダ / .site-header
   -------------------------------------------------------------------------------- */
.site-header {
  z-index: 1000;
  position: fixed;
  left: calc(50% - 96rem);
  top: 0;
  width: 192rem;
  margin: 0 auto;
  border-bottom: 0.1rem solid #e6e6e6;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  /* お問い合わせ */
}
.site-header ._inner {
  display: flex;
  align-items: center;
  width: 160rem;
  height: 10rem;
  margin: 0 auto;
  padding: 0 3rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._logo {
  margin-right: 4rem;
}
.site-header ._logo img {
  width: 10rem;
  height: 5rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._nri {
  position: absolute;
  right: 18rem;
  top: 3.8rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._nri img {
  height: 2.4rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._contact {
  position: absolute;
  right: 0;
  top: 0;
  width: 14rem;
  height: 100%;
  overflow: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._contact a {
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 14rem;
  height: 100%;
  padding-left: 3rem;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background: url(/images/common/contact-btn-bg.svg) no-repeat right center;
  background-size: auto 100%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.site-header ._contact a:hover {
  color: #5fb5f3;
  transform: scale(1.1);
}
.site-header ._contact a::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

@media only screen and (max-width: 1920px) {
  .site-header {
    left: 0;
    width: 100%;
  }
}
@media only screen and (max-width: 1024px) {
  .site-header ._contact a::before {
    font-size: 3.5rem !important;
  }
  .site-header ._contact a span {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .site-header {
    border-bottom: 1px solid #e6e6e6;
  }
  .site-header ._inner {
    width: 100%;
    height: 15vw;
    padding: 0 4vw;
  }
  .site-header ._logo img {
    display: block;
    width: 20vw;
    height: auto;
  }
  .site-header ._nri {
    right: 20vw;
    top: 5vw;
  }
  .site-header ._nri img {
    height: 4.5vw;
  }
  .site-header ._contact {
    display: none;
  }
}
/* --------------------------------------------------------------------------------
   フッタ / .site-footer
   -------------------------------------------------------------------------------- */
.site-footer {
  z-index: 0;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .site-footer {
    margin-top: 0;
  }
}
/* --------------------------------------------------------------------------------
   フッタ（NRIメニュー） / .footer-lower
   -------------------------------------------------------------------------------- */
.footer-lower {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 50px;
  padding: 5rem 0;
  border-top: 0.1rem solid #e2e2e2;
  background-color: #fff;
}
.footer-lower h2 {
  margin-right: 15rem;
}
.footer-lower h2 img {
  width: 10rem;
}
.footer-lower ._links li {
  display: inline-block;
  margin-right: 3rem;
}
.footer-lower ._links a {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2;
  text-decoration: none;
  color: #191919;
}
.footer-lower ._links a:hover {
  color: #005aa9;
}
.footer-lower ._copyright {
  color: #808080;
}

@media only screen and (max-width: 1600px) {
  .footer-lower ._links a {
    font-size: 1.125vw;
  }
}
@media only screen and (max-width: 767px) {
  .footer-lower {
    flex-direction: column;
    margin-top: 0;
    padding: 10vw 5vw 20vw;
    border-top: 0;
  }
  .footer-lower h2 {
    margin-right: 0;
  }
  .footer-lower h2 img {
    width: 25vw;
  }
  .footer-lower ._links {
    margin-top: 10vw;
    text-align: center;
  }
  .footer-lower ._links ul {
    display: inline-block;
  }
  .footer-lower ._links li {
    display: inline-block;
    margin: 0 2vw;
  }
  .footer-lower ._links a {
    font-size: 3vw;
    font-weight: normal;
  }
  .footer-lower ._copyright {
    margin-top: 5vw;
    font-size: 2.5vw;
    color: #808080;
  }
}
/* --------------------------------------------------------------------------------
   フッタ（asleadメニュー） / .footer-upper
   -------------------------------------------------------------------------------- */
.footer-upper {
  display: flex;
  justify-content: center;
  width: 160rem;
  margin: 0 auto;
}
.footer-upper ._links {
  display: inline-block;
  margin-right: 3rem;
}
.footer-upper h2 {
  margin-right: 15rem;
}
.footer-upper h2 img {
  width: 10rem;
}
.footer-upper ._text {
  color: #6EB4AE;
}
.footer-upper ._category h3 {
  padding: 0 3rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 6rem;
  border-top: 0.1rem solid #ccc;
  border-bottom: 0.1rem solid #ccc;
}
.footer-upper ._category ._wrapper {
  padding: 3rem;
  display: flex;
}
.footer-upper ._category ul {
  width: 50%;
}
.footer-upper ._category ul li {
  font-size: 1.6rem;
  line-height: 1.5;
}
.footer-upper ._category ul li a {
  display: flex;
  align-items: center;
  padding: 0.5em 0;
  color: #191919;
  text-decoration: none;
}
.footer-upper ._category ul li a::before {
  content: "\f0da";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
  padding-right: 1rem;
}
.footer-upper ._category ul li a:hover {
  color: #005aa9;
}
.footer-upper ._category ul ._sub {
  width: 100%;
  margin-left: 2rem;
}
.footer-upper ._category ul ._sub li a::before {
  content: "―";
}
.footer-upper ._category ul ._sub li a._indent {
  padding-left: 2rem;
}
.footer-upper ._twitter {
  width: 60rem;
  height: 120rem;
  overflow-y: auto;
  border-radius: 0.4rem;
  border: 0.1rem solid #e2e2e2;
  background-color: #f2f2f2;
}
.footer-upper ._twitter a.twitter-timeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #aaa;
}
.footer-upper ._twitter a.twitter-timeline i.fab {
  margin-bottom: 1.5rem;
  font-size: 7.2rem;
  color: #eee;
}

@media only screen and (max-width: 1600px) {
  /*
   * 画面幅 1600px 未満では画面幅に応じたサイズとする。
   * 本来は html 要素のルートフォントサイズを画面幅に応じたサイズ設定として
   * rem のみを使用すれば済むところだが
   * 旧コンテンツではルートフォントサイズ固定の上で rem を各所で使っているため
   * .old-wrapper 範囲外のヘッダやフッタなどは個別に
   * サイズを変更する必要がある。
   */
  .footer-upper {
    width: 100%;
  }
  .footer-upper ._links {
    width: 50vw;
    margin-right: 6.25vw;
  }
  .footer-upper h2 {
    margin: 2.1875vw 0 3.125vw;
  }
  .footer-upper h2 img {
    height: 3.75vw;
  }
  .footer-upper ._category h3 {
    padding: 0 1.875vw;
    font-size: 1vw;
    line-height: 3.75vw;
  }
  .footer-upper ._category ._wrapper {
    padding: 1.875vw;
  }
  .footer-upper ._category ul li {
    font-size: 1vw;
  }
  .footer-upper ._category ul li a::before {
    padding-right: 0.625vw;
  }
  .footer-upper ._twitter {
    width: 37.5vw;
    height: 75vw;
  }
}
@media only screen and (max-width: 767px) {
  .footer-upper {
    flex-direction: column;
    width: 100%;
  }
  .footer-upper ._links {
    width: 100%;
    margin-right: 0;
  }
  .footer-upper h2 {
    margin: 5vw 0;
  }
  .footer-upper h2 img {
    height: 12vw;
  }
  .footer-upper ._category {
    /* サービス規約の上と右の線を見せないようにする */
    margin-top: -1px;
    border-bottom: 1px solid #ccc;
  }
  .footer-upper ._category h3 {
    display: none;
  }
  .footer-upper ._category ._wrapper {
    display: block;
    padding: 0;
  }
  .footer-upper ._category ul {
    width: 100%;
  }
  .footer-upper ._category ul li {
    font-size: 3.5vw;
  }
  .footer-upper ._category ul li a {
    text-align: left;
    padding: 0.5em 3.5vw;
    border-top: 1px solid #ccc;
  }
  .footer-upper ._category ul li ._sub {
    margin-left: 0;
    padding-bottom: 4vw;
  }
  .footer-upper ._category ul li ._sub a {
    padding-left: 10vw;
    border-top: 0;
  }
  .footer-upper ._category ul li ._sub li a::before {
    margin-right: 3vw;
  }
  .footer-upper ._category ul li ._sub li a._indent {
    padding-left: 15vw;
  }
  .footer-upper ._twitter {
    width: 90vw;
    height: 100vw;
    margin: 5vw;
    border-radius: 0.4rem;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
  }
}
/* Custom styles for footer elements */
.footer-upper h2 img {
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
}

/* Reduce the height of footer-upper section */
.footer-upper {
  padding: 1rem 20px !important;
}

.footer-upper ._links .link-group {
  margin: 0 !important;
}

.footer-upper ._links .link-group ul {
  margin-bottom: 5px !important;
  line-height: 1.2 !important;
}

.footer-upper ._links li {
  margin-bottom: 0 !important;
}

.footer-upper ._links a {
  line-height: 1.4 !important;
  color: #191919 !important;
  transition: color 0.2s ease !important;
}

.footer-upper ._links a:hover {
  color: #005aa9 !important; /* NRIのサイトリンクと同じカラー */
}

/* Styles for links in both footer sections */
.footer-upper ._links .link-group,
.footer-lower ._links .link-group {
  display: flex;
  flex-direction: column;
}

.footer-upper ._links .link-group ul,
.footer-lower ._links .link-group ul {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
}

.footer-upper ._links li,
.footer-lower ._links li {
  display: inline-block;
  margin-right: 3rem;
}

.footer-upper ._links a,
.footer-lower ._links a {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2;
  text-decoration: none;
  color: #191919;
}

/* Specific layout adjustments for footer-lower */
.footer-lower {
  display: flex !important;
  align-items: flex-start !important;
}

.footer-lower h2 {
  margin-right: 15rem !important;
  align-self: center !important;
}

.footer-lower ._links .link-group {
  margin-top: 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .footer-upper h2 img {
    max-width: 200px !important;
  }
  .footer-lower {
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-lower h2 {
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
  .footer-upper ._links .link-group ul,
  .footer-lower ._links .link-group ul {
    text-align: center;
  }
}
/* Custom footer styles */
/* --------------------------------------------------------------------------------
   フッタ（関連サイト） / .footer-external-links
   -------------------------------------------------------------------------------- */
.footer-external-links {
  max-width: 192rem;
  margin: 50px 0px 0px;
  padding: 5rem 0 7rem;
  color: #000;
  text-align: center;
  background-color: #e5e5e5;
}
.footer-external-links h2 {
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.2em;
}
.footer-external-links p {
  margin: 3rem 0 4rem;
  font-size: 1.6rem;
  line-height: 1.5;
}
.footer-external-links ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-external-links ul li {
  margin: 0 1.5rem;
}
.footer-external-links ul a._item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  height: 12rem;
  padding: 4rem 0;
  border: 1px solid #eee;
  border-radius: 0.4rem;
  background-color: #fff;
}
.footer-external-links ul a._item:hover {
  opacity: 0.8;
}
.footer-external-links ul a._item img {
  max-width: 80%;
}

@media only screen and (max-width: 767px) {
  .footer-external-links {
    max-width: 100%;
    margin-bottom: 16px;
    padding: 10vw 5vw;
  }
  .footer-external-links h2 {
    font-size: 4vw;
  }
  .footer-external-links p {
    margin: 4vw 0;
    font-size: 3vw;
  }
  .footer-external-links ul {
    flex-wrap: wrap;
  }
  .footer-external-links ul li {
    width: 48%;
    margin: 1%;
  }
  .footer-external-links ul a._item {
    width: 100%;
    height: 20vw;
  }
  .footer-external-links ul a._item img {
    width: auto;
    max-height: 10vw;
  }
}
/* --------------------------------------------------------------------------------
   スマホメニュー / .sp-menu
      - .sp-menu は .gnav をクローンしている
      - .gnav, gnav-submenu のスマホ用スタイルはそれぞれの定義を参照
      - ここでは .gnav 以外の問い合わせボタン、閉じるボタンのみのスタイルを定義する
   -------------------------------------------------------------------------------- */
.sp-menu {
  display: none;
  z-index: 10;
  position: fixed;
  left: 0;
  top: 15vw;
  width: 100%;
  height: calc(100% - 15vw);
  padding-bottom: 30vw;
  overflow: auto;
  background-color: #fff;
}
.sp-menu a._contact {
  display: block;
  padding: 3vw 5vw;
  font-size: 4vw;
  font-weight: bold;
  text-decoration: none;
  color: #191919;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  background-color: #fff;
}

/* --------------------------------------------------------------------------------
   スマホメニューボタン / .sp-menu-btn
   -------------------------------------------------------------------------------- */
.sp-menu-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 15vw;
  height: 15vw;
  padding: 0;
  outline: 0;
  border: 1px solid #191919;
  border-radius: 0;
  background-color: #191919;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.sp-menu-btn span {
  position: absolute;
  left: 3.5vw;
  width: 8vw;
  height: 2px;
  background-color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.sp-menu-btn span:nth-of-type(1) {
  top: 4.9vw;
}
.sp-menu-btn span:nth-of-type(2), .sp-menu-btn span:nth-of-type(3) {
  top: 7.4vw;
}
.sp-menu-btn span:nth-of-type(4) {
  top: 9.9vw;
}
.sp-menu-btn._active {
  height: 15vw;
  background-color: #191919;
}
.sp-menu-btn._active span {
  position: absolute;
  width: 8vw;
  background-color: #fff;
}
.sp-menu-btn._active span:nth-of-type(1), .sp-menu-btn._active span:nth-of-type(4) {
  opacity: 0;
}
.sp-menu-btn._active span:nth-of-type(2) {
  transform: rotate(45deg);
}
.sp-menu-btn._active span:nth-of-type(3) {
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------------
   グロナビ / .gnav
   -------------------------------------------------------------------------------- */
.gnav > ul {
  display: flex;
}
.gnav > ul > li {
  position: relative;
}
.gnav > ul > li._has-submenu > a::after {
  content: "\f078";
  margin-left: 0.5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.gnav > ul > li > a {
  display: flex;
  align-items: center;
  height: 10rem;
  padding: 1.2em;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #191919;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.gnav > ul > li > a:hover {
  text-decoration: none;
  color: #005aa9;
}
.gnav > ul > li._has-submenu._hover > a, .gnav > ul > li._has-submenu._hover > a::after {
  color: #005aa9;
}

@media only screen and (max-width: 1600px) {
  .gnav > ul > li > a {
    padding: 1em;
    font-size: 1.125vw;
    letter-spacing: 0;
  }
}
/* IE11でNRIロゴに重ならないように少し詰める */
@media all and (-ms-high-contrast: none) {
  .gnav > ul > li > a {
    padding: 1.2em 1em;
  }
}
@media only screen and (max-width: 767px) {
  .gnav {
    display: none;
  }
  .gnav._sp {
    display: block;
    background-color: #fff;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  .gnav._sp > ul {
    display: block;
  }
  .gnav._sp > ul > li._has-submenu > a::after {
    display: none;
  }
  .gnav._sp > ul > li > a {
    height: auto;
    padding: 3vw 5vw;
    font-size: 4vw;
    border-top: 1px solid #e2e2e2;
  }
}
/* --------------------------------------------------------------------------------
   グロナビのサブメニュー / .gnav-submenu
   -------------------------------------------------------------------------------- */
.gnav-submenu {
  z-index: 10;
  display: none;
  position: fixed;
  left: 0;
  top: 10.1rem;
  width: 48rem;
  right: 100rem;
  max-height: calc(100% - 12rem);
  overflow: auto;
  background-color: #fff;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
}
.gnav ._has-submenu._hover .gnav-submenu {
  display: block;
}
.gnav-submenu a#form_header {
  width: fit-content !important;
  word-wrap: break-word;
  background: none !important;
  float: left !important;
}
.gnav-submenu a#form_header::before {
  content: "\f0da";
  left: 2rem;
  top: 0;
  bottom: 0;
  height: 1.6rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.gnav-submenu a#linka_header {
  width: fit-content !important;
  word-wrap: break-word;
  background: none !important;
  float: left !important;
}
.gnav-submenu a#linka_header::before {
  content: "\f0da";
  left: 2rem;
  top: 0;
  bottom: 0;
  height: 1.6rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.gnav-submenu a {
  position: relative;
  display: block !important;
  padding: 2rem 2rem 2rem 4rem !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  color: #191919 !important;
  border-bottom: 0.1rem solid #e2e2e2 !important;
  -webkit-transition: all 0.2s linear !important;
  transition: all 0.2s linear !important;
}
.gnav-submenu a::before {
  content: "\f0da";
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  height: 1.6rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.gnav-submenu a ._tagline {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  color: #808080;
}
.gnav-submenu a ._name {
  display: block;
  font-family: Lato;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
}
.gnav-submenu a ._name._green {
  color: #378C69;
}
.gnav-submenu a ._name._orange {
  color: #E75F37;
}
.gnav-submenu a:hover {
  text-decoration: none;
  color: #005aa9;
  background-color: #f9f9f9;
}
.gnav-submenu a:hover ._tagline {
  color: #005aa9;
}
.gnav-submenu a:hover ._name._green, .gnav-submenu a:hover ._name._orange {
  color: #005aa9;
}
.gnav-submenu a._parent {
  border-bottom: 0;
}
.gnav-submenu a._child {
  margin-left: 4rem;
  padding-left: 3rem;
  border-top: 0.1rem solid #ddd;
}
.gnav-submenu a._child::before {
  left: 1rem;
}
@media only screen and (max-width: 767px) {
  .gnav-submenu {
    display: block;
    position: static;
    width: 100%;
    max-height: none;
    padding-left: 10vw;
    box-shadow: none;
  }
  .gnav-submenu a {
    padding: 3vw;
    font-size: 4vw;
    font-weight: normal;
    line-height: 2;
    border-top: 1px solid #e2e2e2;
    border-bottom: 0;
  }
  .gnav-submenu a._child {
    padding-left: 0;
  }
  .gnav-submenu a::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------------
   グロナビのサブメニュー / .maxwidth-submenu
   -------------------------------------------------------------------------------- */
.maxwidth-submenu {
  z-index: 10;
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  top: 8.5rem;
  max-height: calc(100% - 12rem);
  overflow: auto;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  width: 100%;
  background-color: #fafafa;
  padding: 4.8rem 3.8rem;
  max-width: 1600px;
}
.gnav ._has-submenu._hover .maxwidth-submenu {
  display: flex;
}
.maxwidth-submenu > ul {
  width: 25%;
  height: auto;
  border-left: 1.5px solid #DDDDDD;
  padding: 0 2.4rem;
}
.maxwidth-submenu > ul > li {
  margin-bottom: 0.8rem;
  min-width: 18.8rem;
}
.maxwidth-submenu > ul > li > img {
  margin-bottom: 1.6rem;
}
.maxwidth-submenu ul:last-of-type {
  border-right: 1.5px solid #DDDDDD;
}
.maxwidth-submenu a {
  position: relative;
  display: block;
  padding: 0.8rem 1.6rem 0.8rem 2.4rem;
  text-decoration: none;
  color: #191919;
}
.maxwidth-submenu a::before {
  content: "\f078";
  position: absolute;
  left: 0rem;
  top: 1.2rem;
  font-size: 1rem;
  margin: auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 2;
  color: #474747;
  transform: rotate(270deg);
}
.maxwidth-submenu a ._tagline {
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  color: #474747;
  margin-bottom: 8px;
}
.maxwidth-submenu a ._name {
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-style: normal;
  font-weight: 700;
  color: #191919;
}
.maxwidth-submenu a:hover {
  text-decoration: none;
  color: #005aa9;
  background-color: #F1F1F1;
}
.maxwidth-submenu a:hover ._tagline, .maxwidth-submenu a:hover ._name, .maxwidth-submenu a:hover::before {
  color: #005aa9;
}
.maxwidth-submenu a._parent {
  border-bottom: 0;
}
.maxwidth-submenu a._child {
  margin-left: 4rem;
  padding-left: 3rem;
  border-top: 0.1rem solid #ddd;
}
.maxwidth-submenu a._child::before {
  left: 1rem;
}
@media only screen and (max-width: 767px) {
  .maxwidth-submenu {
    display: block;
    position: static;
    width: 100%;
    max-height: none;
    padding: 0;
    box-shadow: none;
    display: block;
  }
  .gnav ._has-submenu._hover .maxwidth-submenu {
    display: block;
  }
  .maxwidth-submenu > ul {
    width: 100%;
    border: none;
    padding-top: 2.4rem;
  }
  .maxwidth-submenu ul:last-of-type {
    padding-bottom: 2.4rem;
  }
  .maxwidth-submenu a {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------------
   グーグルサイト内検索 / .google-search
   -------------------------------------------------------------------------------- */
/* 検索窓 */
.google-search ._btn button {
  width: 6rem;
  height: 10rem;
  padding: 0;
  outline: none;
  border: 0;
  font-size: 2.8rem;
  background: none;
}
.google-search ._btn button:hover {
  color: #005aa9;
}
.google-search ._btn ._close-btn {
  display: none;
}
.google-search #___gcse_0 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
.google-search._open {
  /* 検索フィールド */
  /* NOTE: Google標準のスタイルを上書き：構造をわかりやすくするためあえて入れ子を深くして記述） */
}
.google-search._open ._search-btn {
  display: none;
}
.google-search._open ._close-btn {
  display: block;
}
.google-search._open #___gcse_0 {
  display: flex;
  justify-content: center;
  width: 100%;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only {
  padding: 0;
  border: 0;
  background-color: transparent;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-search-box,
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-search-box-tools {
  margin: 0;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-search-button,
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-clear-button {
  display: none;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input {
  padding: 0;
  border: 0;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input .gsc-input-box {
  border: 0;
  background-color: transparent;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input .gsc-input-box #gs_tti50 {
  border: 0;
  padding: 0;
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input .gsc-input-box #gs_tti50 input.gsc-input {
  width: 100rem !important;
  max-width: 100% !important;
  height: 7rem !important;
  padding: 0 0.8em !important;
  font-size: 2.4rem !important;
  border: 0.1rem solid #ccc !important;
  background: none !important;
  background-color: #fff !important;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
}
.google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input .gsc-input-box .gsib_b {
  display: none;
}
@media only screen and (max-width: 767px) {
  .google-search {
    margin-left: auto;
    margin-right: 28vw;
  }
  .google-search ._btn button {
    width: 12vw;
    height: 15vw;
    font-size: 5vw;
  }
  .google-search._open {
    /* 検索フィールド */
    /* NOTE: Google標準のスタイルを上書き：構造をわかりやすくするためあえて入れ子を深くして記述） */
  }
  .google-search._open #___gcse_0 .gsc-control-searchbox-only {
    flex-grow: 1;
  }
  .google-search._open #___gcse_0 .gsc-control-searchbox-only .gsc-input .gsc-input-box #gs_tti50 input.gsc-input {
    width: 100% !important;
  }
}

/* 検索結果のラッパー */
.gsc-control-cse {
  padding: 2rem 0 !important;
}
@media only screen and (max-width: 767px) {
  .gsc-control-cse {
    padding: 0 !important;
  }
}

/* 検索結果 */
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible {
  /* 広告欄 */
  /* ヒット件数 */
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-adBlock {
  padding: 2rem;
  border: 0.1rem solid #ddd;
  border-radius: 1rem;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result {
  padding: 2rem 0;
  border-bottom: 0.1rem solid #aaa;
  /* ページタイトル */
  /* 概要テキスト */
  /* パンくず */
  /* サムネ */
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-spelling,
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-result .gs-title,
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-result .gs-title * {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-snippet {
  font-size: 2rem;
  line-height: 1.5;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
  color: #777;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gsc-table-cell-thumbnail.gsc-thumbnail {
  display: none;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area {
  padding: 0;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area td {
  padding: 0;
  border: 0;
  /* プルダウンの位置調整 */
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area td .gsc-result-info {
  font-size: 2rem;
  color: #444;
}
.gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area td .gsc-orderby .gsc-option-menu-container.gsc-inline-block {
  vertical-align: 0.3rem;
}
@media only screen and (max-width: 767px) {
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible {
    padding-top: 2rem;
    /* 広告欄 */
    /* ヒット件数 */
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-adBlock {
    padding: 1rem;
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result {
    /* ページタイトル */
    /* 概要テキスト */
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-spelling,
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-result .gs-title,
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-result .gs-title * {
    font-size: 1.6rem;
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-webResult.gsc-result .gs-snippet {
    font-size: 1.4rem;
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area {
    padding-top: 2rem;
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible .gsc-above-wrapper-area td .gsc-result-info {
    font-size: 1.4rem;
  }
  .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible img {
    width: auto !important;
  }
}

/* サジェストリスト */
.gstl_50.gssb_c {
  position: fixed !important;
}
.gstl_50.gssb_c .gssb_e {
  box-shadow: none;
}
.gstl_50.gssb_c .gsc-completion-container {
  border-radius: 1rem;
  border: 0.1rem solid #aaa !important;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}
.gstl_50.gssb_c .gsc-completion-container > table {
  font-size: 2rem !important;
}
.gstl_50.gssb_c .gsc-completion-container td.gssb_a {
  border: 0 !important;
  border-bottom: 0.1rem solid #ccc !important;
  padding: 1.5rem 1rem !important;
}

/* --------------------------------------------------------------------------------
   コンテンツ領域 / .content
   -------------------------------------------------------------------------------- */
.content {
  display: block;
  position: relative;
  padding-bottom: 5rem;
}
@media only screen and (max-width: 767px) {
  .content {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

body:not(.page-top) main.content {
  padding-top: 5rem;
  padding-bottom: 15rem;
  line-height: 2;
}
body:not(.page-top) main.content > ._bg-gray {
  padding-top: 5rem;
  padding-bottom: 15rem;
  background-color: #f5f5f5;
}
body:not(.page-top) main.content p {
  margin-bottom: 2em;
}
body:not(.page-top) main.content p:last-child {
  margin-bottom: 0;
}
body:not(.page-top) main.content em {
  font-weight: bold;
}
body:not(.page-top) main.content strong {
  font-weight: bold;
  color: #E75F37;
}
body:not(.page-top) main.content small {
  font-size: 0.8em;
}
body:not(.page-top, .page-solution, .page-products-index, .column_article) main.content img {
  vertical-align: top;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  body:not(.page-top) main.content {
    padding: 0 0 5rem;
  }
  body.page-products-index main.content {
    padding: 5rem 0;
  }
}

/* --------------------------------------------------------------------------------
   コンテンツ領域 / .content-inner
   -------------------------------------------------------------------------------- */
.content-inner {
  width: 1080px !important;
  margin: 0 auto !important;
  text-align: justify !important;
}
@media screen and (max-width: 1080px) {
  .content-inner {
    width: 100% !important;
    padding: 0 20px !important;
  }
}
@media only screen and (max-width: 767px) {
  .content-inner {
    width: 100% !important;
    padding: 0 20px !important;
  }
}

/* --------------------------------------------------------------------------------
   大きな背景画像付きの記事タイトル領域 / .article-hero
   -------------------------------------------------------------------------------- */
.article-hero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 2rem 0 !important;
  max-width: 1400px !important;
  min-height: 25rem !important;
  margin: 0 auto 10rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
.article-hero h1 {
  font-size: 3.6rem !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  color: #fff !important;
  text-shadow: 0 0.3rem 0.5rem black !important;
}
.article-hero ._date {
  margin: 2rem 0 0 !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  letter-spacing: 0.2em !important;
  color: #fff !important;
}
.article-hero .btn {
  margin-top: 2rem !important;
  height: 6.4rem !important;
  line-height: 6.4rem !important;
  color: #fff !important;
  background-color: #000 !important;
}
@media only screen and (max-width: 767px) {
  .article-hero {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 4rem 2rem 3rem !important;
    margin: 0 !important;
  }
  .article-hero h1 {
    font-size: 2.4rem !important;
  }
  .article-hero h1 br {
    display: none !important;
  }
  .article-hero h1 small br {
    display: block !important;
  }
  .article-hero .btn {
    margin-top: 2rem !important;
  }
}

/* --------------------------------------------------------------------------------
   お問い合わせボックス（フッタ上の黒背景のもの） / .contact
   -------------------------------------------------------------------------------- */
.contact {
  visibility: hidden;
  z-index: 1;
  position: static; /* デフォルトでは static としておき js で fixed 切替 */
  left: calc(50% - 96rem);
  bottom: 0;
  width: 192rem;
  margin: 0 auto;
  padding: 8rem 0;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #191919 url(/images/common/contact-bg.svg) no-repeat 80rem -70rem;
  background-size: 70%;
}
.contact h2 {
  font-size: 4.2rem;
  line-height: 1;
  margin-bottom: 8rem;
}
.contact p {
  font-size: 4.2rem;
  line-height: 1;
  margin-bottom: 8rem;
}
.contact ._lead {
  font-size: 2.4rem;
  line-height: 1.333;
  margin-bottom: 4rem;
}
.contact ul {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}
.contact ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30rem;
  margin: 0 1rem;
  padding: 1.5rem;
  line-height: 1.3;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.4rem;
  background-color: #191919;
}
.contact > small {
  display: block;
  margin-top: 5rem;
  font-size: 1.8rem;
  line-height: 1.333;
}

@media only screen and (max-width: 1920px) {
  .contact {
    left: 0;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .contact {
    padding: 12.5vw 5vw;
    background-position: center;
    background-size: 70%;
  }
  .contact p {
    font-size: 5vw;
    margin-bottom: 10vw;
  }
  .contact h2 {
    font-size: 5vw;
    margin-bottom: 10vw;
  }
  .contact ._lead {
    font-size: 3.5vw;
    margin-bottom: 6vw;
  }
  .contact ul {
    justify-content: space-between;
    margin-bottom: 6vw;
  }
  .contact ul li {
    width: 24.5%;
    margin: 0;
    padding: 3vw 2vw;
    font-size: 10px;
    line-height: 1.7;
    border-radius: 1vw;
  }
  .contact ul li br {
    display: none;
  }
  .contact > small {
    margin-top: 6vw;
    font-size: 3vw;
  }
}
/* --------------------------------------------------------------------------------
   ページトップボタン / .pagetop
   -------------------------------------------------------------------------------- */
.pagetop {
  z-index: 5;
  position: fixed;
  right: 0;
  bottom: -10rem;
  width: 10rem;
  height: 10rem;
  padding-top: 10rem;
  overflow: hidden;
  outline: 0;
  border: 0;
  background: none;
  background-color: #b3b3b3;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.pagetop._active {
  bottom: 0;
}
.pagetop::after {
  content: "\f077";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: "Font Awesome 5 Free";
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 10rem;
  color: #fff;
}
.pagetop:hover {
  background-color: #191919;
}

@media only screen and (max-width: 767px) {
  .pagetop {
    bottom: -15vw;
    width: 15vw;
    height: 15vw;
    padding-top: 15vw;
  }
  .pagetop::after {
    font-size: 7.5vw;
    line-height: 15vw;
  }
}
/* --------------------------------------------------------------------------------
   ボタン / .btn
     - 以下の４バリエーションを用意しています
         1. 通常のボタン → a.btn
         2. 大きなボタン → a.btn._large
         3. 四角いボタン → a.btn._square
         4. 大きくて四角いボタン → a.btn._large._square
   -------------------------------------------------------------------------------- */
.btn,
a.btn {
  position: relative;
  display: inline-block;
  min-width: 15rem;
  padding: 0 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 5.4rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  outline: 0;
  border-radius: 0.4rem;
  border: 0.11px solid #191919;
  background-color: #191919;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.btn:visited,
a.btn:visited {
  text-decoration: none;
  color: #fff;
}
.btn:hover, .btn:active,
a.btn:hover,
a.btn:active {
  color: #5fb5f3;
  transform: scale(1.1);
}
.btn._small,
a.btn._small {
  min-width: 0;
  padding: 0 1.5rem;
  line-height: 4.4rem;
}
.btn._mid_height,
a.btn._mid_height {
  line-height: 4.4rem;
  padding: 0;
}
.btn._large,
a.btn._large {
  font-size: 2rem;
  line-height: 8rem;
}
.btn._large2,
a.btn._large2 {
  font-size: 2rem;
  line-height: 8rem;
  border-color: #000;
  background-color: #000;
  color: #fff;
}
.btn._large3,
a.btn._large3 {
  line-height: 8rem;
}
.btn._white,
a.btn._white {
  color: #191919;
  border-color: #ccc;
  background-color: #fff;
}
.btn._external::after,
a.btn._external::after {
  content: "\f35d";
  margin-left: 0.8rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
.btn._disabled,
a.btn._disabled {
  pointer-events: none;
  color: #bbb;
  border: 0;
  background-color: #eee;
}

/* --------------------------------------------------------------------------------
   サムネの上に再生ボタン / .btn-play
   -------------------------------------------------------------------------------- */
.btn-play {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.777;
  text-align: left;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  border: 0;
  outline: 0;
  border-radius: 0.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.btn-play * {
  vertical-align: top !important;
}
.btn-play::after {
  content: "";
  display: block !important;
  z-index: 1;
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
}
.btn-play ._play {
  content: "";
  z-index: 2;
  position: absolute;
  left: calc(50% - 2.4rem);
  top: calc(50% - 2.4rem);
  width: 4.8rem;
  height: 4.8rem;
  background: url(/images/common/icon-play.svg) no-repeat center;
  background-size: contain;
  transform-origin: 50% 50%;
}
.btn-play:hover::after {
  background-color: transparent;
}
.btn-play:hover ._play {
  animation: anim-scale 0.5s ease-out;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-gallery-list {
    display: block;
    margin: 0;
    padding: 0;
  }
  body.page-top .top-gallery-list ._item-wrapper {
    width: 100%;
    min-height: 40vw;
    margin: 5vw 0;
  }
  body.page-top .top-gallery-list ._item-wrapper::after {
    display: none;
  }
  body.page-top .top-gallery-list ._item-wrapper > a {
    padding: 5vw;
    font-size: 3vw;
    border-radius: 1vw;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._play {
    left: auto;
    right: 5vw;
    top: 5vw;
    width: 10vw;
    height: 10vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._num {
    display: none;
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._title {
    margin: 1vw 0;
    font-size: 4vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a small {
    font-size: 3vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a small br {
    display: none;
  }
}
@keyframes anim-scale {
  0% {
    transform: scale(0.4, 0.4);
  }
  40% {
    transform: scale(1.2, 1.2);
  }
  60% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* --------------------------------------------------------------------------------
   記事共通要素 - 見出し / .heading
   -------------------------------------------------------------------------------- */
.heading._lv-1 {
  position: relative !important;
  margin: 3.5em 0 1.5em;
  padding-bottom: 1em !important;
  font-size: 2.8rem !important;
  font-weight: bold !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
.heading._lv-1::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 10rem !important;
  height: 1px !important;
  margin: 0 auto !important;
  border-top: 2px solid #00C58C !important;
}
.heading._lv-1:first-child {
  margin-top: 2em;
}
.heading._lv-2 {
  margin: 2em 0 1em !important;
  font-size: 2.2rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
}
.heading._lv-2._border {
  padding-left: 0.8em;
  border-left: 0.5rem solid #00C58C;
}
.heading._lv-3 {
  margin: 2em 0 0.5em !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
}
@media only screen and (max-width: 767px) {
  .heading._lv-1 {
    margin-top: 2.5em;
    font-size: 2.4rem !important;
    line-height: 1.5 !important;
  }
  .heading._lv-2 {
    font-size: 2rem !important;
  }
  .heading._lv-3 {
    font-size: 1.6rem !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - リード文 / .lead
   -------------------------------------------------------------------------------- */
.lead {
  margin: 10rem 0 !important;
  padding: 6rem !important;
  font-weight: bold !important;
  background-color: #f2f2f2 !important;
}
.lead :last-child {
  margin-bottom: 0 !important;
}
@media only screen and (max-width: 767px) {
  .lead {
    margin: 0 -2rem 4rem !important;
    padding: 3rem !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - ローカルナビ / .local-nav
   -------------------------------------------------------------------------------- */
.local-nav {
  display: flex !important;
  margin-top: 120px !important;
  border-radius: 50px !important;
  background-color: #f2f2f2 !important;
}
.local-nav li {
  flex-grow: 1 !important;
}
.local-nav li a {
  display: block !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  line-height: 5rem !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #000 !important;
  -webkit-transition: all 0.1s linear !important;
  transition: all 0.1s linear !important;
}
.local-nav li a:hover, .local-nav li a._active {
  background-color: #ddd !important;
}
.local-nav li:first-child a {
  border-radius: 50px 0 0 50px !important;
}
.local-nav li:last-child a {
  border-radius: 0 50px 50px 0 !important;
}
.local-nav li._inquiry a, .local-nav li._trial a {
  color: #fff !important;
  background-color: #000 !important;
}
.local-nav li._inquiry a:hover, .local-nav li._trial a:hover {
  color: #2af !important;
}
.local-nav li._inquiry a::before {
  content: "\f0e0" !important;
  margin-right: 8px !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
@media screen and (max-width: 767px) {
  .local-nav {
    flex-wrap: wrap !important;
    margin-top: 100px !important;
    border-radius: 0 !important;
  }
  .local-nav li a {
    padding: 0 20px !important;
    font-size: 14px !important;
    line-height: 50px !important;
    border-radius: 0 !important;
    border: 1px solid #fff !important;
  }
  .local-nav li:last-child a {
    border-radius: 0 !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - 図や画像のボックス / .chart
   -------------------------------------------------------------------------------- */
.chart {
  margin-bottom: 5rem !important;
}
.chart ._caption {
  margin-bottom: 1rem !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
}
.chart ._caption::before {
  content: "●" !important;
  margin-right: 0.3rem !important;
}
.chart ._box {
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 6rem !important;
  text-align: center !important;
  border: 1px solid #ccc !important;
}
.chart ._box img {
  margin: auto;
}
@media only screen and (max-width: 767px) {
  .chart ._caption {
    font-size: 1.6rem !important;
  }
  .chart ._box {
    padding: 2rem !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - マルチカラムレイアウト / .columns
   --------------------------------------------------------------------------------
   - 要素を横に並べたいときに使用（スマホでは縦に並ぶ）
   - 要素の間隔のデフォルトは 20px
   - 要素の間隔はヘルパークラス _gap-0, _gap-10, _gap-20, ..., _gap-100 で調整可能
     ※それぞれスマホでは sp- が付与され _sp-gap-0 のようになる
   - 並びかたのデフォルトは strech。ヘルパークラス _center で上下中央揃えにできる
   - 要素の幅を調整する場合は、width ユーティリティクラスなどで適宜調整
   -------------------------------------------------------------------------------- */
.columns {
  display: flex !important;
  justify-content: center;
  gap: 2rem !important;
}
.columns._center {
  align-items: center !important;
}
.columns._gap-0 {
  gap: 0 !important;
}
.columns._gap-10 {
  gap: 1rem !important;
}
.columns._gap-20 {
  gap: 2rem !important;
}
.columns._gap-30 {
  gap: 3rem !important;
}
.columns._gap-40 {
  gap: 4rem !important;
}
.columns._gap-50 {
  gap: 5rem !important;
}
.columns._gap-60 {
  gap: 6rem !important;
}
.columns._gap-70 {
  gap: 7rem !important;
}
.columns._gap-80 {
  gap: 8rem !important;
}
.columns._gap-90 {
  gap: 9rem !important;
}
.columns._gap-100 {
  gap: 10rem !important;
}
@media only screen and (max-width: 767px) {
  .columns {
    flex-direction: column !important;
  }
  .columns._sp-gap-0 {
    gap: 0 !important;
  }
  .columns._sp-gap-10 {
    gap: 1rem !important;
  }
  .columns._sp-gap-20 {
    gap: 2rem !important;
  }
  .columns._sp-gap-30 {
    gap: 3rem !important;
  }
  .columns._sp-gap-40 {
    gap: 4rem !important;
  }
  .columns._sp-gap-50 {
    gap: 5rem !important;
  }
  .columns._sp-gap-60 {
    gap: 6rem !important;
  }
  .columns._sp-gap-70 {
    gap: 7rem !important;
  }
  .columns._sp-gap-80 {
    gap: 8rem !important;
  }
  .columns._sp-gap-90 {
    gap: 9rem !important;
  }
  .columns._sp-gap-100 {
    gap: 10rem !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - カラム / .side-img
   -------------------------------------------------------------------------------- */
.side-img {
  display: flex !important;
  gap: 8rem !important;
}
.side-img ._img ._caption {
  margin-top: 0.5rem !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .side-img {
    display: block !important;
  }
  .side-img ._text {
    width: 100% !important;
  }
  .side-img ._img {
    margin-top: 3rem !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - ユースケース / .usecase
   -------------------------------------------------------------------------------- */
.usecase {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.usecase li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 20% !important;
  min-height: 22rem !important;
  margin: 0 2.5rem 2.5rem !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
  text-align: center !important;
  background-image: radial-gradient(#f2f2f2 70%, #fff 70%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: min(100%, 22rem) min(100%, 22rem) !important;
}
.usecase li img {
  display: block !important;
  margin: 0 auto 2rem !important;
}
@media screen and (max-width: 767px) {
  .usecase {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .usecase li {
    width: 48% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 1% !important;
    padding: 20px 5px 10px !important;
    font-size: 1.3rem !important;
    background-image: none !important;
    background-color: #f2f2f2 !important;
  }
}

.usecase_black {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
.usecase_black li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 21% !important;
  min-height: 22rem !important;
  margin: 0 1rem 1rem !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: #fff;
  text-align: center !important;
  background-image: radial-gradient(#000000 70%, #fff 70%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: min(100%, 22rem) min(100%, 22rem) !important;
}
@media screen and (max-width: 767px) {
  .usecase_black {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .usecase_black li {
    width: 48% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 1% !important;
    padding: 20px 5px 10px !important;
    font-size: 1.3rem !important;
    background-image: none !important;
    background-color: #000000 !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - 主な機能 / .functions
   -------------------------------------------------------------------------------- */
.functions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}
.functions li {
  width: 32%;
  margin: 1rem 0 !important;
  padding: 3rem !important;
  text-align: center !important;
  background-color: #f2f2f2 !important;
}
.functions li h3 {
  margin: 2rem 0 1rem !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.functions li p {
  margin: 0 !important;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .functions {
    display: block !important;
  }
  .functions li {
    width: 100% !important;
    margin: 0.5rem 0 !important;
  }
  .functions li h4 small {
    font-size: 2rem !important;
  }
  .functions li h4 span {
    display: block !important;
    min-height: 0 !important;
    margin: 0.2em 0 0.5em !important;
  }
  .functions li p {
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - 魅力 / .features
   -------------------------------------------------------------------------------- */
.features {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
}
.features li {
  width: 49%;
  margin: 10px 0 !important;
  padding: 30px !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}
.features li img {
  display: block !important;
  margin: 0 auto 15px !important;
}
.features li h3 {
  margin: 50px 0 30px !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.features li p {
  line-height: 1.7 !important;
}
.features li [data-lity] img {
  height: auto !important;
}
.features.is-3-columns li {
  width: 32% !important;
}
@media screen and (max-width: 767px) {
  .features {
    display: block !important;
  }
  .features li {
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 30px !important;
  }
  .features li ._icon img {
    height: 50px !important;
  }
  .features li h3 {
    margin: 30px 0 10px !important;
  }
  .features.is-3-columns li {
    width: 100% !important;
  }
}

.features2 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
}
.features2 li {
  width: 60%;
  margin: 0 auto;
  padding: 30px !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}
.features2 li img {
  display: block !important;
  margin: 0 auto 15px !important;
}
.features2 li h2 {
  margin: 50px 0 30px !important;
  font-size: 3rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.features2 li h3 {
  margin: 50px 0 30px !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.features2 li p {
  line-height: 1.7 !important;
  padding-left: 20px;
}
.features2 li i.fas.fa-check {
  font-family: "Font Awesome 5 Free" !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: #378C69 !important;
}
.features2 li [data-lity] img {
  height: auto !important;
}
.features2.is-3-columns li {
  width: 32% !important;
}
@media screen and (max-width: 767px) {
  .features2 {
    display: block !important;
  }
  .features2 li {
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 30px !important;
  }
  .features2 li ._icon img {
    height: 50px !important;
  }
  .features2 li h3 {
    margin: 30px 0 10px !important;
  }
  .features2.is-3-columns li {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------------
   ソリューションタイトル / .solution-title
   -------------------------------------------------------------------------------- */
.solution-title {
  margin: 0 !important;
  padding: 6rem 1rem 0 !important;
  line-height: 1.7;
  text-align: center;
}
.solution-title span {
  display: block;
  font-size: 2rem;
  color: #228166;
}
.solution-title em {
  display: block;
  font-family: "Lato";
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .solution-title {
    margin: 0 !important;
    padding: 10rem 1rem 0 !important;
  }
  .solution-title em {
    font-size: 4rem;
  }
  .solution-title span {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------------
   フローチャートのようなリスト / .flow
   -------------------------------------------------------------------------------- */
.flow {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 4rem;
}
.flow > li > dl {
  display: flex;
}
.flow > li > dl > dt {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 15rem;
  padding-top: 1.5rem;
  margin-right: 3rem;
  font-weight: bold;
  color: #005aa9;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: rgba(0, 90, 169, 0.1);
}
.flow > li > dl > dt::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 3rem;
  border: 3rem solid transparent;
  border-width: 3rem 7.5rem;
  border-top-color: rgba(0, 90, 169, 0.1);
}
.flow > li > dl > dt em {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  color: #005aa9;
  border-radius: 100%;
  background-color: #fff;
}
.flow > li > dl > dd {
  line-height: 1.5;
}
.flow > li:nth-child(2) > dl > dt {
  background-color: rgba(0, 90, 169, 0.2);
}
.flow > li:nth-child(2) > dl > dt::after {
  border-top-color: rgba(0, 90, 169, 0.2);
}
.flow > li:nth-child(3) > dl > dt {
  color: #fff;
  background-color: rgba(0, 90, 169, 0.6);
}
.flow > li:nth-child(3) > dl > dt::after {
  border-top-color: rgba(0, 90, 169, 0.6);
}
.flow > li:nth-child(4) > dl > dt {
  color: #fff;
  background-color: rgba(0, 90, 169, 0.8);
}
.flow > li:nth-child(4) > dl > dt::after {
  border-top-color: rgba(0, 90, 169, 0.8);
}
.flow > li._orange > dl > dt {
  background-color: #E75F37;
}
.flow > li._orange > dl > dt em {
  color: #E75F37;
}
.flow > li._round > dl > dt {
  padding-bottom: 0.5rem;
  border-radius: 1.5rem;
}
.flow > li._round > dl > dt::after {
  display: none;
}
@media only screen and (max-width: 767px) {
  .flow > li > dl > dt {
    width: 8rem;
    margin-right: 1.5rem;
  }
  .flow > li > dl > dt::after {
    border-width: 3rem 4rem;
  }
}

/* --------------------------------------------------------------------------------
   製品リスト / .product-list
   -------------------------------------------------------------------------------- */
.product-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin: 0 auto 4rem;
}
.product-list li {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}
.product-list li h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12rem;
  margin: 0 0 1rem;
}
.product-list li h3 img {
  object-fit: scale-down;
}
.product-list li .btn {
  margin-top: auto;
}
@media all and (-ms-high-contrast: none) {
  .product-list {
    display: flex;
    flex-wrap: wrap;
  }
  .product-list li {
    width: 32%;
    margin: 0.666%;
  }
  .product-list li img {
    width: auto;
    max-width: 28rem;
  }
  .product-list li img[src*=jira-service-management] {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .product-list {
    grid-template-columns: 1fr;
  }
  .product-list li h3 {
    height: 8rem;
  }
}

/* --------------------------------------------------------------------------------
   製品リスト（小） / .product-list-mini
   -------------------------------------------------------------------------------- */
.product-list-mini {
  display: flex;
  justify-content: center;
  gap: 5rem;
}
.product-list-mini li {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-list-mini li a {
  text-decoration: none;
}
.product-list-mini li ._logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
}
.product-list-mini li ._name {
  display: block;
  margin: 1rem 0;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #000;
}
@media screen and (max-width: 767px) {
  .product-list-mini {
    flex-wrap: wrap;
    gap: 2rem 0;
  }
  .product-list-mini li {
    width: 49%;
    min-width: 0;
    margin-bottom: 40px;
  }
  .product-list-mini li ._name {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------------
   導入事例一覧 / .case-list
   -------------------------------------------------------------------------------- */
.case-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.case-list > li {
  width: 33.333% !important;
  padding: 2rem !important;
}
.case-list a._item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 3rem !important;
  text-decoration: none !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}
.case-list a._item._new::after {
  content: "" !important;
  z-index: 1 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 6rem !important;
  height: 6rem !important;
  background: url(/images/common/icon-new.svg) no-repeat 0 0 !important;
  background-size: contain !important;
}
.case-list a._item ._thumb {
  min-height: 0% !important;
}
.case-list a._item ._thumb img {
  width: 100% !important;
  height: 16.3rem !important;
  object-fit: contain !important;
}
@media all and (-ms-high-contrast: none) {
  .case-list a._item ._thumb img {
    height: auto !important;
  }
}
.case-list a._item h2,
.case-list a._item h3 {
  margin-bottom: 1rem !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
  color: #000 !important;
}
.case-list a._item h2 small,
.case-list a._item h3 small {
  display: block !important;
  margin-top: 1rem !important;
  font-size: 1.4rem !important;
  font-weight: normal !important;
  color: #999 !important;
}
.case-list a._item ._date {
  margin: 1.5rem 0 0.7rem !important;
  font-size: 1.6rem !important;
  color: #999 !important;
}
.case-list a._item ._summary {
  margin-bottom: 2rem !important;
}
.case-list a._item ._tag {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 3rem !important;
  font-size: 1.4rem !important;
  line-height: 3rem !important;
}
.case-list a._item ._tag li {
  margin: 0.2rem !important;
  padding: 0 0.8rem !important;
  background-color: #ddd !important;
}
.case-list a._item .btn {
  width: 15rem !important;
  margin: auto auto 0 !important;
}
@media screen and (max-width: 767px) {
  .case-list {
    display: block !important;
  }
  .case-list > li {
    width: 100% !important;
    padding: 10px 0 !important;
  }
  .case-list a._item ._thumb img {
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------------
   事例ボックス / .case-box
   -------------------------------------------------------------------------------- */
.case-box {
  position: relative;
  margin: 2em 0;
  padding: 80px 50px 50px;
  font-size: 1.6rem;
  border: 1px solid #ccc;
}
.case-box h3 {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100px;
  height: 40px;
  padding: 0 30px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background-color: #000;
}
.case-box .h3_2line {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100px;
  height: 60px;
  padding: 0 30px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #000;
}
.case-box h4 {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100px;
  height: 40px;
  padding: 0 30px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background-color: #000;
}
.case-box h5 {
  margin: 2em 0 0.5em;
  font-weight: bold;
}
.case-box img {
  display: block;
  margin: 0 auto;
}
.case-box p {
  margin: 0;
}
.case-box ._kinou-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
}
.case-box ._kinou-list li {
  width: 120px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 15px 0;
  font-size: 12px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 10px;
}
.case-box ._kinou-list li span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.3;
}
.case-box ._kinou-list li ._icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.case-box ._kinou-list li._off {
  opacity: 0.5;
  border-color: #999;
}
@media only screen and (max-width: 767px) {
  .case-box {
    padding: 70px 30px 30px;
  }
  .case-box ._kinou-list li {
    width: 32%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
  }
}

/* --------------------------------------------------------------------------------
   リンクボックス / .link-box
   -------------------------------------------------------------------------------- */
.link-box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.link-box > li {
  width: 31%;
  margin-right: 3.5%;
}
.link-box > li:nth-child(3n) {
  margin-right: 0;
}
.link-box a._item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3rem;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s linear;
}
.link-box a._item:hover {
  transform: scale(1.1);
}
.link-box a._item ._thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12rem;
}
.link-box a._item ._thumb img {
  max-width: 100%;
  max-height: 100%;
}
.link-box a._item h2 {
  margin-bottom: 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  color: #000;
}
.link-box a._item .btn {
  margin-top: auto;
}
.link-box a._item[disabled] {
  pointer-events: none;
}
.link-box a._item[disabled] ._thumb {
  opacity: 0.3;
}
@media only screen and (max-width: 767px) {
  .link-box {
    display: block;
  }
  .link-box > li {
    width: 100%;
    padding: 10px 0;
  }
  .link-box a._item ._thumb img {
    height: auto;
  }
}

/* --------------------------------------------------------------------------------
   汎用のテーブル / .common-table
   -------------------------------------------------------------------------------- */
.common-table {
  width: 100%;
}
.common-table th,
.common-table td {
  height: 6rem !important; /* 最小限の高さ（min-heightは効かない） */
  padding: 1rem 1.5rem !important;
  font-size: 1.6rem !important;
  vertical-align: middle !important;
  border: 1px solid #ddd !important;
}
.common-table thead th {
  font-weight: bold;
  text-align: center;
  background-color: #eee;
}
.common-table tbody tr._category th {
  font-size: 1.8rem !important;
  font-weight: bold !important;
  text-align: center !important;
  letter-spacing: 0.1em !important;
  background-color: #ddd !important;
}
.common-table tbody th {
  font-weight: bold !important;
  background-color: #f9f9f9 !important;
}
.common-table tbody th._sub-category {
  font-weight: bold !important;
  background-color: #f9f9f9 !important;
}
@media screen and (max-width: 767px) {
  .common-table {
    table-layout: fixed !important;
  }
  .common-table tbody tr._category th {
    text-align: left !important;
  }
}

@media screen and (max-width: 767px) {
  .common-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
  }
}
/* --------------------------------------------------------------------------------
   価格表 / .price-table
   -------------------------------------------------------------------------------- */
.price-table th,
.price-table td {
  width: 33.333% !important;
  padding: 1rem !important;
  font-size: 1.6rem !important;
  text-align: center;
  vertical-align: middle !important;
  border: 1px solid #ddd !important;
}
.price-table thead th {
  background-color: #eee !important;
}
.price-table thead em {
  display: block !important;
  font-family: "Lato" !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  border-bottom: 0 !important;
}
.price-table thead small {
  display: block !important;
  font-size: 1.6rem !important;
  color: #666 !important;
  border-top: 0 !important;
}
.price-table tbody th {
  background-color: #f9f9f9 !important;
}
.price-table tbody tr > td:first-child {
  font-weight: bold !important;
  background-color: #f9f9f9 !important;
}
.price-table tbody tr > td:nth-child(n+2) {
  text-align: center !important;
}
.price-table._mattermost th,
.price-table._mattermost td {
  height: 6rem !important;
  text-align: center !important;
}
@media screen and (max-width: 767px) {
  .price-table th,
  .price-table td {
    font-size: 1.4rem !important;
  }
}

/* --------------------------------------------------------------------------------
   プラン表 / .plan-table
   -------------------------------------------------------------------------------- */
.plan-table th,
.plan-table td {
  width: 20% !important;
  height: 6rem !important; /* 最小限の高さ（min-heightは効かない） */
  padding: 1rem 1.5rem !important;
  font-size: 1.6rem !important;
  vertical-align: middle !important;
  border: 1px solid #ddd !important;
}
.plan-table thead ._plan-name th {
  padding-top: 2rem !important;
  font-family: "Lato" !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  border-bottom: 0 !important;
}
.plan-table thead ._plan-description th {
  font-size: 1.6rem !important;
  color: #666 !important;
  border-top: 0 !important;
}
.plan-table tbody tr > td:first-child {
  font-weight: bold !important;
  background-color: #f9f9f9 !important;
}
.plan-table tbody tr > td:nth-child(n+2) {
  text-align: center !important;
}
.plan-table tbody ._category {
  font-size: 1.8rem !important;
  font-weight: bold !important;
  text-align: center !important;
  letter-spacing: 0.1em !important;
  background-color: #eee !important;
}
.plan-table tbody i.fas.fa-check {
  font-family: "Font Awesome 5 Free" !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: #378C69 !important;
}
@media screen and (max-width: 767px) {
  .plan-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .plan-table th,
  .plan-table td {
    width: 35vw !important;
    font-size: 1.4rem !important;
  }
  .plan-table thead ._plan-name th {
    font-size: 2rem !important;
  }
  .plan-table thead ._plan-description th {
    font-size: 1.2rem !important;
  }
  .plan-table tbody ._category {
    text-align: left !important;
  }
  .plan-table._jira-work-management {
    table-layout: auto !important; /* スクロールを出さない */
  }
}

@media screen and (max-width: 767px) {
  .plan-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
  }
}
/* --------------------------------------------------------------------------------
   ライセンス表 / .license-table
   -------------------------------------------------------------------------------- */
.license-table {
  width: 100% !important;
}
.license-table td,
.license-table th {
  width: 18% !important;
  padding: 1.5rem !important;
  font-size: 1.6rem !important;
  vertical-align: top !important;
  color: #888 !important;
  border: 1px solid #ddd !important;
}
.license-table td:last-child,
.license-table th:last-child {
  width: auto !important;
}
.license-table th {
  font-weight: bold !important;
}
.license-table tbody tr:last-child td,
.license-table tbody tr:last-child th {
  border-bottom: 0 !important;
}
.license-table thead th {
  position: sticky !important; /* スクロール時に上に固定 */
  top: 0 !important;
  z-index: 1 !important; /* tbody内のセルより手前に表示する */
  line-height: 1.3 !important;
  vertical-align: bottom !important;
  border-top: 0 !important;
  background-color: #fff !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15) !important;
}
.license-table thead th:nth-child(2), .license-table thead th:nth-child(3), .license-table thead th:nth-child(4) {
  font-size: 2rem !important;
  color: #000 !important;
}
.license-table ._val {
  color: #000 !important;
}
.license-table ._icon {
  display: flex !important;
  align-items: center !important;
  height: 4rem !important;
}
.license-table ._icon i._na {
  width: 4rem !important;
  height: 0.1rem !important;
  background-color: #aaa !important;
}
.license-table ._icon i.fas {
  font-size: 2.8rem !important;
  font-weight: bold !important;
  color: #47b689 !important;
}
.license-table ._icon i.fas._orange {
  color: #fbb03b !important;
}
@media screen and (max-width: 767px) {
  .license-table {
    min-width: 800px;
  }
  .license-table td,
  .license-table th {
    width: 50px; /* 十分に小さくして nowrap で調整 */
    white-space: nowrap;
    padding: 10px;
    font-size: 13px;
  }
  .license-table td:last-child,
  .license-table th:last-child {
    width: 200px;
    white-space: normal;
  }
  .license-table thead th {
    position: sticky; /* スクロール時に上に固定 */
    top: 0;
    z-index: 1; /* tbody内のセルより手前に表示する */
  }
  .license-table thead th:nth-child(2), .license-table thead th:nth-child(3), .license-table thead th:nth-child(4) {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------------
   ライセンスリスト / .license-list
   -------------------------------------------------------------------------------- */
.license-list {
  display: flex !important;
  margin: 5rem 0 !important;
  border-left: 1px solid #ddd !important;
}
.license-list > li {
  width: 33.3% !important;
  padding: 1rem 4rem 2rem !important;
  border-right: 1px solid #ddd !important;
}
.license-list > li ._icon {
  display: flex !important;
  align-items: flex-end !important;
  height: 6rem !important;
  margin-bottom: 1rem !important;
}
.license-list > li ._star {
  font-size: 3rem !important;
  margin-left: -0.2rem !important;
  color: #47B689 !important;
}
.license-list > li h3 {
  margin-bottom: 3rem !important;
  font-size: 2.4rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  color: #000 !important;
}
.license-list > li ._overview {
  margin-bottom: 3rem !important;
}
.license-list > li em {
  font-weight: bold !important;
}
.license-list > li ._sub-text {
  margin: 5rem -1rem 0 !important;
  padding: 0.8rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  text-align: center !important;
  background-color: #f2f2f2 !important;
}
.license-list > li ._check-list {
  font-size: 1.6rem !important;
}
.license-list > li ._check-list li {
  display: flex !important;
  margin: 1.5rem 0 !important;
}
.license-list > li ._check-list li::before {
  content: "\f058" !important;
  margin-right: 0.8rem !important;
  margin-top: 0.2rem !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #47B689 !important;
}
.license-list > li ._note {
  margin-top: 3rem !important;
  color: #c33 !important;
}
@media screen and (max-width: 767px) {
  .license-list {
    display: block !important;
    border: 0 !important;
  }
  .license-list > li {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 20px !important;
    border: 1px solid #ddd !important;
  }
  .license-list > li ._icon {
    justify-content: center !important;
  }
  .license-list > li ._star {
    margin-left: 0 !important;
    text-align: center !important;
  }
  .license-list > li h3 {
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------------
   幅広のテーブル等が左右にはみ出すときのスクロールラッパー / .table-wrapper
   -------------------------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------------
   GitLabのライセンス表（製品ページと代理店ページで使用） / .gitlab-license
   -------------------------------------------------------------------------------- */
.gitlab-license ._list {
  display: flex !important;
  margin: 5rem 0 !important;
  border-left: 1px solid #ddd !important;
}
.gitlab-license ._list > li {
  width: 33.3% !important;
  padding: 1rem 4rem 2rem !important;
  border-right: 1px solid #ddd !important;
}
.gitlab-license ._list > li ._icon {
  display: flex !important;
  align-items: flex-end !important;
  height: 6rem !important;
  margin-bottom: 1rem !important;
}
.gitlab-license ._list > li ._star {
  font-size: 3rem !important;
  margin-left: -0.2rem !important;
  color: #47B689 !important;
}
.gitlab-license ._list > li h3 {
  margin-bottom: 3rem !important;
  font-size: 2.4rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  color: #000 !important;
}
.gitlab-license ._list > li ._overview {
  margin-bottom: 3rem !important;
}
.gitlab-license ._list > li em {
  font-weight: bold !important;
}
.gitlab-license ._list > li ._sub-text {
  margin: 5rem -1rem 0 !important;
  padding: 0.8rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  text-align: center !important;
  background-color: #f2f2f2 !important;
}
.gitlab-license ._list > li ._check-list {
  font-size: 1.6rem !important;
}
.gitlab-license ._list > li ._check-list li {
  display: flex !important;
  margin: 1.5rem 0 !important;
}
.gitlab-license ._list > li ._check-list li::before {
  content: "\f058" !important;
  margin-right: 0.8rem !important;
  margin-top: 0.2rem !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #47B689 !important;
}
.gitlab-license ._list > li ._note {
  margin-top: 3rem !important;
  color: #c33 !important;
}
.gitlab-license ._category {
  display: flex !important;
  align-items: center !important;
  height: 4rem !important;
  margin-top: 5rem !important;
  padding: 0 2rem !important;
  border-radius: 0.4rem !important;
  background-color: #000 !important;
}
.gitlab-license ._category h3,
.gitlab-license ._category p {
  margin: 0 !important;
  color: #fff !important;
}
.gitlab-license ._category h3 {
  font-size: 2rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
}
.gitlab-license ._category p {
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}
.gitlab-license ._category p::before {
  content: "――" !important;
  margin: 0 1em !important;
}
.gitlab-license ._list {
  margin-top: 2rem !important;
}
.gitlab-license ._list ._overview {
  margin: 0 !important;
  min-height: 12rem !important;
}
.gitlab-license ._list ._price {
  margin-bottom: 1.5rem !important;
  padding-bottom: 3.5rem !important;
  border-bottom: 1px dotted #ccc !important;
  /* 価格はお問い合わせくださいのとき */
}
.gitlab-license ._list ._price span {
  display: block !important;
}
.gitlab-license ._list ._price ._amount {
  font-size: 1.8rem !important;
  font-weight: bold !important;
}
.gitlab-license ._list ._price ._amount small {
  font-size: 1.6rem !important;
  margin-left: 0.3em !important;
}
.gitlab-license ._list ._price ._memo {
  margin-top: 0.5rem !important;
  font-size: 1.4rem !important;
  font-weight: normal !important;
}
.gitlab-license ._list ._price._ask ._amount,
.gitlab-license ._list ._price._ask ._memo {
  color: #E75F37 !important;
}
.gitlab-license ._list ._sub-text {
  margin-top: 1.5rem !important;
}
@media screen and (max-width: 767px) {
  .gitlab-license ._list {
    display: block !important;
    border: 0 !important;
  }
  .gitlab-license ._list > li {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 20px !important;
    border: 1px solid #ddd !important;
  }
  .gitlab-license ._list > li ._icon {
    justify-content: center !important;
  }
  .gitlab-license ._list > li ._star {
    margin-left: 0 !important;
    text-align: center !important;
  }
  .gitlab-license ._list > li h3 {
    text-align: center !important;
  }
  .gitlab-license ._category {
    display: block !important;
    height: auto !important;
    padding: 10px 18px !important;
  }
  .gitlab-license ._category p::before {
    display: none !important;
  }
  .gitlab-license ._list > li {
    padding-top: 30px !important;
  }
  .gitlab-license ._list ._upper {
    text-align: center !important;
  }
  .gitlab-license ._list ._overview {
    min-height: 0 !important;
  }
  .gitlab-license ._list ._price {
    margin-top: 20px !important;
  }
}

/* --------------------------------------------------------------------------------
   記事共通要素 - お問い合わせボックス（本文最後に配置されるもの） / .contact-box
   -------------------------------------------------------------------------------- */
.contact-box {
  margin: 10rem 0 0 !important;
  padding: 5rem !important;
  text-align: center !important;
  border: 1px solid #ddd !important;
}
.contact-box .btn {
  height: 6.4rem !important;
  line-height: 6.4rem !important;
  color: #fff !important;
  background-color: #000 !important;
}
@media only screen and (max-width: 767px) {
  .contact-box {
    margin: 5rem 0 0 !important;
    padding: 2rem !important;
  }
}

/* --------------------------------------------------------------------------------
   引用 / .quote
   -------------------------------------------------------------------------------- */
.quote {
  position: relative;
  padding: 5rem;
  background-color: #f2f2f2;
}
.quote * {
  position: relative;
}
.quote::before {
  content: "“";
  z-index: 0;
  position: absolute;
  left: 2rem;
  top: 2rem;
  font-size: 14.4rem;
  line-height: 1;
  color: #ddd;
}
.quote ._comment {
  font-style: italic;
  margin-bottom: 0.5em !important;
}
.quote ._credit {
  font-weight: bold;
  font-style: italic;
  text-align: left !important;
  margin-top: 0.5em !important;
}
@media only screen and (max-width: 767px) {
  .quote {
    padding: 3rem;
  }
}

/* --------------------------------------------------------------------------------
   代理店バナーエリア / .partner-banner
   -------------------------------------------------------------------------------- */
.partner-banner {
  margin: 5rem auto;
  border-top: 1px solid #ccc;
}
.partner-banner li {
  display: flex;
  align-items: center;
  min-height: 10rem;
  padding: 1.5rem 3rem;
  border-bottom: 1px solid #ccc;
}
.partner-banner li ._logo {
  width: 30rem;
  text-align: center;
}
.partner-banner li ._logo img {
  max-width: 100%;
}
.partner-banner li p {
  flex-shrink: 100;
  margin: 0 3rem !important;
  line-height: 1.5;
}
.partner-banner li b {
  font-weight: bold;
}
.partner-banner li .btn {
  width: 20rem;
  margin-left: auto;
  background-color: #000;
}

@media screen and (max-width: 767px) {
  .partner-banner li {
    flex-direction: column;
    padding: 5vw;
  }
  .partner-banner li img {
    max-width: 100%;
  }
  .partner-banner li p {
    margin: 2rem 0 0 !important;
  }
  .partner-banner li .btn {
    width: 20rem !important;
    margin-left: 0;
    margin-top: 5vw;
  }
}
/* --------------------------------------------------------------------------------
   外部テキストリンク / .extarnal-link
   -------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   関連リンク / .related-link
   -------------------------------------------------------------------------------- */
.related-link,
.old-wrapper .related-link {
  width: 100%; /* これがないと当要素が .columnArea 内にある場合で、かつ配下アイテムが3つ未満の場合に崩れる */
  margin-top: 10rem;
  padding-top: 5rem;
  border-top: 1px solid #ddd;
}
.related-link h2,
.related-link h3,
.old-wrapper .related-link h2,
.old-wrapper .related-link h3 {
  margin-bottom: 5rem;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.related-link ul,
.old-wrapper .related-link ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.related-link ul > li,
.old-wrapper .related-link ul > li {
  width: 30%;
  margin: 0 1.666%;
}
.related-link ul > li:nth-child(n+4),
.old-wrapper .related-link ul > li:nth-child(n+4) {
  margin-top: 7rem;
}
.related-link ul a._item,
.old-wrapper .related-link ul a._item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.related-link ul a._item ._thumb,
.old-wrapper .related-link ul a._item ._thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16.3rem;
  padding: 2rem 6rem;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #eee;
}
.related-link ul a._item ._thumb img,
.old-wrapper .related-link ul a._item ._thumb img {
  max-width: 100%;
  max-height: 100%;
}
.related-link ul a._item ._thumb._full-img,
.old-wrapper .related-link ul a._item ._thumb._full-img {
  padding: 0;
}
.related-link ul a._item ._thumb._full-img img,
.old-wrapper .related-link ul a._item ._thumb._full-img img {
  width: 100%;
  object-fit: cover;
}
.related-link ul a._item._atlassian ._thumb,
.old-wrapper .related-link ul a._item._atlassian ._thumb {
  background-color: #0040C0;
}
.related-link ul a._item._elastic ._thumb,
.old-wrapper .related-link ul a._item._elastic ._thumb {
  background-color: #FEC514;
}
.related-link ul a._item h2,
.related-link ul a._item h3._title,
.old-wrapper .related-link ul a._item h2,
.old-wrapper .related-link ul a._item h3._title {
  margin: 2rem 0 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  color: #000;
}
.related-link ul a._item p,
.old-wrapper .related-link ul a._item p {
  margin-bottom: 1em;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #474747;
}
.related-link ul a._item .btn,
.old-wrapper .related-link ul a._item .btn {
  margin-top: auto;
  width: 15rem;
}
@media only screen and (max-width: 767px) {
  .related-link,
  .old-wrapper .related-link {
    margin-top: 5rem;
  }
  .related-link h2,
  .related-link h3,
  .old-wrapper .related-link h2,
  .old-wrapper .related-link h3 {
    font-size: 18px;
  }
  .related-link ul,
  .old-wrapper .related-link ul {
    display: block;
  }
  .related-link ul > li,
  .old-wrapper .related-link ul > li {
    width: 100%;
    margin: 0 0 30px;
  }
  .related-link ul > li:nth-child(n+4),
  .old-wrapper .related-link ul > li:nth-child(n+4) {
    margin: 0 0 30px;
  }
  .related-link ul a._item h2,
  .related-link ul a._item h3._title,
  .old-wrapper .related-link ul a._item h2,
  .old-wrapper .related-link ul a._item h3._title {
    margin: 10px 0;
    font-size: 16px;
  }
  .related-link ul a._item p,
  .old-wrapper .related-link ul a._item p {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------------
   アイコン付きテキストリンク / .icon-link
   -------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
   サムネイル画像 / .thumbnail
   -------------------------------------------------------------------------------- */
.thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  height: 16.3rem !important;
  font-size: 2.4rem !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center;
  color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  /* トップページのコラムリストでは小さくする */
}
@media all and (-ms-high-contrast: none) {
  .thumbnail img {
    height: auto;
  }
}
body.page-top .top-column-list .thumbnail {
  width: 15rem !important;
  height: auto !important;
  font-size: 1.4rem !important;
}
@media only screen and (max-width: 767px) {
  .thumbnail {
    /* トップページのコラムリストでは小さくする */
  }
  body.page-top .top-column-list .thumbnail {
    width: 35vw !important;
    font-size: 1.2rem !important;
  }
}

/* --------------------------------------------------------------------------------
   画像拡大表示 / a[data-lity]
   -------------------------------------------------------------------------------- */
a[data-lity] {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
}
a[data-lity]::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: url("/images/common/icon-zoom.svg") no-repeat center;
}
a[data-lity][data-lity-noicon]::after {
  display: none;
}

/* --------------------------------------------------------------------------------
   コードハイライター / pre.prettyprint
   -------------------------------------------------------------------------------- */
pre.prettyprint {
  display: block !important;
  margin: 0.5rem 0 3rem !important;
  padding: 5rem !important;
  font-size: 1.6rem !important;
  background-color: #333 !important;
}
pre.prettyprint code {
  display: block !important;
  font-family: "Courier New", Consolas, monospace !important;
  line-height: 2 !important;
  color: #ccc !important;
  background-color: #333 !important;
}
pre.prettyprint code .atn,
pre.prettyprint code .kwd,
pre.prettyprint code .tag {
  font-weight: 700 !important;
}
pre.prettyprint code .nocode {
  background-color: none !important;
  color: #000 !important;
}
pre.prettyprint code .str {
  color: #ffa0a0 !important;
}
pre.prettyprint code .kwd {
  color: khaki !important;
}
pre.prettyprint code .com {
  color: #87ceeb !important;
}
pre.prettyprint code .typ {
  color: #98fb98 !important;
}
pre.prettyprint code .lit {
  color: #cd5c5c !important;
}
pre.prettyprint code .pln,
pre.prettyprint code .pun {
  color: #fff !important;
}
pre.prettyprint code .tag {
  color: khaki !important;
}
pre.prettyprint code .atn {
  color: #bdb76b !important;
}
pre.prettyprint code .atv {
  color: #ffa0a0 !important;
}
pre.prettyprint code .dec {
  color: #98fb98 !important;
}
pre.prettyprint code ol.linenums {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #AEAEAE !important;
}
pre.prettyprint code li.L0,
pre.prettyprint code li.L1,
pre.prettyprint code li.L2,
pre.prettyprint code li.L3,
pre.prettyprint code li.L5,
pre.prettyprint code li.L6,
pre.prettyprint code li.L7,
pre.prettyprint code li.L8 {
  list-style-type: none !important;
}
@media print {
  pre.prettyprint code {
    background-color: none !important;
  }
  pre.prettyprint code .str {
    color: #060 !important;
  }
  pre.prettyprint code .kwd {
    color: #006 !important;
    font-weight: 700 !important;
  }
  pre.prettyprint code .com {
    color: #600 !important;
    font-style: italic !important;
  }
  pre.prettyprint code .typ {
    color: #404 !important;
    font-weight: 700 !important;
  }
  pre.prettyprint code .lit {
    color: #044 !important;
  }
  pre.prettyprint code .pun {
    color: #440 !important;
  }
  pre.prettyprint code .pln {
    color: #000 !important;
  }
  pre.prettyprint code .tag {
    color: #006 !important;
    font-weight: 700 !important;
  }
  pre.prettyprint code .atn {
    color: #404 !important;
  }
  pre.prettyprint code .atv {
    color: #060 !important;
  }
}
@media screen and (max-width: 767px) {
  pre.prettyprint {
    overflow-x: auto !important;
  }
}

/* --------------------------------------------------------------------------------
   スクロールで表示する要素 / .delighter
     - delighter.js を利用している
     - https://q42.github.io/delighters/
   -------------------------------------------------------------------------------- */
/* 基本のスタイル */
.delighter {
  transition: all 0.3s ease-out;
  transform: translateY(5rem);
  opacity: 0;
}

/* スタート時のスタイル */
.delighter.started {
  transform: none;
  opacity: 1;
}

/* エンド時のスタイル */
@media only screen and (max-width: 767px) {
  body.page-top #news .delighter.top-section-title {
    /* トップのニュースタイトルは見せておく */
    transform: none;
    opacity: 1;
  }
}
/* --------------------------------------------------------------------------------
   シェアボタン / .sns-btn
   -------------------------------------------------------------------------------- */
.sns-btn {
  z-index: 1;
  position: absolute !important;
  right: 0;
  top: 4.5rem;
}

@media only screen and (max-width: 767px) {
  .sns-btn {
    right: 2vw;
    top: 7vw;
  }
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .twitter-share-button {
    display: none;
  } /* IE11 */
}
/* --------------------------------------------------------------------------------
   スクロールラッパー / .sp-scroll-wrapper
   -------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .sp-scroll-wrapper {
    overflow-x: auto;
  }
  .sp-scroll-wrapper::before {
    content: "※図表がはみ出す場合は指でスクロールできます";
    display: block;
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------------
   input[type="text"]      : テキストフィールド
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
input[type=text],
input[type=password] {
  max-width: 100%;
  height: 5rem;
  padding: 0 1.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
}
input[type=text]:disabled,
input[type=password]:disabled {
  font-weight: normal;
  color: #bbb;
  border-color: #ddd;
  background-color: #eee;
  opacity: 1;
}
input[type=text]._has-error, ._has-error input[type=text],
input[type=password]._has-error,
._has-error input[type=password] {
  color: #E75F37;
  border-color: #E75F37;
  background-color: #fef3f3;
}
input[type=text]._has-error:disabled, ._has-error input[type=text]:disabled,
input[type=password]._has-error:disabled,
._has-error input[type=password]:disabled {
  color: #999;
  border-color: #ddd;
  background-color: #eee;
}
@media only screen and (max-width: 767px) {
  input[type=text],
  input[type=password] {
    width: 100%;
    height: 12.5vw;
    padding: 0 4vw;
    font-size: 4.5vw;
    border-width: 0.25vw;
    border-radius: 1vw;
  }
}

/* --------------------------------------------------------------------------------
   .input-with-text      : 固定テキストが付加されているテキストフィールド
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
.input-with-text {
  display: flex;
  align-items: center;
  max-width: 100%;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
}
.input-with-text input[type=text] {
  flex-grow: 1;
  border: 0;
}
.input-with-text > span {
  padding: 0 1.5rem;
  font-size: 1.8rem;
}
.input-with-text._disabled {
  color: #999;
  border-color: #ddd;
  background-color: #eee;
}
.input-with-text._has-error, ._has-error .input-with-text {
  color: #E75F37;
  border-color: #E75F37;
  background-color: #fef3f3;
}
.input-with-text._has-error._disabled, ._has-error .input-with-text._disabled {
  color: #999;
  border-color: #ddd;
  background-color: #eee;
}
@media only screen and (max-width: 767px) {
  .input-with-text {
    width: 100%;
    border-radius: 1vw;
    border: 0.25vw solid #ccc;
  }
  .input-with-text > span {
    padding: 0 4vw;
    font-size: 5vw;
  }
}

/* --------------------------------------------------------------------------------
   .radio                : ラジオボタン
   --------------------------------------------------------------------------------
    - 次のように記述することを想定（span 必須。ラベルテキストがない場合は空の span）
        <label class="radio">
          <input type="radio">
          <span>ラベル</span>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + span {
  display: inline-block;
  padding-right: 1rem;
  font-size: 1.8rem;
}
.radio input[type=radio] + span::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
  line-height: 0;
  vertical-align: -0.4rem;
  border: 1px solid #aaa;
  border-radius: 100%;
  transition: all 0.2s ease;
}
.radio input[type=radio] + span:hover::before {
  border: 1px solid #005aa9;
  background-color: rgba(0, 90, 169, 0.05);
}
.radio input[type=radio]:checked + span::before {
  background-color: #005aa9;
  box-shadow: inset 0 0 0 0.4rem #fff;
}
.radio input[type=radio]:disabled + span {
  cursor: default;
  color: #999;
}
.radio input[type=radio]:disabled + span::before {
  border-color: #ddd;
  background: #eee;
}
.radio input[type=radio]:focus + span::before {
  border: 1px solid #005aa9;
  box-shadow: inset 0 0 0 0.4rem #fff, 0 0 0.2rem 0.1rem rgba(0, 90, 169, 0.5);
}
.radio input[type=radio] + span:empty {
  padding-right: 0;
}
.radio input[type=radio] + span:empty::before {
  margin-right: 0;
}
.radio._has-error input[type=radio] + span, ._has-error .radio input[type=radio] + span {
  color: #E75F37;
}
.radio._has-error input[type=radio] + span::before, ._has-error .radio input[type=radio] + span::before {
  border-color: #E75F37;
}
.radio._has-error input[type=radio]:checked + span::before, ._has-error .radio input[type=radio]:checked + span::before {
  border-color: #aaa;
}
.radio._has-error input[type=radio]:disabled + span, ._has-error .radio input[type=radio]:disabled + span {
  cursor: default;
  color: #999;
}
.radio._has-error input[type=radio]:disabled + span::before, ._has-error .radio input[type=radio]:disabled + span::before {
  border-color: #ddd;
  background: #eee;
}
.radio._has-error input[type=radio] + span:empty, ._has-error .radio input[type=radio] + span:empty {
  padding-right: 0;
}
.radio._has-error input[type=radio] + span:empty::before, ._has-error .radio input[type=radio] + span:empty::before {
  margin-right: 0;
}
@media only screen and (max-width: 767px) {
  .radio {
    display: block;
    margin: 3vw 0;
  }
  .radio input[type=radio] + span {
    padding-right: 2.5vw;
    font-size: 4.5vw;
  }
  .radio input[type=radio] + span::before {
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
    vertical-align: -2.5vw;
    border-width: 1px;
  }
}

/* --------------------------------------------------------------------------------
   form-input-checkbox   : チェックボックス
   --------------------------------------------------------------------------------
    - 次のように記述することを想定（span 必須。ラベルテキストがない場合は空の span）
        <label class="checkbox">
          <input type="checkbox">
          <span>ラベル</span>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.checkbox input[type=checkbox] + span {
  display: inline-block;
  padding-right: 1rem;
  font-size: 1.8rem;
}
.checkbox input[type=checkbox] + span::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
  line-height: 0;
  vertical-align: -0.4rem;
  border: 1px solid #aaa;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
}
@media all and (-ms-high-contrast: none) {
  .checkbox input[type=checkbox] + span::before { /* IE11対応 */
    border-radius: 0;
  }
}
.checkbox input[type=checkbox] + span:hover::before {
  border: 1px solid #005aa9;
  background-color: rgba(0, 90, 169, 0.05);
}
.checkbox input[type=checkbox]:checked + span::before {
  background-color: #005aa9;
  box-shadow: inset 0 0 0 0.4rem #fff;
}
.checkbox input[type=checkbox]:disabled + span {
  cursor: default;
  color: #999;
}
.checkbox input[type=checkbox]:disabled + span::before {
  border-color: #ddd;
  background: #eee;
}
.checkbox input[type=checkbox]:focus + span::before {
  border: 1px solid #005aa9;
  box-shadow: inset 0 0 0 0.4rem #fff, 0 0 0.2rem 0.1rem rgba(0, 90, 169, 0.5);
}
.checkbox input[type=checkbox] + span:empty {
  padding-right: 0;
}
.checkbox input[type=checkbox] + span:empty::before {
  margin-right: 0;
}
.checkbox._has-error input[type=checkbox] + span, ._has-error .checkbox input[type=checkbox] + span {
  color: #E75F37;
}
.checkbox._has-error input[type=checkbox] + span::before, ._has-error .checkbox input[type=checkbox] + span::before {
  border-color: #E75F37;
}
.checkbox._has-error input[type=checkbox]:checked + span::before, ._has-error .checkbox input[type=checkbox]:checked + span::before {
  border-color: #aaa;
}
.checkbox._has-error input[type=checkbox]:disabled + span, ._has-error .checkbox input[type=checkbox]:disabled + span {
  cursor: default;
  color: #999;
}
.checkbox._has-error input[type=checkbox]:disabled + span::before, ._has-error .checkbox input[type=checkbox]:disabled + span::before {
  border-color: #ddd;
  background: #eee;
}
.checkbox._has-error input[type=checkbox] + span:empty, ._has-error .checkbox input[type=checkbox] + span:empty {
  padding-right: 0;
}
.checkbox._has-error input[type=checkbox] + span:empty::before, ._has-error .checkbox input[type=checkbox] + span:empty::before {
  margin-right: 0;
}
@media only screen and (max-width: 767px) {
  .checkbox {
    display: block;
    margin: 3vw 0;
  }
  .checkbox input[type=checkbox] + span {
    padding-right: 2.5vw;
    font-size: 4.5vw;
  }
  .checkbox input[type=checkbox] + span::before {
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
    vertical-align: -2.5vw;
    border-width: 1px;
  }
}

/* --------------------------------------------------------------------------------
   input[type="file"]      : ファイル選択
   --------------------------------------------------------------------------------
    - 次のように記述することを想定
        <label class="input-file">
          <input type="file" name="" id="">
          <span class="_value">クリックしてファイルを選択</span>
          <button type="button" class="_clear-btn"><i class="fas fa-times-circle"></i></button>
        </label>

    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. サイズ → ._large, ._small
   -------------------------------------------------------------------------------- */
.input-file {
  position: relative;
}
.input-file ._clear-btn,
.input-file input[type=file] {
  display: none;
}
.input-file ._value {
  display: inline-block;
  width: 30rem;
  padding: 0 4rem 0 1rem;
  font-size: 1.6rem;
  line-height: 4.8rem;
  vertical-align: top;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
  background-color: #eee;
  transition: all 0.1s linear;
}
.input-file ._value:hover {
  color: #005aa9;
  border-color: rgba(0, 90, 169, 0.5);
  background-color: #fff;
}
.input-file ._clear-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  height: 5rem;
  font-size: 1.6rem;
  outline: 0;
  border: 0;
  margin: auto;
  background: none;
  transition: all 0.1s linear;
}
.input-file ._clear-btn:hover {
  color: #005aa9;
  transform: scale(1.3);
}
.input-file._small ._value {
  font-size: 1.4rem;
  line-height: 3.8rem;
}
.input-file._small ._clear-btn {
  height: 4rem;
  font-size: 1.4rem;
}
.input-file._large ._value {
  font-size: 2.4rem;
  line-height: 7.8rem;
}
.input-file._large ._clear-btn {
  width: 5rem;
  height: 8rem;
  font-size: 2rem;
}
.input-file._has-error ._value, ._has-error .input-file ._value {
  color: #E75F37;
  border-color: #E75F37;
  background-color: #fff9f9;
}
@media only screen and (max-width: 767px) {
  .input-file ._value {
    width: 50vw;
    padding: 0 10vw 0 2.5vw;
    font-size: 4vw;
    line-height: 12vw;
    border-width: 1px;
    border-radius: 1vw;
  }
  .input-file ._clear-btn {
    width: 10vw;
    height: 12.5vw;
    font-size: 4vw;
  }
  .input-file._small ._value {
    font-size: 3.5vw;
    line-height: 9.5vw;
  }
  .input-file._small ._clear-btn {
    height: 10vw;
    font-size: 3.5vw;
  }
  .input-file._large ._value {
    font-size: 6vw;
    line-height: 19.5vw;
  }
  .input-file._large ._clear-btn {
    width: 12.5vw;
    height: 20vw;
    font-size: 5vw;
  }
}

/* --------------------------------------------------------------------------------
   select      : select要素
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
select {
  max-width: 100%;
  min-width: 20rem;
  height: 5rem;
  padding: 0 3rem 0 1.5rem;
  font-size: 1.8rem;
  color: #000;
  border: 1px solid rgba(0, 90, 169, 0.5);
  border-radius: 0.5rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 背景グラデ＆三角の下矢印 */
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiCgkgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2ODAgMjIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2ODAgMjIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yMTEuMyw0NmgyNTcuM2MxNy44LDAsMjYuNywyMS41LDE0LjEsMzQuMUwzNTQuMSwyMDguOGMtNy44LDcuOC0yMC41LDcuOC0yOC4zLDBMMTk3LjIsODAuMUMxODQuNiw2Ny41LDE5My41LDQ2LDIxMS4zLDQ2Cgl6Ii8+Cjwvc3ZnPgo=") no-repeat center right, linear-gradient(to bottom, #fff, #e2e2e2) repeat-x center;
  background-size: 3rem auto, auto 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
select:hover {
  color: #005aa9;
  border-color: #005aa9;
  background-color: #eee;
  opacity: 1;
}
select:disabled {
  color: #999;
  opacity: 1;
  cursor: default;
  border-color: #ddd;
  /* 少し薄い三角 */
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjgwIDIyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjgwIDIyMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtvcGFjaXR5OjAuMzt9Cjwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIxMS4zLDQ2aDI1Ny4zYzE3LjgsMCwyNi43LDIxLjUsMTQuMSwzNC4xTDM1NC4xLDIwOC44Yy03LjgsNy44LTIwLjUsNy44LTI4LjMsMEwxOTcuMiw4MC4xQzE4NC42LDY3LjUsMTkzLjUsNDYsMjExLjMsNDZ6Ii8+PC9zdmc+"), linear-gradient(to bottom, #fff, #e2e2e2);
}
select._has-error, ._has-error select {
  color: #E75F37;
  border-color: #E75F37;
  background-color: #fef3f3;
}
select._has-error:disabled, ._has-error select:disabled {
  color: #999;
  border-color: #ddd;
}
@media all and (-ms-high-contrast: none) {
  select {
    /* IEのみ独自スタイル */
    padding: 0 0 0 0;
    background: linear-gradient(to bottom, #fff, #e2e2e2);
  }
  select::-ms-expand {
    width: 1.5rem;
    padding: 0 1rem;
    color: #fff;
    border: 0;
    border-radius: 0 0.4rem 0.4rem 0;
    background-color: #005aa9;
  }
  select:disabled {
    color: #999;
    background: linear-gradient(to bottom, #fff, #e2e2e2);
  }
  select:disabled::-ms-expand {
    background-color: #ccc;
  }
}
@media only screen and (max-width: 767px) {
  select {
    width: 100%;
    height: 12.5vw;
    padding: 0 6.5vw 0 4vw;
    font-size: 4vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    background-size: 7vw auto, auto 100%;
  }
}

/* --------------------------------------------------------------------------------
   textarea      : textarea 要素
   --------------------------------------------------------------------------------
    - 以下のバリエーションを用意しています
        1. エラー時（当該要素、または先祖要素に ._has-error を付加）
        2. disabled 属性
   -------------------------------------------------------------------------------- */
textarea {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.8rem;
  color: #000;
  border: 0.1rem solid #ccc;
  border-radius: 0.5rem;
}
textarea:disabled {
  color: #999;
  border-color: #ddd;
  background-color: #eee;
  opacity: 1;
}
textarea._has-error, ._has-error textarea {
  color: #E75F37;
  border-color: #E75F37;
  background-color: #fef3f3;
}
textarea._has-error:disabled, ._has-error textarea:disabled {
  color: #999;
  border-color: #ddd;
  background-color: #eee;
}
@media only screen and (max-width: 767px) {
  textarea {
    padding: 3vw 4vw;
    font-size: 4.5vw;
    border-width: 0.25vw;
    border-radius: 1vw;
  }
}

.content .new-text-card {
  display: block;
  border: 1px solid #000;
  padding: 10px;
}
.content .new-text-card a {
  text-decoration: none;
}
.content .new-text-card .ntc-img {
  display: inline-block;
  width: 28%;
  position: relative;
  vertical-align: top;
  padding: 5px;
}
.content .new-text-card .ntc-content {
  display: inline-block;
  width: 70%;
  color: #000;
  text-decoration: none;
  padding-left: 10px;
}
.content .new-text-card .ntc-content .ntc-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.2em;
}
.content .new-text-card .ntc-content .ntc-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  margin-bottom: 0;
}
@media screen and (max-width: 600px) {
  .content .new-text-card .ntc-content .ntc-title {
    font-size: 0.8em;
    line-height: 1.5;
  }
  .content .new-text-card .ntc-content .ntc-description {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }
}

.container .product-catch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin-top: 38px !important;
}
@media screen and (max-width: 767px) {
  .container .product-catch {
    display: block;
  }
}
.container .product-catch.-line {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 24px;
}
.container .product-catch-left {
  text-align: center;
}
.container .product-catch-left iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}
.container .product-catch-right {
  padding-left: 20px !important;
}
@media screen and (max-width: 767px) {
  .container .product-catch-right {
    padding: 0 !important;
    margin: 35px -10px 0 !important;
  }
}
.container .product-cta-title {
  text-align: center;
  font-size: 2.3rem !important;
  font-weight: bold !important;
  line-height: 1.5;
  margin-bottom: 10px !important;
}
@media screen and (max-width: 767px) {
  .container .product-cta-title {
    font-size: 2.1rem !important;
  }
}
.container .product-cta-block {
  background: #000 !important;
  padding: 24px !important;
}
.container .product-cta-block-text {
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  line-height: 1.6;
  color: white !important;
}
.container .product-cta-block-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: black;
  width: 100%;
  height: 55px;
  border-radius: 100vh;
  font-size: 2.3rem;
  font-weight: bold;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .container .product-cta-block-btn a {
    font-size: 1.6rem;
  }
}
.container .product-cta-block-btn a svg {
  width: 9px;
  margin-left: 23px;
  transform: translateY(2px);
}
@media screen and (max-width: 767px) {
  .container .product-cta-block-btn a svg {
    margin-left: 12px;
  }
}
.container .product-cta-block-btn a svg path {
  stroke: black;
}
.container .product-cta-block.-water {
  background: #00a2e9 !important;
}
.container .product-cta-block.-water .product-cta-block-btn a {
  color: #00a2e9;
}
.container .product-cta-block.-water .product-cta-block-btn a svg path {
  stroke: #00a2e9;
}
.container .product-cta-block.-blue {
  background: #0052cc !important;
}
.container .product-cta-block.-blue .product-cta-block-btn a {
  color: #0052cc;
}
.container .product-cta-block.-blue .product-cta-block-btn a svg path {
  stroke: #0052cc;
}
.container .product-cta-block.-green {
  background: #6abf4b !important;
}
.container .product-cta-block.-green .product-cta-block-btn a {
  color: #6abf4b;
}
.container .product-cta-block.-green .product-cta-block-btn a svg path {
  stroke: #6abf4b;
}
.container .product-cta-block.-leaf {
  background: #00BFB3 !important;
}
.container .product-cta-block.-leaf .product-cta-block-btn a {
  color: #00BFB3;
}
.container .product-cta-block.-leaf .product-cta-block-btn a svg path {
  stroke: #00BFB3;
}
.container .product-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #228166;
  color: white;
  width: 100%;
  height: 103px;
  border-radius: 100vh;
  font-size: 2.3rem;
  font-weight: bold;
  text-decoration: none;
}
.container .product-cta-btn svg {
  width: 9px;
  margin-left: 23px;
  transform: translateY(2px);
}
@media screen and (max-width: 767px) {
  .container .product-cta-btn svg {
    margin-left: 12px;
  }
}
.container .product-cta-btn svg path {
  stroke: white;
}

/* ================================================================================
   3. ページ固有スタイル
     - 特定のページでしか使われないスタイル
     - 最初ここに定義していたものが、共通スタイルに格上げしたり、その逆もありうる
     - SASSファイル名先頭にページ別のプリフィクスがつく（例: top-*, hoge-*, ... など）
     - プリフィクス以降のSASSファイル名は、共通スタイルと同様、当該要素のクラス名と一致している
       → ファイル名だけでクラス名の重複を防げる
   ================================================================================ */
/* トップページ */
/* --------------------------------------------------------------------------------
   トップ - ビジュアル / body.page-top .top-visual
   -------------------------------------------------------------------------------- */
body.page-top .sp-arrows {
  display: none;
}
body.page-top .custom-arrows-previous {
  position: absolute;
  left: 0;
  top: 0;
  width: 10rem;
  box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.0196078431);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.page-top .custom-arrows-previous::before {
  position: absolute;
  top: calc(50% - 11px);
  right: calc(50% - 11px);
  content: "";
  width: 22px;
  height: 22px;
  border: 8px solid;
  border-color: black transparent transparent black;
  transform: rotate(-45deg);
}
body.page-top .custom-arrows-next {
  position: absolute;
  right: 0;
  top: 0;
  width: 10rem;
  height: 30rem;
  box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.0196078431);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.page-top .custom-arrows-next::before {
  position: absolute;
  top: calc(50% - 11px);
  left: calc(50% - 11px);
  content: "";
  width: 22px;
  height: 22px;
  border: 8px solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
}
body.page-top .slider-pro-wrapper {
  margin: auto;
  position: relative;
}

body.page-top .top-visual {
  /* ビジュアル */
  /* slider arrow */
  /* サムネール */
}
body.page-top .top-visual .sp-next-arrow:after, body.page-top .top-visual .sp-next-arrow:before, body.page-top .top-visual .sp-previous-arrow:after, body.page-top .top-visual .sp-previous-arrow:before {
  background-color: #000000 !important;
}
body.page-top .top-visual .slider-pro-wrapper {
  margin: auto;
}
body.page-top .top-visual .sp-slides {
  width: 154rem;
  height: 50rem;
}
body.page-top .top-visual .sp-slides img {
  width: 154rem;
  height: 50rem;
  margin-top: 0 !important;
}
body.page-top .top-visual .sp-slides a[data-lity]::after {
  display: none;
}
body.page-top .top-visual .sp-slides {
  width: 154rem;
  height: 50rem;
}
body.page-top .top-visual .sp-slides img {
  width: 154rem;
  height: 50rem;
}
body.page-top .top-visual .sp-slides a[data-lity]::after {
  display: none;
}
body.page-top .top-visual .sp-slides .sp-btn {
  position: absolute;
  width: 30rem;
  height: 6rem;
  bottom: 16%;
  z-index: 100;
  left: 20%;
}
body.page-top .top-visual .sp-slides .sp-btn img {
  width: 100%;
  height: 100%;
}
body.page-top .top-visual .sp-bottom-thumbnails .sp-thumbnail-container,
body.page-top .top-visual .sp-top-thumbnails .sp-thumbnail-container {
  margin: 0 0.4rem;
}
body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer {
  margin-top: -5rem;
}
body.page-top .top-visual .sp-thumbnails {
  display: flex;
}
body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
  top: 1rem;
}
body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
  display: none;
}
body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  margin-left: -0.8rem;
  border-bottom: 1rem solid #000;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
}
body.page-top .top-visual .sp-thumbnail {
  width: 100%;
}

body.page-top #TopBanner .custom-arrows-next, body.page-top #TopBanner .custom-arrows-previous, body.page-top #TopBanner .sp-mask {
  height: 50rem !important;
  background: rgba(255, 255, 255, 0.8);
}
body.page-top #CompanyLogo .custom-arrows-next, body.page-top #CompanyLogo .custom-arrows-previous, body.page-top #CompanyLogo .sp-mask {
  height: 30rem !important;
  background: rgb(255, 255, 255);
}

@media only screen and (max-width: 767px) {
  body.page-top .top-visual {
    padding-top: 2vw;
  }
  body.page-top .top-visual .sp-bottom-thumbnails .sp-thumbnail-container,
  body.page-top .top-visual .sp-top-thumbnails .sp-thumbnail-container {
    margin: 0;
  }
  body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer {
    margin-top: 0;
  }
  body.page-top .top-visual .sp-thumbnails {
    display: block;
  }
  body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail {
    top: 10px;
  }
  body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    display: none;
  }
  body.page-top .top-visual .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    margin-left: -8px;
    border-bottom: 10px solid #000;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }
  body.page-top .top-visual .sp-slides {
    width: auto;
    height: auto;
  }
  body.page-top .top-visual .sp-slides img {
    width: 100%;
    height: auto;
  }
  body.page-top .top-visual .sp-slides .sp-btn {
    position: absolute;
    width: 65%;
    height: 6rem;
    bottom: 12%;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
  }
  body.page-top .top-visual .sp-slides .sp-btn img {
    width: 100%;
    height: auto;
  }
  body.page-top .custom-arrows-next, body.page-top .custom-arrows-previous {
    width: 4rem;
  }
  body.page-top #TopBanner .custom-arrows-next, body.page-top #TopBanner .custom-arrows-previous, body.page-top #TopBanner .sp-mask {
    height: 130vw !important;
  }
  body.page-top #CompanyLogo .custom-arrows-next, body.page-top #CompanyLogo .custom-arrows-previous, body.page-top #CompanyLogo .sp-mask {
    height: 12rem !important;
  }
  body.page-top .sp-mask {
    height: 130vw !important;
  }
}
/* --------------------------------------------------------------------------------
   トップ - 4軸ロゴ(画像) / body.page-top .top-four-logo
   -------------------------------------------------------------------------------- */
body.page-top .top-four-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.page-top .top-four-logo ._lead {
  font-weight: bold !important;
  font-size: 1.8rem;
  text-align: center !important;
}
body.page-top .top-four-logo .circle {
  margin-top: 40px;
  border: 5px solid #47B689;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
body.page-top .top-four-logo .circle .cir {
  margin-bottom: 16px;
}
body.page-top .top-four-logo .theme {
  margin-top: 16px;
  font-size: 20px;
  color: #47B689;
  font-weight: bold;
  border-top: 5px solid #47B689;
  background-color: #f2f2f2;
  padding: 10px;
}
body.page-top .top-four-logo .englishtheme {
  font-size: 24px !important;
  font-weight: bold !important;
}
body.page-top .top-four-logo .green {
  margin-right: 352px;
}
body.page-top .top-four-logo .red {
  margin-top: -400px;
  margin-left: 352px;
  border: 5px solid #E75F37;
}
body.page-top .top-four-logo .blue {
  margin-top: -48px;
  margin-right: 352px;
  border: 5px solid #265EB9;
}
body.page-top .top-four-logo .yellow {
  margin-top: -400px;
  margin-left: 352px;
  border: 5px solid #D9CD41;
}
body.page-top .top-four-logo .red1 {
  color: #E75F37;
  border-top: 5px solid #E75F37;
}
body.page-top .top-four-logo .blue1 {
  color: #265EB9;
  border-top: 5px solid #265EB9;
}
body.page-top .top-four-logo .yellow1 {
  color: #D9CD41;
  border-top: 5px solid #D9CD41;
}
body.page-top .top-four-logo .center-circle {
  margin-top: -448px;
  margin-bottom: 300px;
  border: 1px dashed #000;
  background-color: #ffffff;
  border-radius: 50%;
  width: 148px;
  height: 148px;
  padding: 14px;
}
body.page-top .top-four-logo .center-cir {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #F2F2F2;
  border: 2px solid #F2F2F2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --------------------------------------------------------------------------------
   トップ - ニュース、アクティビティ、Twitterのラッパー / body.page-top .top-info
   -------------------------------------------------------------------------------- */
body.page-top .top-info {
  display: flex;
  justify-content: space-between;
  width: 160rem;
  margin: 14.8rem auto 8rem auto;
  padding: 0 3rem;
}
body.page-top .top-info ._news {
  width: 48%;
}
body.page-top .top-info ._column {
  width: 48%;
}
body.page-top .top-info ._sns {
  width: 32%;
}
body.page-top .top-info a._more {
  position: absolute;
  top: 1.5rem;
  font-size: 2rem;
  font-weight: normal;
  text-decoration: none;
}
body.page-top .top-info a._more i.fab {
  font-size: 2.4rem;
  vertical-align: -0.2rem;
}
body.page-top .top-info ._news ._more {
  left: 15rem;
}
body.page-top .top-info ._column ._more {
  left: 23rem;
}
body.page-top .top-info ._sns ._more {
  left: 12rem;
}

@media only screen and (max-width: 1600px) {
  body.page-top .top-info {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  body.page-top .top-info {
    display: block;
    margin: 0;
    padding: 0;
  }
  body.page-top .top-info ._news,
  body.page-top .top-info ._column,
  body.page-top .top-info ._sns {
    width: 100%;
    margin: 10vw 0;
  }
  body.page-top .top-info a._more {
    right: 0;
    top: 1vw;
    font-size: 3.5vw;
  }
  body.page-top .top-info a._more i.fab {
    font-size: 5vw;
    vertical-align: -0.5vw;
  }
  body.page-top .top-info ._news ._more,
  body.page-top .top-info ._column ._more,
  body.page-top .top-info ._sns ._more {
    left: auto;
  }
}
/* --------------------------------------------------------------------------------
   トップ - ニュース一覧 / body.page-top .top-news-list
   -------------------------------------------------------------------------------- */
body.page-top .top-news-list {
  height: 42rem;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 0.4rem;
}
body.page-top .top-news-list ._item {
  position: relative;
  padding: 2rem 2rem 2rem 3.5rem;
  font-size: 1.8rem;
  line-height: 1.777;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
body.page-top .top-news-list ._item._new::after {
  content: "";
  z-index: 1;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 4.5rem;
  height: 4.5rem;
  background: url(/images/common/icon-new.svg) no-repeat 0 0;
  background-size: contain;
}
body.page-top .top-news-list ._item ._date {
  margin-right: 1rem;
  font-weight: bold;
}
body.page-top .top-news-list li:last-child ._item {
  border-bottom: 0;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-news-list {
    height: auto;
    max-height: 100vw;
  }
  body.page-top .top-news-list ._item {
    flex-direction: column;
    align-items: flex-start;
    padding: 3vw 5vw;
    font-size: 3.5vw;
  }
  body.page-top .top-news-list ._item._new::after {
    left: 1vw;
    top: 1vw;
    width: 7.5vw;
    height: 7.5vw;
  }
  body.page-top .top-news-list ._item ._date {
    width: auto;
    padding: 0;
    line-height: 1.3;
    text-align: left;
    border-right: 0;
  }
  body.page-top .top-news-list ._item ._title {
    width: 100%;
    padding: 0;
  }
}
/* --------------------------------------------------------------------------------
   トップ - コラム一覧 / body.page-top .top-column-list
   -------------------------------------------------------------------------------- */
body.page-top .top-column-list {
  height: 42rem;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 0.4rem;
}
body.page-top .top-column-list a._item {
  position: relative;
  display: flex;
  font-size: 1.8rem;
  line-height: 1.777;
  text-decoration: none;
  color: #191919;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}
body.page-top .top-column-list a._item:hover {
  color: #005aa9;
}
body.page-top .top-column-list a._item._new::after {
  content: "";
  z-index: 1;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 5rem;
  height: 5rem;
  background: url(/images/common/icon-new.svg) no-repeat 0 0;
  background-size: contain;
}
body.page-top .top-column-list a._item ._thumb {
  width: 15rem;
  background: #ccc;
  display: flex;
  align-items: center;
}
body.page-top .top-column-list a._item ._thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media all and (-ms-high-contrast: none) {
  body.page-top .top-column-list a._item ._thumb img {
    height: auto; /* IEでは高さ成り行き（下に余白出るがよしとする） */
  }
}
body.page-top .top-column-list a._item ._text {
  width: calc(100% - 15rem);
  padding: 2rem;
}
body.page-top .top-column-list a._item ._date {
  margin-right: 1rem;
  font-weight: bold;
}
body.page-top .top-column-list li:last-child ._item {
  border-bottom: 0;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-column-list {
    height: auto;
    max-height: 100vw;
  }
  body.page-top .top-column-list a._item {
    font-size: 3.5vw;
  }
  body.page-top .top-column-list a._item._new::after {
    left: 1vw;
    top: 1vw;
    width: 7.5vw;
    height: 7.5vw;
  }
  body.page-top .top-column-list a._item ._thumb {
    width: 35vw;
  }
  body.page-top .top-column-list a._item ._text {
    width: calc(100% - 35vw);
    padding: 3vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - Twitterのフレーム / body.page-top .top-twitter-frame
   -------------------------------------------------------------------------------- */
body.page-top .top-twitter-frame {
  position: relative;
  height: 42rem;
  overflow-y: auto;
  border: 1px solid #eee;
  border-top: none;
  background-color: #f2f2f2;
}
body.page-top .top-twitter-frame .twitter-timeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #999;
}
body.page-top .top-twitter-frame .twitter-timeline i.fab {
  margin-bottom: 1.5rem;
  font-size: 7.2rem;
  color: #999;
}
body.page-top .top-twitter-frame ._loading {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 3.2rem;
  color: #aaa;
  background-color: #f2f2f2;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-twitter-frame {
    height: 100vw;
  }
  body.page-top .top-twitter-frame ._loading {
    font-size: 10vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - ギャラリー一覧 / body.page-top .top-gallery-list
   -------------------------------------------------------------------------------- */
body.page-top .top-gallery-list {
  display: flex;
}
body.page-top .top-gallery-list ._item-wrapper {
  position: relative;
  width: 52rem;
  height: 29.2rem;
  margin: 0 0.5rem;
  overflow: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
body.page-top .top-gallery-list ._item-wrapper::after {
  content: "";
  z-index: 1;
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 8.8rem;
  height: 3.4rem;
  opacity: 0.7;
  background: url(/images/common/logo-aslead-white.svg) no-repeat center;
  background-size: 100%;
}
body.page-top .top-gallery-list ._item-wrapper > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 3rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.777;
  text-align: left;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  border: 0;
  outline: 0;
  border-radius: 0.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
body.page-top .top-gallery-list ._item-wrapper > a._item-1 {
  background-image: url(/images/top/gallery-thumb-1.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-2 {
  background-image: url(/images/top/gallery-thumb-2.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-3 {
  background-image: url(/images/top/gallery-thumb-3.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-4 {
  background-image: url(/images/top/gallery-thumb-4.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-5 {
  background-image: url(/images/top/gallery-thumb-5.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-6 {
  background-image: url(/images/top/gallery-thumb-6.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-7 {
  background-image: url(/images/top/gallery-thumb-7.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-8 {
  background-image: url(/images/top/gallery-thumb-8.png);
}
body.page-top .top-gallery-list ._item-wrapper > a._item-9 {
  background-image: url(/images/top/gallery-thumb-9.png);
}
body.page-top .top-gallery-list ._item-wrapper > a::after {
  content: "";
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 70%);
}
body.page-top .top-gallery-list ._item-wrapper > a ._play {
  content: "";
  z-index: 1;
  position: absolute;
  left: 3rem;
  top: 3rem;
  width: 4.8rem;
  height: 4.8rem;
  background: url(/images/common/icon-play.svg) no-repeat center;
  background-size: contain;
  transform-origin: 50% 50%;
}
body.page-top .top-gallery-list ._item-wrapper > a ._num,
body.page-top .top-gallery-list ._item-wrapper > a ._title,
body.page-top .top-gallery-list ._item-wrapper > a small {
  z-index: 1;
  position: relative;
  display: block;
}
body.page-top .top-gallery-list ._item-wrapper > a ._title {
  margin: 0.5rem 0;
  font-size: 2.4rem;
  line-height: 1.4;
}
body.page-top .top-gallery-list ._item-wrapper > a:hover {
  transform: scale(1.05);
}
body.page-top .top-gallery-list ._item-wrapper > a:hover::after {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.8) 70%);
}
body.page-top .top-gallery-list ._item-wrapper > a:hover ._play {
  animation: anim-scale 0.5s ease-out;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-gallery-list {
    display: block;
    margin: 0;
    padding: 0;
  }
  body.page-top .top-gallery-list ._item-wrapper {
    width: 100%;
    min-height: 40vw;
    margin: 5vw 0;
  }
  body.page-top .top-gallery-list ._item-wrapper::after {
    display: none;
  }
  body.page-top .top-gallery-list ._item-wrapper > a {
    padding: 5vw;
    font-size: 3vw;
    border-radius: 1vw;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._play {
    left: auto;
    right: 5vw;
    top: 5vw;
    width: 10vw;
    height: 10vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._num {
    display: none;
  }
  body.page-top .top-gallery-list ._item-wrapper > a ._title {
    margin: 1vw 0;
    font-size: 4vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a small {
    font-size: 3vw;
  }
  body.page-top .top-gallery-list ._item-wrapper > a small br {
    display: none;
  }
}
@keyframes anim-scale {
  0% {
    transform: scale(0.4, 0.4);
  }
  40% {
    transform: scale(1.2, 1.2);
  }
  60% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* --------------------------------------------------------------------------------
   トップ - ギャラリー一覧 / body.page-top .top-company-list
   -------------------------------------------------------------------------------- */
body.page-top .top-company-list {
  /* スライドする要素 */
  padding: 0 6px;
  /* スライドレールの枠 */
  /* content4つをまとめたスライドブロック */
}
body.page-top .top-company-list .content {
  width: 11.9rem;
  height: 7.28rem;
  padding-bottom: 0;
}
body.page-top .top-company-list .wrap {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  background-color: white;
}
body.page-top .top-company-list .wrap li {
  display: flex;
  align-items: center;
}
body.page-top .top-company-list .wrap img {
  height: auto;
  width: 100%;
}
body.page-top .top-company-list .slideshow {
  display: flex;
}
@media screen and (max-width: 767px) {
  body.page-top .top-company-list .content {
    width: 3.9rem;
    padding: 0.2rem;
  }
  body.page-top .top-company-list .wrap {
    height: 4rem;
  }
}
@media screen and (min-width: 1600px) {
  body.page-top .top-company-list .content {
    width: 14rem;
  }
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* --------------------------------------------------------------------------------
   トップ - 導入実績
   -------------------------------------------------------------------------------- */
body.page-top .top-companies {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media only screen and (max-width: 767px) {
  body.page-top .top-companies {
    grid-template-columns: repeat(3, 1fr);
  }
}
body.page-top .top-companies-logo {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
@media only screen and (max-width: 767px) {
  body.page-top .top-companies-logo {
    padding: 0 10px;
  }
}

/* --------------------------------------------------------------------------------
   トップ - asleadについて / body.page-top .top-about
   -------------------------------------------------------------------------------- */
body.page-top .top-about {
  /*margin: 15rem auto 8rem;*/
  margin-top: 80px;
  /*border-top: .1rem solid #e2e2e2;*/
  background-color: rgba(255, 255, 255, 0.65);
  /*
    header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      padding-right: 10rem;
      text-align: center;

      ._title {
        position: relative;

        img {
          width: 47.4rem;
          margin-bottom: 7rem;
        }
      }

      ._lead {
        position: relative;
        font-weight: bold;
        line-height: 2.3;
        text-align: center;
      }
    }
  */
}
body.page-top .top-about ._inner {
  display: flex;
  max-width: 160rem;
  margin: 0 auto;
  padding: 0 3rem;
}
body.page-top .top-about ._description {
  display: flex;
  justify-content: space-between;
  width: 160rem;
}
body.page-top .top-about ._description h3 {
  font-size: 2.4rem;
}
body.page-top .top-about ._description p {
  margin-bottom: 1rem;
}
body.page-top .top-about ._description img {
  width: 66rem;
  height: 22.4rem;
  margin-left: -1.5rem;
}
body.page-top .top-about ._description ._kadai {
  margin-bottom: 3rem;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-about {
    margin-top: -8rem;
    /*
    header {
      display: block;
      width: 100%;
      padding-right: 0;

      ._title {
        img {
          width: 50vw;
          margin-bottom: 10vw;
        }
      }
    }
    */
  }
  body.page-top .top-about ._inner {
    padding: 0;
  }
  body.page-top .top-about ._description {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  body.page-top .top-about ._description h3 {
    margin-bottom: 4vw;
    font-size: 5vw;
    text-align: center;
  }
  body.page-top .top-about ._description p {
    margin-bottom: 5vw;
  }
  body.page-top .top-about ._description p br {
    display: none;
  }
  body.page-top .top-about ._description img {
    margin-left: 0;
  }
  body.page-top .top-about ._description ._kadai {
    margin-bottom: 5vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - セクション / body.page-top .top-section
   -------------------------------------------------------------------------------- */
body.page-top .top-section {
  width: 160rem;
  margin: 8rem auto;
  padding: 0 3rem;
}
body.page-top .top-section ._btn-top {
  margin-top: 6rem;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: bold;
}
body.page-top .top-section .pc-only {
  display: block;
}
body.page-top .top-section .mobile-only {
  display: none;
}

.bg-65 {
  background-color: rgba(255, 255, 255, 0.65);
  width: auto !important;
}
.bg-65 .bg {
  max-width: 160rem;
  padding: 0 3rem;
  margin: 8rem auto;
}

@media only screen and (max-width: 1600px) {
  body.page-top .top-section {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  body.page-top .top-section {
    width: 100%;
    margin: 0;
    padding: 10vw 0 20vw;
    border-top: 1px solid #ccc;
  }
  body.page-top .top-section .bg {
    margin-bottom: -10rem;
    padding: 0;
  }
  body.page-top .top-section ._btn-top {
    margin-top: 8vw;
    margin-bottom: 2vw;
    font-size: 3.5vw;
  }
  body.page-top .top-section .pc-only {
    display: none;
  }
  body.page-top .top-section .mobile-only {
    display: block;
  }
}
/* --------------------------------------------------------------------------------
   トップ - セクションタイトル / body.page-top .top-section-title
   -------------------------------------------------------------------------------- */
body.page-top .top-section-title {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4rem;
}
body.page-top .top-section-title ._title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7.4rem;
  margin-right: 5rem;
  padding-right: 5rem;
  border-right: 0.1rem solid rgba(0, 0, 0, 0.2);
}
body.page-top .top-section-title ._title small {
  font-family: "Lato";
  font-size: 6.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
}
body.page-top .top-section-title ._title em {
  margin-left: 0.3rem;
  margin-top: 0.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
}
body.page-top .top-section-title ._lead {
  font-weight: bold;
  line-height: 1.777;
}
body.page-top .top-section-title._small {
  margin-bottom: 2rem;
}
body.page-top .top-section-title._small ._title {
  border: 0;
}
body.page-top .top-section-title._small ._title small {
  font-size: 4.4rem;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-section-title {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 5vw;
  }
  body.page-top .top-section-title ._title {
    height: auto;
    border-right: 0;
  }
  body.page-top .top-section-title ._title small {
    font-size: 8vw;
  }
  body.page-top .top-section-title ._title em {
    margin-top: 1.25vw;
    font-size: 3.5vw;
  }
  body.page-top .top-section-title ._lead {
    margin-top: 4vw;
  }
  body.page-top .top-section-title a {
    position: absolute;
    right: 0;
  }
  body.page-top .top-section-title._small {
    margin-bottom: 3vw;
  }
  body.page-top .top-section-title._small ._title small {
    font-size: 8vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - セクションタイトル（大） / body.page-top .top-section-title-large
   -------------------------------------------------------------------------------- */
body.page-top .top-section-title-large {
  margin-bottom: 6rem;
}
body.page-top .top-section-title-large ._title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
body.page-top .top-section-title-large ._title small {
  margin-right: -0.1em; /* 右寄せの Products の右端を揃える */
  font-family: "Lato";
  font-size: 7.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
}
body.page-top .top-section-title-large ._title em {
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
}
body.page-top .top-section-title-large ._lead {
  font-size: 1.8rem;
  font-weight: bold;
}
body.page-top .top-section-title-large._right {
  text-align: right;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-section-title-large {
    margin-bottom: 7.5vw;
  }
  body.page-top .top-section-title-large ._title {
    margin-bottom: 7.5vw;
  }
  body.page-top .top-section-title-large ._title small {
    font-size: 10vw;
  }
  body.page-top .top-section-title-large ._title em {
    margin-left: 0;
    margin-top: 1vw;
    font-size: 4.5vw;
  }
  body.page-top .top-section-title-large ._lead {
    font-size: 3.5vw;
  }
  body.page-top .top-section-title-large ._lead br {
    display: none;
  }
  body.page-top .top-section-title-large._right {
    text-align: left;
  }
}
/* --------------------------------------------------------------------------------
   トップ - ソリューションリスト / body.page-top .top-solution-list
   -------------------------------------------------------------------------------- */
body.page-top .top-solution-list {
  display: flex;
  justify-content: space-between;
}
body.page-top .top-solution-list > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24%;
  padding: 13rem 3rem 3rem;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15);
}
body.page-top .top-solution-list > li h3 {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 13rem;
  width: 100%;
  padding: 0 3rem;
  border-bottom: 0.1rem solid #e2e2e2;
}
body.page-top .top-solution-list > li h3 img {
  height: 4.4rem;
}
body.page-top .top-solution-list > li h4 {
  flex-grow: 0;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3rem;
}
body.page-top .top-solution-list > li p {
  flex-grow: 0;
  font-size: 1.6rem;
  font-weight: bold;
}
body.page-top .top-solution-list > li ._products {
  flex-grow: 0;
  margin-top: 2rem;
}
body.page-top .top-solution-list > li ._products li {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
  line-height: 4rem;
  text-align: center;
  color: #378C69;
  background-color: rgba(71, 182, 137, 0.2);
}
body.page-top .top-solution-list > li ._products li a {
  color: #378c69;
  text-decoration: none;
}
body.page-top .top-solution-list > li ._products li a::after {
  content: "\f105";
  padding-left: 0.8rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  line-height: 1;
}
body.page-top .top-solution-list > li ._products li._gray {
  /* オレンジのソリューションでも簡易にグレーにするため !important 使う */
  color: #191919 !important;
  background-color: #e6e6e6 !important;
}
body.page-top .top-solution-list > li ._btn {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  margin-top: 3rem;
}
body.page-top .top-solution-list > li ._btn .btn {
  width: 100%;
}
body.page-top .top-solution-list > li:first-child h3 img {
  height: 6.3rem;
}
body.page-top .top-solution-list > li:nth-child(2) ._products li, body.page-top .top-solution-list > li:nth-child(4) ._products li {
  color: #E75F37;
  background-color: rgba(231, 95, 55, 0.2);
}
body.page-top .top-solution-list > li:nth-child(2) ._products li a, body.page-top .top-solution-list > li:nth-child(4) ._products li a {
  color: #E75F37;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-solution-list {
    display: block;
  }
  body.page-top .top-solution-list > li {
    width: 100%;
    margin: 5vw 0;
    padding: 5vw;
    border-radius: 1.066vw;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  body.page-top .top-solution-list > li h3 {
    position: static;
    justify-content: center;
    height: auto;
    padding: 2vw 0 6vw;
  }
  body.page-top .top-solution-list > li h3 img {
    height: 7.5vw;
  }
  body.page-top .top-solution-list > li h4 {
    font-size: 4vw;
    margin-top: 3vw;
  }
  body.page-top .top-solution-list > li p {
    font-size: 3.5vw;
  }
  body.page-top .top-solution-list > li ._products {
    margin-top: 3vw;
  }
  body.page-top .top-solution-list > li ._products li {
    margin-top: 1vw;
    font-size: 3.5vw;
    line-height: 9vw;
  }
  body.page-top .top-solution-list > li ._btn {
    margin-top: 5vw;
  }
  body.page-top .top-solution-list > li:first-child h3 img {
    height: 10vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - サポート製品リスト / body.page-top .top-product-list
   -------------------------------------------------------------------------------- */
body.page-top .top-product-list {
  display: flex;
  justify-content: space-between;
}
body.page-top .top-product-list > li {
  position: relative;
  width: 49%;
  padding: 0 0 3rem;
  text-align: center;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}
body.page-top .top-product-list > li h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 15rem;
  width: 100%;
  padding-top: 1rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  border-bottom: 0.1rem solid #e2e2e2;
}
body.page-top .top-product-list > li h3 ._ja {
  display: block;
  font-size: 1.8rem;
}
body.page-top .top-product-list > li h3 ._en {
  display: block;
  font-size: 4.2rem;
}
body.page-top .top-product-list > li p {
  margin: 3rem 0 5rem;
  font-size: 1.6rem;
  font-weight: bold;
}
body.page-top .top-product-list > li ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0 5rem;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
body.page-top .top-product-list > li ul li {
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
}
body.page-top .top-product-list > li ul li img {
  height: auto;
  width: 100%;
}
body.page-top .top-product-list > li ul li a img:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-product-list {
    flex-direction: column;
  }
  body.page-top .top-product-list > li {
    width: 100%;
    margin-bottom: 5vw;
    padding: 5vw;
    border-radius: 1vw;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  body.page-top .top-product-list > li h3 {
    height: auto;
    padding: 0 0 4vw;
  }
  body.page-top .top-product-list > li h3 ._ja {
    font-size: 3.5vw;
  }
  body.page-top .top-product-list > li h3 ._en {
    font-size: 7vw;
  }
  body.page-top .top-product-list > li p {
    margin: 5vw 0;
    font-size: 3.5vw;
    font-weight: bold;
  }
  body.page-top .top-product-list > li p br {
    display: none;
  }
  body.page-top .top-product-list > li ul {
    justify-content: space-around;
    width: 100% !important;
    padding: 0 3vw;
  }
  body.page-top .top-product-list > li ul li {
    padding: 0 1vw;
    margin-bottom: 5vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - サービスリスト / body.page-top .top-service-list
   -------------------------------------------------------------------------------- */
body.page-top .top-service-list {
  display: flex;
  justify-content: space-between;
}
body.page-top .top-service-list > li {
  position: relative;
  width: 32%;
  padding: 0 0 3rem;
  text-align: center;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}
body.page-top .top-service-list > li h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10rem;
  width: 100%;
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  border-bottom: 0.1rem solid #e2e2e2;
}
body.page-top .top-service-list > li p {
  margin: 3rem 0 5rem;
  font-size: 2rem;
  font-weight: bold;
}
body.page-top .top-service-list > li ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0 3rem;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
body.page-top .top-service-list > li ul li {
  width: 33.333%;
  margin-bottom: 3rem;
}
body.page-top .top-service-list > li ul li ._img {
  display: flex;
  align-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 0.5rem;
}
body.page-top .top-service-list > li ul li ._img img {
  max-width: 100%;
  max-height: 100%;
}
body.page-top .top-service-list > li:nth-child(2) ul, body.page-top .top-service-list > li:nth-child(3) ul {
  width: 80%;
}
body.page-top .top-service-list > li:nth-child(2) ul li, body.page-top .top-service-list > li:nth-child(3) ul li {
  width: 50%;
}

@media only screen and (max-width: 767px) {
  body.page-top .top-service-list {
    flex-direction: column;
  }
  body.page-top .top-service-list > li {
    width: 100%;
    margin-bottom: 5vw;
    padding: 5vw;
    border-radius: 1vw;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1.25vw 1.25vw rgba(0, 0, 0, 0.15);
  }
  body.page-top .top-service-list > li h3 {
    height: auto;
    padding-bottom: 4vw;
    font-size: 4.5vw;
  }
  body.page-top .top-service-list > li p {
    margin: 5vw 0 8vw;
    font-size: 3.5vw;
  }
  body.page-top .top-service-list > li ul {
    width: 100% !important;
    padding: 0;
    font-size: 3vw;
  }
  body.page-top .top-service-list > li ul li {
    width: 33.333% !important;
    margin-bottom: 3vw;
  }
  body.page-top .top-service-list > li ul li ._img {
    width: 12.5vw;
    height: 12.5vw;
    margin: 0 auto 0.125vw;
  }
}
/* --------------------------------------------------------------------------------
   トップ - キャンペーンバナー / body.page-top .top-campaign
   -------------------------------------------------------------------------------- */
body.page-top .top-campaign {
  text-align: center;
}
body.page-top .top-campaign img {
  width: 65rem;
  height: auto;
}
body.page-top .top-campaign._ribon img {
  width: 4rem;
}
body.page-top .top-campaign._ribon a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  height: 6rem;
  line-height: 1.5;
  text-decoration: none;
  color: #fff;
  background-color: #DC500B;
  background-image: linear-gradient(to right, #DC500B 0, rgb(171.4285714286, 62.3376623377, 8.5714285714) 100%);
}
body.page-top .top-campaign._ribon a em {
  margin: 0 0.3em;
  font-size: 1.4em;
  vertical-align: -0.2rem;
  color: #ff0;
}
@media only screen and (max-width: 767px) {
  body.page-top .top-campaign._ribon img {
    width: 4rem;
    margin-bottom: 1rem;
  }
  body.page-top .top-campaign._ribon a {
    display: block;
    height: auto;
    padding: 2rem 0;
    font-size: 1.4rem;
  }
  body.page-top .top-campaign._ribon a em {
    margin: 0 0.3em;
    font-size: 1.4em;
    vertical-align: -0.2rem;
    color: #ff0;
  }
}

/* ソリューション / aslead Remote */
/* --------------------------------------------------------------------------------
   ソリューション - aslead Remote / body.page-solution._detail._aslead-remote
   -------------------------------------------------------------------------------- */
body.page-solution._detail._aslead-remote main.content {
  /* 料金テーブル共通 */
  /* シミュレーション */
}
body.page-solution._detail._aslead-remote main.content .solution-title {
  margin: 6rem 0 12rem;
  line-height: 1.7;
  text-align: center;
}
body.page-solution._detail._aslead-remote main.content .solution-title span {
  display: block;
  font-size: 2rem;
  color: #228166;
}
body.page-solution._detail._aslead-remote main.content .solution-title em {
  display: block;
  font-family: "Lato";
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.2;
}
body.page-solution._detail._aslead-remote main.content .price-table th,
body.page-solution._detail._aslead-remote main.content .price-table td {
  width: auto !important;
  text-align: center !important;
  position: relative !important;
  padding: 1.5em 0.8em !important;
}
body.page-solution._detail._aslead-remote main.content .price-table thead th {
  color: #fff !important;
  border-color: #228166 !important;
  border-color: #fff !important;
  background-color: #228166 !important;
}
body.page-solution._detail._aslead-remote main.content .price-table thead th small {
  color: #fff !important;
}
body.page-solution._detail._aslead-remote main.content .simulationFormula {
  display: flex;
  justify-content: space-evenly;
}
body.page-solution._detail._aslead-remote main.content .simulationFormula .text {
  display: inline-block;
  position: relative;
  width: 20%;
}
body.page-solution._detail._aslead-remote main.content .plus::after,
body.page-solution._detail._aslead-remote main.content .times::after,
body.page-solution._detail._aslead-remote main.content .equals::after {
  position: absolute;
  right: -1rem;
  width: 2rem;
  height: 2rem;
}
body.page-solution._detail._aslead-remote main.content .plus::after {
  content: "＋";
}
body.page-solution._detail._aslead-remote main.content .times::after {
  content: "×";
}
body.page-solution._detail._aslead-remote main.content .equals::after {
  content: "＝";
}
body.page-solution._detail._aslead-remote main.content .txt-green {
  color: #228166;
}
@media only screen and (max-width: 767px) {
  body.page-solution._detail._aslead-remote main.content .solution-title {
    margin: 10rem 0 6rem;
  }
  body.page-solution._detail._aslead-remote main.content .solution-title em {
    font-size: 4rem;
  }
  body.page-solution._detail._aslead-remote main.content .solution-title span {
    font-size: 1.6rem;
  }
}

/* ソリューション / プライバシーガバナンス構築支援サービス */
/* --------------------------------------------------------------------------------
   ソリューション - プライバシーガバナンス構築支援サービス / body.page-solution._detail._privacy-gov
   -------------------------------------------------------------------------------- */
body.page-solution._detail._privacy-gov main.content .solution-title em {
  font-size: 4.4rem;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  body.page-solution._detail._privacy-gov main.content .solution-title em {
    font-size: 3.2rem;
  }
}
body.page-solution._detail._privacy-gov main.content .solution-text {
  font-size: 1.5rem;
  line-height: 2.4rem;
  text-align: center;
  color: #474747;
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  body.page-solution._detail._privacy-gov main.content .solution-text {
    text-align: left;
  }
}

/* 導入事例 */
/* --------------------------------------------------------------------------------
   導入事例 - 企業プロフィール / body.case._detail .case-company-profile
   -------------------------------------------------------------------------------- */
body.case._detail .case-company-profile {
  display: flex;
}
body.case._detail .case-company-profile ._logo {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  padding: 3rem;
  border: 1px solid #ddd;
  border-right-width: 0;
}
body.case._detail .case-company-profile table th {
  width: 15rem;
  white-space: nowrap;
}
body.case._detail .case-company-profile ._img {
  text-align: center;
  border: 1px solid #ddd;
  border-left-width: 0;
}
@media only screen and (max-width: 767px) {
  body.case._detail .case-company-profile {
    display: block;
  }
  body.case._detail .case-company-profile ._logo {
    border-width: 1px 1px 0;
  }
  body.case._detail .case-company-profile table th {
    width: auto;
  }
  body.case._detail .case-company-profile ._img {
    border-width: 0 1px 1px;
  }
}

/* お問い合わせ, ホワイトペーパー */
/* --------------------------------------------------------------------------------
   ホワイトペーパー用バナー
   -------------------------------------------------------------------------------- */
.whitepaperBanner {
  width: 100%;
  border: 1px solid #ddd;
  margin: 80px auto 0 !important;
  display: block;
  line-height: 0;
}
.whitepaperBanner.bannerMd {
  max-width: 760px;
}

.whitepaper-box {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  max-width: 1024px !important;
  margin: 80px auto 0 !important;
}
.whitepaper-box a {
  display: block !important;
  width: calc(50% - 10px) !important;
}

@media only screen and (max-width: 767px) {
  .whitepaperBanner.bannerLg {
    width: 100%;
  }
  .whitepaperBanner.bannerMd {
    width: calc(100% - 20px);
  }
  .whitepaper-box {
    display: block;
    margin-bottom: 40px;
  }
  .whitepaper-box a {
    width: 100%;
    margin: 10px auto;
  }
}
/* --------------------------------------------------------------------------------
   お問い合わせ     / body.page-inquery
   ホワイトペーパー / body.page-whitepaper
   -------------------------------------------------------------------------------- */
body.page-inquery,
body.page-whitepaper {
  /* IE向けの注意書き */
}
body.page-inquery ._ie-alert,
body.page-whitepaper ._ie-alert {
  display: none;
  width: 80%;
  margin: 30rem auto;
  padding: 12rem 8rem;
  font-size: 3.2rem;
  color: #E75F37;
  border: 2px solid #E75F37;
}
body.page-inquery .inquiry-form table th,
body.page-inquery .inquiry-form table td,
body.page-inquery .whitepaper-form table th,
body.page-inquery .whitepaper-form table td,
body.page-whitepaper .inquiry-form table th,
body.page-whitepaper .inquiry-form table td,
body.page-whitepaper .whitepaper-form table th,
body.page-whitepaper .whitepaper-form table td {
  padding: 2rem 0 4rem;
  border: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
body.page-inquery .inquiry-form table th,
body.page-inquery .whitepaper-form table th,
body.page-whitepaper .inquiry-form table th,
body.page-whitepaper .whitepaper-form table th {
  width: 35%;
  padding-right: 2rem;
  text-align: left;
  vertical-align: top;
  line-height: 5rem; /* フォームのテキストフィールドの高さと合わせる */
  border-color: #999;
  background-color: transparent;
}
body.page-inquery .inquiry-form label._has-error,
body.page-inquery .whitepaper-form label._has-error,
body.page-whitepaper .inquiry-form label._has-error,
body.page-whitepaper .whitepaper-form label._has-error {
  display: block;
  font-weight: bold;
}
body.page-inquery .inquiry-form ._pref-city,
body.page-inquery .whitepaper-form ._pref-city,
body.page-whitepaper .inquiry-form ._pref-city,
body.page-whitepaper .whitepaper-form ._pref-city {
  display: flex;
  margin: 1.5rem 0;
}
body.page-inquery .inquiry-form ._privacy th,
body.page-inquery .inquiry-form ._privacy td,
body.page-inquery .whitepaper-form ._privacy th,
body.page-inquery .whitepaper-form ._privacy td,
body.page-whitepaper .inquiry-form ._privacy th,
body.page-whitepaper .inquiry-form ._privacy td,
body.page-whitepaper .whitepaper-form ._privacy th,
body.page-whitepaper .whitepaper-form ._privacy td {
  border: 0;
}
body.page-inquery .inquiry-form ._privacy th ._has-error,
body.page-inquery .inquiry-form ._privacy td ._has-error,
body.page-inquery .whitepaper-form ._privacy th ._has-error,
body.page-inquery .whitepaper-form ._privacy td ._has-error,
body.page-whitepaper .inquiry-form ._privacy th ._has-error,
body.page-whitepaper .inquiry-form ._privacy td ._has-error,
body.page-whitepaper .whitepaper-form ._privacy th ._has-error,
body.page-whitepaper .whitepaper-form ._privacy td ._has-error {
  text-align: center;
}
body.page-inquery .inquiry-form ._required,
body.page-inquery .whitepaper-form ._required,
body.page-whitepaper .inquiry-form ._required,
body.page-whitepaper .whitepaper-form ._required {
  margin-top: 1.3rem;
  padding: 0 1rem;
  float: right;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 2.4rem;
  color: #fff;
  border-radius: 0.3rem;
  background-color: #E75F37;
}
body.page-inquery .inquiry-form ._has-error,
body.page-inquery .whitepaper-form ._has-error,
body.page-whitepaper .inquiry-form ._has-error,
body.page-whitepaper .whitepaper-form ._has-error {
  color: #E75F37;
}
body.page-inquery .btns,
body.page-whitepaper .btns {
  text-align: center;
}
body.page-inquery ._thanks-msg,
body.page-whitepaper ._thanks-msg {
  margin: 3em 0 2em;
  text-align: center;
  font-size: 2.4rem;
}
body.page-inquery ._thanks-adr,
body.page-whitepaper ._thanks-adr {
  max-width: 50rem;
  margin: 0 auto 5em;
  padding: 2em;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}
body.page-inquery ._thanks-adr dt,
body.page-inquery ._thanks-adr dd,
body.page-whitepaper ._thanks-adr dt,
body.page-whitepaper ._thanks-adr dd {
  display: inline;
}

@media only screen and (max-width: 767px) {
  body.page-inquery,
  body.page-whitepaper {
    /* IE向けの注意書き */
  }
  body.page-inquery ._ie-alert,
  body.page-whitepaper ._ie-alert {
    margin: 0 auto 20rem;
    padding: 3rem;
    font-size: 2.4rem;
  }
  body.page-inquery ._ie-alert br,
  body.page-whitepaper ._ie-alert br {
    display: none;
  }
  body.page-inquery #pageTitle h1,
  body.page-whitepaper #pageTitle h1 {
    font-size: 10vw;
    font-weight: normal;
  }
  body.page-inquery #pageTitle h1 span,
  body.page-whitepaper #pageTitle h1 span {
    font-size: 4vw;
  }
  body.page-inquery .mainText,
  body.page-whitepaper .mainText {
    font-size: 4vw;
  }
  body.page-inquery h2.sectionTitle,
  body.page-whitepaper h2.sectionTitle {
    margin-top: 2em;
    font-size: 7vw;
  }
  body.page-inquery .inquiry-form table tr,
  body.page-inquery .whitepaper-form table tr,
  body.page-whitepaper .inquiry-form table tr,
  body.page-whitepaper .whitepaper-form table tr {
    display: block;
    padding: 1em 0 2em;
    border-top: 1px solid #ddd;
  }
  body.page-inquery .inquiry-form table th,
  body.page-inquery .inquiry-form table td,
  body.page-inquery .whitepaper-form table th,
  body.page-inquery .whitepaper-form table td,
  body.page-whitepaper .inquiry-form table th,
  body.page-whitepaper .inquiry-form table td,
  body.page-whitepaper .whitepaper-form table th,
  body.page-whitepaper .whitepaper-form table td {
    display: block;
    padding: 1vw 0;
    border: 0;
  }
  body.page-inquery .inquiry-form table th,
  body.page-inquery .whitepaper-form table th,
  body.page-whitepaper .inquiry-form table th,
  body.page-whitepaper .whitepaper-form table th {
    width: 100%;
    padding-right: 0;
    font-size: 4.5vw;
    line-height: 1.5;
  }
  body.page-inquery .inquiry-form ._pref-city,
  body.page-inquery .whitepaper-form ._pref-city,
  body.page-whitepaper .inquiry-form ._pref-city,
  body.page-whitepaper .whitepaper-form ._pref-city {
    margin: 3vw 0;
  }
  body.page-inquery .inquiry-form .checkbox + br,
  body.page-inquery .inquiry-form .radio + br,
  body.page-inquery .whitepaper-form .checkbox + br,
  body.page-inquery .whitepaper-form .radio + br,
  body.page-whitepaper .inquiry-form .checkbox + br,
  body.page-whitepaper .inquiry-form .radio + br,
  body.page-whitepaper .whitepaper-form .checkbox + br,
  body.page-whitepaper .whitepaper-form .radio + br {
    display: none;
  }
  body.page-inquery .inquiry-form textarea,
  body.page-inquery .whitepaper-form textarea,
  body.page-whitepaper .inquiry-form textarea,
  body.page-whitepaper .whitepaper-form textarea {
    height: 250px;
  }
  body.page-inquery .inquiry-form ._required,
  body.page-inquery .whitepaper-form ._required,
  body.page-whitepaper .inquiry-form ._required,
  body.page-whitepaper .whitepaper-form ._required {
    margin-top: 1vw;
    padding: 0 2vw;
    font-size: 3.5vw;
    line-height: 5vw;
    border-radius: 1vw;
  }
  body.page-inquery .btns,
  body.page-whitepaper .btns {
    padding-bottom: 8em;
  }
  body.page-inquery ._thanks-msg,
  body.page-whitepaper ._thanks-msg {
    margin: 0 2em 2em;
    font-size: 4vw;
    text-align: left;
  }
  body.page-inquery ._thanks-adr,
  body.page-whitepaper ._thanks-adr {
    max-width: 100%;
    margin: 0 2em 5em;
    font-size: 4vw;
    border-radius: 2vw;
  }
  body.page-inquery ._thanks-adr dt,
  body.page-inquery ._thanks-adr dd,
  body.page-whitepaper ._thanks-adr dt,
  body.page-whitepaper ._thanks-adr dd {
    display: inline;
  }
}
/* アトラシアン移行 */
.atlassian_head_bnr {
  background: #0046C4;
  line-height: 1;
  padding: 13px 3rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr {
    padding: 12px 45px 12px 10px;
    margin-left: -5vw;
    margin-right: -5vw;
    position: relative;
  }
}
.atlassian_head_bnr_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner {
    flex-wrap: wrap;
  }
}
.atlassian_head_bnr_inner_img1 {
  margin-right: 0.8rem;
  width: 22.5rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_img1 {
    width: 155px;
    margin-right: 6px;
  }
}
.atlassian_head_bnr_inner_text1 {
  color: white;
  font-size: 2.2rem;
  font-weight: 900;
  margin-right: 1rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_text1 {
    font-size: 16px;
    margin-right: 0;
  }
}
.atlassian_head_bnr_inner_text2 {
  font-size: 2rem;
  font-weight: 900;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_text2 {
    font-size: 14px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.19);
    margin-top: 6px;
    padding-top: 6px;
    text-align: center;
  }
}
.atlassian_head_bnr_inner_btn {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0046C4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 3.4rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 1.4rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_btn {
    width: 29px;
    height: 29px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    position: absolute;
    top: 29px;
    right: 10px;
    margin: auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_btn span {
    display: none;
  }
}
.atlassian_head_bnr_inner_btn img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_head_bnr_inner_btn img {
    margin-left: 0;
    transform: none;
    width: 6px;
  }
}

#mainContents .atlassian_index_bnr {
  background: #00879d;
  padding: 1.1rem 2rem 1.3rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr {
    padding: 15px 10px 20px;
  }
}
#mainContents .atlassian_index_bnr_text1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_text1 {
    flex-direction: column;
    font-size: 31px;
  }
}
#mainContents .atlassian_index_bnr_text1 img {
  width: 20.5rem;
  height: auto;
  margin-right: 1.4rem;
  transform: translateY(0.5rem);
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_text1 img {
    width: 325px;
    margin-right: 0;
  }
}
#mainContents .atlassian_index_bnr_textarea {
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.19);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea {
    flex-direction: column;
  }
}
#mainContents .atlassian_index_bnr_textarea_text1 {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_text1 {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
#mainContents .atlassian_index_bnr_textarea_text1 small {
  color: #ffeb00;
  font-size: 1.4rem;
  margin-right: 0.5rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_text1 small {
    font-size: 25px;
    margin-right: 0;
  }
}
#mainContents .atlassian_index_bnr_textarea_text2 {
  font-size: 1.4rem;
  color: white;
  font-weight: 900;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_text2 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_btn {
    width: 100%;
    margin-top: 15px;
  }
}
#mainContents .atlassian_index_bnr_textarea_btn a {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 4.3rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 0.7rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_btn a {
    width: 100%;
    font-size: 16px;
    margin-left: 0;
    height: 55px;
  }
}
#mainContents .atlassian_index_bnr_textarea_btn a span {
  color: #00879d;
}
#mainContents .atlassian_index_bnr_textarea_btn a img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atlassian_index_bnr_textarea_btn a img {
    margin-left: 12px;
    width: 9px;
    transform: translateY(2px);
  }
}

.atlassian_migration_mv {
  background: linear-gradient(to left, #00879d 0%, #006272 100%);
  padding: 3.4rem 3rem 5rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv {
    margin: 0 -5vw;
    padding: 20px 10px 40px;
  }
}
.atlassian_migration_mv_inner {
  max-width: 960px;
  margin: 0 auto;
}
.atlassian_migration_mv_lead {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.1rem;
  font-weight: 900;
  padding-bottom: 2.2rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.51);
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_lead {
    flex-direction: column;
    font-size: 31px;
    padding-bottom: 10px;
    margin-bottom: 35px;
  }
}
.atlassian_migration_mv_lead img {
  width: 31.8rem;
  height: auto;
  margin-right: 2.2rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_lead img {
    margin-right: 0;
    width: 324px;
  }
}
.atlassian_migration_mv_logo {
  text-align: center;
}
.atlassian_migration_mv_logo .text {
  display: inline-block;
  position: relative;
  padding-right: 5rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_logo .text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-right: 0;
  }
}
.atlassian_migration_mv_logo .text img {
  width: 35.8rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_logo .text img {
    width: 298px;
  }
}
.atlassian_migration_mv_logo .fulidashi {
  background: url(/images/products/atgo/campaign2022/atgo_fulidashi.png) center no-repeat;
  background-size: contain;
  width: 15.7rem;
  height: 12.7rem;
  min-width: 100px;
  min-height: 80px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #00a2e9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  right: -14rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_logo .fulidashi {
    background-color: #fff;
    border-radius: 100vh;
    position: relative;
    width: 95%;
    max-width: 325px;
    height: 60px;
    min-width: auto;
    min-height: auto;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 20px;
    right: 0;
  }
  .atlassian_migration_mv_logo .fulidashi:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 15.5px 0 15.5px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.atlassian_migration_mv_title {
  font-weight: 900;
  color: #ffeb00;
  line-height: 6rem;
  text-align: center;
  margin-top: 2rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_title {
    line-height: 50px;
    margin-top: 5px;
  }
}
.atlassian_migration_mv_title .text1 {
  font-size: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_title .text1 {
    font-size: 22px;
  }
}
.atlassian_migration_mv_title .text2 {
  font-size: 5.2rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_title .text2 {
    font-size: 36px;
  }
}
.atlassian_migration_mv_title .text3 {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_mv_title .text3 {
    font-size: 41px;
  }
}
.atlassian_migration_contents {
  max-width: 1040px;
  padding: 9.8rem 3rem 0;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents {
    padding: 40px 0px 0;
  }
}
.atlassian_migration_contents_lead {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 6.7rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_lead {
    text-align: left;
    font-size: 16px;
    margin-bottom: 64px;
  }
}
.atlassian_migration_contents_target {
  border: 2px solid #00879d;
  padding: 0 2rem 8rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_target {
    padding: 0 20px 20px;
  }
}
.atlassian_migration_contents_target_title {
  text-align: center;
  margin-top: -2.75rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_target_title {
    margin-top: -27.5px;
  }
}
.atlassian_migration_contents_target_title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28.8rem;
  height: 5.5rem;
  color: white;
  font-size: 2rem;
  border-radius: 100vh;
  background: #00879d;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_target_title span {
    width: 288px;
    height: 55px;
    font-size: 20px;
  }
}
.atlassian_migration_contents_target_logo {
  text-align: center;
  margin-top: 8rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_target_logo {
    margin-top: 20px;
  }
}
.atlassian_migration_contents_target_logo img {
  height: auto;
  width: 41.7rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_target_logo img {
    width: 208px;
  }
}
.atlassian_migration_contents_arrow {
  text-align: center;
  margin: 4rem 0;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_arrow {
    margin: 20px 0;
  }
}
.atlassian_migration_contents_arrow img {
  width: 26.2rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_arrow img {
    width: 262px;
  }
}
.atlassian_migration_contents_term {
  background: #00879d;
  padding: 8rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term {
    padding: 20px 20px 40px;
  }
}
.atlassian_migration_contents_term_text1 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text1 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.atlassian_migration_contents_term_text2 {
  font-size: 4rem;
  line-height: 1.5;
  color: #ffeb00;
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text2 {
    font-size: 32px;
    margin: 10px 0;
  }
}
.atlassian_migration_contents_term_text2 strong {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text2 strong {
    font-size: 32px;
  }
}
.atlassian_migration_contents_term_text3 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text3 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.atlassian_migration_contents_term_text4 {
  border: 2px solid white;
  padding: 5rem;
  margin-top: 3rem;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text4 {
    padding: 2rem;
    margin-top: 20px;
  }
}
.atlassian_migration_contents_term_text4 li {
  font-size: 2rem;
  line-height: 1.6;
  color: white;
  text-align: left;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_text4 li {
    font-size: 14px;
  }
}
.atlassian_migration_contents_term_text4 li:before {
  content: "・";
  flex-shrink: 0;
  margin-right: 1rem;
}
.atlassian_migration_contents_term_btn {
  margin-top: 5rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_btn {
    margin-top: 40px;
  }
}
.atlassian_migration_contents_term_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 8rem;
  border-radius: 100vh;
  text-decoration: none;
  width: 400px;
  background: #ffeb00;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  font-size: 2.7rem;
  font-weight: bold;
  color: #00879d;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_btn a {
    width: 100%;
    font-size: 16px;
    height: 55px;
  }
}
.atlassian_migration_contents_term_btn a img {
  width: 1.4rem;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3.2rem;
  margin: auto 0;
}
@media only screen and (max-width: 767px) {
  .atlassian_migration_contents_term_btn a img {
    width: 9px;
  }
}

/* アトラシアン移行 */
.atgo_head_bnr {
  background: #00879d;
  line-height: 1;
  padding: 13px 3rem;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr {
    padding: 12px 45px 12px 10px;
    margin-left: -5vw;
    margin-right: -5vw;
    position: relative;
  }
}
.atgo_head_bnr_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner {
    flex-wrap: wrap;
  }
}
.atgo_head_bnr_inner_img1 {
  margin-right: 0.8rem;
  width: 22.5rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_img1 {
    width: 155px;
    margin-right: 6px;
  }
}
.atgo_head_bnr_inner_text1 {
  color: white;
  font-size: 2.2rem;
  font-weight: 900;
  margin-right: 1rem;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_text1 {
    font-size: 16px;
    margin-right: 0;
  }
}
.atgo_head_bnr_inner_text2 {
  font-size: 2rem;
  font-weight: 900;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_text2 {
    font-size: 14px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.19);
    margin-top: 6px;
    padding-top: 6px;
    text-align: center;
  }
}
.atgo_head_bnr_inner_btn {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  color: #00879d;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 3.4rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 1.4rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_btn {
    width: 29px;
    height: 29px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    position: absolute;
    top: 29px;
    right: 10px;
    margin: auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_btn span {
    display: none;
  }
}
.atgo_head_bnr_inner_btn img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  .atgo_head_bnr_inner_btn img {
    margin-left: 0;
    transform: none;
    width: 6px;
  }
}

#mainContents .atgo_index_bnr {
  background: #00879d;
  padding: 1.1rem 2rem 1.3rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr {
    padding: 15px 10px 20px;
  }
}
#mainContents .atgo_index_bnr_text1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_text1 {
    flex-direction: column;
    font-size: 31px;
  }
}
#mainContents .atgo_index_bnr_text1 img {
  width: 20.5rem;
  height: auto;
  margin-right: 1.4rem;
  transform: translateY(0.5rem);
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_text1 img {
    width: 325px;
    margin-right: 0;
  }
}
#mainContents .atgo_index_bnr_textarea {
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.19);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea {
    flex-direction: column;
  }
}
#mainContents .atgo_index_bnr_textarea_text1 {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_text1 {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
#mainContents .atgo_index_bnr_textarea_text1 small {
  color: #ffeb00;
  font-size: 1.4rem;
  margin-right: 0.5rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_text1 small {
    font-size: 25px;
    margin-right: 0;
  }
}
#mainContents .atgo_index_bnr_textarea_text2 {
  font-size: 1.4rem;
  color: white;
  font-weight: 900;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_text2 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_btn {
    width: 100%;
    margin-top: 15px;
  }
}
#mainContents .atgo_index_bnr_textarea_btn a {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 4.3rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 0.7rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_btn a {
    width: 100%;
    font-size: 16px;
    margin-left: 0;
    height: 55px;
  }
}
#mainContents .atgo_index_bnr_textarea_btn a span {
  color: #00879d;
}
#mainContents .atgo_index_bnr_textarea_btn a img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .atgo_index_bnr_textarea_btn a img {
    margin-left: 12px;
    width: 9px;
    transform: translateY(2px);
  }
}

.atgo_campaign_mv {
  background: linear-gradient(to left, #00879d 0%, #006272 100%);
  padding: 3.4rem 3rem 5rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv {
    margin: 0 -5vw;
    padding: 20px 10px 40px;
  }
}
.atgo_campaign_mv_inner {
  max-width: 960px;
  margin: 0 auto;
}
.atgo_campaign_mv_lead {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.1rem;
  font-weight: 900;
  padding-bottom: 2.2rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.51);
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_lead {
    flex-direction: column;
    font-size: 31px;
    padding-bottom: 10px;
    margin-bottom: 35px;
  }
}
.atgo_campaign_mv_lead img {
  width: 31.8rem;
  height: auto;
  margin-right: 2.2rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_lead img {
    margin-right: 0;
    width: 324px;
  }
}
.atgo_campaign_mv_logo {
  text-align: center;
}
.atgo_campaign_mv_logo .text {
  display: inline-block;
  position: relative;
  padding-right: 5rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_logo .text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-right: 0;
  }
}
.atgo_campaign_mv_logo .text img {
  width: 35.8rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_logo .text img {
    width: 298px;
  }
}
.atgo_campaign_mv_logo .fulidashi {
  background: url(/images/products/atgo/campaign2022/atgo_fulidashi.png) center no-repeat;
  background-size: contain;
  width: 15.7rem;
  height: 12.7rem;
  min-width: 100px;
  min-height: 80px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #00a2e9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  right: -14rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_logo .fulidashi {
    background-color: #fff;
    border-radius: 100vh;
    position: relative;
    width: 95%;
    max-width: 325px;
    height: 60px;
    min-width: auto;
    min-height: auto;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 20px;
    right: 0;
  }
  .atgo_campaign_mv_logo .fulidashi:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 15.5px 0 15.5px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.atgo_campaign_mv_title {
  font-weight: 900;
  color: #ffeb00;
  line-height: 6rem;
  text-align: center;
  margin-top: 2rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_title {
    line-height: 50px;
    margin-top: 5px;
  }
}
.atgo_campaign_mv_title .text1 {
  font-size: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_title .text1 {
    font-size: 22px;
  }
}
.atgo_campaign_mv_title .text2 {
  font-size: 5.2rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_title .text2 {
    font-size: 36px;
  }
}
.atgo_campaign_mv_title .text3 {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_mv_title .text3 {
    font-size: 41px;
  }
}
.atgo_campaign_contents {
  max-width: 1040px;
  padding: 9.8rem 3rem 0;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents {
    padding: 40px 0px 0;
  }
}
.atgo_campaign_contents_lead {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 6.7rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_lead {
    text-align: left;
    font-size: 16px;
    margin-bottom: 64px;
  }
}
.atgo_campaign_contents_target {
  border: 2px solid #00879d;
  padding: 0 2rem 8rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_target {
    padding: 0 20px 20px;
  }
}
.atgo_campaign_contents_target_title {
  text-align: center;
  margin-top: -2.75rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_target_title {
    margin-top: -27.5px;
  }
}
.atgo_campaign_contents_target_title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28.8rem;
  height: 5.5rem;
  color: white;
  font-size: 2rem;
  border-radius: 100vh;
  background: #00879d;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_target_title span {
    width: 288px;
    height: 55px;
    font-size: 20px;
  }
}
.atgo_campaign_contents_target_logo {
  text-align: center;
  margin-top: 8rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_target_logo {
    margin-top: 20px;
  }
}
.atgo_campaign_contents_target_logo img {
  height: auto;
  width: 41.7rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_target_logo img {
    width: 208px;
  }
}
.atgo_campaign_contents_arrow {
  text-align: center;
  margin: 4rem 0;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_arrow {
    margin: 20px 0;
  }
}
.atgo_campaign_contents_arrow img {
  width: 26.2rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_arrow img {
    width: 262px;
  }
}
.atgo_campaign_contents_term {
  background: #00879d;
  padding: 8rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term {
    padding: 20px 20px 40px;
  }
}
.atgo_campaign_contents_term_text1 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text1 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.atgo_campaign_contents_term_text2 {
  font-size: 4rem;
  line-height: 1.5;
  color: #ffeb00;
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text2 {
    font-size: 32px;
    margin: 10px 0;
  }
}
.atgo_campaign_contents_term_text2 strong {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text2 strong {
    font-size: 32px;
  }
}
.atgo_campaign_contents_term_text3 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text3 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.atgo_campaign_contents_term_text4 {
  border: 2px solid white;
  padding: 5rem;
  margin-top: 3rem;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text4 {
    padding: 2rem;
    margin-top: 20px;
  }
}
.atgo_campaign_contents_term_text4 li {
  font-size: 2rem;
  line-height: 1.6;
  color: white;
  text-align: left;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_text4 li {
    font-size: 14px;
  }
}
.atgo_campaign_contents_term_text4 li:before {
  content: "・";
  flex-shrink: 0;
  margin-right: 1rem;
}
.atgo_campaign_contents_term_btn {
  margin-top: 5rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_btn {
    margin-top: 40px;
  }
}
.atgo_campaign_contents_term_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 8rem;
  border-radius: 100vh;
  text-decoration: none;
  width: 400px;
  background: #ffeb00;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  font-size: 2.7rem;
  font-weight: bold;
  color: #00879d;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_btn a {
    width: 100%;
    font-size: 16px;
    height: 55px;
  }
}
.atgo_campaign_contents_term_btn a img {
  width: 1.4rem;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3.2rem;
  margin: auto 0;
}
@media only screen and (max-width: 767px) {
  .atgo_campaign_contents_term_btn a img {
    width: 9px;
  }
}

/* キャンペーンヘッダー表示 */
.campaign_head_bnr {
  background: #00879d;
  line-height: 1;
  padding: 13px 3rem;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr {
    position: relative;
  }
}
.campaign_head_bnr_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner {
    flex-wrap: wrap;
  }
}
.campaign_head_bnr_inner_img1 {
  margin-right: 0.8rem;
  width: 22.5rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_img1 {
    width: 155px;
    margin-right: 6px;
  }
}
.campaign_head_bnr_inner_text1 {
  color: white;
  font-size: 2.2rem;
  font-weight: 900;
  margin-right: 1rem;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_text1 {
    font-size: 16px;
    margin-right: 0;
  }
}
.campaign_head_bnr_inner_text2 {
  font-size: 2rem;
  font-weight: 900;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_text2 {
    font-size: 14px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.19);
    margin-top: 6px;
    padding-top: 6px;
    text-align: center;
  }
}
.campaign_head_bnr_inner_btn {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  color: #00879d;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 3.4rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 1.4rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_btn {
    width: 29px;
    height: 29px;
    padding: 0;
    min-width: auto;
    min-height: auto;
    position: absolute;
    top: 29px;
    right: 10px;
    margin: auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_btn span {
    display: none;
  }
}
.campaign_head_bnr_inner_btn img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  .campaign_head_bnr_inner_btn img {
    margin-left: 0;
    transform: none;
    width: 6px;
  }
}

#mainContents .campaign_index_bnr {
  background: #00879d;
  padding: 1.1rem 2rem 1.3rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr {
    padding: 15px 10px 20px;
  }
}
#mainContents .campaign_index_bnr_text1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_text1 {
    flex-direction: column;
    font-size: 31px;
  }
}
#mainContents .campaign_index_bnr_text1 img {
  width: 20.5rem;
  height: auto;
  margin-right: 1.4rem;
  transform: translateY(0.5rem);
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_text1 img {
    width: 325px;
    margin-right: 0;
  }
}
#mainContents .campaign_index_bnr_textarea {
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.19);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea {
    flex-direction: column;
  }
}
#mainContents .campaign_index_bnr_textarea_text1 {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #ffeb00;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_text1 {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
#mainContents .campaign_index_bnr_textarea_text1 small {
  color: #ffeb00;
  font-size: 1.4rem;
  margin-right: 0.5rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_text1 small {
    font-size: 25px;
    margin-right: 0;
  }
}
#mainContents .campaign_index_bnr_textarea_text2 {
  font-size: 1.4rem;
  color: white;
  font-weight: 900;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_text2 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_btn {
    width: 100%;
    margin-top: 15px;
  }
}
#mainContents .campaign_index_bnr_textarea_btn a {
  background-color: #ffeb00;
  border-radius: 100vh;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 11.7rem;
  min-height: 4.3rem;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
  margin-left: 0.7rem;
  padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_btn a {
    width: 100%;
    font-size: 16px;
    margin-left: 0;
    height: 55px;
  }
}
#mainContents .campaign_index_bnr_textarea_btn a span {
  color: #00879d;
}
#mainContents .campaign_index_bnr_textarea_btn a img {
  margin-left: 0.5rem;
  transform: translateY(1px);
  width: 0.6rem;
}
@media only screen and (max-width: 767px) {
  #mainContents .campaign_index_bnr_textarea_btn a img {
    margin-left: 12px;
    width: 9px;
    transform: translateY(2px);
  }
}

.campaign_campaign_mv {
  background: linear-gradient(to left, #00879d 0%, #006272 100%);
  padding: 3.4rem 3rem 5rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv {
    margin: 0 -5vw;
    padding: 20px 10px 40px;
  }
}
.campaign_campaign_mv_inner {
  max-width: 960px;
  margin: 0 auto;
}
.campaign_campaign_mv_lead {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.1rem;
  font-weight: 900;
  padding-bottom: 2.2rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.51);
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_lead {
    flex-direction: column;
    font-size: 31px;
    padding-bottom: 10px;
    margin-bottom: 35px;
  }
}
.campaign_campaign_mv_lead img {
  width: 31.8rem;
  height: auto;
  margin-right: 2.2rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_lead img {
    margin-right: 0;
    width: 324px;
  }
}
.campaign_campaign_mv_logo {
  text-align: center;
}
.campaign_campaign_mv_logo .text {
  display: inline-block;
  position: relative;
  padding-right: 5rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_logo .text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-right: 0;
  }
}
.campaign_campaign_mv_logo .text img {
  width: 35.8rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_logo .text img {
    width: 298px;
  }
}
.campaign_campaign_mv_logo .fulidashi {
  background: url(/images/products/campaign/campaign2022/campaign_fulidashi.png) center no-repeat;
  background-size: contain;
  width: 15.7rem;
  height: 12.7rem;
  min-width: 100px;
  min-height: 80px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #00a2e9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  right: -14rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_logo .fulidashi {
    background-color: #fff;
    border-radius: 100vh;
    position: relative;
    width: 95%;
    max-width: 325px;
    height: 60px;
    min-width: auto;
    min-height: auto;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 20px;
    right: 0;
  }
  .campaign_campaign_mv_logo .fulidashi:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 15.5px 0 15.5px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.campaign_campaign_mv_title {
  font-weight: 900;
  color: #ffeb00;
  line-height: 6rem;
  text-align: center;
  margin-top: 2rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_title {
    line-height: 50px;
    margin-top: 5px;
  }
}
.campaign_campaign_mv_title .text1 {
  font-size: 3.2rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_title .text1 {
    font-size: 22px;
  }
}
.campaign_campaign_mv_title .text2 {
  font-size: 5.2rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_title .text2 {
    font-size: 36px;
  }
}
.campaign_campaign_mv_title .text3 {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_mv_title .text3 {
    font-size: 41px;
  }
}
.campaign_campaign_contents {
  max-width: 1040px;
  padding: 9.8rem 3rem 0;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents {
    padding: 40px 0px 0;
  }
}
.campaign_campaign_contents_lead {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 6.7rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_lead {
    text-align: left;
    font-size: 16px;
    margin-bottom: 64px;
  }
}
.campaign_campaign_contents_target {
  border: 2px solid #00879d;
  padding: 0 2rem 8rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_target {
    padding: 0 20px 20px;
  }
}
.campaign_campaign_contents_target_title {
  text-align: center;
  margin-top: -2.75rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_target_title {
    margin-top: -27.5px;
  }
}
.campaign_campaign_contents_target_title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28.8rem;
  height: 5.5rem;
  color: white;
  font-size: 2rem;
  border-radius: 100vh;
  background: #00879d;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_target_title span {
    width: 288px;
    height: 55px;
    font-size: 20px;
  }
}
.campaign_campaign_contents_target_logo {
  text-align: center;
  margin-top: 8rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_target_logo {
    margin-top: 20px;
  }
}
.campaign_campaign_contents_target_logo img {
  height: auto;
  width: 41.7rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_target_logo img {
    width: 208px;
  }
}
.campaign_campaign_contents_arrow {
  text-align: center;
  margin: 4rem 0;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_arrow {
    margin: 20px 0;
  }
}
.campaign_campaign_contents_arrow img {
  width: 26.2rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_arrow img {
    width: 262px;
  }
}
.campaign_campaign_contents_term {
  background: #00879d;
  padding: 8rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term {
    padding: 20px 20px 40px;
  }
}
.campaign_campaign_contents_term_text1 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text1 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.campaign_campaign_contents_term_text2 {
  font-size: 4rem;
  line-height: 1.5;
  color: #ffeb00;
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text2 {
    font-size: 32px;
    margin: 10px 0;
  }
}
.campaign_campaign_contents_term_text2 strong {
  font-size: 6rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text2 strong {
    font-size: 32px;
  }
}
.campaign_campaign_contents_term_text3 {
  color: white;
  font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text3 {
    font-size: 16px;
    line-height: 1.6;
  }
}
.campaign_campaign_contents_term_text4 {
  border: 2px solid white;
  padding: 5rem;
  margin-top: 3rem;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text4 {
    padding: 2rem;
    margin-top: 20px;
  }
}
.campaign_campaign_contents_term_text4 li {
  font-size: 2rem;
  line-height: 1.6;
  color: white;
  text-align: left;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_text4 li {
    font-size: 14px;
  }
}
.campaign_campaign_contents_term_text4 li:before {
  content: "・";
  flex-shrink: 0;
  margin-right: 1rem;
}
.campaign_campaign_contents_term_btn {
  margin-top: 5rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_btn {
    margin-top: 40px;
  }
}
.campaign_campaign_contents_term_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 8rem;
  border-radius: 100vh;
  text-decoration: none;
  width: 400px;
  background: #ffeb00;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  font-size: 2.7rem;
  font-weight: bold;
  color: #00879d;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_btn a {
    width: 100%;
    font-size: 16px;
    height: 55px;
  }
}
.campaign_campaign_contents_term_btn a img {
  width: 1.4rem;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3.2rem;
  margin: auto 0;
}
@media only screen and (max-width: 767px) {
  .campaign_campaign_contents_term_btn a img {
    width: 9px;
  }
}

/* Cody notice custom */
/* cody notice custom styles */
.cody-notice-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2em;
  /* h2との間隔を広げる */
  margin-bottom: 2.5em;
}

.cody-notice-container img {
  margin-right: 1em;
  max-height: 48px;
}

.product-tagline {
  font-weight: bold;
  font-size: 1.5em;
  color: #e60000;
  margin: 0;
  text-align: center;
  /* h2との間隔を広げる */
  margin-bottom: 0;
}

/* h1とimgの行とh2の間隔 */
.cody-notice-h2 {
  margin-top: 2.5em;
}

@media (max-width: 600px) {
  .cody-notice-container {
    flex-direction: column;
  }
  .cody-notice-container img {
    margin: 0 0 1em 0;
  }
}

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