@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}



/* ==================================================
   PCサポートLSP
   PC版ヘッダー + 固定表示
   サービス案内 / ブログ メガメニュー対応
   検索アイコン対応
================================================== */

@media screen and (min-width: 1024px) {


  /* ==================================================
     1. ヘッダー固定
  ================================================== */

  #header-container {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1000;
  }

  #header-container.fixed-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100% !important;
  }

  #header-fixed {
    padding-top: 0 !important;
  }

  /* WordPress管理バー表示中 */
  body.admin-bar #header-container,
  body.admin-bar #header-container.fixed-header {
    top: 32px !important;
  }



  /* ==================================================
     2. ヘッダー基本レイアウト
  ================================================== */

  #header-container-in.hlt-top-menu {
    min-height: 76px;
    display: flex;
    align-items: center;
  }


  /*
     Cocoon標準で入る
     ヘッダー下 ～ 本文上の余白を削除
  */
  #content {
    margin-top: 0 !important;
  }



  /* ==================================================
     3. ロゴ
  ================================================== */

  #header-container-in.hlt-top-menu #header {
    flex: 0 0 auto;
  }


  #header-container-in.hlt-top-menu #header-in {

    height: 76px;

    display: flex;
    align-items: center;

    padding: 0;
  }


  #header-container-in.hlt-top-menu .logo,
  #header-container-in.hlt-top-menu .logo > a,
  #header-container-in.hlt-top-menu .site-name-text {

    display: flex;
    align-items: center;

    height: 76px;
  }


  #header-container-in.hlt-top-menu .header-site-logo-image {

    display: block;

    width: auto;

    height: 70px;
    max-height: 70px;

    margin: 0;

    transform: none;
  }


  /* ==================================================
     4. Gメニュー
  ================================================== */

  #header-container-in.hlt-top-menu #navi {
    flex: 1 1 auto;
    height: 76px;
  }


  #header-container-in.hlt-top-menu #navi-in {
    width: 100%;
    height: 76px;
  }


  #header-container-in.hlt-top-menu .menu-header {

    display: flex;

    justify-content: flex-end;
    align-items: stretch;

    flex-wrap: nowrap;

    width: 100%;
    height: 76px;
  }


  /*
     Cocoon側のトップメニュー項目幅を解除

     各項目を文字量 + padding分の幅にする
  */
  #header-container-in.hlt-top-menu
  .menu-header > li {

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 76px;

    display: flex;
    align-items: stretch;
  }


  /*
     当店について ～ お問い合わせ
  */
  #header-container-in.hlt-top-menu
  .menu-header > li:not(.lsp-search-trigger) > a {

    width: auto !important;
    min-width: 0 !important;

    height: 76px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    white-space: nowrap;

    font-weight: 600;

    transition: color 0.2s ease;
  }


  /* サービス案内・ブログの
     Cocoon標準ドロップダウン矢印を非表示 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > a > .top-has-sub,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > a > .top-has-sub {

    display: none !important;
  }



  /* ==================================================
     5. Gメニュー hover
  ================================================== */

  #header-container-in.hlt-top-menu .menu-header > li:hover,
  #header-container-in.hlt-top-menu .menu-header > li:hover > a,
  #header-container-in.hlt-top-menu .menu-header > li > a:hover {
    background-color: transparent !important;
  }

  #header-container-in.hlt-top-menu .menu-header > li:hover > a,
  #header-container-in.hlt-top-menu .menu-header > li > a:hover {
    color: #2f80ed !important;
  }



  /* ==================================================
     6. 共通メガメニュー
     2番目 = サービス案内
     3番目 = ブログ
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu {

    position: fixed !important;

    top: 76px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: none !important;

    background: #f5f5f5 !important;
    border-top: 1px solid #d9d9d9;
    box-shadow: none !important;

    box-sizing: border-box;

    padding:
      24px
      max(32px, calc((100vw - 780px) / 2))
      34px;

    /*
       非表示状態

       Gメニュー下面へ収納されている状態
    */
    clip-path: inset(0 0 100% 0);

    visibility: hidden;

    transition:
      clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.65s;

    z-index: 1100;
  }


  /* WordPress管理バー表示中 */
  body.admin-bar
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu,

  body.admin-bar
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu {

    top: 108px !important;
  }



  /* ==================================================
     7. hover / focus で表示
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2):hover > .sub-menu,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2):focus-within > .sub-menu,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3):hover > .sub-menu,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3):focus-within > .sub-menu {

    /*
       初回OPEN
       上から下へ展開
    */
    clip-path: inset(0 0 0 0);

    visibility: visible;

    transition:
      clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
  }


  /*
     サービス案内 ⇔ ブログを切り替える瞬間だけ
     アニメーションを無効化

     メガメニュー自体は開いたまま、
     中身だけ即切り替わる
  */
  #header-container-in.hlt-top-menu.lsp-mega-switching
  .menu-header > li:nth-child(2) > .sub-menu,

  #header-container-in.hlt-top-menu.lsp-mega-switching
  .menu-header > li:nth-child(3) > .sub-menu {

    transition: none !important;
  }



  /* ==================================================
     8. 共通：メガメニュー子項目
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li {

    position: static !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto;

    display: block;

    margin: 0;
    padding: 0;

    background: transparent !important;
    border: 0 !important;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li > a,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li > a {

    display: block;

    width: auto !important;
    min-width: 0 !important;
    height: auto;

    padding: 11px 0;

    color: inherit;
    background: transparent !important;

    white-space: nowrap;

    transition: color 0.2s ease;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:hover,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:hover > a,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li:hover,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li:hover > a {

    background: transparent !important;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:hover > a,

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li:hover > a {

    color: #2f80ed !important;
  }



  /* ==================================================
     9. サービス案内 メガメニュー
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu {

    display: grid !important;

    grid-template-columns: 1fr 1fr;

    column-gap: 80px;
    row-gap: 0;
  }



  /* ==================================================
     見出し：サービス案内
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > .lsp-mega-heading-item {

    grid-column: 1 / -1;
    grid-row: 1;

    margin-bottom: 18px;
    padding-bottom: 18px;

    border-bottom: 1px solid #d9d9d9 !important;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > .lsp-mega-heading-item > a {

    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: auto !important;
    min-width: 0 !important;

    padding: 0;

    background: transparent !important;

    font-size: 20px;
    font-weight: 700;
  }


  /* 青い丸矢印 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > .lsp-mega-heading-item > a::after {

    content: "›";

    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius: 50%;

    background: #2f80ed;
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    transform: translateY(-2px);
  }



  /* ==================================================
     メニュー項目 共通
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:not(.lsp-mega-heading-item) > a {

    padding-top: 2px;
    padding-bottom: 2px;
  }



  /* ==================================================
     左列
  ================================================== */


  /* PCサポート */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(2) {

    grid-column: 1;
    grid-row: 2;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(2) > a {

    font-weight: 700;
  }



  /* PCサポート料金 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(3) {

    grid-column: 1;
    grid-row: 3;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(3) > a {

    display: flex !important;
    align-items: center;

    padding-left: 12px;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(3) > a::before {

    content: "-";

    flex: 0 0 auto;

    margin-right: 6px;
  }



  /* 個人情報の取り扱いに関して */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(4) {

    grid-column: 1;
    grid-row: 4;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(4) > a {

    display: flex !important;
    align-items: center;

    padding-left: 12px;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(4) > a::before {

    content: "-";

    flex: 0 0 auto;

    margin-right: 6px;
  }



  /* ==================================================
     右列
  ================================================== */


  /* 各種工事 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(5) {

    grid-column: 2;
    grid-row: 2;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(5) > a {

    font-weight: 700;
  }



  /* 各種工事料金 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(6) {

    grid-column: 2;
    grid-row: 3;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(6) > a {

    display: flex !important;
    align-items: center;

    padding-left: 12px;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(6) > a::before {

    content: "-";

    flex: 0 0 auto;

    margin-right: 6px;
  }



  /* ==================================================
     対応エリア
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(7) {

    grid-column: 1;
    grid-row: 5;

    margin-top: 14px;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(2) > .sub-menu > li:nth-child(7) > a {

    font-weight: 700;
  }


  /* ==================================================
     10. ブログ メガメニュー
     サービス案内と完全に同じ見出し構造
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu {

    display: grid !important;

    grid-template-columns: 1fr 1fr;

    column-gap: 80px;
    row-gap: 0;
  }


  /* 共通見出し */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > .lsp-mega-heading-item {

    grid-column: 1 / -1;
    grid-row: 1;

    margin-bottom: 18px;
    padding-bottom: 18px;

    border-bottom: 1px solid #f7f7f7 !important;
  }


  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > .lsp-mega-heading-item > a {

    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: auto !important;
    min-width: 0 !important;

    padding: 0;

    background: transparent !important;

    font-size: 20px;
    font-weight: 700;
  }


  /* 共通の青い丸矢印 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > .lsp-mega-heading-item > a::after {

    content: "›";

    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius: 50%;

    background: #2f80ed;
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    transform: translateY(-2px);
  }


  /* ブログ */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li:nth-child(2) {

    grid-column: 1;
    grid-row: 2;
  }


  /* 制作中 */
  #header-container-in.hlt-top-menu
  .menu-header > li:nth-child(3) > .sub-menu > li:nth-child(3) {

    grid-column: 2;
    grid-row: 2;
  }



  /* ==================================================
     11. 検索メニュー
     「検索」文字 → 細線SVG虫眼鏡
  ================================================== */

  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a {

    position: relative;

    width: 76px;
    height: 76px;

    box-sizing: border-box;

    padding: 0 8px 0 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    color: #111111;

    cursor: pointer;
  }


  /*
     Cocoonのcaption-wrapを
     flexレイアウトから外す

     「検索」という文字情報はHTML上に残し、
     画面上だけ非表示にする
  */
  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger .caption-wrap {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
  }


  /* SVG虫眼鏡 */
  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a::before {

    content: "";

    display: block;

width: 40px;
height: 40px;
flex: 0 0 40px;

    /*
       flexによる横縮みを禁止
       必ず45pxで表示する
    */
    flex: 0 0 45px;

    background-color: currentColor;

    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M15.1 15.1L20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M15.1 15.1L20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }


  /* 古い疑似要素を無効化 */
  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a::after {

    content: none !important;
    display: none !important;
  }


  /* hover時は青 */
  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger:hover > a,

  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a:hover {

    color: #2f80ed !important;
    background: transparent !important;
  }


  /* モーダルを閉じてフォーカスが戻った際の
     検索アイコンのフォーカス枠を非表示 */
  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a:focus,

  #header-container-in.hlt-top-menu
  .menu-header > li.lsp-search-trigger > a:focus-visible {

    outline: none !important;
    box-shadow: none !important;
  }



  /* ==================================================
     12. サイト背景 / メガメニュー暗幕
  ================================================== */

  /* 通常時のサイト背景 */
  body {
    background: #f5f5f5;
  }


  /* ヘッダー全体 */
  #header-container,
  #header-container-in,
  #header,
  #header-in,
  #navi,
  #navi-in {

    background: #f5f5f5 !important;
  }


  /*
     メガメニューOPEN時の暗幕

     暗幕         = z-index 900
     ヘッダー     = z-index 1000
     メガメニュー = z-index 1100

     ヘッダーとメガメニューは暗くせず、
     ページ本体だけを暗くする
  */
  body::before {

    content: "";

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.24);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.35s ease,
      visibility 0s linear 0.35s;

    z-index: 900;
  }


  /* メガメニュー表示中 */
  body.lsp-mega-open::before {

    opacity: 1;
    visibility: visible;

    transition:
      opacity 0.35s ease,
      visibility 0s linear 0s;
  }

}



