@charset "utf-8";

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          google fonts          */

/*          loading          */
#overlay{position:fixed;width:100%;height:100%;text-align:center;background:#FFF;z-index:9999;}

/*          Site Contents          */
#siteWrap {
	position: relative;
	width: 100%;
	min-width: 1200px;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	overflow: hidden;
}
.column-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}
.column-wrap::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("/shop/bd2019/free/img/commonBg.png");
	z-index: -1;
}
.column-left-box {
	position: fixed;
	width: 50%;
	height: 100%;
	left: 0;
	overflow: hidden;
	/*z-index: 3;*/
}
.column-right-box {
	position: relative;
	width: 50%;
	left: 50%;
	margin-top: 65px;
}
.column-right-gap {
	margin: 0 10px 0;
}

/*          Slider Contents          */
.slider-wrap {
	width: 100% !important;
	height: 100% !important;
}
.backgroundImages {
	background-size: cover !important;
	background-repeat: no-repeat !important;
}
.slider a .mainImages {
	-webkit-transition:.5s ease-in-out;transition: .5s ease-in-out;
	/*-webkit-transition: all 1.5s cubic-bezier(0.005, 0.435, 0.380, 1.005); transition: all 1.5s cubic-bezier(0.005, 0.435, 0.380, 1.005);*/
}
.slider a:hover .mainImages {
	/*transition: all 1.5s cubic-bezier(0.005, 0.435, 0.380, 1.005);*/
	-webkit-transition:.5s ease-in-out;transition: .5s ease-in-out;
	-webkit-transform: scale3d(1.04,1.04,1.04); transform: scale3d(1.04,1.04,1.04);
}
.slider a.no-link:hover .mainImages {
	-webkit-transform: none; transform: none;
}
.slider-control {
	bottom: 80px;
	text-align: center;
}
.slider-btn li {
	width: 18px;
	height: 6px;
	background-color: #01a1e6;
	border-radius: unset;
	-webkit-transition:.5s ease-in-out;transition: .5s ease-in-out;
}
.slider-btn li:hover, .slider-btn li.curSliderBtn {
	background-color: #1d3993;
}

/*          Scroll Contents          */
.titleLogo {
	margin: auto;
	padding: 50px 0 0;
	text-align: center;
}
.hd {
	margin: auto;
	text-align: center;
	font-size: 38px;
	line-height: 1;
	vertical-align: bottom;
}
.hd .icon-diaw.left {
	padding: 0 .2em 0 0;
}
.hd .icon-diaw.right {
	padding: 0 0 0 .2em;
}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Header Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.headerWrap {
	position: fixed;
	width: 100%;
	background: #c6a400;
	z-index: 90;
}
.naviClose {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	opacity: 0;
}
.naviClose.show {
	display: block;
	opacity: .5;
}
.headerBox {
	display: -webkit-flex;display: flex;
	-webkit-justify-content: space-between;justify-content: space-between;
	-webkit-align-items: center;align-items: center;
	height: 65px;
	margin: auto;
	padding: 0 25px 0;
}
.headerLogo {
	width: 140px;
}
.headerLogo a:hover {
	opacity: .8;
}

