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

html {
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
 font-weight: 500;
 font-size: 62.5%;
 height: 100%;
 word-break: break-word;
 color:#404040; 
	scroll-behavior: smooth;
 padding: 0;
 margin: 0;
}

body {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 position: relative;
}

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

 

img {
 width:100%;
 border: 0;
 margin: 0;
}

figure {
 margin: 0;
}

p {
 margin: 0;
 padding: 0;
 color: #393939;
}

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

a:hover {
 opacity: 0.8;
}

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

h1,h2,h3{
	padding:0;
	margin:0;
	font-size:5.0rem;
	letter-spacing: 3px;
	color:#474747;
}

h2{
	font-size:2.4rem;
	letter-spacing: 2px;
	font-weight: 500;
	
}

h3{
	font-size:1.4rem;
	letter-spacing: 0px;
	font-weight: 500;
	
}

.top_slider{
 width: 100%;
 position:fixed;	
 z-index:-1;
 top: 0;
}


main{
 z-index: 3;
}

section{
 background-color:#FFEBE1;
}

.event_titile{
 width:100%;
 height:100vh;
 position:relative;
 background-color:hsla(0,0%,0%,0.00);
}

.event_titile div{
 position:absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 z-index: 2;
	color: #fff;
	text-align:center;
	animation: fade-in 0.8s;
 animation-fill-mode: forwards;
}

.event_titile h1{
 font-size: 4.0rem;
 color: #fff;
}

.event_titile h2{
 font-size: 2.0rem;
 color: #fff;
}


@keyframes fade-in {

 from {
   opacity: 0;
 }

 to {
  opacity: 1;
 }
}

.coupon{ 
 width: 1200px;
 border-radius: 20px;
 text-align: center;
	background-color: #fe7072;
 margin: 0px auto;
 padding: 20px;
}

.coupon > img{
 width: 100%;
 text-align: center;
 padding: 50px 0;
}

.coupon > div{
 width: 100%;
}

.coupon > div img{
 width: 48%;
 text-align: center;
}

.menu > img{
 width: 1200px;
 padding-top: 100px;
 text-align: center;
 border: 0;
 margin: 0;
}

.ranking>div div{
 width: 18%;
 text-align:left;
 padding:10px 0;
 position: relative;
}

.menu,.ranking{
	width: 100%;
	text-align: center;
	padding: 100px 0;
}

.menu h1{
 font-size:5.0rem;
	letter-spacing: 3px;
	color:#dd4861;
 margin: 100px 0 0 0;
}

.category_navi{
 width: 80%;
	margin:50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
 gap: 10px 15px;
}

.category_navi>a{
 width: 30%;
 font-size: 1.8rem;
 background-color: #fe7072;
 border-radius: 10px;
 text-align:center;
 padding:10px 0;
 color:#fff;
}

.category_navi>img{
 width:75%;
}


/* **********************検索窓********************** */


.price_search{
 width:100%;
	text-align: center;
	padding: 100px 0 0 0;
	z-index: 9999;
}

.price_search>div{
 display: inline-block;
background-color: #fff;
width: 50%;
padding: 30px 0;
border-radius: 20px;
}

.price_search h1{
font-size: 6.5rem;
font-weight: 700;
line-height:100%;
margin:10px 0;
color: #DA4648;
}

.price_search h2{
font-size: 3.0rem;
font-weight: 600;
	
}

.price_search h3{
font-size: 2.5rem;
font-weight: 600;
color: #A8A8A8;
}

.search_area{
	margin: 30px auto 0 auto;
}

select{
	font-size: 2.0rem;
	padding: 15px 0px;
	width: 40%;
	border:1px solid #BDBDBD;
	border-radius: 5px;
	color: #4E4D4D;
	font-weight:600;
}

.search_area span{
	font-size: 3.5rem;
	padding: 0px 10px;
}

.search_btn{
	background-color:#DA4648;
	font-size: 2.3rem;
	letter-spacing: 2px;
	color: #fff;
	width:35%;
	display: inline-block;
	border-radius: 10px;
	margin:30px 0 0 0;
	border: none;
	padding: 5px 0;
}