/* ==================================================
   PCサポートLSP
   検索モーダル
================================================== */


/* ==================================================
   13. オーバーレイ
================================================== */

.lsp-search-modal {

  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 40px;

  background: rgba(20, 20, 20, 0.32);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 10000;
}


/* JSがモーダルを表示状態へ */
.lsp-search-modal.is-visible {

  visibility: visible;

  pointer-events: auto;
}


/* OPEN時の背景 */
.lsp-search-modal.is-open {

  opacity: 1;

  transition:
    opacity 0.22s ease;
}


/* CLOSE時の背景 */
.lsp-search-modal.is-closing {

  animation:
    lsp-search-overlay-close 0.55s forwards;
}


@keyframes lsp-search-overlay-close {

  0% {

    opacity: 1;
  }


  60% {

    opacity: 1;
  }


  100% {

    opacity: 0;
  }

}



/* ==================================================
   14. 白いモーダル本体
================================================== */

.lsp-search-panel {

  position: relative;

  width: min(900px, calc(100vw - 80px));
  max-height: calc(100vh - 100px);

  padding: 48px;

  overflow-y: auto;

  background: #ffffff;

  border-radius: 36px;

  box-sizing: border-box;

  /* OPEN前の初期位置 */
  opacity: 0;

  transform: translateY(60px);
}


/* ==================================================
   OPENアニメーション
   少し下からスッと上へ
================================================== */

.lsp-search-modal.is-open .lsp-search-panel {

  opacity: 1;

  transform: translateY(0);

  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}



/* ==================================================
   CLOSEアニメーション
   クッと下へ動いてから消える
================================================== */

.lsp-search-modal.is-closing .lsp-search-panel {

  animation:
    lsp-search-panel-close 0.55s forwards;
}


@keyframes lsp-search-panel-close {

  /* 最初 */
  0% {

    opacity: 1;

    transform: translateY(0);
  }


  /* ここまでは一切消えない
     下へ移動するだけ */
  60% {

    opacity: 1;

    transform: translateY(22px);
  }


  /* 下がり終わってから消える */
  100% {

    opacity: 0;

    transform: translateY(22px);
  }

}



/* ==================================================
   15. 見出し
================================================== */

.lsp-search-title {

  margin: 0 0 34px;

  font-size: 22px;
  font-weight: 700;

  text-align: center;
}



/* ==================================================
   16. 検索フォーム
================================================== */

.lsp-search-form {

  display: flex;

  width: 100%;
}


