@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*==================================================================
	Common setting
===================================================================*/
html {
	font-size: 62.5%;
	overflow-x:hidden;
}
body {
	background: #FFF;
	color: #000;
	font-family: "Yu Gothic", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 1.7;
	overflow-x:hidden;
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	word-wrap:break-word;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s linear;
}
body.is-loaded { opacity: 1; visibility: visible; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: none; }
.full { width: 100%; }
.d-in-block { display: inline-block;}
.inner {
	margin: auto;
	max-width: 1200px;
	width: 92%;
}
.en { font-family: "Montserrat", sans-serif; font-weight: 200; }
@media screen and (min-width: 768px){
	body { min-width: 1200px;}
	.sp { display: none!important;}
	a[href^="tel:"] { pointer-events: none; }
}
@media screen and (max-width: 767px){
	.pc { display: none!important;}
}
.black { color: #000000;}
.white { color: #FFF;}
.gold  { color: #9b9882;}
.gold2 { color: #3e3a39;}
.poslink {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
}
.noclick {
	opacity: 0.5;
	pointer-events: none;
}
.txt-cms {
	display: block;
	font-size: clamp(1rem, 0.714285714vw, 1.2rem);
	font-weight: 200;
}
/*==================================================================
	Header setting
===================================================================*/
#header h1 {
	position: absolute;
	left: clamp(10px, 3.57142857vw, 60px);
	top: clamp(30px, 3.57142857vw, 60px);
	z-index: 1;
	max-width: 144px;
}
#hamburger {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	mix-blend-mode: difference;
	position: fixed;
	right: clamp(10px, 3.57142857vw, 60px);
	top: clamp(10px, 3.57142857vw, 60px);
	z-index: 999;
}
#hamburger > div.menu {
	color: #FFF;
	font-size: 1.2rem;
	letter-spacing: 0;
}
#hamburger > div.line {
	height: 8px;
	width: 30px;
	position: relative;
	transition: height ease-in-out .2s;
	transition-delay: .25s;
}
#hamburger > div.line > span {
	background-color: #FFF;
	display: block;
	height: 1px;
	width: 100%;
	position: absolute;
	left: 0;
	transition: transform .2s 0s;
	text-indent: -999em;
}
#hamburger > div.line > span:first-child { top: 0;}
#hamburger > div.line > span:last-child { bottom: 0;}
#hamburger.is-active > div.line { height: 1px; transition-delay: 0s;}
#hamburger.is-active > div.line > span { transition: transform .3s .35s, width .3s .35s; transition-timing-function: cubic-bezier(.26, 1, .48, 1);}
#hamburger.is-active > div.line > span:first-child { transform: rotate3d(0, 0, 1, -45deg); width: 20px; }
#hamburger.is-active > div.line > span:last-child { transform: rotate3d(0, 0, 1, 45deg); width: 20px; }
@media screen and (max-width: 767px) {
	#header h1 { top: 30px;}
	#hamburger { top: 33px;}
	#logo a { display: block; }
}

