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

.container {
    width: auto!important;
}
.container.container--contents-full>.row>.section:first-child {
    margin-top: 0px!important;
}

*{
	margin: 0 auto;
	padding: 0;
	border: 0;
	font-size: 100%;
	list-style: none;
	vertical-align: baseline;
}
body#top,
body#top main.main{
    background-color: #ffaea3;
	background-image: url('../images/a1_bg.png');
	background-repeat: repeat-x;
	background-position: top center;
}


#Osechi{
	background-color: #ffaea3;
	color: #ffffff;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


#Osechi #main-area{
    box-sizing: border-box;
    /*padding: 20px;*/
	/*margin-left: 4px;*/
	width:100%;
}

.Osechi-Img {
    width: 1100px;
	position: relative;
}

.Osechi-Img img{
    width: 100%;
	
}

.f1{
    position: relative;
	padding-top: 5px;	
}

.s1{
    position: relative;
	padding-top: 60px;	
}

.t1{
    position: relative;
	padding-top: 80px;	
}

.f1{
    position: relative;
	padding-top: 50px;	
}

.Top-content{
    position: relative;
	background-image: url('../images/a1_bg.png');
	background-repeat: repeat-x;
}
.Osechi_Text{
    box-sizing: border-box;
    font-size: 2.3em;
    padding: 30px 20px;
}



.o-content{
    position: relative;
	background-color: #ffaea3;
}

.o-content .Button{
    display: block;
    width: 988px;
	margin: 0 auto;
}
.o-content .Button a{
    background-color: #000;
    display: block;
    width: 988px;
	position: absolute;
	bottom: 27%;
}

.o-content .Button img{
    width: 100%;
}

.o-content .Button a img:hover{
	filter: brightness(0.7);
    transition: 0.4s;
}

.tver{
	position: relative;
    display: block;
    width: 1100px;
	height: 320px;
	margin: 0 auto;
	padding-top: 120px;
}
.tver a{
    display: block;
    width: 966px;
}

.tver img{
    width: 100%;
}

.tver a img:hover{
	filter: brightness(0.7);
    transition: 0.4s;
}


.sq-content{
    position: relative;
	background-image: url('../images/sq_bg.png');
	background-repeat: repeat;
}

.b-content{
    position: relative;
	background-color: #ffeceb;
}

.shop{
	width: 1100px;
	display: block;
	position: relative;
	top:-1170px;
	left:0;
}


.move video {
    display: block;
    width: 680px;
    position: absolute;
    bottom: -8.4%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
	border: solid 1px #ccc; /* 色：グレー */
}



/* 参加店舗Linkボタン */



