@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Fahkwang:wght@600&family=Noto+Sans+JP&display=swap');

.font_9up{
	font-size: -webkit-calc(1rem + 9px); 
    font-size: calc(1rem + 9px);	
}
.font_24up{
	font-size: -webkit-calc(1rem + 24px); 
    font-size: calc(1rem + 24px);		
}
.font_25up{
	font-size: -webkit-calc(1rem + 25px); 
    font-size: calc(1rem + 25px);		
}
.font_30up{
	font-size: -webkit-calc(1rem + 30px); 
    font-size: calc(1rem + 30px);
}
.font_80up{
	font-size: -webkit-calc(1rem + 80px); 
    font-size: calc(1rem + 80px);
}

/*-------------------------------------------------------
					全体共通部分
-------------------------------------------------------*/

body {
    font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 400;
}
li{
	list-style-type: none;
}
.en_font{
	font-family: 'Fahkwang', "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* -- loader -- */
#loader{
	top: 0;
	left: 0;
	z-index: 9999;
	transition: -webkit-transform 1s cubic-bezier(0.5, 0, 0, 1);
    transition: transform 1.5s cubic-bezier(0.5, 0, 0, 1);
    transition: transform 1.5s cubic-bezier(0.5, 0, 0, 1), -webkit-transform 1s cubic-bezier(0.5, 0, 0, 1);
}
#loader.load_bg {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.load_logo figure{
	opacity: 0;
	-webkit-transform: translateX(100px);
    transform: translateX(100px);
	transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    transition-duration: 1.5s;
    transition-delay:1s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.7, 1);
	max-width: 300px;
	z-index: 2;
}
#loader.load .load_logo figure{
	-webkit-transform: translateX(0px); 
    transform: translateX(0px);
    opacity: 1.0;
}
#loading_line,#loading_bg{
	top: 0;
	left: 0;
	margin: auto;
	height: 100vh;
	-webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    transition: -webkit-transform 0.6s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .65s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .65s cubic-bezier(0.3, 1, 0.1, 1), -webkit-transform .65s cubic-bezier(0.3, 1, 0.1, 1);
	z-index: -2;
}
#loading_bg{z-index: -1;transition-delay: .55s}
#loader.load #loading_line,#loader.load #loading_bg{transform: scaleX(1);}

#main .xt.animStart h2,#main_img .txt.animStart p{opacity: 0;}
#main .main_box.animStart h1{animation: heroText 600ms 800ms both;}
#main .main_box.animStart h2{animation: heroText 600ms 1000ms both;}
#main .main_box.animStart div{animation: heroText 600ms 1100ms both;}
@-webkit-keyframes heroText {
0% {
	opacity: 0;
	-webkit-transform: translate(50px, 0);
	transform: translate(50px, 0)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
@keyframes heroText {
0% {
	opacity: 0;
	-webkit-transform: translate(50px, 0);
	transform: translate(50px, 0)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}

@-webkit-keyframes animText {
0% {
	opacity: 0;
	-webkit-transform: translate(0, 15px);
	transform: translate(0, 15px)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
@keyframes animText {
0% {
	opacity: 0;
	-webkit-transform: translate(0, 15px);
	transform: translate(0, 15px)
}
100% {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}
}
/* -- snsリンク -- */
.sns_link li:hover{
	transform: scale(1.1);
	transition: 0.5s;
}
/* -- page-top -- */


/* -- ヘッダー -- */
#header{
	background-color: rgba(0, 0, 0,0.85);
}
.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
.is-show {
  transform: translateY(0);
}
.g-menu-btn.active{
    position: fixed;
}

/* -- リンクボタン -- */
.more a{
	overflow: hidden;
	display: block;
	padding: 15px 0;
	width: 50%;
	text-align: center;
	position: relative;
	transition: .3s ease-in-out;
}
footer .entry.more a{
	padding: 10px 0;
	width: 100%;
}
.page10 .more a{
	width: 100%;
}
.more a:hover {
 	transform: scale(1.03);
	transition:  0.5s;
}
footer .entry a:hover {
  	transform: scale(1.03);
	transition: 0.5s;
}
.shop_info.more a{
	padding: 0px 0;
}
#top_cms .more a {
    margin: auto;
    max-width: 300px;
    margin-top: 50px;
}
.more a:active{
  background: rgba(255, 255, 255, .35);
}
footer .entry.more a:active {
  background: rgba(0, 0, 0, .35);
}
.more a:before{
  content: "";
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, .15);
  transform: rotate(-45deg);
  position: absolute;
  top: -10%;
  left: -180%;
  transition: .4s ease-in-out;
	transition-delay:.23s;
}
footer .entry.more a:before {
	background: rgba(0, 0, 0, .15);
}
.shop_info.more a:before{
	z-index: 1;
	left: -330%;
	width: 380%;
}
.more a:hover:before{
	left: 60%;
	transition-delay:0s;
}
.more a:after {
    content: '';
    display: block;
    position: absolute;
    top: 3px;
    bottom: 0;
    margin: auto;
    right: 0px;
    width: 15%;
    height: 1px;
    background-color: #fff;
    transform-origin: right;
    transition: .23s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    transform: scaleX(0);
	transition-delay:0s;
}
footer .entry.more a:after {
    background-color: #000;
}
.shop_info.more a.info_box:last-child:after {
    right: 15%;
}
.more a:hover:after {
    transform: scaleX(1);
    transition: .28s cubic-bezier(0.79, 0.17, 0.15, 0.96);
	transition-delay:.45s;
}
/* -- フッター -- */
#page-top{
	cursor: pointer
}
#page-top .scroll_u{
	width: 1px;
	height: 70px;
}
#page-top .scroll_u span{
	width: 1px;
	height: 100%;
	background-color: rgba(255,255,255,0.4)
}
#page-top .scroll_u span::before{
	position:absolute;
	content: "";
	display: block;
	width: 100%;
	background-color: #fff;
	animation: lineu 4s ease 0s infinite;
}
@keyframes lineu {
	0% {
		top: 70px;
		height: 0;
	}
	20% {
		top: 0;
		height: 70px;
	}
	40% {
		top: 0;
		height: 0;
	}
	100% {
		top: 0;
		height: 0;
	}
}