/*==================================================================
	Navigations
===================================================================*/
.menu-open { overflow: hidden; }
.menu-open .foot-float {
	opacity: 0 !important;
	visibility: hidden !important;
}
#gnavi {
    background: url(../imgs/bg_light.jpg) no-repeat center center / cover;
    color: #FFF;
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
    transition-delay: 1s;
    opacity: 0;
    visibility: hidden;
	clip-path: inset(0%);
	animation: close_gnavi 0.5s forwards;
	animation-delay: 0.75s;
}
.menu-open #gnavi {
    opacity: 1;
    visibility: visible;
	clip-path: inset(100% 0 0 0);
	animation: open_gnavi 0.5s forwards;
    transition-delay: 0s;
}
@keyframes open_gnavi {
	0%{clip-path: inset(100% 0 0 0);}
	100%{clip-path: inset(0%);}
}
@keyframes close_gnavi {
	0%{clip-path: inset(0%);}
	100%{clip-path: inset(0 0 100% 0);}
}
#gnavi:before {
    content: "";
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
#gnavi .nav-wrap {
    height: 100%;
    display: flex;
    overflow-y: auto;
}
#gnavi .nav-wrap .inner { margin-top: auto; margin-bottom: auto; max-width: 1000px; }
#gnavi .nav-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -40px;
}
#gnavi .nav-list a { color: #FFF; }
#gnavi .nav-list .item { width: calc(100%/4.5); width: calc(100%/3); padding: 0 20px; }
#gnavi .nav-list .item-full { width: 100%; }
#gnavi .nav-list .item-has-list {
    /* width: 42%; */
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 0;
}
#gnavi .nav-list .item-has-list .head-link { width: 51%; }
#gnavi .nav-list .item-has-list .sm-list { width: calc(100% / 2); width: 100%; }
/* #gnavi .nav-list .item-has-list .sm-list .sm-item:first-child .sm-link {
	padding-bottom: 10px;
	border-bottom: 1px solid #FFF;
	margin-left: 30px;
	padding-left: 0;
	padding-right: 20px;
	pointer-events: none;
} */
#gnavi .nav-list .item-top { margin-bottom: clamp(20px, 2.38095238vw, 40px); }
#gnavi .nav-list .item-bot {
	margin-top: clamp(10px, 1.19047619vw, 20px);
	display: grid;
	grid-template-columns: auto auto;
    align-items: flex-end;
}
#gnavi .nav-list .item-bot .head-link { margin-bottom: 10px; }
#gnavi .cv-list {
	grid-area: 1/2/3/4;
	display: grid;
	grid-template-columns: auto auto;
	gap: 24px;
	margin-left: auto;
	width: 624px;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s linear;
	justify-content: flex-end;
}
.menu-open #gnavi .cv-list {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.5s;
}
#gnavi .cv-list .btn-cv {
	background: rgba(35,24,21,0.85);
	position: relative;
	z-index: 0;
}
#gnavi .cv-list .btn-cv:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: -1;
}
#gnavi .nav-list .item .head-link {
    display: inline-block;
    font-size: clamp(1.4rem,1.19047vw, 2rem);
    letter-spacing: 0.05em;
    line-height: 1.8;
    position: relative;
    z-index: 0;
	transition: all 0.5s linear;
	padding-left: 30px;
	width: 100%;
}
#gnavi .nav-list .item .head-link:before {
    content: "";
    width: 0;
    height: 1px;
    background: #FFF;
    position: absolute;
    top: 18px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
#gnavi .nav-list .item.is-current .head-link:before,
#gnavi .nav-list .item .is-current .head-link:before,
#gnavi .nav-list .item:hover .head-link:hover:before,
#gnavi.on-hover .nav-list .item:hover .head-link:before {
    opacity: 1;
    visibility: visible;
	width: 14px;
}
#gnavi .nav-list .item .head-link .small { font-size: 72%; }
#gnavi .sm-list {
    margin-top: 30px;
}
#gnavi .sm-list .sm-link {
    display: block;
    margin: 0 0 10px;
    font-size: clamp(1.2rem,0.89285vw, 1.5rem);
    letter-spacing: 0;
    line-height: 2;
    transition: all 0.5s linear;
	padding-left: 30px;
}
#gnavi.on-hover .sm-list .sm-link { opacity: 0.5; }
#gnavi.on-hover:before {
    opacity: 1;
    visibility: visible;
}
#gnavi.on-hover .sm-list .sm-link.is-hover { opacity: 1; }
#gnavi .link-lang { position: relative; z-index: 0; }
#gnavi .link-lang .lang-en {
    transition: all 0.3s linear;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
}
/* #gnavi .is-current > .link-lang .lang-en,
#gnavi .is-current.link-lang .lang-en, */
#gnavi .link-lang:hover .lang-en {
    opacity: 1;
    visibility: visible;
}
#gnavi .link-lang .lang-jp { transition: all 0.3s linear; }
/* #gnavi .is-current > .link-lang .lang-jp,
#gnavi .is-current.link-lang .lang-jp, */
#gnavi .link-lang:hover .lang-jp {
    opacity: 0;
    visibility: hidden;
}
#gnavi .js-ani { opacity: 0; visibility: hidden; }
.menu-open #gnavi .js-ani {
	clip-path: inset(0 100% 0 0);
	animation: ani_gnavi 1s forwards;
	animation-delay: 0.5s;
	opacity: 1;
	visibility: visible;
}

@keyframes ani_gnavi {
	0%{clip-path: inset(0 100% 0 0);}
	100%{clip-path: inset(0%);}
}