.lsp-search-input {

  width: 100%;
  height: 60px;

  padding: 0 20px;

  border: 1px solid #d9d9d9;
  border-radius: 10px 0 0 10px;

  background: #ffffff;

  font-size: 16px;

  box-sizing: border-box;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.lsp-search-input:focus {

  border-color: #2f80ed;

  box-shadow:
    0 0 0 2px rgba(47, 128, 237, 0.10);
}



/* ==================================================
   17. 検索ボタン
================================================== */

.lsp-search-submit {

  flex: 0 0 auto;

  width: 76px;
  height: 60px;

  border: 0;

  border-radius: 0 10px 10px 0;

  background: #2f80ed;
  color: #ffffff;

  cursor: pointer;

  font-size: 18px;

  transition: opacity 0.2s ease;
}


.lsp-search-submit:hover {

  opacity: 0.82;
}



/* ==================================================
   18. 将来用コンテンツ領域
================================================== */

.lsp-search-content {

  margin-top: 36px;
}


.lsp-search-placeholder {

  margin: 0;

  color: #777777;

  font-size: 14px;
}



/* ==================================================
   19. モーダル内の通常×ボタン
================================================== */

.lsp-search-close {

  position: absolute;

  top: 18px;
  right: 20px;

  width: 42px;
  height: 42px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: #333333;

  cursor: pointer;

  font-size: 30px;
  line-height: 1;
}



/* ==================================================
   20. 検索モーダル
       モーダル外で表示する追従×
================================================== */

/*
   モーダル枠外では通常カーソルを隠す
   → 追従×だけを表示
*/
.lsp-search-modal.is-open {
  cursor: none;
}


/*
   白いモーダル本体へ入ったら
   通常カーソルへ戻す
*/
.lsp-search-panel {
  cursor: auto;
}


/*
   モーダル内の操作可能要素は
   通常どおりポインター表示
*/
.lsp-search-panel button,
.lsp-search-panel a,
.lsp-search-panel label {
  cursor: pointer;
}


/*
   検索入力欄はテキストカーソル
*/
.lsp-search-panel input {
  cursor: text;
}


.lsp-search-close-cursor {
  position: fixed;

  top: 0;
  left: 0;

  width: 52px;
  height: 52px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background: #ffffff;
  color: #222222;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.14);

  font-size: 30px;
  line-height: 1;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -50%);

  transition:
    opacity 0.12s ease;

  z-index: 10001;
}


.lsp-search-close-cursor.is-visible {
  opacity: 1;
}



/* ==================================================
   21. モーダル表示中
================================================== */

body.lsp-search-open {

  overflow: hidden;
}



/* ==================================================
   22. タッチ端末では追従×を非表示
================================================== */

@media (hover: none), (pointer: coarse) {

  .lsp-search-close-cursor {

    display: none;
  }

}



/* ==================================================
   23. 小さい画面
================================================== */

@media screen and (max-width: 767px) {

  .lsp-search-modal {

    padding: 20px;
  }


  .lsp-search-panel {

    width: 100%;

    max-height:
      calc(100vh - 40px);

    padding:
      58px
      22px
      30px;

    border-radius: 24px;
  }


  .lsp-search-title {

    margin-bottom: 24px;

    font-size: 19px;
  }


  .lsp-search-input,
  .lsp-search-submit {

    height: 54px;
  }

}



/* ==================================================
   24. アニメーション軽減設定
================================================== */

@media (prefers-reduced-motion: reduce) {

  .lsp-search-modal,
  .lsp-search-panel,
  .lsp-search-close-cursor {

    transition: none !important;
  }


  .lsp-search-panel,
  .lsp-search-modal.is-open .lsp-search-panel,
  .lsp-search-modal.is-closing .lsp-search-panel {

    transform: none !important;
  }

}




/* ==================================================
   PCサポートLSP
   カスタムフッター
================================================== */


/* ==================================================
   25. Cocoon標準フッターを非表示
================================================== */

#footer {

  display: none !important;
}



/* ==================================================
   26. フッター全体
================================================== */

.lsp-footer {

  width: 100%;

  background: #525252;
  color: #ffffff;
}


.lsp-footer-inner {

  width: min(100% - 64px, 1180px);

  margin: 0 auto;

  padding:
    58px
    0
    34px;
}



/* ==================================================
   27. フッターカード配置

   上段：3等分
   下段：2等分
================================================== */

.lsp-footer-grid {

  display: grid;

  /*
     6分割ベース
     上段 = 2カラムずつ × 3
     下段 = 3カラムずつ × 2
  */
  grid-template-columns: repeat(6, minmax(0, 1fr));

  column-gap: 9px;
  row-gap: 9px;
}


/* ==================================================
   上段
================================================== */

/* 当店について */
.lsp-footer-about {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}


/* サービス案内 */
.lsp-footer-service {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}


/* ブログ */
.lsp-footer-blog {
  grid-column: 5 / 7;
  grid-row: 1;
}


/* お問い合わせ */
.lsp-footer-contact {
  grid-column: 5 / 7;
  grid-row: 2;
}


/* ==================================================
   下段
================================================== */

/* 運営方針・各種規約 */
.lsp-footer-policy {
  grid-column: 1 / 4;
  grid-row: 3;
}


/* 個人情報等の取り扱い方針 */
.lsp-footer-privacy {
  grid-column: 4 / 7;
  grid-row: 3;
}



/* ==================================================
   28. フッターカード共通
================================================== */

.lsp-footer-card {

  height: 100%;

  padding: 30px 34px;

  background: rgba(255, 255, 255, 0.035);

  border: none;

  box-sizing: border-box;
}


/* ==================================================
   カード見出し
================================================== */

