@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;*/
}
#siteWrap::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("/shop/bd2022/free/img/commonBg.png");
	z-index: -1;
}
.column-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: auto;
}

/*          font          */
.Sa {
	font-family: 'Sacramento';
}


/*          スクロールアニメーション          */
.fadeIn {
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	-webkit-transition: .8s ease-out;
	transition: .8s ease-out;
}
.fadeIn.show {
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}


/*          Slider Contents          */






/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Header Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.headerWrap {
	z-index: 102;
	width: 100%;
}

.naviClose {
	visibility: hidden;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
	opacity: 0;
	background: rgba(218,214,216,.6);
}
.naviClose.show {
	visibility: visible;
	opacity: 1;
}
.headerBox {
	display: -webkit-flex;display: flex;
	position: absolute;
	top: 20px;
	right: 30px;
	position: fixed;
	z-index: 104;
}
.headerLogo {
	width: 100%;
	text-align: center;
}
.headerLogo img {
	width: 200px;
}
.navigationList {
}
.headerLogo a {
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.headerLogo a:hover {
	opacity: .8;
}

/*Navigation Button*/
.navigationBtn {
	position: relative;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	z-index: 103;
	cursor: pointer;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
	border: solid 2px #594D4E;
	border-radius: 100%;
	background: #fff;
}
.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: 30px;
	height: 19px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.naviBtn span {
	width: 100%;
	height: 3px;
	border-radius: 6px;
	background-color: #594D4E;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
/*Navigation Button  --  show*/
.show.navigationBtn {
}
.show .naviBtn .naviBtn1 {
	-webkit-transform: translateY(9px) rotate(-45deg);
	        transform: translateY(9px) rotate(-45deg);
}
.show .naviBtn .naviBtn2 {
	opacity: 0;
}
.show .naviBtn .naviBtn3 {
	-webkit-transform: translateY(-8px) rotate(45deg);
	        transform: translateY(-8px) rotate(45deg);
}
/*Navigation*/


.navigationList {
	position: fixed;
	height: 100%;
	top: 0;
	right: 0;
	overflow: auto;
	z-index: 101;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
	background: #FFF;
}
.navigationList.show {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.navigationListBox {
	padding: 90px 0 30px;
	font-size: 2.3rem;
	width: 430px;
	margin: 0 0 0 auto;
}
.navigationListBox .top {
	border-top: 1px solid #6d5d4b;
}

.navigationList a {
	display: block;
	-webkit-transition: .3s ease-out; transition: .3s ease-out;
}
.navigationList a:hover {
	text-decoration: none;
	opacity: .6;
}
.naviName {
	padding: 10px 30px;
	font-size: 3.5rem;
	letter-spacing: 2px;
	cursor: pointer;
	text-align: center;
	border-bottom: 1px solid #6d5d4b;
}
.naviLuHd .naviName {
	border-bottom: none;
	cursor: auto;
}
.naviLineup {
	border-bottom: 1px solid #6d5d4b;
}
.gallery .naviName {
	border-bottom: none;
}
.eventMenu {
	line-height: 30px;
}
.eventoNumber {
	font-size: 2.0rem;
	display: block;
	line-height: 25px;
}
.navigationListBox .name {
	font-weight: bold;
}
.naviLineup {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-bottom: 10px;
}

.naviLineup li {
	width: 50%;
	position: relative;
	text-align: center;
}
.naviLuHd {
	background-color: #d9ccc8;
	background-image: linear-gradient(-90deg, #d2c3be 50%, transparent 50%);
	background-size: 30px;
}
.naviLineup .asahi a:before, .naviLineup .kisumi a:before {
	width: 0;
	height: 0;
}
.navsvg {
	width: 75%;
}
.naviLineup .b {
	fill: #fff;
}
.naviLineup .before .b {
	fill: #8a8a8a;
}

.charaName {
	padding: 15px 7px;
	font-size: 23px;
}
.charaName .icon-arrowr {
	font-size: 25px;
}
.before {
	pointer-events: none;
}
.event_before {
	pointer-events: none;
}
.event_before .naviName {
	background: #e0d2c2;
	color: #FFF;
}
.before .charaName {
	
}
.naviTop {
	border-top: 1px solid #a27e0d;
}
.naviTop li {
	border-bottom: 1px solid #a27e0d;
}

.naviEvent li {
	border-bottom: 1px solid #a27e0d;
}
/*Navigation  --  show*/
.show.navigationWrap {
	-webkit-transform: translateX(0%); transform: translateX(0%);
}
.event.before a {
	color: #8a8a8a;
}
.navigationListBox .before a .naviName {
	color: #dbdbdb;
}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*pagetop*/
.pagetop {
	background: #FFF;
}
.pagetop a {
	position: fixed;
	bottom: -100px;
	right: 30px;
	width: 60px;
	height: 76px;
	background: url(/shop/bd2022/free/img/link/pagetop.png) no-repeat;
	background-size: cover;
	z-index: 80;
}
.pagetop.show a:hover {
	opacity: .8;
	transform: translateY(-10px);
}
.pagetop.show a {
	bottom: 30px;
}
.pagetop.start a {
	top: 30%;
	-webkit-transition: 1.2s ease-in;
	transition: 1.2s ease-in;
}
.pagetop.opacity a {
	opacity: 0;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
}
.pagetop.end {
	-webkit-transition: 0s;
	transition: 0s;
	display: none;
}
/*social*/
.socialList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: space-between; justify-content: space-between;
	margin: auto;
	padding: 50px 0;
	width: 260px;
}
.socialList>li {
	position: relative;
	background: #978683;
	color: #978683;
}
.socialList>li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 2em solid;
	border-right: 2em solid;
	border-bottom: 1em solid transparent;
}

.socialList>li>a {
	display: block;
	font-size: 4rem;
	padding: 3px 8px;
}

.socialList>li>a:hover {
	text-decoration: none;
}
.icon-tw, .icon-fb, .icon-fbc, .icon-li {color: #fff;}

/*banner*/
.bannerListBox {
	margin: 30px 0 0;
	padding: 30px 0 50px;
}
.bannerList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	width: 100%;
	margin: auto;
}
.bannerList li {
	width: 45%;
	margin: 0 15px;
}
.copyright {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center;justify-content: center;
	padding: 50px 0 0;
	text-align: center;
	font-size: 1.4rem;
}
.copyright li:first-child {
	padding: 0 20px 0 0;
}
.worksLogo {
	width: 200px;
	margin: auto;
}
.footerContent {
	position: relative;
	z-index: 2;
}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     キャラ別色指定     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*      キャラクターカラー      */
.haruka .clo01 {color:#006ab6;}.haruka .clo02 {color:#2990d0;}.haruka .clo03 {color:#9ad0f1;}
.nagisa .clo01 {color:#dea700;}.nagisa .clo02 {color:#ffc700;}.nagisa .clo03 {color:#ffe386;}
.natsuya .clo01 {color:#95a924;}.natsuya .clo02 {color:#dadc00;}.natsuya .clo03 {color:#e3ea94;}
.nao .clo01 {color:#51779e;}.nao .clo02 {color:#6f9cd3;}.nao .clo03 {color:#afcbeb;}
.sosuke .clo01 {color:#009091;}.sosuke .clo02 {color:#47bcc6;}.sosuke .clo03 {color:#abdad6;}
.makoto .clo01 {color:#1a8d3b;}.makoto .clo02 {color:#6ab24f;}.makoto .clo03 {color:#b6d99c;}
.rei .clo01 {color:#464892;}.rei .clo02 {color:#6c69ae;}.rei .clo03 {color:#a5a3d0;}
.momotaro .clo01 {color:#eb612f;}.momotaro .clo02 {color:#f18c45;}.momotaro .clo03 {color:#f7be96;}
.aiichiro .clo01 {color:#00afec;}.aiichiro .clo02 {color:#81cff4;}.aiichiro .clo03 {color:#c7e8fa;}
.hiyori .clo01 {color:#2e6849;}.hiyori .clo02 {color:#428d65;}.hiyori .clo03 {color:#99c29c;}
.rin .clo01 {color:#c12b2a;}.rin .clo02 {color:#e9474d;}.rin .clo03 {color:#f29c97;}
.ikuya .clo01 {color:#6c438e;}.ikuya .clo02 {color:#9b72b0;}.ikuya .clo03 {color:#c6add2;}
.asahi .clo01 {color:#d68200;}.asahi .clo02 {color:#f6ad3c;}.asahi .clo03 {color:#fcd697;}
.kisumi .clo01 {color:#e46c9a;}.kisumi .clo02 {color:#f19ec2;}.kisumi .clo03 {color:#f9d3e3;}

/*      キャラクターカラー recsvg      */
.haruka .recsvg .clo01 {fill:#006ab6;}.haruka .recsvg .clo02 {fill:#2990d0;}.haruka .recsvg .clo03 {fill:#9ad0f1;}
.nagisa .recsvg .clo01 {fill:#dea700;}.nagisa .recsvg .clo02 {fill:#ffc700;}.nagisa .recsvg .clo03 {fill:#ffe386;}
.natsuya .recsvg .clo01 {fill:#95a924;}.natsuya .recsvg .clo02 {fill:#dadc00;}.natsuya .recsvg .clo03 {fill:#e3ea94;}
.nao .recsvg .clo01 {fill:#51779e;}.nao .recsvg .clo02 {fill:#6f9cd3;}.nao .recsvg .clo03 {fill:#afcbeb;}
.sosuke .recsvg .clo01 {fill:#009091;}.sosuke .recsvg .clo02 {fill:#47bcc6;}.sosuke .recsvg .clo03 {fill:#abdad6;}
.makoto .recsvg .clo01 {fill:#1a8d3b;}.makoto .recsvg .clo02 {fill:#6ab24f;}.makoto .recsvg .clo03 {fill:#b6d99c;}
.rei .recsvg .clo01 {fill:#464892;}.rei .recsvg .clo02 {fill:#6c69ae;}.rei .recsvg .clo03 {fill:#a5a3d0;}
.momotaro .recsvg .clo01 {fill:#eb612f;}.momotaro .recsvg .clo02 {fill:#f18c45;}.momotaro .recsvg .clo03 {fill:#f7be96;}
.aiichiro .recsvg .clo01 {fill:#00afec;}.aiichiro .recsvg .clo02 {fill:#81cff4;}.aiichiro .recsvg .clo03 {fill:#c7e8fa;}
.hiyori .recsvg .clo01 {fill:#2e6849;}.hiyori .recsvg .clo02 {fill:#428d65;}.hiyori .recsvg .clo03 {fill:#99c29c;}
.rin .recsvg .clo01 {fill:#c12b2a;}.rin .recsvg .clo02 {fill:#e9474d;}.rin .recsvg .clo03 {fill:#f29c97;}
.ikuya .recsvg .clo01 {fill:#6c438e;}.ikuya .recsvg .clo02 {fill:#9b72b0;}.ikuya .recsvg .clo03 {fill:#c6add2;}
.asahi .recsvg .clo01 {fill:#d68200;}.asahi .recsvg .clo02 {fill:#f6ad3c;}.asahi .recsvg .clo03 {fill:#fcd697;}
.kisumi .recsvg .clo01 {fill:#e46c9a;}.kisumi .recsvg .clo02 {fill:#f19ec2;}.kisumi .recsvg .clo03 {fill:#f9d3e3;}

/*      キャラクターカラー goodssvg      */
.haruka .goodsTopBG {fill: rgba(125,194,237,.4);}.haruka .goodsBox {background: rgba(125,194,237,.4);}
.nagisa .goodsTopBG {fill: rgba(255,227,134,.4);}.nagisa .goodsBox {background: rgba(255,227,134,.4);}
.natsuya .goodsTopBG {fill: rgba(227,234,148,.4);}.natsuya .goodsBox {background: rgba(227,234,148,.4);}
.nao .goodsTopBG {fill: rgba(175,203,235,.4);}.nao .goodsBox {background: rgba(175,203,235,.4);}
.sosuke .goodsTopBG {fill: rgba(171,218,214,.4);}.sosuke .goodsBox {background: rgba(171,218,214,.4);}
.makoto .goodsTopBG {fill: rgba(182,217,156,.4);}.makoto .goodsBox {background: rgba(182,217,156,.4);}
.rei .goodsTopBG {fill: rgba(165,163,208,.4);}.rei .goodsBox {background: rgba(165,163,208,.4);}
.momotaro .goodsTopBG {fill: rgba(247,190,150,.4);}.momotaro .goodsBox {background: rgba(247,190,150,.4);}
.aiichiro .goodsTopBG {fill: rgba(199,232,250,.4);}.aiichiro .goodsBox {background: rgba(199,232,250,.4);}
.hiyori .goodsTopBG {fill: rgba(153,194,156,.4);}.hiyori .goodsBox {background: rgba(153,194,156,.4);}
.rin .goodsTopBG {fill: rgba(242,156,151,.4);}.rin .goodsBox {background: rgba(242,156,151,.4);}
.ikuya .goodsTopBG {fill: rgba(198,173,210,.4);}.ikuya .goodsBox {background: rgba(198,173,210,.4);}
.asahi .goodsTopBG {fill: rgba(252,214,151,.4);}.asahi .goodsBox {background: rgba(252,214,151,.4);}
.kisumi .goodsTopBG {fill: rgba(249,211,227,.4);}.kisumi .goodsBox {background: rgba(249,211,227,.4);}


/*      キャラクターカラー hopPr      */
.haruka .shopPrBox {background: #9ad0f1;}
.nagisa .shopPrBox {background: #ffe386;}
.natsuya .shopPrBox {background: #e3ea94;}
.nao .shopPrBox {background: #afcbeb;}
.sosuke .shopPrBox {background: #abdad6;}
.makoto .shopPrBox {background: #b6d99c;}
.rei .shopPrBox {background: #a5a3d0;}
.momotaro .shopPrBox {background: #f7be96;}
.aiichiro .shopPrBox {background: #c7e8fa;}
.hiyori .shopPrBox {background: #99c29c;}
.rin .shopPrBox {background: #f29c97;}
.ikuya .shopPrBox {background: #c6add2;}
.asahi .shopPrBox {background: #fcd697;}
.kisumi .shopPrBox {background: #f9d3e3;}

.haruka .CondlBox a,#haruka .download_button a {background: #2990d0;}
.nagisa .CondlBox a,#nagisa .download_button a {background: #ffc700;}
.natsuya .CondlBox a,#natsuya .download_button a {background: #dadc00;}
.nao .CondlBox a,#nao .download_button a {background: #6f9cd3;}
.sosuke .CondlBox a,#sosuke .download_button a {background: #47bcc6;}
.makoto .CondlBox a,#makoto .download_button a {background: #6ab24f;}
.rei .CondlBox a,#rei .download_button a {background: #6c69ae;}
.momotaro .CondlBox a,#momotaro .download_button a {background: #f18c45;}
.aiichiro .CondlBox a,#aiichiro .download_button a {background: #81cff4;}
.hiyori .CondlBox a,#hiyori .download_button a {background: #428d65;}
.rin .CondlBox a,#rin .download_button a {background: #e9474d;}
.ikuya .CondlBox a,#ikuya .download_button a {background: #9b72b0;}
.asahi .CondlBox a,#asahi .download_button a {background: #f6ad3c;}
.kisumi .CondlBox a,#kisumi .download_button a {background: #f19ec2;}

#haruka.dlcBox img {border-color: #2990d0;}
#nagisa.dlcBox  img {border-color: #ffc700;}
#natsuya.dlcBox img {border-color: #dadc00;}
#nao.dlcBox img {border-color: #6f9cd3;}
#sosuke.dlcBox img {border-color: #47bcc6;}
#makoto.dlcBox img {border-color: #6ab24f;}
#rei.dlcBox img {border-color: #6c69ae;}
#momotaro.dlcBox img {border-color: #f18c45;}
#aiichiro.dlcBox img {border-color: #81cff4;}
#hiyori.dlcBox img {border-color: #428d65;}
#rin.dlcBox img {border-color: #e9474d;}
#ikuya.dlcBox img {border-color: #9b72b0;}
#asahi.dlcBox img {border-color: #f6ad3c;}
#kisumi.dlcBox img {border-color: #f19ec2;}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Media Screen     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          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     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	.headerWrap {
		position: relative;
	}
	.headerWrap:before {
		background-size: 10rem;
	}
	.headerBox {
		width: 40px;
		height: 40px;
		padding: 0;
		top: 10px;
		right: 15px;
	}
	.headerLogo {
		width: 100%;
		text-align: center;
	}
	.headerLogo img {
		width: 100px;
		margin: 10px 0;
}
	.headBox {
	}
	.naviBtn {
		width: 25px;
		height: 15px;
	}
/*Navigation Button*/
	.navigationBtn {
		position: absolute;
		width: 40px;
		height: 40px;
	}
	.naviBtn span {
		height: 3px;
	}
	.show .naviBtn .naviBtn1 {
		-webkit-transform: translateY(6px) rotate(-45deg);
		        transform: translateY(6px) rotate(-45deg);
	}
	.show .naviBtn .naviBtn3 {
		-webkit-transform: translateY(-6px) rotate(45deg);
		        transform: translateY(-6px) rotate(45deg);
	}
/*Navigation*/
	.navigationWrap {
		width: 100%;
		padding: 0;
	}
	.navigationList {
		width: 100%;
	}
	.navigationListBox {
		width: 100%;
		margin: auto;
		padding: 60px 0;
	}
	.show.navigationList {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	.naviName {
		padding: 10px 20px;
		font-size: 20px;
	}
	.eventMenu {
		line-height: 25px;
	}
	.eventoNumber {
		font-size: 1.4rem;
		line-height: 15px;
	}
	.charaName {
		padding: 7px;
		font-size: 16px;
	}
	.charaName .icon-arrowr {
		font-size: 22px;
	}
	.navi_arrowr {
		background-size: 3rem;
	}
	
	.naviLineup {
		position: relative;
		transform: translateX(0);
		margin: auto;
		width: 100%;
		max-width: 500px;
	}
	
	
	
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	/*pagetop*/
	.pagetop a {
		right: 15px;
		width: 40px;
		height: 54px;
		background-size: contain;
	}
	/*social*/
	.socialList {
		width: 70%;
		max-width: 300px;
		padding: 50px 0;
	}
	.worksLogo {
		width: 170px;
	}
	/*banner*/
	.bannerListBox {
		margin: 15px 0 0;
		padding: 25px 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;
	}


}
/*          PC          */
@media screen and (min-width:769px) {
/*          Site Contents          */
	#siteWrap {
		/*min-width: 1200px;*/
	}
	.ctt_w1200 {width: 1200px;margin: auto;}
	

	

	/*メニュー*/
	.naviLuHd {
		position: relative;
	}
	

	
	
}