@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;700&display=swap");

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  --bg-color: #fff; /*主にテンプレートの背景色*/
  --bg-inverse-color: #000; /*上のbg-colorの対として使う色*/

  --main-bg-color: #f4f4f0; /*メインコンテンツ部分の背景色*/

  --primary-color: #0063af; /*テーマカラー*/
  --primary-inverse-color: #fff; /*上のprimary-colorの対として使う色*/

  --content-space: 5vw; /*色々な余白管理用。画面幅100% = 100vwです。*/

  --z-slide-text-box: 97;
  --z-wave: 98;
  --z-slide-pause-btn: 99;
  --z-pagetop: 100;
  --z-menubar: 101;
  --z-humburger: 102;

  --border-radius: 20px;
  --border-radius-semicircle: 9999px;

  --head-border-gray-color: #e5e7eb;
  --sumitomo-color: #e50012;
  --sumisei-color: #0ca466;

  --link-big-button-font-size: 1rem;

  /* 柔らかく自然に浮かせる影（3層重ね） */
  --shadow-elevated: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15), 0 10px 24px rgba(0, 0, 0, 0.1);

  /* 強く浮かせて存在感を出す影（4層重ね） */
  --shadow-prominent:
    0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.2),
    0 32px 72px rgba(0, 0, 0, 0.15);

  --text-shadow: 0 2px 10px rgba(0, 0, 0, 1);

  /* ---------------------------------------------------------------------------
  タイポグラフィ設定
  1rem = 16px (スマホ/デフォルト) | 1rem = 21px (画面幅900px〜/本書推奨)
  --------------------------------------------------------------------------- */
  /* h1: 16px時 32〜48px | 21px時 42〜63px */
  --h1: clamp(2rem, 5vw, 3rem);

  /* h2: 16px時 24〜36px | 21px時 31.5〜47.25px */
  --h2: clamp(1.5rem, 4vw, 2.25rem);

  /* h3: 16px時 20〜28px | 21px時 26.25〜36.75px */
  --h3: clamp(1.25rem, 3vw, 1.75rem);

  /* h4: 16px時 22px | 21px時 約29px (28.875px) */
  --h4: 1.375rem;

  /* h5: 16px時 18px | 21px時 約24px (23.625px) */
  --h5: 1.125rem;

  /* h6: 16px時 16px | 21px時 21px (本文サイズ) */
  --h6: 1rem;

  /* 行間設定 */
  --sp-line-height: 1.5; /* 標準的な行間 */
  --pc-line-height: 1.7; /* 推奨行間 1.6em〜2.0em */

  /* 上に上がる距離（0.5rem = 約8px程度） */
  --lift-distance: -0.5rem;

  /* 内側の影 */
  --box-shadow-inset: -5px -5px 10px 0px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    left: -200px;
  }
  100% {
    left: 0px;
  }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
html {
  font-size: 16px; /*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 21px; /*基準となるフォントサイズ。*/
  }
} /*追加指定ここまで*/

body {
  margin: 0;
  padding: 0;
  font-family:
    "LINE Seed JP", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; /*フォント種類（ゴシック）*/
  font-weight: 400;
  -webkit-text-size-adjust: none;
  background: var(--bg-color); /*背景色*/
  color: var(--bg-inverse-color); /*文字色*/
  line-height: var(--sp-line-height); /*行間*/
  overflow-x: hidden;

  @media (min-width: 900px) {
    line-height: var(--pc-line-height); /*行間*/
  }
}

/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}
section > ol,
section > ul {
  margin-left: 2rem;
}

/*sectionの設定
---------------------------------------------------------------------------*/
section {
  margin: 10vw 0;

  @media (min-width: 768px) {
    margin: var(--content-space) 0;
  }
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
  opacity: 0.7; /*色を70%だけ出す*/
}

/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  animation: opa1 0.2s 0.4s both; /*0.4秒待機後、0.2秒かけてフェードイン*/
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
body:not(.home) #container {
  grid-template-rows: auto 1fr;
}