.lsp-footer-card-title {

  margin: 0 0 18px;

  padding: 0;

  color: #ffffff;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}


.lsp-footer-card-title a,
.lsp-footer-card-title span {

  color: #ffffff;

  text-decoration: none;
}


.lsp-footer-card-title a:hover {

  color: #ffffff;

  opacity: 0.78;
}



/* ==================================================
   PC版フッター
   Cocoon等から付与される
   見出し用疑似要素を完全に無効化

   ブログ / お問い合わせの専用アイコンは
   a::afterなのでここでは消えない
================================================== */

@media screen and (min-width: 1024px) {

  .lsp-footer-card-title::before,
  .lsp-footer-card-title::after {

    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
  }


  .lsp-footer-card-title > a::before,
  .lsp-footer-card-title > span::before {

    content: none !important;

    display: none !important;
  }

}



/* ==================================================
   29. 子メニュー共通
================================================== */

.lsp-footer-submenu {

  margin: 0;
  padding: 0;

  list-style: none;
}


.lsp-footer-submenu-item {

  margin: 0;
  padding: 0;
}


.lsp-footer-submenu-item > a {

  display: inline-block;

  /*
     子メニューの縦間隔を圧縮
     以前は 4px 0
  */
  padding: 1px 0;

  color: #ffffff;

  font-size: 14px;
  line-height: 1.45;

  text-decoration: none;

  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}


.lsp-footer-submenu-item > a:hover {

  color: #dceaff;
}


/* ==================================================
   30. サービス案内 2カラム
================================================== */

.lsp-footer-service
.lsp-footer-submenu {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  column-gap: 58px;
  row-gap: 0;
}


/*
   現在の並び

   1 PCサポート
   2 PCサポート料金
   3 各種工事
   4 各種工事料金
   5 対応エリア
*/


.lsp-footer-service
.lsp-footer-submenu-item:nth-child(1) {

  grid-column: 1;
  grid-row: 1;
}


.lsp-footer-service
.lsp-footer-submenu-item:nth-child(2) {

  grid-column: 1;
  grid-row: 2;
}


.lsp-footer-service
.lsp-footer-submenu-item:nth-child(3) {

  grid-column: 2;
  grid-row: 1;
}


.lsp-footer-service
.lsp-footer-submenu-item:nth-child(4) {

  grid-column: 2;
  grid-row: 2;
}


.lsp-footer-service
.lsp-footer-submenu-item:nth-child(5) {

  grid-column: 1;
  grid-row: 3;

  margin-top: 12px;
}



/* 親サービスを少し強調 */
.lsp-footer-service
.lsp-footer-submenu-item:nth-child(1) > a,

.lsp-footer-service
.lsp-footer-submenu-item:nth-child(3) > a,

.lsp-footer-service
.lsp-footer-submenu-item:nth-child(5) > a {

  font-weight: 700;
}



/* ==================================================
   31. 運営方針 2カラム
================================================== */

.lsp-footer-policy
.lsp-footer-submenu {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  column-gap: 40px;
  row-gap: 0;
}



/* ==================================================
   32. 個人情報方針
================================================== */

.lsp-footer-privacy
.lsp-footer-submenu {

  display: flex;

  flex-direction: column;
}



/* ==================================================
   33. ブログ / お問い合わせ
   右側カード内を縦中央揃え
   白アイコン
================================================== */

.lsp-footer-blog,
.lsp-footer-contact {

  display: flex;

  align-items: center;
}


.lsp-footer-blog
.lsp-footer-card-title,

.lsp-footer-contact
.lsp-footer-card-title {

  margin: 0;

  font-size: 18px;
}


.lsp-footer-blog
.lsp-footer-card-title > a,

.lsp-footer-contact
.lsp-footer-card-title > a {

  display: inline-flex;

  align-items: center;

  gap: 10px;
}


/* ==================================================
   ブログ：太めの一覧アイコン
================================================== */

.lsp-footer-blog
.lsp-footer-card-title > a::after {

  content: "";

  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: inline-block;

  background-color: #ffffff;

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 6h11M8.5 12h11M8.5 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 6h11M8.5 12h11M8.5 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}


/* ==================================================
   お問い合わせ：塗りつぶしの白い封筒アイコン
================================================== */

.lsp-footer-contact
.lsp-footer-card-title > a::after {

  content: "";

  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: inline-block;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='white'/%3E%3Cpath d='M3.5 7.2 12 13.5l8.5-6.3' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ==================================================
   34. 最下段
================================================== */

.lsp-footer-bottom {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-top: 26px;

  padding:
    0
    4px;

  font-size: 13px;
}



/* ==================================================
   最下段ナビ
================================================== */

.lsp-footer-bottom-nav {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;
}


.lsp-footer-bottom-nav a,
.lsp-privacy-settings-trigger {

  color: #ffffff;

  font: inherit;

  text-decoration: none;
}


.lsp-footer-bottom-nav a:hover,
.lsp-privacy-settings-trigger:hover {

  color: #dceaff;
}



/* ==================================================
   プライバシー設定ボタン
================================================== */

.lsp-privacy-settings-trigger {

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}



/* ==================================================
   区切り線
================================================== */

.lsp-footer-bottom-separator {

  color:
    rgba(255, 255, 255, 0.72);
}



/* ==================================================
   コピーライト
================================================== */

.lsp-footer-copyright {

  flex: 0 0 auto;

  white-space: nowrap;

  color:
    rgba(255, 255, 255, 0.90);
}



/* ==================================================
   35. フッターロゴ
   Cocoon設定のフッターロゴを使用
================================================== */

.lsp-footer-logo-area {

  display: flex;

  justify-content: center;
  align-items: center;

  width: 100%;

  margin-top: 36px;

  padding-top: 6px;
}


/*
   Cocoon生成HTML

   .logo.logo-footer.logo-image
     └ a.site-name
        └ span.site-name-text
           └ img.footer-site-logo-image
*/

.lsp-footer-logo-area
.logo-footer {

  display: flex !important;

  justify-content: center !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
}


.lsp-footer-logo-area
.logo-footer > a,
.lsp-footer-logo-area
.site-name {

  display: inline-flex !important;

  justify-content: center !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  text-decoration: none !important;
}


.lsp-footer-logo-area
.site-name-text {

  display: inline-flex !important;

  justify-content: center !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


.lsp-footer-logo-area
.footer-site-logo-image {

  display: block !important;

  width: min(360px, 100%) !important;
  max-width: 360px !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;

  transform: none !important;
}



/* ==================================================
   1023px以下
   現在のモバイル表示サイズを維持
================================================== */

@media screen and (max-width: 1023px) {

  .lsp-footer-logo-area {

    margin-top: 30px !important;

    padding:
      0 !important;
  }


  .lsp-footer-logo-area
  .footer-site-logo-image {

    width:
      min(
        320px,
        78vw
      ) !important;

    max-width:
      min(
        320px,
        78vw
      ) !important;

    height:
      auto !important;
  }

}


/* ==================================================
   スマホ
================================================== */

@media screen and (max-width: 767px) {

  .lsp-footer-logo-area {
    margin-top: 30px;
  }


  .lsp-footer-logo-image {
    width: min(300px, 82vw);
  }

}

/* ==================================================
   PCサポートLSP
   プライバシー設定モーダル
================================================== */


/* ==================================================
   36. オーバーレイ
   検索モーダルと同じ開閉タイミング
================================================== */

.lsp-privacy-modal {

  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 40px;

  background:
    rgba(20, 20, 20, 0.42);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 10020;
}


.lsp-privacy-modal.is-visible {

  visibility: visible;

  pointer-events: auto;
}


/* ==================================================
   OPEN時の背景
================================================== */

.lsp-privacy-modal.is-open {

  opacity: 1;

  transition:
    opacity 0.22s ease;
}


/* ==================================================
   CLOSE時の背景
   検索モーダルと同じく
   少し残してからフェードアウト
================================================== */

.lsp-privacy-modal.is-closing {

  animation:
    lsp-privacy-overlay-close
    0.55s
    forwards;
}


@keyframes lsp-privacy-overlay-close {

  0% {

    opacity: 1;
  }


  60% {

    opacity: 1;
  }


  100% {

    opacity: 0;
  }

}



/* ==================================================
   37. モーダル本体
   検索モーダルと同じ開閉アニメーション
================================================== */

.lsp-privacy-panel {

  position: relative;

  width:
    min(
      760px,
      calc(100vw - 80px)
    );

  max-height:
    calc(100vh - 100px);

  overflow-y: auto;

  padding:
    46px
    48px
    38px;

  background: #ffffff;

  border-radius: 28px;

  box-sizing: border-box;


  /* OPEN前
     検索と同じ60px下 */
  opacity: 0;

  transform:
    translateY(60px);
}



/* ==================================================
   OPENアニメーション
   検索と同じ
================================================== */

.lsp-privacy-modal.is-open
.lsp-privacy-panel {

  opacity: 1;

  transform:
    translateY(0);

  transition:
    opacity
      0.55s
      ease,

    transform
      0.55s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );
}



/* ==================================================
   CLOSEアニメーション
   クッと下へ動いてから消える
================================================== */

.lsp-privacy-modal.is-closing
.lsp-privacy-panel {

  animation:
    lsp-privacy-panel-close
    0.55s
    forwards;
}


@keyframes lsp-privacy-panel-close {

  /* 最初 */
  0% {

    opacity: 1;

    transform:
      translateY(0);
  }


  /*
     ここまでは消さない
     22pxだけ下へ動かす
  */
  60% {

    opacity: 1;

    transform:
      translateY(22px);
  }


  /*
     最後にフェードアウト
  */
  100% {

    opacity: 0;

    transform:
      translateY(22px);
  }

}



/* ==================================================
   38. ヘッダー
================================================== */

.lsp-privacy-close {

  position: absolute;

  top: 18px;
  right: 20px;

  width: 42px;
  height: 42px;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #333333;

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}


.lsp-privacy-close:focus-visible {

  outline:
    2px solid #2f80ed;

  outline-offset: 2px;
}


.lsp-privacy-header {

  margin-bottom: 30px;

  padding-right: 40px;
}


.lsp-privacy-title {

  margin:
    0
    0
    10px;

  padding: 0;

  font-size: 24px;
  font-weight: 700;

  line-height: 1.45;
}


.lsp-privacy-description {

  margin: 0;

  color: #666666;

  font-size: 14px;
  line-height: 1.8;
}



/* ==================================================
   39. 設定項目
================================================== */

.lsp-privacy-options {

  border-top:
    1px solid #dddddd;
}


.lsp-privacy-option {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 32px;

  padding:
    22px
    0;

  border-bottom:
    1px solid #dddddd;
}


.lsp-privacy-option-text {

  flex: 1 1 auto;

  min-width: 0;
}


.lsp-privacy-option-text h3 {

  margin:
    0
    0
    5px;

  padding: 0;

  font-size: 16px;
  font-weight: 700;

  line-height: 1.5;
}


.lsp-privacy-option-text p {

  margin: 0;

  color: #666666;

  font-size: 13px;
  line-height: 1.7;
}



/* ==================================================
   必須
================================================== */

.lsp-privacy-required {

  flex: 0 0 auto;

  padding:
    7px
    12px;

  border-radius: 999px;

  background: #eeeeee;

  color: #555555;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
}



/* ==================================================
   40. ON / OFF スイッチ
================================================== */

.lsp-privacy-switch {

  position: relative;

  flex: 0 0 auto;

  display: inline-flex;

  cursor: pointer;
}


.lsp-privacy-switch input {

  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;

  overflow: hidden;

  clip:
    rect(
      0,
      0,
      0,
      0
    );

  white-space: nowrap;
}


.lsp-privacy-switch-ui {

  position: relative;

  display: block;

  width: 52px;
  height: 28px;

  border-radius: 999px;

  background: #c7c7c7;

  transition:
    background 0.20s ease;
}


.lsp-privacy-switch-ui::after {

  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.22);

  transition:
    transform 0.20s ease;
}


.lsp-privacy-switch
input:checked
+
.lsp-privacy-switch-ui {

  background: #2f80ed;
}


.lsp-privacy-switch
input:checked
+
.lsp-privacy-switch-ui::after {

  transform:
    translateX(24px);
}


.lsp-privacy-switch
input:focus-visible
+
.lsp-privacy-switch-ui {

  outline:
    2px solid #2f80ed;

  outline-offset: 3px;
}



/* ==================================================
   41. 関連リンク / 操作ボタン
================================================== */

.lsp-privacy-links {

  display: flex;

  flex-wrap: wrap;

  gap:
    8px
    20px;

  margin-top: 22px;
}


.lsp-privacy-links a {

  color: #2f80ed;

  font-size: 13px;

  text-decoration: underline;

  text-underline-offset: 3px;
}


.lsp-privacy-actions {

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 10px;

  margin-top: 26px;
}


.lsp-privacy-actions button {

  min-height: 48px;

  padding:
    10px
    14px;

  border-radius: 8px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    opacity 0.18s ease,
    background 0.18s ease;
}


.lsp-privacy-reject {

  border:
    1px solid #cccccc;

  background: #ffffff;

  color: #333333;
}


.lsp-privacy-accept-all {

  border:
    1px solid #2f80ed;

  background: #ffffff;

  color: #2f80ed;
}


.lsp-privacy-save {

  border:
    1px solid #2f80ed;

  background: #2f80ed;

  color: #ffffff;
}


.lsp-privacy-actions
button:hover {

  opacity: 0.80;
}


.lsp-privacy-saved-message {

  min-height: 22px;

  margin:
    12px
    0
    0;

  color: #2f80ed;

  font-size: 13px;

  text-align: center;
}



/* ==================================================
   モーダル表示中
================================================== */

body.lsp-privacy-open {

  overflow: hidden;
}



/* ==================================================
   42. プライバシーモーダル
       モーダル外で表示する追従×
================================================== */

/*
   モーダル枠外では通常カーソルを隠す
   → 追従×だけを表示
*/
.lsp-privacy-modal.is-open {
  cursor: none;
}


/*
   白いモーダル本体へ入ったら
   通常カーソルへ戻す
*/
.lsp-privacy-panel {
  cursor: auto;
}


/*
   モーダル内の操作可能要素は
   通常どおりポインター表示
*/
.lsp-privacy-panel button,
.lsp-privacy-panel a,
.lsp-privacy-panel label,
.lsp-privacy-panel input {
  cursor: pointer;
}


.lsp-privacy-close-cursor {
  position: fixed;

  top: 0;
  left: 0;

  width: 52px;
  height: 52px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background: #ffffff;
  color: #222222;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.14);

  font-size: 30px;
  line-height: 1;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -50%);

  transition:
    opacity 0.12s ease;

  z-index: 10021;
}


