@charset "EUC-JP";

/* //////////////////////////////////////////// 共通CSS //////////////////////////////////////////// */
body { 
margin:0 auto; 
padding:0;
font-size:100%;
font-weight: normal;
vertical-align:baseline;
width:100%;	
counter-reset: number 0;
font-family: "Zen Old Mincho", serif;
font-style: normal;
}
a {
text-decoration:none;
color: inherit;
letter-spacing:0;
}
a:hover {
opacity:.6;
}
img {
vertical-align: top;
box-sizing: border-box;
max-width:100%; 
height: auto; 
}
#page_top {
width: 50px;
height: 50px;
position: fixed;
right: calc(20% + 10px);
bottom: 10px;
background: #743b14;
border-radius: 50%;
z-index: 9999;
}
@media screen and (max-width:1000px){
#page_top {
right: 10px;
}
}

#page_top a {
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: FontAwesome;
content: '\f106';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
.fadein {
opacity : 0;
transform : translate(0, 40px);
transition : all 1600ms;
}
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}
.forsp {
display:none;
}
.text_main { 
color:#555;
font-size:16px;
line-height:2.5;
/*font-family: 'ヒラギノ角ゴシック W3', sans-serif;*/
}
.text_sub { 
font-size:12px;
line-height:2;
}
.attention {
color:#e7595e!important;
}

/*** 雪玉（共通） ***/
.snows div{
position: fixed; /*画面固定*/
top: -250px; /*初期位置*/
left: 0;
border-radius: 50%; /*丸型*/
background: #fff; /*雪の色*/
opacity: 0.9; /*若干透明に*/
z-index:2;
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){
width: 10px;
height: 10px;
filter: blur(2px); /*ぼかし*/
/* ±240pxの範囲で影(複製)を作る */
box-shadow:
5vw -40px 0 #fff,
10vw 150px #fff,
15vw -230px #fff,
22vw 240px #fff,
30vw 120px #fff,
35vw -180px #fff,
44vw 240px #fff,
50vw 0 #fff,
60vw 180px #fff,
68vw 40px #fff,
74vw -130px #fff,
81vw -240px #fff,
88vw 100px #fff,
95vw 60px #fff;
animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉2 ***/
.snows div:nth-child(2){
width: 10px;
height: 10px;
filter: blur(2px); /*ぼかし*/
/* ±240pxの範囲で影(複製)を作る */
box-shadow:
7vw 220px 0 #fff,
35vw 20px #fff,
68vw 100px #fff,
93vw -190px #fff;
animation: fall 12.5s linear infinite;/*落下*/
animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(3){
width: 14px;
height: 14px;
filter: blur(3px); /*ぼかし*/
/* ±233pxの範囲で影(複製)を作る */
box-shadow:
12vw 5px 0 #fff,
32vw -100px #fff,
45vw -180px #fff,
68vw 40px #fff,
77vw 65px #fff,
94vw 230px #fff;
animation: fall 10s linear infinite; /*落下*/
animation-delay: 6s; /*開始遅延*/
}

/*** 大きめの雪玉 ***/
.snows div:nth-child(4){
width: 20px;
height: 20px;
filter: blur(8px); /*ぼかし*/
/* ±222pxの範囲で影(複製)を作る */
box-shadow:
40vw -200px #fff,
80vw 220px #fff;
animation: fall 7s linear infinite; /*落下*/
animation-delay: 4s; /*遅延*/
}
/*** 落下アニメーション ***/
@keyframes fall{
0%{
top: -250px;
}
100% {
top: calc(100% + 250px);
}
}




/*左右レイアウト*/
#wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
margin:auto;
}

/*右レイアウト*/
#container {
width:80%;
display:block;
position:relative;
/*background-attachment:fixed;
background-position: top left;
background-repeat:no-repeat;
background-size:cover;
background-image: url("../images/background.jpg");*/
background-color: #ffc7c7;
}

/*左レイアウト*/
#fixed-area{
position: -webkit-sticky;/*Safari対策*/
position: sticky;
top:0;
width: 20%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
overflow:hidden;
background-color:#c42d2d;
}


