@charset "utf-8";
/* CSS Document */
body{
font-family: "Noto Sans JP", sans-serif;
  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: 170px;
	left: 10px;
	top: 10px;
}

@media screen and (max-width: 767px) {
	.logo {
		width:109px;
	}
}


/*********************fv************************/


article{
	overflow-x: hidden;
}



#fv{
	background: #ADDDF1;
background: linear-gradient(180deg,rgba(173, 221, 241, 1) 28%, rgba(255, 255, 255, 1) 100%);
	
	
}


.fv-bg{
	background: url("../img/fv-bg.png") no-repeat;
	background-size: contain;
	background-position: center bottom;
}


.fv-wrap{
	padding-bottom: 2%;
}

.fv-inner{
	padding-top: 8em;
	max-width: 1200px;
	margin: 0 auto;
	    padding-left: 10px;
    padding-right: 10px;
	
}

.main-copy{
	width: 58%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.main-ttl{
		width: 65%;
	margin: 0 auto;
	position: relative;
	margin-top: -10%;
	z-index: 0;
}



.fv-img1,.fv-img2,.fv-img3,.fv-img4{
	position: absolute;
}

.fv-img1{
    width: 34%;
    margin: 0 auto;
    left: -24%;
    top: 18%;
}


.fv-img2{
	width: 39%;
    margin: 0 auto;
    left: -27%;
    bottom: 0%;
}

.fv-img3{
    width: 34%;
    margin: 0 auto;
    right: -28%;
    top: 13%;
}


.fv-img4{
    width: 35%;
    margin: 0 auto;
    right: -29%;
    bottom: 2%;
}


.main-day{
	width: 50%;
	margin: 0 auto;
}



.wave{
	line-height: 0;
	
}






/**************nav******************/

#nav{
	margin-top: 5em;
}

.nav-list{
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.nav-list li{
	width: calc((100% - 30px) / 3);
	border: solid #fff 1px;
	  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.26);
	border-radius: 16px;
	padding: 10px;
	padding-bottom: 1em;
}


.nav-list li:hover{
	box-shadow: none;
	transition: all .3s;
}



.navlink{
	display: contents;
}



.nav-list_pink {
  background-color: #FFCCDB;
}

.nav-list_bule {
  background-color: #B2CFE8;
}

.nav-list_green {
  background-color: #C2DA75;
}


.nav-icon{
	    width: 85%;
    margin: 0 auto;
    margin-top: -27%;
}

.nav-list li p{
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	color: #705200;
	line-height: 1.1em;
	margin-top: 0.8em;
}


/******************sweets*****************/

#sweets-con{
	margin-top: 20em;
	background: url("../img/sweets_bk.jpg") repeat-y;
	background-size: contain;
	background-position: top center;

	
}

.arch{
	line-height: 0;
}


.sweets-wrap{
	background: url("../img/dotto-bk.png") repeat-y;
	background-size: contain;
	background-position: top center;
	padding-bottom: 12em;
	padding-left: 10px;
	padding-right: 10px;
}


.sweets-inner{
	padding-left: 10px;
	padding-right: 10px;

}



#sweets-con .con-ttlBox{
	max-width: 980px;
	margin: 0 auto;
	    margin-top: -5%;
}

#sweets-con .con-ttl{
	max-width: 50%;
    margin: 0 18% 0 auto;
	position: relative;
}

#sweets-con .con-icon{
    width: 48%;
    position: absolute;
    top: -31%;
    left: -41%;
}



/*********************column1**********************/
.column1_flex{
	max-width: 1100px;
	margin: 0 auto;
/*
	display: flex;
	justify-content: space-between;
*/
	
	position: relative;
}


.tenpo-icon1{
	position: absolute;
    width: 21%;
    right: 6%;
    top: -22%;
}


.sweets-wrap{
	margin-top: 8em;
}

.column1_flex .item-img{
	width: 70%;
	margin: 0 auto 0 0;
	position: relative;

}


.column1_flex .item-info{
    width: 57%;
    margin: 0 0 0 auto;
    background-color: #FFF;
  
    position: absolute;
    /* bottom: -14%; */
    left: 86%;
    top: 43%;
	  box-shadow: 0px 3px 11px 0px rgba(239, 138, 150, 1);
	padding: 20px; 

}

.info-deco{
	position: absolute;
	left: 0%;
	bottom: 0%;
	width: 23%;
	line-height: 0;
}





.package{
	width: 24%;
	position: absolute;
	left: 0%;
	top: -14%;
}

.irasuto1{
		width: 15%;
	position: absolute;
	left: 3%;
	bottom: 0%;
	
}

/****************colon****************/

.colon{
	max-width: 140px;
	width: 100%;
	margin: 15em auto 10em auto;
	
}