@media screen and (max-width: 767px) {
	#gnavi .nav-wrap .inner {
		margin-top: 0;
		padding-top: 30px;
		overflow: hidden;
	}
	#gnavi .nav-list {
		flex-direction: column;
		gap: 10px;
	}
	#gnavi .nav-list .item {
		width: 100%;
		margin-bottom: 10px;
	}
	#gnavi .nav-list .item:nth-child(4) .sm-list {
		display: flex;
		flex-wrap: wrap;
	}
	#gnavi .nav-list .item-bot {
		margin-top: 0px;
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
	}
	#gnavi .nav-list .item .head-link,
	#gnavi .sm-list .sm-link {
		letter-spacing: 0.01em;
		line-height: 1.7;
	}
	#gnavi .nav-list .item .head-link { padding-left: 20px; }
	#gnavi .nav-list .item .head-link::before {
		width: 14px;
		top: 12px;
	}
	#gnavi .link-lang .lang-en { left: 20px; }
	#gnavi .sm-list {
		margin-top: 10px;
		padding-left: 10px;
	}
	#gnavi .nav-list .item-has-list { gap: 0; }
	#gnavi .nav-list .item-has-list .head-link {
		width: 100%;
		margin-left: -15px;
	}
	#gnavi .nav-list .item-has-list .sm-list { /*width: calc(50% - 0px);*/}
	#gnavi .cv-list {
		justify-content: center;
		grid-area: 4;
		width: 100%;
		gap: 15px;
		margin-top: 30px;
		padding: 0 20px;
	}
	#gnavi .sm-list .sm-link { margin: 0; margin-top: 5px; }
	#gnavi .nav-list .item-has-list .sm-list .sm-item:first-child .sm-link {
		margin-bottom: 7px;
		padding-bottom: 4px;
		/*margin-left: 20px;*/
		min-width: unset
	}
	#gnavi .nav-list .item-has-list .sm-list .sm-item:first-child .sm-link { letter-spacing: -0.1em;	}
	#gnavi .nav-list .item-bot .head-link { margin-bottom: 5px; margin-top: 0;	}
	#gnavi .sm-list .sm-link { padding-left: 20px; }
}

/*==================================================================
	Footer setting
===================================================================*/
.foot-banners {
	background-color: #FFF;
	display: flex;
	gap: 1px;
	position: relative;
}
.foot-banners > a {
	display: block;
	/* opacity: 1!important; */
	position: relative;
	transition: opacity ease-in-out 0.3s;
	width: 50%;
}
.foot-banners > a:hover { opacity: 0.7; }
.foot-banners > a > img {
	height: clamp(120px, 14.2857143vw, 240px);
	object-fit: cover;
}
.foot-banners > a > span {
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(75px, 8.92857143vw, 150px);
	text-align: center;
}
.foot-banners > a > .form {
	position: absolute;
	right: clamp(10px, 2.38095238vw, 40px);
	bottom: clamp(10px, 2.38095238vw, 40px);
	z-index: 1;
}
@media screen and (max-width: 767px){
	.foot-banners > a > .form > .en { font-size: 1.1rem;}
}

