@charset "UTF-8";
/**********************************************
** Site Name: LinkPrint CLOUD お役立ち情報
** Description: LinkPrint CLOUD お役立ち情報 トップページ CSS
**********************************************/
/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - ブレイクポイント設定
2.0 - リセット
3.0 - 汎用スタイル
    3.1 - カラム
    3.2 - テキストリンク
    3.3 - ボタン
    3.4 - 改行
    3.5 - 画像
    3.6 - slick
4.0 - 見出し
5.0 - 記事カテゴリ / キーワード検索
5.0 - コラム レイアウト
6.0 - 連携パートナー紹介
7.0 - 導入事例
8.0 - よくある質問

---------------------------------------------*/
/*-------------------------------------------*/
/*  1.0 - ブレイクポイント設定
-------------------------------------------*/
/*-------------------------------------------*/
/*  2.0 - リセット
/*-------------------------------------------*/
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

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

hr {
  border: 0; }

/*-------------------------------------------*/
/*  3.0 - 汎用スタイル
/*-------------------------------------------*/
html {
  font-size: 62.5%; }

body {
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "メイリオ", Meiryo, Osaka, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  font-size: 1.4rem;
  line-height: 1.6;
  color: #333; }

li {
  list-style: none; }

div, ul, li, a {
  box-sizing: border-box; }

a:visited {
  text-decoration: none; }

a:focus {
  outline: none; }

/*  3.1 - カラム
/*-------------------------------------------*/
.top-wrap {
  margin-top: 0 !important; }

.top-box {
  width: 1080px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding-right: 40px;
  padding-left: 40px; }
  @media screen and (max-width: 959px) {
    .top-box {
      padding-right: 20px;
      padding-left: 20px; } }

/*  3.2 - テキストリンク
/*-------------------------------------------*/
.top-txtLink {
  text-decoration: none;
  color: #1493CB;
  transition: .2s linear; }

/*  3.3 - ボタン
/*-------------------------------------------*/
.top-btn {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border-radius: 30px;
  border: #2866B1 1px solid;
  background-color: #fff;
  padding: 12px 40px;
  text-align: center;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  transition: all 0.3s ease-in-out; }

.top-btn:hover {
  background-color: #2866B1;
  text-decoration: none;
  color: #fff; }

.top-btn::before,
.top-btn::after {
  position: absolute;
  top: 48%;
  right: 15px;
  display: block;
  content: '';
  width: 8px;
  height: 2px;
  background: #2866B1;
  border-radius: 4px;
  transition: all 0.3s ease-in-out; }

.top-btn::before {
  margin-top: -3px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.top-btn::after {
  margin-top: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.top-btn:hover::before,
.top-btn:hover::after {
  background: #fff; }

.top-btn--case:hover {
  background-color: #fff;
  color: #2866B1;
  transform: scale(1.08, 1.08);
  transition: all .5s ease; }

.top-btn--case:hover::before,
.top-btn--case:hover::after {
  background: #2866B1; }

/*  3.4 - 改行
/*-------------------------------------------*/
.top-brPc {
  display: block; }
  @media screen and (max-width: 959px) {
    .top-brPc {
      display: none; } }

.top-brSp {
  display: none; }
  @media screen and (max-width: 959px) {
    .top-brSp {
      display: block; } }

/*  3.5 - 画像
/*-------------------------------------------*/
.top-image {
  width: 100%;
  vertical-align: bottom; }

/*  3.6 - slick
/*-------------------------------------------*/
.top-caseSlider__list {
  display: none; }

.top-caseSlider__list.slick-initialized {
  display: block; }

.top-caseSlider__list .slick-track {
  display: flex; }

.top-caseSlider__list .slick-slide {
  height: auto !important; }

/*-------------------------------------------*/
/*  4.0 - 見出し
/*-------------------------------------------*/
.top-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px; }
  @media screen and (max-width: 959px) {
    .top-heading {
      flex-direction: column;
      padding-top: 25px;
      padding-bottom: 25px; } }

.top-heading__item--btn {
  position: absolute;
  right: 40px; }
  @media screen and (max-width: 959px) {
    .top-heading__item--btn {
      position: static;
      right: auto;
      margin-top: 20px; } }

.top-headingLarge {
  line-height: 1.2;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 3.5rem; }
  @media screen and (max-width: 959px) {
    .top-headingLarge {
      font-size: 2.4rem; } }

.top-headingEn {
  position: relative;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 2.0rem;
  color: #2866B1; }
  @media screen and (max-width: 959px) {
    .top-headingEn {
      font-size: 1.4rem; } }

.top-headingEn__line {
  position: relative;
  z-index: 10;
  display: inline-block;
  background-color: #fff;
  padding: 0 15px; }

.top-headingEn::after {
  width: 200px;
  height: 2px;
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: #2866B1; }
  @media screen and (max-width: 959px) {
    .top-headingEn::after {
      width: 140px; } }

.top-headingMedium {
  border: none;
  background: none;
  margin-bottom: 30px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto; }

.top-headingMedium__en {
  display: block;
  margin-bottom: 3px;
  font-weight: 900;
  font-size: 4.0rem; }
  @media screen and (max-width: 959px) {
    .top-headingMedium__en {
      font-size: 3.0rem; } }

.top-headingMedium__jp {
  display: block;
  font-weight: 700;
  font-size: 2.0rem; }
  @media screen and (max-width: 959px) {
    .top-headingMedium__jp {
      font-size: 1.8rem; } }

/*-------------------------------------------*/
/*  5.0 - 記事カテゴリ / キーワード検索
/*-------------------------------------------*/
.top-search {
  background-color: #E5EFF6;
  margin-bottom: 50px;
  padding-top: 20px;
  padding-bottom: 25px; }
  @media screen and (max-width: 959px) {
    .top-search {
      margin-bottom: 30px; } }

.top-searchList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 25px;
  margin-bottom: 30px; }
  @media screen and (max-width: 959px) {
    .top-searchList {
      gap: 10px 10px; } }

.top-searchList__item {
  width: 180px;
  height: 130px;
  border-radius: 5px;
  box-shadow: 0 3px 6px #C3D3DE;
  transition: all 0.3s ease-in-out; }
  @media screen and (max-width: 959px) {
    .top-searchList__item {
      width: 160px;
      height: 110px; } }

.top-searchList__item:hover {
  transform: scale(1.09, 1.09); }

.top-searchList__item > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  transition: all 0.2s ease-in-out; }

.top-searchList__item > a:hover {
  text-decoration: none; }

.top-searchList__item--article {
  background: url("https://www.lpcloud.jp/support/img/img_nav01.jpg") no-repeat 0 0;
  background-size: cover; }

.top-searchList__item--newFunction {
  background: url("https://www.lpcloud.jp/support/img/img_nav02.jpg") no-repeat 0 0;
  background-size: cover; }

.top-searchList__item--method {
  background: url("https://www.lpcloud.jp/support/img/img_nav03.jpg") no-repeat 0 0;
  background-size: cover; }

.top-searchList__item--partner {
  background: url("https://www.lpcloud.jp/support/img/img_nav04.jpg") no-repeat 0 0;
  background-size: cover; }

.top-searchList__item--case {
  background: url("https://www.lpcloud.jp/support/img/img_nav05.jpg") no-repeat 0 0;
  background-size: cover; }

.top-searchList__txt {
  width: 100%;
  border-radius: 0 0 5px 5px;
  background-color: #2866B1;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff; }
  @media screen and (max-width: 959px) {
    .top-searchList__txt {
      font-size: 1.4rem; } }

.top-searchKeywords {
  display: flex;
  gap: 20px 10px; }
  @media screen and (max-width: 959px) {
    .top-searchKeywords {
      flex-direction: column; } }

.top-searchKeywords__title {
  white-space: nowrap;
  background: url("https://www.lpcloud.jp/support/img/icon_search.svg") no-repeat top 11px left 0;
  padding-top: 8px;
  padding-left: 22px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #2866B1; }

.top-searchKeywords__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px; }
  @media screen and (max-width: 959px) {
    .top-searchKeywords__list {
      gap: 10px 8px; } }

.top-searchKeywords__item > a {
  display: inline-block;
  box-sizing: border-box;
  border: #2866B1 1px solid;
  border-radius: 35px;
  background-color: #fff;
  padding: 8px 20px;
  font-weight: bold;
  font-size: 1.4rem;
  transition: all 0.3s ease-in-out; }

.top-searchKeywords__item > a:hover {
  background-color: #2866B1;
  text-decoration: none;
  color: #fff; }

/*-------------------------------------------*/
/*  6.0 - コラム レイアウト
/*-------------------------------------------*/
.top-column {
  display: flex;
  gap: 0 80px;
  margin-bottom: 80px; }
  @media screen and (max-width: 959px) {
    .top-column {
      flex-direction: column; } }

.top-column__new {
  width: 50%;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #E5EFF6;
  margin-left: 70px; }
  @media screen and (max-width: 959px) {
    .top-column__new {
      width: 100%;
      margin-left: 0; } }

.top-column__attention {
  position: absolute;
  top: 0;
  left: 13.5%;
  background-color: #2866B1;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 1.4rem;
  color: #fff; }
  @media screen and (max-width: 959px) {
    .top-column__attention {
      left: 20px; } }

.top-column__newBox {
  display: block;
  padding: 50px 13.5%; }
  @media screen and (max-width: 959px) {
    .top-column__newBox {
      padding: 50px 20px 30px; } }

.top-column__newBox:hover {
  text-decoration: none; }

.top-column__newThumbnail {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 3px 10px #A0AFBA;
  margin-bottom: 30px; }
  @media screen and (max-width: 959px) {
    .top-column__newThumbnail {
      margin-bottom: 20px; } }

.top-column__newThumbnail img {
  border-radius: 5px;
  transition: all .5s ease; }

.top-column__newThumbnail img:hover {
  transform: scale(1.11, 1.11);
  transition: all .5s ease; }

.top-column__newTitle {
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #333; }
  @media screen and (max-width: 959px) {
    .top-column__newTitle {
      font-size: 1.7rem; } }

.top-column__past {
  width: 50%;
  box-sizing: border-box; }
  @media screen and (max-width: 959px) {
    .top-column__past {
      width: 100%;
      padding: 30px 20px 0; } }

.top-column__list {
  display: flex;
  flex-direction: column;
  gap: 50px 0;
  margin-bottom: 80px; }
  @media screen and (max-width: 959px) {
    .top-column__list {
      gap: 0 25px;
      flex-direction: row;
      margin-bottom: 40px; } }

.top-column__box {
  display: flex;
  box-sizing: border-box;
  gap: 0 30px;
  padding-right: 70px; }
  @media screen and (max-width: 959px) {
    .top-column__box {
      flex-direction: column;
      gap: 15px 0;
      padding-right: 0; } }

.top-column__box:hover {
  text-decoration: none; }

.top-column__thumbnail {
  width: 50%;
  overflow: hidden;
  border-radius: 5px;
  transition: all .5s ease; }
  @media screen and (max-width: 959px) {
    .top-column__thumbnail {
      width: 100%; } }

.top-column__thumbnail:hover {
  box-shadow: 0 1px 14px #A0AFBA; }

.top-column__thumbnail img {
  border-radius: 5px;
  transition: all .5s ease; }

.top-column__thumbnail img:hover {
  transform: scale(1.11, 1.11);
  transition: all .5s ease; }

.top-column__title {
  width: 50%;
  line-height: 1.7;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #333; }
  @media screen and (max-width: 959px) {
    .top-column__title {
      width: 100%;
      font-weight: 900;
      font-size: 1.3rem; } }

.top-column__btn {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-right: 70px; }
  @media screen and (max-width: 959px) {
    .top-column__btn {
      padding-right: 0; } }

.top-column__btnBox {
  width: 300px; }

/*-------------------------------------------*/
/*  7.0 - 連携パートナー紹介
/*-------------------------------------------*/
.top-partnerBg {
  background: #afdafc url("https://www.lpcloud.jp/support/img/bg_partner_pc.jpg") repeat-x top 0 left 0;
  background-size: auto;
  padding-top: 50px;
  padding-bottom: 80px; 
  margin-bottom: 80px;  }
  @media screen and (max-width: 959px) {
    .top-partnerBg {
      background: #ABD9F7 url("https://www.lpcloud.jp/support/img/bg_partner_sp.jpg") no-repeat top 0 left 0;
      background-size: 100%; } }

.top-partner {
  padding: 20px 40px 0; }
  @media screen and (max-width: 959px) {
    .top-partner {
      padding-left: 20px;
      padding-right: 20px; } }

.top-partner__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: center;
  grid-gap: 50px 35px;
  flex: auto;
  margin-bottom: 80px; }
  @media screen and (max-width: 959px) {
    .top-partner__list {
      grid-template-columns: repeat(auto-fit, 160px);
      justify-content: center;
      grid-gap: 25px 10px; } }

.top-partner__item {
  width: 200px; }
  @media screen and (max-width: 959px) {
    .top-partner__item {
      width: 160px; } }

.top-partner__item > a {
  width: 200px;
  display: block;
  transition: all 0.3s ease-in-out; }
  @media screen and (max-width: 959px) {
    .top-partner__item > a {
      width: 160px; } }

.top-partner__item > a:hover {
  text-decoration: none; }

.top-partner__thumbnail {
  width: 200px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 3px 10px #C3D3DE;
  margin-bottom: 20px;
  padding: 15px;
  transition: all 0.3s ease-in-out; }
  @media screen and (max-width: 959px) {
    .top-partner__thumbnail {
      width: 160px;
      height: 115px; } }

.top-partner__thumbnail:hover {
  transform: scale(1.08, 1.08); }

.top-partner__title {
  display: block;
  margin-bottom: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #333; }

.top-partner__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #333; }

.top-partner__marker {
  display: inline;
  background-color: #fff; }

.top-partner__btn {
  display: flex;
  justify-content: center; }

.top-partner__btnBox {
  width: 300px; }

/*-------------------------------------------*/
/*  8.0 - 導入事例
/*-------------------------------------------*/
.top-caseHeading {
  display: flex;
  align-items: center;
  padding-top: 50px; }
  @media screen and (max-width: 959px) {
    .top-caseHeading {
      flex-direction: column; } }

.top-caseHeading__about {
  flex: 1; }
  @media screen and (max-width: 959px) {
    .top-caseHeading__about {
      width: 100%;
      flex: auto; } }

.top-caseHeading__thumbnail {
  width: 340px; }
  @media screen and (max-width: 959px) {
    .top-caseHeading__thumbnail {
      width: 100%; } }

.top-case__txt {
  line-height: 2.0;
  font-size: 1.5rem; }
  @media screen and (max-width: 959px) {
    .top-case__txt {
      font-size: 1.4rem; } }

.top-case__lpc {
  display: inline-block;
  margin: 0 5px;
  font-size: 1.7rem; }
  @media screen and (max-width: 959px) {
    .top-case__lpc {
      font-size: 1.6rem; } }

.top-caseSlider {
  box-sizing: border-box;
  background-color: #2866B1;
  margin-bottom: 50px;
  padding-top: 40px;
  padding-bottom: 40px; }

.top-caseSlider__box {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 0 20px; }

.top-caseSlider__inner {
  position: relative;
  width: calc(100% + (100vw - 100%) / 2); }

.top-caseSlider__list {
  margin-bottom: 30px; }

.top-caseSlider__item {
  width: 300px;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 20px; }

.top-caseSlider__item > a {
  height: 100%;
  display: block;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease-in-out; }

.top-caseSlider__item > a:hover {
  color: #2866B1; }

.top-caseSlider__thumbnail {
  width: 300px;
  height: 160px;
  overflow: hidden;
  margin-bottom: 0; }

.top-caseSlider__thumbnail > img {
  border-radius: 5px 5px 0 0; }

.top-caseSlider__title {
  margin-bottom: 0;
  padding: 15px 20px 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.6rem; }

.top-caseSlider__name {
  margin-bottom: 0;
  padding: 0 20px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.3rem; }

.top-caseSlider__type {
  margin-bottom: 0;
  padding: 3px 20px 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem; }

.top-caseSlider__prev {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: -80px;
  border: none;
  border-radius: 25px;
  background-color: #fff; }

.top-caseSlider__next {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: -80px;
  left: 100px;
  border: none;
  border-radius: 25px;
  background-color: #fff; }

.top-caseSlider__prev::before,
.top-caseSlider__prev::after,
.top-caseSlider__next::before,
.top-caseSlider__next::after {
  position: absolute;
  top: 49%;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  content: '';
  width: 14px;
  height: 2px;
  background: #2866B1;
  border-radius: 4px;
  margin: 0 auto auto; }

.top-caseSlider__next::before {
  margin-top: -5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.top-caseSlider__next::after {
  margin-top: 4px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.top-caseSlider__prev::before {
  margin-top: -5px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg); }

.top-caseSlider__prev::after {
  margin-top: 4px;
  -webkit-transform: rotate(-1350deg);
  transform: rotate(-135deg); }

.top-case__btn {
  text-align: right; }

.top-caseSlider__num {
  position: absolute;
  bottom: -67px;
  left: 60px;
  color: #fff; }

/*-------------------------------------------*/
/*  9.0 - よくある質問
/*-------------------------------------------*/
.top-faq {
  width: 100%;
  max-width: 850px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: #707070 1px solid;
  border-radius: 5px;
  margin: 0 auto 80px; }
  @media screen and (max-width: 959px) {
    .top-faq {
      width: auto;
      flex-direction: column;
      gap: 20px 0;
      margin-left: 20px;
      margin-right: 20px;
      padding: 20px 30px 30px; } }

.top-faq__image {
  width: 220px; }

.top-faq__image > img {
  border-radius: 5px; }

.top-faq__txt {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.7rem; }
  @media screen and (max-width: 959px) {
    .top-faq__txt {
      font-size: 1.5rem; } }

.top-faq__link {
  margin-right: 20px; }
  @media screen and (max-width: 959px) {
    .top-faq__link {
      margin-right: 0; } }

/*-------------------------------------------*/
/*  導入事例 記事5件以下の表示差分 ※記事が5件以上になった時に削除
/*-------------------------------------------*/
/* .top-case__btn {
  text-align: center; }

.top-btn--case {
  width: 300px; }

.top-caseSlider__num {
  display: none; } */