/**********************column1 reverse***********************/
.column1_reverse{
	max-width: 1100px;
	margin: 0 auto;
/*
	display: flex;
	justify-content: space-between;
*/
	
	position: relative;
}


.column1_reverse .tenpo-icon1{
	position: absolute;
    width: 21%;
    left: 6%;
    top: -22%;
}


.column1_reverse .item-img{
	width: 70%;
	    margin: 0 0 0 auto;
	position: relative;

}


.column1_reverse .item-info{
    width: 57%;
    margin: 0 auto 0 0;
    background-color: #FFF;
  
    position: absolute;
    /* bottom: -14%; */
    right: 86%;
    top: 43%;
	  box-shadow: 0px 3px 11px 0px rgba(216, 167, 199, 1);
	padding: 20px; 

}


.column1_reverse_package{
	width: 24%;
	position: absolute;
	right: 0%;
	top: -14%;
}

.column1_reverse_irasuto1{
		width: 15%;
	position: absolute;
	right: 3%;
	bottom: 0%;
	
}


/******************iteminfo-txt******************/
.item-copy{
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	color: #705200;
}

.item-tenpo{
	text-align: left;
	font-size: 1em;
	font-weight: bold;
	color: #1F1F1F;
	margin-top: 1.2em;
}

.item-name{
	text-align: left;
	font-size: 1.3em;
	font-weight: bold;
	color: #1F1F1F;
	margin-top: 5px;
	border-bottom: solid 1px #707070;
	padding-bottom: 10px;
}

.price-box{
	display: flex;
	justify-content:flex-end;
	align-items: center;
	    margin-top: 10px;

}

.item-price{
	text-align: end;
    font-size: 2em;
    font-weight: bold;
    color: #1F1F1F;
    margin-top: 5px;
    line-height: 0em;	
}

.small-txt{
	font-size: 0.7em;
}

.bk_txt{
	font-size: 0.8em;
    padding: 5px;
    margin-right: 5px;
    background-color: #1F1F1F;
    color: #fff;
}

.item-tax{
	text-align: end;
    font-size: 1.2em;
    font-weight: bold;
    color: #1F1F1F;
    margin-top: 20px;
    line-height: 0em;
	margin-bottom: 1.5em;
}



.column1_space{
	margin-top: 10%;
}


.sweets_under{
	width: 100vw;
	line-height: 0;
	position: relative;

}

.yukun-machan{
position: absolute;
    width: 15%;
    left: 4%;
    bottom: 28%;
}



/***********kaisen con************/


#kaisen-con{
	margin-top: 15em;
background: #EAFAFF;
background: linear-gradient(180deg,rgba(234, 250, 255, 1) 0%, rgba(153, 215, 241, 1) 15%, rgba(158, 217, 242, 1) 30%, rgba(211, 237, 249, 1) 41%, rgba(153, 215, 241, 1) 72%, rgba(158, 217, 242, 1) 86%, rgba(231, 245, 251, 1) 100%);
	padding-bottom: 1em;
	position: relative;
}


.kaisen-inner{
	padding-left: 10px;
	padding-right: 10px;

}



#kaisen-con .con-ttlBox{
	max-width: 980px;
	margin: 0 auto;
	    margin-top: -8%;
}

#kaisen-con .con-ttl{
	max-width: 50%;
    margin: 0 18% 0 auto;
	position: relative;
}

#kaisen-con .con-icon{
    width: 48%;
    position: absolute;
    top: -31%;
    left: -41%;
}

.kaisen-wrap{
margin-top: 8em;
	padding-bottom: 1em;
	padding-left: 10px;
	padding-right: 10px;
}


#kaisen-con .item-info{
	box-shadow: 0px 3px 11px 0px rgba(32, 132, 173, 1);
}


/*****************kaisen irasuto***********************/
.kaisen-irasuto1,.kaisen-irasuto2,.kaisen-irasuto3,.kaisen-irasuto4,.kaisen-irasuto5,.kaisen-irasuto6{
	position: absolute;
}

.kaisen-irasuto1{
	width: 20%;
	right: 0%;
    top: 25%;	
}

.kaisen-irasuto2{
	width: 20%;
	left: 0%;
    top: 32%;	
}


.kaisen-irasuto3{
	width: 20%;
	right: 0%;
    top: 50%;	
}


.kaisen-irasuto4{
	width: 20%;
	left: 10%;
    top: 50%;	
}

.kaisen-irasuto5{
	width: 20%;
	left: 0%;
    top: 70%;	
}


.kaisen-irasuto6{
	width: 20%;
	right: 2%;
    bottom: 30%;	
}


/**************************colum2************************/

.colum2_wrap{
	margin-top: 20em;
	position: relative;
	z-index: 1;
}