/* **********************ランキング********************** */



.ranking{
	background-color: #fff;
}

.ranking>div{
 width: 90%;
	margin:30px auto;
	display: flex;
	flex-wrap: wrap;
 
	justify-content:center;
 gap: 0px 30px;
}

.ranking>div div{
 width: 18%;
	
 text-align:left;
 padding:10px 0;
 position: relative;
}

.ranking>div div::before{
 content:"1";
 position: absolute;
 top: -10px;
 left: -25px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-color:#D0AB1F;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 2.0rem;
 font-weight:600;
 z-index:1;
}


.ranking>div div:nth-of-type(2)::before{
content:"2";
background-color:#757575;
}


.ranking>div div:nth-of-type(3)::before{
content:"3";
background-color:#65351B;
}

.ranking>div div:nth-of-type(4)::before{
content:"4";
background-color:#1A1A1A;
}

.ranking>div div:nth-of-type(5)::before{
content:"5";
background-color:#1A1A1A;
}

.ranking>div div h3{
 margin: 5PX auto;
	height: 50px;
}

.ranking>div div b{
 color:#C20A0D;
 font-size: 1.8rem;
 text-align:left;
 width: 90%;
 margin:auto;
 display: block;
}



/* **********************レコメンドセクション********************** */


.reccommend{

	padding: 50px 0;
}


.reccommend h1{
color:#dd4861;
width: 100%;
text-align: center;
}

.reccommend div.rec_item{
width: 100%;
	text-align:center;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	margin:100px 0 0 0;
	position: relative;
}



.ref>div:first-of-type{order: 2;}


.reccommend div.rec_item>div{
width: 50%;
	
}



.reccommend div.rec_item > div img{
width: 98%;
height: 98%;
object-fit: cover;

	
}

.reccommend div.rec_item.contain_img > div img{
object-fit: contain;
}


div.rec_info{
text-align: left;
padding: 20px 30px;
display: grid;
  grid-template-rows:subgrid;
  grid-row: span 7;
  row-gap:30px;
}


div.rec_info>h3{
	font-size: 3.5rem;
 color:#dd4861;
	font-weight:700;
	margin: 0;
	padding: 0;
	width: 100%;
}



div.rec_info>h4{
	font-size:2.0rem;
	font-weight:600;
	margin: 0;
	padding: 0;
}

div.rec_info>h5{
	font-size:2.0rem;
	font-weight:600;
	margin: 0;
	padding: 0;
}

div.rec_info>p{
	font-size:1.8rem;
	margin: 0;
	padding: 0;
}

div.rec_info>b{
	font-size:4.5rem;

}

div.rec_info>b::before{
content: "送料無料";
font-size:1.8rem;
font-weight: 400;	
color: #DD4861;
border: 1px solid #DD4861;
display: block;
text-align: center;
width:25%;	
margin: 0 0 5px 0;
}


div.rec_info>b::after{
content: "円";
font-size:2.5rem;
margin: 0 0 0 3px;	
}

div.rec_info>strong{
	font-size:4.5rem;
}

div.rec_info>strong::after{
content: "円～";
font-size:2.5rem;
margin: 0 0 0 3px;	
}

div.rec_info > a > span{
background-color:#DD4861;
color: #fff;
font-size: 2.4rem;
padding:8px 60px;
border-radius: 20px;

}

div.rec_info>img{
width: 60%!important;
height: auto!important;
margin: auto;
object-fit:contain!important;
}

/* **********************スイーツ********************** */


.sweets>a{
width: 20%;

}


/* **********************海鮮ギフト********************** */


.reccommend div.rec_item.variations>div{
width: 95%!important;
	
}


	


/*
.reccommend div.rec_item.variations>div:first-of-type{
 height:500px;
	overflow:hidden;
}
*/
.reccommend div.rec_item.variations>.rec_info{
display: flex;
flex-wrap:wrap;
}

.seafood{
text-align:left;
display: grid;
margin-bottom: 50px;
}


.reccommend div.rec_item.variations>.rec_info div.seafood{
width: 50%;
}