/*-------------------------------------------------------
					index.html 
-------------------------------------------------------*/
/* -- スクロールアニメーション -- */
.fadein_up{ 
	opacity : 0;
	transition:transform 1s ease,opacity 2s ease; 
}
.fadein_up.scrollin{
    opacity : 1;
}
#catch .fadein_up{ 
    -webkit-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px);
}
#catch .fadein_up.scrollin{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
#contents .fadein_up{ 
    -webkit-transform: translateX(500px);
    -ms-transform: translateX(500px);
    transform: translateX(500px);
}
#contents .fadein_up.scrollin{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
#top_cms .fadein_up{ 
    -webkit-transform: translateY(400px);
    -ms-transform: translateY(400px);
    transform: translateY(400px);
}
#top_cms .fadein_up.scrollin{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
/* -- メインイメージ -- */
#main{
	height: 100vh;
	max-height: 100vh;

	position: relative;
}
#main .main_box{
	top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
max-width: 500px;
	width: 50%;
}
#main .cms_img1 img{
object-fit: cover;
font-family: 'object-fit: cover';
    width: 100%;
    height: 100vh;
}
.back_color{
	background: -webkit-gradient(linear, rgba(0,0,0,0.5) 0%,  rgba(0,0,0,0.975) 20%, rgba(0,0,0,0.975) 80%,rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(rgba(0,0,0,0.5) 0%,  rgba(0,0,0,0.975) 20%, rgba(0,0,0,0.975) 80%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(rgba(0,0,0,0.5) 0%,  rgba(0,0,0,0.975) 20%, rgba(0,0,0,0.975) 80%,rgba(0,0,0,0.5) 100%);
}
#main .sns_link{
	width: 50px;
	top: 50%;
    right :20px;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);	
}
#main .sns_link li{
	width: 100%!important;
    border-radius: 50%;
	margin-bottom: 15px;
	background-color: #000;
}
#main .sns_link li img{
	/*width: 65%!important;*/
    padding: 10px;
    box-sizing: border-box;
}

/* -- キャッチ文 -- */
.catch_box{
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
}
.catch_txt{
    background-color: rgba(255,255,255,0.3);
    padding: 40px 40px;
    width: 50% !important;
    min-width:600px;
    z-index: 1;
    position: relative;
	margin: auto;
}
#catch figure:first-child{
	position: absolute;
	top: 0;
	left: 0;
}
#catch figure:last-child{
	position: absolute;
	bottom: 0;
	right: 0;
}

/* -- コンテンツ -- */

#contents .box .box_item{
	padding: 100px;
}
#contents .box .box_item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
	top: 0;
    left: 0;
}
#contents .box .box_item:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 5%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat top left/100% 100%;
}
/* -- TOPCMS -- */
#top_cms{
	  counter-reset: number;
}
.top_cms_box{
	background-color: rgba(255, 255, 255, 0.7);
}
.cms_title::before {
	counter-increment: number;
	content: counter(number,decimal-leading-zero);
	padding-right: 5px;
	transform: rotate(90deg);
	font-weight: bold;
	font-size: 30px;
}
.cms_wrap {
    width: 90%;
    margin: auto;
}