#footer {
	background-color: #FFF;
	position: relative;
}
.foot-float {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 23px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all ease-in-out 0.4s;
    transition-timing-function: cubic-bezier(.26, 1, .48, 1);
}
.foot-float .inner {
	max-width: 100%;
	width: calc(100% - 46px);
}
.foot-float.is-fixed {
	background: linear-gradient(to right,  #959480 0%,#ceccbf 35%,#969380 50%,#ceccbf 88%,#b9b6a7 100%);
	background: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}
body.is-scroll .foot-float.is-fixed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.foot-float-flex {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.flogo { display: none; font-size: clamp(2rem, 1.42857143vw, 2.4rem); }
.btn-cv-list {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.btn-cv {
	background-color: #231815;
	border: 1px solid #e5e5e5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 10px 10px 20px;
	position: relative;
	z-index: 0;
	width: 130px;
}
.btn-cv .jp { display: none; font-size: clamp(1.3rem, 1.4rem, 1.6rem);}
.btn-cv .en { font-size: 1.2rem;}
.btn-cv .square { height: 25px; width: 25px;}

@media screen and (max-width: 767px){
	.foot-float { padding: 15px 0; }
	.foot-float.is-fixed { background: rgba(0,0,0,0.9); }
	.foot-float-flex { justify-content: center; }
	.btn-cv { flex-direction: column; width: 135px; }
	.btn-cv .square { height: 20px; width: 20px;}
}

#fnavs {
	background: url(../imgs/bg_fnavs.jpg) no-repeat center right / cover;
	color: #fff;
	padding: clamp(25px, 5.35714286vw, 90px) 0 clamp(50px, 10.1190476vw, 170px);
}
#fnavs > ul {
	border-bottom: 1px solid #dbdcdc;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(27px, 3.21428571vw, 54px);
	position: relative;
}
#fnavs > ul > li:last-child {
	position: absolute;
	right: 13rem;
	bottom: 0;
	transform: translateY(200%);
}
#fnavs > ul > li:last-child a:after {
	height: 1px;
	bottom: 2px;
}
#fnavs > ul > li > a {
	color: #fff;
	display: block;
	font-size: clamp(1.2rem, 0.892857143vw, 1.5rem);
	letter-spacing: 0.1em;
	padding: 4px 0;
	position: relative;
}
#fnavs > ul > li > a::after {
	background-color: #fff;
	content: "";
	height: 3px;
	width: 100%;
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	transition: all ease-in-out 0.3s;
	transform: scaleX(0);
}
#fnavs > ul > li > a:hover:after { transform: scale(1); }
@media screen and (max-width: 767px){
	#fnavs { padding: 0; }
	#fnavs > ul { gap: 0px; display: block; }
	#fnavs > ul > li {
		border-top: 1px solid #dbdcdc;
		border-left: none;
		position: relative;
		text-align: center;
		width: calc(100% / 1);
	}
	#fnavs > ul > li > a { padding: 8px 0;}
	#fnavs > ul > li > a:after { display: none;}
	/* #fnavs > ul > li:nth-child(3n) { border-right: none; } */
	
	#fnavs > ul > li:last-child {
		position: static!important;
		transform: translateY(0);
	}
}

#fnavs > ul > li > a.has-submenu { padding-right: 1.5rem; }
#fnavs > ul > li > a.has-submenu > span:before {
	background-color: #fff;
	content: "";
	display: block;
	height: 1px;
	width: 9px;
	position: absolute;
	right: 0;
	top: 50%;
}
#fnavs > ul > li > a.has-submenu > span:after {
	background-color: #fff;
	content: "";
	display: block;
	height: 9px;
	width: 1px;
	position: absolute;
	right: 4px;
	top: calc(50% - 4px);
}
#fnavs > ul > li.is-open > a.has-submenu > span:after { opacity: 0; }

#fnavs .submenu { display: none; }
#fnavs .submenu > ul {
	display: flex;
	gap: 20px;
	padding: 20px 0 0 0;
	position: absolute;
	right: auto;
	top: 100%;
	white-space: nowrap;
	width: 100%;
	flex-wrap: wrap;
	max-width: 870px;
}
#fnavs .submenu > ul a {
	font-size: 85%;
	padding: 7px 20px 7px 7px;
	background: none;
	color: #fff;
}
#fnavs .submenu > ul .square {
	width: clamp(14px, 1.19047619vw, 20px);
	height: clamp(14px, 1.19047619vw, 20px);
}
#fnavs .btn-more .line_d::before,
#fnavs .btn-more .line_d::after,
#fnavs .btn-more .line_r::before,
#fnavs .btn-more .line_r::after {
    background-color: rgba(255, 255, 255, 0.4);
}
#fnavs .btn-more::after,
#fnavs .btn-more::before,
#fnavs .btn-more .txt::after,
#fnavs .btn-more .txt::before {
	background-color: rgba(255, 255, 255, 1);
}
.flogo02 {
	background: #fff;
	text-align: center;
	padding: clamp(10px,3.571428vw,60px);
}
.flogo02 .logo {
	display: block;
	width: 100%;
	max-width: 130px;
	margin: 0 auto;
}
@media screen and (max-width: 767px){
	#fnavs { background: #000; }
	#fnavs .submenu > ul {
		/* background-color: #FFF; */
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 15px 30px;
		position: relative;
		top: 0;
		width: 100vw;
	}
	#fnavs .submenu > ul a { max-width: inherit; width: 100%; }
	#fnavs > ul > li > a.has-submenu > span:before { right: 15px; display: none; }
	#fnavs > ul > li > a.has-submenu > span::after { right: 19px; display: none; }
	#fnavs .submenu > ul .square {
		position: absolute;
		right: 11px;
		top: 11px;
	}
	#fnavs > ul > li > .dropmenu {
		display: block;
		height: 36px;
		width: 36px;
		position: absolute;
		right: 15px;
		top: 0;
	}
	#fnavs > ul > li > .dropmenu:before {
		background-color: #fff;
		content: "";
		display: block;
		height: 1px;
		width: 9px;
		position: absolute;
		right: 11px;
		top: 50%;
	}
	#fnavs > ul > li > .dropmenu:after {
		background-color: #fff;
		content: "";
		display: block;
		height: 9px;
		width: 1px;
		position: absolute;
		right: 15px;
		top: calc(50% - 4px);
	}
	#fnavs > ul > li > .dropmenu.is-open:after { opacity: 0;}
	.flogo02 { padding: 10px;}
	.flogo02 .logo { max-width: 100px;}
}