.lsp-privacy-close-cursor.is-visible {
  opacity: 1;
}


/* ==================================================
   タッチ端末では追従×を非表示
================================================== */

@media (hover: none), (pointer: coarse) {

  .lsp-privacy-modal.is-open {
    cursor: auto;
  }


  .lsp-privacy-close-cursor {
    display: none;
  }

}


/* ==================================================
   43. スマホ用
   ※本格スマホ調整は次工程
================================================== */

@media screen and (max-width: 767px) {

  .lsp-privacy-modal {
    padding: 18px;
  }


  .lsp-privacy-panel {
    width: 100%;

    max-height:
      calc(100vh - 36px);

    padding:
      52px
      22px
      28px;

    border-radius: 22px;
  }


  .lsp-privacy-title {
    font-size: 21px;
  }


  .lsp-privacy-option {
    gap: 18px;

    padding:
      18px
      0;
  }


  .lsp-privacy-actions {
    grid-template-columns: 1fr;
  }

}


/* ==================================================
   44. モバイルヘッダー / ハンバーガードロワー

   1024px以上 = PC
   1023px以下 = モバイル
================================================== */


/* ==================================================
   PCではモバイル専用UIを非表示
================================================== */

.lsp-mobile-header-actions,
.lsp-mobile-drawer-overlay,
.lsp-mobile-drawer {
  display: none;
}



/* ==================================================
   1023px以下
================================================== */

