/* ==========================================================================
   front-renewal.css — トップページリニューアル
   --------------------------------------------------------------------------
   - 全セレクタは .page-template-front-page-renewal 配下にスコープ
   - クラスは front- プレフィックス
   - カンプ(design/sections/*.png, 2560px幅)の実測 × 0.75 = CSS px(1920基準)
   - ヒーロー等の絶対配置セクションは --front-u(1920px基準の1px)を単位にし、
     ビューポートが1920px未満のときは比例縮小する(最大1px)
   ========================================================================== *//* --------------------------------------------------------------------------
   1. カスタムプロパティ(色・グラデ・フォント・単位)
   -------------------------------------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) {
  /* --- 基本色 --- */
  --front-black: #100f0e;        /* 本文・見出し。純黒ではない */
  --front-white: #ffffff;
  --front-gray: #b0b0b0;         /* ランキング下位、ティッカーのラベル等 */
  --front-gray-dark: #888888;    /* Information の日付 */
  --front-gray-light: #f0efee;   /* Follow me! の背景 */

  /* --- 基調グラデの3色(黄 → 緑 → 水色) --- */
  --front-yellow: #e7ee48;
  --front-green: #89d496;
  --front-cyan: #59c8d8;

  /* --- アクセント(intro の強調語、ティッカー、モーダル等) --- */
  --front-pink: #e090c8;
  --front-blue: #48c0d0;
  --front-lime: #e8e800;
  --front-leaf: #50c070;
  --front-date: #6cccb1;         /* 記事日付の緑 */
  --front-gold: #deb755;         /* ランキング王冠 */

  /* --- プレースホルダー用の仮背景色 --- */
  --front-ph-visual: #a9dcb6;
  --front-ph-manga: #cdedee;
  --front-ph-photo: #d9d4cf;

  /* --- グラデーション --- */
  --front-gradient-main: linear-gradient(90deg, var(--front-yellow) 0%, var(--front-green) 50%, var(--front-cyan) 100%);
  --front-gradient-pill: linear-gradient(90deg, #d6fb75 0%, #00e8ff 100%); /* カテゴリピル(指定色: 左 #D6FB75 → 右 #00E8FF) */
  --front-gradient-heading: linear-gradient(90deg, #fdff4c 0%, #59c8d4 100%); /* 見出し下線。左 #FDFF4C は指定色。中央・右は指定待ち */
  --front-gradient-footer: linear-gradient(90deg, #79d0a5 0%, #59c8da 100%);
  --front-gradient-info: linear-gradient(90deg, #e9f7f3 0%, #f5f2fa 50%, #faedf7 100%);

  /* --- フォント ---
     英字見出し・ロゴ・筆記体・ドット文字のフォントは確定待ち。
     確定後はこの4行だけを差し替える(フォールバックのみ定義、Webフォント未読み込み)。 */
  --front-font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --front-font-rounded: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; /* テーマ側で Zen Maru Gothic 読込済 */
  --front-font-heading-en: "Oswald", "Helvetica Neue", Arial, sans-serif;  /* Google Fonts(本番は my-snow-monkey.php で enqueue) */
  --front-font-logo: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", sans-serif; /* 候補: Fredoka / Baloo 2 */
  --front-font-script: "Snell Roundhand", "Brush Script MT", cursive;      /* 候補: Caveat / Dancing Script */
  --front-font-pixel: "DotGothic16", "Osaka-Mono", monospace;              /* Google Fonts(本番は my-snow-monkey.php で enqueue) */

  /* --- 単位: 1920px基準の1px。1920未満では比例縮小、1920以上は1pxで固定 --- */
  --front-u: min(1px, calc((100vw - var(--scrollbar-width, 0px)) / 1920));

  /* --- 共通寸法 --- */
  --front-radius-card: 20px;
  --front-duration-ticker: 40s;
  --front-duration-rotate: 30s;
}/* --------------------------------------------------------------------------
   2. ルートラッパー(フルブリード化・テーマの余白リセット)
   -------------------------------------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal {
  box-sizing: border-box;
  width: calc(100vw - var(--scrollbar-width, 0px));
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2);
  overflow-x: hidden;
  color: var(--front-black);
  font-family: var(--front-font-base);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
/* ショートコード [efy_pickup] を他ページの本文に置いたとき(.front-renewal--embed):
   フルブリードにせず、本文カラムの幅に収める。
   スコープ: Pick Up の表示に必要な指定(変数・.front-pickup 配下・共通部品)だけを
   :is(.page-template-front-page-renewal, .efy-has-pickup) で共有している(:is は詳細度が
   .page-template-front-page-renewal 単体と同じなので、トップの見た目は変わらない)。
   見出しリセット等トップ全体向けの指定はトップのクラスのみのまま */
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal--embed {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}
/* 埋め込み Pick Up 内だけに効かせるリセット(トップ全体向けの見出しリセット等と同じ内容を、
   埋め込みラッパーの中に限定して適用。テーマの #body h2 / h3 や a の色を打ち消す) */
#body.efy-has-pickup .front-renewal--embed > * {
  margin-top: 0;
  margin-bottom: 0;
}
.efy-has-pickup .front-renewal--embed :where(a) {
  color: inherit;
  text-decoration: none;
}
.efy-has-pickup .front-renewal--embed img {
  display: block;
  max-width: 100%;
  height: auto;
}
#body.efy-has-pickup .front-renewal--embed h2,
#body.efy-has-pickup .front-renewal--embed h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
#body.efy-has-pickup .front-renewal--embed h2::before,
#body.efy-has-pickup .front-renewal--embed h2::after,
#body.efy-has-pickup .front-renewal--embed h3::before,
#body.efy-has-pickup .front-renewal--embed h3::after {
  content: none;
}
.page-template-front-page-renewal .front-renewal *,
.page-template-front-page-renewal .front-renewal *::before,
.page-template-front-page-renewal .front-renewal *::after {
  box-sizing: border-box;
}
.page-template-front-page-renewal .front-renewal > * {
  margin-top: 0;
  margin-bottom: 0;
}/* :where() で詳細度を (0,2,0) に抑え、後続のコンポーネント側の色指定を優先させる */

.page-template-front-page-renewal .front-renewal :where(a) {
  color: inherit;
  text-decoration: none;
}
.page-template-front-page-renewal .front-renewal img {
  display: block;
  max-width: 100%;
  height: auto;
}/* 見出し要素のリセット
   テーマの追加CSSに `#body h2` `#body h3` など id 付きの指定があり、
   クラス2つでは負けるため、見出し要素のみ #body を含めて詳細度を揃える。
   (Snow Monkey は body に id="body" を出力する。以降、見出し要素へ直接当てる
   部品ルールも同じ接頭辞で書く) */


#body.page-template-front-page-renewal .front-renewal h1,
#body.page-template-front-page-renewal .front-renewal h2,
#body.page-template-front-page-renewal .front-renewal h3,
#body.page-template-front-page-renewal .front-renewal h4 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
#body.page-template-front-page-renewal .front-renewal h1::before,
#body.page-template-front-page-renewal .front-renewal h1::after,
#body.page-template-front-page-renewal .front-renewal h2::before,
#body.page-template-front-page-renewal .front-renewal h2::after,
#body.page-template-front-page-renewal .front-renewal h3::before,
#body.page-template-front-page-renewal .front-renewal h3::after {
  content: none;
}/* --------------------------------------------------------------------------
   3. プレースホルダー(素材未着の画像・ロゴ。PLACEHOLDERS.md 参照)
   -------------------------------------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--front-ph-photo);
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-placeholder[data-label]::after {
  content: attr(data-label);
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 8px;
  background: rgba(16, 15, 14, 0.55);
  color: #fff;
  font-family: var(--front-font-base);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}/* --------------------------------------------------------------------------
   4. front-hero(01-hero.png)
   --------------------------------------------------------------------------
   カンプではテーマヘッダー(高さ約100px)がグラデ上に透過で載る想定。
   ヒーローはヘッダー直下から始まり、ティッカー帯の下端(ページ上端から1050px)で終わる。
   stage: 1920 × 887、ticker: 1920 × 63
   -------------------------------------------------------------------------- */