.colum2_flex{
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch; 
}


.colum2_box{
	width: calc((100% - 30px) / 2);
  display: flex;              /* ← 追加 */
  flex-direction: column; 

}


.colum2_img{
	margin-top: -28%;
	position: relative;
}


.colum2_info{
	background-color: #fff;
    padding: 20px;

    padding-top: 35%;
    width: 86%;
    text-align: center;
    margin: 0 auto;
    margin-top: -35%;
	 flex: 1; 
}

.corner{
	text-align: left;
	background-color: #004C8F;
	padding: 5px;
	font-size: 0.9em;
	font-weight: 400;
	color: #fff;
	display: table;
	margin-top: 1.2em;
}


/******************column3********************/

.column3_wrap{
	background-color: rgba(61, 108, 160, 0.85);
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px;
	margin-top: 20em;
	padding-bottom: 3em;
	position: relative;
	z-index: 1;
}


.souzai-ttl{
	width: 40%;
	margin: 0 auto;
	margin-top: -20%;
}



.colum3_flex{
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch; 
	margin-top: 8em;
}


.colum3_box{
	width: calc((100% - 30px) / 3);
  display: flex;              /* ← 追加 */
  flex-direction: column; 

}


.colum3_img{
	margin-top: -28%;
	position: relative;
}


.colum3_info{
	background-color: #FFFDD0;
    padding: 20px;
border-radius: 50px 50px 0 0;
    padding-top: 35%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: -35%;
	 flex: 1; 
}


.kaisen-under{
	width: 100vw;
	margin-top: -9%;
}


.allnotice{
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 2em;
	padding: 10px;
	margin-bottom: 5em;
}

.allnotice p{
	font-size: 1em;
	text-align: left;
	color: #1F1F1F;
	font-weight: 400;
	line-height: 1.4em;

}

.txt_indent{
		padding-left: 1em;
    text-indent: -1em;
}


/*************************Responsive***************************/
@media screen and (max-width: 1080px) {
	#nav{
		margin: 0 auto;
		margin-top: 5em;
		width: 95%;
	}
	
	.column1_space {
		margin-top: 20em;
	}
}

@media screen and (max-width: 768px){
	.tenpo-icon1_sp{
	margin: 0 auto;
	width: 47%;
}
}


@media screen and (max-width: 767px){
	.nav-list{
		justify-content: space-around;
	}
	.nav-list li{
		width: calc((100% - 30px) / 2);
		    margin-bottom: 10%;
	}
	
	.nav-list li p{
		font-size: 0.9em;
	}
	
	.fv-inner{
		    padding-top: 6em;
	}
	
	.fv-bg{
		    background: url(../img/fv-bg_sp.png) no-repeat;
		    background-size: contain;
    		background-position: center bottom;
	}
	
	
	.fv-wrap{
		    padding-bottom: 18%;
	}
	
	.wave{
		    width: 185%;
	}
	
	.main-copy{
		    width: 75%;
	}
	
	.main-ttl{
		    width: 91%;
		    margin-top: -10%;
	}
	
	.fv-img1 {
		width: 36%;
		margin: 0 auto;
		left: -7%;
		top: 2%;
	}
	
	.fv-img3 {
		width: 34%;
		margin: 0 auto;
		right: -6%;
		top: -1%;
	}
	
	.fv-img2 {
		width: 40%;
		margin: 0 auto;
		left: -12%;
		bottom: -3%;
	}
	
	.fv-img4 {
		width: 31%;
		margin: 0 auto;
		right: -11%;
		bottom: 2%;
	}	
	
	.main-day{
		width: 94%;
	}
	
	#nav{
		margin-top: 3em;
	}
	
	#sweets-con{
		    margin-top: 6em;
	}
	
	#sweets-con .con-ttl{
		    max-width: 82%;
    	margin: 0 auto;
	}
	
	#sweets-con .con-icon {
		width: 42%;
		position: absolute;
		top: -66%;
		left: -7%;
	}
	
	.column1_flex .item-img{
		    width: 100%;
    	margin: 0 auto;
	}
	
	.column1_flex .item-info{
		width: 96%;
    	margin: 0 auto;
		bottom: unset;
		left: 2%;
		top: unset;
	}
	
