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

body{
overflow-x: hidden;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


a {
  text-decoration: none;
  transition: 0.3s;
}



p {
  line-height: 1.4;
}

img{
	width: 100%;
}

.pc_only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: block;
  }
}



.logo {
  position: absolute;
  z-index: 2;
  width: 165px;
  left: 10px;
  top: 19px;
}
@media screen and (max-width: 855px) {
  .logo {
    width: 90px;
    top: 20px;
  }
}



/*FV*/

article{
	font-family: "Noto Serif JP", serif;
}


.navy{
	background-color:#FFFFFF;
	padding:3em 10px 2em 10px;
	box-shadow: 0px 11px 15px -10px rgba(0, 0, 0, 0.16);
    position: relative;
	z-index: 10;
}


.timetime-logo{
	max-width:410px;
	margin: 0 auto;
	width: 100%;
	
}


@media screen and (max-width: 768px){
	.navy{
	    padding: 3em 10px 1em 10px;	
	}
	
	
	.timetime-logo{
		    width: 76%;
    		padding-top: 8%;
	}
}


/*******************fv**********************/
article{
	overflow-x: hidden;
}

.fv{
  position:relative;
/*  height:100vh;*/
  background: linear-gradient(180deg,
    rgba(255, 182, 214, 1) 0%,
    rgba(250, 223, 235, 1) 35%,
    rgba(253, 242, 246, 1) 66%,
    rgba(255, 255, 255, 1) 100%);

  overflow:hidden;
  clip-path: inset(0);  /*← これが効く */

}

/* 丸 */
.bubble{
  position:absolute;
  bottom:0;
  border-radius:50%;
  opacity:0.21;
box-shadow: 5px 8px 6px 0px rgba(245, 167, 201, 0.72);	
  pointer-events:none;
  will-change: transform;
  animation: floatUp linear forwards;
	z-index: 0;
}

@keyframes floatUp{
  0%{
    transform: translateY(0) translateX(0) scale(0.9);
    opacity:0;
  }
  10%{
    opacity:0.18;
  }
  100%{
    transform: translateY(-120vh) translateX(var(--x)) scale(1.05);
    opacity:0;
  }
}


#fv{position: relative;}


.fv-bg{
  background: linear-gradient(180deg,
    rgba(255, 182, 214, 1) 0%,
    rgba(250, 223, 235, 1) 35%,
    rgba(253, 242, 246, 1) 66%,
    rgba(255, 255, 255, 1) 100%);		
}



.fv-wrap{
	position: relative;
	margin: 0 auto;

	z-index: 1;
padding-bottom: 1em;
}

.fv-under1,.fv-under2{
	position: absolute;
	z-index: 1;
}


.fv-under1{
	width: 18%;
	left: 0;
	bottom: 0;
}

.fv-under2{
	width: 15%;
	right: 0;
	bottom: 0;
}


.fv-inner{
	max-width: 1100px;
	margin: 0 auto;
	z-index: 1;
	margin-bottom: 12em;
	position: relative;
}


.sakura1,.sakura2,.sakura3{
	position: absolute;
}

.sakura1{
    width: 12%;
    top: 11%;
    right: -4%;
}

.sakura2{
	width: 7%;
    top: 38%;
    left: 2%;
}

.sakura3{
	width: 6%;
    bottom: 32%;
    left: 16%;
}


.main-ttl{
	max-width: 90%;
	margin: 0 auto;
}

.main-img{
	max-width: 50%;
	margin: 0 auto;	
	position: relative;
	margin-top: -3em;
}

.day-img{
	position: absolute;
	width: 42%;
    right: -27%;
    top: -7%;
}





/********wave********/
.wave-line {
  display: block;
  width: 100%;
  height: auto;
	position: absolute;
	bottom: 0;
	line-height: 0;

}

.fv-copy{
    position: relative;
    left: 50%;
    transform: translateY(120%) translateX(-50%);
    text-align: center;
    /* top: -34%; */
    /* margin-top: -10%; */
    line-height: 1.9em;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    color: #9E8900;
    font-weight: 400;
    display: inline-block;
    z-index: 1;
}







/***************con-allWrap****************/

.con-allWrap{
	background-color: #fff;

	position: relative;
}


/*特典ポイント*/


#tokuten{
    margin-top: 5em;
	padding: 0 10px;
	position: relative;
}


.tokuten-title {
	max-width: 300px;
	margin: 0 auto;
	width: 100%;
	margin-top: -3em;
}







