@charset "UTF-8";
/* ==========================================================================
   ヘッダー・検索フォーム・フッター
   --------------------------------------------------------------------------
   Figma 1:5（PCヘッダー）/ 3:1628（SPヘッダー）/ 4:450（SP検索パネル）

   検索フォームは4か所とも Cocoon の searchform.php（.search-box）を使う。
     1. PCヘッダー（.menu-search）
     2. トップの「お困りですか？」（.lsm-hero）… top.css
     3. 検索結果ページの再検索（.lsm-searchhead）… search.css
     4. SPの検索パネル（#search-menu-content）
   共通の形（アイコンを左に置いた pill 型）はここで作り、
   高さと余白だけを各所で上書きする。
   ========================================================================== */

/* --------------------------------------------------------------------------
   検索フォームの共通形
   -------------------------------------------------------------------------- */
.menu-search .search-box,
.lsm-hero .search-box,
.lsm-searchhead .search-box,
#search-menu-content .search-box{
  position: relative;
  margin:   0;
}

.menu-search .search-edit,
.lsm-hero .search-edit,
.lsm-searchhead .search-edit,
#search-menu-content .search-edit{
  box-sizing:    border-box;
  width:         100%;
  margin:        0;
  border:        1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background:    var(--c-bg);
  color:         var(--c-ink);
  font-family:   inherit;
  line-height:   normal;
  transition:    border-color .15s;
}
.menu-search .search-edit::placeholder,
.lsm-hero .search-edit::placeholder,
.lsm-searchhead .search-edit::placeholder,
#search-menu-content .search-edit::placeholder{
  color: var(--c-ink-4);
}
.menu-search .search-edit:focus,
.lsm-hero .search-edit:focus,
.lsm-searchhead .search-edit:focus,
#search-menu-content .search-edit:focus{
  border-color: var(--c-brand);
  outline:      none;
}

/* 虫めがねは入力欄の左に置く。押しても送信できるよう button のまま残し、
   Cocoon のアイコンフォントは Figma の形の SVG に差し替える */
.menu-search .search-submit,
.lsm-hero .search-submit,
.lsm-searchhead .search-submit,
#search-menu-content .search-submit{
  position:  absolute;
  top:       50%;
  right:     auto;
  width:     18px;
  height:    18px;
  padding:   0;
  border:    0;
  transform: translateY(-50%);
  background-color: var(--c-ink);
  -webkit-mask: var(--icon-search) no-repeat center / contain;
          mask: var(--icon-search) no-repeat center / contain;
  cursor:    pointer;
}
.menu-search .search-submit .fa,
.lsm-hero .search-submit .fa,
.lsm-searchhead .search-submit .fa,
#search-menu-content .search-submit .fa{
  display: none;
}

/* --------------------------------------------------------------------------
   1. PCヘッダーの検索窓（230×36）
   -------------------------------------------------------------------------- */
.navi-in > ul > li.menu-search{
  width:  230px;
  height: 60px;
  display: flex;
  align-items: center;
}
.menu-search .search-box{ width: 100%; }
.menu-search .search-edit{
  height:    36px;
  padding:   0 14px 0 40px;
  font-size: 14px;
}
.menu-search .search-submit{ left: 14px; }

/* 1024〜1255px は Figma の幅（ボタン176px×3＋検索230px）だと1行に収まらず
   検索窓が2段目に落ちるので、検索窓を細くする。
   ボタンは170pxより細くすると「無料で使ってみる」の文字に矢印が重なる */
@media screen and (max-width: 1255px){
  .navi-in > ul.menu-header > li{ width: 170px; }
  .navi-in > ul.menu-header > li.menu-search{ width: 150px; }
}

/* --------------------------------------------------------------------------
   フッター（Figma 4:108）
   -------------------------------------------------------------------------- */
#footer{
  background: var(--c-bg-sub);
  border-top: 1px solid var(--c-line);
}
.footer-bottom{
  padding-block: 24px;
}
.copyright{
  color:       var(--c-ink);
  font-size:   12px;
  line-height: 22px;
}

