@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Ropa+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

@charset "utf-8";
html{
	scroll-behavior: auto;
}
.clearfix:after{
  content: "";
  clear: both;
  display: block
}
img{
  height: auto;
  max-width: 100%;
}
a{
  transition: 0.3s;
  color: #006CD8;
}
a img{
  transition: 0.3s;
}
a:hover img{
  opacity: 0.7;
}
a:hover{
  text-decoration: none;
}
p{
  word-break: break-all;
}
html,body{
  height: 100%;
  /* font-family: YakuHanMP, "EB Garamond", "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN","小塚明朝 Pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝", 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, serif; */
  font-family: YakuHanMP, "游明朝", YuMincho, "Hiragino Mincho ProN","小塚明朝 Pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝", 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, serif;
}
.bgw{
	background: #FFF;
}
.cap_r{
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 12px;
}
.cap_l{
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-size: 12px;
}
.cap_w{
	color: #FFF;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 3px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 2px rgba(0, 0, 0, 0.7);
}
.cap_b{
	color: #000;
}
.cap_o{
	font-size: 12px;
	margin-top: 7px;
	text-align: right;
	position: static;
}
.cap_offer{
	color: #000;
	background:#fff;
	padding:1px 5px;
    right: 0;
    bottom: 0;
}
figure{
	position: relative;
}
.mt20{
	margin-top: 20px;
}
.txt-r{
    font-size: 12px !important;
    text-align: right !important;
    color: #000;
}