.point-wrap{
background-color: #fff;
	max-width: 880px;
	margin: 0 auto;
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	position: relative;
	z-index: 1;
	
	
}


.gold-line{
	border: solid #D2B731 4px;
	border-radius: 10px;
	padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}




.tokuten-kikan{
	text-align: center;
	margin-top: 1em;
}
.tokuten-kikan p{
	text-align: center;
	color: #7A6B1F;
	font-weight: bold;
	font-size: 1.9em;
	padding-bottom: 5px;
	border-bottom: solid 4px #BEA423;
	display: inline-block;
	padding-left: 15px;
	padding-right: 15px;
}




.point-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -1em;
}


.point-bk{
	background-color:#D2B731;
	padding: 5px;
	margin-top: 20px;
}

.point-bk p{
	text-align: center;
	font-size: 1.5em;
	color: #fff;
}

.point-number{
	font-size: 7em;
	color: #D2B731;
	font-weight: bold;
	padding-left: 10px;
}


.point-small{
	font-size: 0.6em;
}

.point-notice{
	font-size: 1em;
	text-align: center;
/*	border-top: solid 1px #404040;*/
	width: 80%;
	margin: 0 auto;
/*	padding-top: 10px;*/
}



.target-brand{
	max-width:570px;
	margin: 0 auto;
	border-top: solid 1.5px #7A6B1F;
	padding-top: 2em;
	margin-top: 4em;
}

.targetBrand-title{
	font-size:1.4em;
	text-align:center;
	padding: 10px;
	background-color: #fff;

	font-weight: bold;
	color:#7A6B1F;
	    display: table;
    margin: 0 auto;
    margin-top: -2.5em;
}

.brand-list{
	display: flex;
	justify-content: space-around;
	max-width: 385px;
	margin: 0 auto;
}


.brand-list li{
	width: 100%;
	max-width: 177px;
	padding: 7px;
}


@media screen and (max-width: 768px){
	.tokuten-title{
		    width: 79%;
    	margin-top: -2em;
	}
	
	.tokuten-kikan p{
		    font-size: 1.5em;
	}
	
	.point-bk p{
		font-size: 0.9em;
	}
	
	.point-number{
		    font-size: 5em;
	}
	
	.point-notice{
		font-size: 0.9em;
	}
	
	.targetBrand-title{
		    font-size: 1.2em;
		    margin-top: -3em;
	}
}









.btn-link{

    max-width: 600px;

    display: block;
    text-align: center;
    margin: 0 auto;
}


.app_btn{
	max-width: 600px;
	margin: 2em auto 0 auto;
background: #EC7B8D;
background: linear-gradient(180deg,rgba(236, 123, 141, 1) 0%, rgba(211, 64, 88, 1) 100%);
	border-radius: 50px;
	padding: 28px 5px;
	box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.33);
	
}

.app_btn p{
	text-align: center;
	font-size: 1.4em;
	color: #fff;
	font-weight: bold;
	position: relative;
 
}


.app_btn p::after{
	  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}


.app_btn p:hover::after{
	right: 10px;
}

.app_btn:hover{
	box-shadow:none;
	 transition: all .3s;
}

@media screen and (max-width: 768px){
	.app_btn p{
		
    font-size: 1em;
	}
	
	.app_btn{
		max-width: 300px;
		    padding: 20px 5px;
	}
	
	.btn-link{
		max-width: 300px;
	}
	
	.app_btn p::after{
		right: 9px;
	}
}



/********toku kazari********/

.toku-ig1,.toku-ig2{
	position: absolute;
}

.toku-ig1{
    width: 16%;
    left: 4%;
    top: 5%;
}

.toku-ig2{
width: 16%;
    right: 3%;
    bottom: 16%;
}




/****************pick up********************/

#pick-con{
	margin-top: 10em;
}


.pickupTll{
	position: relative;
}

.pickupTll::before{
	content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 115%;
  background: #FFD1E2;
  opacity: 0.22;
  clip-path: polygon(0 100%, 0 0, 100% 100%);

}

.pickupTll::after{
	content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 115%;
  background: #FFD1E2;
  opacity: 0.22;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);

}

