@charset "utf-8";

.js-img-text-color {
    /* Safariに独立したGPUレイヤーとして処理させる */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* 描画の崩れを防ぐためのヒント */
    will-change: background;
}

/* js-test-color 内の strong タグも透明化＆背景クリップを強制する */
.js-about-text-color,
.js-about-text-color strong {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*===========================================================
画像と重なっている文字の色変更用
===========================================================*/

/*
 * JavaScript側で画像との重なり位置を判定し、
 * background-clip: text を使って文字色を切り替える対象に付けるクラス
 *
 * HTML使用例：
 *
 * <h2 class="js-img-text-color">
 *     霜降りとはひと味違う、赤身のおいしさ
 * </h2>
 *
 * 通常時の文字色は var(--black) に設定
 *
 * ※画像と重なっている部分の色はJavaScript側で設定する
 * ※画像と重なっていない場合は、この黒色が通常の文字色になる
 */
.js-img-text-color {
    color: var(--white);
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:414px) {


/*===========================================================

===========================================================*/



} /* min-width: 414px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {


/*===========================================================

===========================================================*/



} /* min-width: 544px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 768px) {


/*===========================================================

===========================================================*/



} /* min-width: 768px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 1024px) {


/*===========================================================

===========================================================*/



} /* min-width: 1024px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {


/*===========================================================

===========================================================*/



} /* min-width: 1200px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1440px) {


/*===========================================================

===========================================================*/



} /* min-width: 1440px ここまで */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1620px) {



} /* min-width: 1620px ここまで */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */