/*---------------------------------------*/
/* 変数設定 */
/*---------------------------------------*/

:root {
  
  /* BreakPoint */
  --maxpcbreakpoint: 1920px;
  --tabletbreakpoint: 1160px;
  --spbreakpoint: 744px;
  --smallspbreakpoint: 375px;
  --minspbreakpoint: 320px;

  --loading-speed: 0.3s;
  --loading-background: #FFF;

  /* 全体の背景 */
  --body-background: #FFF;

  /* テキストリンク色 */
  --link-color: #000;
  --link-hover-color: #808080; 

  /* PC追尾ヘッダー */
  --fixed-header-background: rgba(0, 0, 0, 0) !important; /* 背景色 */
  --fixed-header-scroll-background: rgba(0, 0, 0, 0) !important; /* 追尾時背景色 */

  /* SP追尾ヘッダー */
  --fixed-spheader-background: rgba(0,0,0,0) !important; /* 背景色 */
  --fixed-spheader-scroll-background: rgba(0,0,0,0) !important; /* 追尾時背景色 */
}



/*---------------------------------------*/
/* 共通スタイル */
/*---------------------------------------*/
/* js,css読み込み後bodyをopacity:1へ */
body {
  opacity: 1 !important;
  background: var(--body-background) !important;
  overflow-x: hidden;
}
.index {
  background: var(--body-background) !important;
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
a:visited {
  color: var(--link-color);
}

body .screen a {
  display: block;
  opacity: 1;
  transition: all .3s ease;
}
body .screen a:hover {
  /* opacity: 0.8; */
}
body .screen [class*="anim-"] a:hover {
  opacity: 1;
}
html strong {
  font-weight: bold;
}
html em {
  font-style: italic;
}

/*
.lazyloadimg.show {
  filter: blur(0px);
  transition: filter .2s ease;
}
.lazyloadimg {
  filter: blur(10px);
  transition: filter .2s ease;
}
*/

/* AnimaHTMLFixerエラー */
.anima-alert {
  position:relative;
  z-index: 9999;
  width:calc(100vw - 40px);
  max-width: 400px;
  margin: 10px auto 20px;
  letter-spacing:1px;
  font-weight:bold;
  line-height:140%;
  font-size:12px;
  color:red;
  border:3px red solid;
  padding:20px;
  border-radius:10px;
  background-color: #ffffff55;
}

/* 非表示要素 */
[class*='displaynone'] {
  display: none !important;
}

/* float clear */
[class*="clearfix"]:after {
  content: "";
  clear: both;
  display: block;
}

/* data-original用 */
div[class^='pc-wrap'] img :not(.firstview img), div[class^='sp-wrap'] img :not(.firstview img) {
  transition: opacity 5s ease;
  opacity: 0;
}

div[class^='pc-wrap'] img.show, div[class^='sp-wrap'] img.show {
  opacity: 1;
}

/* デザインチェック用 */
#designcheck {
  background-repeat: no-repeat;
  background-position: center top;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  opacity: .6;
}
#designcheck-btn {
  width: 100px;
  height: 20px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  text-align: center;
  color: #000;
  line-height: 20px;
  cursor: pointer;
}
#designcheck-btn::after {
  content: "DESIGN CHECK";
  color: #000;
  font-size: 10px;
  font-weight: bold;
}

/* コンテンツ：Anima修正：Width100%表示、screen要素 cursor:pointer;削除 */
.container-center-horizontal {
  overflow: hidden !important;
  position: relative;
  z-index:2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100vw;
}
.container-center-horizontal > div {
  overflow: visible !important;
  cursor: auto;
}
.container-center-horizontal .content-pc {
  width: var(--maxpcbreakpoint) !important;
  min-height: auto !important;
}
.container-center-horizontal .content-sp {
  width: var(--spbreakpoint) !important;
  min-height: auto !important;
}

/* .screen を必ず表示するために block にする*/
.screen {
  display: block !important;
  position: relative !important;
}

/* relative, sectionと付いているクラス名をposition:relativeにする */
[class*="relative"] {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}
[class*="section"] {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}
/* コンテンツ：高さ可変コンテンツ */
[class*="height-auto"],
[class*="auto-height"],
[class*="hauto"],
[class^="pc-wrap"],
[class^="sp-wrap"] {
  height: auto !important;
  position: relative !important;
}
/* デバイス切り替え時のアニメーション */
.content-pc, .content-pc [class^="pc-wrap"],
.content-sp, .content-sp [class^="sp-wrap"],
.content-pc [class*="fixedt"],
.content-sp [class*="fixedt"] {
  transition: scale .2s ease, opacity .5s ease;
}
.content-pc [class*="fixedb"],
.content-sp [class*="fixedb"] {
  transition: scale .2s ease, opacity .5s ease;
}