/* header */
header{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}
#sub header{
	background: #000;
}
.header::before{
	content: "";
	background-image: linear-gradient(#00000080, transparent);
	transition: 1s;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.header.active::before{
	content: "";
	background-image: linear-gradient(#00000080, transparent);
	opacity: 1;
}
.headerinner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 30px;
	z-index: 100000;
	position: relative;
}
.headerlogo{
	width: 30%;
	max-width: 500px;
}
.headermenu{
	display: flex;
	align-items: center;
}
.headermenu .textLink{
	display: flex;
    flex-direction: column;
}
.headermenu .textLink a:first-child{
	margin-bottom: 0.8em;
}
.headermenu *{
	display: inline-block;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.1em;
}
.headermenu a{
	margin-left: 45px;
	transition: 0.5s;
}
.headermenu a:hover{
	opacity: 0.8;
}
.headermenu a,.menutext{
	font-size: 1em;
	display: inline-block;
  background: #b08f3c;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
}
.menu{
	margin: 0 20px 0 40px;
}
.menutext{
	display: inline-block;
  background: linear-gradient(180deg, #b08f3c 0%, #bea158 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
}
.headermenu a.header_menu_access div{
	background: url("../img/icon_access.svg") no-repeat left center;
	background-size: 15px auto;
	padding-left: 28px;
}
.headermenu a.header_menu_about div{
	background: url("../img/icon_about.svg") no-repeat left center;
	background-size: 15px auto;
	padding-left: 28px;
}
.headermenu a.limitedbtn,.headermenu a.brandbtn,.headermenu a.entrybtn{
	min-width: 150px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}
/*
.headermenu a.brandbtn::before,.headermenu a.entrybtn::after{
	background: rgba(0,0,0,0.1);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
*/
.headermenu a.limitedbtn div,.headermenu a.brandbtn div,.headermenu a.entrybtn div{
	font-size: 11px;
}
.headermenu a.limitedbtn strong,.headermenu a.brandbtn strong,.headermenu a.entrybtn strong{
	font-size: 1.75em;
	display: block;
	text-align: center;
	width: 100%;
	line-height: 100%;
	margin-bottom: 5px;
}
.headermenu a.limitedbtn span, .headermenu a.brandbtn span, .headermenu a.entrybtn span {
	font-size: 0.9em;
}
.headermenu a.limitedbtn{
	/* pointer-events: none; comingsoon時 */
	/* opacity: 0.6; comingsoon時 */
	border: 1px solid;
	border-image: linear-gradient(to right, #c4a96a, #c4a96a) 1;
  background: linear-gradient(90deg, #c4a96a 0%, #c4a96a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
	margin-left: 15px;
}
.headermenu a.brandbtn{
	border: 1px solid;
	border-image: linear-gradient(to right, #c4a96a, #c4a96a) 1;
  background: linear-gradient(90deg, #c4a96a 0%, #c4a96a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
}
.headermenu a.entrybtn{
	border: 1px solid;
	border-image: linear-gradient(to right, #c4a96a, #c4a96a) 1;
  background: linear-gradient(90deg, #c4a96a 0%, #c4a96a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
	margin-left: 25px;
}
.menu .menuicon {
	display: block; 
  position: relative;
  height: 40px; 
	padding-top: 20px;
  cursor: pointer;
}
.menu .menuicon  span {
  position: absolute;
  background: linear-gradient(90deg, #c4a96a 0%, #c4a96a 100%);
  height: 2px; 
  width: 100%;   
  border-radius: 1px;
  transition: all 0.4s ease-in-out;
}
.menu .menuicon span:nth-of-type(1) {
  top: 5px;
}
.menu .menuicon span:nth-of-type(2) {
  top: 15px;
}
.menu .menuicon.active span:nth-of-type(1) {
  transform: translateY(5px) rotate(-15deg);
}
.menu .menuicon.active span:nth-of-type(2) {
  transform: translateY(-5px) rotate(15deg);
}
/* #sub .headermenu a,#sub .menutext{
  background: #FFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
}
#sub .menutext{
  background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-decoration: none;
}
#sub .menu .menuicon span {
  position: absolute;
  background: linear-gradient(90deg, #FFF 0%, #FFF 100%);
}
#sub .headermenu a.header_menu_access div{
	background: url("../img/icon_access_w.svg") no-repeat left center;
	background-size: 18px auto;
}
#sub .headermenu a.header_menu_about div{
	background: url("../img/icon_about_w.svg") no-repeat left center;
	background-size: 18px auto;
}
#sub .headermenu a.brandbtn,#sub .headermenu a.entrybtn{
	border: 1px solid #FFF;
} */

/* nav */
.gnavi {
  position: fixed;
  background: rgba(0,0,0,0.93);
  height: 100vh;
  top: 0;
  right: 0;
  padding-top: 90px;
  z-index: 99;
  width: 100%;
	opacity: 0;
  transition: 300ms;
  visibility: hidden;
}
.gnavi.open {
  opacity: 1;
  visibility: visible;
  top: 0px;
  right: 0;
}
.gnavi ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 30px;
  padding-right: 30px;
  margin: 10px auto;
  background: none;
  border-top: none;
  border-bottom: none;
  max-width: 800px;
}
.gnavi ul li {
  opacity: 0;
  margin-top: 40px;
  width: 49%;
  border-bottom: solid 1px rgba(255,255,255,0.4);
  margin-bottom: 5px;
}
.gnavi ul li a {
  text-decoration: none;
  color: rgba(255,255,255,1);
  font-size: 14px;
  letter-spacing: 0.05em;
  display: block;
  padding-top: 10px;
  padding-bottom: 15px;
  font-weight: 600;
  padding-left: 1em;
  padding-right: 1em;
}
.gnavi ul li a {
	display: block;
  font-size: 20px;
  letter-spacing: 0.15em;
  font-weight: 400;
  font-family: YakuHanMP, "EB Garamond", "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", "小塚明朝 Pro", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, serif;
}
.gnavi ul li a span {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  display: block;
  font-weight: 200;
  padding-top: 0.6em;
  opacity: 0.8;
}
.gnavi ul li.comingsoon a {
  opacity: 0.3;
  pointer-events: none;
}
.gnavi ul li.selected a span {
  color: rgba(208,191,161,0.8);
}
.gnavi.open ul li:nth-child(1) {
animation: gnavifade 0.7s ease 0.2s 1 forwards;
}
.gnavi.open ul li:nth-child(2) {
animation: gnavifade 0.7s ease 0.3s 1 forwards;
}
.gnavi.open ul li:nth-child(3) {
animation: gnavifade 0.7s ease 0.4s 1 forwards;
}
.gnavi.open ul li:nth-child(4) {
animation: gnavifade 0.7s ease 0.5s 1 forwards;
}
.gnavi.open ul li:nth-child(5) {
animation: gnavifade 0.7s ease 0.6s 1 forwards;
}
.gnavi.open ul li:nth-child(6) {
animation: gnavifade 0.7s ease 0.7s 1 forwards;
}
.gnavi.open ul li:nth-child(7) {
animation: gnavifade 0.7s ease 0.8s 1 forwards;
}
.gnavi.open ul li:nth-child(8) {
animation: gnavifade 0.7s ease 0.9s 1 forwards;
}
.gnavi.open ul li:nth-child(9) {
animation: gnavifade 0.7s ease 1.0s 1 forwards;
}
.gnavi.open ul li:nth-child(10) {
animation: gnavifade 0.7s ease 1.1s 1 forwards;
}
.gnavi.open ul li:nth-child(11) {
animation: gnavifade 0.7s ease 1.2s 1 forwards;
}
.gnavi.open ul li:nth-child(12) {
animation: gnavifade 0.7s ease 1.3s 1 forwards;
}
.gnavi.open ul li:nth-child(13) {
animation: gnavifade 0.7s ease 1.4s 1 forwards;
}
.gnavi.open ul li:nth-child(14) {
animation: gnavifade 0.7s ease 1.5s 1 forwards;
}
@-webkit-keyframes gnavifade {
  100% {
    opacity: 1;
    margin-top:0px;
  }
}
@keyframes gnavifade {
  100% {
    opacity: 1;
    margin-top:0px;
  }
}

/* main */
#sub main{
	margin-top:80px;
}
.anchor {
    padding-top: 80px;
    margin-top: -80px;
}

/* entry */
.entryaction{
	background: url("../img/entry_bg.jpg") no-repeat;
	background-size: cover;
	padding: 90px 0;
	letter-spacing: 0.1em;
}
.entryaction .inner{
	text-align: center;
	width: 96%;
	margin: 0 auto;
}
.entryaction .entry_cta h3{
	font-size: 2.5em;
	margin-bottom:40px; 
}
.entryaction .entry_cta p{
	font-size: 1em;
	margin-bottom: 70px;
}
.entry_btn{
	background: url("../../common/img/dc_arw_rw.svg") no-repeat ,linear-gradient(90deg, #826a27 0%, #a6905f 100%);
	background-size: auto 22px;
	background-position:right 40px center,right 0 center ;
	color: #FFF;
	font-size: 24px;
	max-width: 720px;
	width: 100%;
	height: 60px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	letter-spacing: 0.2em;
	transition: 0.5s;
}
.entry_btn:hover{
	opacity: 0.8;
}
.bottom_note{
	padding: 60px 0 40px;
}
.bottom_note .inner{
	width: 96%;
	max-width: 1100px;
	margin: 0 auto;
}
.bottom_note ul{
	font-size: 12px;
	line-height: 150%;
}
.bottom_note ul li{
	position: relative;
	padding-left: 1.25em;
}
.bottom_note ul li::before{
	content: "●";
	position: absolute;
	left: 0;
}

/* footer spmenu */
.footer_spmenu {
  position: fixed;
  bottom: -72px;
  left: 0px;
  right: 0px;
  width: 100%;
  margin: 0 auto;
  background: rgba(117,111,112,1);
  z-index: 100;
  border-top: solid 1px rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}
.footer_spmenu.active {
	bottom: 0px;
}
.footer_spmenu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  max-width: 1050px;
}
.footer_spmenu ul li {
  width: 25%;
  text-align: center;
  border-right: solid 1px rgba(255,255,255,0.2);
  height: 70px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer_spmenu ul li:nth-child(3) {
  background: #a79030;
  border-right: none;
}
.footer_spmenu ul li:nth-child(4) {
  background: #2a2421;
  border-right: none;
}
.footer_spmenu ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: 100%;
}
.footer_spmenu ul li a span {
  font-size: 10px;
  display: block;
}
.footer_spmenu ul li a img{
  width: inherit;
  margin-top: 8px;
  max-width: 26px;
}

/* footer */
footer{
	padding-bottom: 60px;
}
.footerinner{
	width: 96%;
	max-width: 1100px;
	margin: 0 auto;
}
.footertel_area p{
	font-size: 16px;
	text-align: center;
	margin-bottom: 30px;
}
.footertel_contents{
	border-top: 1px solid #231815;
	border-bottom: 1px solid #231815;
	padding: 40px 0;
	text-align: center;
	margin-bottom: 30px;
}
.footertel_flex{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.footertel{
	background: url("../img/icon_tel.svg") no-repeat left bottom;
	background-size: 75px auto;
	font-family: YakuHanMP, "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN","小塚明朝 Pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝", 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, serif;
	font-size: 64px;
	padding-left: 80px;
	line-height: 74%;
	margin-bottom: 8px;
}
.footertel a{
	color: #121212;
	text-decoration: none;
}
.footertel_info{
	font-size: 14px;
	text-align: left;
	margin-left: 30px;
}
.corplogo_area{
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
	align-items: center;
}
.corplogo{
	display: inherit;
	align-items: center;
	margin: 0 15px;
}
.corplogo:first-child{
    width: 31%;
}
.corplogo:nth-child(2){
    width: 24%;
}
.corplogo:last-child{
    width: 40%;
}
.corplogo span{
	font-size: 13px;
	margin-right: 10px;
	white-space: nowrap;
}
.corplogo img{
	width:100%;
}
.corplogo:first-child img{
	margin-top:1em;
}
.corplogo:last-child img{
	margin-top:-1em;
}
.copy{
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.1em;
	padding-bottom: 74px;
}

#sub #mainvisual h2{
	transition-delay: 1s;
}

#sub .sectionttl{
    font-size: 50px;
    text-align: center;
    background: linear-gradient(90deg, #7d6524 22%, #d8bc7b 62%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    letter-spacing: 0.11em;
    margin:0 auto 50px;
}

@media screen and (min-width: 768px){
  .sp{
    display: none !important;
  }
	.footertel {
    pointer-events: none;
  }
}
@media screen and (max-width: 1441px){

	#sub main{
		margin-top:100px;
	}
	.headerinner {
		padding: 20px 15px;
	}
	.headerlogo {
		width: 35%;
	}
	.headermenu * {
		/* font-size: 18px; */
		letter-spacing: 0.1em;
	}
	.headermenu a {
		margin-left: 25px;
	}
	.headermenu .textLink a {
    	font-size: 1em;
	}
	.headermenu .textLink a:first-child {
    	margin-bottom: 0.5em;
	}
	.menu {
		margin: 0 10px 0 30px;
	}
	headermenu a.brandbtn strong, .headermenu a.entrybtn strong {
		font-size: 20px;
	}
	.headermenu a.brandbtn, .headermenu a.entrybtn {
  	min-width: 170px;
	}
}
@media screen and (max-width: 1151px){
	.headermenu a.header_menu_access {
    	display: none;
	}
	.headermenu a.header_menu_about {
    	display: none;
	}
}

@media screen and (max-width: 1001px){

	#sub main{
		margin-top:70px;
	}
	.headerinner {
		padding: 15px 10px;
	}
	.headerlogo {
		width: 40%;
	}
	.headermenu * {
		font-size: 15px;
		letter-spacing: 0.1em;
	}
	.headermenu a {
		margin-left: 15px;
	}
	.menu {
		margin: 0 5px 0 20px;
	}
	.headermenu a.limitedbtn strong, .headermenu a.brandbtn strong, .headermenu a.entrybtn strong {
		font-size: 1.5em;
	}
	.headermenu a.limitedbtn, .headermenu a.brandbtn, .headermenu a.entrybtn {
  	min-width: 100px;
		height: 40px;
	}
	.headermenu a.limitedbtn span, .headermenu a.brandbtn span, .headermenu a.entrybtn span {
		display: none;
	}
	.entryaction .entry_cta h3 {
		font-size: 46px;
		margin-bottom: 30px;
	}
	.entryaction .entry_cta p {
		font-size: 20px;
		margin-bottom: 40px;
	}
	.txt-r{
	    font-size: 10px !important;
	}
	
}

@media screen and (max-width: 767px){
  .pc{
    display: none !important;
  }
  .cap_r,.cap_l,.cap_o{font-size: 10px;}
  .cap_r{right: 10px;bottom: 5px;}
  .cap_l{left: 10px;bottom: 5px;}
  
	/* main */
	#sub main{
		margin-top:60px;
	}
	.anchor {
    	padding-top: 60px;
    	margin-top: -60px;
	}
	
	/* header */
	header{}
	.headerlogo {
		width: 70%;
		aspect-ratio: 259 / 20;
	}
	header .headermenu a,header .headermenu a.limitedbtn,header .headermenu a.brandbtn,header .headermenu a.entrybtn{
		display: none;
	}
	.headerinner {
		padding: 10px;
	}
	.menu {
		margin: 0 10px;
	}
	.menu .menuicon {
		display: block;
		position: relative;
		height: 40px;
		width: 46px;
		padding-top: 20px;
		cursor: pointer;
	}
	.headermenu * {
		font-size: 13px;
	}
	
	/* gnavi */
	.gnavi {
    padding-top: 90px;
  }
	.gnavi ul li a {
    font-size: 2.6vw;
    letter-spacing: 0.08em;
    font-weight: 300;
  }
	.gnavi ul li a span {
    font-size: 1.8vw;
  }
	
	/* cta */
	.entry_btn{
		font-size: 18px;
		width: 90%;
	}
	.entryaction .entry_cta h3 {
		font-size: 1.8em;
		margin-bottom: 20px;
	}
	.entryaction .entry_cta p {
		font-size: 0.9em;
		margin-bottom: 30px;
	}
	
	/* footer */
	footer {
		padding-bottom: 20px;
	}
	.bottom_note {
		padding: 40px 10px;
	}
	.bottom_note ul {
		font-size: 11px;
	}
	.bottom_note ul li{
		letter-spacing: 0.05em;
	}
	.footertel_area p {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.footertel {
		background: url("../img/icon_tel.svg") no-repeat left bottom;
		background-size: auto;
		background-size: 38px auto;
		font-size: 36px;
		padding-left: 44px;
		line-height: 74%;
		margin-bottom: 8px;
	}
	.footertel_info {
		font-size: 14px;
		text-align: left;
		margin-left: 0px;
	}
	.corplogo_area {
		margin-bottom: 40px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		align-content: center;
	}
	.corplogo {
		display: block;
		align-items: center;
		text-align: center;
		margin: 10px;
	}
	.corplogo span{
		display: inline-block;
		font-size: 13px;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.corplogo a{
		flex: 1;
		/* margin-left: 10px; */
	}
	.corplogo:first-child{
		width: 220px;
	}
	.corplogo:nth-child(2){
		width: 150px;
	}
	.corplogo:last-child{
		width: 270px;
	}
	.corplogo:first-child img{
		max-width: 220px;
		margin-top:unset;
	}
	.corplogo:nth-of-type(2) img{
		max-width: 150px;
	}
	.corplogo:last-child img{
		max-width: 270px;
		margin-top:unset;
	}
	.copy {
		font-size: 0.6875em;
		margin: 0 10px;
		letter-spacing: 0.05em;
	}
	.scwapper {
		position: relative;
		overflow-x: auto;
	}
	.hint{
		position: absolute;
		background-color: rgba(255, 255, 255, 0.9);
		width: 80%;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: 0.2s all;
		margin: auto auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.hint span{background: url("../img/swipe_icon.svg") no-repeat left center;background-size: 34px 30px;padding:10px 10px 10px 45px;display: inline-block;}
}


/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}