#copyright {
	background-color: #3e3a39;
	font-size: 1rem;
	letter-spacing: 0.1em;
	padding: clamp(7px, 0.833333333vw, 14px) 0;
	text-align: center;
}

/*==================================================================
	Contents common setting
===================================================================*/

/* buttons, arrows */
.square {
    display: inline-block;
	margin-left: 1em;
    width: clamp(24px, 2.14285714vw, 36px);
    height: clamp(24px, 2.14285714vw, 36px);
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease-out;
}
.square-b { background: url(../imgs/square_black.svg) no-repeat center center / 100% 100%; }
.square-w { background: url(../imgs/square_white.svg) no-repeat center center / 100% 100%; }
.square img {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.3s ease-out;
    width: 50%;
}
a:hover .square img { top: -3px; right: -3px; }
.btn-more {
    background-color: #FFF;
    display: block;
    position: relative;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    padding: clamp(20px, 2.38095238vw, 40px);
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.btn-more::after,
.btn-more::before,
.btn-more .txt::after,
.btn-more .txt::before {
    background-color: #000;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.btn-more::before {
    right: -1px;
    bottom: -1px;
    height: 1px;
    width: 0px;
}
.btn-more::after {
    top: -1px;
    left: -1px;
    height: 1px;
    width: 0px;
}
.btn-more:hover::after,
.btn-more:hover::before {
	width: 100%;
	width: calc(100% + 2px);
}
.btn-more .txt { margin-right: 1em; }
.btn-more .txt::after {
	bottom: -1px;
	left: -1px;
	height: 0px;
	width: 1px;
}
.btn-more .txt::before {
	top: -1px;
	right: -1px;
	height: 0px;
	width: 1px;
}
.btn-more:hover .txt::after,
.btn-more:hover .txt::before {
	height: calc(100% + 2px);
}
.btn-more .line_d,
.btn-more .line_r {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
}
.btn-more .line_d::before,
.btn-more .line_d::after,
.btn-more .line_r::before,
.btn-more .line_r::after {
    background-color: #EEE;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
}
.btn-more .line_d::before,
.btn-more .line_d::after { height: 1px; width: calc(100% + 2px);}
.btn-more .line_d::after { top: -1px; left: -1px;}
.btn-more .line_d::before { right: -1px; bottom: -1px;}
.btn-more .line_r::before, .btn-more .line_r::after { height: 77%; width: 1px;}
.btn-more .line_r::after { bottom: -1px; left: -1px;}
.btn-more .line_r::before { top: -1px; right: -1px;}
@media screen and (max-width: 767px){
	.btn-more {
		max-width: 210px;
		width: 90%;
	}
}

/* scoll lines */
.line_scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 0;
}
.line_scroll .txt {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	line-height: 1.8;
	margin: 0 0 10px;
}
.ani_line {
	position: relative;
	height: 60px;
	width: 2px;
	overflow: hidden;
    z-index: 0;
    clip-path: inset(0 0 0 1px);
}
.ani_line:before {
    content: "";
    background: #3e3a39;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.ani_line .line_move {
	animation-name: scroller;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(.26, 1, .48, 1);
    animation-iteration-count: infinite;
    /*background-image: linear-gradient(to bottom, #FFF0, #ac704380, #d39849, #ac704380, #FFF0);*/
	background-image: linear-gradient(
  to bottom,
  #ffffff00,
  #ffffff80,
  #ffffff,
  #ffffff80,
  #ffffff00
);
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
	text-indent: -999px;
}
@keyframes line_move {
	0% {
		height: 0;
		bottom: 100%;
	}
	50% {
		height: 100%;
		bottom: 0;
	}
	100% {
		height: 100%;
		bottom: -100%;
	}
}
@keyframes scroller {
	0% { transform: translate3d(0, -100%, 0); }
	100% { transform: translate3d(0, 100%, 0); }
}

