@charset "utf-8";

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          google fonts          */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400&display=swap');

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

/*          Site Contents          */
#siteWrap {
	position: relative;
	width: 100%;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	overflow: hidden;
}
.bg , .bg .img {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: no-repeat center / cover;
	z-index: -2;
}
.bg {
	z-index: -2;
}
h2 {
	text-align: center;
}
h2 img {
	width: 240px;
}
.decoFixed {
	position: fixed;
	bottom: 40px;
	left: 1.5%;
	z-index: 90;
}
.pagetop {
	position: fixed;
	right: 4vw;
	bottom: 40px;
	z-index: 90;
}
.TransBox {
	width: 92%;
	max-width: 1000px;
	padding: 100px 92px 180px;
	margin: auto;
	background: rgba(255, 255, 255, .7);
}
.textGrayBg {
	display: inline-block;
	margin: 0 1.5em 0 0;
	padding: 2px 1.2em;
	color: #FFF;
	background: #646464;
}
.reserText {
	padding: 70px 0 0;
	text-align: center;
	letter-spacing: 5px;
}
.reserText p:nth-child(n + 2) {
	padding: 20px 0 0;
}
.reserText .reser {
	font-size: 26px;
}
.reserText .period {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: center; align-items: center;
	font-size: 20px;
}
.reserText .period .textGrayBg {
	font-size: 12px;
}
.fadeIn {
	opacity: 0;
	transition: 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadeIn.show {
	opacity: 1;
}
.fadeIn.fadeIn2 {
	transform: translateY(15px);
}
.fadeIn.fadeIn2.show {
	transform: translateY(0);
}

/*          キャラごとのCSS          */
/*    七瀬遙    */
.dir-haruka .navigationBtn, .dir-haruka .naviDeco, .dir-haruka .decoFixed, .dir-haruka .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(44, 0, 73,.3));
}
.haruka .indivTextColor, .haruka.indivTextColor {
	color: #376dc5;
}
.dir-haruka .bg::after {
	background: linear-gradient(-45deg, rgb(179 199 233 / 0.5) 0%,rgba(55,109,197,0.8) 100%);
}
.haruka .goodsList .info .button a, .haruka .goodsList .info .button.fin p {
	color: #376dc5;
	border-color: #376dc5;
}
.haruka .goodsList .info .button a>span {
	background: #376dc5;
}
/*    橘真琴    */
.dir-makoto .navigationBtn, .dir-makoto .naviDeco, .dir-makoto .decoFixed, .dir-makoto .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(120, 180, 110,0.7));
}
.makoto .indivTextColor, .makoto.indivTextColor {
	color: #78b46e;
}
.dir-makoto .bg::after {
	background: linear-gradient(-45deg, rgb(209 255 174 / 50%) 0%,rgb(177 214 171 / 80%) 100%);
}
.makoto .goodsList .info .button a, .makoto .goodsList .info .button.fin p {
	color: #78b46e;
	border-color: #78b46e;
}
.makoto .goodsList .info .button a>span {
	background: #78b46e;
}
/*    葉月渚    */
.dir-nagisa .navigationBtn, .dir-nagisa .naviDeco, .dir-nagisa .decoFixed, .dir-nagisa .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(183, 140, 44,0.7));
}
.nagisa .indivTextColor, .nagisa.indivTextColor {
	color: #FFC932;
}
.dir-nagisa .bg::after {
	background: linear-gradient(-45deg, rgb(255 240 153 / 50%) 0%,rgb(253 238 149 / 80%) 100%);
}
.nagisa .goodsList .info .button a, .nagisa .goodsList .info .button.fin p {
	color: #FFC932;
	border-color: #FFC932;
}
.nagisa .goodsList .info .button a>span {
	background: #FFC932;
}
/*    竜ヶ崎怜    */
.dir-rei .navigationBtn, .dir-rei .naviDeco, .dir-rei .decoFixed, .dir-rei .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(140, 129, 201,0.7));
}
.rei .indivTextColor, .rei.indivTextColor {
	color: #7869B4;
}
.dir-rei .bg::after {
	background: linear-gradient(-45deg, rgb(255 255 255 / 50%) 0%,rgb(190 181 230 / 80%) 100%);
}
.rei .goodsList .info .button a, .rei .goodsList .info .button.fin p {
	color: #7869B4;
	border-color: #7869B4;
}
.rei .goodsList .info .button a>span {
	background: #7869B4;
}
/*    渚怜    */
.nagisaRei .indivTextColor {
	color: #FFC932;
}
.nagisaRei .indivTextColor2 {
	color: #7869B4;
}
/*    似鳥愛一郎    */
.dir-aiichiro .navigationBtn, .dir-aiichiro .naviDeco, .dir-aiichiro .decoFixed, .dir-aiichiro .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(0, 89, 197,.3));
}
.aiichiro .indivTextColor, .aiichiro.indivTextColor {
	color: #84BAE5;
}
.dir-aiichiro .bg::after {
	background: linear-gradient(-45deg, rgb(199 230 255 / 70%) 0%,rgb(232 246 255 / 0.8) 100%);
}
.aiichiro .goodsList .info .button a, .aiichiro .goodsList .info .button.fin p {
	color: #84BAE5;
	border-color: #84BAE5;
}
.aiichiro .goodsList .info .button a>span {
	background: #84BAE5;
}
/*    御子柴百太郎    */
.dir-momotaro .navigationBtn, .dir-momotaro .naviDeco, .dir-momotaro .decoFixed, .dir-momotaro .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(242, 132, 73,0.7));
}
.momotaro .indivTextColor, .momotaro.indivTextColor {
	color: #D36B32;
}
.dir-momotaro .bg::after {
	background: linear-gradient(-45deg, rgb(255 212 171 / 0.5) 0%,rgb(255 212 171 / 0.8) 100%);
}
.momotaro .goodsList .info .button a, .momotaro .goodsList .info .button.fin p {
	color: #D36B32;
	border-color: #D36B32;
}
.momotaro .goodsList .info .button a>span {
	background: #D36B32;
}
/*    愛一郎百太郎    */
.aiMomo .indivTextColor {
	color: #84BAE5;
}
.aiMomo .indivTextColor2 {
	color: #D36B32;
}
/*    山崎宗介    */
.dir-sosuke .navigationBtn, .dir-sosuke .naviDeco, .dir-sosuke .decoFixed, .dir-sosuke .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(63, 132, 117,.5));
}
.sosuke .indivTextColor, .sosuke.indivTextColor {
	color: #78AFA3;
}
.dir-sosuke .bg::after {
	background: linear-gradient(-45deg, rgb(197 253 233 / 50%) 0%,rgb(183 230 216 / 80%) 100%);
}
.sosuke .goodsList .info .button a, .sosuke .goodsList .info .button.fin p {
	color: #78AFA3;
	border-color: #78AFA3;
}
.sosuke .goodsList .info .button a>span {
	background: #78AFA3;
}
/*    松岡 凛    */
.dir-rin .navigationBtn, .dir-rin .naviDeco, .dir-rin .decoFixed, .dir-rin .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(204, 82, 88,0.7));
}
.rin .indivTextColor, .rin.indivTextColor {
	color: #CC5258;
}
.dir-rin .bg::after {
	background: linear-gradient(-45deg, rgb(226 187 177 / 70%) 0%,rgb(230 182 141 / 50%) 100%);
}
.rin .goodsList .info .button a, .rin .goodsList .info .button.fin p {
	color: #CC5258;
	border-color: #CC5258;
}
.rin .goodsList .info .button a>span {
	background: #CC5258;
}
/*    桐嶋郁弥   */
.dir-ikuya .navigationBtn, .dir-ikuya .naviDeco, .dir-ikuya .decoFixed, .dir-ikuya .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(90, 96, 115,0.7));
}
.ikuya .indivTextColor, .ikuya.indivTextColor {
	color: #965a91;
}
.dir-ikuya .bg::after {
	background: linear-gradient(-45deg
, rgb(241 239 239 / 60%) 0%,rgb(166 160 178 / 80%) 100%);
}
.ikuya .goodsList .info .button a, .ikuya .goodsList .info .button.fin p {
	color: #965a91;
	border-color: #965a91;
}
.ikuya .goodsList .info .button a>span {
	background: #965a91;
}
/*    遠野日和    */
.dir-hiyori .navigationBtn, .dir-hiyori .naviDeco, .dir-hiyori .decoFixed, .dir-hiyori .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(64, 99, 96,.5));
}
.hiyori .indivTextColor, .hiyori.indivTextColor {
	color: #517e61;
}
.dir-hiyori .bg::after {
	background: linear-gradient(-45deg, rgb(161 215 168 / 60%) 0%,rgb(132 190 167 / 80%) 100%);
}
.hiyori .goodsList .info .button a, .hiyori .goodsList .info .button.fin p {
	color: #517e61;
	border-color: #517e61;
}
.hiyori .goodsList .info .button a>span {
	background: #517e61;
}
/*    郁弥 日和    */
.ikuHiyo .indivTextColor {
	color: #965a91;
}
.ikuHiyo .indivTextColor2 {
	color: #517e61;
}
/*    椎名 旭   */
.dir-asahi .navigationBtn, .dir-asahi .naviDeco, .dir-asahi .decoFixed, .dir-asahi .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(244, 150, 0,0.7));
}
.asahi .indivTextColor, .asahi.indivTextColor {
	color: #FFA432;
}
.dir-asahi .bg::after {
	background: linear-gradient(-45deg, rgb(247 208 128 / 80%) 0%,rgb(249 219 136 / 60%) 100%);
}
.asahi .goodsList .info .button a, .asahi .goodsList .info .button.fin p {
	color: #FFA432;
	border-color: #FFA432;
}
.asahi .goodsList .info .button a>span {
	background: #FFA432;
}
/*    鴫野貴澄    */
.dir-kisumi .navigationBtn, .dir-kisumi .naviDeco, .dir-kisumi .decoFixed, .dir-kisumi .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(244, 144, 183,0.7));
}
.kisumi .indivTextColor, .kisumi.indivTextColor {
	color: #EB96A2;
}
.dir-kisumi .bg::after {
	background: linear-gradient(-45deg, rgb(251 231 231 / 80%) 0%,rgb(216 196 201 / 70%) 100%);
}
.kisumi .goodsList .info .button a, .kisumi .goodsList .info .button.fin p {
	color: #EB96A2;
	border-color: #EB96A2;
}
.kisumi .goodsList .info .button a>span {
	background: #EB96A2;
}
/*    旭 貴澄    */
.AsaKisu .indivTextColor {
	color: #FFA432;
}
.AsaKisu .indivTextColor2 {
	color: #EB96A2;
}

