@charset "UTF-8";
@import url("index.css");

/* PC・スマホ共通 */
* {
    margin: 0;
}
header, footer {
    width: 100%;
}
.header { width: 100%; background: white; box-shadow: 0px 3px 7px rgba(53, 39, 17, 0.2); }
@media screen and (max-width: 768px) { .header { position: relative; } }
.header a { color: #666666; }
.header-upper { display: flex; align-items: center; padding-top: 1rem; }
@media screen and (max-width: 768px) { .header-upper { padding-bottom: 1rem; } }
.header-upper__logo { width: 245px; }
@media screen and (max-width: 768px) { .header-upper__logo { width: 180px; } }
.header-upper__nav { margin-left: auto; }
.header-upper__nav ul li { display: inline; margin-left: 20px; }
@media screen and (max-width: 768px) { .header-upper__nav ul li .btn-s { min-width: inherit; padding: .75rem; }
  .header-upper__nav ul li span { display: none; } }
@media screen and (max-width: 768px) { .header-upper__nav ul li .btn-s { min-width: inherit; padding: .75rem; }
  .header-upper__nav ul li span { display: none; } }
.btn { display: inline-block; font-size: 1.3125rem; background: #EACA76; border: 1px solid #EACA76; color: white; min-width: 413px; max-width: 100%; line-height: 1; text-align: center; padding: 26px; box-sizing: border-box; border-radius: 60px; transition: .4s; }
@media screen and (max-width: 768px) { .btn { min-width: 296px; } }
.btn:hover { background: white; color: #EACA76; }
@media screen and (max-width: 768px) { .header-upper__nav ul li .btn-s { min-width: inherit; padding: .75rem; }
  .header-upper__nav ul li span { display: none; }
  .header-upper__nav ul li .btn-s11 { min-width: inherit; }
  .header-upper__nav ul li .btn-s12 { min-width: inherit; }
  .header-upper__nav ul li .btn-s21 { min-width: inherit; }
  .header-upper__nav ul li .btn-s22 { min-width: inherit; }
  .header-upper__nav ul li .btn-s31 { min-width: inherit; }
  .header-upper__nav ul li .btn-s32 { min-width: inherit; }
  .header-upper__nav ul li span.lnk { display: inline; font-size:0.7em; }
   }

a {
    font-size: 1em;
}


div.cart {
    position: relative;
    width: 100%;
}
.cartbtn {
	position: absolute;
	bottom: 0;
    left: 0;
	cursor: pointer;
}
.animation1 {
	animation: zoom 1300ms ease infinite;
	scale: 1;
}
@keyframes zoom {
	0%{transform: scale(1);}
	15%{transform: scale(1.05);}
	30%{transform: scale(1);}
	45%{transform: scale(1.05);}
	70%{transform: scale(1);}
}
.animation2 {
	animation: vslide 1s linear infinite;
	scale: 1;
}
@keyframes vslide {
	0%{transform:translate(0px,5px);}
	5%{transform:translate(0px,-5px);}
	10%{transform:translate(0px,5px);}
	15%{transform:translate(0px,-5px);}
	20%{transform:translate(0px,5px);}
	25%{transform:translate(0px,-5px);}
	30%{transform:translate(0px,0px)}
}
ul.cartcausion {
    margin: 2rem 1em;
    list-style-type: none;
}
ul.cartcausion li:before {
    content: '※';
    margin-left: -1em;
}

.floating {
	&.is-hidden { visibility: hidden; }
}
.product-buy { position: fixed; bottom: 1rem; right: 1rem; z-index: 30000; transition: .4s; }
@media screen and (max-width: 768px) { .product-buy { bottom: .25rem; right: 0; }
  .product-buy img { width: 150px; } }
.product-buy__close { position: absolute; right: 0; top: .25rem; display: inline-block; cursor: pointer; z-index: 40000; }
.product-buy__close i { font-size: 1.375rem; }
.product-buy__close:hover i { color: #BF972D; }
.product-buy.is-close { right: -250px; }
.product-buy__alw { position: fixed; bottom: 1rem; right: -200px; z-index: 30000; cursor: pointer; transition: .4s; opacity: 1; }
.product-buy__alw:hover { opacity: .7; }
.product-buy__alw.is-close { right: 0; }



form input {
    outline: none;
}

/* PC用 */
body {
    background-image: url("../img/pcbg.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
section {
    margin: 0 auto;
    width: 750px;
    background-color: #FFF;
    box-shadow: 5px 5px 5px #ccc;
}

section img {
    width: 100%;
    max-width:100%;
    height: auto;
}

 h1 {
     margin: 0;
     padding: 0;
     line-height: 0;
     margin-top: 1em;
 }
 h2 {
     margin: 0;
     padding: 0;
     line-height: 0;
 }
h3 {
    margin: 0;
    padding: 0;
    line-height: 0;
 }

header {
    margin: 0 auto;
}
header div {
    width: 100%;
    text-align: center;
}
footer {
    margin: 0 auto;
}
footer div {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: 1em;
}






@media screen and (max-width: 800px) {
	/* 800px以下に適用されるCSS（スマホ用） */
body {
    background-image: none;
}
section {
    margin: 0 auto;
    width: 100%;
    background-color: #FFF;
    box-shadow: 5px 5px 5px #ccc;
}

section img {
    width: 100%;
    max-width:100%;
    height: auto;
}

 h1 {
     margin: 0;
     padding: 0;
     line-height: 0;
     margin-top: 1em;
 }
 h2 {
     margin: 0;
     padding: 0;
     line-height: 0;
 }
h3 {
    margin: 0;
    padding: 0;
    line-height: 0;
 }

header {
    margin: 0 auto;
}
header div {
    width: 100%;
    text-align: center;
}
footer {
    margin: 0 auto;
}
footer div {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    margin-top: 1em;
}
    
}