@charset "UTF-8";

/*
==================
--- resetcss ---
====================
*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ul{
    list-style: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

img{
    max-width: 100%;
}

body.is-fixed{
  height: 100%;
  width: 100%;
  position: fixed;
  overflow-y: scroll;
}

/*
==================
--- pc ---
==================
*/

@media screen and (min-width: 641px){

/*
==================
--- common ---
==================
*/
.contents{
	width: 1280px;
	margin:200px auto 50px;
}
    
.contents img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }    

main{
    display: block;
}
    
.letter {
    text-align: center;
    margin-top: 200px;
    }
    
.letter p {
    line-height: 20px;
    }


    
/*
==================
--- nav ---
==================
*/
.g-nav{
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 99;
}

.g-nav.open{
    right: 0;
    position: absolute;
}

#top{
    position: relative;
}

.hamWrap {
    position: fixed;
    width: 640px;
    top: 0;
    z-index: 100;
}


.ham {
    position: absolute;
    width: 64px;
    height: 64px;
    cursor: pointer;
    top: 15px;
    right: 10px;
    border: 2px solid #fff;
    z-index: 100;
}

.ham_line {
    position: absolute;
    left: 11px;
    width: 42px;
    height: 2px;
    color: #fff;
    background-color: #fff;
    z-index: 111;
}

.ham_line1 {
    top: 17px;
}
.ham_line2 {
    top: 32px;
}
.ham_line3 {
    top: 47px;
}

.ham_line {
    transition: all 0.3s;
}

.ham_line1.open{
    top: 30px;
    transform: rotate(45deg);
}

.ham_line2.open{
    opacity: 0;
}

.ham_line3.open{
    top: 30px;
    transform: rotate(-45deg);
}

.g-nav-bg{
    content: "";
    width: 550px;
    height: 100vh;
    background:-moz-linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);; /* Firefox */
    background:-webkit-linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);;/* safari Chrome */
    background:linear-gradient(to bottom, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%); /* IE */
/*    background: linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);*/
    box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), -13px 0px 8px -1px rgba(0,0,0,0.5);
}

.g-nav-bg p img{
    position: absolute;
    top: 80px;
    left: 60px;
}

/*.menu-bg{
    display: block;
    text-align: right;
    filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.3));
}*/

/*.menu-bg img{
    height: 100vh;
    width: 80%;
    box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), -13px 0px 8px -1px rgba(0,0,0,0.3);
}*/

.nav-btn{
    display: block;
    flex-direction: column;
}

nav{
    position: relative;
}

nav ul li img{
    width: 425px;
    max-width: initial;
}

nav ul li{
    text-align: right;
}

nav ul li:nth-child(1){
    position: absolute;
    top: 330px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(2){
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(3){
    position: absolute;
    top: 470px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(4){
    position: absolute;
    top: 540px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(5){
    position: absolute;
    top: 610px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}


/*
==================
--- Link ---
==================
*/
.link-btn{
    position: relative;
}

.link ul li img{
    width: 470px;
    max-width: initial;
}

.link ul li:nth-child(1){
    position: absolute;
    top: -360px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(2){
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(3){
    position: absolute;
    top: -240px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(4){
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(5){
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

/*
==================
--- campaign btn ---
==================
*/
.CampaignBtn_Cake{
    display: block;
    position: relative;
}

.CampaignBtn_Sub{
    position: absolute;
    top: -40px;
    right: -20px;
}


#ChristmasCake{
    position: relative;
}

.CampaignBtn {
    position: absolute;
    bottom: 20px;
    left: calc((100% - 470px) / 2);
    z-index: 10;
    max-width: initial;
}

#ChristmasDeli{
    position: relative;
}

.CampaignBtn_Deli{
    position: relative;
    display: block;
}

.CampaignBtnDeli{
    position: absolute;
    bottom: calc(100% - 65%);
    left: calc((100% - 470px) / 2);
    z-index: 10;
    max-width: initial;
}

.CampaignBtn_Deli_Sub{
    position: absolute;
    top: -40px;
    right: -20px;
}

}

/*
==================
--- sp ---
==================
*/
@media screen and (max-width: 640px){

a:hover{
    opacity: .5;
}

/*
==================
--- nav ---
==================
*/
.g-nav{
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 99;
}

.g-nav.open{
    right: 0;
}

#top{
    position: relative;
}

.ham {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 100;
    border: 2px solid #fff;
}

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

.ham_line {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    color: #fff;
    background-color: #fff;
    z-index: 111;
}

.ham_line1 {
    top: 10px;
}
.ham_line2 {
    top: 20px;
}
.ham_line3 {
    top: 30px;
}

.ham_line1.open{
    top: 20px;
    transform: rotate(45deg);
}

.ham_line2.open{
    opacity: 0;
}

.ham_line3.open{
    top: 20px;
    transform: rotate(-45deg);
}

.g-nav-bg{
    content: "";
    width: 330px;
    height: 100vh;
    background:-moz-linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);; /* Firefox */
    background:-webkit-linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);;/* safari Chrome */
    background:linear-gradient(to bottom, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%); /* IE */
/*    background: linear-gradient(180deg, rgba(140,35,50,1) 0%, rgba(117,23,39,1) 59%, rgba(93,15,31,1) 100%);*/
    box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), -13px 0px 8px -1px rgba(0,0,0,0.5);
}

.g-nav-bg p img{
    width: 45%;
    position: absolute;
    top: 80px;
    left: 35px;
}


.nav-btn{
    display: block;
    flex-direction: column;
}

nav{
    position: relative;
    text-align: right;
}

nav ul li img{
    display: block;
    width: 250px;
    max-width: initial;
}

nav ul li{
    text-align: right;
}

nav ul li:nth-child(1){
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(2){
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(3){
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(4){
    position: absolute;
    top: 320px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}

nav ul li:nth-child(5){
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 88;
}







/*
==================
--- Link ---
==================
*/
.link-btn{
    position: relative;
}

.link ul li img{
    width: 300px;
    max-width: initial;
}

.link ul li:nth-child(1){
    position: absolute;
    top: -210px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(2){
    position: absolute;
    top: -170px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(3){
    position: absolute;
    top: -130px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(4){
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.link ul li:nth-child(5){
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

/*
==================
--- campaign btn ---
==================
*/
.CampaignBtn_Cake{
    display: block;
    position: relative;
}

.CampaignBtn_Cake img:first-child, .CampaignBtnDeli img:first-child{
    width: 300px;
}

.CampaignBtn_Cake img:last-child, .CampaignBtnDeli img:last-child{
    width: 90px;
}

.CampaignBtn_Sub{
    position: absolute;
    top: -20px;
    right: -10px;
}


#ChristmasCake{
    position: relative;
}

.CampaignBtn {
    position: absolute;
    bottom: 10px;
    left: calc((100% - 300px) / 2);
    z-index: 10;
    max-width: initial;
}

#ChristmasDeli{
    position: relative;
}

.CampaignBtn_Deli{
    position: relative;
    display: block;
}

.CampaignBtnDeli{
    position: absolute;
    bottom: calc(100% - 65%);
    left: calc((100% - 300px) / 2);
    z-index: 10;
    max-width: initial;
}

.CampaignBtn_Deli_Sub{
    position: absolute;
    top: -20px;
    right: -10px;
}



}