@charset "utf-8";

/*------------------------------------------------------------
LP
------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
}

/*パンくずリスト*/
.bread-crumbs .bread-crumbs-inner{
	display: none;
}







/*! pc & tb 
------------------------------------------*/
@media screen and (min-width: 767px) {
	
	.sp_view{
		display: none;
	}

/*LPの横幅制限を解除*/
main .contents-inner{
	max-width: none!important;
}
/*LP用の背景画像が見切れるのを防ぐ*/
.footer-logos{
	margin: 0 auto;
	padding: 5rem 0;
	background-color: #ffffff;
}

.footer .footer-inner{
	margin-top: 0!important;
	padding-top: 10rem!important;
}

.contents-inner{
	width: 100%!important;
	/*max-width: 1240px!important;*/
	max-width: auto!important;
	max-width: none;
	margin: 0 auto;
	font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
	/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
	font-size: 15px;
	color: #7d7d7d;
}


/*疑似要素でbody全体に画像を配置*/
body{
background-color: #c7c4c2;
}
body:before{
content:""; /*中身はブランク*/
display:block;
/*background-color:url("../img/main_img_sp.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0 0;*/
background-color: #c7c4c2;
width:100%; /*横幅いっぱいに表示*/
height:100vh; /*立幅いっぱいに表示*/
position:fixed; /*固定*/
z-index:-1; /*全ての要素より順位を下げる*/
}

.txt_bg{
	position: relative;
}
.txt_wrap{
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.txt_wrap .bg_txt_left{
  position: absolute;
	display: flex;
	width: 23%;
	min-width: 300px;
	right: calc(50% + 300px);
	height: 100vh;
	justify-content: center;
	align-items: center;
}
.txt_wrap .bg_txt_right{
  position: absolute;
	display: flex;
	width: 23%;
	min-width: 300px;
	left: calc(50% + 300px);
	height: 100vh;
	justify-content: center;
	align-items: center;
}

.section{
	display:block;
	height:100%;
}

.sec_first{
	width: 500px;
	margin: 0 auto;
	padding: 0;
	background-color: #ffffff;
}

.sec_second{
	width: 100%;
	margin: 0 auto;
	padding: 130px 0 0;
	text-align:center;
	background-color: #ffffff;
}

.sec_ttl_s{
	font-size: 25px;
	padding-bottom: 50px;
	text-align: center;
	color: #414042;
}

/* main
======================*/
.main_box{
	position: relative;
}
.main_logo{
	position: absolute;
	width: calc(220 / 500 * 100%);
	top: -30px;
	right: 0;
  left: 0;
  margin: 0 auto;
}
.main_txt{
	width: calc(420 / 500 * 100%);
	margin: 0 auto;
	padding: 120px 0 140px;
	font-size: 15px;
	color: #7D7D7D;
	line-height: 2.3;
	text-align: left;
	text-align: justify;
	font-weight: 600;
}

/* Styling
======================*/
.styling_wrap{
	padding-bottom: 90px;
}
.styling_img_wrap{
	padding-bottom: 40px;
}

.styling_img{
	width: calc(320 / 500 * 100%);
	padding-bottom: 50px;
	overflow: hidden;
}

.styling_wrap .img_left{
	margin-left: 0;
}
.styling_wrap .img_right{
	margin-left: auto;
	margin-right: 0;
}
.styling_wrap .img_center{
	margin: 0 auto;
}
.styling_wrap .img_full{
	width: calc(500 / 500 * 100%)!important;
	margin: 0 auto;
}
/*画像の重なり*/
.img_stickybox{
 position: relative;
}
.img_stickybox .styling_img{
	display: block;
	background-color: #ffffff;
}
.img_stickybox .styling_img.style13{
	padding-bottom: 0;
	margin-bottom: 50px;
}
.img_stickybox .style04, .img_stickybox .style05, .img_stickybox .style06{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.img_stickybox .style11, .img_stickybox .style12, .img_stickybox .style13, .img_stickybox .style14{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}




/* ボタン大
======================*/
	.footer_btn_wrap{
		/*border-top: 1px solid #dadada;*/
		margin: 0px auto;
	}

	.footer_btn_wrap a{
		width: 320px;
		height: 30px;
		display: block;
		margin: 0 auto 30px;
	}
	.footer_btn{
		background-color: #a7a7a7;
		border-radius: 5px;
		font-size: 14px;
		line-height: 40px;
		height: 40px;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0.8px;
	}

	.font_jp{
		font-size: 13px;
		letter-spacing: -0.7px;
	}


/* 展開ブランド
======================*/
.brand_wrap{
	width: calc(100/100*100%);
	max-width: 760px;
	margin: 0 auto;
	padding: 0 0 120px;
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;/*両端配置・アイテムの間にスペースを均等に割り付け*/
	align-items: flex-start;/*上揃え*/
	position: relative;
}

.brand_wrap div{
	width: calc(365/760*100%);
	margin: 0;
	padding-bottom: calc(30/760*100%);
	text-align: center;
	}
.brand_wrap div img{
		width: 100%;
}

/* About
======================*/
.about_movie{
	max-width: 1400px;
	margin: 0 auto;
	padding-bottom: 90px;
}
.about_txt{
	font-size: 16px;
	text-align: left;
	line-height: 2;
	width: 80%;
	max-width: 760px;
	margin: 50px auto 0;
	padding-bottom: 90px;
	
}


/* Access
======================*/
.access_shopinfo{
	width: 640px;
	margin: 0 auto;
	padding: 0 0 90px;
}

.access_info{
	font-size: 14px;
	line-height: 1.6;
	/* padding-left: 245px; */
	text-align: center;
	margin: 0 auto;
}
.access_info:last-child{
	padding-top: 60px;
}


.access_logo{
	position: absolute;
	width: 185px;
	top: 0;
	left: 30px;
}

.access_shopname{
	font-size: 17px;
	color: #414042;
	letter-spacing: 0;
}
.access_shopname span{
	font-size: 12px;
	padding-right: 10px;
}
.access_shopname .font_jp{
	/* padding-top: 5px; */
	font-size: 13px;
}

.access_add{
	padding-top: 15px;
	/*padding-bottom: 20px;*/
}
.access_google a{
	display: block;
	padding-top: 10px;
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 11px;
	color: #7d7d7d;
}
.access_google{
	position: relative;
	width: 125px;
	margin: 0 auto;
	/* background-color: #ffcc00; */
}
.access_map{
	position: absolute;
	width: 18px;
	bottom: -4px;
	left: 0;
}

.sec_second .footer_btn_wrap a{
	margin: 0 auto!important;
	padding-bottom: 100px;
}



}/*! //pc & tb */





/*! sp 
------------------------------------------*/
@media screen and (max-width: 768px) {

	.pc_view{
		display: none;
	}
	main .contents-inner{
		margin: 0 0 0;
		/*font-family: "linotype-sabon","Times New Roman", Times,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
		font-family: "linotype-sabon","Times New Roman", Times, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", serif;
		color: #7d7d7d;
	}

/* sp section
======================*/
.section{
	display:block;
	height:100%;
}

.sec_first{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.sec_second{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align:center;
	background-color: #ffffff;
	padding: 0 0 calc(10/500*100vw);
}

.sec_ttl_s{
	font-size: 4.3vw;
	text-align: center;
	color: #414042;
	position: relative;
	margin-bottom: calc(80/780*100vw);
}
/* sp main
======================*/
	.cri-liveact-player{
		max-width: 768px!important;
	}
.main_img{
	width: 100%;
}
.main_box{
	position: relative;
}

.main_logo{
	position: absolute;
	width: calc(220 / 500 * 100%);
	top: calc(-25 / 500 * 100vw);
	right: 0;
  left: 0;
  margin: 0 auto;
}
.main_txt{
	width: calc(420 / 500 * 100%);
	margin: 0 auto;
	padding: calc(120 / 500 * 100vw) 0 calc(120 / 500 * 100vw);
	font-size: 3.4vw;
	color: #7D7D7D;
	line-height: 2.3;
	text-align: left;
	text-align: justify;
	font-weight: 600;
}

/* sp Styling
======================*/
.styling_wrap{
	padding-bottom: calc(30 / 500 * 100vw);
}
.styling_img_wrap{
}

.styling_img{
	width: calc(320 / 500 * 100vw);
	padding-bottom: calc(50 / 500 * 100vw);
}
.styling_wrap .img_left{
	margin-left: 0;
}
.styling_wrap .img_right{
	margin-left: auto;
	margin-right: 0;
}
.styling_wrap .img_center{
	margin: 0 auto;
}
.styling_wrap .img_full{
	width: calc(500 / 500 * 100vw)!important;
	margin: 0 auto;
}
/*画像の重なり*/
.img_stickybox{
 position: relative;
}
.img_stickybox .styling_img{
	display: block;
	background-color: #ffffff;
}
.img_stickybox .styling_img.style13{
	padding-bottom: 0;
	margin-bottom: calc(50 / 500 * 100vw);
}
.img_stickybox .style04, .img_stickybox .style05, .img_stickybox .style06{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.img_stickybox .style11, .img_stickybox .style12, .img_stickybox .style13, .img_stickybox .style14{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


/* sp ボタン大
======================*/
.footer_btn_wrap{
	/*border-top: 1px solid #dadada;*/
	margin: 9vw auto 13vw;
}

.footer_btn_wrap a{
	width: 63vw;
	height: 5.625vw;
	display: block;
	margin: 0 auto 8vw;
}
.footer_btn{
	text-align: center;
	letter-spacing: 0.8px;
	background-color: #a7a7a7;
	border-radius: 1vw;
	font-size: 2.8125vw;
	line-height: 5.625vw;
	line-height: 8vw;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1vw;
}
.font_jp{
	font-size: 2.7vw;
	letter-spacing: -0.2vw;
}
	
/* sp 展開ブランド
======================*/
.brand_wrap{
	width: calc(624/780*100%);
	display: flex;
	flex-wrap: wrap;/*改行許可*/
	justify-content: space-between;/*両端配置・アイテムの間にスペースを均等に割り付け*/
	align-items: flex-start;/*上揃え*/
	margin: 0 auto;
	position: relative;
	padding-bottom: calc(100/780*100vw);
}

.brand_wrap div{
	width: calc(302/624*100%);
	margin: 0;
	padding-bottom: calc(20/780*100vw);
	text-align: center;
	}

/* sp About
======================*/
.about_movie{
	max-width: 100%;
	margin: 0 auto calc(150/780*100vw);
}
.about_txt{
	line-height: 2;
	text-align: left;
	font-size: 3.4vw;
	width: calc(624/780*100%);
	margin: calc(70/780*100vw) auto;
}


/* sp Access
======================*/
.access_shopinfo{
	position: relative;
	width: calc(624/780*100%);
	margin: calc(0/780*100vw) auto calc(150/780*100vw);
}
.access_logo{
	position: absolute;
	width: calc(185/624*100%);
	top: calc(0/780*100vw);
	left: calc(0/780*100vw);
}
.access_shopname{
	font-size: 3.6vw;
	color: #414042;
	padding-bottom: 2.5vw;
	letter-spacing: 0.07vw;
}
.access_shopname span{
	font-size: 3vw;
	padding-right: 1.5vw;

}

.access_info{
	font-size: 2.8vw;
	line-height: 1.6;
	text-align: center;
}
.access_info:last-child{
	padding-top: 10vw;
}

.access_add{
/*		padding-bottom: calc(25/780*100vw);*/
}

.access_google{
	width: calc(165/780*100vw);
	position: relative;
	/* background-color: aqua; */
	margin: 0 auto;
	padding-top: calc(20/780*100vw);
	text-align: right;
}
.access_google a{
	display: block;
	font-size: 2.4vw;
	color: #7d7d7d;
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	line-height: 1;
}
.access_map{
	position: absolute;
	width: 3vw;
	bottom: -1vw;
	left: 0vw;
}

}/*! //sp */




/*! tablet 
------------------------------------------*/
@media screen and  (min-width: 641px) and (max-width: 768px) {
/* tb section
======================*/
	.main_logo{
		max-width: 280px;
	}
	.main_txt{
		font-size: 15px;
		padding: 130px 0 100px;
	}
	.styling_img_wrap{
		padding-bottom: 0;
	}
	.styling_wrap{
		padding-bottom: 90px;
	}

	.font_jp{
		font-size: 15px;
	}
	.footer_btn_wrap{
		margin: 0 auto 0;
	}
	.sec_second .footer_btn_wrap{
		margin: 120px auto 90px;
	}
	.footer_btn{
		font-size: 15px;
	}
	.footer_btn_wrap a{
		width: 320px;
		height: 30px;
	}
	.about_txt{
	font-size: 15px;
	}
	.sec_ttl_s{
	font-size: 27px;
	}
	.access_info{
	font-size: 15px;
	}
	.access_google a{
		font-size: 12px;
	}
	.access_map{
		top:140px;
	}
}/*! //tablet */





/*@media screen and (max-width: 1200px) and (min-width: 768px) and (orientation: portrait) {
}
*/












/*タイトル タイピングアニメーション start
=========================*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on1 1s ease-out forwards; }

.line1 .eachTextAnime.appeartext span{ animation:text_anime_on1 1s ease-out forwards; }
.line2 .eachTextAnime.appeartext span{ animation:text_anime_on2 1s ease-out forwards; }
.line3 .eachTextAnime.appeartext span{ animation:text_anime_on2 1.5s ease-out forwards; }
@keyframes text_anime_on1 {
  0% {opacity:0;}
  100% {opacity:1;}
}
	@keyframes text_anime_on2 {
  0% {opacity:0;}
	50% {opacity:0;}
  100% {opacity:1;}
}
/*タイトル タイピングアニメーション end
=========================*/


/*画像回転アニメーション start
=========================*/
.itemAnmTrigger {
	opacity: 0;
}
.itemAnmActive {
	opacity: 1;
}
.style01 .itemAnmActive{
	animation: item_anm_left 2s ease-out 1;
}
.style02 .itemAnmActive{
	animation: item_anm_right 2s ease-out 1;
}
.style03 .itemAnmActive{
	animation: item_anm_zoom 2s ease-out 1;
}
.style04 .itemAnmActive{
	animation: item_anm_left 2s ease-out 1;
}
.style07 .itemAnmActive{
	animation: item_anm_left 2s ease-out 1;
}
.style08 .itemAnmActive{
	animation: item_anm_right 2s ease-out 1;
}
.style09 .itemAnmActive{
	animation: item_anm_up 2s ease-out 1;
}
.style10 .itemAnmActive{
	animation: item_anm_zoom 2s ease-out 1;
}
.style11 .itemAnmActive{
	animation: item_anm_left 2s ease-out 1;
}

.style15 .itemAnmActive{
	animation: item_anm_zoom 2s ease-out 1;
}


/*左から右に移動・透過あり・はみ出さない*/
@keyframes item_anm_left {
0%   {transform: scale(1) rotate(0) translateX(-50px); opacity: 0;}
100% {transform: scale(1) rotate(0) translateX(0); opacity: 1;}
}
/*右から左に移動・透過あり・はみ出さない*/
@keyframes item_anm_right {
0%   { transform: scale(1) rotate(0) translateX(50px); opacity: 0;}
100% { transform: scale(1) rotate(0) translateX(0); opacity: 1;}
}
/*その場で縮小表示*/
@keyframes item_anm_zoom {
0%   {transform: scale(1.2) rotate(0) translate3d(0,0,0); opacity: 0;}
100% {transform: scale(1) rotate(0) translate3d(0,0,0); opacity: 1;}
}
/*下から上に移動・透過あり・はみ出さない*/
@keyframes item_anm_up {
0%   {opacity:0;transform:translate3d(0,50px,0);}
100% {opacity:1;transform:translate3d(0,0,0);}
}
/*下から上に移動*/
/*@keyframes item_anm4 {
0%   {opacity:0;transform:translate3d(0,50px,0);}
100% {opacity:1;transform:none;}
}
@keyframes item_anm5 {
0%   {opacity:0;transform:translate3d(0,500px,0);}
100% {opacity:1;transform:translate3d(0,0,0);}
}
@keyframes item_anm6 {
0%   {opacity:0;transform:translate3d(0,500px,0);}
100% {opacity:1;transform:translate3d(0,0,0);}
}*/



.imgFrame{
	overflow: hidden;
}
.imgFrame img{
	overflow: hidden;
}

/*画像回転アニメーション end
=========================*/






/*   ふわっと表示 start
=========================*/
/* ----- effects ----- */
  .effFI, .effFIU, .effFID, .effFIR, .effFIL { opacity:0; }
  .effFI.effanm { -webkit-animation:effFI 2.5s both; animation:effFI 2.5s both; }
  .effFIU.effanm { -webkit-animation:effFIU 1.5s both; animation:effFIU 1.5s both; }
  .effFID.effanm { -webkit-animation:effFID 1.5s both; animation:effFID 1.5s both; }
  .effFIR.effanm { -webkit-animation:effFIR 1.5s both; animation:effFIR 1.5s both; }
  .effFIL.effanm { -webkit-animation:effFIL 1.5s both; animation:effFIL 1.5s both; }

/*その場でフェードイン*/
  @-webkit-keyframes effFI {0%{opacity:0}100%{opacity:1}}
  @keyframes effFI {0%{opacity:0}100%{opacity:1}}

/*下から上へフェードイン*/
  @-webkit-keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIU {0%{opacity:0;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*上から下へフェードイン*/
  @-webkit-keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFID {0%{opacity:0;-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIR {0%{opacity:0;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

/*右から左へフェードイン*/
  @-webkit-keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
  @keyframes effFIL {0%{opacity:0;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
/*   ふわっと表示 end
=========================*/