.seafood > div:first-child{
grid-row: 1 / 3;
	grid-column: 1 / 2;
display: flex;
  align-items: center; 
  justify-content: center; 
	
}



.seafood_list > div:first-child{
grid-row: 1 / 1;
	grid-column: 1 / 2;
display: flex;
  align-items:flex-start; 
  justify-content: center; 
}

.seafood img{
width:90%!important;
height:auto!important;
}


.seafood > div:nth-child(2) {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

.seafood > div:nth-child(3) {
grid-row: 2 / 3;
	grid-column: 2 / 3;
	display: flex;
  justify-content: center; 
	  flex-flow: column;
	width: 100%;
	
}



div.seafood h3{
	font-size: 3.7rem;
	font-weight:700;
	margin: 0;
	padding: 0;
}

div.seafood h4{
	font-size:2.6rem;
	font-weight:700;
	margin: 0;
	padding: 0;
	
}

div.seafood h5{
	font-size:1.6rem;
	font-weight:600;
	margin: 0;
	padding: 0;
}

div.seafood p{
	font-size:1.8rem;
	line-height: 230%;
	margin: 0;
	padding: 0;
}

div.seafood b{
	font-size:4.0rem;
	position: relative;

}

div.seafood b::before{
content: "送料無料";
font-size:1.8rem;
font-weight: 400;
color: #DD4861;
border: 1px solid #DD4861;
display: block;
width: 50%;
text-align: center;	
margin: 10px 0 0 0;
}

div.seafood b::after{
content: "円";
font-size:2.0rem;
margin: 0 0 0 3px;	
}

div.seafood strong{
	font-size:4.0rem;
	

}
div.seafood strong::after{
content: "円~";
font-size:2.0rem;
margin: 0 0 0 3px;	
}

div.seafood a span{
background-color: #DD4861;
color: #fff;
font-size:1.9rem!important;
padding: 5px 40px;
border-radius: 20px;
margin: 20px 0 13px 0px;	
display: inline-block;
}

.seafood_list_price{
	display: flex!important;
	flex-wrap: wrap;
	 flex-flow:column;
justify-content:space-around!important;

}

.seafood_list_price b::before{
font-size:1.8rem;
width: 100%!important;
margin: 0px 0 0 0;
}


/*.seafood .seafood_list_price > div:first-child{
grid-row: 1 / 1!important;

width: 30%;
	
} */

.seafood_list_price > div div{
display: flex;
flex-wrap:wrap;
align-content: center;
gap:0px 25px;
margin: 0 0 10px 0;
border-bottom: 1px solid #ADADAD;

}

.seafood_list_price > div div span{
display: block;

}

div.seafood_list p{
	font-size:2.0rem;
	margin: 0;
	padding: 0;
}


/* **********************惣菜********************** */


.food_side > div:first-child{
	grid-row: 1 / 2!important;
	grid-column: 1 / 2!important;
margin: 0 0 30px 0;
	
}
.food_side > div:nth-child(2) {
	grid-row: 2 / 3!important;
	grid-column: 1 / 2!important;
	
}



/* **********************価格帯から選ぶ********************** */

.price_category{
 text-align: center;
 padding:50px 0 100px 0;
}

.price_category h2{
 display: inline-block;
 margin: 50px auto;
 font-size:4.5rem;
 font-weight: 700;
 color: #dd4861;
 position: relative;
 padding: 0 20px;
}

.price_category h2::before,.price_category h2::after{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 50px;
  border-color: transparent transparent transparent #dd4861;
display: inline-block;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	 transform:rotate(45deg);


}

.price_category h2::after{
 

 transform:rotate(135deg);


}

.price_category h2 b{
font-size:3.0rem;
}

.price_category h2 strong{
font-size:3.0rem;
}

.price_item{
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin:0 auto 70px auto;
gap:30px 0px;
}

.price_item::after{
 content:"";
  display: block;
  width:30%;
}


.price_category div.price_item>div{
	width: 30%;

}

div.price_item>div span{
background-color: #DD4861;
color: #fff;
font-size: 1.8rem;
padding: 5px 40px;
border-radius: 25px;
display: inline-block;
margin:20px 0 0 0;
}