@media screen and (max-width: 1023px) {


  /* ==================================================
     ヘッダー固定
  ================================================== */

  #header-container,
  #header-container.fixed-header {
    position: sticky !important;

    top: 0 !important;
    left: auto !important;

    width: 100% !important;

    background: #f5f5f5 !important;

    z-index: 1200;
  }


  #header-fixed {
    padding-top: 0 !important;
  }



  /* ==================================================
     ヘッダー本体
     左ロゴ / 右検索＋ハンバーガー
  ================================================== */

  #header-container-in.hlt-top-menu {
    position: relative;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 64px !important;
    height: 64px !important;

    margin: 0 !important;

    padding:
      0
      10px
      0
      14px !important;

    box-sizing: border-box;
  }



  /* ==================================================
     ロゴ側
  ================================================== */

  #header-container-in.hlt-top-menu
  #header {
    flex:
      0
      1
      auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #header-container-in.hlt-top-menu
  #header-in {
    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  #header-container-in.hlt-top-menu
  .tagline {
    display: none !important;
  }


  #header-container-in.hlt-top-menu
  .logo,
  #header-container-in.hlt-top-menu
  .logo-header,
  #header-container-in.hlt-top-menu
  .logo > a,
  #header-container-in.hlt-top-menu
  .site-name-text {
    flex:
      0
      1
      auto !important;

    display: flex !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }


  #header-container-in.hlt-top-menu
  .header-site-logo-image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width:
      min(
        330px,
        calc(100vw - 140px)
      ) !important;

    max-height: 54px !important;

    margin: 0 !important;

    object-fit: contain;

    transform: none !important;
  }



  /* ==================================================
     PCナビ非表示
  ================================================== */

  #header-container-in.hlt-top-menu
  #navi {
    display: none !important;
  }



  /* ==================================================
     Cocoon標準モバイルメニューを非表示
  ================================================== */

  .mobile-menu-buttons {
    display: none !important;
  }



  /* ==================================================
     右側
     検索 / ハンバーガー
  ================================================== */

  .lsp-mobile-header-actions {
    flex:
      0
      0
      auto !important;

    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-end !important;
    align-items: center !important;

    height: 64px !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 0 !important;
  }


  .lsp-mobile-search-button,
  .lsp-mobile-menu-button {
    position: relative;

    flex:
      0
      0
      52px;

    width: 52px;
    height: 64px;

    display: flex;

    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #222222;

    cursor: pointer;
  }



  /* ==================================================
     検索アイコン
  ================================================== */

  .lsp-mobile-search-button::before {
    content: "";

    display: block;

    width: 32px;
    height: 32px;

    background-color:
      currentColor;

    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M15.1 15.1L20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")
      center / contain no-repeat;

    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M15.1 15.1L20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }



  /* ==================================================
     ハンバーガーアイコン
  ================================================== */

  .lsp-mobile-menu-icon {
    position: relative;

    display: block;

    width: 30px;
    height: 2px;

    background: #222222;

    border-radius: 999px;
  }


  .lsp-mobile-menu-icon::before,
  .lsp-mobile-menu-icon::after {
    content: "";

    position: absolute;

    left: 0;

    width: 30px;
    height: 2px;

    background: #222222;

    border-radius: 999px;
  }


  .lsp-mobile-menu-icon::before {
    top: -9px;
  }


  .lsp-mobile-menu-icon::after {
    top: 9px;
  }



  /* ==================================================
     OPEN中
  ================================================== */

  body.lsp-mobile-drawer-open {
    overflow: hidden;
  }



  /* ==================================================
     暗幕
  ================================================== */

  .lsp-mobile-drawer-overlay {
    position: fixed;

    inset: 0;

    display: block;

    background:
      rgba(0, 0, 0, 0.34);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.30s ease,
      visibility 0s linear 0.30s;

    z-index: 9990;
  }


  .lsp-mobile-drawer-overlay.is-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
      opacity 0.30s ease,
      visibility 0s linear 0s;
  }



  /* ==================================================
     右スライドドロワー
  ================================================== */

  .lsp-mobile-drawer {
    position: fixed;

    top: 0;
    right: 0;

    display: flex;

    flex-direction: column;

    width:
      min(
        88vw,
        380px
      );

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
      -10px
      0
      32px
      rgba(0, 0, 0, 0.14);

    visibility: hidden;

    transform:
      translateX(100%);

    transition:
      transform
        0.42s
        cubic-bezier(
          0.22,
          1,
          0.36,
          1
        ),
      visibility
        0s
        linear
        0.42s;

    z-index: 9991;
  }


  .lsp-mobile-drawer.is-open {
    visibility: visible;

    transform:
      translateX(0);

    transition:
      transform
        0.42s
        cubic-bezier(
          0.22,
          1,
          0.36,
          1
        ),
      visibility
        0s
        linear
        0s;
  }



  /* ==================================================
     ドロワーヘッダー
  ================================================== */

  .lsp-mobile-drawer-header {
    flex:
      0
      0
      64px;

    display: flex;

    justify-content:
      space-between;

    align-items: center;

    height: 64px;

    padding:
      0
      10px
      0
      24px;

    border-bottom:
      1px solid #e6e6e6;

    box-sizing: border-box;
  }


  .lsp-mobile-drawer-title {
    color: #222222;

    font-size: 18px;
    font-weight: 700;
  }


  .lsp-mobile-drawer-close {
    width: 50px;
    height: 50px;

    display: flex;

    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #222222;

    font-size: 32px;
    line-height: 1;

    cursor: pointer;
  }



  /* ==================================================
     ドロワーナビ
  ================================================== */

  .lsp-mobile-drawer-nav {
    flex:
      1
      1
      auto;

    overflow-y: auto;

    overscroll-behavior:
      contain;
  }


  .lsp-mobile-drawer-list,
  .lsp-mobile-drawer-submenu {
    margin: 0;
    padding: 0;

    list-style: none;
  }


  .lsp-mobile-drawer-item {
    margin: 0;
    padding: 0;

    border-bottom:
      1px solid #e6e6e6;
  }


  .lsp-mobile-drawer-link {
    display: flex;

    align-items: center;

    min-height: 64px;

    padding:
      14px
      24px;

    box-sizing: border-box;

    color: #222222 !important;

    background: transparent;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.5;

    text-decoration: none !important;
  }



/* ==================================================
   親リンク + アコーディオン
================================================== */

.lsp-mobile-drawer-row {
  display: flex;

  align-items: stretch;

  width: 100%;
}


.lsp-mobile-drawer-row
.lsp-mobile-drawer-link {
  flex:
    1
    1
    auto;

  min-width: 0;
}


.lsp-mobile-accordion-button {
  position: relative;

  flex:
    0
    0
    64px;

  width: 64px;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}



  /* ==================================================
     アコーディオン矢印
  ================================================== */

  .lsp-mobile-accordion-icon {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 10px;
    height: 10px;

    border-right:
      2px solid #555555;

    border-bottom:
      2px solid #555555;

    transform:
      translate(
        -50%,
        -65%
      )
      rotate(45deg);

    transition:
      transform 0.22s ease;
  }


  .lsp-mobile-drawer-item.is-accordion-open
  .lsp-mobile-accordion-icon {
    transform:
      translate(
        -50%,
        -35%
      )
      rotate(-135deg);
  }



  /* ==================================================
     子メニュー
  ================================================== */

  .lsp-mobile-drawer-submenu {
    max-height: 0;

    overflow: hidden;

    background: #f7f7f7;

    transition:
      max-height 0.32s ease;
  }


  .lsp-mobile-drawer-item.is-accordion-open
  .lsp-mobile-drawer-submenu {
    max-height: 600px;
  }


  .lsp-mobile-drawer-subitem {
    margin: 0;
    padding: 0;

    border-top:
      1px solid #e9e9e9;
  }


  .lsp-mobile-drawer-subitem > a {
    display: block;

    padding:
      14px
      28px
      14px
      38px;

    color: #444444 !important;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.55;

    text-decoration: none !important;
  }



  /* ==================================================
     hover可能端末
  ================================================== */

  @media (hover: hover) {

    .lsp-mobile-search-button:hover,
    .lsp-mobile-menu-button:hover,
    .lsp-mobile-drawer-close:hover,
    .lsp-mobile-accordion-button:hover {
      color: #2f80ed;
    }


    .lsp-mobile-drawer-link:hover,
    .lsp-mobile-drawer-subitem > a:hover {
      color: #2f80ed !important;

      background:
        rgba(
          47,
          128,
          237,
          0.045
        );
    }

  }

}



/* ==================================================
   834px以下
   Cocoon側モバイルレイアウトの再上書き

   ロゴの縦位置を64pxヘッダー中央へ固定
================================================== */

@media screen and (max-width: 834px) {

  #header-container-in.hlt-top-menu,
  #header-container-in.hlt-top-menu
  #header,
  #header-container-in.hlt-top-menu
  #header-in {
    min-height: 64px !important;
    height: 64px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  #header-container-in.hlt-top-menu
  #header-in {
    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-start !important;
    align-items: center !important;
  }


  #header-container-in.hlt-top-menu
  .logo,
  #header-container-in.hlt-top-menu
  .logo-header,
  #header-container-in.hlt-top-menu
  .logo > a,
  #header-container-in.hlt-top-menu
  .site-name-text {
    position: static !important;

    display: flex !important;

    justify-content: flex-start !important;
    align-items: center !important;

    height: 64px !important;
    min-height: 64px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    line-height:
      1 !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;
  }


  #header-container-in.hlt-top-menu
  .header-site-logo-image {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-height:
      54px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    vertical-align:
      middle !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;
  }


  .lsp-mobile-header-actions {
    height:
      64px !important;

    align-items:
      center !important;

    margin-top:
      0 !important;

    margin-bottom:
      0 !important;
  }


  .lsp-mobile-search-button,
  .lsp-mobile-menu-button {
    height:
      64px !important;

    margin-top:
      0 !important;

    margin-bottom:
      0 !important;
  }

}