.colon {
    max-width: 140px;
    width: 30%;
    margin: 26em auto 4em auto;
}	
	
	
	.sweets-wrap{
		margin-top: 2em;
		background: url(../img/dotto-bk-sp.png) repeat-y;
		    background-size: contain;
    background-position: top center;
	}
	
	

	
	.column1_reverse .item-img{
		    width: 100%;
    	margin: 0 auto;
	}
	
	.column1_reverse .item-info{
		width: 96%;
    	margin: 0 auto;
		bottom: unset;
		left: 2%;
		top: unset;
	}	
	
	.yukun-machan{
		width: 34%;
	}
	
	
	.sweets_under{
		   margin-top: 17%;
	}
	
	#kaisen-con .con-ttl{
		    max-width: 82%;
    	margin: 0 auto;
	}
	
	#kaisen-con .con-icon {
        width: 42%;
        position: absolute;
        top: -55%;
        left: -6%;
	}	
	
	#kaisen-con{
		margin-top: 8em;
	}
	
	.kaisen-wrap{
		margin-top: 2em;
	}
	
	.colum2_wrap{
		    margin-top: 27em;
	}
	
	.kaisen-irasuto1 {
		width: 34%;
		right: 0%;
		top: 29%;
	}

	.kaisen-irasuto3 {
		width: 29%;
		right: 0%;
		top: 51%;
	}	
	
	
	.colum2_box{
		    width: calc((100% - 10px) / 2);
	}
	
	.colum2_info{
		width: 100%;
		padding: 10px;
		    padding-top: 35%;
	}
	
	.column3_wrap{
		    margin-top: 50%;
		padding: 5px;
		    padding-bottom: 0em;
	}
	
	.souzai-ttl {
    width: 80%;
    margin: 0 auto;
    margin-top: -40%;
}
	
	.colum3_flex{
		    margin-top: 19%;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.colum3_box{
		width: calc((100% - 10px) / 2);
		margin-bottom: 20%;
	}
	
	
	
	/************item*************/

	.package {
		width: 29%;
	}
	.column1_reverse_package{
		width: 29%;
	}
	
	.item-copy{
		    font-size: 1em;
	}
	
	.item-tenpo{
		    font-size: 0.85em;
	}
	
	.item-name{
		font-size: 1.1em;
	}
	
	.item-price{
		font-size: 1.8em;
	}
	
	.bk_txt{
		font-size: 0.7em;
	}
	
	.item-tax{
		    font-size: 1.1em;
		margin-top: 14px;
	}
	
	
	.corner{
		font-size: 0.7em;
	}
	
	.colum3_info{
		    padding: 10px;
		padding-top: 35%;
		    border-radius: 30px 30px 0 0;
	}
	
	.small-txt{
		font-size: 0.6em;
	}
	
	.colum2_flex .bk_txt{
		font-size: 0.6em;
	}
	.colum2_flex .item-price{
		font-size: 1.5em;
	}
	
		.colum3_flex .bk_txt{
		font-size: 0.6em;
	}
	.colum3_flex .item-price{
		font-size: 1.5em;
	}
	
	
}

@media screen and (max-width: 500px){
	    .colum2_wrap {
        margin-top: 24em;
    }
}




/***************animation*****************/

/* 外側：傾き（回転） */
.swing{

  animation: swing 5s ease-in-out infinite;
  transform-origin: center top; 
}

/* 内側：バウンド */
.bounce{
  animation: bounce 3.6s cubic-bezier(.22,1,.36,1) infinite;
}



/* なめらかバウンド（減衰） */
@keyframes bounce{
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-10%); }
  40%  { transform: translateY(0); }
  55%  { transform: translateY(-7%); }
  70%  { transform: translateY(0); }
  82%  { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

/* 傾きスイング（左右にゆらゆら回転） */
@keyframes swing{
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-6deg); }
  50%     { transform: rotate(0deg); }
  75%     { transform: rotate(6deg); }
}



/*****fv*******/

/* 初期状態*/
.fade-item {
  opacity: 0;
  transform: translateY(30px);
}

/* 発火後 */
.fade-item.show {
  animation: fadeUp 1.0s ease forwards;
}

/* アニメーション */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*****************Scroll後発火ver*****************/

/* 初期状態 */
.fadein-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

/* 発火後 */
.fadein-item.is-show {
  animation: fadeUp2 1.3s ease forwards;
}

@keyframes fadeUp2 {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}





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

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


/************浮遊*************/
.float-img {

  animation: floatY 3s ease-in-out infinite;
}

/* 上下ふわふわ */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}


/*********************動画**********************/


.topabout {
    padding: 60px 0 20px 0;

}


#movie {
    position: relative;
    z-index: 10;
    padding: 40px 0;
}


@media screen and (min-width: 768px) {
    .movie-youtube {
        text-align: center;
        width: 600px;
        margin: auto;
        padding: 2em 1em;
        border-radius: 10px;
        margin-top: -2em;
    }
}

@media screen and (max-width: 768px){
	.movie-youtube{
		    margin: 0;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    box-sizing: border-box;
	}
	
	    .movie-youtube iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
	
	#movie {
    position: relative;
    z-index: 10;
    padding: 40px 10px;
}
	
	.topabout {
    padding: 40px 0;
}	
}