@media screen and (max-width:1000px){
#wrapper {
display: block;
}

#fixed-area {
/*position:relative!important;
width:100%;
height: 100vh;
height:auto;*/
display:none;
}
#container {
width:100%;
}
}
@media screen and (max-width:768px){
#container {
/*padding-left:10px;
padding-right:10px;
box-sizing:border-box;
background-image: none;
background-color:#53535b;
background: linear-gradient(-180deg, #53535b 0%, #424249 100%);*/
}
}





#fixed-area #menu h3::before {
content:"メニュー";
display:block;
font-size:1rem;
letter-spacing:0.04rem;
margin-bottom:1rem;
font-weight:lighter;
}
#fixed-area #menu h3 {
padding:3rem 0 1rem;
font-size:4rem;
color:#fff;
text-align:center;
font-family: 'Bodoni Moda', serif;
}
#fixed-area .menu_inner .sort-btn {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:center;
width:80%;
max-width:800px;
margin:auto;
}
#fixed-area .menu_inner .sort-btn li {
width:100%;
text-align:center;
margin-bottom:10px;
}
#fixed-area .menu_inner .sort-btn li a {
width:100%;
display:inline-block;
box-sizing:border-box;
padding: 1.5rem 0;
font-size:1rem;
color:#fff;
background-color:#d5ba86;
background-color:#743b14;
border:0.5px solid #fff;
}
#fixed-area .menu_inner .sort-btn li a:hover {
opacity:1;
color:#5e2a10;
background-color:#d5ba86;
background-color:#fff;
}



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#header {
position:relative;
height:100vh;
}
#header .header_inner {
position: absolute;
display:block;
width:80%;
max-width:800px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
text-align:center;
}
#header .header_logo {
max-width:140px;
margin:auto;
padding-bottom:2rem;
}
#header .valentine {
width:100%;
height:0;
padding-top:16.13780598368087%;
background-repeat:no-repeat;
background-size: contain;
background-image: url("../images/valentine.png");
margin-bottom:1rem;
}
#header h1 {
font-size:1rem;
color:#fff;
text-align:right;
background-color:#c42d2d;
box-sizing:border-box;
padding:.5rem;
font-weight:400;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.section {
width:98%;
max-width:1000px;
margin:auto;
margin-bottom:6rem;
box-sizing:border-box;
padding:5rem 0;
background-color:rgba(255,255,255,1);
border-radius:30px;
position:relative;
}
.section::after {
content:'';
display:block;
position:absolute;
top:8px;
left:8px;
height:calc(100% - 16px);
width:calc(100% - 16px);
border-radius:30px;
border:double 6px #d5ba86;
box-sizing:border-box;
margin:auto;
text-align:center;
z-index:-1;
}
.section_inner {
position:relative;
padding:0 5%;
box-sizing:border-box;
width:100%;
}
.section_inner .happyvalentineday  {
width:35%;
display:block;
margin:auto;
padding-bottom:2rem;
}
.section_inner h2 {
font-size:2.4rem;
line-height:1.8;
text-align:center;
color:#000;
margin-bottom:2rem;
font-weight: 500;
}
.section_inner .text_main {
text-align:center;
}
.santa {
width:100%;
max-width:300px;
position:absolute;
bottom:-140px;
left:8%;
z-index:1;
}
.santa span {
display:block;
width:100%;
height:0;
padding-top:100%;
background-position: top right;
background-repeat:no-repeat;
background-size:contain;
background-image: url("../images/santa.png");
transform-origin: center;
animation: yurayura 3s linear infinite;
}
@keyframes yurayura {
0% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
.discription .genre_title_img {
padding-top:57.142857142857143%;
background-image: url("../images/table_img.jpg");
}
.discription .text_main {
padding-bottom:2rem;
}

.section_inner .genre_title_wrapper h3:before {
content:'';
display:block;
font-family: 'Bodoni Moda', serif;
counter-increment:number 1;
content:"0"counter(number);
font-weight:bolder;
font-size:5rem;
font-weight:bolder;
}
.section_inner .genre_title_wrapper h3 {
color:#c42d2d;
font-size:2.5rem;
font-weight:600;
margin-bottom:1.8rem;
line-height:1.5;
text-align:center;
letter-spacing:-0.2rem;
}
.genre_title_wrapper p.text_main {
padding-bottom:2rem;
}
.genre_title_img {
width:100%;
height:0;
padding-top:70%;
background-position: top right;
background-repeat:no-repeat;
background-size: contain;
}
#menu_01 .genre_title_img {
background-image: url("../images/sweets_img.jpg");
}
#menu_02 .genre_title_img {
background-image: url("../images/oliveoil_img.jpg");
}
#menu_03 .genre_title_img {
background-image: url("../images/flavoroliveoil_img.jpg");
}
#menu_04 .genre_title_img {
background-image: url("../images/oilset_img.jpg");
}