/* 3 大分 */
.m3btn a {
	display:block;
	position:absolute;
	top:358px;
	left:100px;
	width:172px;
	height:60px;
	background-image: url('../images/m3a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m3btn a:hover{
    background-image: url('../images/m3b.png');
}

/* 15 京都 */
.m15btn a {
	display:block;
	position:absolute;
	top:354px;
	left:384px;
	width:98px;
	height:55px;
	background-image: url('../images/m15a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m15btn a:hover{
    background-image: url('../images/m15b.png');
}

/* 4 福井 */
.m4btn a {
	display:block;
	position:absolute;
	top:234px;
	left:418px;
	width:160px;
	height:55px;
	background-image: url('../images/m4a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m4btn a:hover{
    background-image: url('../images/m4b.png');
}

/* 8 和歌山 */
.m8btn a {
	display:block;
	position:absolute;
	top:737px;
	left:100px;
	width:172px;
	height:94px;
	background-image: url('../images/m8a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m8btn a:hover{
    background-image: url('../images/m8b.png');
}

/* 16 山梨 */
.m16btn a {
	display:block;
	position:absolute;
	top:727px;
	left:381px;
	width:185px;
	height:55px;
	background-image: url('../images/m16a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m16btn a:hover{
    background-image: url('../images/m16b.png');
}

/* 5 17 18 25 東京 */
.m5btn a {
	display:block;
	position:absolute;
	top:835px;
	left:382px;
	width:269px;
	height:57px;
	background-image: url('../images/m5a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m5btn a:hover{
    background-image: url('../images/m5b.png');
}

.m18btn a {
	display:block;
	position:absolute;
	top:902px;
	left:383px;
	width:151px;
	height:34px;
	background-image: url('../images/m18a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m18btn a:hover{
    background-image: url('../images/m18b.png');
}

.m17btn a {
	display:block;
	position:absolute;
	top:956px;
	left:383px;
	width:316px;
	height:34px;
	background-image: url('../images/m17a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m17btn a:hover{
    background-image: url('../images/m17b.png');
}

.m25btn a {
	display:block;
	position:absolute;
	top:1012px;
	left:382px;
	width:296px;
	height:55px;
	background-image: url('../images/m25a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m25btn a:hover{
    background-image: url('../images/m25b.png');
}


/* 6 19 埼玉 */
.m6btn a {
	display:block;
	position:absolute;
	top:741px;
	left:831px;
	width:222px;
	height:89px;
	background-image: url('../images/m6a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m6btn a:hover{
    background-image: url('../images/m6b.png');
}

.m19btn a {
	display:block;
	position:absolute;
	top:845px;
	left:831px;
	width:224px;
	height:52px;
	background-image: url('../images/m19a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m19btn a:hover{
    background-image: url('../images/m19b.png');
}


/* 22 栃木 */

.m22btn a {
	display:block;
	position:absolute;
	top:652px;
	left:836px;
	width:221px;
	height:34px;
	background-image: url('../images/m22a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m22btn a:hover{
    background-image: url('../images/m22b.png');
}


/* 23 福島 */
.m23btn a {
	display:block;
	position:absolute;
	top:560px;
	left:896px;
	width:158px;
	height:34px;
	background-image: url('../images/m23a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m23btn a:hover{
    background-image: url('../images/m23b.png');
}

/* 1 8 14 15 26 北海道 */
.m1btn a {
	display:block;
	position:absolute;
	top:20px;
	left:896px;
	width:151px;
	height:72px;
	background-image: url('../images/m1a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m1btn a:hover{
    background-image: url('../images/m1b.png');
}

.m7btn a {
	display:block;
	position:absolute;
	top:107px;
	left:896px;
	width:136px;
	height:33px;
	background-image: url('../images/m7a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m7btn a:hover{
    background-image: url('../images/m7b.png');
}

.m11btn a {
	display:block;
	position:absolute;
	top:160px;
	left:896px;
	width:134px;
	height:51px;
	background-image: url('../images/m11a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m11btn a:hover{
    background-image: url('../images/m11b.png');
}

.m12btn a {
	display:block;
	position:absolute;
	top:225px;
	left:896px;
	width:156px;
	height:88px;
	background-image: url('../images/m12a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m12btn a:hover{
    background-image: url('../images/m12b.png');
}

.m20btn a {
	display:block;
	position:absolute;
	top:318px;
	left:896px;
	width:156px;
	height:68px;
	background-image: url('../images/m20a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m20btn a:hover{
    background-image: url('../images/m20b.png');
}

.m21btn a {
	display:block;
	position:absolute;
	top:399px;
	left:896px;
	width:83px;
	height:32px;
	background-image: url('../images/m21a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m21btn a:hover{
    background-image: url('../images/m21b.png');
}


.m24btn a {
	display:block;
	position:absolute;
	top:459px;
	left:896px;
	width:158px;
	height:34px;
	background-image: url('../images/m24a.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-indent: -9999px;
	outline:none;
}

.m24btn a:hover{
    background-image: url('../images/m24b.png');
}


/* 参加店舗Linkボタン End */


#Osechi #main-area ul{
    display: flex;
    justify-content:space-between;
    width: 100%;
}
#Osechi #sub-area{
    animation: fadeIn 1s ease;
    box-sizing: border-box;
	padding: 20px 20px 20px 0;
    position: fixed;
    right: 0;
    top:10%;    
    width:360px;
}
#Osechi #sub-area a{
    display: inline-block;
}
#Osechi #sub-area a:hover{
    filter: brightness(0.7);
	transition: 0.4s;
}
#Osechi #sub-area a img{
    width: 100%;
}
@media screen and (max-width: 1740px){
    #Osechi #sub-area{
        display: none;
        /*animation: fadeOut 1s ease;*/
    }  
}


@media screen and (max-width: 1739px){
    #button{
    background-color: rgba(255,255,255,0.8);
    color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    } 
    
    #button a{
    display: inline-block;
    }
    
	#button a:hover{
    filter: brightness(0.7);
	transition: 0.4s;
}
	
	
    #Osechi #main-area{
        padding-bottom: 150px;
    }
}

@media screen and (min-width: 1740px){
    #button{
        display: none;
    }  
}

.ojub {
  display:block;
	position:absolute;
	top:84px;
	left:687px;
	width:120px;
	height:98px;
}

.ojub2 {
  display:block;
	position:absolute;
	top:55px;
	left:687px;
	width:120px;
	height:98px;
}

.ojub3 {
  display:block;
	position:absolute;
	top:30px;
	left:687px;
	width:120px;
	height:98px;
}


.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../images/10b.png) no-repeat center center / 120px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 120px;
  height: 98px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.ojub4 {
  display:block;
	position:absolute;
	top:48px;
	left:687px;
	width:120px;
	height:98px;
}

.ojub5 {
  display:block;
	position:absolute;
	top:532px;
	left:856px;
	width:150px;
	height:130px;
}

.ojub6 {
  display:block;
	position:absolute;
	top:8px;
	left:856px;
	width:150px;
	height:130px;
}


.fuwafuwa2 {
  animation: fuwafuwa2 3s ease-in-out infinite alternate;
  background: url(../images/10b2.png) no-repeat center center / 150px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 150px;
  height: 136px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa2 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.anim-box {
	display:block;
	position:absolute;
	background: url(../images/set1.png) no-repeat center center;
	width: 580px;
	height: 218px;
	top:828px;
	left:80px;
    opacity: 0;
    margin: 15px 25px;
}


.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}


.anim-box2 {
	display:block;
	position:absolute;
	background: url(../images/set2.png) no-repeat center center;
	width: 56px;
	height: 32px;
	top:19px;
	left:277px;
    opacity: 0;
    margin: 15px 25px;
}


.anim-box2.poyopoyo2 {
  animation: poyopoyo2 2s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo2 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.anim-box3 {
	display:block;
	position:absolute;
	background: url(../images/set2.png) no-repeat center center;
	width: 56px;
	height: 32px;
	top:12px;
	left:277px;
    opacity: 0;
    margin: 15px 25px;
}


.anim-box3.poyopoyo3 {
  animation: poyopoyo3 2s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo3 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.anim-box4 {
	display:block;
	position:absolute;
	background: url(../images/star.png) no-repeat center center;
	width: 1040px;
	height: 326px;
	top:26px;
	left:38px;
    opacity: 0;
    margin: 2px 2px;
}


.anim-box4.poyopoyo4 {
  animation: poyopoyo4 2.4s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo4 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