/* コンテンツ：Anima画像・要素をSEOマークアップした際に、divタグ→spanタグに変更するので、ブロック要素にしておく */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
p span {
  display: inline-block;
}
/* 文字列のスパンタグはインライン要素に */
span[class*="span"] {
  display: inline !important;
}
/* 一度表示した要素は消さないように修正 */
.anim-showed {
  display: block !important;
}
/* imgの隙間を削除 */
.screen {
  font-size: 0;
}
/* コンテンツ：SEOテキスト非表示 */
.hidden-txt {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
/* 上下左右中央寄せ */
[class*="content-center"] {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* コンテンツ：z-indexが付いているクラス名の要素を上に配置 */
[class*="z-index"] {
  z-index: 1;
}
[class*="z-index1"] {
  z-index: 1;
}
[class*="z-index2"] {
  z-index: 2;
}
[class*="z-index3"] {
  z-index: 3;
}
[class*="z-index4"] {
  z-index: 4;
}
[class*="z-index5"] {
  z-index: 5;
}
[class*="z-index6"] {
  z-index: 6;
}
[class*="z-index7"] {
  z-index: 7;
}
[class*="z-index8"] {
  z-index: 8;
}
[class*="z-index9"] {
  z-index: 9;
}
[class*="z-index"] {
  z-index: 1;
}
[class*="z-index-1"] {
  z-index: 1;
}
[class*="z-index-2"] {
  z-index: 2;
}
[class*="z-index-3"] {
  z-index: 3;
}
[class*="z-index-4"] {
  z-index: 4;
}
[class*="z-index-5"] {
  z-index: 5;
}
[class*="z-index-6"] {
  z-index: 6;
}
[class*="z-index-7"] {
  z-index: 7;
}
[class*="z-index-8"] {
  z-index: 8;
}
[class*="z-index-9"] {
  z-index: 9;
}
/* コンテンツ：fixed-がついている要素はz-index:*をつける */
[class^="fixed-"] {
  z-index: 20;
  position: fixed !important;
}

/* コンテンツ：Totopリンク絶対配置（右下） */
[class^="fixed-totop"],
[class^="fixed-pagetop"] {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  transition: all 1s ease; opacity: 0;
  cursor: pointer;
}

/* ページトップリンク */
[class*="pagetop"] {
  cursor: pointer;
}

/* 固定背景用CSS */
.screen > [class*="fixed-coverbg"] {
  min-width: 100vw;
  min-height: 100vh;
  z-index: 0 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}


/*---------------------------------------*/
/* Loading画面用スタイル */
/*---------------------------------------*/
:root {
  --circle-size: 300px;       /* 円全体のサイズ */
  --circle-r: 70px;           /* 円の半径 (SVG内) */
  --circle-dash: 440;         /* 円周の長さ (70 * 2 * 3.14 ≒ 440) */
  --circle-color: #81806e;
  --circle-bg: #eee;
  --circle-width: 1px;
  --text-color: #666;
}

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  background: var(--loading-background, #fff);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity var(--loading-speed) ease, visibility var(--loading-speed) ease;
}

#loading.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ロゴと円を含むコンテナ */
#loading .loading-container {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 円形プログレスバー (SVG) */
#loading .circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 12時の位置から開始 */
  z-index: 1;
}

#loading .circle-svg circle {
  fill: none;
  stroke-width: var(--circle-width);
  stroke-linecap: round;
}

#loading .circle-bg-line {
  stroke: var(--circle-bg);
}

#loading .circle-progress-line {
  stroke: var(--circle-color);
  /* 【重要】初期状態で空にする設定 */
  stroke-dasharray: var(--circle-dash);
  stroke-dashoffset: var(--circle-dash); /* オフセット=円周長で完全に隠す */
  /* JSのループで更新するため、transitionは削除してリアルタイム更新にする */
  /* transition: stroke-dashoffset 0.1s linear; */ 
}

/* ロゴのラッパー */
#loading .loading-img-wrap {
  margin-top: 20px; /* 位置調整 */
  position: relative;
  z-index: 2;
  width: 30%; /* 円の中に収まるサイズ */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背面の薄いロゴ */