.pickup-ttl{
    max-width: 30%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.pick-wrap{
background: #FFEDF5;
background: linear-gradient(180deg,rgba(255, 237, 245, 1) 0%, rgba(240, 240, 248, 1) 51%, rgba(205, 248, 255, 1) 100%);

	padding-bottom: 25em;
}



/****************item****************/

.item_container{
	position: relative;
}


.item_inner{
	max-width: 1000px;
	margin: 0 auto;
}


.item-img{
	max-width: 590px;
	margin: 0 auto;
	width: 100%;
}


.item-info{
	max-width: 80%;
	margin: 0 auto;
	
}


.item-logoFlex{
	max-width: 40%;
	display: flex;
	justify-content:flex-start; 
}

.item-logoFlex li{
	padding-right: 5px;
}

.item-name{
	text-align: left;
	font-size: 2em;
	color: #0A0A0A;
	font-weight: bold;
	border-bottom: solid 1.1px #2E2E2E;
	padding-bottom: 0.2em;
	margin-top: 15px;
}

.item-copy{
	text-align: left;
	font-size: 1em;
	color: #0A0A0A;
	font-weight: 400;

	margin-top: 15px;	
}

.base_price{
	text-align: end;
	font-size: 2.1em;
	color: #003364;
	font-weight:bold;

	margin-top: 15px;		
}

.tax_price{
    text-align: end;
    margin: 0 0 0 auto;
    font-size: 2.4em;
    color: #E53232;
    font-weight: bold;
    position: relative;
    margin-top: 1px;
    /* text-align: end; */
    display: table;		
}

.tax_price::before{
content: "";
    background: url(../img/red_arrow.png) no-repeat;
    position: absolute;
    max-width: 35px;
    height: 29px;
    width: 100%;
    background-size: contain;
left: -17%;
    top: 27%;
	z-index: 1;
}



.small{
	font-size: 0.6em;
}



.item_container{
	position: relative;
	padding-top: 3em;
}

.item_container .fv-under1,.item_container .fv-under2{
	position: absolute;
	z-index: 1;
	opacity: 0.32;
}


.item_container .fv-under1{
	width: 15%;
	left: 0;
	bottom: 0;
}

.item_container .fv-under2{
	width: 12%;
	right: 0;
	bottom: 0;
}


.con-ig1{
	position: absolute;
	right: 0;
	width: 15%;
	top: 10%;
}

.con-ig2{
	position: absolute;
    left: 1%;
    width: 6%;
    top: 8%;
}


.item-line{
	max-width: 1100px;
	
	margin: 6em auto;
}


.con-ig3{
	position: absolute;
    left: 0%;
    width: 12%;
    top: 8%;
}

.con-ig4{
	position: absolute;
   right: 1%;
    width: 6%;
    top: 8%;
}



/*************brand*************/
#brand-con{
	position: relative;
	margin-top: -4%;
}



.brand-ttl{
	max-width:600px;
	margin: 0 auto;
	width: 95%;
}



/*********************店舗一覧**********************/
/*
#list-brand{
	margin-top: -11em;
	background-color: #E3F8FF;
	    padding-top: 4em;
	border-radius: 200px 200px 0 0;
	padding-bottom: 5em;
}


@media screen and (max-width: 768px){
	#list-brand{
		border-radius: 80px 80px 0 0;
	}
}
*/


.list-brand_wrap{
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 1em;
}


.list-cover{
	max-width: 880px;
	margin: 0 auto;
	background-color: #fff;	
		border-radius: 0 0 20px 20px;
	padding-top: 3em;
	padding-bottom: 2em;
	margin-top: -3em;

}





/***********LIST*************/
.bland-list-inner{
	max-width: 880px;
	margin: 0 auto;
	background-color: #fff;

	box-shadow: 2px 2px 7px 0px rgba(205, 127, 160, 0.60);
	    padding: 30px 3em 45px 3em;
	padding-top: 2em;
	position: relative;
	border-radius: 20px;
	margin-top: 3em;
}


.bland-list-inner::after{
	position: absolute;
    right: 1.5%;
    bottom: 47px;
	content: "";
	 background:url("../img/scroll.png") no-repeat;
	    background-position: center;
	background-size: contain;
	    width: 30px;
    height: 97px;	
}



@media screen and (max-width: 768px){
	
	.bland-list-inner{
		 padding: 1px 5% 45px 5%;
		margin-top: 1em;
	}
	
	
	
	.bland-list-inner::after{
			content: "";
			background:url("../img/scroll-down.png") no-repeat;
	    background-position: center;
	background-size: contain;		
        right: 8px;
        bottom: 6px;
        width: 61px;
        height: 27px;
	}

}



/**********list**********/