/* ==================================================
   WordPress管理バー
   782px以下
================================================== */

@media screen and (max-width: 782px) {

  body.admin-bar
  #header-container,
  body.admin-bar
  #header-container.fixed-header {
    top: 46px !important;
  }


  body.admin-bar
  .lsp-mobile-drawer-overlay {
    top: 46px;
  }


  body.admin-bar
  .lsp-mobile-drawer {
    top: 46px;

    height:
      calc(
        100dvh - 46px
      );
  }

}



/* ==================================================
   WordPress管理バー
   783px ～ 1023px
================================================== */

@media screen and (min-width: 783px)
and (max-width: 1023px) {

  body.admin-bar
  #header-container,
  body.admin-bar
  #header-container.fixed-header {
    top: 32px !important;
  }


  body.admin-bar
  .lsp-mobile-drawer-overlay {
    top: 32px;
  }


  body.admin-bar
  .lsp-mobile-drawer {
    top: 32px;

    height:
      calc(
        100dvh - 32px
      );
  }

}



/* ==================================================
   480px以下
================================================== */

@media screen and (max-width: 480px) {

  #header-container-in.hlt-top-menu {
    padding:
      0
      4px
      0
      8px !important;
  }


  #header-container-in.hlt-top-menu
  .header-site-logo-image {
    max-width:
      calc(
        100vw - 115px
      ) !important;

    max-height:
      50px !important;
  }


  .lsp-mobile-search-button,
  .lsp-mobile-menu-button {
    flex-basis:
      48px;

    width:
      48px;
  }


  .lsp-mobile-search-button::before {
    width:
      29px;

    height:
      29px;
  }


  .lsp-mobile-menu-icon,
  .lsp-mobile-menu-icon::before,
  .lsp-mobile-menu-icon::after {
    width:
      28px;
  }


  .lsp-mobile-drawer {
    width:
      min(
        92vw,
        360px
      );
  }

}

/* ==================================================
   45. モバイルフッター
       JUKI風アコーディオン

   1024px以上 = PC版フッター
   1023px以下 = モバイルフッター
================================================== */


/* ==================================================
   PC・モバイル共通
   フッター背景色
================================================== */

#lsp-footer,
.lsp-footer,
#lsp-footer .lsp-footer-inner {
  background:
    #575757 !important;
}


/* ==================================================
   PC版
   モバイル専用アコーディオンボタンを完全非表示
================================================== */

@media screen and (min-width: 1024px) {

  .lsp-footer-mobile-toggle {
    display:
      none !important;
  }

}



/* ==================================================
   1023px以下
================================================== */

@media screen and (max-width: 1023px) {


  /* ==================================================
     フッター全体
  ================================================== */

  .lsp-footer {
    width:
      100% !important;

    background:
      #575757 !important;
  }


  .lsp-footer-inner {
    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      22px
      20px
      30px !important;

    background:
      #575757 !important;

    box-sizing:
      border-box !important;
  }



  /* ==================================================
     PC版グリッドを完全解除
  ================================================== */

  .lsp-footer-grid {
    display:
      flex !important;

    flex-direction:
      column !important;

    width:
      100% !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    column-gap:
      0 !important;

    row-gap:
      0 !important;

    gap:
      0 !important;

    border-top:
      none !important;
  }



  /* ==================================================
     各カードのPC版grid配置を解除
  ================================================== */

  .lsp-footer-about,
  .lsp-footer-service,
  .lsp-footer-blog,
  .lsp-footer-contact,
  .lsp-footer-policy,
  .lsp-footer-privacy {
    grid-column:
      auto !important;

    grid-row:
      auto !important;

    width:
      100% !important;

    margin:
      0 !important;
  }



  /* ==================================================
     モバイル表示順
  ================================================== */

  .lsp-footer-about {
    order:
      1 !important;
  }


  .lsp-footer-service {
    order:
      2 !important;
  }


  .lsp-footer-policy {
    order:
      3 !important;
  }


  .lsp-footer-privacy {
    order:
      4 !important;
  }


  .lsp-footer-blog {
    order:
      5 !important;
  }


  .lsp-footer-contact {
    order:
      6 !important;
  }



  /* ==================================================
     親カード
     区切り線
  ================================================== */

  .lsp-footer-card {
    display:
      block !important;

    width:
      100% !important;

    height:
      auto !important;

    margin:
      0 !important;

    padding:
      0 !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-bottom:
      0.5px solid
      #4F5154 !important;

    box-sizing:
      border-box !important;
  }



  /* ==================================================
     親見出し
  ================================================== */

  .lsp-footer-card-title {
    position:
      relative !important;

    display:
      flex !important;

    align-items:
      center !important;

    width:
      100% !important;

    min-height:
      70px !important;

    margin:
      0 !important;

    padding:
      0
      0
      0
      4px !important;

    box-sizing:
      border-box !important;

    color:
      #ffffff !important;

    font-size:
      20px !important;

    font-weight:
      700 !important;

    line-height:
      1.5 !important;
  }


  .lsp-footer-card-title > a,
  .lsp-footer-card-title > span {
    flex:
      1
      1
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    min-width:
      0 !important;

    min-height:
      70px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    color:
      #ffffff !important;

    background:
      transparent !important;

    text-decoration:
      none !important;
  }



  /* ==================================================
     アコーディオン ＋
  ================================================== */

  .lsp-footer-mobile-toggle {
    position:
      relative !important;

    flex:
      0
      0
      64px !important;

    display:
      block !important;

    width:
      64px !important;

    height:
      70px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;

    cursor:
      pointer !important;
  }


  .lsp-footer-mobile-toggle-icon {
    position:
      absolute !important;

    top:
      50% !important;

    left:
      50% !important;

    display:
      block !important;

    width:
      18px !important;

    height:
      2px !important;

    background:
      #ffffff !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }


  .lsp-footer-mobile-toggle-icon::after {
    content:
      "" !important;

    position:
      absolute !important;

    top:
      50% !important;

    left:
      50% !important;

    width:
      18px !important;

    height:
      2px !important;

    background:
      #ffffff !important;

    transform:
      translate(
        -50%,
        -50%
      )
      rotate(
        90deg
      ) !important;

    transition:
      transform
      0.22s
      ease !important;
  }


  .lsp-footer-mobile-accordion.is-mobile-open
  .lsp-footer-mobile-toggle-icon::after {
    transform:
      translate(
        -50%,
        -50%
      )
      rotate(
        0deg
      ) !important;
  }



  /* ==================================================
     子メニュー全体
  ================================================== */

  .lsp-footer-card
  .lsp-footer-submenu {
    display:
      block !important;

    width:
      100% !important;

    max-height:
      0;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

    opacity:
      0;

    list-style:
      none !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    transition:
      max-height
      0.32s
      ease,
      opacity
      0.22s
      ease !important;
  }


  .lsp-footer-card.is-mobile-open
  .lsp-footer-submenu {
    opacity:
      1;
  }



  /* ==================================================
     PC版サービス / 規約の2列配置を解除
  ================================================== */

  .lsp-footer-service
  .lsp-footer-submenu,

  .lsp-footer-policy
  .lsp-footer-submenu,

  .lsp-footer-privacy
  .lsp-footer-submenu {
    display:
      block !important;

    grid-template-columns:
      none !important;

    column-gap:
      0 !important;

    row-gap:
      0 !important;

    gap:
      0 !important;
  }



  /* ==================================================
     子メニュー項目
     ・項目ごとに線
     ・直リンクなので右端に ＞
  ================================================== */

  .lsp-footer-submenu-item {
    display:
      block !important;

    position:
      relative !important;

    width:
      100% !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border-top:
      0.5px solid
      #4F5154 !important;
  }


  .lsp-footer-submenu-item > a {
    position:
      relative !important;

    display:
      flex !important;

    align-items:
      center !important;

    width:
      100% !important;

    min-height:
      62px !important;

    padding:
      12px
      50px
      12px
      18px !important;

    box-sizing:
      border-box !important;

    color:
      rgba(
        255,
        255,
        255,
        0.92
      ) !important;

    background:
      transparent !important;

    font-size:
      18px !important;

    font-weight:
      500 !important;

    line-height:
      1.5 !important;

    text-decoration:
      none !important;
  }


  .lsp-footer-submenu-item > a::after {
    content:
      "›" !important;

    position:
      absolute !important;

    top:
      50% !important;

    right:
      18px !important;

    color:
      #ffffff !important;

    font-size:
      28px !important;

    font-weight:
      400 !important;

    line-height:
      1 !important;

    transform:
      translateY(
        -52%
      ) !important;
  }



  /* ==================================================
     ブログ / お問い合わせ
     直接リンク → ＞
  ================================================== */

  .lsp-footer-mobile-direct
  .lsp-footer-card-title {
    min-height:
      70px !important;
  }


  .lsp-footer-mobile-direct
  .lsp-footer-card-title > a {
    position:
      relative !important;

    width:
      100% !important;

    min-height:
      70px !important;

    padding-right:
      58px !important;
  }


  .lsp-footer-blog
  .lsp-footer-card-title > a::after,

  .lsp-footer-contact
  .lsp-footer-card-title > a::after {
    content:
      "›" !important;

    position:
      absolute !important;

    top:
      50% !important;

    right:
      18px !important;

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    margin:
      0 !important;

    background:
      none !important;

    background-color:
      transparent !important;

    color:
      #ffffff !important;

    font-size:
      30px !important;

    font-weight:
      400 !important;

    line-height:
      1 !important;

    transform:
      translateY(
        -52%
      ) !important;

    -webkit-mask:
      none !important;

    mask:
      none !important;
  }



  /* ==================================================
     フッター下部
  ================================================== */

  .lsp-footer-bottom {
    display:
      block !important;

    width:
      100% !important;

    margin-top:
      28px !important;

    padding:
      0 !important;
  }



  /* ==================================================
     サイトマップ等
  ================================================== */

  .lsp-footer-bottom-nav {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;

    gap:
      12px
      10px !important;

    width:
      100% !important;

    margin:
      0 !important;

    align-items:
      start !important;
  }


  .lsp-footer-bottom-separator {
    display:
      none !important;
  }


  .lsp-footer-bottom-nav a,
  .lsp-privacy-settings-trigger {
    display:
      block !important;

    width:
      100% !important;

    margin:
      0 !important;

    padding:
      8px
      2px !important;

    box-sizing:
      border-box !important;

    color:
      #ffffff !important;

    font-size:
      15px !important;

    line-height:
      1.45 !important;

    text-align:
      center !important;

    text-decoration:
      none !important;
  }



  /* ==================================================
     コピーライト
     上下線は左右いっぱい
  ================================================== */

  .lsp-footer-copyright {
    position:
      relative !important;

    display:
      block !important;

    width:
      100% !important;

    margin:
      20px
      0
      0 !important;

    padding:
      16px
      0 !important;

    border:
      0 !important;

    color:
      #ffffff !important;

    font-size:
      13px !important;

    line-height:
      1.5 !important;

    text-align:
      center !important;

    box-sizing:
      border-box !important;
  }


  .lsp-footer-copyright::before,
  .lsp-footer-copyright::after {
    content:
      "" !important;

    position:
      absolute !important;

    left:
      -20px !important;

    width:
      calc(
        100% + 40px
      ) !important;

    height:
      0 !important;

    border-top:
      0.5px solid
      #4F5154 !important;

    pointer-events:
      none !important;
  }


  .lsp-footer-copyright::before {
    top:
      0 !important;
  }


  .lsp-footer-copyright::after {
    bottom:
      0 !important;
  }



  /* ==================================================
     フッターロゴ
  ================================================== */

  .lsp-footer-logo-area {
    display:
      flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;

    width:
      100% !important;

    margin-top:
      30px !important;

    padding:
      0 !important;
  }


  .lsp-footer-logo-link {
    display:
      inline-flex !important;

    justify-content:
      center !important;

    align-items:
      center !important;
  }


  .lsp-footer-logo-image {
    display:
      block !important;

    width:
      min(
        320px,
        78vw
      ) !important;

    height:
      auto !important;

    margin:
      0 !important;
  }

}


/* ==================================================
   PCサポートLSP
   記事エリア・サイドバー・見出しデザイン
================================================== */


/* ==================================================
   1. メインカラム / サイドバー
================================================== */

#main,
#sidebar {

  background-color:
    #f4f4f4;
}