.section_inner .itemlist_title {
border-top:0.8px solid #000;
border-bottom:0.8px solid #000;
padding:1rem 0;
text-align:center;
font-weight:500;
font-size:1.2rem;
color:#000;
margin-top:2%;
margin-bottom:2%;
}
.section_inner ul.grid {
position: relative;
margin:auto;
width:100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.section_inner ul.grid::after {/*左寄せ修正用*/
content:"";
display:block;
width: 32.666666666666667%;
}
.section_inner ul.grid li.item {
width: 32.666666666666667%;
display: flex;/*高さ調節用*/
padding-bottom:4rem;
}
.section_inner ul.grid li.item .item_warraper {
display: flex;
flex-direction: column;
}
.section_inner ul.grid li.item .thumbnail {
position:relative;
box-sizing:border-box;
margin-bottom:1rem;
}
.section_inner ul.grid li.item h5 {
font-size:1rem;
font-weight:lighter;
line-height:1.6;
color:#000;
}
.section_inner ul.grid li.item .attention {
font-size:.8rem;
line-height:1.6;
}
.section_inner ul.grid .link-bottun {
margin-top:auto;
} 
.section_inner ul.grid li.item span.price {
font-size:2.4rem;
margin:.6rem 0 0;
color:#e13138;
display:inline-block;
/*font-family: 'ヒラギノ明朝 W3', serif;*/
font-family: 'Bodoni Moda', 'ヒラギノ明朝 W3', serif;
font-weight:bold;
line-height:1.2;
}
.section_inner ul.grid li.item span.price::before {
content:"\0a5";
display:inline-block;
}
.section_inner ul.grid li.item .point {
display:flex;
flex-wrap: nowrap;
}
.section_inner ul.grid li.item .point li {
color:#e13138;
display:inline-block;
font-size:.8rem;
border: 1px solid #e13138;
padding:.2rem;
width:fit-content;
margin-right:5px;
margin-bottom:10px;
}
.section_inner ul.grid li.item .button {
background-color:#e13138;
width:100%;
margin:0.3rem auto 0;
border-radius: 3px;
}
.section_inner ul.grid li.item .button a {
display:block;
padding:1rem 0;
color:#fff;
text-align:center;
width:100%;
letter-spacing:.1rem;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
section.giftlink {
text-align:center;
margin:auto;
padding:6rem 0 3rem;
}
section.giftlink .bag_bnr {
margin:0 auto 2rem;
width:90%; 
max-width:600px;
}
section.giftlink ul {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:stretch;
width:90%; 
max-width:800px;
margin:auto;
}
section.giftlink ul li {
width:49%;
}
.giftlink a .text_main {
display:block;
font-size:.8rem;
text-align:center;
padding:1rem 0 2rem;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#footer {
text-align:center;
padding-bottom:4rem;
}
#footer .text_main { 
color:#555;
}
.menu_container ul.guide {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items:center;
max-width:800px;
margin:auto;
}
.menu_container ul.guide li {
width:16.666%;
text-align:center;
font-size:.7rem;
border-right:0.5px solid #555;
box-sizing:border-box;
margin-bottom:5px;
padding:5px 0;
color:#555;
}
.menu_container ul.guide li:first-child {
border-left:0.5px solid #555;
}
#footer .backtoTop {
margin-top:3rem;
text-align:center;
}
#footer .backtoTop img {
margin:0 auto;
padding-bottom:.6rem;
width:140px;
}
#footer small {
font-size:10px;
letter-spacing:0.1;
text-align:center;
}