.page-template-front-page-renewal .front-hero {
  padding-top: 55px;
  position: relative;
  overflow: hidden;
  /* 指定色: 左 #FCFF4E → 右 #00E8FF(イントロと同じ)。下端のフェードは無し */
  background: linear-gradient(90deg, #fcff4e 0%, #00e8ff 100%);
}

.page-template-front-page-renewal .front-hero__stage {
  position: relative;
  width: calc(1920 * var(--front-u));
  height: calc(903 * var(--front-u)); /* カンプ: ヘッダー下端(84)〜ティッカー上端(987) */
  margin: 0 auto;
}/* 吹き出しタグライン --------------------------------------------- */


.page-template-front-page-renewal .front-hero__tagline {
  position: absolute;
  top: calc(20 * var(--front-u));
  left: calc(92 * var(--front-u));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: calc(68 * var(--front-u));
  margin: 0;
  padding: 0 calc(26 * var(--front-u));
  border-radius: calc(20 * var(--front-u));
  background: var(--front-black);
  color: var(--front-white);
  font-size: calc(24 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.page-template-front-page-renewal .front-hero__tagline::after {
  content: "";
  position: absolute;
  left: calc(18 * var(--front-u));
  bottom: calc(-12 * var(--front-u));
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(14 * var(--front-u)) calc(16 * var(--front-u)) 0 0;
  border-color: var(--front-black) transparent transparent transparent;
}/* ロゴ(h1) ----------------------------------------------------------- */


#body.page-template-front-page-renewal .front-renewal .front-hero__logo {
  position: absolute;
  top: calc(36 * var(--front-u));
  left: calc(90 * var(--front-u));
  z-index: 2;
  width: calc(531 * var(--front-u));
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.page-template-front-page-renewal .front-hero__logo-mark {
  display: block;
  width: calc(531 * var(--front-u));
  height: calc(438 * var(--front-u));
}/* ロゴのプレースホルダー: 実素材が入るまでテキストで描画 */

.page-template-front-page-renewal .front-placeholder--logo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  background: none;
  color: var(--front-white);
  font-family: var(--front-font-logo);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.01em;
  white-space: nowrap;
  -webkit-text-stroke: calc(4 * var(--front-u)) var(--front-black);
  paint-order: stroke fill;
  text-shadow: 0 calc(2 * var(--front-u)) 0 var(--front-black);
}
.page-template-front-page-renewal .front-placeholder--logo[data-label]::after {
  display: none;
}
.page-template-front-page-renewal .front-hero__logo-line {
  display: block;
  font-size: calc(110 * var(--front-u));
}
.page-template-front-page-renewal .front-hero__logo-line--for {
  padding-left: calc(170 * var(--front-u));
  font-size: calc(64 * var(--front-u));
  font-style: italic;
  line-height: 1.2;
}
.page-template-front-page-renewal .front-hero__logo-kana {
  display: block;
  margin-top: calc(14 * var(--front-u));
  padding-left: calc(4 * var(--front-u));
  color: var(--front-black);
  font-size: calc(12 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  white-space: nowrap;
}/* 「Pick up」手書きラベル ---------------------------------------------- */


.page-template-front-page-renewal .front-hero__pickup-label {
  position: absolute;
  top: calc(34 * var(--front-u));
  left: calc(841 * var(--front-u));
  z-index: 3;
  width: calc(249 * var(--front-u));
  height: calc(104 * var(--front-u));
  margin: 0;
  line-height: 0;
  transform: none;
}
.page-template-front-page-renewal .front-hero__pickup-label img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-template-front-page-renewal .front-hero__pickup-label::after {
  content: none;
  position: absolute;
  left: calc(10 * var(--front-u));
  right: calc(10 * var(--front-u));
  bottom: calc(6 * var(--front-u));
  height: calc(10 * var(--front-u));
  border-bottom: calc(2 * var(--front-u)) solid var(--front-black);
  border-radius: 50%;
}/* メインビジュアル ------------------------------------------------------ */


.page-template-front-page-renewal .front-hero__visual[data-front-hero-advance] {
  cursor: pointer; /* クリックで次のスライドへ(A2) */
}
.page-template-front-page-renewal .front-hero__visual {
  position: absolute;
  top: calc(127 * var(--front-u));
  left: calc(469 * var(--front-u));
  z-index: 1;
  display: block;
  width: calc(965 * var(--front-u));
  height: calc(686 * var(--front-u));
}
.page-template-front-page-renewal .front-hero__visual picture,
.page-template-front-page-renewal .front-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-template-front-page-renewal .front-hero__visual img {
  object-fit: cover;
  object-position: right center;
}
.page-template-front-page-renewal .front-hero__visual .front-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--front-ph-visual);
}/* 1 枚目(14_202610_oshirase_top01.jpg、2020×1100 の横長 1 枚を PC/SP 共用):
   人物が画像の左寄りにあるため、右基準のトリミングをやめて人物が入る位置に */
.page-template-front-page-renewal .front-hero__visual img.front-hero__img--oshirase01 {
  object-position: 30% 50%;
}
/* SP は縦長の専用画像(14_202610_top_kv-pickup01_sp.jpg)に差し替えるため中央基準にする */
@media (max-width: 1023px) {
  .page-template-front-page-renewal .front-hero__visual img.front-hero__img--oshirase01 {
    object-position: center center;
  }
}

/* NEWS カード ----------------------------------------------------------- */


.page-template-front-page-renewal .front-hero__news {
  position: absolute;
  top: calc(593 * var(--front-u));
  left: calc(174 * var(--front-u));
  z-index: 4;
  width: calc(594 * var(--front-u));
  min-height: calc(250 * var(--front-u));
  padding: calc(17 * var(--front-u)) calc(7 * var(--front-u)) calc(56 * var(--front-u)) calc(33 * var(--front-u));
  border-radius: calc(22 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-hero__news .front-pill {
  font-size: calc(18 * var(--front-u));
  font-weight: 700;
  letter-spacing: 0;
}
.page-template-front-page-renewal .front-hero__news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: calc(38 * var(--front-u));
  margin-left: calc(-11 * var(--front-u));
}
.page-template-front-page-renewal .front-hero__news-date {
  position: relative;
  top: calc(7 * var(--front-u)); /* カンプではピル中央より 7px 下 */
  color: var(--front-date);
  font-size: calc(16 * var(--front-u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-template-front-page-renewal .front-hero__news-title {
  margin: calc(-4 * var(--front-u)) 0 0; /* ピル下端から字面まで 7px(line-height の半行分を相殺) */
  font-size: calc(28 * var(--front-u));
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
}
.page-template-front-page-renewal .front-hero__news-more {
  position: absolute;
  right: calc(-15 * var(--front-u));
  bottom: calc(-14 * var(--front-u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(168 * var(--front-u));
  height: calc(48 * var(--front-u));
  border-radius: calc(24 * var(--front-u));
  background: var(--front-black);
  color: var(--front-white);
  font-size: calc(20 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.page-template-front-page-renewal .front-hero__news-more:hover,
.page-template-front-page-renewal .front-hero__news-more:focus-visible {
  opacity: 0.75;
}/* カテゴリピル(共通部品) ------------------------------------------------ */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pill {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: calc(96 * var(--front-u));
  height: calc(28 * var(--front-u));
  padding: 0 calc(16 * var(--front-u));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
  border-radius: calc(14 * var(--front-u));
  background: var(--front-gradient-pill);
  color: var(--front-black);
  font-size: calc(16 * var(--front-u));
  font-weight: 500;
  line-height: calc(28 * var(--front-u));
  letter-spacing: 0.05em;
  white-space: nowrap;
}/* 回転円形テキスト ------------------------------------------------------ */


.page-template-front-page-renewal .front-hero__circle {
  position: absolute;
  top: calc(139 * var(--front-u));
  left: calc(1509 * var(--front-u));
  z-index: 3;
  width: calc(268 * var(--front-u));
  height: calc(268 * var(--front-u));
}
.page-template-front-page-renewal .front-hero__circle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}/* 1 周ぴったり(周長 729)に収めて継ぎ目なく回す。英字 0.178em、カタカナは字面が詰まって見えるため 0.3em。
   区切りに ☆(クライアント許可済み)。文言を変えたら字間を再計算すること(getComputedTextLength ≒ 周長) */

.page-template-front-page-renewal .front-hero__circle text {
  fill: var(--front-black);
  font-family: var(--front-font-base);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.21em; /* ☆ の前後の空白を外したぶん字間で 1 周(729)を埋める */
}
.page-template-front-page-renewal .front-hero__circle .front-hero__circle-ja {
  letter-spacing: 0.366em;
}/* ☆ の前後の見た目の余白を均等にする(☆ のグリフは右に寄っているため、直前の字の字間を減らし ☆ の字間を増やす。合計は不変) */

.page-template-front-page-renewal .front-hero__circle .front-ring__pre { letter-spacing: calc(0.21em - 1.1px); }
.page-template-front-page-renewal .front-hero__circle .front-ring__pre-ja { letter-spacing: calc(0.366em - 1.1px); }
.page-template-front-page-renewal .front-hero__circle .front-ring__star { letter-spacing: calc(0.21em + 1.1px); }/* 動きのある要素は必ず .front-motion + 修飾クラスで指定する。
   prefers-reduced-motion の停止は .front-motion を一括で止めることで
   取りこぼしを防ぐ(個別クラスに animation を直接書かない) */

.page-template-front-page-renewal .front-motion--rotate {
  animation: front-rotate var(--front-duration-rotate) linear infinite;
}
.page-template-front-page-renewal .front-motion--marquee {
  animation: front-ticker var(--front-duration-ticker) linear infinite;
}
@keyframes front-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}/* 漫画サムネイル(右端で見切れる) ---------------------------------------- *//* スライダー(3 枚、offset 方式)。アクティブ = 従来の KV 位置、次 = 右端の見切れ位置 */



.page-template-front-page-renewal .front-hero__slider {
  position: absolute;
  inset: 0;
}
.page-template-front-page-renewal .front-hero__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}
.page-template-front-page-renewal .front-hero__slide > * {
  pointer-events: auto;
}
.page-template-front-page-renewal .front-hero__slide .front-hero__visual {
  transition: top 0.5s ease, left 0.5s ease, width 0.5s ease, height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
}
.page-template-front-page-renewal .front-hero__slide[data-offset="0"] .front-hero__visual,
.page-template-front-page-renewal .front-hero__slide[data-offset="1"] .front-hero__visual {
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
}
.page-template-front-page-renewal .front-hero__slide[data-offset="1"] .front-hero__visual {
  top: calc(372 * var(--front-u));
  left: calc(1516 * var(--front-u));
  z-index: 2;
  width: calc(620 * var(--front-u));
  height: calc(441 * var(--front-u));
  opacity: 0.55; /* 待機中(次)のスライドは薄く見せる(デザイン指示)。中央に来るとき 1 へフェード */
}
.page-template-front-page-renewal .front-hero__slide[data-offset="1"] .front-hero__visual img {
  object-position: center;
}
.page-template-front-page-renewal .front-hero__slide:not([data-offset="0"]):not([data-offset="1"]) .front-hero__visual {
  opacity: 0;
  visibility: hidden;
}
.page-template-front-page-renewal .front-hero__slide .front-hero__news {
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.page-template-front-page-renewal .front-hero__slide:not([data-offset="0"]) .front-hero__news {
  opacity: 0;
  visibility: hidden;
}
.page-template-front-page-renewal .front-hero__slide[data-offset="0"] .front-hero__news {
  transition-delay: 0s, 0s;
}
.page-template-front-page-renewal .front-hero__news-source {
  margin: calc(6 * var(--front-u)) 0 0;
  font-size: calc(13 * var(--front-u));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-front-page-renewal .front-hero__slide .front-hero__visual,
  .page-template-front-page-renewal .front-hero__slide .front-hero__news {
    transition: none;
  }
}/* 黒丸矢印ボタン(共通部品) -------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--front-u));
  height: calc(64 * var(--front-u));
  border: 0;
  border-radius: 50%;
  background: var(--front-black);
  color: var(--front-white);
  cursor: pointer;
  transition: opacity 0.2s;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow:hover,
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow:focus-visible {
  opacity: 0.75;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow svg {
  display: block;
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow--prev svg {
  transform: scaleX(-1);
}
.page-template-front-page-renewal .front-hero__arrow {
  position: absolute;
  top: calc(543 * var(--front-u));
  left: calc(1485 * var(--front-u));
  z-index: 5;
}/* SCROLL 表記 ------------------------------------------------------------ */


.page-template-front-page-renewal .front-hero__scroll {
  position: absolute;
  top: calc(794 * var(--front-u));
  left: calc(40 * var(--front-u));
  z-index: 3;
  display: flex;
  align-items: flex-start;
  height: calc(80 * var(--front-u));
  color: var(--front-black);
  font-size: calc(12 * var(--front-u));
  font-weight: 500;
  letter-spacing: 0.25em;
}
.page-template-front-page-renewal .front-hero__scroll-text {
  writing-mode: vertical-rl;
  line-height: 1;
}
.page-template-front-page-renewal .front-hero__scroll-line {
  position: relative;
  width: calc(1 * var(--front-u));
  height: 100%;
  margin-left: calc(8 * var(--front-u));
  background: var(--front-black);
}
.page-template-front-page-renewal .front-hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1 * var(--front-u));
  height: calc(22 * var(--front-u));
  background: var(--front-black);
  transform-origin: bottom left;
  transform: rotate(-38deg);
}/* ティッカー帯「今月の心にメモしたい言葉」 ------------------------------- */


.page-template-front-page-renewal .front-hero__ticker {
  position: relative;
  z-index: 6;
  height: calc(63 * var(--front-u));
  overflow: hidden;
  background: var(--front-white);
  cursor: pointer; /* 帯のどこを押しても引用モーダルが開く(JS) */
}
.page-template-front-page-renewal .front-hero__ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
}
.page-template-front-page-renewal .front-hero__ticker:hover .front-hero__ticker-track {
  animation-play-state: paused;
}
.page-template-front-page-renewal .front-hero__ticker-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-hero__ticker-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  font-family: var(--front-font-pixel);
  white-space: nowrap;
}
.page-template-front-page-renewal .front-hero__ticker-label {
  margin-left: calc(34 * var(--front-u));
  color: var(--front-gray);
  font-size: calc(22 * var(--front-u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.38em;
}
.page-template-front-page-renewal .front-hero__ticker-icon {
  width: calc(63 * var(--front-u));
  height: calc(45 * var(--front-u));
  margin-left: calc(30 * var(--front-u));
  line-height: 0;
}
.page-template-front-page-renewal .front-hero__ticker-icon::before,
.page-template-front-page-renewal .front-quote-modal__icon::before {
  content: none;
}
.page-template-front-page-renewal .front-hero__ticker-icon img,
.page-template-front-page-renewal .front-quote-modal__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-template-front-page-renewal .front-hero__ticker-quote {
  margin-left: calc(43 * var(--front-u));
  color: var(--front-pink);
  font-size: calc(28 * var(--front-u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.48em;
}
.page-template-front-page-renewal .front-hero__ticker-quote {
  margin-right: calc(13 * var(--front-u)); /* 次のラベルまで 47px */
}
@keyframes front-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}/* 動きを減らす設定: .front-motion を持つ要素のアニメーションを一括停止 ------ */


@media (prefers-reduced-motion: reduce) {
  .page-template-front-page-renewal .front-motion {
    animation: none !important;
  }
}/* --------------------------------------------------------------------------
   5. front-hero SP(design/sections-sp/01-hero.png、398px基準・画像実測 ≒ CSS px)
   --------------------------------------------------------------------------
   構造: KV を全幅に敷き、その上にタグライン・ロゴ・円形テキストを重ね、
   KV 下部に NEWS カードが重なる縦積み。漫画サムネ・矢印・Pick up・SCROLL は
   SPカンプに存在しないため非表示。
   単位 --front-sp-u: 500px 以下は 1px(カンプ等倍)、500〜750px は
   ビューポート比例で最大 1.5px まで拡大(中間領域の fluid 対応)。
   ※ 1024px 以上は PC 構成(--front-u による比例縮小)のまま
   -------------------------------------------------------------------------- */


@media (max-width: 1023px) {
  .page-template-front-page-renewal .front-hero {
    --front-sp-u: clamp(1px, calc(100vw / 500), 1.5px);
    --front-u: 1px;
  }
  .page-template-front-page-renewal .front-hero__stage {
    width: auto;
    height: auto;
    margin: 0;
    padding-top: calc(100 * var(--front-sp-u)); /* KV 上のグラデ帯(margin だと相殺されるので padding) */
  }/* 非表示要素 */

  
  .page-template-front-page-renewal .front-hero__pickup-label,
  .page-template-front-page-renewal .front-hero__arrow,
  .page-template-front-page-renewal .front-hero__scroll {
    display: none;
  }/* スライダー: アクティブなスライドが高さを決め、他は重ねて非表示(SP に見切れは無い) */

  
  .page-template-front-page-renewal .front-hero__slider {
    position: relative;
    inset: auto;
  }
  .page-template-front-page-renewal .front-hero__slide[data-offset="0"] {
    position: relative;
  }
  .page-template-front-page-renewal .front-hero__slide[data-offset="1"] .front-hero__visual,
  .page-template-front-page-renewal .front-hero__slide[data-offset="-1"] .front-hero__visual {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: calc(570 * var(--front-sp-u));
    opacity: 0;
    visibility: hidden;
  }
  .page-template-front-page-renewal .front-hero__news-source {
    font-size: calc(9 * var(--front-sp-u));
  }/* KV: 全幅・高さ固定(カンプ 398×570)、横は cover でトリミング */
  
  .page-template-front-page-renewal .front-hero__visual {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: calc(570 * var(--front-sp-u));
    margin: 0;
  }/* タグライン */

  
  .page-template-front-page-renewal .front-hero__tagline {
    top: calc(32 * var(--front-sp-u));
    left: calc(14 * var(--front-sp-u));
    height: calc(26 * var(--front-sp-u));
    padding: 0 calc(14 * var(--front-sp-u));
    border-radius: calc(8 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
    letter-spacing: 0.08em;
  }
  .page-template-front-page-renewal .front-hero__tagline::after {
    left: calc(10 * var(--front-sp-u));
    bottom: calc(-7 * var(--front-sp-u));
    border-width: calc(8 * var(--front-sp-u)) calc(9 * var(--front-sp-u)) 0 0;
  }/* ロゴ(256×178)+ カナ */

  
  #body.page-template-front-page-renewal .front-renewal .front-hero__logo {
    top: calc(32 * var(--front-sp-u));
    left: calc(13 * var(--front-sp-u));
    width: calc(288 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__logo-mark {
    width: calc(288 * var(--front-sp-u));
    height: calc(238 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-placeholder--logo {
    -webkit-text-stroke: calc(2.5 * var(--front-sp-u)) var(--front-black);
    text-shadow: 0 calc(1 * var(--front-sp-u)) 0 var(--front-black);
  }
  .page-template-front-page-renewal .front-hero__logo-line {
    font-size: calc(58 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__logo-line--for {
    padding-left: calc(90 * var(--front-sp-u));
    font-size: calc(34 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__logo-kana {
    margin-top: calc(7 * var(--front-sp-u));
    padding-left: calc(2 * var(--front-sp-u));
    font-size: calc(8 * var(--front-sp-u));
    letter-spacing: 0.3em;
  }/* 回転円形テキスト: 右上、中心が右端の少し外(中心 x≒400, y≒140、半径≒105) */

  
  .page-template-front-page-renewal .front-hero__circle {
    top: calc(35 * var(--front-sp-u));
    left: auto;
    right: calc(-105 * var(--front-sp-u));
    width: calc(210 * var(--front-sp-u));
    height: calc(210 * var(--front-sp-u));
  }/* NEWS カード: KV 下部に重なる(x 41〜352、y 512〜647)。スライド基準なので上の帯(100)を引く */

  
  .page-template-front-page-renewal .front-hero__news {
    top: calc(412 * var(--front-sp-u));
    left: calc(41 * var(--front-sp-u));
    right: calc(46 * var(--front-sp-u));
    width: auto;
    min-height: calc(135 * var(--front-sp-u));
    padding: calc(10 * var(--front-sp-u)) calc(4 * var(--front-sp-u)) calc(20 * var(--front-sp-u)) calc(14 * var(--front-sp-u));
    border-radius: calc(10 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__news-meta {
    margin-right: calc(12 * var(--front-sp-u));
    margin-left: calc(-3 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__news .front-pill {
    min-width: calc(53 * var(--front-sp-u));
    height: calc(13 * var(--front-sp-u));
    padding: 0 calc(8 * var(--front-sp-u));
    border-radius: calc(7 * var(--front-sp-u));
    font-size: calc(9 * var(--front-sp-u));
    line-height: calc(13 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__news-date {
    font-size: calc(9 * var(--front-sp-u));
    letter-spacing: 0.08em;
  }
  .page-template-front-page-renewal .front-hero__news-date {
    top: 0;
  }
  .page-template-front-page-renewal .front-hero__news .front-pill {
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  #body.page-template-front-page-renewal .front-renewal .front-hero__news-title {
    font-weight: 700;
    margin-top: calc(6 * var(--front-sp-u));
    font-size: calc(14 * var(--front-sp-u)); /* カンプは約15px。Noto Sans JP では 390px 幅で1行目(283px)が収まらないため縮小 */
    line-height: 1.8;
    letter-spacing: -0.02em;
  }
  .page-template-front-page-renewal .front-hero__news-more {
    right: calc(-12 * var(--front-sp-u));
    bottom: calc(-7 * var(--front-sp-u));
    bottom: calc(-7 * var(--front-sp-u));
    width: calc(78 * var(--front-sp-u));
    height: calc(17 * var(--front-sp-u));
    border-radius: calc(9 * var(--front-sp-u));
    font-size: calc(10 * var(--front-sp-u));
  }/* ティッカー帯(高さ 39) */

  
  .page-template-front-page-renewal .front-hero__ticker {
    height: calc(39 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__ticker-label {
    margin-left: calc(10 * var(--front-sp-u));
    font-size: calc(13 * var(--front-sp-u));
    letter-spacing: 0.45em;
  }
  .page-template-front-page-renewal .front-hero__ticker-icon {
    width: calc(37 * var(--front-sp-u));
    height: calc(26 * var(--front-sp-u));
    margin-left: calc(12 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-hero__ticker-quote {
    margin-left: calc(26 * var(--front-sp-u));
    font-size: calc(16 * var(--front-sp-u));
    letter-spacing: 0.4em;
  }
}/* ==========================================================================
   6. 共通部品(セクション見出し・ボタン・日付・回転テキスト・グロー等)
   ========================================================================== */


.page-template-front-page-renewal .front-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}/* セクションごとの一時非表示(mock 用。本番は view 側のフラグで出力自体を止める) */

.page-template-front-page-renewal .front-is-hidden {
  display: none !important;
}
.page-template-front-page-renewal .front-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-container {
  width: calc(1360 * var(--front-u));
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}/* セクション見出し ---------------------------------------------------- */


#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .front-section-title {
  position: relative;
  margin: 0;
  text-align: center;
  font-size: inherit;
  line-height: inherit;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__en {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--front-black);
  font-family: var(--front-font-heading-en);
  font-size: calc(72 * var(--front-u));
  font-weight: 400; /* Oswald Regular。カンプ実測の字幅と一致(700 は約10%広い) */
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--lg .front-section-title__en {
  font-size: calc(96 * var(--front-u));
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__brush {
  position: absolute;
  top: calc(-24 * var(--front-u));
  left: 50%;
  z-index: -1;
  width: calc(320 * var(--front-u));
  height: calc(70 * var(--front-u));
  transform: translateX(-48%);
  pointer-events: none;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__ja {
  display: block;
  margin-top: calc(14 * var(--front-u));
  color: var(--front-black);
  font-size: calc(16 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
}/* 白抜き+黒縁取り+グラデ下線のバリエーション(Information / KEY WORD / Follow me!) */

:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--outline .front-section-title__en {
  color: var(--front-white);
  font-size: calc(72 * var(--front-u));
  font-weight: 400;
  -webkit-text-stroke: calc(2 * var(--front-u)) var(--front-black);
  paint-order: stroke fill;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--outline .front-section-title__en::before {
  content: "";
  position: absolute;
  right: calc(-4 * var(--front-u));
  bottom: calc(-6 * var(--front-u));
  left: calc(-4 * var(--front-u));
  z-index: -1;
  height: calc(32 * var(--front-u));
  background: var(--front-gradient-heading);
}/* 画像見出し(14_202610_top_*-title.png を使うセクション: NEW / Pick Up / Ranking / Series / Information)
   画像は 1920 基準カンプの 2 倍解像度 → 表示幅 = 画像幅 × 0.5 × --front-u。
   筆ストロークが文字の上に約 22px はみ出すぶんを負マージンで吸収し、文字の位置をテキスト版と揃える */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__img-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__img {
  display: block;
  margin: calc(-20 * var(--front-u)) 0 calc(-4.8 * var(--front-u)); /* 見出し高 = 116 - 20 - 4.8 = 91.2(テキスト版 72px × 0.85 + 14 + 16 と同じ。後続の位置を変えない) */
}/* 高さは整数 px に固定(縦横比は画像と 0.3% 以内の差)。小数 px だと後続セクションがサブピクセルでずれる */

.page-template-front-page-renewal .front-new .front-section-title__img { width: calc(332 * var(--front-u)); height: calc(116 * var(--front-u)); }/* 664×232 */ 
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup .front-section-title__img { width: calc(274 * var(--front-u)); height: calc(116 * var(--front-u)); }
.page-template-front-page-renewal .front-ranking .front-section-title__img { width: calc(432 * var(--front-u)); height: calc(116 * var(--front-u)); }/* 863×232 */ 
.page-template-front-page-renewal .front-series .front-section-title__img { width: calc(274 * var(--front-u)); height: calc(116 * var(--front-u)); }/* 547×231 */ 
.page-template-front-page-renewal .front-info .front-section-title__img { width: calc(325 * var(--front-u)); height: calc(100 * var(--front-u)); margin: 0 0 calc(-2.8 * var(--front-u)); }/* 記事タイトルの改行指定(ACF「タイトル改行」。view の efy_front_entry_title() が出力) ----
   .title-br = 1 行、.title-br-name = 人名の行、.title-br-profile = 肩書き。
   人名の行があるタイトルは「1 行目(タイトル)を少し小さく、人名を少し大きく」見せる(指示の見本):
     タイトル行 0.8em / 人名 1em(太字) / 肩書き 0.85em(太字)。人名行が無いタイトルは従来サイズのまま。
   テーマの追加CSS(.title-br-name { font-size: 1rem } 等)に負けないよう #body 付きで指定 */


#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .title-br {
  display: block;
}
#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal :has(> .title-br-name) > .title-br:not(.title-br-name) {
  font-size: 0.8em; /* 人名(1em)との差をもう少し付ける */
}
#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .title-br-name {
  margin-top: 0.1em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
}
#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .title-br-profile {
  display: inline-block; /* 「（肩書き）」の途中で折り返さず、入り切らないときは丸ごと次行へ */
  font-size: 0.85em;
  font-weight: 700;
}/* ボタン ------------------------------------------------------------- */


.page-template-front-page-renewal .front-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(237 * var(--front-u));
  height: calc(52 * var(--front-u));
  padding: 0 calc(30 * var(--front-u));
  border: 1px solid var(--front-black);
  border-radius: calc(26 * var(--front-u));
  background: var(--front-white);
  color: var(--front-black);
  font-size: calc(18 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.page-template-front-page-renewal .front-btn:hover,
.page-template-front-page-renewal .front-btn:focus-visible {
  background: var(--front-black);
  color: var(--front-white);
}
.page-template-front-page-renewal .front-btn--black {
  background: var(--front-black);
  color: var(--front-white);
}
.page-template-front-page-renewal .front-btn--black:hover,
.page-template-front-page-renewal .front-btn--black:focus-visible {
  opacity: 0.75;
}
.page-template-front-page-renewal .front-more {
  margin: 0;
  text-align: center;
}/* 日付 --------------------------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-date {
  display: block;
  color: var(--front-date);
  font-size: calc(13 * var(--front-u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}/* 回転円形テキスト(汎用) ------------------------------------------------ */


.page-template-front-page-renewal .front-rotating svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.page-template-front-page-renewal .front-rotating text {
  fill: var(--front-black);
  font-family: var(--front-font-base);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.25em;
}/* グロー付き角丸サムネイル ---------------------------------------------- */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow {
  position: relative;
  z-index: 0;
  border-radius: calc(40 * var(--front-u));
}/* 画像の周りのグラデ縁(6px)。縁の外側だけ軽くフェードさせる(ぼかし 4px。以前の 16px より控えめ) */

:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow::before {
  content: "";
  position: absolute;
  inset: calc(-6 * var(--front-u));
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--front-yellow) 0%, var(--front-green) 50%, var(--front-cyan) 100%);
  filter: blur(calc(4 * var(--front-u)));
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow > .front-placeholder {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}/* 本番でアイキャッチ未設定の記事: 画像ありの記事(横長)と見た目を揃えるため、枠を 16:9 にして
   薄いグレー地に小さなロゴマークを置く。枠の高さは画像ありと同じく内容(= 16:9)に追従させる */

:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow:has(> .front-placeholder--noimage),
.page-template-front-page-renewal .front-ranking__thumb:has(> .front-placeholder--noimage),
.page-template-front-page-renewal .front-article__thumb.front-glow:has(> .front-placeholder--noimage),
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__thumb:has(> .front-placeholder--noimage) {
  height: auto;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow > .front-placeholder--noimage,
.page-template-front-page-renewal .front-ranking__thumb > .front-placeholder--noimage {
  width: 100%;
  height: auto; /* .front-glow > .front-placeholder の height: 100% より優先 */
  aspect-ratio: 16 / 9;
  background-color: #efeeec;
  border-radius: inherit;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-placeholder--noimage img {
  width: 18%;
  max-width: calc(90 * var(--front-u));
  height: auto;
  opacity: 0.35;
}/* アイキャッチ(the_post_thumbnail の img): トリミングせず、枠を画像の縦横比に合わせて縮める
   (正方形化はクライアント確認で取りやめ: 画像内の文字が切れるため)。
   幅は固定のまま高さを auto にし、画像の周りにはグロー装飾(::before のグラデ)が細い縁として出る。
   既存サイト由来の img の枠線・影が出ないよう border / box-shadow / outline を明示的に 0 に(A11)。
   テーマ側の img { height: auto } 等に負けないよう #body を付けて詳細度を上げる */

:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow:has(> img),
.page-template-front-page-renewal .front-article__thumb.front-glow:has(> img),
.page-template-front-page-renewal .front-ranking__thumb:has(> img),
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__thumb:has(> img) {
  height: auto;
}
#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .front-glow > img,
#body.page-template-front-page-renewal .front-renewal .front-ranking__thumb > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  outline: 0;
}/* ホバー: サムネに薄い白をかけ、押せることを示す(fb-03 / A8)。全セクションのカード共通 */

:is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow::after,
.page-template-front-page-renewal .front-ranking__thumb::after,
.page-template-front-page-renewal .front-series__circle::after,
.page-template-front-page-renewal .front-series__banner-link::after,
.page-template-front-page-renewal .front-backnumber__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.page-template-front-page-renewal .front-ranking__thumb,
.page-template-front-page-renewal .front-series__circle,
.page-template-front-page-renewal .front-series__banner-link {
  position: relative;
}
.page-template-front-page-renewal .front-article__link:hover .front-glow::after,
.page-template-front-page-renewal .front-article__link:focus-visible .front-glow::after,
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__link:hover .front-glow::after,
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__link:focus-visible .front-glow::after,
.page-template-front-page-renewal .front-ranking__link:hover .front-ranking__thumb::after,
.page-template-front-page-renewal .front-ranking__link:focus-visible .front-ranking__thumb::after,
.page-template-front-page-renewal .front-series__circle:hover::after,
.page-template-front-page-renewal .front-series__circle:focus-visible::after,
.page-template-front-page-renewal .front-series__banner-link:hover::after,
.page-template-front-page-renewal .front-series__banner-link:focus-visible::after,
.page-template-front-page-renewal .front-backnumber__cover:hover::after,
.page-template-front-page-renewal .front-backnumber__cover:focus-visible::after {
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow::after,
  .page-template-front-page-renewal .front-ranking__thumb::after,
  .page-template-front-page-renewal .front-series__circle::after,
  .page-template-front-page-renewal .front-series__banner-link::after,
  .page-template-front-page-renewal .front-backnumber__cover::after {
    transition: none; /* 変化自体は残し、アニメーションだけ止める */
  }
}
#body.page-template-front-page-renewal .front-renewal .front-info__icon > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-position: center;
}
#body.page-template-front-page-renewal .front-renewal .front-info__icon > img {
  object-fit: cover; /* お知らせのアイコン(小さな円)は従来どおりトリミング */
  border-radius: 50%;
}/* 「＼ テキスト ／」 ---------------------------------------------------- */


.page-template-front-page-renewal .front-slash {
  position: relative;
  display: inline-block;
  padding: 0 calc(26 * var(--front-u));
}
.page-template-front-page-renewal .front-slash::before,
.page-template-front-page-renewal .front-slash::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(1.5 * var(--front-u));
  height: 1.6em;
  background: var(--front-black);
  transform-origin: center;
}
.page-template-front-page-renewal .front-slash::before {
  left: calc(6 * var(--front-u));
  transform: translateY(-50%) rotate(-30deg);
}
.page-template-front-page-renewal .front-slash::after {
  right: calc(6 * var(--front-u));
  transform: translateY(-50%) rotate(30deg);
}/* プレースホルダーの派生 ------------------------------------------------- */


.page-template-front-page-renewal .front-placeholder--photo {
  background-color: var(--front-ph-photo);
}
.page-template-front-page-renewal .front-placeholder--text {
  background: none;
  color: var(--front-black);
  font-family: var(--front-font-rounded);
  font-weight: 900;
  text-align: center;
}
.page-template-front-page-renewal .front-placeholder--text[data-label]::after {
  display: none;
}
.page-template-front-page-renewal .front-placeholder--logo-circle {
  background: linear-gradient(135deg, var(--front-yellow) 0%, var(--front-green) 55%, var(--front-cyan) 100%);
  color: var(--front-white);
  font-family: var(--front-font-logo);
  font-size: calc(15 * var(--front-u));
  font-weight: 900;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: calc(1 * var(--front-u)) var(--front-black);
  paint-order: stroke fill;
}
.page-template-front-page-renewal .front-placeholder--logo-circle[data-label]::after {
  display: none;
}/* SP専用要素は PC では非表示 ---------------------------------------- */


.page-template-front-page-renewal .front-br-sp,
.page-template-front-page-renewal .front-new__arrow {
  display: none;
}
.page-template-front-page-renewal .front-new__slider {
  position: relative;
}/* スクロールでフワッと表示(data-front-reveal) -------------------------
   JS が .front-renewal に front-js を付けた場合だけ初期状態を隠す
   (JS 無効時は常に表示)。IntersectionObserver で .is-visible を付与、1回限り。
   reduce 時は JS が即時 .is-visible を付け、CSS 側でも遷移を無効化する */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal.front-js [data-front-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: var(--front-reveal-delay, 0s);
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal.front-js [data-front-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal.front-js [data-front-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}/* ==========================================================================
   7. front-intro(02-intro.png)
   ティッカー下端から 780px。横グラデを下方向に白へフェード
   ========================================================================== */


.page-template-front-page-renewal .front-intro {
  position: relative;
  /* 指定色: 左上 #FCFF4E → 右上 #00E8FF。下方向の白フェードは ::before で重ねる */
  background: linear-gradient(90deg, #fcff4e 0%, #00e8ff 100%);
}
.page-template-front-page-renewal .front-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  /* fb-02「グラデを自然に白にフェードアウト」: 多段で滑らかに立ち上げ、下端は完全な白にして次セクションと継ぎ目なく繋ぐ */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.9) 88%, #fff 100%);
  pointer-events: none;
}
.page-template-front-page-renewal .front-intro__inner {
  position: relative;
  padding: calc(83 * var(--front-u)) calc(20 * var(--front-u)) calc(58 * var(--front-u)); /* セクション高 769(カンプ) */
  text-align: center;
}/* 見出し: 丸ゴシック 700・白抜き・黒 2px 縁取り(カンプ実測: 字面 y90〜134、幅 691) */

#body.page-template-front-page-renewal .front-renewal .front-intro__title {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--front-white);
  font-family: var(--front-font-rounded);
  font-size: calc(56 * var(--front-u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-text-stroke: calc(2 * var(--front-u)) var(--front-black);
  paint-order: stroke fill;
  white-space: nowrap;
}
.page-template-front-page-renewal .front-intro__title-text {
  display: inline-block;
}
.page-template-front-page-renewal .front-intro__wavy {
  text-decoration: underline wavy var(--front-black);
  text-decoration-thickness: calc(2 * var(--front-u));
  text-underline-offset: calc(10 * var(--front-u));
  -webkit-text-stroke: calc(2 * var(--front-u)) var(--front-black);
}/* 装飾(カンプ実測、見出し左端 x600 基準)
   左: ○ (534,70) d9 / ○ (548,76) d18 / ○ (567,45) d12 / ○ (588,83) d7
   右: ✧ (1346,48) 16×22 / ✧ (1363,74) 26×31 + 小さな十字 */

.page-template-front-page-renewal .front-intro__deco {
  position: absolute;
  top: 0;
  width: calc(80 * var(--front-u));
  height: calc(80 * var(--front-u));
  color: var(--front-black);
  -webkit-text-stroke: 0;
  text-align: left;
}
.page-template-front-page-renewal .front-intro__deco--l {
  left: calc(-96 * var(--front-u)); /* fb-01「イラストが近い」: 見出しから 30px 離す */
}
.page-template-front-page-renewal .front-intro__deco--l i {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: calc(1.5 * var(--front-u)) solid var(--front-black);
  border-radius: 50%;
}
.page-template-front-page-renewal .front-intro__deco--l i:nth-child(1) { top: calc(25 * var(--front-u)); left: 0;                         width: calc(9 * var(--front-u));  height: calc(10 * var(--front-u)); }
.page-template-front-page-renewal .front-intro__deco--l i:nth-child(2) { top: calc(31 * var(--front-u)); left: calc(14 * var(--front-u)); width: calc(18 * var(--front-u)); height: calc(19 * var(--front-u)); }
.page-template-front-page-renewal .front-intro__deco--l i:nth-child(3) { top: 0;                         left: calc(33 * var(--front-u)); width: calc(12 * var(--front-u)); height: calc(12 * var(--front-u)); }
.page-template-front-page-renewal .front-intro__deco--l i:nth-child(4) { top: calc(38 * var(--front-u)); left: calc(54 * var(--front-u)); width: calc(7 * var(--front-u));  height: calc(7 * var(--front-u)); }
.page-template-front-page-renewal .front-intro__deco--r {
  left: 100%;
  margin-left: calc(26 * var(--front-u));
}
.page-template-front-page-renewal .front-intro__star,
.page-template-front-page-renewal .front-intro__plus {
  position: absolute;
  font-family: var(--front-font-base);
  font-weight: 400;
  line-height: 1;
}
.page-template-front-page-renewal .front-intro__star--s { top: calc(3 * var(--front-u));  left: 0;                         font-size: calc(22 * var(--front-u)); transform: scaleX(0.75); }
.page-template-front-page-renewal .front-intro__star--l { top: calc(29 * var(--front-u)); left: calc(17 * var(--front-u)); font-size: calc(32 * var(--front-u)); transform: scaleX(0.85); }
.page-template-front-page-renewal .front-intro__plus--1 { top: calc(8 * var(--front-u));  left: calc(24 * var(--front-u)); font-size: calc(12 * var(--front-u)); }
.page-template-front-page-renewal .front-intro__plus--2 { top: calc(52 * var(--front-u)); left: calc(2 * var(--front-u));  font-size: calc(10 * var(--front-u)); }/* 本文: カンプ実測 24px・行ピッチ 57・段落間 97 */

.page-template-front-page-renewal .front-intro__text {
  margin: calc(62 * var(--front-u)) 0 0;
  color: var(--front-black);
  font-size: calc(24 * var(--front-u));
  font-weight: 700;
  line-height: 2.375;
  letter-spacing: 0.05em;
}
#body.page-template-front-page-renewal .front-renewal .front-intro__title + .front-intro__text {
  margin-top: calc(40 * var(--front-u));
}/* 見出し+本文の画像(14_202610_top_introtext_pc.png 1714×1043 / _sp.png 1020×1663、いずれも高解像度)。
   PC は旧テキスト版の見出し幅(約 700px)に合わせて 857px、SP は本文幅いっぱい(最大 340px) */
.page-template-front-page-renewal .front-intro__image,
.page-template-front-page-renewal .front-intro__image img {
  display: block;
  width: calc(857 * var(--front-u));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .page-template-front-page-renewal .front-intro__image,
  .page-template-front-page-renewal .front-intro__image img {
    width: calc(340 * var(--front-sp-u));
  }
}
/* 「このサイトについて」ボタン(B3)。本文の下中央。リンク先は view/mock の href で差し替え */

.page-template-front-page-renewal .front-intro__more {
  position: relative;
  z-index: 1;
  margin-top: calc(48 * var(--front-u));
}
.page-template-front-page-renewal .front-intro__em {
  font-family: var(--front-font-rounded);
  font-style: normal;
  font-weight: 900;
  -webkit-text-stroke: calc(1.5 * var(--front-u)) var(--front-black); /* 縁は黒(カンプ 02-intro) */
  paint-order: stroke fill;
}
.page-template-front-page-renewal .front-intro__em--blue   { color: var(--front-blue); }
.page-template-front-page-renewal .front-intro__em--pink   { color: var(--front-pink); }
.page-template-front-page-renewal .front-intro__em--yellow { color: var(--front-lime); }
.page-template-front-page-renewal .front-intro__em--green  { color: var(--front-leaf); }/* ==========================================================================
   8. front-new(03-new-articles.png)NEW Articles
   ========================================================================== */


.page-template-front-page-renewal .front-new {
  padding: calc(153 * var(--front-u)) 0 calc(106 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-new__inner {
  position: relative;
}/* カンプ実測(セクション基準): グラデ円 d200・中心 (437,235)、回転テキストの半径 126。
   inner 基準では中心 (157,82)。カードが円の下側に重なる(z-order は grid が上) */

.page-template-front-page-renewal .front-new__badge {
  position: absolute;
  top: calc(-64 * var(--front-u));
  left: calc(11 * var(--front-u));
  z-index: 0;
  width: calc(292 * var(--front-u));
  height: calc(292 * var(--front-u));
}
.page-template-front-page-renewal .front-new__badge text {
  font-size: 26px; /* viewBox 単位(292 = 1920 基準)。字間で 1 周(周長 793)をぴったり埋める(「ETHICS for YOUTH☆」×2、☆の前後に空白なし) */
  letter-spacing: 7.26px;
}
.page-template-front-page-renewal .front-new__badge .front-ring__pre { letter-spacing: 6.01px; }/* 7.26 - 1.25 */  
.page-template-front-page-renewal .front-new__badge .front-ring__star { letter-spacing: 8.51px; }/* 7.26 + 1.25 */ 
.page-template-front-page-renewal .front-new__badge-ring {
  position: absolute;
  inset: 0;
}
.page-template-front-page-renewal .front-new__badge-circle {
  position: absolute;
  top: calc(46 * var(--front-u));
  left: calc(46 * var(--front-u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--front-u));
  height: calc(200 * var(--front-u));
  border-radius: 50%;
  background: linear-gradient(100deg, #b7e06d 0%, #78d0a0 45%, #5fc9cc 100%);
  color: var(--front-black); /* 「漫画」は黒文字 */
  font-size: calc(24 * var(--front-u));
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.page-template-front-page-renewal .front-new__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch; /* 大カードと小カード列の高さを揃える(A6) */
  gap: calc(37 * var(--front-u));
  margin-top: calc(41 * var(--front-u));
}
.page-template-front-page-renewal .front-new__small {
  display: grid;
  grid-template-columns: repeat(2, calc(292 * var(--front-u)));
  column-gap: calc(24 * var(--front-u));
  row-gap: calc(17 * var(--front-u));
  align-self: stretch;          /* 大カードと同じ高さに伸ばし… */
  align-content: space-between; /* …2 段目のカード下端を大カードの下端に揃える(fb-02「下のラインが揃っていない」) */
}/* 記事カード(共通) */


.page-template-front-page-renewal .front-article {
  margin: 0;
}
.page-template-front-page-renewal .front-article__link {
  display: block;
  color: var(--front-black);
}
.page-template-front-page-renewal .front-article__thumb {
  overflow: visible;
}
.page-template-front-page-renewal .front-article__thumb .front-placeholder {
  overflow: hidden;
}
.page-template-front-page-renewal .front-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--front-u));
}
.page-template-front-page-renewal .front-article__meta .front-pill {
  flex: 0 1 auto;
  min-width: 0;
}
.page-template-front-page-renewal .front-article__meta .front-date {
  flex-shrink: 0;
}
.page-template-front-page-renewal .front-article__series {
  display: block;
  line-height: 1.4;
}
#body.page-template-front-page-renewal .front-renewal .front-article__title {
  margin: 0;
  font-weight: 700;
  transition: opacity 0.2s;
}
#body.page-template-front-page-renewal .front-renewal .front-article__link:hover .front-article__title,
#body.page-template-front-page-renewal .front-renewal .front-article__link:focus-visible .front-article__title {
  opacity: 0.7;
}/* 大カード */

.page-template-front-page-renewal .front-article--large {
  width: calc(720 * var(--front-u));
  flex-shrink: 0;
}
.page-template-front-page-renewal .front-article--large .front-article__thumb {
  width: calc(720 * var(--front-u));
  height: calc(720 * var(--front-u));
}
.page-template-front-page-renewal .front-article--large .front-article__meta {
  margin-top: calc(36 * var(--front-u));
  padding: 0 calc(41 * var(--front-u)) 0 calc(22 * var(--front-u));
}
.page-template-front-page-renewal .front-article--large .front-article__series {
  font-size: calc(22 * var(--front-u));
  font-weight: 400;
}
#body.page-template-front-page-renewal .front-renewal .front-article--large .front-article__title {
  margin-top: calc(10 * var(--front-u));
  padding: 0 calc(22 * var(--front-u));
  font-size: calc(34 * var(--front-u));
  line-height: 1.4;
}/* A6: 下端揃えのため、NEW Articles のタイトルは最大 3 行(超えた分は …。人名行つきタイトルが収まる上限)、
   かつ常に 2 行分の高さを確保。小カード 2 段の合計が大カードより低いときは、
   小カード列(.front-new__small)を space-between で広げて下端を揃える */

#body.page-template-front-page-renewal .front-renewal .front-new .front-article__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#body.page-template-front-page-renewal .front-renewal .front-article--large .front-article__title {
  min-height: calc(34 * 1.4 * 2 * var(--front-u));
}
#body.page-template-front-page-renewal .front-renewal .front-article--small .front-article__title {
  min-height: calc(24 * 1.3 * 2 * var(--front-u));
}/* 小カード */

.page-template-front-page-renewal .front-article--small {
  width: calc(292 * var(--front-u));
}
.page-template-front-page-renewal .front-article--small .front-article__thumb {
  width: calc(292 * var(--front-u));
  height: calc(292 * var(--front-u));
}
.page-template-front-page-renewal .front-article--small .front-article__meta {
  margin-top: calc(13 * var(--front-u));
  padding: 0 calc(20 * var(--front-u)) 0 calc(7 * var(--front-u));
}
.page-template-front-page-renewal .front-article--small .front-article__series {
  margin-top: calc(9 * var(--front-u));
  padding: 0 calc(7 * var(--front-u)) 0 calc(13 * var(--front-u));
  font-size: calc(14 * var(--front-u));
  font-weight: 400;
}
#body.page-template-front-page-renewal .front-renewal .front-article--small .front-article__title {
  margin-top: calc(6 * var(--front-u));
  padding: 0 calc(7 * var(--front-u)) 0 calc(13 * var(--front-u));
  font-size: calc(24 * var(--front-u));
  line-height: 1.3;
}
.page-template-front-page-renewal .front-new .front-more {
  margin-top: calc(28 * var(--front-u));
}/* ==========================================================================
   9. front-pickup(04-pickup.png)Pick Up スライダー
   中央 720px、左右は縮小+半透明で重なる
   ========================================================================== */


:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup {
  padding: calc(44 * var(--front-u)) 0 0;
  background: var(--front-white);
}
/* 高さは固定せず、中央のスライド(通常配置)の高さに追従させる。
   旧: height 941px 固定(正方形サムネ前提)で、横長画像のとき下に大きな空きができていた */
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slider {
  position: relative;
  margin-top: calc(30 * var(--front-u));
  overflow-y: clip; /* 中央より背の高い左右のスライドが下のセクションへはみ出さないように(横ははみ出し可) */
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(720 * var(--front-u));
  margin: 0 0 0 calc(-360 * var(--front-u));
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset] {
  visibility: visible;
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="0"] {
  position: relative; /* 中央のスライドだけ通常配置にして、スライダーの高さを決める */
  left: auto;
  z-index: 3;
  margin: 0 auto;
  opacity: 1;
  transform: none;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-1"],
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="1"] {
  z-index: 2;
  opacity: 0.45;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-1"] { transform: translate(calc(-256 * var(--front-u)), calc(15 * var(--front-u))) scale(0.79); }
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="1"]  { transform: translate(calc(256 * var(--front-u)), calc(15 * var(--front-u))) scale(0.79); }
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-2"],
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="2"] {
  z-index: 1;
  opacity: 0.25;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-2"] { transform: translate(calc(-463 * var(--front-u)), calc(7 * var(--front-u))) scale(0.6); }
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="2"]  { transform: translate(calc(463 * var(--front-u)), calc(7 * var(--front-u))) scale(0.6); }
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide:not([data-offset="0"]) .front-glow::before {
  display: none;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide:not([data-offset="0"]) .front-pickup__link {
  pointer-events: none;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__link {
  display: block;
  color: var(--front-black);
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__thumb {
  width: calc(720 * var(--front-u));
  height: calc(720 * var(--front-u));
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__thumb .front-placeholder {
  overflow: hidden;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__caption {
  margin-top: calc(42 * var(--front-u));
  padding-left: calc(44 * var(--front-u));
  opacity: 0;
  transition: opacity 0.3s;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="0"] .front-pickup__caption {
  opacity: 1;
}
#body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .front-pickup__title {
  margin: calc(14 * var(--front-u)) 0 0;
  font-size: calc(32 * var(--front-u));
  font-weight: 700;
  line-height: 1.4;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__desc {
  margin: calc(10 * var(--front-u)) 0 0;
  font-size: calc(22 * var(--front-u));
  font-weight: 400;
  line-height: 1.3;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__caption .front-date {
  margin-top: calc(14 * var(--front-u));
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow {
  position: absolute;
  top: calc(330 * var(--front-u));
  z-index: 5;
}
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow--prev { left: calc(137 * var(--front-u)); }
:is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow--next { right: calc(112 * var(--front-u)); }/* ==========================================================================
   10. front-ranking(05-ranking.png)TODAY'S RANKING
   横グラデの帯(上下は白にフェード)の上に白いカード。1位が中央
   ========================================================================== */


.page-template-front-page-renewal .front-ranking {
  position: relative;
  min-height: calc(1099 * var(--front-u)); /* Pick Up との間を 60px 詰めたぶん低く(旧 1159) */
  /* 背景は指定色(左 #FAFD4F → 右 #00E8FD)。共通グラデ(--front-gradient-main)とは別 */
  background: linear-gradient(90deg, #fafd4f 0%, #00e8fd 100%);
}
.page-template-front-page-renewal .front-ranking::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff 0%, #fff 9.5%, rgba(255, 255, 255, 0) 39%, rgba(255, 255, 255, 0) 71.5%, #fff 100%);
  pointer-events: none;
}
.page-template-front-page-renewal .front-ranking__inner {
  position: relative;
  padding-top: calc(123 * var(--front-u)); /* Pick Up 下の余白(旧 183) */
}
.page-template-front-page-renewal .front-ranking__circle {
  position: absolute;
  top: calc(144 * var(--front-u)); /* 見出しと一緒に 60px 上げる(旧 204) */
  left: calc(1222 * var(--front-u));
  z-index: 3;
  width: calc(216 * var(--front-u));
  height: calc(216 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__circle text {
  letter-spacing: 4.14px; /* viewBox 単位。周長 603 をぴったり埋める(「ETHICS for YOUTH☆」×2、☆の前後に空白なし) */
}
.page-template-front-page-renewal .front-ranking__circle .front-ring__pre { letter-spacing: 3.09px; }/* 4.14 - 1.05 */  
.page-template-front-page-renewal .front-ranking__circle .front-ring__star { letter-spacing: 5.19px; }/* 4.14 + 1.05 *//* カード: カンプ 1356×744。本番の長いタイトルで溢れないよう高さは min-height で確保し、
   内容が多いときだけ下に伸びる(セクションも min-height で追従) */ 

.page-template-front-page-renewal .front-ranking__card {
  position: relative;
  width: calc(1356 * var(--front-u));
  min-height: calc(744 * var(--front-u));
  margin: calc(38 * var(--front-u)) auto 0;
  overflow: hidden;
  background: var(--front-white);
}
.page-template-front-page-renewal .front-ranking__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-ranking__item {
  flex: 0 0 calc(356 * var(--front-u));
  width: calc(356 * var(--front-u));
  margin: 0;
  padding: calc(58 * var(--front-u)) 0 0;
  text-align: center;
  transition: flex-basis 0.4s, width 0.4s, margin 0.4s, padding 0.4s;
}
.page-template-front-page-renewal .front-ranking__link {
  display: block;
  color: var(--front-gray);
}
.page-template-front-page-renewal .front-ranking__crown {
  display: block;
  width: calc(54 * var(--front-u));
  height: calc(44 * var(--front-u));
  margin: 0 auto;
  color: #ead9a0;
}
.page-template-front-page-renewal .front-ranking__crown svg,
.page-template-front-page-renewal .front-ranking__crown img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-template-front-page-renewal .front-ranking__rank {
  display: block;
  margin-top: calc(14 * var(--front-u));
  font-family: var(--front-font-heading-en);
  line-height: 1;
}
.page-template-front-page-renewal .front-ranking__num {
  font-size: calc(56 * var(--front-u));
  font-weight: 400;
}
.page-template-front-page-renewal .front-ranking__unit {
  margin-left: calc(4 * var(--front-u));
  font-family: var(--front-font-base);
  font-size: calc(28 * var(--front-u));
  font-weight: 500;
}
.page-template-front-page-renewal .front-ranking__thumb {
  display: block;
  width: calc(356 * var(--front-u));
  height: calc(342 * var(--front-u));
  margin: calc(20 * var(--front-u)) auto 0;
  overflow: hidden;
  border-radius: 24%; /* カンプ: 角丸約 85px の正方形(38% だとほぼ円になる) */
  opacity: 0.45;
  transition: opacity 0.4s, width 0.4s, height 0.4s;
}
.page-template-front-page-renewal .front-ranking__thumb .front-placeholder {
  width: 100%;
  height: 100%;
}
.page-template-front-page-renewal .front-ranking__meta {
  display: block;
  width: calc(258 * var(--front-u));
  margin: calc(26 * var(--front-u)) auto 0;
  text-align: left;
}
.page-template-front-page-renewal .front-ranking__meta .front-pill {
  opacity: 0.5;
}/* 号数タグ(.front-ranking__series)はクライアント指示で削除。タイトルがピルの直下に来る */

.page-template-front-page-renewal .front-ranking__title {
  display: block;
  margin-top: calc(10 * var(--front-u));
  font-size: calc(28 * var(--front-u));
  font-weight: 700;
  line-height: 1.35;
}
.page-template-front-page-renewal .front-ranking__meta .front-date {
  margin-top: calc(12 * var(--front-u));
  color: #cfe8e0;
}/* 1位(中央) */

.page-template-front-page-renewal .front-ranking__item[data-offset="0"] {
  flex-basis: calc(400 * var(--front-u));
  width: calc(400 * var(--front-u));
  margin: 0 calc(29 * var(--front-u));
  padding-top: calc(14 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__link {
  color: var(--front-black);
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__crown {
  width: calc(88 * var(--front-u));
  height: calc(70 * var(--front-u));
  color: var(--front-gold);
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__rank {
  margin-top: calc(10 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__num {
  font-size: calc(72 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__unit {
  font-size: calc(36 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__thumb {
  width: calc(360 * var(--front-u));
  height: calc(369 * var(--front-u));
  margin-top: calc(24 * var(--front-u));
  opacity: 1;
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__meta {
  width: calc(244 * var(--front-u));
  margin-top: calc(17 * var(--front-u));
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__meta .front-pill {
  opacity: 1;
}
.page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__meta .front-date {
  color: var(--front-date);
}
.page-template-front-page-renewal .front-ranking__item:not([data-offset="0"]) .front-ranking__link {
  pointer-events: none;
}
.page-template-front-page-renewal .front-ranking__arrow {
  position: absolute;
  top: calc(351 * var(--front-u));
  z-index: 5;
}
.page-template-front-page-renewal .front-ranking__arrow--prev { left: calc(24 * var(--front-u)); }
.page-template-front-page-renewal .front-ranking__arrow--next { right: calc(38 * var(--front-u)); }/* ==========================================================================
   11. front-series(06-series-banners.png)SERIES
   ========================================================================== */


.page-template-front-page-renewal .front-series {
  padding: calc(147 * var(--front-u)) 0 calc(99 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-series__inner {
  position: relative;
}
.page-template-front-page-renewal .front-series__garland {
  position: absolute;
  top: calc(-13 * var(--front-u));
  width: calc(170 * var(--front-u));
  height: calc(150 * var(--front-u));
  color: var(--front-black);
}
.page-template-front-page-renewal .front-series__garland svg,
.page-template-front-page-renewal .front-series__garland img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-template-front-page-renewal .front-series__garland--l { left: calc(11 * var(--front-u)); }
.page-template-front-page-renewal .front-series__garland--r { right: calc(-8 * var(--front-u)); }/* 右は deco02(右下がりの弧)をそのまま使う。反転しない */ 
.page-template-front-page-renewal .front-series__list {
  display: flex;
  gap: calc(26 * var(--front-u));
  margin: calc(40 * var(--front-u)) 0 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-series__item {
  width: calc(320 * var(--front-u));
  margin: 0;
  text-align: center;
}
.page-template-front-page-renewal .front-series__circle {
  display: block;
  width: calc(320 * var(--front-u));
  height: calc(320 * var(--front-u));
  overflow: hidden;
  border: 1px solid var(--front-black);
  border-radius: 50%;
}
.page-template-front-page-renewal .front-series__circle .front-placeholder,
.page-template-front-page-renewal .front-series__circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-template-front-page-renewal .front-series__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(136 * var(--front-u));
  margin-top: calc(16 * var(--front-u));
  font-size: calc(36 * var(--front-u));
  line-height: 1.1;
}
.page-template-front-page-renewal .front-series__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.page-template-front-page-renewal .front-series__banner-link {
  display: block;
}
.page-template-front-page-renewal .front-series__banner img {
  display: block;
  width: 100%;
  height: auto;
}
.page-template-front-page-renewal .front-series__logo-sub {
  display: block;
  font-size: 0.5em;
  line-height: 1.4;
}
.page-template-front-page-renewal .front-series__more {
  margin-top: calc(18 * var(--front-u));
  min-width: calc(236 * var(--front-u));
}
.page-template-front-page-renewal .front-series__banners {
  display: flex;
  gap: calc(36 * var(--front-u));
  margin: calc(160 * var(--front-u)) 0 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-series__banner {
  width: calc(430 * var(--front-u));
  margin: 0;
}
.page-template-front-page-renewal .front-series__banner .front-placeholder {
  flex-direction: column;
  width: calc(430 * var(--front-u));
  height: calc(250 * var(--front-u));
  font-size: calc(44 * var(--front-u));
  line-height: 1.1;
}
.page-template-front-page-renewal .front-placeholder--banner1 { background-color: #f9d3e5; color: #e8a0c4; }
.page-template-front-page-renewal .front-placeholder--banner2 { background-color: #efeae0; color: #5a5752; }
.page-template-front-page-renewal .front-placeholder--banner3 { background-color: #d2ebf3; color: #e897b8; }/* ==========================================================================
   12. front-info(07-information.png)Information
   ========================================================================== */


.page-template-front-page-renewal .front-info {
  padding: calc(110 * var(--front-u)) 0 calc(39 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-info__band {
  padding: calc(58 * var(--front-u)) 0 calc(55 * var(--front-u));
  background: var(--front-gradient-info);
}
.page-template-front-page-renewal .front-info__star {
  position: absolute;
  top: calc(14 * var(--front-u));
  left: calc(100% + calc(44 * var(--front-u)));
  width: calc(93 * var(--front-u));
  height: calc(38 * var(--front-u));
  color: var(--front-black);
}
.page-template-front-page-renewal .front-info__star svg,
.page-template-front-page-renewal .front-info__star img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-template-front-page-renewal .front-info__list {
  display: flex;
  margin: calc(48 * var(--front-u)) 0 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-info__item {
  width: 33.333%;
  margin: 0;
  padding-left: calc(20 * var(--front-u));
}
.page-template-front-page-renewal .front-info__link {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--front-u));
  color: var(--front-black);
}
.page-template-front-page-renewal .front-info__icon {
  flex-shrink: 0;
  width: calc(104 * var(--front-u));
  height: calc(104 * var(--front-u));
  padding: calc(3 * var(--front-u));
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #e4e4e4 100%); /* fb-04: ピンク→緑の枠をやめ、白→薄グレーの控えめな枠に(A9) */
}
.page-template-front-page-renewal .front-info__icon .front-placeholder,
.page-template-front-page-renewal .front-info__icon .front-placeholder--logo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #bfe3c8;
}
.page-template-front-page-renewal .front-info__icon .front-placeholder--logo-circle img {
  display: block;
  width: 60%;
  height: auto;
}
.page-template-front-page-renewal .front-info__icon .front-placeholder[data-label]::after {
  display: none;
}
.page-template-front-page-renewal .front-info__body {
  display: block;
  padding-top: calc(13 * var(--front-u));
}
.page-template-front-page-renewal .front-info__date {
  display: block;
  color: var(--front-gray-dark);
  font-size: calc(13 * var(--front-u));
  line-height: 1;
  letter-spacing: 0.1em;
}
.page-template-front-page-renewal .front-info__title {
  display: block;
  margin-top: calc(8 * var(--front-u));
  font-size: calc(20 * var(--front-u));
  font-weight: 400;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.page-template-front-page-renewal .front-info__link:hover .front-info__title,
.page-template-front-page-renewal .front-info__link:focus-visible .front-info__title {
  opacity: 0.7;
}
.page-template-front-page-renewal .front-info .front-more {
  margin-top: calc(66 * var(--front-u));
}/* ==========================================================================
   13. front-backnumber(08-backnumber.png)Back number
   ========================================================================== */


.page-template-front-page-renewal .front-backnumber {
  padding: calc(100 * var(--front-u)) 0 calc(85 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-backnumber__inner {
  position: relative;
  width: calc(1360 * var(--front-u));
  max-width: 100%;
  margin: 0 auto;
}/* 1 件 = 1 カード。PC は先頭の 1 件のみ表示(現状の 1 枚構成を維持)、SP は横スクロール */

.page-template-front-page-renewal .front-backnumber__track {
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-backnumber__card {
  position: relative;
  height: calc(854 * var(--front-u));
  margin: 0;
}
.page-template-front-page-renewal .front-backnumber__card:nth-child(n + 2) {
  display: none;
}
.page-template-front-page-renewal .front-backnumber__blob {
  position: absolute;
  top: 0;
  left: calc(160 * var(--front-u));
  width: calc(965 * var(--front-u));
  height: calc(856 * var(--front-u));
  line-height: 0;
}
.page-template-front-page-renewal .front-backnumber__blob img {
  display: block;
  width: 100%;
  height: 100%;
}
#body.page-template-front-page-renewal .front-renewal .front-backnumber__title {
  position: absolute;
  top: 0;
  left: calc(161 * var(--front-u));
  z-index: 2;
  margin: 0;
  color: var(--front-white);
  font-family: var(--front-font-script);
  font-size: calc(120 * var(--front-u));
  font-weight: 400;
  line-height: 0.8;
  -webkit-text-stroke: calc(2 * var(--front-u)) var(--front-pink);
  paint-order: stroke fill;
  text-shadow: calc(4 * var(--front-u)) calc(4 * var(--front-u)) 0 var(--front-pink);
  transform: rotate(-8deg);
  transform-origin: left top;
  white-space: nowrap;
}
.page-template-front-page-renewal .front-backnumber__title-star {
  position: absolute;
  top: calc(40 * var(--front-u));
  left: calc(-40 * var(--front-u));
  color: var(--front-pink);
  font-size: calc(36 * var(--front-u));
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.page-template-front-page-renewal .front-backnumber__title-line {
  display: block;
}
.page-template-front-page-renewal .front-backnumber__title-line--2 {
  margin-left: calc(130 * var(--front-u));
}/* 表紙(素材 backnumber-shoei.png は後ろの紙の重なりを含む。カンプ実測 302×426、x645 y356) */

.page-template-front-page-renewal .front-backnumber__cover {
  position: absolute;
  top: calc(256 * var(--front-u));
  left: calc(365 * var(--front-u));
  z-index: 2;
  display: block;
  width: calc(302 * var(--front-u));
  height: calc(426 * var(--front-u));
}
.page-template-front-page-renewal .front-backnumber__cover img,
.page-template-front-page-renewal .front-backnumber__cover .front-placeholder--cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-template-front-page-renewal .front-backnumber__cover .front-placeholder--cover {
  background-color: #f4bcd6;
  box-shadow: 0 0 0 1px rgba(16, 15, 14, 0.15);
}/* 説明文(2 行・左揃え)。デザイン実測(ブロブ幅 724px 基準に換算): 16px、行送り 1.6、ボタンと左端を揃える */

.page-template-front-page-renewal .front-backnumber__note {
  display: block;
  width: calc(232 * var(--front-u));
  margin: calc(18.5 * var(--front-u)) auto 0; /* ロゴ画像内の「電子書籍版」の下端から 19px */
  padding-left: calc(4 * var(--front-u));
  color: var(--front-black);
  font-size: calc(16 * var(--front-u));
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}
.page-template-front-page-renewal .front-placeholder--cover {
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f4bcd6;
  color: var(--front-white);
  font-family: var(--front-font-logo);
  font-size: calc(40 * var(--front-u));
  font-weight: 900;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: calc(1.5 * var(--front-u)) var(--front-black);
  paint-order: stroke fill;
}
.page-template-front-page-renewal .front-placeholder--cover small {
  margin-top: calc(24 * var(--front-u));
  color: var(--front-black);
  font-family: var(--front-font-base);
  font-size: calc(14 * var(--front-u));
  font-weight: 700;
  -webkit-text-stroke: 0;
}
.page-template-front-page-renewal .front-backnumber__side {
  position: absolute;
  top: calc(305 * var(--front-u));
  left: calc(732 * var(--front-u));
  z-index: 2;
  width: calc(270 * var(--front-u));
  text-align: center;
}
.page-template-front-page-renewal .front-backnumber__logo {
  display: block;
  width: calc(270 * var(--front-u));
  height: calc(229 * var(--front-u));
  margin: 0 auto;
}
.page-template-front-page-renewal .front-backnumber__logo .front-hero__logo-line {
  font-size: calc(62 * var(--front-u));
}
.page-template-front-page-renewal .front-backnumber__logo .front-hero__logo-line--for {
  padding-left: calc(100 * var(--front-u));
  font-size: calc(36 * var(--front-u));
}
.page-template-front-page-renewal .front-backnumber__label {
  margin: calc(22 * var(--front-u)) 0 0;
  color: var(--front-black);
  font-size: calc(22 * var(--front-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}/* ボタン 2 つ: 白地・黒 1px 枠。デザイン実測 232×44、縦に 16px 間隔で並ぶ */

.page-template-front-page-renewal .front-backnumber__btn {
  width: calc(232 * var(--front-u));
  min-width: 0;
  height: calc(44 * var(--front-u));
  margin-top: calc(13 * var(--front-u));
  padding: 0 calc(16 * var(--front-u));
  font-size: calc(16 * var(--front-u));
}
.page-template-front-page-renewal .front-backnumber__btn--sub {
  margin-top: calc(16 * var(--front-u));
}/* ==========================================================================
   14. front-keyword(09-keyword-follow.png 上段)KEY WORD
   ========================================================================== */


.page-template-front-page-renewal .front-keyword {
  padding: calc(82 * var(--front-u)) 0 calc(142 * var(--front-u));
  background: var(--front-white);
}
.page-template-front-page-renewal .front-keyword__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(26 * var(--front-u));
  row-gap: calc(16 * var(--front-u));
  max-width: calc(1200 * var(--front-u));
  margin: calc(48 * var(--front-u)) auto 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-keyword__list li {
  margin: 0;
}
.page-template-front-page-renewal .front-keyword__list a {
  display: inline-block;
  color: var(--front-black);
  font-size: calc(20 * var(--front-u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.page-template-front-page-renewal .front-keyword__list a:hover,
.page-template-front-page-renewal .front-keyword__list a:focus-visible {
  opacity: 0.6;
}/* ==========================================================================
   15. front-follow(09-keyword-follow.png 下段)Follow me!
   ========================================================================== */


.page-template-front-page-renewal .front-follow {
  padding: calc(55 * var(--front-u)) 0 calc(119 * var(--front-u));
  background: var(--front-gray-light);
}/* 見出しは画像 14_202610_top_follow-title.png(1104×133、文字 + グラデ下線 + ✧)。
   カンプの下線幅 287px に合わせて表示幅 551px(画像内の下線 575px から換算) */

.page-template-front-page-renewal .front-follow__title-img {
  display: block;
  width: calc(551 * var(--front-u));
  height: auto;
  margin: 0 auto;
}/* メルマガブロックはクライアント指示で削除。SNS ブロックのみを中央に置く */

.page-template-front-page-renewal .front-follow__body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: calc(50 * var(--front-u));
  padding: 0;
}
.page-template-front-page-renewal .front-follow__sns {
  text-align: center;
}
.page-template-front-page-renewal .front-follow__lead {
  margin: 0;
  color: var(--front-black);
  font-size: calc(14 * var(--front-u));
  font-weight: 500;
  line-height: 1.6;
}
.page-template-front-page-renewal .front-follow__icons {
  display: flex;
  gap: calc(45 * var(--front-u));
  margin: calc(18 * var(--front-u)) 0 0;
  padding: 0;
  list-style: none;
}
.page-template-front-page-renewal .front-follow__icons li {
  margin: 0;
}
.page-template-front-page-renewal .front-follow__icon {
  display: block;
  width: calc(93 * var(--front-u));
  height: calc(93 * var(--front-u));
  overflow: hidden;
  border-radius: 50%;
  transition: opacity 0.2s;
}
.page-template-front-page-renewal .front-follow__icon:hover,
.page-template-front-page-renewal .front-follow__icon:focus-visible {
  opacity: 0.75;
}
.page-template-front-page-renewal .front-follow__lead img {
  display: block;
  width: calc(208 * var(--front-u));
  height: auto;
  margin: 0 auto;
}
.page-template-front-page-renewal .front-follow__icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-template-front-page-renewal .front-follow__icon .front-placeholder {
  width: 100%;
  height: 100%;
  color: var(--front-white);
  font-size: calc(14 * var(--front-u));
  font-weight: 700;
}
.page-template-front-page-renewal .front-follow__icon--instagram .front-placeholder {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}
.page-template-front-page-renewal .front-follow__icon--line .front-placeholder {
  background: #06c755;
}
.page-template-front-page-renewal .front-follow__badge {
  position: absolute;
  top: calc(-22 * var(--front-u));
  right: calc(18 * var(--front-u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(122 * var(--front-u));
  height: calc(122 * var(--front-u));
  background: var(--front-black);
  color: var(--front-white);
  font-size: calc(22 * var(--front-u));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-align: center;
  clip-path: polygon(100.0% 50.0%, 93.9% 60.0%, 95.0% 71.7%, 85.2% 78.1%, 81.2% 89.1%, 69.5% 90.5%, 61.1% 98.7%, 50.0% 95.0%, 38.9% 98.7%, 30.5% 90.5%, 18.8% 89.1%, 14.8% 78.1%, 5.0% 71.7%, 6.1% 60.0%, 0.0% 50.0%, 6.1% 40.0%, 5.0% 28.3%, 14.8% 21.9%, 18.8% 10.9%, 30.5% 9.5%, 38.9% 1.3%, 50.0% 5.0%, 61.1% 1.3%, 69.5% 9.5%, 81.2% 10.9%, 85.2% 21.9%, 95.0% 28.3%, 93.9% 40.0%);
  transform: rotate(10deg);
}/* ==========================================================================
   16. front-quote-modal(11-header-quote-modal.png)
   ========================================================================== */


.page-template-front-page-renewal .front-quote-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.page-template-front-page-renewal .front-quote-modal[hidden] {
  display: none;
}
.page-template-front-page-renewal .front-quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 15, 14, 0.55);
}
.page-template-front-page-renewal .front-quote-modal__dialog {
  position: relative;
  width: calc(687 * var(--front-u));
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  outline: none;
}
.page-template-front-page-renewal .front-quote-modal__box {
  position: relative;
  padding: calc(58 * var(--front-u)) calc(49 * var(--front-u)) calc(99 * var(--front-u));
  background: var(--front-white);
  color: var(--front-black);
  font-family: var(--front-font-pixel);
  /* ドット風の角(3段の階段)と下部のしっぽ */
  clip-path: polygon(
    0 calc(24 * var(--front-u)), calc(12 * var(--front-u)) calc(24 * var(--front-u)), calc(12 * var(--front-u)) calc(12 * var(--front-u)), calc(24 * var(--front-u)) calc(12 * var(--front-u)), calc(24 * var(--front-u)) 0,
    calc(100% - calc(24 * var(--front-u))) 0, calc(100% - calc(24 * var(--front-u))) calc(12 * var(--front-u)), calc(100% - calc(12 * var(--front-u))) calc(12 * var(--front-u)), calc(100% - calc(12 * var(--front-u))) calc(24 * var(--front-u)), 100% calc(24 * var(--front-u)),
    100% calc(100% - calc(63 * var(--front-u))), calc(100% - calc(12 * var(--front-u))) calc(100% - calc(63 * var(--front-u))), calc(100% - calc(12 * var(--front-u))) calc(100% - calc(51 * var(--front-u))), calc(100% - calc(24 * var(--front-u))) calc(100% - calc(51 * var(--front-u))), calc(100% - calc(24 * var(--front-u))) calc(100% - calc(39 * var(--front-u))),
    calc(344 * var(--front-u)) calc(100% - calc(39 * var(--front-u))), calc(344 * var(--front-u)) calc(100% - calc(29 * var(--front-u))), calc(318 * var(--front-u)) calc(100% - calc(29 * var(--front-u))), calc(318 * var(--front-u)) calc(100% - calc(19 * var(--front-u))), calc(292 * var(--front-u)) calc(100% - calc(19 * var(--front-u))), calc(292 * var(--front-u)) calc(100% - calc(9 * var(--front-u))), calc(266 * var(--front-u)) calc(100% - calc(9 * var(--front-u))), calc(266 * var(--front-u)) 100%,
    calc(240 * var(--front-u)) 100%, calc(240 * var(--front-u)) calc(100% - calc(39 * var(--front-u))),
    calc(24 * var(--front-u)) calc(100% - calc(39 * var(--front-u))), calc(24 * var(--front-u)) calc(100% - calc(51 * var(--front-u))), calc(12 * var(--front-u)) calc(100% - calc(51 * var(--front-u))), calc(12 * var(--front-u)) calc(100% - calc(63 * var(--front-u))), 0 calc(100% - calc(63 * var(--front-u)))
  );
}
.page-template-front-page-renewal .front-quote-modal__close {
  position: absolute;
  top: calc(28 * var(--front-u));
  right: calc(28 * var(--front-u));
  width: calc(40 * var(--front-u));
  height: calc(40 * var(--front-u));
  padding: 0;
  border: calc(2 * var(--front-u)) solid var(--front-gray);
  background: var(--front-white);
  color: var(--front-gray);
  font-family: inherit;
  font-size: calc(24 * var(--front-u));
  line-height: 1;
  cursor: pointer;
}
.page-template-front-page-renewal .front-quote-modal__close:hover,
.page-template-front-page-renewal .front-quote-modal__close:focus-visible {
  border-color: var(--front-black);
  color: var(--front-black);
}
.page-template-front-page-renewal .front-quote-modal__label {
  margin: 0;
  padding-right: calc(140 * var(--front-u));
  color: var(--front-gray);
  font-size: calc(28 * var(--front-u));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.15em;
}
.page-template-front-page-renewal .front-quote-modal__icon {
  position: absolute;
  top: calc(57 * var(--front-u));
  right: calc(54 * var(--front-u));
  width: calc(98 * var(--front-u));
  height: calc(70 * var(--front-u));
  line-height: 0;
}
.page-template-front-page-renewal .front-quote-modal__quote {
  margin: calc(48 * var(--front-u)) 0 0;
  color: var(--front-pink);
  font-size: calc(56 * var(--front-u));
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.12em;
}
.page-template-front-page-renewal .front-quote-modal__credit {
  margin: calc(56 * var(--front-u)) 0 0;
  color: var(--front-gray);
  font-size: calc(16 * var(--front-u));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.15em;
}/* ティッカーのボタン化 */

.page-template-front-page-renewal .front-hero__ticker-button {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.page-template-front-page-renewal button.front-hero__ticker-button:hover .front-hero__ticker-quote,
.page-template-front-page-renewal button.front-hero__ticker-button:focus-visible .front-hero__ticker-quote {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}/* ==========================================================================
   17. SP(design/sections-sp/02〜09、398px基準・画像実測 ≒ CSS px)
   --------------------------------------------------------------------------
   - 1023px 以下で各セクションを SP 構成に切り替える(ヒーローと同じ方針)
   - 単位 --front-sp-u: 500px 以下は 1px(カンプ等倍)、500〜750px は
     ビューポート比例で最大 1.5px まで拡大
   - 構造の切り替え: NEW Articles → 横スクロールのカード列、
     TODAY'S RANKING → 中央1件+左右の見切れ、SERIES → 2列、
     Information → 縦1列、Follow me! → メルマガが円形+ボタン
   ========================================================================== */


@media (max-width: 1023px) {
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal {
    --front-sp-u: clamp(1px, calc(100vw / 500), 1.5px);
    --front-u: 1px;
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-container {
    width: auto;
    padding-right: calc(20 * var(--front-sp-u));
    padding-left: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-br-sp {
    display: inline;
  }/* 共通部品 ------------------------------------------------------------ */

  
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__en {
    font-size: calc(44 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--lg .front-section-title__en {
    font-size: calc(46 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__brush {
    top: calc(-14 * var(--front-sp-u));
    width: calc(200 * var(--front-sp-u));
    height: calc(44 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__ja {
    margin-top: calc(8 * var(--front-sp-u));
    font-size: calc(10 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--outline .front-section-title__en {
    font-size: calc(48 * var(--front-sp-u));
    -webkit-text-stroke: calc(1.5 * var(--front-sp-u)) var(--front-black);
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title--outline .front-section-title__en::before {
    right: calc(-3 * var(--front-sp-u));
    bottom: calc(-4 * var(--front-sp-u));
    left: calc(-3 * var(--front-sp-u));
    height: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-btn {
    min-width: calc(153 * var(--front-sp-u));
    height: calc(35 * var(--front-sp-u));
    padding: 0 calc(20 * var(--front-sp-u));
    border-radius: calc(18 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-date {
    font-size: calc(10 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pill {
    min-width: calc(77 * var(--front-sp-u));
    height: calc(27 * var(--front-sp-u));
    padding: 0 calc(12 * var(--front-sp-u));
    border-radius: calc(14 * var(--front-sp-u));
    font-size: calc(14 * var(--front-sp-u));
    line-height: calc(27 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow {
    border-radius: calc(20 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-glow::before {
    inset: calc(-5 * var(--front-sp-u));
    filter: blur(calc(3 * var(--front-sp-u)));
  }

  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-arrow {
    width: calc(41 * var(--front-sp-u));
    height: calc(41 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-slash {
    padding: 0 calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-slash::before { left: calc(4 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-slash::after { right: calc(4 * var(--front-sp-u)); }/* 02 intro ------------------------------------------------------------- */

  
  .page-template-front-page-renewal .front-intro::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.9) 88%, #fff 100%);
  }
  .page-template-front-page-renewal .front-intro__inner {
    padding: calc(56 * var(--front-sp-u)) calc(20 * var(--front-sp-u)) calc(67 * var(--front-sp-u));
  }
  #body.page-template-front-page-renewal .front-renewal .front-intro__title {
    font-size: calc(28 * var(--front-sp-u));
    line-height: 1.25;
    -webkit-text-stroke: calc(1.5 * var(--front-sp-u)) var(--front-black);
  }
  .page-template-front-page-renewal .front-intro__wavy {
    text-decoration-thickness: calc(1.5 * var(--front-sp-u));
    text-underline-offset: calc(5 * var(--front-sp-u));
    -webkit-text-stroke: calc(1.5 * var(--front-sp-u)) var(--front-black);
  }
  .page-template-front-page-renewal .front-intro__deco {
    top: calc(-26 * var(--front-sp-u));
    font-size: calc(16 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__deco--l {
    left: calc(-40 * var(--front-sp-u));
    width: calc(36 * var(--front-sp-u));
    height: calc(46 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__deco--l i {
    border-width: calc(1.5 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__deco--l i:nth-child(1) { width: calc(7 * var(--front-sp-u)); height: calc(7 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__deco--l i:nth-child(2) { top: calc(18 * var(--front-sp-u)); left: calc(6 * var(--front-sp-u)); width: calc(12 * var(--front-sp-u)); height: calc(12 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__deco--l i:nth-child(3) { top: calc(36 * var(--front-sp-u)); left: calc(26 * var(--front-sp-u)); width: calc(5 * var(--front-sp-u)); height: calc(5 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__deco--l i:nth-child(4) { top: calc(20 * var(--front-sp-u)); left: calc(28 * var(--front-sp-u)); width: calc(4 * var(--front-sp-u)); height: calc(4 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__deco--r {
    width: calc(36 * var(--front-sp-u));
    margin-left: calc(2 * var(--front-sp-u)); /* fb-07: ✧ を見出し(左下のコピー)に少し近づける */
    top: calc(-14 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__star--s { top: calc(2 * var(--front-sp-u));  font-size: calc(11 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__star--l { top: calc(15 * var(--front-sp-u)); left: calc(9 * var(--front-sp-u)); font-size: calc(16 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__plus--1 { top: calc(4 * var(--front-sp-u));  left: calc(12 * var(--front-sp-u)); font-size: calc(6 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__plus--2 { top: calc(26 * var(--front-sp-u)); left: calc(1 * var(--front-sp-u));  font-size: calc(5 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-intro__more {
    margin-top: calc(28 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__text {
    margin-top: calc(30 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
    line-height: 2.1;
    letter-spacing: 0; /* 29 文字の行が 390px 幅(内側 350)に収まるよう字間なし */
  }
  #body.page-template-front-page-renewal .front-renewal .front-intro__title {
    font-weight: 700;
  }
  #body.page-template-front-page-renewal .front-renewal .front-intro__title + .front-intro__text {
    margin-top: calc(34 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-intro__em {
    -webkit-text-stroke: calc(0.8 * var(--front-sp-u)) var(--front-black);
  }/* 画像見出し(SP): 各カンプの英字の高さから換算した表示幅。負マージンは筆ストロークのはみ出し分。
     下マージンはテキスト版の見出し高(font-size × 0.85 + 和文)と一致させ、後続の位置を変えない */

  
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-section-title__img {
    margin: calc(-12 * var(--front-sp-u)) 0 0;
  }
  .page-template-front-page-renewal .front-new .front-section-title__img { width: calc(234 * var(--front-sp-u)); height: calc(82 * var(--front-sp-u)); margin: calc(-14 * var(--front-sp-u)) 0 calc(-7.5 * var(--front-sp-u)); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup .front-section-title__img { width: calc(149 * var(--front-sp-u)); height: calc(63 * var(--front-sp-u)); margin: calc(-10 * var(--front-sp-u)) 0 calc(2.4 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-ranking .front-section-title__img { width: calc(252 * var(--front-sp-u)); height: calc(68 * var(--front-sp-u)); margin-bottom: calc(-0.6 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series .front-section-title__img { width: calc(145 * var(--front-sp-u)); height: calc(61 * var(--front-sp-u)); margin: calc(-10 * var(--front-sp-u)) 0 calc(1.3 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-info .front-section-title__img { width: calc(218 * var(--front-sp-u)); height: calc(67 * var(--front-sp-u)); margin: 0 0 calc(-10.2 * var(--front-sp-u)); }/* 03 NEW Articles: 横スクロールのカード列(中央1件、左右が見切れる) ---- */

  
  .page-template-front-page-renewal .front-new {
    padding: calc(50 * var(--front-sp-u)) 0 calc(60 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-new__badge {
    display: none;
  }
  .page-template-front-page-renewal .front-new__slider {
    margin: calc(28 * var(--front-sp-u)) calc(-20 * var(--front-sp-u)) 0;
  }
  .page-template-front-page-renewal .front-new__grid {
    display: flex;
    gap: calc(14 * var(--front-sp-u));
    margin: 0;
    padding: calc(15 * var(--front-sp-u)) calc(50% - calc(155 * var(--front-sp-u))) calc(10 * var(--front-sp-u));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(50% - calc(155 * var(--front-sp-u)));
    scrollbar-width: none;
  }
  .page-template-front-page-renewal .front-new__grid::-webkit-scrollbar {
    display: none;
  }
  .page-template-front-page-renewal .front-new__small {
    display: contents;
  }
  .page-template-front-page-renewal .front-article--large,
  .page-template-front-page-renewal .front-article--small {
    flex: 0 0 calc(310 * var(--front-sp-u));
    width: calc(310 * var(--front-sp-u));
    scroll-snap-align: center;
  }
  .page-template-front-page-renewal .front-article--large .front-article__thumb,
  .page-template-front-page-renewal .front-article--small .front-article__thumb {
    width: calc(310 * var(--front-sp-u));
    height: calc(310 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-article--large .front-article__meta,
  .page-template-front-page-renewal .front-article--small .front-article__meta {
    margin-top: calc(18 * var(--front-sp-u));
    padding: 0 calc(8 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-article--large .front-article__series,
  .page-template-front-page-renewal .front-article--small .front-article__series {
    margin-top: calc(8 * var(--front-sp-u));
    padding: 0 calc(8 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
  }
  #body.page-template-front-page-renewal .front-renewal .front-article--large .front-article__title,
  #body.page-template-front-page-renewal .front-renewal .front-article--small .front-article__title {
    margin-top: calc(4 * var(--front-sp-u));
    padding: 0 calc(8 * var(--front-sp-u));
    font-size: calc(20 * var(--front-sp-u));
    line-height: 1.4;
  }
  .page-template-front-page-renewal .front-new__arrow {
    position: absolute;
    top: calc(150 * var(--front-sp-u));
    z-index: 5;
    display: inline-flex;
  }
  .page-template-front-page-renewal .front-new__arrow--prev { left: calc(10 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-new__arrow--next { right: calc(15 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-new .front-more {
    margin-top: calc(30 * var(--front-sp-u));
  }/* 04 Pick Up ----------------------------------------------------------- */

  
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup {
    padding: calc(44 * var(--front-sp-u)) 0 0;
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slider {
    margin: calc(26 * var(--front-sp-u)) calc(-20 * var(--front-sp-u)) 0;
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide {
    width: calc(310 * var(--front-sp-u));
    margin-left: calc(-155 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-1"],
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="1"] {
    opacity: 0.4;
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-1"] { transform: translateX(calc(-324 * var(--front-sp-u))); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="1"]  { transform: translateX(calc(324 * var(--front-sp-u))); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="-2"] { transform: translateX(calc(-648 * var(--front-sp-u))); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__slide[data-offset="2"]  { transform: translateX(calc(648 * var(--front-sp-u))); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__thumb {
    width: calc(310 * var(--front-sp-u));
    height: calc(310 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__caption {
    margin-top: calc(18 * var(--front-sp-u));
    padding-left: calc(8 * var(--front-sp-u));
  }
  #body:is(.page-template-front-page-renewal, .efy-has-pickup) .front-renewal .front-pickup__title {
    margin-top: calc(11 * var(--front-sp-u));
    font-size: calc(20 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__desc {
    margin-top: calc(8 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
    line-height: 1.5;
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__caption .front-date {
    margin-top: calc(10 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow {
    top: calc(135 * var(--front-sp-u));
  }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow--prev { left: calc(10 * var(--front-sp-u)); }
  :is(.page-template-front-page-renewal, .efy-has-pickup) .front-pickup__arrow--next { right: calc(15 * var(--front-sp-u)); }/* 05 TODAY'S RANKING: 上下にフェードする帯、中央1件+左右の見切れ ------- */

  
  .page-template-front-page-renewal .front-ranking {
    height: auto;
    min-height: 0;
    padding: calc(57 * var(--front-sp-u)) 0 0; /* Pick Up 下の余白(旧 107) */
    background: var(--front-white);
  }
  .page-template-front-page-renewal .front-ranking::before {
    display: none;
  }
  .page-template-front-page-renewal .front-ranking__inner {
    position: relative;
    padding-top: calc(71 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(-20 * var(--front-sp-u));
    left: calc(-20 * var(--front-sp-u));
    z-index: 0;
    height: calc(140 * var(--front-sp-u));
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%), var(--front-gradient-main);
    pointer-events: none;
  }
  .page-template-front-page-renewal .front-ranking .front-section-title {
    position: relative;
    z-index: 1;
  }
  .page-template-front-page-renewal .front-ranking__circle {
    display: none;
  }
  .page-template-front-page-renewal .front-ranking__card {
    width: auto;
    height: auto;
    min-height: 0;
    margin: calc(22 * var(--front-sp-u)) calc(-20 * var(--front-sp-u)) 0;
    background: none;
  }/* SP: 各カードが王冠・順位・メタを持ち、非アクティブは不透明度で落とす(指示書 spsp-03) */
  
  .page-template-front-page-renewal .front-ranking__item,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] {
    flex: 0 0 calc(280 * var(--front-sp-u));
    width: calc(280 * var(--front-sp-u));
    margin: 0 calc(10 * var(--front-sp-u));
    padding-top: calc(22 * var(--front-sp-u));
    opacity: 0.35;
    transition: opacity 0.4s;
  }
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] {
    opacity: 1;
  }
  .page-template-front-page-renewal .front-ranking__link,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__link {
    color: var(--front-black);
  }
  .page-template-front-page-renewal .front-ranking__crown,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__crown {
    display: inline-block;
    width: calc(65 * var(--front-sp-u));
    height: calc(52 * var(--front-sp-u));
    margin: 0;
    color: var(--front-gold);
    vertical-align: middle;
  }
  .page-template-front-page-renewal .front-ranking__rank,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__rank {
    display: inline-block;
    margin: 0 0 0 calc(15 * var(--front-sp-u));
    vertical-align: middle;
  }
  .page-template-front-page-renewal .front-ranking__num,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__num {
    font-size: calc(60 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__unit,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__unit {
    font-size: calc(24 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__thumb,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__thumb {
    width: calc(280 * var(--front-sp-u));
    height: calc(280 * var(--front-sp-u));
    margin: calc(38 * var(--front-sp-u)) auto 0;
    opacity: 1;
  }
  .page-template-front-page-renewal .front-ranking__meta,
  .page-template-front-page-renewal .front-ranking__item[data-offset="0"] .front-ranking__meta {
    display: block;
    width: calc(260 * var(--front-sp-u));
    margin: calc(18 * var(--front-sp-u)) auto 0;
  }
  .page-template-front-page-renewal .front-ranking__meta .front-pill {
    opacity: 1;
  }
  .page-template-front-page-renewal .front-ranking__meta .front-date {
    color: var(--front-date);
  }
  .page-template-front-page-renewal .front-ranking__title {
    font-size: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__meta .front-date {
    margin-top: calc(8 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__arrow {
    top: calc(224 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-ranking__arrow--prev { left: calc(32 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-ranking__arrow--next { right: calc(32 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-ranking__card {
    padding-bottom: calc(77 * var(--front-sp-u));
  }/* 06 SERIES: 2列(sections-sp/06 実測。398 ≒ CSS px) ------------------ *//* 上端にランキングから続く淡い帯(高さ 134、下方向に白へフェード)。カンプでは帯は
     ランキング末尾の日付の 42px 下から始まるが、ランキングの下余白が 77px あるため
     帯だけ 35px 上に出す。見出しは帯が消えた位置(帯の下端 + 28px)に載る */

  
  
  .page-template-front-page-renewal .front-series {
    position: relative;
    padding: calc(124 * var(--front-sp-u)) 0 calc(90 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-series::before {
    content: "";
    position: absolute;
    top: calc(-35 * var(--front-sp-u));
    right: 0;
    left: 0;
    height: calc(134 * var(--front-sp-u));
    /* カンプ実測色(白 50% を重ねた状態で 220,250,196 / 194,249,210 / 173,246,227)から逆算 */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 100%),
      linear-gradient(90deg, #b9f589 0%, #85f3a5 50%, #5bedc7 100%);
    pointer-events: none;
  }/* ガーランド: 84×75、見出し文字の上端 -4px、左右は画面端から 16px */
  
  .page-template-front-page-renewal .front-series__garland {
    top: calc(-1 * var(--front-sp-u));
    width: calc(84 * var(--front-sp-u));
    height: calc(75 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-series__garland--l { left: calc(-4 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series__garland--r { right: calc(-5 * var(--front-sp-u)); }/* 2 行のグリッドを横に流す(指示書 spsp-03/04「スクロール表示」)。
     列数は JS が件数から算出(--front-series-cols = ceil(n/2))。4 件なら 2 列で
     画面内に収まりスクロールは発生しない。行優先なので並び順は従来の 2 列グリッドと同じ */
  
  .page-template-front-page-renewal .front-series__list {
    display: grid;
    grid-template-columns: repeat(var(--front-series-cols, 2), 50%);
    grid-auto-flow: row;
    gap: calc(29 * var(--front-sp-u)) 0;
    margin-top: calc(17 * var(--front-sp-u));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .page-template-front-page-renewal .front-series__list::-webkit-scrollbar {
    display: none;
  }
  .page-template-front-page-renewal .front-series__item {
    width: auto;
    scroll-snap-align: start;
  }/* 円 165(列幅 175 の中央)、タイトル画像は原寸の 53%、ボタン 127×30 */
  
  .page-template-front-page-renewal .front-series__circle {
    width: calc(165 * var(--front-sp-u));
    height: calc(165 * var(--front-sp-u));
    margin: 0 auto;
  }
  .page-template-front-page-renewal .front-series__logo {
    height: calc(72 * var(--front-sp-u));
    margin-top: calc(4 * var(--front-sp-u));
    font-size: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-series__logo img {
    max-height: none;
    height: auto;
  }/* 連載 4 本は固定コンテンツ(WP ループ化の対象外)のため、画像ごとに幅を指定。
     カンプ実測: 原寸(217/188/272/200)の約 53% */
  
  .page-template-front-page-renewal .front-series__item:nth-child(1) .front-series__logo img { width: calc(116 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series__item:nth-child(2) .front-series__logo img { width: calc(99 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series__item:nth-child(3) .front-series__logo img { width: calc(145 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series__item:nth-child(4) .front-series__logo img { width: calc(104 * var(--front-sp-u)); }
  .page-template-front-page-renewal .front-series__more {
    min-width: calc(127 * var(--front-sp-u));
    height: calc(30 * var(--front-sp-u));
    margin-top: calc(5 * var(--front-sp-u));
    padding: 0 calc(16 * var(--front-sp-u));
    font-size: calc(12 * var(--front-sp-u));
  }/* バナー: 幅 305 を中央に縦積み、間隔 24、ボタンの 73px 下から */
  
  .page-template-front-page-renewal .front-series__banners {
    flex-direction: column;
    gap: calc(24 * var(--front-sp-u));
    width: calc(305 * var(--front-sp-u));
    max-width: 100%;
    margin: calc(73 * var(--front-sp-u)) auto 0;
  }
  .page-template-front-page-renewal .front-series__banner,
  .page-template-front-page-renewal .front-series__banner .front-placeholder {
    width: 100%;
    height: auto;
  }
  .page-template-front-page-renewal .front-series__banner .front-placeholder {
    aspect-ratio: 430 / 250;
    font-size: calc(30 * var(--front-sp-u));
  }/* 07 Information: 縦1列 ---------------------------------------------- */

  
  .page-template-front-page-renewal .front-info {
    padding: calc(80 * var(--front-sp-u)) 0 0;
  }
  .page-template-front-page-renewal .front-info__band {
    padding: calc(50 * var(--front-sp-u)) 0 calc(103 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__star {
    top: calc(8 * var(--front-sp-u));
    left: calc(100% + calc(10 * var(--front-sp-u)));
    width: calc(50 * var(--front-sp-u));
    height: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__list {
    flex-direction: column;
    gap: calc(39 * var(--front-sp-u));
    margin-top: calc(48 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__item {
    width: auto;
    padding-left: calc(14 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__link {
    gap: calc(17 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__icon {
    width: calc(61 * var(--front-sp-u));
    height: calc(61 * var(--front-sp-u));
    padding: calc(2 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-placeholder--logo-circle {
    font-size: calc(10 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__body {
    padding-top: calc(3 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__date {
    font-size: calc(10 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-info__title {
    margin-top: calc(6 * var(--front-sp-u));
    font-size: calc(16 * var(--front-sp-u));
    line-height: 1.6;
  }
  .page-template-front-page-renewal .front-info .front-more {
    margin-top: calc(45 * var(--front-sp-u));
  }/* 08 Back number ------------------------------------------------------- */

  
  .page-template-front-page-renewal .front-backnumber {
    padding: calc(38 * var(--front-sp-u)) 0 0;
  }
  .page-template-front-page-renewal .front-backnumber__inner {
    width: auto;
  }
  /* 横スライドは不要(クライアント指示)。PC と同じく先頭の 1 枚だけを中央に表示 */
  .page-template-front-page-renewal .front-backnumber__track {
    display: flex;
    justify-content: center;
    padding: 0 calc(22 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__track::-webkit-scrollbar {
    display: none;
  }
  .page-template-front-page-renewal .front-backnumber__card {
    display: block;
    flex: 0 0 calc(345 * var(--front-sp-u));
    width: calc(345 * var(--front-sp-u));
    height: calc(640 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__card:nth-child(n + 2) {
    display: none;
  }
  .page-template-front-page-renewal .front-backnumber__blob {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-template-front-page-renewal .front-backnumber__blob img {
    /* fb-08: 実環境でカード高さが画像比率と合わないと contain では左右が白く残り細い帯になるため、
       cover で常にカード全面を覆う(上基準なので「Back number」ロゴは切れない) */
    object-fit: cover;
    object-position: center top;
  }
  #body.page-template-front-page-renewal .front-renewal .front-backnumber__title {
    left: calc(25 * var(--front-sp-u));
    font-size: calc(62 * var(--front-sp-u));
    line-height: 0.85;
    -webkit-text-stroke: calc(1.5 * var(--front-sp-u)) var(--front-pink);
    text-shadow: calc(3 * var(--front-sp-u)) calc(3 * var(--front-sp-u)) 0 var(--front-pink);
    transform: rotate(-4deg);
  }
  .page-template-front-page-renewal .front-backnumber__title-star {
    top: calc(10 * var(--front-sp-u));
    left: calc(-14 * var(--front-sp-u));
    font-size: calc(20 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__title-line--2 {
    margin-left: calc(90 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__cover {
    top: calc(128 * var(--front-sp-u));
    left: 50%;
    width: calc(180 * var(--front-sp-u));
    height: calc(250 * var(--front-sp-u));
    margin-left: calc(-90 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-placeholder--cover {
    font-size: calc(28 * var(--front-sp-u));
    -webkit-text-stroke: calc(1 * var(--front-sp-u)) var(--front-black);
  }
  .page-template-front-page-renewal .front-placeholder--cover small {
    margin-top: calc(14 * var(--front-sp-u));
    font-size: calc(11 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__side {
    top: calc(386 * var(--front-sp-u));
    right: 0;
    left: 0;
    width: auto;
  }
  .page-template-front-page-renewal .front-backnumber__logo {
    width: calc(150 * var(--front-sp-u));
    height: calc(127 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__note {
    display: block;
    width: auto;
    margin: calc(6 * var(--front-sp-u)) 0 0;
    padding-left: 0;
    text-align: center;
    color: var(--front-black);
    font-size: calc(11 * var(--front-sp-u));
    font-weight: 500;
    line-height: 1.5;
  }
  .page-template-front-page-renewal .front-backnumber__logo .front-hero__logo-line {
    font-size: calc(46 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__logo .front-hero__logo-line--for {
    padding-left: calc(80 * var(--front-sp-u));
    font-size: calc(27 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__label {
    margin-top: calc(10 * var(--front-sp-u));
    font-size: calc(14 * var(--front-sp-u));
  }/* SPカンプでは白地・黒枠(PCは黒地)【要確認】 */
  
  .page-template-front-page-renewal .front-backnumber__btn {
    width: auto;
    min-width: calc(180 * var(--front-sp-u));
    height: calc(30 * var(--front-sp-u));
    margin-top: calc(8 * var(--front-sp-u));
    background: var(--front-white);
    color: var(--front-black);
    font-size: calc(12 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-backnumber__btn--sub {
    display: inline-flex;
  }/* 09 KEY WORD ---------------------------------------------------------- */

  
  .page-template-front-page-renewal .front-keyword {
    padding: calc(125 * var(--front-sp-u)) 0 calc(44 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-keyword__list {
    display: block;
    max-width: none;
    margin-top: calc(15 * var(--front-sp-u));
    padding: 0 calc(14 * var(--front-sp-u));
    line-height: 1.95;
    text-align: left;
  }
  .page-template-front-page-renewal .front-keyword__list li {
    display: inline;
  }
  .page-template-front-page-renewal .front-keyword__list a {
    display: inline;
    margin-right: calc(22 * var(--front-sp-u));
    font-size: calc(15 * var(--front-sp-u));
    line-height: inherit;
    white-space: normal;
  }/* 09 Follow me!: メルマガは円形+ボタン ---------------------------------- */

  
  .page-template-front-page-renewal .front-follow {
    padding: calc(45 * var(--front-sp-u)) 0 calc(73 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-follow__title-img {
    width: calc(324 * var(--front-sp-u)); /* SP カンプの下線幅 169px から換算 */
  }
  .page-template-front-page-renewal .front-follow__body {
    flex-direction: column;
    align-items: center;
    margin-top: calc(33 * var(--front-sp-u));
    padding: 0;
  }
  .page-template-front-page-renewal .front-follow__lead {
    font-size: calc(12 * var(--front-sp-u));
    line-height: 1.55;
  }
  .page-template-front-page-renewal .front-follow__icons {
    gap: calc(34 * var(--front-sp-u));
    margin-top: calc(13 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-follow__icon {
    width: calc(69 * var(--front-sp-u));
    height: calc(69 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-follow__icon .front-placeholder {
    font-size: calc(11 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-follow__lead img {
    width: calc(153 * var(--front-sp-u));
  }
  .page-template-front-page-renewal .front-follow__badge {
    top: calc(6 * var(--front-sp-u));
    right: calc(17 * var(--front-sp-u));
    width: calc(87 * var(--front-sp-u));
    height: calc(87 * var(--front-sp-u));
    font-size: calc(16 * var(--front-sp-u));
  }/* 11 モーダル(SPカンプ未支給。PC準拠で縮小)【要確認】 ------------------- */

  
  .page-template-front-page-renewal .front-quote-modal__dialog {
    width: 100%;
  }
  .page-template-front-page-renewal .front-quote-modal__box {
    padding: 28px 20px 64px;
    clip-path: polygon(
      0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0,
      calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px,
      100% calc(100% - 36px), calc(100% - 6px) calc(100% - 36px), calc(100% - 6px) calc(100% - 30px), calc(100% - 12px) calc(100% - 30px), calc(100% - 12px) calc(100% - 24px),
      120px calc(100% - 24px), 120px calc(100% - 16px), 104px calc(100% - 16px), 104px calc(100% - 8px), 88px calc(100% - 8px), 88px 100%,
      72px 100%, 72px calc(100% - 24px),
      12px calc(100% - 24px), 12px calc(100% - 30px), 6px calc(100% - 30px), 6px calc(100% - 36px), 0 calc(100% - 36px)
    );
  }
  .page-template-front-page-renewal .front-quote-modal__close {
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .page-template-front-page-renewal .front-quote-modal__label {
    padding-right: 80px;
    font-size: 16px;
  }
  .page-template-front-page-renewal .front-quote-modal__icon {
    top: 60px;
    right: 20px;
    width: 56px;
    height: 40px;
  }
  .page-template-front-page-renewal .front-quote-modal__quote {
    margin-top: 28px;
    font-size: 28px;
  }
  .page-template-front-page-renewal .front-quote-modal__credit {
    margin-top: 28px;
    font-size: 12px;
  }
}/* ランキングの並び順(JSが data-offset を付与。PC/SP 共通で 1位を中央に) */


.page-template-front-page-renewal .front-ranking__item[data-offset="-2"] { order: 1; }
.page-template-front-page-renewal .front-ranking__item[data-offset="-1"] { order: 2; }
.page-template-front-page-renewal .front-ranking__item[data-offset="0"]  { order: 3; }
.page-template-front-page-renewal .front-ranking__item[data-offset="1"]  { order: 4; }
.page-template-front-page-renewal .front-ranking__item[data-offset="2"]  { order: 5; }