/* ==================================================
   2. H2～H4 共通
   Cocoon標準装飾をリセット
================================================== */

.article
.entry-content
h2.wp-block-heading,

.article
.entry-content
h3.wp-block-heading,

.article
.entry-content
h4.wp-block-heading {

  position:
    relative;

  margin-left:
    0;

  margin-right:
    0;

  color:
    #333333;

  font-weight:
    700;

  line-height:
    1.5;

  border-radius:
    0;

  box-shadow:
    none;
}



/* ==================================================
   3. H2

   背景：#f4f4f4
   上下線：#19448e
================================================== */

.article
.entry-content
h2.wp-block-heading {

  margin-top:
    3em;

  margin-bottom:
    1.4em;

  padding:
    16px
    20px;

  font-size:
    26px;

  background:
    #f4f4f4;

  border-top:
    2px solid #19448e;

  border-right:
    none;

  border-bottom:
    2px solid #19448e;

  border-left:
    none;
}



/* ==================================================
   4. H3

   背景：#f4f4f4

   下線
   左1/3：#19448e
   右2/3：#e8ecef
================================================== */

.article
.entry-content
h3.wp-block-heading {

  margin-top:
    2.2em;

  margin-bottom:
    1.1em;

  padding:
    12px
    16px
    14px;

  font-size:
    20px;

  border:
    none;

  background:
    linear-gradient(
      to right,

      #19448e 0%,
      #19448e 33.333%,

      #e8ecef 33.333%,
      #e8ecef 100%
    )
    left bottom / 100% 2px
    no-repeat,

    #f4f4f4;
}



/* ==================================================
   5. H4

   控えめな小見出し
   背景：なし
   左線：#19448e
================================================== */

.article
.entry-content
h4.wp-block-heading {

  margin-top:
    1.8em;

  margin-bottom:
    0.9em;

  padding:
    8px
    0
    8px
    12px;

  font-size:
    18px;

  background:
    transparent;

  border-top:
    none;

  border-right:
    none;

  border-bottom:
    none;

  border-left:
    4px solid #19448e;
}



/* ==================================================
   6. スマホ
================================================== */

@media screen and (max-width: 767px) {


  /* ==================================================
     H2
  ================================================== */

  .article
  .entry-content
  h2.wp-block-heading {

    padding:
      14px
      16px;

    font-size:
      22px;
  }



  /* ==================================================
     H3
  ================================================== */

  .article
  .entry-content
  h3.wp-block-heading {

    padding:
      10px
      14px
      12px;

    font-size:
      18px;

    background:
      linear-gradient(
        to right,

        #19448e 0%,
        #19448e 33.333%,

        #e8ecef 33.333%,
        #e8ecef 100%
      )
      left bottom / 100% 2px
      no-repeat,

      #f4f4f4;
  }



  /* ==================================================
     H4
  ================================================== */

  .article
  .entry-content
  h4.wp-block-heading {

    padding:
      7px
      0
      7px
      10px;

    font-size:
      16px;
  }

}