@media only screen and (max-width:1000px) {
.text_main { 
font-size:14px;
max-width:90%;
margin:auto;
}
.attention {
font-size:0.8rem;
}
.link {
font-size:.8rem;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#header h1 {
text-align:center;
}
.santa {
max-width:250px;
bottom:-120px;
left:5%;
}

.section_inner ul.grid li.item {
width: 49%;
padding-bottom:2rem;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
section.giftlink {
padding-top:4rem;
}
section.giftlink .bag_bnr {
margin:0 auto 2rem;
width:100%; 
max-width:92%; 
}
section.giftlink ul {
max-width:92%; 
}
section.giftlink ul li {
width:100%;
}

#footer {
max-width:100%; 
margin:auto;
box-sizing:border-box;
padding:0 1.5%;
}
#footer .menu_container ul.guide li {
width:33.3333333%;
text-align:center;
font-size:.7rem;
border-right:0.5px solid #555;
box-sizing:border-box;
margin-bottom:5px;
padding:5px 0;
}
#footer .menu_container ul.guide li:first-child {
border-left:0.5px solid #555;
}
#footer .menu_container ul.guide li:nth-child(4) {
border-left:0.5px solid #555;
}





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

/*#header {
width:100%;
height:0;
padding-top:100vh;
background-position: top left;
background-repeat:no-repeat;
background-size: cover;
background-image: url("../images/background-sp.jpg?1");
}*/
.santa {
bottom:-60px;
}
.section_inner h2 {
font-size: 1.5rem;
line-height:1.6;
color:inherit;
writing-mode: vertical-rl;
text-align:left;
margin-left:auto;
margin-right:auto;
}
.section_inner .text_main {
text-align:left;
}

.menu_inner .sort-btn  {
width:100%;
padding-left:20px;
padding-right:20px;
box-sizing:border-box;
}
.menu_inner .sort-btn li {
width:49%;
text-align:center;
margin-bottom:2%;
}
#menu_05 .menu_inner .sort-btn li {
width:100%;
}
.menu_inner .sort-btn li a {
padding: 1.5rem 0;
font-size:0.8rem;
}

.section {
margin-bottom:4rem;
padding:2rem 0;
border-radius:20px;
}
.section::after {
top:5px;
left:5px;
height:calc(100% - 10px);
width:calc(100% - 10px);
border-radius:20px;
border:double 5px #d5ba86;
}
.section_inner {
padding:0 16px;
}
.section_inner .happyvalentineday {
width:60%;
padding-top:2rem;
padding-bottom:2rem;
}
.discription .genre_title_img {
padding-top:100%;
background-image: url("../images/table_img-sp.jpg");
}
.discription .text_main {
padding-bottom:2rem;
}

.section_inner .genre_title_wrapper h3:before {
font-size:4rem;
}

.section_inner .itemlist_title {
margin:2% 0 2%;
font-size:1rem;
}
.section_inner ul.grid {
padding:0;
}
.section_inner .genre_title_wrapper h3 {
font-size:1.8rem;
margin-bottom:1.4rem;
}

.genre_title_img {
width:100%;
height:0;
padding-top:140%;
background-size: contain;
}
#menu_01 .genre_title_img {
background-image: url("../images/sweets_img-sp.jpg");
}
#menu_02 .genre_title_img {
background-image: url("../images/oliveoil_img-sp.jpg");
}
#menu_03 .genre_title_img {
background-image: url("../images/flavoroliveoil_img-sp.jpg");
}
#menu_04 .genre_title_img {
background-image: url("../images/oilset_img-sp.jpg?1");
}
.section_inner ul.grid li.item h5 {
font-size:.7rem;
}
.section_inner ul.grid li.item span.price {
font-size:2rem;
}
.section_inner ul.grid li.item .point li {
font-size:.6rem;
}
.section_inner ul.grid li.item .attention {
font-size:.6rem;
line-height:1.5;
}
}