/* --------------------------------------------------------------------------
   SPヘッダー（Figma 3:1628）
   Cocoon 既定は「メニュー｜ロゴ｜検索」の3等分で、アイコンの下に文字が付く。
   Figma はロゴを左、右にメニュー・検索のアイコンだけを並べた高さ60px。
   Cocoon がモバイル用ヘッダーに切り替わる 1023px 以下で効かせる。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px){
  :root{
    --cocoon--mobile-header-menu-buttons--height: 60px;
  }

  .mobile-header-menu-buttons.mobile-menu-buttons{
    box-sizing:    border-box;
    gap:           24px;
    min-height:    60px;
    padding:       0 26px 0 17px;
    border-bottom: 1px solid var(--c-line-soft);
    box-shadow:    none;
  }
  .mobile-header-menu-buttons > .logo-menu-button{
    order:      1;
    flex:       1 1 auto;
    width:      auto;
    min-width:  0;
    line-height: 0;
    justify-content: flex-start;
  }
  .mobile-header-menu-buttons > .logo-menu-button img{
    height:    30px;
    max-height: none;
    margin:    0;
  }
  .mobile-header-menu-buttons > .navi-menu-button{   order: 2; }
  .mobile-header-menu-buttons > .search-menu-button{ order: 3; }

  .mobile-header-menu-buttons > .navi-menu-button,
  .mobile-header-menu-buttons > .search-menu-button{
    width:  18px;
    height: 60px;
  }

  /* アイコンフォントを Figma の形に差し替え、文字は読み上げ用に残して見た目から外す */
  .mobile-header-menu-buttons .menu-icon{
    width:  18px;
    height: 18px;
    background-color: var(--c-ink);
    -webkit-mask: no-repeat center / contain;
            mask: no-repeat center / contain;
  }
  .mobile-header-menu-buttons .navi-menu-icon{
    -webkit-mask-image: var(--icon-menu);
            mask-image: var(--icon-menu);
  }
  .mobile-header-menu-buttons .search-menu-icon{
    -webkit-mask-image: var(--icon-search);
            mask-image: var(--icon-search);
  }
  .mobile-header-menu-buttons .menu-icon .fa{ display: none; }
  .mobile-header-menu-buttons .menu-open .menu-caption{
    position: absolute;
    width:    1px;
    height:   1px;
    overflow: hidden;
    clip:     rect(0 0 0 0);
    white-space: nowrap;
  }

  /* 4. 検索パネル（Figma 4:450）
     Cocoon 既定は画面の中ほどに浮かぶ小さな入力欄。
     Figma はヘッダーごと覆う白い帯（ロゴ＋×、その下に検索窓）なので、
     画面の上端に固定して上からスライドさせる。 */
  #search-menu-content.search-menu-content{
    box-sizing: border-box;
    top:        0;
    left:       0;
    right:      0;
    width:      auto;
    padding:    0 20px 65px;
    background: var(--c-bg);
    transform:  translateY(-100%);
    z-index:    1000;
  }

  .lsm-searchpanel-head{
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          60px;
    margin:          0 -3px 22px;
  }
  .lsm-searchpanel-logo{
    display:     block;
    line-height: 0;
  }
  .lsm-searchpanel-logo img{
    width:  auto;
    height: 30px;
  }
  .lsm-searchpanel-close{
    width:  24px;
    height: 24px;
    background-color: var(--c-ink);
    -webkit-mask: var(--icon-close) no-repeat center / contain;
            mask: var(--icon-close) no-repeat center / contain;
    cursor: pointer;
  }

  #search-menu-content .search-edit{
    height:    43px;
    padding:   0 16px 0 42px;
    /* Figma は 14px。16px 未満だと iOS Safari が入力時に画面を拡大するので 16px にする */
    font-size: 16px;
  }
  #search-menu-content .search-submit{ left: 13px; }

  /* パネルの下の暗幕（Figma は #868686 ＝ 黒の約48%） */
  #search-menu-input:checked ~ #search-menu-close{
    background: #000;
    opacity:    .48;
    z-index:    999;
  }
}

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

  .footer-bottom{
    padding-block: 19px;
  }
}