/*header（ロゴが入ったブロック）
---------------------------------------------------------------------------*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw var(--content-space) 0;
}

body.home header {
  margin-bottom: 2vw;
}

/*ロゴ画像*/
#logo {
  margin: 0;
}
#logo img {
  display: block;
  width: 160px; /*ロゴの幅*/

  @media (min-width: 576px) {
    width: 280px; /*ロゴの幅*/
  }
}

/*ロゴ（※テキストで使う場合）*/
#logo a {
  text-decoration: none;
  display: block;
  font-size: 1.2rem; /*文字サイズ120%*/
}

/*ヘッダー内メニュー（大きな端末で見える横並びメニュー設定）
---------------------------------------------------------------------------*/
.large-screen #menubar ul {
  display: flex;
  gap: 1.5rem; /*メニュー同士の間にとる余白。1.5文字分。*/
  align-items: center;
}
.large-screen #menubar ul a {
  display: block;
  text-decoration: none;
}

/*メインコンテンツ部分
---------------------------------------------------------------------------*/
main {
  padding: 0 var(--content-space);
  background-color: var(--main-bg-color);
  display: grid;
  position: relative;
}

/*ウェーブ背景部分
---------------------------------------------------------------------------*/
.wave {
  z-index: var(--z-wave);
  margin-top: -72px;
  transform: translateY(1px);

  @media (min-width: 768px) {
    margin-top: -120px;
  }

  svg {
    height: 80px;
    width: 100%;

    @media (min-width: 768px) {
      height: 160px;
    }
  }
}

/*開閉メニュー（小さな端末用のメニュー設定）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: var(--z-menubar);
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 100px var(--content-space) 50px; /*ブロック内の余白*/
  background: var(--bg-color); /*背景色。冒頭のbg-colorを読み込みます。*/
  color: var(--bg-inverse-color); /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
}

.small-screen #menubar {
  display: none;
}

/*メニュー１個あたり*/
.small-screen #menubar a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #ccc; /*枠線の幅、線種、色*/
  border-radius: 5px; /*角を少し丸くする*/
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
  padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: none; /* デフォルトは非表示 */
  animation: opa1 0s 0.2s both;
  position: fixed;
  z-index: var(--z-humburger);
  cursor: pointer;
  right: 0px; /*右からの配置場所*/
  top: 0px; /*上からの配置場所*/
  width: 70px; /*ボタンの幅*/
  height: 70px; /*ボタンの高さ*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  position: absolute;
  left: 18px;
  width: 35px;
  height: 2px; /*線の高さ*/
  background: var(
    --bg-inverse-color
  ); /*背景色ですが、ここでは線の色になります。冒頭のbg-inverse-colorを読み込みます。*/
  transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
  display: flex;
}

/*list-grid（３列に並んだリストブロック）
---------------------------------------------------------------------------*/
.list-grid .list * {
  margin: 0;
  padding: 0;
}

/*ブロック全体を囲むブロック*/
.list-grid {
  display: grid;
  grid-auto-flow: row;
  gap: 8vw; /*ブロックの間に空けるスペース*/
  text-align: center; /*ブロック内をセンタリング*/

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3vw; /*ブロックの間に空けるスペース*/
  }
}

/*ボックス内のfigure画像*/
.list-grid .list figure {
  margin-bottom: 0.5rem;
}

/*ボックス内のp（文章）*/
.list-grid p {
  font-weight: normal;
  font-size: 1rem; /*文字サイズ85%*/
  text-align: left; /*文章は左寄せで。センタリングがよければこの１行を削除。*/
}

