@charset "UTF-8";

:root {
	--base-color:#007440;
	--bg-color:#F5F4EF;
}

/* ==============================
   MVセクション全体の設定
   ============================== */
#brand-mv { 
  position: relative; 
  width: 100%;
}

/* ==============================
   背景画像（ここでStickyを使って固定する）
   ============================== */
#brand-mv::before {
  content: "";
  position: sticky; 
  top: 0; 
  left: 0; 
  display: block;
  width: 100%; 
  height: 100vh;
  background: url("../img/kv_or_pc.webp") center 25% no-repeat; 
  background-size: cover; 
  z-index: -1;
}

/* ==============================
   テキストエリアのラッパー
   ============================== */
.mv-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -100vh; 
}

/* ==============================
   キャッチコピー・リード文のアニメーション設定
   ============================== */
.mvCopy { 
  color: #fff; 
  font-weight: bold; 
  margin-left: 12%; 
}

.mvCopy h2 { 
  height: 100vh;
  display: flex;
  align-items: center;
  font-weight: 500; 
  letter-spacing: 0.1em; 
  font-size: 12vh; 
  line-height: 1.5;

  opacity: 0;
  animation: textFadeIn 0.6s forwards;
  animation-delay: 0.6s;
}

.mv-lead {
  padding-bottom: 50vh; 
}