#loading .loading-img.bg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.2;
}

/* ロゴのワイプ演出用マスク */
#loading .progress-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%; /* JSで制御 */
  overflow: hidden;
  /* ここもJSループで制御するためtransitionは削除または短めに */
}

/* 前面の濃いロゴ */
#loading .progress-mask .loading-img.fg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* パーセントテキスト */
#loading .loading-text {
  margin-top: 20px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: var(--text-color);
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* アニメーション要素の制御 */
[class*="firstview"].hide [class*="anim-"],
[class*="firstview"].hide [class*="anim-"] * {
  display: none;
}
.anim-showed [class*="anim-"] {
  display: block; 
}


/*---------------------------------------*/
/* パソコンデバイス*/
/*---------------------------------------*/
/*コンテンツ：マウスオーバー*/
.content-pc [class*="mousehover"] [class*="base"],
.content-pc [class*="link"] [class*="base"] {
  opacity: 1;
  transition: .3s all ease;
}
.content-pc [class*="mousehover"] [class*="hover"],
.content-pc [class*="link"] [class*="hover"] {
  opacity: 0;
  transition: .3s all ease;
}
.content-pc [class*="mousehover"]:hover [class*="base"],
.content-pc [class*="link"]:hover [class*="base"] {
  opacity: 0;
}
.content-pc [class*="mousehover"]:hover [class*="hover"],
.content-pc [class*="link"]:hover [class*="hover"] {
  opacity: 1;
}
.content-pc [class*="link-"] [class*="base-wipe"],
.content-pc [class*="link-"] [class*="hover-wipe"],
.content-pc [class*="link-"]:hover [class*="base-wipe"],
.content-pc [class*="link-"]:hover [class*="hover-wipe"] {
  opacity: 1;

}
.content-pc [class*="link-"] [class*="base-wipe"] > .wrap,
.content-pc [class*="link-"] [class*="hover-wipe"] > .wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  position: absolute;
  left: 0;
  transition: .3s all ease;
}
.content-pc [class*="link-"] [class*="hover-wipe"] > .wrap {
  width: 0%;
}
.content-pc [class*="link-"]:hover [class*="hover-wipe"] > .wrap {
  width: 100%;
}

/* コンテンツ：ヘッダーナビゲーション PC */
.content-pc [class^="fixed-header"] {
  left: 0 !important;
  right: auto;
  top: 0px !important;
  z-index: 15;
  transform: translate(0, 0) !important;
  position: fixed !important;
  width: 100% !important;
  transition: .6s all ease;
  background: var(--fixed-header-background);
}
.content-pc [class^="fixed-header"].scroll {
  background: var(--fixed-header-scroll-background);
}
.content-pc [class^="fixed-header"] * {
  transition: .6s all ease;
}
.content-pc [class^="fixed-header"] [class^="header-wrap"]{
  position:absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  max-width: 1440px;
  width: 100%;
  height: 100%;
  transition: .6s all ease;
}
.content-pc [class^="fixed-header"] [class*="area"] {
  pointer-events: none;
  display: none !important;
}
.content-pc [class^="fixed-header"] [class*="align-left"] {
  right: auto;
  left: 30px;
}
.content-pc [class^="fixed-header"] [class*="align-center"] {
  left: 50%;
  transform: translate(-50%, 0px);
  right: auto;
}
.content-pc [class^="fixed-header"] [class*="align-right"] {
  left: auto;
  right: 30px;
}

/*---------------------------------------*/
/* スマホデバイス*/
/*---------------------------------------*/
/* スマホヘッダー */
.content-sp [class*="fixed-header"] {
  width: 100vw !important;
  left: 0 !important;
  position: fixed !important;
  z-index: 10;
  background-color: var(--fixed-spheader-background);
  transition: .3s all ease;
  top: 0px !important;
}
.content-sp [class*="fixed-header"] [class*="bg"] {
  width: 100vw !important;
}
.content-sp [class*="fixed-header"].scroll {
  background-color: var(--fixed-spheader-scroll-background);
  top: 0px !important;
  box-shadow: 0px 3px 6px #00000029;
}
.content-sp [class^="fixed-header"] [class*="align-left"] {
  right: auto;
  left: 18px;
}
.content-sp [class^="fixed-header"] [class*="align-center"] {
  left: 50%;
  transform: translate(-50%, 0px);
  right: auto;
}
.content-sp [class^="fixed-header"] [class*="align-right"] {
  left: auto;
  right: 18px;
}
.content-sp [class^="fixed-header"] [class*="spmenu-close-btn"]  {
  pointer-events: none;
  opacity: 0;
  transition: all .2s ease;
}
.content-sp [class^="fixed-header"] [class*="spmenu-close-btn"].show  {
  pointer-events: initial;
  opacity: 1;
}
.content-sp [class^="fixed-header"] [class*="spmenu-open-btn"]  {
  transition: all .2s ease;
}
.content-sp [class^="fixed-header"] [class*="spmenu-open-btn"].hide  {
  pointer-events: none;
  opacity: 0;
}