/*list
---------------------------------------------------------------------------*/
.list {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 2.4rem;
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-prominent);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(var(--lift-distance));
  }

  h2 {
    font-size: var(--h2);
    line-height: var(--sp-line-height);
    position: relative;
    padding-bottom: 1rem !important; /*下のスペースをとる。下線と文章が重ならないように。*/

    /* グレーの下線（全幅） */
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.25rem;
      background-color: var(--head-border-gray-color);
    }

    /* カラーの下線（中央75%） */
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 75%;
      height: 0.25rem;
      z-index: 1;
    }

    &.head-border-red::before {
      background-color: var(--sumitomo-color);
    }

    &.head-border-green::before {
      background-color: var(--sumisei-color);
    }
  }

  .list-img {
    img {
      max-height: 10rem;
    }
  }

  .text {
    justify-self: center;
  }
}

/*2カラムブロック（※900px未満では１カラム）スタッフ紹介ページで使用。
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half .list {
  display: flex;
  flex-direction: column; /*子要素を縦並びにする*/
  margin-bottom: 2rem; /*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half .list h4 {
  font-size: 1.4rem; /*文字サイズを1.4倍*/
}

/*画像ブロック共通*/
.list-half .image-l img,
.list-half .image-r img {
  border-radius: 50px; /*角を丸くする指定。*/
  box-shadow: 10px 10px rgba(255, 255, 255, 0.2); /*ボックスの影。右へ、下へ、255,255,255は白の事で0.2は色が20%出た状態。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*２カラムを囲むブロック*/
  .list-half .list {
    gap: 2rem;
    flex-direction: row; /*子要素を横並びにする*/
    justify-content: space-between; /*並びかたの種類の指定*/
    align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
  }

  /*画像ブロック共通*/
  .list-half .image-l,
  .list-half .image-r {
    width: 50%; /*画像の幅*/
  }

  /*画像を左に配置する場合*/
  .list-half .image-l {
    order: -1;
  }

  /*テキストブロック*/
  .list-half .text {
    flex: 1;
  }
} /*追加指定ここまで*/

/*住友生命とスミセイハーモニーのリンクボタン
---------------------------------------------------------------------------*/
.link-button {
  border-radius: var(--border-radius-semicircle);
  box-shadow: var(--shadow-elevated);

  a {
    padding: 1rem 1.4rem !important;
    color: var(--primary-inverse-color);
    font-size: var(--link-big-button-font-size);
    line-height: var(--sp-line-height);
    font-weight: bold;
    display: grid;
    grid-auto-flow: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    @media (min-width: 900px) {
      line-height: var(--pc-line-height);
    }

    .link-text {
      text-decoration: underline;
    }
  }
}

.sumitomo-link-button {
  background-color: var(--sumitomo-color);
}

.sumisei-link-button {
  background-color: var(--sumisei-color);
}

/*お知らせページ（new.html）
---------------------------------------------------------------------------*/
/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
  /*ブロック全体*/
  .new {
    display: grid;
    gap: 1rem; /*日付や文章の間にとるスペース。１文字分。*/
    grid-template-columns: auto 1fr; /* 日付の幅は自動で、内容が入るブロックは残り幅一杯とる。 */
  }
} /*追加指定ここまで*/

/*btn（ボタン）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn a {
  display: block;
  text-decoration: none;
  background: var(--primary-color) !important; /*背景色。冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color) !important; /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
  border-radius: 5px; /*角を少し丸くする*/
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem 2rem; /*上下、左右への余白。*/
  margin-top: 2rem; /*上にスペースをとる*/
  font-size: 1.2rem; /*文字サイズ120%*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
}

/*マウスオン時*/
.btn a:hover {
  opacity: 1;
  background: #000; /*背景色*/
  color: #fff; /*文字色*/
}

/*大きな端末で出るヘッダーのメニュー*/
.large-screen #menubar .btn a {
  margin-top: 0; /*上のスペースのリセット*/
  font-size: 1rem; /*文字サイズを通常に戻す*/
  letter-spacing: normal; /*文字間隔を通常に戻す*/
}