.mv-lead p { 
  font-size: 1.0em; 
  margin-bottom: 1vh; 
  line-height: 2.0; 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mv-lead p.pSpace { 
  margin-bottom: 10vh; 
}

.mv-lead p.visible {
  opacity: 1;
  transform: translateY(0);
}

.mv-lead p.no-transition,
.mvCopy h2.no-transition {
  transition: opacity 0s !important;
}

@keyframes textFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media screen and (max-width: 599px) {
	#brand-mv::before { background: url("../img/kv_or_sp.webp") center center no-repeat; background-size: cover; }
	.mvCopy h2 { font-size: 5vh; height: 90vh;}
}
@media screen and (max-width: 400px) {
	.mv-lead p { font-size: 0.95em;}
}
@media screen and (max-width: 375px) {
	.mv-lead p { font-size: 0.9em;}
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#brand-mv::before { background: url("../img/kv_or_tab.webp") center center no-repeat; background-size: cover; }
	.mvCopy h2 { font-size: 7vh; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.mvCopy h2 { font-size: 8vh; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.mvCopy h2 { font-size: 9vh; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.mvCopy h2 { font-size: 10vh; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.mvCopy h2 { font-size: 11vh; }
}
/* ==============================
   上部フェードアウト用の調整クラス
   ============================== */
.mv-lead p.no-transition,
.mvCopy h2.no-transition {
  transition: opacity 0s !important;
}

/* 共通 */
.sectionTtl { color: #000; font-size: 5rem; margin-bottom: 2vh; position: relative; overflow: hidden; letter-spacing: 0.25em; line-height: 1.7; word-break: break-all; padding: 1vh 0; display: block; font-weight: 500; }
.sectionTtl .decoTtl { font-weight: 400; display: table; font-size: 0.5em; letter-spacing: 0.0em; border-bottom: 1px solid var(--base-color); }
.sectionTtl .decoTtl.roboto { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; }
.sectionTtl02 { letter-spacing: 0.1em; margin-bottom: 0; padding: 0; }
.sectionTtl02 .nice-green { color: var(--base-color);}

.sectionTtl.visible::after { transform: translateY(-100%); }
.fade-in-on-scroll p { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-on-scroll p.visible { opacity: 1; transform: translateY(0); }
.nice-e { font-size: 1.35em; line-height: 1.0; font-weight: 400;}
@media screen and (max-width: 899px) {
	.ttlFlex { margin-bottom: 5vh;}
	.sectionTtl { font-size: 4rem; margin-bottom: 2vh; padding: 1vh 0; }
	.sectionTtl .decoTtl { font-size: 0.75em; }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	.sectionTtl { font-size: 3.0rem; }
}
@media screen and (max-width: 599px) {
	.sectionTtl { font-size: 2.2rem; }
}
@media screen and (min-width: 900px) {
	.ttlFlex { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10vh; }
	.ttlFlex p { margin-bottom: 0; margin-left: 8%; }
}
@media screen and (min-width: 900px) and (max-width: 1090px) {
	.sectionTtl { font-size: 4rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.sectionTtl { font-size: 4rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.sectionTtl { font-size: 4rem; }
}

/* mevius */
#brand-mevius { padding: 4% 0; background: #fff; position: relative; z-index: 3; }
#brand-mevius .in_bg { position: relative; }
#brand-mevius .in_bg:after { position: absolute; content: ""; height: 70%; width: 100%; top: 15%; left: 0; background: #e2f0d9; z-index: -1; }
#brand-mevius .ttlFlex { padding: 0 6%; margin-bottom: 5vh;}
.w1200 { max-width: 1200px; margin: 0 auto; }
@media screen and (max-width: 899px) {
	#brand-mevius { padding: 3vh 0;}
	#brand-mevius .in { width: 92%; }
	#brand-mevius .ttlFlex { margin-bottom: 2vh;}
	#brand-mevius .img-w1000 { width: 96%; margin: 0 auto; }
}
@media screen and (min-width: 900px) {
	#brand-mevius .in { width: 92%; }
}

/* value */
#brand-value { padding: 10vh 0%; background: var(--base-color); position: relative; z-index: 3; }
#brand-value .in { margin: 0 auto; padding: 0 4%; }
#brand-value .in-valeuFlex p { color: #fff;}
#brand-value .in .ttlFlex { margin-bottom: 5vh; }
#brand-value .inValue-Img { margin-bottom: 2vh; }
#brand-value .inValue-Img .in-value-img { position: relative; }
#brand-value .sectionTtl { color: #fff; line-height: 2.0; font-size: 4rem; }
/*#brand-value .sectionTtl .decoTtl { border-bottom: none; display: block; font-size: 5rem; }*/
#brand-value .sectionTtl .decoTtl { border-bottom: 1px solid #fff; }
#brand-value .sectionTtl02 .nice-green { color: var(--base-color); background: #fff; border-radius: 50%; padding: 0 7px 0px; margin-right: 0.1em;}
.sectionSubTtl { font-size: 2.4em; margin-bottom: 2vh; position: relative; overflow: hidden; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; word-break: break-all; padding: 1vh 0;}

.valueTtl { font-size: 1.8em; margin-bottom: 3vh; font-weight: 700; letter-spacing: -0.05em; word-break: break-all; color: var(--base-color); }
.valueTtl .text-container { color: var(--base-color); padding: 0 0.5% 0 0; }
.valueSubTtl { font-size: 1.5em; margin-bottom: 2vh; font-weight: 500; color: var(--base-color); white-space: nowrap; }
.valueSubTtl span { position: relative; }
.valueSubTtl span:after { content: ""; position: absolute; bottom: 0px; left: 0; background: var(--base-color); height: 1px; width: 100%; }
.valueSubTtl02 { font-size: 1.5em; margin-bottom: 20px; font-weight: 600; word-break: break-all; white-space: nowrap; }
.valueSubTtl02 span { color: #fff; background: var(--base-color); border-radius: 50%; padding: 0 7px 2px; margin-right: 0.1em;}
.value-Txt { margin-bottom: 20px; font-size: 0.9em; }
#brand-value .in-valeuFlex .inValue-Txt p { color: #000;}

.valueWrapper { max-width: 1400px; margin: 0 auto; width: 96%; } 
.valueWrapper .youtube { margin-bottom: 3vh;}

.value-Link:before { content: "\f0c1"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.5em; }
.keyList { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.keyList li { margin-right: 1em; font-size: 0.8em; margin-bottom: 10px; cursor: pointer; }
.keyList li:before { content: "#"; margin-right: 0.5em; }
.keyList li a         { resize: none; }
.keyList li a:link    { color:#333333; text-decoration: underline; }
.keyList li a:visited { color:#333333; text-decoration: underline; }
.keyList li a:hover   { color:var(--base-color); text-decoration: underline; }
.keyList li a:active  { color:#333333; text-decoration: underline; }

.in-value-img { position: relative; display: block; }
.viewBtn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; z-index: 10; }
.viewBtn-inner { position: absolute; bottom: 20px; right: 20px; display: flex; justify-content: flex-end; align-items: center; }
.viewBtn-inner p { margin-bottom: 0; line-height: 1.0; color: #fff; margin-right: 10px; }
.viewBtn-inner img { width: 40px; transition: 1s all; }

.viewBtn:hover .viewBtn-inner img { transform: scale(1.1, 1.1); transition: 1s all; }
.in-value-img .valuePhoto { transition: .3s; }
.in-value-img:hover .valuePhoto { opacity: 0.9;}

@media screen and (max-width: 899px) {
	.brand_pc_tab { display: none; }
	#brand-value { padding: 2vh 0%; }
	#brand-value .sectionTtl02 .nice-green { padding: 0 5px; }
	.keyList li:last-child { margin-bottom: 0; }
	.sectionSubTtl { font-size: 1.6em; }
	.valueTtl { font-size: 1.7em; margin-bottom: 2vh; }
	.valueSubTtl { font-size: 1.5em; }
	
	.inValueWrapper { background: #fff; border-radius: 8px; padding: 6%; margin:0 0 2vh; }
	.valueWrapper .youtube { margin-bottom: 2vh;}
	
	.viewBtn { position: absolute; bottom: 20px; right: 20px; display: flex; justify-content: flex-end; align-items: center; }
	.viewBtn p { margin-bottom: 0; line-height: 1.0; color: #fff; margin-right: 10px; font-size: 0.95em; }
	.viewBtn a { }
	.viewBtn a img { width: 30px; transition: 1s all; }
	.viewBtn a:hover img { transform:scale(1.1,1.1); transition:1s all; }
	
	.inValueWrapper .inValue-Img { margin: 0vh 0 20px; position: relative; }
	#brand-value .in .ttlFlex { margin-bottom: 1vh; }
	.in-valeuFlex.in-valeuFlex-L { margin:0 4% 3vh;}
	
	#brand-value .sectionTtl .decoTtl { font-size: 0.85em; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#brand-value { padding: 5vh 0%; } 
	.valueSubTtl02 { font-size: 1.8em; }
}
@media screen and (max-width: 599px) {
	.viewBtn { position: absolute; bottom: 10px; right: 10px; }
	.viewBtn a img { width: 20px; }
	.viewBtn p { font-size: 0.9em; }
	
	#brand-value .sectionTtl { font-size: 2rem; margin-bottom: 0; }
	#brand-value .sectionTtl .decoTtl { }
	#brand-value .in-valeuFlex .inValue-Txt .btn { min-width: 200px; min-height: 35px; line-height: 35px; padding: 0px; font-size: 0.9em;}
	
	.valueSubTtl02 span { padding: 0 5px 2px; }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	#brand-value .sectionTtl { font-size: 3.0rem; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	.valueTtl { font-size: 1.6em; }
	.sectionSubTtl { font-size: 2.1em; }
	.valueSubTtl { font-size: 2.0em; }
	.value-Txt { font-size: 1.0em; }
	.keyList li { font-size: 0.9em; }
	#brand-value .in .ttlFlex { margin-bottom: 1vh; }
	#brand-value .sectionTtl { font-size: 3.6rem; }
	#brand-value .in-valeuFlex .inValue-Txt .btn { min-width: 200px; min-height: 40px; line-height: 40px; padding: 0px; font-size: 0.9em;}
	.in-valeuFlex.in-valeuFlex-L { margin-bottom: 3vh; }
}

@media screen and (min-width: 900px) {
	.brand_sp_tab { display: none; }
		
	.in-valeuFlex-R { }
	.inValueWrapper { position: relative; display: flex; justify-content: space-between; align-items: center; }
	.inValueWrapper:last-child { margin-bottom: 0; }
	.inValueWrapper .inValue-Img { position: relative; width: 48%; }
	.inValueWrapper .inValue-Txt { position: relative; width: 48%; }
	
	.viewBtn { position: absolute; bottom: 20px; right: 20px; display: flex; justify-content: flex-end; align-items: center; }
	.viewBtn p { margin-bottom: 0; line-height: 1.0; color: #fff; margin-right: 10px; }
	.viewBtn a { }
	.viewBtn a img { width: 40px; transition: 1s all; }
	.viewBtn a:hover img { transform:scale(1.1,1.1); transition:1s all; }
	
	#brand-value .in-valeuFlex .inValue-Txt .btn { min-width: 270px; min-height: 40px; line-height: 40px; padding: 0px; font-size: 0.9em;}
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.valeuFlex { display: flex; flex-direction: column; }
	.in-valeuFlex-L { margin:0 2% 4vh; }
	.in-valeuFlex-R { }
	
	.sectionSubTtl { font-size: 2.15em; }
	#brand-value .in .ttlFlex { margin-bottom: 2vh; }
	.valueTtl { font-size: 1.55em; }
	.valueSubTtl { font-size: 1.5em; }
	.valueSubTtl02 { font-size: 1.5em; }
	.value-Txt { font-size: 1.05em; }
	.keyList li { font-size: 0.8em; }
	#brand-value .sectionTtl { font-size: 3.7rem; }
	.value-Txt { font-size: 0.85em; }
	#brand-value .in-valeuFlex .inValue-Txt .btn { font-size: 0.8em; }
	.inValueWrapper { background: #fff; padding: 40px; border-radius: 8px; margin-bottom: 20px; }
	#brand-value .sectionTtl .decoTtl { font-size: 0.75em; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.valeuFlex { display: flex; flex-direction: column; }
	.in-valeuFlex-L { margin:0 2% 5vh; }
	.in-valeuFlex-R { }
	.sectionSubTtl { font-size: 2.20em; }
	#brand-value .in .ttlFlex { margin-bottom: 2vh; }
	.valueTtl { font-size: 1.60em; }
	.valueSubTtl { font-size: 1.6em; }
	.valueSubTtl02 { font-size: 1.6em; }
	.keyList li { font-size: 0.85em; }
	#brand-value .sectionTtl { font-size: 3.8rem; }
	.value-Txt { font-size: 0.9em; }
	#brand-value .in-valeuFlex .inValue-Txt .btn { font-size: 0.8em; }
	.inValueWrapper { background: #fff; padding: 40px; border-radius: 8px; margin-bottom: 20px; }
	#brand-value .sectionTtl .decoTtl { font-size: 0.75em; }
}
@media screen and (min-width: 1190px) {
	.valeuFlex { display: flex; justify-content: space-between; align-items: center; }
	.in-valeuFlex { width: 48%; }
	.in-valeuFlex-L { width: 36%; }
	.in-valeuFlex-R { width: 60%; }
	#brand-value .sectionTtl .decoTtl { font-size: 0.75em; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.sectionSubTtl { font-size: 2.25em; }
	.valueTtl { font-size: 1.65em; }
	.valueSubTtl { font-size: 1.2em; }
	.valueSubTtl02 { font-size: 1.15em; }
	#brand-value .sectionTtl { font-size: 3.2rem; }
	.value-Txt { font-size: 0.8em; }
	.keyList li { margin-right: 1em; font-size: 0.75em;}
	
	.inValueWrapper .inValue-Img { width: 46%; }
	.inValueWrapper .inValue-Txt { width: 50%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.sectionSubTtl { font-size: 2.3em; }
	.valueTtl { font-size: 1.70em; }
	.valueSubTtl { font-size: 1.25em; }
	.valueSubTtl02 { font-size: 1.15em; }
	#brand-value .sectionTtl { font-size: 3.4rem; }
	.value-Txt { font-size: 0.85em; }
	.keyList li { margin-right: 1em; font-size: 0.75em;}
	
	.inValueWrapper .inValue-Img { width: 46%; }
	.inValueWrapper .inValue-Txt { width: 50%; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.sectionSubTtl { font-size: 2.35em; }
	.valueTtl { font-size: 1.75em; }
	.valueSubTtl { font-size: 1.3em; }
	#brand-value .sectionTtl { font-size: 3.7rem; }
	.inValueWrapper .inValue-Img { width: 47%; }
	.inValueWrapper .inValue-Txt { width: 49%; }
}

@media screen and (min-width: 1190px) {
	/* ==============================
	   セクション大枠（横並び設定）
	   ============================== */
	.valeuFlex {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
	}

	/* ==============================
	   左カラム（画面に固定する部分）
	   ============================== */
	.valeuFlex > .in-valeuFlex:not(.in-valeuFlex-R) {
		width: 40%;
		position: sticky;
		top: 150px;
		height: calc(100vh - 100px);
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
	}

	/* ==============================
	   右カラム（スクロールして流れていく部分）
	   ============================== */
	.in-valeuFlex-R {
		width: 58%;
		position: relative;
	}
	.valueWrapper {
		display: block;
		width: 100%;
	}

	.inValueWrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		opacity: 1;
		visibility: visible;
		background: #fff; padding: 20px 40px; border-radius: 8px;
		margin-bottom: 20px;
	}

	/* ==============================
	   ナビゲーション（ドット）
	   ============================== */
	.value-nav {
		display: none;
	}
}

@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.inValueWrapper { padding: 20px 30px; }
}

/* movie */
#brand-movie { padding: 4% 6%; background: #fff; position: relative; z-index: 3; }
#brand-movie .in { padding: 5vh 0; }
#brand-movie .in .movie-wrap { max-width: 960px; width: 96%; margin: 0 auto; position: relative; }
#brand-movie .in .movie-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 50px; }
#brand-movie .in .movie-wrap:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1;}
#brand-movie .in .movie-wrap { overflow: hidden; }
#brand-movie .in .movie-wrap img { transition: 1s all; }
#brand-movie .in .movie-wrap .movie-icon:hover img { transform:scale(1.1,1.1); transition:1s all; }
@media screen and (max-width: 599px) {
	#brand-movie .in { padding: 0vh 6% 5vh; }
	#brand-movie .in .movie-icon { width:40px; }
	.nav-dot { width: 8px; height: 8px; }
}
@media screen and (min-width: 600px) and (max-width: 900px) {
	.nav-dot { width: 10px; height: 10px; }
}
@media screen and (min-width: 900px) {
	.flex-movie { display: flex; justify-content: space-between; }
	.in-flex-movie { width: 48%;}
}


footer { position: relative; z-index: 3;}
.g_box { position:relative; }
.g_box:hover { cursor:pointer; opacity:0.7; }
.g_link { margin-bottom:0px; }
.g_link a {position:absolute; text-indent:-9999px; top:0px; left:0px; width:100%; height:100%; z-index: 100; }

/* モーダル全体のスタイル */
.video-modal { display: none;  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);  justify-content: center;  align-items: center;  z-index: 9999; }
.video-modal.show { display: flex; }
.video-content { position: relative; max-width: 80%; width: 900px; box-sizing: border-box; border-radius: 8px; }
.video-content video { width: 100%; height: auto; border-radius: 4px;}
.close-modal {　position: absolute;　top: -40px; right: 0; font-size: 32px; color: #fff; cursor: pointer; font-weight: bold; line-height: 1; transition: 0.3s;}
.close-modal:hover { color: #f00; }
@media screen and (max-width: 768px) {
    .video-content { width: 90%; max-width: 90%; }
}

.youtube { position: relative; width: 100%; padding-top: 56.25%; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.arrow-button a {
	display:inline-block;
	cursor:pointer;
	position: relative;
	text-decoration: none;
	background: #d2ddd0;
	padding: 0px 40px 0px 20px;
	font-size: 1.0em;
	margin-bottom: 20px;
}
.arrow-button a::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50%);
	left: 90%;
	width: 40px;
	height: 5px;
	border: none;
	border-right: 2px solid #000;
	border-bottom: 1px solid #000;
	transform: skew(45deg);
	transition: .3s;
}
.arrow-button a:hover::after {
	position: absolute;
	top: calc(50%);
	left: 90%;
	width: 60px;
	height: 5px;
}

@media screen and (max-width: 599px) {
	.arrow-button a { font-size: 0.85em; margin-bottom: 20px; padding: 0px 40px 0px 10px; }
	.arrow-button a::after {
		top: calc(30%);
		left: 95%;
		width: 30px;
	}
}

.arrow-button :hover { color:var(--base-color); }
.arrow-button a:hover::after { border-right: 2px solid var(--base-color); border-bottom: 1px solid var(--base-color); }
.arrow-button a:hover::after { }

/* link */
#brand-link { background: #fff; padding: 10vh 0 10vh; position: relative; z-index: 2; }
.arrow-link-list { display: flex; justify-content: center; }
.arrow-link-list li { width: 50%; padding: 0 4%; font-size: 0.9em; }
.arrow-link-list li:nth-child(1) { text-align: right; }
@media screen and (max-width: 767px) {
	#brand-link { padding: 10vh 0 10vh; }
	.arrow-link-list { display: flex; justify-content: center; flex-direction: column; }
	.arrow-link-list li { width: 60%; margin: 0 auto 40px; text-align: center; }
	.arrow-link-list li:nth-child(1) { text-align: left; }
	.arrow-link-list li:nth-child(2) { text-align: center; }
}
/* ==============================
   左向き矢印（Left）
============================== */
.arrow-btn-Left a { position: relative; }
.arrow-btn-Left a:hover { color: var(--base-color); }

.arrow-btn-Left a:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -15px;
    right: -5%;
    width: 270px;
    height: 15px;
    border: none;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(-45deg);
    transition: .3s;
    z-index: 1;
}
.arrow-btn-Left a:hover:after { width: 320px; }

.arrow-btn-Left a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -15px;
    right: -2%;
    width: 270px;
    height: 15px;
    border: none;
    /*border-left: 1px solid var(--base-color);*/
    border-bottom: 1px solid var(--base-color);
    z-index: 2;
    /* アニメーションを指定 */
    animation: mvScrlLeft 2.0s cubic-bezier(1, 0, 0, 1) infinite;
}
.arrow-btn-Left a:hover:before { width: 280px; }

@keyframes mvScrlLeft {
  0% {
    transform: skew(-45deg) scaleX(0);
    transform-origin: right bottom;
  }
  50% {
    transform: skew(-45deg) scaleX(1);
    transform-origin: right bottom;
  }
  50.1% {
    transform: skew(-45deg) scaleX(1);
    transform-origin: left bottom;
  }
  100% {
    transform: skew(-45deg) scaleX(0);
    transform-origin: left bottom;
  }
}

@media screen and (max-width: 767px) {
	.arrow-btn-Left a:after { width: 200px; }
	.arrow-btn-Left a:before { width: 190px; right: 0%;}
}

/* ==============================
   右向き矢印（Right）
============================== */
.arrow-btn-Right a { position: relative; }
.arrow-btn-Right a:hover { color: var(--base-color); }

.arrow-btn-Right a:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -15px;
    left: -5%;
    width: 270px;
    height: 15px;
    border: none;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
    transition: .3s;
    z-index: 1;
}
.arrow-btn-Right a:hover:after { width: 320px; }

.arrow-btn-Right a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -15px;
    left: -2%;
    width: 270px;
    height: 15px;
    border: none;
    border-bottom: 1px solid var(--base-color);
    z-index: 2;
    animation: mvScrlRight 2.0s cubic-bezier(1, 0, 0, 1) infinite;
}
.arrow-btn-Right a:hover:before { width: 280px; }

@keyframes mvScrlRight {
  0% {
    transform: skew(45deg) scaleX(0);
    transform-origin: left bottom;
  }
  50% {
    transform: skew(45deg) scaleX(1);
    transform-origin: left bottom;
  }
  50.1% {
    transform: skew(45deg) scaleX(1);
    transform-origin: right bottom;
  }
  100% {
    transform: skew(45deg) scaleX(0);
    transform-origin: right bottom;
  }
}

@media screen and (max-width: 767px) {
	.arrow-btn-Right a:after { width: 200px; }
	.arrow-btn-Right a:before { width: 190px; left: 0%;}
}


/*-- Scroll Down -------------------------------------------------------------*/
.scroll-down-wrapper { position: relative; height: 5vh; }
.scroll-down {  }
.scroll-down a { 
	position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0px 10px 60px; color: #000; font-size: 12px; font-family:'Roboto Condensed', sans-serif; font-weight:bold; line-height: 1; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: .2s; margin: auto; text-align: center; pointer-events: none;
}
.scroll-down a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 50px; background: #ddd; }
.scroll-down a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 50px; background: var(--base-color); }
.scroll-down a:hover { opacity: .5; }
@media screen and (max-width: 599px) {
	.scroll-down { position:absolute; left:0%; right: 0 ;margin: 0 auto; }
	.scroll-down a { font-size: 10px; }
}
#mvScrl a:after { animation: mvScrl01 2.0s cubic-bezier(1, 0, 0, 1) infinite; }
@keyframes mvScrl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*-- fadeup -------------------------------------------------------------*/
.delay01 { animation-delay:0.1s; }
.delay02 { animation-delay:0.2s; }
.delay03 { animation-delay:0.3s; }
.delay04 { animation-delay:0.4s; }
.delay05 { animation-delay:0.5s; }
.delay06 { animation-delay:0.6s; }
.delay07 { animation-delay:0.7s; }
.delay08 { animation-delay:0.8s; }
.delay09 { animation-delay:0.9s; }
.delay10 { animation-delay:1.0s; }

.delay11 { animation-delay:1.1s; }
.delay12 { animation-delay:1.2s; }
.delay13 { animation-delay:1.3s; }
.delay14 { animation-delay:1.4s; }
.delay15 { animation-delay:1.5s; }
.delay16 { animation-delay:1.6s; }
.delay17 { animation-delay:1.7s; }
.delay18 { animation-delay:1.8s; }
.delay19 { animation-delay:1.9s; }
.delay20 { animation-delay:2.0s; }

.fadeup { opacity: 0; }
.fadeup.add-show { animation-name: fadeupAnime; animation-duration:.8s; animation-fill-mode:forwards; }
@media screen and (max-width: 899px) {
	.fadeup-sp { opacity: 0; }
	.fadeup-sp.add-show { animation-name: fadeupAnime; animation-duration:.8s; animation-fill-mode:forwards; }
}
@keyframes fadeupAnime{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}