.table-wrap{
	max-width: 1050px;
	margin: 0 auto;
font-family: "Noto Sans JP", serif;
  overflow: auto;
	max-height: 70vh;
	margin-top: 2em;
}


		table{
  width: 100%;
			margin: 0 auto;

  border-collapse: separate;
}
th,td{
  min-width: 90px;
  height: 50px;
  vertical-align: middle;
  padding: 0 4px;
/* border: 1px solid #fff;*/
}


@media screen and (max-width: 768px){
	th,td{
		min-width: 76px;
	}
	
	table{
		font-size: 0.85em;
	}
}


.white-line{
	border-right:2px solid #fff;
}

.gry-line{
	border-right:2px solid #E4E4E4;
}


.fixed01,
.fixed02{
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
/*  background: #333;*/



}
.fixed01{
  z-index: 10;
	color: #353535;
	background: #fff;
	width: 130px;
}
.fixed02{
  z-index: 1;
}
		
		
		.fixed-tenpo{
  position: sticky;
  top: 0;
  left: 0;
  color: #353535;	
	background: #fff;
			z-index: 9;
		}		
		

		
		
		.txt{
			text-align: center;
			color: #fff;
		}
		
		
		
		.bk-b{
			background: #171C61;
		}	
		
		.bk-g{
			background: #DBEAFF;
		}

		.bk-g p{
			color: #1F1F1F;
		}
		
		.bk-skyb{
			background:#171C61;
		}
		
		.bk-skyb .txt{
			color: #1F1F1F;
		}
		
		
	.bk-b,.bk-g,.bk-skyb {
  position: sticky;
  top: 0;
  z-index: 20;
}	
		
		
		
.sticky-row1 {
  position: sticky;
  top: 0;
  z-index: 20;
}
.sticky-row2 {
  position: sticky;
  top: 49px;
  z-index: 20;
}
.sticky-row3 {
  position: sticky;
  top: 99px; /* 78px * 2 */
  z-index: 20;
}		
		
		

		
		.fixed-tenpo-txt{
			text-align: center;
		}		
		
		
		.tenpo-bk{
			background: #F0F0F0;
		}


		.top-left-cell {
		  z-index: 25;
		}		


@media screen and (max-width: 768px){
	#list-brand .title-img{
		padding: 0 1em;
	}
}



/************sp***************/

@media screen and (max-width: 768px){
	.sakura1 {
    width: 12%;
    top: 5%;
    right: 9%;
}
	
	.sakura3 {
		width: 17%;
		bottom: unset;
		left: 8%;
		top: 38%;
	}
	.main-img {
    max-width: 87%;
    margin: 0 auto;
    position: relative;
     margin-top: 2em;
}
	
	.day-img {
    position: absolute;
    width: 39%;
    right: -8%;
    top: -41%;
}
	
	.fv-copy{
		font-size: 1em;
		    padding: 0 10px;
		transform: translateY(43%) translateX(-50%);

	}
	
	.fv-under1{
		width: 22%;
	}
	
	.fv-under2{
		    width: 19%;
	}
	
	.fv-inner{
		margin-bottom: 8em;
	}
	
	.point-wrap{
		    padding: unset;
	}
	
	.toku-ig2,.toku-ig1{
		display: none;
	}
	
	.pickup-ttl{
		max-width: 78%;
	}
	
	.con-ig1,.con-ig2,.con-ig3,.con-ig4{
		display:none;
	}
	
	.item-img{
		    width: 94%;
	}
	
	.item-logoFlex{
		    max-width: 73%;
	}
	
	.item-name{
		font-size: 1.7em;
	}
	
	.item-copy{
		    font-size: 0.85em;
	}
	
	
	.base_price{
		font-size: 1.7em;
	} 
	
	.small {
    font-size: 0.45em;
}
	
	.tax_price{
		font-size: 2.2em;
	}
	
	
	.item_container .fv-under2{
		display: none;
	}
	
	.item_container .fv-under1{
		    width: 35%;
		    bottom: -14%;
	}
	
	.item-line{
		margin-bottom: 2em;
	}
	
	.pick-wrap{
		    padding-bottom: 13em;
	}
	
	.brand-ttl{
		    margin-top: 2em;
	}
}




/*スクロールアップ*/
.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}

.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}





/*************フェードイン************/

.reveal {
  width: 100%;
  display: block;

  animation: revealFromLeft 2.5s ease forwards;
}

/* アニメーション定義 */
@keyframes revealFromLeft {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}