/* mouse style*/
@media screen and (min-width: 768px) {
	.circleBox {
		border: 1px solid #FFF;
		border-radius: 50%;
		background-color: transparent;
		color: #fff;
		display: flex;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 99999;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		line-height: 1.3;
		text-align: center;
		width: clamp(90px, 10.7142857vw, 180px);
		height: clamp(90px, 10.7142857vw, 180px);
		opacity: 0;
		pointer-events: none;
		transition: transform .5s .1s, opacity .25s;
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}
	.circleBox.hover { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	.circleBox.onScroll { transform: translate(-50%, -50%) scale(0); opacity: 0; }
	.circleBox:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		transform: scale(0);
		transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
		width: 100%;
		animation: circleBox 3s linear infinite;
	}
	.circleBox.hover:before { transform: scale(1);}
}
@media screen and (max-width: 767px) {
	.circleBox {
		display: flex;
		align-items: center;
		font-size: 1rem;
		margin-top: 10px;
	}
	.circleBox::before {
		background: #000;
		content: "";
		display: block;
		flex: 1;
		height: 1px;
		margin-right: 15px;
		width: 100%;
	}
}

@keyframes circleBox {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* lower pages */

#main-lower { overflow: hidden; position: relative; }
#main-lower > h2 {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(10px, 2.26190476vw, 40px);
	position: absolute;
	right: 15vw;
	top: 50%;
	transform: translateY(-50%);
}
body.is-loaded #main-lower > h2 { animation: stretchL 1.5s ease 1.5s forwards; }
#main-lower > h2 > span { font-size: clamp(16px, 1.07142857vw, 18px); }
#main-lower > h2 > img { width: auto; height: clamp(26px, 3.0952381vw, 52px); }
/* #main-lower-2 {
	background-color: #FFF;
	padding: 150px 0 50px;
}
#main-lower-2 .head-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(15px, 1.78571429vw, 30px);
}
#main-lower-2 h2 {
	display: flex;
	align-items: center;
	gap: 3rem;
}
#main-lower-2 h2 img {
	height: clamp(14px, 1.70747024vw, 28px);
}
#main-lower-2 h2 span {
	font-size: clamp(16px, 1.07142857vw, 18px);
}
#main-lower-2 h3 img {
	height: clamp(24px, 2.85714286vw, 48px);
} */

#main-lower.sub { overflow: hidden; height: 100vh; }
#main-lower.sub > img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.3);
	transition: opacity 1s,transform 12s linear;	
}
#main-lower video {
    height: 100%;
	object-fit: cover;
}
body.is-loaded #main-lower.sub > img {
	opacity: 1;
	transform: scale(1);
}
#main-lower.main-fixed > h2 {
	top: 50vh;
	right: auto;
	left: 50%;
	z-index: 1;
	align-items: center;
	transform: translateX(-50%) translateY(-50%);
    position: absolute;
}
#main-lower.main-fixed { height: 100vh;}
#main-lower.main-fixed .img {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
#main-lower.main-fixed .img img {
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: all 2s ease;
    transform: scale(1.1);
	width: 100%;
}
body.is-loaded #main-lower.main-fixed .img img { opacity: 1; transform: scale(1); }

@media screen and (max-width: 1200px) {
	#main-lower.main-fixed { height: 156vh;}
}
@media screen and (max-width: 767px) {
	#main-lower.main-fixed { height: 100vh;}
	#main-lower > h2 { top: 70%; }
}
.bg01 { background: url(../imgs/bg01.jpg) no-repeat center top / cover; }

/* .md-content-sliders .slick-slide img { max-height: 90vh; } */