/* -- ショップ情報 -- */
.shop_info {
	-webkit-transform: translate(-50%,0%) skewX( 170deg);
    -moz-transform: translate(-50%,0%) skewX(170deg);
    transform: translate(-50%,0%) skewX(170deg);
    width: 120%!important;
    position: relative;
    top: 0%;
    left: 50%;
}
.shop_info .info_box:first-child{
	margin-top: -90px;
}
.shop_info .info{
	padding: 140px 0;
}
.shop_info .contact{
	margin-left: auto;
	padding: 140px 0;
}
.shop_info h2{
	    -webkit-transform: translate(-55%,-50%) skewX( -170deg);
    -moz-transform: translate(-55%,-50%) skewX(-170deg);
    transform: translate(-55%,-50%) skewX( -170deg);
    position: absolute;
    top: 50%;
    left: 50%;
}

/*-------------------------------------------------------
				下層ページ共通部分
-------------------------------------------------------*/
/* ----------　ページタイトル ---------- */
#page_title{
	height: 400px;
	margin-bottom: 100px;
}
#page_title:before {
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat top left/100% 100%;
    content: '';
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100px;
    z-index: 2;
    bottom: 0;
}
#page_title:after {
    background-color: rgba(210,210,210,0.7);
    content: '';
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 1;
    bottom: 0;
}
#page_title .page_title_box .wrap{
	position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0%,-50%);
    z-index: 2;
}
#page_title .sns_link {
	position: absolute;
    top: 25px;
    right: 80px;
    z-index: 2;
}
#page_title .sns_link li{
	width: 50px!important;
    border-radius: 50%;
	background-color: #000;
}
#page_title .sns_link li img {
    width: 65%!important;
	height: auto!important;
}
/* ----------　内容部分 ---------- */
.content_wrap {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 50px;
	position: relative;
}
/* ----------　カテゴリーリンク ---------- */
.cate_list {
	min-height: 100px;
    margin-bottom: 50px;
}
.cate_list p{
	transform: rotate( 90deg);
    display: inline-block;
	position: absolute;
	left: -32px;
	white-space: nowrap;
}
.cate_list li{
	width: 23%;
    padding: 0 1%;  
}
.cate_list li:nth-child(4n){
    margin-right: 0%;
}
.cate_list li a{
	position: relative;
	padding: 10px 0;  
}
.cate_list li a:hover{
	transition: 0.5s;
	transform: scale(1.1) translateY(-2px);
}
.cate_list li a{
	width: 100%;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	margin: auto;
	font-weight: bold;
}
/* ----------　会社情報 ---------- */
.page7 .box {
	width: 48%!important;
}
.page7 .box .box_item:first-child{
	padding: 15px;
}
.page7 #map iframe{
	width: 100%;
	height:350px;
}
.page7 .box_wrap {align-items: normal;}
/* ----------　1280以下 ---------- */
@media screen and (max-width: 1280px){

}
/* ----------　1000以下 ---------- */
@media screen and (max-width: 1000px){

}






/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.font_8up_tb{
	font-size:-webkit-calc(1rem + 8px);
	font-size : calc(1rem + 8px);
}
.font_12up_tb {
    font-size: -webkit-calc(1rem + 12px);
    font-size: calc(1rem + 12px);
}
.font_25up_tb{
	font-size: -webkit-calc(1rem + 25px); 
    font-size: calc(1rem + 25px);		
}
.font_60up_tb{
	font-size: -webkit-calc(1rem + 60px); 
    font-size: calc(1rem + 60px);		
}
/*-------------------------------------------------------
					全体共通部分
-------------------------------------------------------*/
/* -- snsリンク -- */
#main .sns_link {
	width: 45px;
	top: 60%;
	right: 27px;
}
.sns_link li{
	width: 12%!important;
}
.shop_info.more a:first-of-type:before {
    transform: rotate(0deg);
    top: auto;
    left: auto;
    height: 40%;
    width: 15%;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255 ,255 ,255 ,0.15) 50.5%) no-repeat top right/100% 100%;
}
.shop_info.more a:last-child:before {
    transform: rotate(0deg);
    top: auto;
    left: auto;
    height: 40%;
    width: 15%;
    top: 0;
    left: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(255 ,255 ,255 ,0.15) 50.5%) no-repeat top left/100% 100%;
}
.shop_info.more a.info_box:last-child:after {
    right: 0%;
}
#page_title .sns_link li {
    width: 45px!important;
    margin-right: 15px;
}

	
/*-------------------------------------------------------
					index.html 
-------------------------------------------------------*/
/* -- メインイメージ　-- */
#main .main_box h1 {
    max-width: 400px;
}
/* -- キャッチ文　-- */
.catch_box{
	padding-top: 0px;
	padding-bottom: 0px;
}
#catch figure:first-child{
    width: 45%!important;
	position: relative;
    margin-right: auto;
}
#catch figure:last-child{
    width: 45%!important;
	position: relative;
    margin-left: auto;
}
.catch_txt {
    margin-top: 40px;
    margin-bottom: 40px;
}
/* -- コンテンツ -- */	
#contents .box .box_item {
    padding: 50px;
}
	