/*    桐嶋夏也    */
.dir-natsuya .navigationBtn, .dir-natsuya .naviDeco, .dir-natsuya .decoFixed, .dir-natsuya .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(149, 165, 0,0.7));
}
.natsuya .indivTextColor, .natsuya.indivTextColor {
	color: #C4D427;
}
.dir-natsuya .bg::after {
	background: linear-gradient(-45deg, rgb(242 251 154 / 70%) 0%,rgb(235 245 133 / 80%) 100%);
}
.natsuya .goodsList .info .button a, .natsuya .goodsList .info .button.fin p {
	color: #C4D427;
	border-color: #C4D427;
}
.natsuya .goodsList .info .button a>span {
	background: #C4D427;
}

/*    芹沢 尚    */
.dir-nao .navigationBtn, .dir-nao .naviDeco, .dir-nao .decoFixed, .dir-nao .pagetop {
	filter: drop-shadow(0px 0px 2px rgba(25, 79, 109,.3));
}
.nao .indivTextColor, .nao.indivTextColor {
	color: #87A4C3;
}
.dir-nao .bg::after {
	background: linear-gradient(-45deg, rgb(226 239 253 / 80%) 0%,rgb(144 183 218 / 70%) 100%);
}
.nao .goodsList .info .button a, .nao .goodsList .info .button.fin p {
	color: #87A4C3;
	border-color: #87A4C3;
}
.nao .goodsList .info .button a>span {
	background: #87A4C3;
}

