/*
 * © LEANSYSTEM
 * Contact: nabe@lean-system.co.jp
 *
 * Figma・XDでのAnimaの使用方法やプログラムについてのご質問、ご相談などありましたらお気軽にお問い合わせください。
 * 
 */

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

:root {
  /* 全体の背景 */
  --body-background: #000;

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

  /* PC追尾ヘッダー */
  --fixed-header-background: rgba(0, 0, 0, 0) !important; /* 背景色 */
  --fixed-header-scroll-background: rgba(0, 0, 0, 0.8) !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;
  filter: opacity(0.8) !important;
}
html strong {
  font-weight: bold;
}
html em {
  font-style: italic;
}

/* AnimaHTMLFixerエラー */
.anima-alert {
  position:fixed;
  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: #ffffff;
}

/* 非表示要素 */
[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;
}

/* 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*="hauto"] {
  top: auto !important;
  bottom: auto !important;
}
/* コンテンツ：高さ可変コンテンツ */
[class*="height-auto"],
[class*="auto-height"],
[class*="hauto"],
.screen,
[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"] {
  transition: all .5s ease;
  transform-origin: top center;
}

/* コンテンツ：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画面用スタイル */
/*---------------------------------------*/

#loading {
  opacity: 1;
  background: var(--loading-background);
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:1000;
}
#loading.hide {
  opacity: 0;
  pointer-events:none;
  transition:all var(--loading-speed) ease;
  transition-delay: var(--loading-speed);
}
#loading .loading-img-wrap {
  transition:all var(--loading-speed) ease;
  opacity: 1;
  /* animation: loading-img-show 1s ease 0.00s 1 normal forwards; */
}
/* @keyframes loading-img-show {
  from{opacity: 0;}
  to{opacity: 1;}
} */
#loading .loading-img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: .2;
}
#loading .progress {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#loading .progress .loading-img {
  position: absolute;
  bottom: 0;
  left: 0;
  top: auto;
  transform: none;
  opacity: 1;
}
#loading .progress div {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  height: 0%;
  width: 100%;
  transition: var(--loading_speed) all ease;
}

/* ロードが終わるまで、firstviewの中のアニメーション要素はdisplay:none */
[class*="firstview"].hide [class*="anim-"],
[class*="firstview"].hide [class*="anim-"] * {
  display: none;
}


/*---------------------------------------*/
/* パソコンデバイス*/
/*---------------------------------------*/
/*コンテンツ：マウスオーバー*/
.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 15px;
}
.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;
}