@charset "UTF-8";
/* ==========================================================================
   トップページ：「お困りですか？」＋お知らせ
   --------------------------------------------------------------------------
   Figma 2:816（PC）/ 3:1628（SP）
   マークアップは inc/renewal.php の lsm_top_hero_html()。

   背景は「上から薄い青 → 白」のグラデーションに、ロゴマークを大きく拡大して
   ぼかしたものを重ねている（Figma のレイヤー名「白円」「目」はロゴの部品）。
   ぼかしと不透明度30%は SVG の中に入っているので CSS では付けない。
   PC と SP でぼかし幅と角度が違うため、SVG を2つ用意してある。
   ========================================================================== */

.lsm-hero{
  position:   relative;
  overflow:   hidden;
  padding:    96px 20px;
  /* Figma の背景は高さ588pxでヘッダーの裏から始まる。ヘッダー60pxぶんを引いた位置で合わせる */
  background: linear-gradient(180deg, var(--c-brand-tint) 215px, var(--c-bg) 528px);
}
.lsm-hero::before{
  content:  "";
  position: absolute;
  left:     -417px;
  top:      -887px;
  width:    1541px;
  height:   1541px;
  background: url("../img/hero-mark-pc.svg") no-repeat center / contain;
  pointer-events: none;
}
.lsm-hero > *{
  position: relative;
}

/* --------------------------------------------------------------------------
   お困りですか？ ＋ 検索窓
   -------------------------------------------------------------------------- */
.lsm-hero__search{
  max-width:  642px;
  margin:     0 auto;
  text-align: center;
}
.lsm-hero__title{
  margin:      0 0 40px;
  padding:     0;
  border:      0;
  background:  none;
  color:       var(--c-ink);
  font-size:   32px;
  font-weight: 700;
  line-height: 1.2;
}
.lsm-hero .search-edit{
  height:       61px;
  padding:      0 27px 0 56px;
  border-color: transparent;
  font-size:    16px;
}
.lsm-hero .search-submit{ left: 27px; }

/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
.lsm-news{
  max-width: 840px;
  margin:    100px auto 0;
}
.lsm-news__title{
  margin:      0 0 20px;
  padding:     0;
  border:      0;
  background:  none;
  color:       var(--c-ink);
  font-size:   24px;
  font-weight: 700;
  line-height: 1.5;
  text-align:  center;
}
.lsm-news__list{
  margin:        0;
  padding:       0;
  list-style:    none;
  overflow:      hidden;   /* hover の地を角丸で切る */
  border-radius: var(--radius-card);
  background:    var(--c-bg);
  box-shadow:    var(--shadow-card);
}
.lsm-news__list > li{
  margin: 0;
}
.lsm-news__list > li + li{
  border-top: 1px solid var(--c-line-soft);
}

.lsm-news__item{
  position:        relative;
  box-sizing:      border-box;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             4px;
  min-height:      84px;
  padding:         14px 60px 14px 30px;
  color:           var(--c-ink);
  text-decoration: none;
  transition:      background-color .3s ease;
}
.lsm-news__item::after{
  content:   "";
  position:  absolute;
  top:       50%;
  right:     29px;
  width:     12px;
  height:    12px;
  transform: translateY(-50%);
  background-color: var(--c-ink);
  -webkit-mask: var(--icon-right) no-repeat center / contain;
          mask: var(--icon-right) no-repeat center / contain;
  transition: right .3s ease, background-color .3s ease;
}

.lsm-news__meta{
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   14px;
  line-height: 22px;
}
.lsm-news__name{
  color:       var(--c-brand);
  font-size:   16px;
  line-height: 1.5;
}

/* カテゴリーラベル（検索結果でも使う） */
.lsm-label{
  box-sizing:    border-box;
  display:       inline-flex;
  align-items:   center;
  height:        20px;
  padding:       0 8px;
  border-radius: 4px;
  background:    var(--c-label);
  color:         var(--c-on-dark);
  font-size:     11px;
  font-weight:   700;
  line-height:   1;
  white-space:   nowrap;
}