/*小さな端末のメニュー*/
.small-screen #menubar .btn a {
  margin-top: 0; /*上のスペースのリセット*/
  width: auto;
  border: none;
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
  font-weight: bold; /*太字に*/
  padding: 0.2rem 1rem; /*ボックス内の余白*/
  background: rgba(255, 255, 255, 0.2); /*背景色。255,255,255は白のことで0.2は色が20%出た状態。*/
  color: #fff; /*文字色*/
  margin-bottom: 1rem; /*下に空けるスペース*/
  border-radius: 5px; /*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
  table-layout: fixed;
  border-top: 1px solid rgba(255, 255, 255, 0.3); /*テーブルの上の線。幅、線種、255,255,255は白のことで0.3は色が30%出た状態。*/
  width: 100%; /*幅*/
  margin-bottom: 2rem; /*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /*テーブルの下の線。幅、線種、255,255,255は白のことで0.3は色が30%出た状態。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th,
.ta1 td {
  padding: 1rem; /*ボックス内の余白*/
  word-break: break-all; /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
  width: 30%; /*幅*/
  text-align: left; /*左よせにする*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*th（左側）のみの設定*/
  .ta1 th {
    width: 20%; /*幅*/
  }
} /*追加指定ここまで*/

/*フッター
---------------------------------------------------------------------------*/
footer * {
  margin: 0;
  padding: 1.6rem 0.8rem;
  box-shadow: var(--box-shadow-inset);
}

/*ブロック全体*/
footer {
  text-align: center;
}

/*Copyright部分*/
footer small {
  display: block;
  color: var(--primary-inverse-color);
  background-color: var(--sumitomo-color);
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /*アイコン同士に空けるスペース*/
}
.icons i {
  font-size: 30px; /*アイコンサイズ*/
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr {
  margin-left: calc(-1 * var(--content-space));
  margin-right: calc(-1 * var(--content-space));
}
.pr a {
  text-decoration: none;
  display: block;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  background: #555;
  color: #ccc;
}
.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: bold;
  margin-right: 0.5em;
}

/*お知らせブロック
---------------------------------------------------------------------------*/

/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
  /*ブロック全体*/
  .new {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  /*日付の右側にスペースを作る*/
  .new dt {
    margin-right: 2rem;
  }
} /*追加指定ここまで*/

/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
  margin-left: calc(-1 * var(--content-space));
  margin-right: calc(-1 * var(--content-space));
}
.bg1 section {
  margin-left: var(--content-space);
  margin-right: var(--content-space);
  padding-top: var(--content-space);
  padding-bottom: var(--content-space);
}
.bg1 section h2:first-child {
  margin-top: 0;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: var(--z-pagetop);
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 20px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(0, 0, 0, 0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.color-check,
.color-check a {
  color: #c02340 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 95%;
  display: block;
}
.wl {
  width: 95%;
  display: block;
}
.padding0 {
  padding: 0 !important;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb3rem {
  margin-bottom: 3rem !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.look .color-check {
  color: yellow !important;
}
.small {
  font-size: 0.75em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.block {
  display: block !important;
}
.d-inline-block {
  display: inline-block;
}
/*スマホサイズのときに改行、それ以外は改行しない*/
.sp-br {
  display: inline; /*改行のbrが表示*/

  @media (min-width: 576px) {
    display: none;
  }
}
/*PCサイズのときに改行、それ以外は改行しない*/
.pc-br {
  display: none;

  @media (min-width: 1860px) {
    display: inline; /*改行のbrが表示*/
  }
}

/*アクセシビリティ
---------------------------------------------------------------------------*/
/*キーボードフォーカス表示 (WCAG 2.4.7)*/
:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/*スクリーンリーダー専用テキスト（視覚的には非表示）*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*スキップナビゲーション (WCAG 2.4.1)*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  text-decoration: none;
  font-weight: bold;
}
.skip-link:focus {
  left: 0;
}

/*スライドショー一時停止ボタン (WCAG 2.2.2)*/
.slide .slide-pause-btn {
  appearance: none;
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: var(--z-slide-pause-btn);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 1;

  @media (min-width: 768px) {
    bottom: 10px;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}
.slide .slide-pause-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}