/* confi 移植で足したスタイルだけをここに置く。
   main.css / reset.css / style.css は旧テーマの原本をそのまま使う（差分を追えるように）。 */

/* 記事内の共有ボタン。
   旧サイトはここに wp_social_bookmarking_light（Twitter ボタン／Facebook いいね／
   Google+ ボタン）を出していた。Google+ は 2019 年にサービス終了していて
   旧サイトでも空の要素になっていたため持ち込まない。X と Facebook は
   第三者 JS を読まない素の共有リンクに置き換えた。
   既存の .share-menu は header 配下限定の指定なので流用できず、ここで定義する。 */
.share_wrap .share_links {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.share_wrap .share_links li {
  display: inline-block;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.share_wrap .share_links li a {
  display: block;
  line-height: 1;
}
.share_wrap .share_links li a img {
  width: 26px;
  height: 26px;
  display: block;
}

/* メインビジュアルのスライダー。
   旧サイトは Smart Slider 3 のスライダー #2「Slider_pc」で、DB に残っていた設定は
   width 1200 / height 540 / align center / backgroundMode fit /
   autoplay 3000ms / animation horizontal 800ms。
   画面上の部品は、矢印が左右 15px の内側・上下中央、バレットが下中央 10px、
   自動再生の停止ボタンが右上 15px だった。
   confi 版はこれを slick に置き換えているので、同じ寸法と同じ画像の収まり方
   （fit = 切らず・はみ出させず全体を枠に収める）をここで指定する。
   矢印と再生／停止の図は旧サイトが埋め込んでいた SVG をそのまま使う。 */
.mainvisual .magipun-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* 1200 × 540 の枠。狭い画面では旧サイトと同じく比率を保って縮む
     （旧設定 responsiveScaleDown 1 / responsiveScaleUp 0） */
  aspect-ratio: 20 / 9;
  overflow: hidden;
}
/* slick の初期化前に 4 枚が実寸（2000px 幅）で縦に並ぶのを防ぐ。
   旧サイトは読み込み完了までスライダー全体を隠していた。 */
.mainvisual .magipun-slider:not(.slick-initialized) .slide-item {
  display: none;
}
.mainvisual .magipun-slider:not(.slick-initialized) .slide-item:first-child {
  display: block;
  height: 100%;
}
.mainvisual .magipun-slider .slick-list,
.mainvisual .magipun-slider .slick-track,
.mainvisual .magipun-slider .slick-slide,
.mainvisual .magipun-slider .slick-slide > div,
.mainvisual .magipun-slider .slide-item,
.mainvisual .magipun-slider .slide-item > a {
  height: 100%;
}
.mainvisual .magipun-slider .slide-item,
.mainvisual .magipun-slider .slide-item > a {
  display: block;
}
/* 旧 backgroundMode: fit。focus は 50/50 だったので中央寄せ。 */
.mainvisual .magipun-slider .slide-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
/* 矢印。slick の既定は枠の外（-25px）かつ同梱していない slick フォント頼みなので、
   枠の内側 15px に置いて旧サイトの SVG を背景に敷く。 */
.mainvisual .magipun-slider .slick-prev,
.mainvisual .magipun-slider .slick-next {
  width: 32px;
  height: 32px;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 32px 32px;
  transition: opacity 0.4s ease;
}
.mainvisual .magipun-slider .slick-prev { left: 15px; }
.mainvisual .magipun-slider .slick-next { right: 15px; }
.mainvisual .magipun-slider .slick-prev:before,
.mainvisual .magipun-slider .slick-next:before { content: none; }
.mainvisual .magipun-slider .slick-prev {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTIwLjY1NCA5LjQzbC02LjMyNiA2LjUyNSA2LjMyNiA2LjZjLjI0Mi4yNTMuMzYuNTQ1LjM2Ljg4IDAgLjMzMy0uMTE4LjYyNS0uMzYuODc3bC0xLjI0NCAxLjNjLS4yNC4yNS0uNTIzLjM3NS0uODQuMzc1LS4zMiAwLS42LS4xMjQtLjg0LS4zNzZsLTguMzY3LTguNzJjLS4yNC0uMjUtLjM2My0uNTQtLjM2My0uODggMC0uMzM0LjEyMi0uNjMuMzYzLS44OGw4LjM2Ny04Ljc1Yy4yMy0uMjUyLjUxLS4zNzcuODMtLjM3Ny4zMjUgMCAuNjA3LjEyNi44NS4zNzhsMS4yNDIgMS4zMjZjLjI0Mi4yNTIuMzYuNTQuMzYuODY0IDAgLjMyLS4xMTguNjEtLjM2Ljg2eiIgb3BhY2l0eT0iMC44Ii8+Cjwvc3ZnPgo=");
}
.mainvisual .magipun-slider .slick-next {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMuMjg2IDI1LjYxYy0uMjQuMjUzLS41Mi4zNzctLjg0LjM3Ny0uMzE4IDAtLjYtLjEyNC0uODQtLjM3NmwtMS4yNDUtMS4yOTdjLS4yNC0uMjUyLS4zNi0uNTQ0LS4zNi0uODc4IDAtLjMzNC4xMi0uNjI2LjM2LS44NzhsNi4zMjgtNi42TDEwLjM2IDkuNDNjLS4yNC0uMjUtLjM2LS41NC0uMzYtLjg2NCAwLS4zMjMuMTItLjYxMi4zNi0uODY0bDEuMjQ1LTEuMzI1Yy4yNC0uMjUyLjUyMy0uMzc3Ljg0OC0uMzc3LjMyMyAwIC42MDIuMTI1LjgzMy4zNzdsOC4zNjYgOC43NDZjLjI0LjI1LjM2My41NDYuMzYzLjg4MiAwIC4zNC0uMTIyLjYzNC0uMzYzLjg4NmwtOC4zNjYgOC43MnoiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
}
/* バレット。旧 SS3 の指定（背景 rgba(0,0,0,0.67)・直径 10px・間隔 4px・
   角丸 50px・有効色 #00c1c4）を枠の下中央 10px に重ねる。 */
.mainvisual .magipun-slider.slick-dotted.slick-slider { margin-bottom: 0; }
.mainvisual .magipun-slider .slick-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.mainvisual .magipun-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0 4px;
  vertical-align: middle;
}
.mainvisual .magipun-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.67);
}
.mainvisual .magipun-slider .slick-dots li button:before { content: none; }
.mainvisual .magipun-slider .slick-dots li.slick-active button { background: #00c1c4; }
/* 自動再生の停止ボタン。旧サイトは右上 15px に
   背景 rgba(0,0,0,0.67)・余白 10px・角丸 3px の箱で置いていた。 */
.mainvisual .magipun-slider .magipun-slider-autoplay {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.67);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAydjEyaDNWMkg0em01IDB2MTJoM1YySDl6IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.mainvisual .magipun-slider .magipun-slider-autoplay.is-paused {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNTggNy4wM0w1LjMwMiAyLjE2NUM1LjE2NSAyLjA1NyA1LjAxNiAyIDQuODU3IDIgNC4zODQgMiA0IDIuNTA0IDQgMy4xMjV2OS43NWMwIC42Mi4zODQgMS4xMjUuODU3IDEuMTI1LjE2IDAgLjMwOC0uMDU3LjQzNi0uMTU2TDExLjU4IDguOTdjLjI1LS4xOTguNDItLjU1OC40Mi0uOTcgMC0uNDEyLS4xNy0uNzczLS40Mi0uOTd6IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}