/*    夏也・尚    */
.natsuNao .indivTextColor {
	color: #C4D427;
}
.natsuNao .indivTextColor2 {
	color: #87A4C3;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Header Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*Navigation Button*/
.navigationBtnBox {
	position: fixed;
	top: 3vw;
	right: 4vw;
	z-index: 100;
}
.navigationBtn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid #FFF;
	cursor: pointer;
	transform: translateY(50%);
	transition: .8s cubic-bezier(0.33, 1, 0.68, 1);
}
.naviBtn {
	position: absolute;
	display: -webkit-flex; display: flex;
	-webkit-flex-direction: column; flex-direction: column;
	-webkit-justify-content: space-between; justify-content: space-between;
	-webkit-align-content: space-between; align-content: space-between;
	width: 23px;
	height: 16px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.naviBtn span {
	width: 100%;
	height: 2px;
	background-color: #FFF;
	border-radius: 10px;
	transition: .8s cubic-bezier(0.33, 1, 0.68, 1);
}
.naviDeco {
	position: absolute;
	top: 80px;
}
/*Navigation Button  --  show*/
.navigationBtn.show .naviBtn .naviBtn1 {
	transform: translateY(7px) rotate(-45deg);
}
.navigationBtn.show .naviBtn .naviBtn2 {
	height: 0;
	opacity: 0;
}
.navigationBtn.show .naviBtn .naviBtn3 {
	transform: translateY(-7px) rotate(45deg);
}
/*Navigation*/
.navigationWrap {
	position: absolute;
	top: -7px;
	right: 80px;
	width: 480px;
	padding: 40px 50px 60px;
	background: #646464;
	border: 2px solid #FFF;
	z-index: 99;
	transition: .8s cubic-bezier(0.33, 1, 0.68, 1);
	opacity: 0;
	visibility: hidden;
}
.navigationWrap:after, .navigationWrap:before {
	left: 100%;
	top: 9%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.navigationWrap:after {
	border-color: rgba(100, 100, 100, 0);
	border-left-color: #646464;
	border-width: 20px;
	margin-top: -20px;
}
.navigationWrap:before {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #FFF;
	border-width: 23px;
	margin-top: -23px;
}
.navigationWrap .heading {
	text-align: center;
}
.navigationWrap .heading img {
	width: 140px;
}
.navigationList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: space-between; justify-content: space-between;
	-webkit-flex-wrap: wrap;flex-wrap: wrap;
	padding: 40px 0 0;
}
.navigationList li:nth-child(n + 3) {
	padding: 35px 0 0;
}
.navigationList li a {
	transition: .8s cubic-bezier(0.33, 1, 0.68, 1);
}
.navigationList li a:hover {
	filter: brightness(130%);
}

/*Navigation  --  show*/
.show.navigationWrap {
	opacity: 1;
	visibility: visible;
}
.naviClose {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #FFF;
	transition: .8s cubic-bezier(0.33, 1, 0.68, 1);
	z-index: 90;
	visibility: hidden;
	opacity: 0;
}
.naviClose.show {
	visibility: visible;
	opacity: .35;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.footerContent h2 {
	padding: 110px 0 0;
}
/*social*/
.socialList, .logolist, .linkList {
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
}
.socialList {
	padding: 55px 0 0;
}
.socialList li {
	max-width: 54px;
}
.socialList .fbc {
	margin: 0 75px;
}
.logolist {
	-webkit-align-items: center; align-items: center;
	padding: 60px 0 0;
}
.logolist li:first-child {
	padding: 0 55px 0 0;
}
.linkList {
	padding: 60px 0 0;
	font-size: 16px;
}
.linkList .one {
	padding: 0 1.8em 0 0;
}
.linkList .two {
	position: relative;
	padding: 0 1.8em;
}
.linkList .three {
	padding: 0 0 0 1.8em;
}
.linkList .two::before, .linkList .two::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 1px;
	height: 70%;
	background: #5f5f5f;
	transform: translateY(-50%);
}
.linkList .two::before {
	left: 0;
}
.linkList .two::after {
	right: 0;
}
.linkList li a {
	color: #333333;
}
.copyright {
	padding: 100px 0 60px;
	font-size: 12px;
	text-align: center;
	color: #333333;
}






/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     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          */
	.bg , .bg .img {
		background-image: url(/shop/dayoff/img/top/topBg_sp.jpg);
	}
	.TransBox {
		max-width: 600px;
		padding: 65px 15px 90px;
	}
	h2 img {
		width: 40vw;
		max-width: 240px;
	}
	.pagetop {
		width: 9%;
		bottom: 4vw;
	}
		.textGrayBg {
		margin: 0 1em 0 0;
		padding: 2px .8em;
	}
	.reserText {
		padding: 35px 0 0;
		letter-spacing: 3px;
	}
	.reserText .reser {
		font-size: 18px;
	}
	.reserText .period {
		-webkit-flex-direction: column; flex-direction: column;
		font-size: 14px;
	}
	.reserText .period .textGrayBg {
		margin: 0 0 5px;
		font-size: 11px;
	}
	.fadeIn {
		transform: translateY(15px);
	}
	.fadeIn.show {
		transform: translateY(0);
	}
	.fadeIn.fadeIn2 {
		transform: translateY(8px);
	}
	
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Header Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*Navigation Button*/
	.navigationBtnBox {
		top: 6vw;
		right: 3.5vw;
	}
	.navigationBtn {
		width: 35px;
		height: 35px;
		border-width: 1px;
		transform: translateY(0);
	}
	.naviBtn {
		width: 16px;
		height: 12px;
	}
	.naviBtn span {
		height: 1px;
	}
/*Navigation Button  --  show*/
	.navigationBtn.show .naviBtn .naviBtn1 {
		transform: translateY(6px) rotate(-45deg);
	}
	.navigationBtn.show .naviBtn .naviBtn3 {
		transform: translateY(-5px) rotate(45deg);
	}
/*Navigation*/
	.navigationWrap {
		top: -13px;
		right: 55px;
		width: 68vw;
		max-width: 350px;
		padding: 30px 20px 40px;
	}
	.navigationWrap:after, .navigationWrap:before {
		top: 9%;
	}
	.navigationWrap:after {
		border-width: 10px;
		margin-top: -10px;
	}
	.navigationWrap:before {
		border-width: 13px;
		margin-top: -13px;
	}
	.navigationWrap .heading img {
		width: 50%;
		max-width: 140px;
	}
	.navigationList {
		-webkit-justify-content: space-between; justify-content: space-between;
		padding: 20px 0 0;
	}
	.navigationList li {
		width: 46%;
	}
	.navigationList li:nth-child(n + 3) {
		padding: 20px 0 0;
	}

	/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Footer Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	.footerContent h2 {
		padding: 80px 0 0;
	}
	.socialList {
		padding: 30px 0 0;
	}
	.socialList li {
		width: 10%;
	}
	.socialList .fbc {
		margin: 0 35px;
	}
	.logolist {
		padding: 30px 0 0;
	}
	.logolist li {
		width: 30%;
	}
	.logolist li:first-child {
		padding: 0 30px 0 0;
	}
	.linkList {
		width: 92%;
		max-width: 550px;
		margin: auto;
		padding: 30px 0 0;
		font-size: 10px;
		word-break: break-all;
	}
	.linkList .one {
		width: 30%;
		padding: 0 1em 0 0;
	}
	.linkList .two {
		width: 40%;
		padding: 0 1em;
	}
	.linkList .three {
		width: 30%;
		padding: 0 0 0 1em;
	}
	.linkList .two::before, .linkList .two::after {
		height: 100%;
		background: #5f5f5f;
	}
	.copyright {
		padding: 60px 0 60px;
		font-size: 9px;
	}

	
}

/*          PC          */
@media screen and (min-width:769px) {
/*          Site Contents          */
	#siteWrap {
		min-width: 1200px;
	}
	.bg , .bg .img {
		background-image: url(/shop/dayoff/img/top/topBg.jpg);
	}
	
	
	
}