/* スマホメニュー */
.content-sp [class*="fixed-spmenu"] {
  position:fixed !important;
  left: auto !important;
  right: 0 !important;
  height: 100vh !important;
  top: 0px !important;
  z-index: 11;
  width: 100vw !important;
  pointer-events: none;
}
.content-sp [class*="fixed-spmenu"] > [class^="wrap"] {
  transition: .3s all ease;
  right: -100% !important;
  left: auto !important;
  height: 100% !important;
  width: 100% !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
.content-sp [class*="fixed-spmenu"] > [class^="wrap"] [class*="spmenu-close-btn"]  {
  left: auto !important;
  right: 30px !important;
  top: 30px !important;
  z-index: 1;
}
.content-sp [class*="fixed-spmenu"] > [class^="wrap"] > [class^="menu"] {
  height: 100% !important;
  width: 100% !important;
  box-sizing: content-box;
  position: relative;
}
.content-sp [class*="fixed-spmenu"] > [class^="wrap"] > [class^="menu"] [class*="bg"] {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.content-sp [class*="fixed-spmenu"].show {
  pointer-events: auto;
}
.content-sp [class*="fixed-spmenu"].show > [class^="wrap"] {
  right: 0 !important;
}

/* スマホメニュー 出現時アニメーション */
.content-sp [class*="fixed-spmenu"] [class*="menu"] [class*="animlinks"] > * {
  transform: scale(1.2);
  filter: blur(10px);
  opacity: 0;
  transition: 0.5s all ease;
  display: block;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > * {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(1) {
  transition-delay: 0s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(2) {
  transition-delay: 0.05s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(3) {
  transition-delay: 0.1s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(4) {
  transition-delay: 0.15s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(5) {
  transition-delay: 0.2s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(6) {
  transition-delay: 0.25s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(7) {
  transition-delay: 0.3s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(8) {
  transition-delay: 0.35s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(9) {
  transition-delay: 0.4s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(10) {
  transition-delay: 0.45s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(11) {
  transition-delay: 0.5s;
}
.content-sp [class*="fixed-spmenu"].show [class*="menu"] [class*="animlinks"] > *:nth-child(12) {
  transition-delay: 0.55s;
}

/*---------------------------------------*/
/* その他埋め込みコード用スタイル */
/*---------------------------------------*/

/* リンク：マウスオーバー時のデザイン */
.content-pc [class^="fixed-header"] [class^="link-"]::after,
.content-pc #footer [class^="footer-nav"] [class^="link-"]::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: var(--link-hover-color);
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right top;
  transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.content-pc [class^="fixed-header"] [class^="link-"]::after {
  background: var(--link-hover-color);
}
.content-pc #footer [class^="footer-nav"] [class^="link-"]::after {
  background: var(--link-hover-color);
}
.content-pc [class^="fixed-header"] [class^="link-"]:hover::after,
.content-pc [class^="fixed-header"] [class^="link-"].active::after,
.content-pc #footer [class^="link-"]:hover::after,
.content-pc #footer [class^="link-"].active::after  {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

/*---------------------------------------*/
/* SLICK */
/*---------------------------------------*/
[class*="slick-show"].slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}
[class*="slick"] img {
  position: relative !important;
}
.slick-arrows {
  display: block;
  position: absolute;
  top: 47%;
  transform: translate(0, -50%);
  cursor: pointer;
  height: 40px;
  width: 80px;
  background: url('../images/slick-arrow.svg') no-repeat center center/100% 100%;
  z-index: 1;
}
[class^="sp-wrap"] .slick-arrows {
  height: 20px;
  width: 50px;
}
.slick-arrows.prev {
  left: -78px;
  transform: rotate(-90deg);
}
.slick-arrows.next {
  right: -78px;
  transform: rotate(90deg);
}
[class^="sp-wrap"] .slick-arrows.prev {
  left: -42px;
}
[class^="sp-wrap"] .slick-arrows.next {
  right: -42px;
}
.slick-dots {
  bottom: -46px !important;
}
.slick-dots li {
  margin: 0 6px;
}
.slick-dots li button:before {
  font-size: 16px;
}
.slick-list {
  margin:0 -15px;
}
.slick-list .slick-slide {
  margin:0 10px;
}
.slick-list .slick-slide:focus {
  outline: none;
}
.slick-track {
}
[class*="slick"] [class*="parts"] {
  display: none !important;
}
.slick-dots li button:before {
  color: #FFFFFF;
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: #B45A6E;
  opacity: 1;
}



/*---------------------------------------*/
/* 特殊LAYOUT */
/*---------------------------------------*/
/* 縦文字 */
[class*="vertical-rl"] {
  writing-mode: vertical-rl;
}

/* scrollshow要素は最初は非表示 */
[class*="scrollshow"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity ease .5s;
}

/* 横幅100vwの要素は中央に
[class*="100vw"]:not([class*="100vwh"]) {
  left: 50% !important;
  translate: -50% !important;
}
*/

/* middle */
[class*="middle"] {
  top:50%;
  translate: 0 -50%;
}
[class*="centermiddle"],
[class*="middlecenter"] {
  top: 50% !important;
  left:50% !important;
  translate: -50% -50% !important;
}

/* 隠してあるグローバルナビゲーション関連 */
[class*="showbtn"],
[class*="hidebtn"] {
  cursor: pointer;

  > [class*="active"] {
    opacity: 0;
    transition: opacity .2s ease;
  }
  > [class*="default"] {
    opacity: 1;
    transition: opacity .2s ease;
  }

  &.active {
    > [class*="active"] {
      opacity: 1;
    }
    > [class*="default"] {
      opacity: 0;
    }
  }
}
[class*="hide-"][class*="fixedt"] {
  opacity: 0;
  margin-top: 100px;
  pointer-events: none;
  transition: scale .2s ease, margin-top .2s ease, opacity .2s ease;

  > [class*="area"] {
    margin-top: -100px;
    transition: margin-top .2s ease;
  }
  
  &.showed {
    opacity: 1;
    margin-top: 0px;
    pointer-events: auto;

    > [class*="area"] {
      margin-top: 0px;
    }
  }
}
[class*="hide-"][class*="fixedr"] {
  opacity: 0;
  margin-right: -100px;
  pointer-events: none;
  transition: scale .2s ease, margin-right .2s ease, opacity .2s ease;

  &.showed {
    opacity: 1;
    margin-right: 0px;
    pointer-events: auto;
  }
}
[class*="hidetop"] {
  margin-top: -100vh !important;
  opacity: 0;
  transition: scale .2s ease, top .2s ease, opacity .2s ease;
}


/* コンテンツがはみ出す要素 */
[class*="innerscrolly"] {
  overflow-y: auto;
}
[class*="innerscrollx"] {
  overflow-x: auto;
}
[class*="innerscroll"]:not([class*="innerscrollx"]):not([class*="innerscrolly"]) {
  overflow: auto;
}


/* 画像を右端へ固定したまま延ばしたい場合の命名規則 */
[class*="img-flushright"] {
  padding-right: calc((100vw - 1920px) / 2) !important;
  /* right: calc((100vw - 1920px) / -2) !important; */
  right: 0px;
  left: auto !important;
  box-sizing: content-box !important;

  * {
    width: 100% !important;
    object-fit: cover;
  }
}

/* 画像を左端へ固定したまま延ばしたい場合の命名規則 */
@media (min-width:1920px) {
  [class*="img-flushleft"] {
    padding-left: calc((100vw - 1920px) / 2) !important;
    left: calc((100vw - 1920px) / -2) !important;
    box-sizing: content-box !important;

    * {
      width: 100% !important;
      object-fit: cover;
    }
  }
}

/* パララックス要素共通：GPUアクセラレーションを有効化 */
[class*="parallax"] {
  will-change: transform;
}

/* 背景用（parallaxbg）の親枠：中身が動くので、はみ出しを隠す */
[class*="parallaxbg"] {
  overflow: hidden !important;
}

/* 背景用の中身（子要素）：中央基準で拡大・移動 */
[class*="parallaxbg"] > * {
  transform-origin: center center;
  will-change: transform;
  /* Animaで書き出されるimgはposition:absoluteが多いですが、念のため */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}