/*Navigation Button*/
.navigationBtn {
	position: relative;
	top: 0;
	right: 0;
	width: 5vw;
	height: 4vw;
	z-index: 100;
	cursor: pointer;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.naviBtn {
	position: absolute;
	display: -webkit-flex; display: flex;
	-webkit-flex-direction: column; flex-direction: column;
	-webkit-justify-content: space-between; justify-content: space-between;
	width: 50%;
	height: 40%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.naviBtn span {
	width: 100%;
	height: 0.2vw;
	background-color: #fef0c3;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
/*Navigation Button  --  show*/
.show.navigationBtn {
}
.show .naviBtn .naviBtn1 {
	-webkit-transform: translateY(.7vw) rotate(-45deg);
	        transform: translateY(.7vw) rotate(-45deg);
}
.show .naviBtn .naviBtn2 {
	opacity: 0;
}
.show .naviBtn .naviBtn3 {
	-webkit-transform: translateY(-.7vw) rotate(45deg);
	        transform: translateY(-.7vw) rotate(45deg);
}
/*Navigation*/
.navigationWrap {
	position: fixed;
	width: 430px;
	height: 100%;
	top: 0;
	right: 0;
	background: #c6a400;
	overflow: auto;
	z-index: 99;
	-webkit-transform: translateX(100%); transform: translateX(100%);
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.navigationList {
	margin: 65px 0 0;
	background: #FFF;
}
.navigationList a {
	display: block;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.navigationList a:hover {
	text-decoration: none;
	opacity: .8;
}
.naviName {
	display: -webkit-flex;display: flex;
	-webkit-justify-content: space-between;justify-content: space-between;
	-webkit-align-items: center;align-items: center;
	padding: 10px 20px;
	font-size: 29px;
	background: #c6a400;
}
.naviTop {
	border-top: 1px solid #a27e0d;
}
.naviTop li {
	border-bottom: 1px solid #a27e0d;
}
.naviLuHd {
	border-bottom: 1px solid #6b5203;
}
.naviLuHd .icon-arrowr {
	color: #c6a400;
}
.naviLineup {
	display: -webkit-flex;display: flex;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
}
.naviLineup li {
	width: 50%;
	border-bottom: 1px solid #6b5203;
}
.naviLineup li:nth-child(odd) {
	border-right: 1px solid #6b5203;
}
.charaName {
	display: -webkit-flex;display: flex;
	-webkit-justify-content: space-between;justify-content: space-between;
	-webkit-align-items: center;align-items: center;
	padding: 10px 7px;
	font-size: 23px;
}
.charaName .icon-arrowr {
	font-size: 25px;
}
.before .charaName {
	color: #fff5d6;
	background: #9c8000;
}
.before .charaName .icon-arrowr {
	color: #9c8000;
}
.naviEvent li {
	border-bottom: 1px solid #a27e0d;
}

/*Navigation  --  show*/
.show.navigationWrap {
	-webkit-transform: translateX(0%); transform: translateX(0%);
}



/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*pagetop*/
.pagetop {
	background: #FFF;
}
.pagetop a {
	position: fixed;
	bottom: 25px;
	right: 50px;
	width: 40px;
	height: 40px;
	background: url(/shop/bd2019/free/img/link/pagetop.png) no-repeat;
	background-size: 40px;
	z-index: 80;
}
.pagetop a:hover {
	opacity: .8;
}

/*social*/
.socialList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: space-between; justify-content: space-between;
	margin: auto;
	padding: 80px 0 0;
	width: 220px;
}
.socialList>li {
	background: #FFF;
	text-decoration: none;
	overflow: hidden;
	-webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.icon-tw::before, .icon-fbc:before, .icon-li:before {
	display: block;
	-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.socialList>li>a {
	display: block;
	font-size: 3.5rem;
	padding: 5px;
	background: #c6a400;
}
.socialList>li>a:hover {
	text-decoration: none;
	opacity: .8;
}
.icon-tw, .icon-fb, .icon-fbc, .icon-li {color: #fff5d7;}

/*banner*/
.bannerListBox {
	margin: 30px 0 0;
	padding: 30px 0;
	background: #c6a400;
}
.bannerList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	width: 700px;
	margin: auto;
}
.bannerList li {
	width: 45%;
	margin: 0 15px;
	background: #FFF;
}
.bannerList li a {
	display: block;
}
.bannerList li a:hover {
	opacity: .8;
}
.copyright {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center;justify-content: center;
	padding: 20px 0 0;
	text-align: center;
	font-size: 12px;
	color: #FFF;
}
.copyright li:first-child {
	padding: 0 20px 0 0;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     キャラ別色指定     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*ナビゲーション-背景、キャラページ-商品画像枠・商品値段リンク背景・店舗限定商品タイトルボーダー*/
.haruka .charaName, .dir-haruka .goodsButton .shop a, 
.dir-haruka .goodsButton .shop.fin p, .dir-haruka .limitHd::after {
	background: #85b1df;
}
.nagisa .charaName, .dir-nagisa .goodsButton .shop a, 
.dir-nagisa .goodsButton .shop.fin p, .dir-nagisa .limitHd::after {
	background: #fcd13e;
}
.natsuya .charaName, .dir-natsuya .goodsButton .shop a, 
.dir-natsuya .goodsButton .shop.fin p, .dir-natsuya .limitHd::after {
	background: #eae600;
}
.nao .charaName, .dir-nao .goodsButton .shop a, .dir-nao 
.goodsButton .shop.fin p, .dir-nao .limitHd::after {
	background: #c4d5eb;
}
.sosuke .charaName, .dir-sosuke .goodsButton .shop a, 
.dir-sosuke .goodsButton .shop.fin p, .dir-sosuke .limitHd::after {
	background: #82cbd1;
}
.makoto .charaName, .dir-makoto .goodsButton .shop a, 
.dir-makoto .goodsButton .shop.fin p, .dir-makoto .limitHd::after {
	background: #b2d246;
}
.momotaro .charaName, .dir-momotaro .goodsButton .shop a, 
.dir-momotaro .goodsButton .shop.fin p, .dir-momotaro .limitHd::after {
	background: #f5ad54;
}
.rei .charaName, .dir-rei .goodsButton .shop a, 
.dir-rei .goodsButton .shop.fin p, .dir-rei .limitHd::after {
	background: #8a9ace;
}
.aiichiro .charaName, .dir-aiichiro .goodsButton .shop a, 
.dir-aiichiro .goodsButton .shop.fin p, .dir-aiichiro .limitHd::after {
	background: #bae2f8;
}
.hiyori .charaName, .dir-hiyori .goodsButton .shop a, 
.dir-hiyori .goodsButton .shop.fin p, .dir-hiyori .limitHd::after {
	background: #70a58b;
}
.rin .charaName, .dir-rin .goodsButton .shop a, 
.dir-rin .goodsButton .shop.fin p, .dir-rin .limitHd::after {
	background: #f19a86;
}
.ikuya .charaName, .dir-ikuya .goodsButton .shop a, 
.dir-ikuya .goodsButton .shop.fin p, .dir-ikuya .limitHd::after {
	background: #ba8cbd;
}
.asahi .charaName, .dir-asahi .goodsButton .shop a, 
.dir-asahi .goodsButton .shop.fin p, .dir-asahi .limitHd::after {
	background: #f8c170;
}
.kisumi .charaName, .dir-kisumi .goodsButton .shop a, 
.dir-kisumi .goodsButton .shop.fin p, .dir-kisumi .limitHd::after {
	background: #f6c8dd;
}
/*トップ-予約情報枠・ラインナップ枠、キャラページ-商品画像枠・商品値段リンク枠、イベント-店舗限定商品取扱店舗リンク枠*/
.reservNoticeBox.haruka a, .lineup .haruka.person a, .dir-haruka .goodsImage, 
.dir-haruka .goodsButton .price, .dir-haruka .goodsButton .shop a, 
.dir-haruka .goodsButton .shop.fin p, .eventLimitList .haruka a {
	border-color: #85b1df;
}
.reservNoticeBox.nagisa a, .lineup .nagisa.person a, .dir-nagisa .goodsImage, 
.dir-nagisa .goodsButton .price, .dir-nagisa .goodsButton .shop a, 
.dir-nagisa .goodsButton .shop.fin p, .eventLimitList .nagisa a {
	border-color: #fcd13e;
}
.reservNoticeBox.natsuya a, .lineup .natsuya.person a, .dir-natsuya .goodsImage, 
.dir-natsuya .goodsButton .price, .dir-natsuya .goodsButton .shop a, 
.dir-natsuya .goodsButton .shop.fin p, .eventLimitList .natsuya a {
	border-color: #eae600;
}
.reservNoticeBox.nao a, .lineup .nao.person a, .dir-nao .goodsImage, 
.dir-nao .goodsButton .price, .dir-nao .goodsButton .shop a, 
.dir-nao .goodsButton .shop.fin p, .eventLimitList .nao a {
	border-color: #c6d8ef;
}
.reservNoticeBox.sosuke a, .lineup .sosuke.person a, .dir-sosuke .goodsImage, 
.dir-sosuke .goodsButton .price, .dir-sosuke .goodsButton .shop a, 
.dir-sosuke .goodsButton .shop.fin p, .dir-sosuke .limitHd::after, .eventLimitList .sosuke a {
	border-color: #82cbd1;
}
.reservNoticeBox.makoto a, .lineup .makoto.person a, .dir-makoto .goodsImage, 
.dir-makoto .goodsButton .price, .dir-makoto .goodsButton .shop a, 
.dir-makoto .goodsButton .shop.fin p, .dir-makoto .limitHd::after, .eventLimitList .makoto a {
	border-color: #b2d246;
}
.reservNoticeBox.momotaro a, .lineup .momotaro.person a, .dir-momotaro .goodsImage, 
.dir-momotaro .goodsButton .price, .dir-momotaro .goodsButton .shop a, 
.dir-momotaro .goodsButton .shop.fin p, .dir-momotaro .limitHd::after, .eventLimitList .momotaro a {
	border-color: #f5ad54;
}
.reservNoticeBox.rei a, .lineup .rei.person a, .dir-rei .goodsImage, 
.dir-rei .goodsButton .price, .dir-rei .goodsButton .shop a, 
.dir-rei .goodsButton .shop.fin p, .dir-rei .limitHd::after, .eventLimitList .rei a {
	border-color: #8a9ace;
}
.reservNoticeBox.aiichiro a, .lineup .aiichiro.person a, .dir-aiichiro .goodsImage, 
.dir-aiichiro .goodsButton .price, .dir-aiichiro .goodsButton .shop a, 
.dir-aiichiro .goodsButton .shop.fin p, .dir-aiichiro .limitHd::after, .eventLimitList .aiichiro a {
	border-color: #bae2f8;
}
.reservNoticeBox.hiyori a, .lineup .hiyori.person a, .dir-hiyori .goodsImage, 
.dir-hiyori .goodsButton .price, .dir-hiyori .goodsButton .shop a, 
.dir-hiyori .goodsButton .shop.fin p, .dir-hiyori .limitHd::after, .eventLimitList .hiyori a {
	border-color: #70a58b;
}
.reservNoticeBox.rin a, .lineup .rin.person a, .dir-rin .goodsImage, 
.dir-rin .goodsButton .price, .dir-rin .goodsButton .shop a, 
.dir-rin .goodsButton .shop.fin p, .dir-rin .limitHd::after, .eventLimitList .rin a {
	border-color: #f19a86;
}
.reservNoticeBox.ikuya a, .lineup .ikuya.person a, .dir-ikuya .goodsImage, 
.dir-ikuya .goodsButton .price, .dir-ikuya .goodsButton .shop a, 
.dir-ikuya .goodsButton .shop.fin p, .dir-ikuya .limitHd::after, .eventLimitList .ikuya a {
	border-color: #ba8cbd;
}
.reservNoticeBox.asahi a, .lineup .asahi.person a, .dir-asahi .goodsImage, 
.dir-asahi .goodsButton .price, .dir-asahi .goodsButton .shop a, 
.dir-asahi .goodsButton .shop.fin p, .dir-asahi .limitHd::after, .eventLimitList .asahi a {
	border-color: #f8c170;
}
.reservNoticeBox.kisumi a, .lineup .kisumi.person a, .dir-kisumi .goodsImage, 
.dir-kisumi .goodsButton .price, .dir-kisumi .goodsButton .shop a, 
.dir-kisumi .goodsButton .shop.fin p, .dir-kisumi .limitHd::after, .eventLimitList .kisumi a {
	border-color: #f6c8dd;
}
/*トップ-ラインナップ文字背景*/
.lineup .haruka.person .reserv1, .lineup .haruka.person .reserv2 {
	background: #6e8edf;
}
.lineup .nagisa.person .reserv1, .lineup .nagisa.person .reserv2 {
	background: #f3b716;
}
.lineup .natsuya.person .reserv1, .lineup .natsuya.person .reserv2 {
	background: #cdda00;
}
.lineup .nao.person .reserv1, .lineup .nao.person .reserv2 {
	background: #95c0ef;
}
.lineup .sosuke.person .reserv1, .lineup .sosuke.person .reserv2 {
	background: #70b9a1;
}
.lineup .makoto.person .reserv1, .lineup .makoto.person .reserv2 {
	background: #96c853;
}
.lineup .momotaro.person .reserv1, .lineup .momotaro.person .reserv2 {
	background: #e78a3c;
}
.lineup .rei.person .reserv1, .lineup .rei.person .reserv2 {
	background: #6c7db7;
}
.lineup .aiichiro.person .reserv1, .lineup .aiichiro.person .reserv2 {
	background: #a1c3e9;
}
.lineup .hiyori.person .reserv1, .lineup .hiyori.person .reserv2 {
	background: #4f846f;
}
.lineup .rin.person .reserv1, .lineup .rin.person .reserv2 {
	background: #f19a86;
}
.lineup .ikuya.person .reserv1, .lineup .ikuya.person .reserv2 {
	background: #a76dad;
}
.lineup .asahi.person .reserv1, .lineup .asahi.person .reserv2 {
	background: #fba654;
}
.lineup .kisumi.person .reserv1, .lineup .kisumi.person .reserv2 {
	background: #f6b0a4;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Media Screen     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
@media screen and (max-width:980px) {
	/*** slider ***/
	.slider a .mainImages {
		transition: none;
	}
	.slider a:hover .mainImages {
		transition: none;
		-webkit-transform: none; transform: none;
	}
	.slider-control {
		text-align: center;
		padding: 0 0 1%;
		top: 89%;
		bottom: auto;
	}
	.slider-btn li {
		width: 20px;
		margin: 0 4px;
	}
	
	/*** column ***/
	.column-wrap {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.column-wrap::after {
		background-size: 10% auto;
	}
	.column-left-box {
		position: relative;
		width: 100%;
		height: 100%;
		left: 0;
		margin-top: 40px;
	}
	.column-right-box {
		position: relative;
		width: 100%;
		left: 0;
		margin-top: 0;
	}
	.column-right-gap {
		margin: 0;
	}

/*          SP          */
@media screen and (max-width:768px) {
/*  
font-size設定
PC      SP
1.0rem->2.2vw
1.4rem->2.6vw
+1.2
  */
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          Site Contents          */
	#siteWrap {
		min-width: unset;
	}
	
	/*          Scroll Contents          */
	.titleLogo {
		width: 92%;
		max-width: 700px;
		padding: 25px 0 0;
	}
	.hd {
		font-size: 28px;
	}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Header Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	.headerBox {
		width: 92%;
		height: 40px;
		padding: 0;
	}
	.headerLogo {
		width: 86px;
	}
/*Navigation Button*/
	.navigationBtn {
		width: 10vw;
		height: 9vw;
	}
	.naviBtn span {
		height: 0.5vw;
	}
	.show .naviBtn .naviBtn1 {
		-webkit-transform: translateY(1.5vw) rotate(-45deg);
		        transform: translateY(1.5vw) rotate(-45deg);
	}
	.show .naviBtn .naviBtn3 {
		-webkit-transform: translateY(-1.5vw) rotate(45deg);
		        transform: translateY(-1.5vw) rotate(45deg);
	}
/*Navigation*/
	.navigationWrap {
		width: 100%;
	}
	.navigationList {
		margin: 40px 0 0;
	}
	.naviName {
		padding: 7px 20px;
		font-size: 20px;
	}
	.charaName {
		padding: 7px;
		font-size: 16px;
	}
	.charaName .icon-arrowr {
		font-size: 22px;
	}
	
	
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	/*pagetop*/
	.pagetop a {
		right: 15px;
		width: 37.5px;
		height: 37.5px;
		background-size: 37.5px;
	}
	
	/*social*/
	.socialList {
		width: 150px;
		padding: 60px 0 0;
	}
	.socialList>li>a {
		font-size: 2.5rem;
		padding: 2.5px;
	}

	
	/*banner*/
	.bannerListBox {
		margin: 15px 0 0;
		padding: 15px 0;
	}
	.bannerList {
		display: -webkit-flex; display: flex;
		-webkit-justify-content: center; justify-content: center;
		-webkit-flex-direction: column;flex-direction: column;
		width: 50%;
		max-width: 250px;
	}
	.bannerList li {
		width: auto;
		margin: 10px 0 0;
	}
	.bannerList li:first-child {
		width: auto;
		margin: 0;
	}
	.copyright {
		display: block;
		padding: 10px 0 0;
		font-size: 10px;
	}
	.copyright li:first-child {
		padding: 0;
	}


}