/* すべて見る */
.lsm-more{
  box-sizing:      border-box;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             9px;
  width:           160px;
  height:          35px;
  margin:          25px auto 0;
  border:          1px solid var(--c-ink);
  border-radius:   var(--radius-pill);
  background:      var(--c-bg);
  color:           var(--c-ink);
  font-size:       14px;
  font-weight:     700;
  text-decoration: none;
  transition:      background-color .3s ease, border-color .3s ease, color .3s ease, gap .3s ease;
}
.lsm-more::after{
  content: "";
  width:   12px;
  height:  12px;
  background-color: currentColor;
  -webkit-mask: var(--icon-right) no-repeat center / contain;
          mask: var(--icon-right) no-repeat center / contain;
}
/* --------------------------------------------------------------------------
   hover（参考：lgram.jp/manual）
   ・一覧の行 … 地が薄い青になり、矢印が青くなって右へ動く
   ・ボタン   … 青で塗りつぶし、矢印が文字から少し離れる
   ・記事カード … タイトルが青になり、サムネイルが少し寄る
   スマホはタップ後に hover の見た目が残ってしまうので、
   マウスで操作する環境（hover: hover）だけで効かせる。
   -------------------------------------------------------------------------- */
@media (hover: hover){
  /* color は Cocoon の a:hover（赤文字）を打ち消すため */
  .lsm-news__item:hover{
    background: var(--c-hover);
    color:      var(--c-ink);
  }
  .lsm-news__item:hover::after{
    right: 24px;
    background-color: var(--c-brand);
  }

  .lsm-more:hover{
    gap:          13px;
    border-color: var(--c-brand);
    background:   var(--c-brand);
    color:        var(--c-on-dark);
  }

  /* トップ・カテゴリーの記事カード。Cocoon 既定のグレーの地（.a-wrap:hover）はやめる */
  .entry-card-wrap:hover{ background-color: transparent; }
  .entry-card-wrap:hover .entry-card-title{ color: var(--c-brand); }
  .entry-card-wrap:hover .entry-card-thumb-image{ transform: scale(1.05); }
}
.entry-card-title{ transition: color .3s ease; }
.entry-card-thumb{ overflow: hidden; }
.entry-card-thumb-image{ transition: transform .4s ease; }

/* --------------------------------------------------------------------------
   SP（Figma 3:1628）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  .lsm-hero{
    padding:    50px 20px 40px;
    background: linear-gradient(180deg, var(--c-brand-tint) 118px, var(--c-bg) 431px);
  }
  .lsm-hero::before{
    left:      -183px;
    top:       -268px;
    width:     763px;
    height:    763px;
    background-image: url("../img/hero-mark-sp.svg");
    transform: rotate(-15deg);
    /* 帯の下端でぼかしが途切れて見えないよう、下側を透明へ溶かす
       （要素ごと回転するので、マスクの向きも -15° 傾く） */
    -webkit-mask-image: linear-gradient(#000 45%, transparent 72%);
            mask-image: linear-gradient(#000 45%, transparent 72%);
  }

  .lsm-hero__title{
    margin-bottom: 16px;
    font-size:     20px;
    line-height:   22px;
  }
  .lsm-hero .search-edit{
    height:    43px;
    padding:   0 16px 0 42px;
    font-size: 16px;   /* Figma は 14px。iOS の入力時の自動ズームを避けるため 16px */
  }
  .lsm-hero .search-submit{ left: 13px; }

  .lsm-news{ margin-top: 50px; }
  .lsm-news__title{
    font-size:  18px;
    text-align: left;
  }
  .lsm-news__list{ margin-inline: -8px; }

  .lsm-news__item{
    gap:     5px;
    padding: 20px 46px 19px 20px;
    min-height: 0;
  }
  .lsm-news__item::after{ right: 18px; }
  .lsm-news__name{
    font-size:   14px;
    line-height: 21px;
  }
}