.shop_info {
 	-webkit-transform: translate(0%,0%) skewX(0deg); 
    -moz-transform: translate(0%,0%) skewX(0deg);
    transform: translate(0%,0%) skewX(0deg);
	left: 0%;
	    width: 100%!important;
}
.shop_info h2 {
    -webkit-transform: translate(-55%,-50%) skewX(0deg); 
    -moz-transform: translate(-55%,-50%) skewX(0deg);
    transform: translate(-50%,-50%) skewX( 0deg);
    position: absolute;
}
/*-------------------------------------------------------
				下層ページ共通部分
-------------------------------------------------------*/
/* ----------　ページタイトル ---------- */
#page_title {
    height: 350px;
    margin-bottom: 100px;
}
/* ----------　会社情報 ---------- */
.page7 .box {
	width: 100%!important;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.font_4up_sp {
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}
.font_6up_sp {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
}
.font_7up_sp{
	font-size:-webkit-calc(1rem + 7px);
	font-size : calc(1rem + 7px);
}
.font_8up_sp{
	font-size:-webkit-calc(1rem + 8px);
	font-size : calc(1rem + 8px);
}
.font_14up_sp{
	font-size:-webkit-calc(1rem + 14px);
	font-size : calc(1rem + 14px);
}
.font_18up_sp{
	font-size:-webkit-calc(1rem + 18px);
	font-size : calc(1rem + 18px);
}
.font_20up_sp {
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
}
/*-------------------------------------------------------
					全体共通部分
-------------------------------------------------------*/
/* -- リンクボタン -- */
.more a {
    width: 80%;
}
.more a:after {
    transform: scaleX(1);
}

/* -- snsリンク -- */
#page_title .sns_link li {
    width: 40px!important;
    margin-right: 10px;
}
footer .sns_link li:last-child {
	margin-right: 0px;
}
	
/*-------------------------------------------------------
					index.html 
-------------------------------------------------------*/
/* -- メインイメージ　-- */
#main .main_box {
    width: 70%;
}
#main .main_box h2 {
    line-height: 2;
}
/* -- キャッチ文　-- */
.catch_txt {
    padding: 20px 20px;
    min-width: 100%;
}
#catch figure:first-child,#catch figure:last-child {
	width: 75%!important;
}

/* -- コンテンツ -- */	
.pc_back{
	background-image: none!important;
}
.sp_back{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size:cover;	
}
#contents .fadein_up:nth-child(2){ 
    -webkit-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    transform: translateX(-500px);
}
#contents .fadein_up:nth-child(2).scrollin{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
#contents .no .en_font{
	top: auto;
	left: auto;
	transform: translate(0%,0%);
}
#contents .box .box_item:after {
    content: '';
    height: 30px;
    width: 100%;
    top: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat bottom left/100% 100%;
}
	
/* -- ショップ情報 -- */	
.shop_info.more a:first-of-type:before,.shop_info.more a:last-child:before {
    height: 30%;
    width: 30%;
}
.shop_info h2{
     width: 100%;
}
.shop_info.more a.info_box:after{
     width: 10%;
}
/*-------------------------------------------------------
				下層ページ共通部分
-------------------------------------------------------*/
/* ----------　ページタイトル ---------- */
#page_title {
    height: 250px;
}
#page_title:before {
    height: 50px;
}
#page_title .page_title_box .wrap {
    top: 60%;
    left:5%;
}
#page_title p{
        font-size: 1.6rem;
        padding: 0 0 8px;
    }
#page_title p:nth-child(2){
        font-size: 1.3rem;
}

/* ----------　カテゴリーリンク ---------- */	
.cate_list li {
    width: 90%;
}
.cate_list li a {
    text-align: left;
}
/* ----------　内容部分 ---------- */
.content_wrap {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 40px 10px;
}
/*-------------------------------------------------------
					page2.html
-------------------------------------------------------*/	
.pager li:not(.prev):not(.next){
	display: none
}
.page7 #map iframe{
	height:250px;
}	
}

/*-------------------------------------------------------
					デバック対策
-------------------------------------------------------*/	
@media screen and (max-width: 340px){

.shop_info h2{
     width: 100%;
}
.shop_info.more a.info_box:after{
      display: none;
}
.page10 .more a:after{
     width: 9%;
}

}