@charset "utf-8";


/* ---------------------------------------------
	基本css
--------------------------------------------- */
*{
	list-style: none;
}

html { color: #333; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{	margin:0;padding:0; }

body {
    background-color: #fff8e0;
    overflow-x: hidden !important;
    word-break: break-all;
}
p,li,dt,dd,h1,h2,h3,h4,th,td{
	font-size: 16px;
	line-height: 1.7em;
	margin: 0;
	padding: 0;
	color: #1e1e1e;
	font-family: 'Kosugi Maru', sans-serif, "メイリオ",Meiryo, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.mt0{margin-top: 0px !important;}
.mt8{margin-top: 8px !important;}
.mt16{margin-top: 16px !important;}
.mt24{margin-top: 24px !important;}
.mt32{margin-top: 32px !important;}
.mt40{margin-top: 40px !important;}
.mt48{margin-top: 48px !important;}
.mt56{margin-top: 56px !important;}
.mt64{margin-top: 64px !important;}
.mt72{margin-top: 72px !important;}
.mt80{margin-top: 80px !important;}

.mb0{margin-bottom: 0px !important;}
.mb8{margin-bottom: 8px !important;}
.mb16{margin-bottom: 16px !important;}
.mb24{margin-bottom: 24px !important;}
.mb32{margin-bottom: 32px !important;}
.mb40{margin-bottom: 40px !important;}
.mb48{margin-bottom: 48px !important;}
.mb56{margin-bottom: 56px !important;}
.mb64{margin-bottom: 64px !important;}
.mb72{margin-bottom: 72px !important;}
.mb80{margin-bottom: 80px !important;}

.ml0{margin-left: 0px!important;}
.ml8{margin-left: 8px!important;}
.ml12{margin-left: 12px!important;}
.ml16{margin-left: 16px!important;}
.ml24{margin-left: 24px!important;}
.ml32{margin-left: 32px!important;}

.mr0{margin-right: 0px!important;}
.mr8{margin-right: 8px!important;}
.mr12{margin-right: 12px!important;}
.mr16{margin-right: 16px!important;}
.mr24{margin-right: 24px!important;}
.mr32{margin-right: 32px!important;}


*:focus {
    outline: none;
}

.inner {
	width: 100%;
	margin: 0 auto;
}
.pc {display: block !important;}
.sp {display: none !important;}
br.pc {display: block !important;}
br.sp {display: none !important;}
span.pc {display: inline-block !important;}
span.sp {display: none !important;}

a {
    text-decoration: none;
    color: #0d6a82;
}
a:hover {
    text-decoration: underline;
    color: #0b9fc8;
}
a i.fas {
    padding-left: 4px;
    color: #0b9fc8;
}
a:hover i.fas {
    color: #0d6a82;
}


/* ---------------------------------------------
	micro clearfix
--------------------------------------------- */
.clearfix::before, 
.clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
	zoom: 1;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.center {
    text-align: center !important;
}
.right {
    text-align: right !important;
}
.left {
    text-align: left !important;
}
.small {
    font-size: 12px !important;
}
.kome::before {
    content: "※";
    padding-right: 4px;
    text-align: left;
}
.kome.small {
    text-indent: -16px;
    padding-left: 16px;
}
.price{
   text-align: right;
}
.green {
    color: #0c9542;
}
.white {
    color: #fff;
}

/* ---------------------------------------------
	table
--------------------------------------------- */
table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    table-layout: fixed;
    color: #000;
}
table thead{
    border-bottom: 2px solid #007bad;
}
table tr:last-child{
   border-bottom: none
}
table th,
table td {
    padding: 4px 10px 3px;
    border-right: 1px solid #bbb;
    font-size: 13px;
}

table th:last-child,
table td:last-child{
    border: none;
}
tbody th {
    color: #007bad;
}



/*-------------------------------------------------------------------------
		エフェクト
--------------------------------------------------------------------------*/
.effect dt {
  transition: 1.2s;
    -webkit-transition:  1.2s;
} 
.effect dd {
  transition: 1.2s;
    -webkit-transition:  1.2s;
  transition-delay: .2s;
    -webkit-transition-delay:  .2s;
}
.effect-fade {
    opacity: 0; 
    -webkit-transition: all 1.8s ease; 
    transition: all 1.8s ease;
}
.effect-fade.active{
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}
.flash {
    animation: flash 1s linear infinite;
}

.effect-kurukuru.active{
    animation: kurukuru 0.2s linear infinite;
    -webkit-animation: kurukuru 0.2s linear infinite;
    animation-iteration-count: 2;
}
@keyframes kurukuru {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.effect-kuru {
    animation: kuru 0.5s linear infinite;
    -webkit-animation: kuru 0.5s linear infinite;
    animation-iteration-count: 4;
}
@keyframes kuru {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }

}


.effect-swing {
    animation: 3s ease 0s normal none infinite swing;
    transform-origin: center top;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
    -ms-animation:swing 3s infinite ease-in-out;
    -ms-transform-origin:top;
}
@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}

.item {
    opacity: 0;
}
@-webkit-keyframes item_fade {
  100% {
    opacity: 1;
  }
}
@keyframes item_fad {
  100% {
    opacity: 1;
  }
}
.text-focus-in {
    opacity: 0;
}
.text-focus-in.active {
    -webkit-animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.effect-buruburu.active {
    display: block;
    animation: hurueru .3s  infinite;
    animation-iteration-count: 3;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
@-webkit-keyframes hurueru {
    0% {-webkit-transform: translate(0px, 0px) rotateZ(0deg)}
    25% {-webkit-transform: translate(2px, 2px) rotateZ(1deg)}
    50% {-webkit-transform: translate(0px, 2px) rotateZ(0deg)}
    75% {-webkit-transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {-webkit-transform: translate(0px, 0px) rotateZ(0deg)}
}

.effect-poyon.active {
  animation: poyon 1.1s linear 0s 1;
  -webkit-animation: poyon 1.1s linear 0s 1;
}

@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@-webkit-keyframes poyon {
  0%   { -webkit-transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { -webkit-transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { -webkit-transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { -webkit-transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { -webkit-transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes flash {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}


.marker.active{
    background-position: -100% .5em;
}
.marker {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1.8s ease;
    font-weight: bold;
}
/*-------------------------------------------------------------------------
		header
--------------------------------------------------------------------------*/
header {
    position: relative;
}
header .tente {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 100%;
    height: 30vh;
    background-color: #00627d;
    background: linear-gradient(to bottom right, #00627C 50%, #fff0 50%) no-repeat top left/50% 100%, linear-gradient(to bottom left, #0b9fc8 50%, #fff0 50%) no-repeat top right/50% 100%;
}
/*
header .triangle-left {
    border-top: 0 solid transparent;
    border-bottom: 27vh solid transparent;
    border-left: 50vw solid #00627d;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
header .triangle-right {
    border-top: 0 solid transparent;
    border-right: 50vw solid #0b9fc8;
    border-bottom: 30vh solid transparent;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}*/

header .head_text {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 350px;
    display: block;
    z-index: 1;
    right: 0;
    margin: auto;
    text-align: center;
    bottom: 0;
}
header .inner {
    width: 250px;
    position: absolute;
    top: 2vh;
    right: 2vw;
    z-index: 1;
    color: #fff;
}
header .inner > span {
    font-family: auto;
    font-weight: bold;
    padding-right: 1vw;
}
span.fab {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    color: #00627d;
    line-height: 34px;
    text-indent: 5px;
    margin-right: 0.5vw;
}
span.fab.fa-facebook-f {
    text-indent: 12px;
}
span.fab.fa-youtube {
    text-indent: 3.5px;
}
span.fab.fa-instagram {
    text-indent: 6.5px;
}
header .inner span.fab {
    margin-right: 0.2vw;
    color: #0b9fc8;
}

.slick-slide {
    margin-top: -10vh;
}
.slick-slider .img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 100vh;
}
.slick-slider.slick-initialized{
    animation-name: fade-in1;
    animation-duration: 0.5s; 
    animation-timing-function: ease-out;
    animation-delay: 0.1s;
    animation-iteration-count: 1; 
    animation-direction: normal; 
    animation-fill-mode: forwards; 
}
#sp-icon {
    position: fixed;
    right: 2.5vw;
    width: 40px;
    height: 28px;
    display: inline-block;
    color: #fff;
    line-height: 0;
    top: 2.25vh;
    z-index: 9999;
}
#sp-icon:hover {
    cursor: pointer;
    opacity: 0.7;
}
#sp-icon span,
#sp-icon span:before,
#sp-icon span:after {
    display: inline-block;
    width: 40px;
    height: 4px;
    background: #fff;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.3s;
    border-radius: 4px;
    box-shadow: 0px 0px 4px -1px rgb(0 0 0 / 80%);
    -moz-box-shadow: 0px 0px 4px -1px rgb(0 0 0 / 80%);
    -webkit-box-shadow: 0px 0px 4px -1px rgb(0 0 0 / 80%);
    -o-box-shadow: 0px 0px 4px -1px rgb(0 0 0 / 80%);
    -ms-box-shadow: 0px 0px 4px -1px rgb(0 0 0 / 80%);
}

#sp-icon span {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );

}

#sp-icon span:before {
    content: "";
    transform: translateY( -10px ) rotate( 0deg );
}

#sp-icon span:after {
    content: "";
    transform: translateY( 10px ) rotate( 0deg );
}


.sp-open span {
    background: transparent !important;
    box-shadow: none !important;
}

.sp-open span:before {
    transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
    transform: rotate( -45deg ) !important;
}

/*-------------------------------------------------------------------------
		navi
--------------------------------------------------------------------------*/
#menu {
    list-style-type: none;
    width: 45vw;
    height: 100vh;
    background: #00627d;
    /*opacity: 0.98;*/
    position: fixed;
    right: 0px;
    top: 0;
    z-index: 999;
    right : -100%;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    padding: 9vh 4vw 0;
}
#menu.active {
    right : 0px;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#menu dl {
    margin: 0 auto 5vh;
}
#menu dt {
    font-size: 1.8rem;
}
#menu dd {
    text-align: left;
    font-size: 1.1rem;
    line-height: 1;
    margin: 0 2vw;
    position: relative;
}
#menu dd::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 16px;
    border-color: transparent transparent transparent #fff;
    display: block;
    position: absolute;
    left: -30px;
    top: 13px;
}

#menu dd a {
    text-decoration: none;
    display: block;
    padding: 12px 0 10px;
    color: #fff;
}
#menu dd a:hover {
    opacity: 0.2;
}
#menu div.title01 {
    font-size: 1.8rem;
    margin: 0 auto;
}
#menu .sns {
    margin: 1.5vh auto 0;
}
#menu .sns span.fab {
    margin: 0 8px;
}

/*-------------------------------------------------------------------------
		mainImages
--------------------------------------------------------------------------*/
#main {


}
  @keyframes fade-in1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }



/*-------------------------------------------------------------------------
		共通項目CSS
--------------------------------------------------------------------------*/

figure {
    margin: auto;
}
.f-left {
    float: left;
    width: 49%;
    margin-left: 1%;
}
.f-right {
    float: right;
    width: 50%;
}
.title01 {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px  2px 2px #4b3223,
                -2px  2px 2px #4b3223,
                 2px -2px 2px #4b3223,
                -2px -2px 2px #4b3223,
                 2px  0px 2px #4b3223,
                 0px  2px 2px #4b3223,
                -2px  0px 2px #4b3223,
                 0px -2px 2px #7f4600; 
    font-family: Noto sans-serif;
}


h2 {
    font-size: 2.2rem;
}
h2 span.title01 {
    display: block;
    font-size: 2rem;
    padding-left: 6px;
}
h3 {
    font-size: 1.8rem;
    color: #4b3223;
    margin: 1vh auto 2vh;
}

/* ----------------------  パエリアの素シリーズ  ----------------------　*/

#paella_pop {
    max-width: 1450px;
    margin: 7vh auto;
    padding-top: 3vh;
}
#paella_pop figure img {
    margin: 3vh auto 0;
    width: 32%;
    height: auto;
}
#paella_pop > .f-left {
    width: 45%;
}
#paella_pop .f-left .clearfix span {
    width: 20%;
    display: block;
    float: left;
    margin-right: 1.5vw;
}
#paella_pop .f-left .clearfix  span img {
    width: 100%;
    height: auto;
}
#paella_pop .f-left p {
    margin: 0 auto 3vh;
}
#paella_con .box_01 {
    max-width: 1450px;
    margin: 0 auto 5vh;
}
#paella_con .box_01 .f-left {
    margin: 0 auto 2vh;
    padding: 0 2vw;
}
#paella_con .box_01 .f-right {
    margin: 5vh -5vw 0 auto;
}
#paella_con .box_01 .f-right img {
    width: 100%;
}
#paella_con .box_01 h3::before {
    background: url(../images/ttl01.webp) 0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 3vh auto 0;
}

#paella_con .box_01 ol {
	counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em 3%;
    border: dashed 1px #4b3223;
    width: 70%;
    margin: 0 0 2vh;
}

#paella_con .box_01 ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 40px;
}

#paella_con .box_01 ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #196a82;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#paella_con .box_02 .f-right {
    padding-right: 5vw;
}
#paella_con .box_02 .f-left {
    width: 50%;
    margin: 10vh 0 0 -5vw;
}
#paella_con .box_02 .f-left img {
    width: 100%;
}
#paella_con .box_02 h3::before {
    background: url(../images/ttl02.webp) center center no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#paella_con .box_02 iframe {
    margin: 3vh auto 0;
}


#paella_con .box_03 {
    max-width: 1080px;
    margin: 5vh auto 0;
    text-align: center;
}
#paella_con .box_03 h3::before {
    background: url(../images/ttl03.webp) center center no-repeat;
    content: "";
    display: inline-block;
    width: 208px;
    height: 133px;
    vertical-align: bottom;
    margin-bottom: -15px;
    margin-right: 2vw;
    margin-left: -12vw;
}
#paella_con .box_03 figure {
    float: left;
    position: relative;
    width: 33%;
    margin: 5vh auto 0;
}
#paella_con .box_03 figcaption {
    position: absolute;
    top: 0vh;
    width: 110px;
    height: 110px;
    background-color: #00627d;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 30px;
    left: -1.5vw;
}
#paella_con .box_03 .clearfix {
    margin: 0 3%;
}


/*
#paella_product {
    max-width: 1450px;
    margin: 1vh auto 0;
}

#greenbur_product .product_list {
    width: 60%;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto 10vh;
}

.product_list {
    margin: 0 -1.16% 0 -1.17%;

    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.product_list > div {
    width: 31%;
    float: left;
    margin: 0 1.16% 20px 1.17%;
}
@supports (display: grid) {
    .grid-container {
        margin: 0;
    }

    .grid-item {
        width: auto;
        margin: 0;
    }
}
*/


/*-------------------------------------------------------------------------
    ホットサンド
--------------------------------------------------------------------------*/

#hotsand_product {
    max-width: 1450px;
    margin: 1vh auto 0;
}
#hotsand_pop {
    max-width: 1450px;
    margin: 7vh auto 5vh;
    padding-top: 3vh;
}
#hotsand_pop figure img {
    width: 32%;
    margin: 2vh auto 0;
}
#hotsand_pop > .f-left {
    margin: auto 2%;
    float: none;
    width: auto;
}
#hotsand_pop > .f-right {
    display: flex;
    float: none;
    width: auto;
    justify-content: space-evenly;
    padding: 2vh 0.5%;
}
#hotsand_pop .f-left p {
    margin: 0 auto 3vh;
}
#hotsand_con {
  border-bottom: 40px solid #0b9fc8;
}
#hotsand_con .box_01 {
    max-width: 1450px;
    margin: 0 auto 1vh;
}
#hotsand_con .box_01 .f-left {
    margin: 0 auto 2vh;
    padding: 0 2vw;
}
#hotsand_con .box_01 .f-right {
    margin: 6vh auto 0;
}
#hotsand_pop > .f-right li {
    position: relative;
}
#hotsand_pop > .f-right li img {
    width: 100%;
    height: auto;
}

#hotsand_pop > .f-right li span {
    position: absolute;
    font-size: 16px;
    letter-spacing: -0.06em;
    font-weight: bold;
    text-align: center;
    transform:rotate(25deg);
    padding-top: 22px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    top: -3vh;
    right: 0.5vw;
    animation: flash2 2s linear infinite;
}
#hotsand_pop > .f-right li .r_shadow {
    box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -moz-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -webkit-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -o-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -ms-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
}
@keyframes flash2 {
  0%,35%,60%,100%{
    opacity: 1;
    background-color: #0b9fc8;
    color: #fff;
  }
  25%{
    opacity: 1;
    background:#e60012;
    color: #fff;
  }
  50%{
    opacity: 1;
    background:#497f2b;
    color: #000;
  }
  75%{
    opacity: 1;
    background:#fff100;
    color: #000;
  }
}




#hotsand_con .box_01 h3::before {
    background: url(../images/ttl01.webp) 0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#hotsand_con .box_01 ol {
  counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em 3%;
    border: dashed 1px #4b3223;
    width: 70%;
    margin: 0 0 2vh;
}
#hotsand_con .box_01 ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 40px;
}
#hotsand_con .box_01 ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #196a82;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#hotsand_con .box_02 .f-right {
    padding-right: 5vw;
    position: relative;
}
#hotsand_con .box_02 .f-right .popup {
    position: absolute;
    width: 50%;
    height: 230px;
    top: -10vh;
    right: 1vw;
    transform: rotate( 12deg );
    max-width: 360px;
}
#hotsand_con .box_02 .popup img {
    width: 100%;
    height: auto;
}
#hotsand_con .box_02 .f-left {
    width: 48%;
    margin: 17vh auto 0%;
}
#hotsand_con .box_02 .f-left img {
    max-width: 100%;
}
#hotsand_con .box_02 h3::before {
    background: url(../images/ttl02.webp) center center no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#hotsand_con .box_02 iframe {
    margin: 3vh auto 0;
}
#hotsand_con .box_03 {
    max-width: 1450px;
    margin: 10vh auto 0;
    text-align: center;
}
#hotsand_con .box_03 .aji_box {
    display: flex;
    justify-content: space-around;
}
#hotsand_con .box_03 h3 {
    text-align: left;
    margin-left: 208px
}

#hotsand_con .box_03 h3::before {
    background: url(../images/ttl03.webp) center center no-repeat;
    content: "";
    display: inline-block;
    width: 208px;
    height: 133px;
    vertical-align: bottom;
    margin-bottom: -15px;
    margin-right: 2vw;
    margin-left: -12vw;
}
#hotsand_con .box_03 figure {
    position: relative;
    margin: 8vh 1.5% 0;
}
#hotsand_con .box_03 figcaption {
    position: absolute;
    top: -4vh;
    width: 110px;
    height: 110px;
    background-color: #0b9fc8;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 3.5vh;
    left: -1.5vw;
    text-align: center;
}





/*-------------------------------------------------------------------------
    グリーンバーガー
--------------------------------------------------------------------------*/

#greenbur_product {
    max-width: 1450px;
    margin: 1vh auto 0;
}
#greenbur_pop {
    max-width: 1450px;
    margin: 7vh auto -10vh;
    padding-top: 3vh;
}
#greenbur_pop figure:first-child img {
    margin: 0vh auto 2vh;
}
#greenbur_pop figure:last-child img {
    width: 40%;
    margin: 0vh auto;
}
#greenbur_pop figure img {
    margin: 0vh auto 2vh;
}
#greenbur_pop > .f-left {
    width: 45%;
    margin-left: 2%;
}
#greenbur_pop > .f-right {
    width: 52%;
}
#greenbur_pop .f-left p {
    margin: 0 auto 3vh;
}
#greenbur_con {
    position: relative;
}
#greenbur_con::after {
    background: #00617c;
    content: "";
    width: 100%;
    height: 190px;
    display: block;
    position: absolute;
    bottom: -16px;
    z-index: -1;
}
#greenbur_con .box_01 {
    max-width: 1450px;
    margin: 0 auto 1vh;
}
#greenbur_con .box_01 .f-left {
    margin: -10vh auto 2vh;
    padding: 0 0 0 2vw;
}
#greenbur_con .box_02 .f-right {
    margin: 0 auto 2vh;
    padding: 0 2vw;
}
#greenbur_con .box_01 figure {
    margin: 2vh auto 1vh -10px;
}
#greenbur_con .box_01 .f-right {
    margin: 6vh auto 0;
}
#greenbur_con .box_01 h3::before {
    background: url(../images/ttl01.webp) 0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#greenbur_con .box_02 .f-left {
    width: 48%;
    margin: -4vh auto 0 -2%;
}
#greenbur_con .box_02 .f-left img {
    width: 100%;
    max-width: 100%;
}
#greenbur_con .box_02 h3::before {
    background: url(../images/ttl02.webp) center center no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#greenbur_con .box_02 .f-right figure {
    margin: 1.5vh auto ;
}
#greenbur_con .box_03 {
    max-width: 1450px;
    margin: 3vh auto 0;
    text-align: center;
}
#greenbur_con .box_03 h3 {
    text-align: left;
    margin-left: 208px
}
#greenbur_con .box_03 h3::before {
    background: url(../images/ttl03.webp) center center no-repeat;
    content: "";
    display: inline-block;
    width: 208px;
    height: 133px;
    vertical-align: bottom;
    margin-bottom: -15px;
    margin-right: 2vw;
    margin-left: -12vw;
}
#greenbur_con .box_03 .clearfix {
    max-width: 1200px;
    margin: 5vh auto 2vh;
}
#greenbur_con .box_03 figure {
    float: left;
    position: relative;
    width: 47%;
    margin: 8vh 1.5% 0;
}
#greenbur_con .box_03 figcaption {
    position: absolute;
    top: -2vh;
    width: 110px;
    height: 110px;
    background-color: #0b9fc8;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 35px;
    left: 1.5vw;
    text-align: center;
}



/*-------------------------------------------------------------------------
    キャンパーノアヒージョ
--------------------------------------------------------------------------*/

#ajillo_pop {
    max-width: 1450px;
    margin: 7vh auto -20vh;
    padding-top: 3vh;
}
#ajillo_pop figure img {
    width: 100%;
    margin: 2vh auto 0;
}
#ajillo_pop > .f-left {
    width: 52%;
    margin-left: 2%;
}
#ajillo_pop > .f-right {
    width: 25%;
    margin-right: 10%;
}
#ajillo_pop .f-left p {
    margin: 0 auto 3vh;
}
#ajillo_con {
  border-bottom: 32px solid #0b9fc8;
}
#ajillo_con::after {
    width: 100%;
    content:  "";
    height: 118px;
    background: url(../images/ajillo_li01.webp) 0 0 repeat;
    display: block;
}
#ajillo_con .box_01 {
    max-width: 1450px;
    margin: 0 auto 1vh;
}
#ajillo_con .box_01 .f-left {
    margin: 3vh auto 2vh;
    padding: 0 2vw;
}
#ajillo_con .box_01 .f-right {
    margin: 10vh -6vw 0 auto;
}
#ajillo_con .box_01 h3::before {
    background: url(../images/ttl01.webp) 0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#ajillo_con .box_01 ol {
  counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em 3%;
    border: dashed 1px #4b3223;
    width: 70%;
    margin: 0 0 2vh;
}
#ajillo_con .box_01 .original {
    width: 50%;
    max-width:  310px;
    float: left;
    margin: 3vh auto 0 ;
    padding-right: 50px;
}
#ajillo_con .box_01 .original img {
    max-width: 100%;
}
#ajillo_con .box_01 .original figcaption {
    position: absolute;
    bottom: -2vh;
    width: 110px;
    height: 110px;
    background-color: #0d6a82;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 24px;
    right: 1.5vw;
    text-align: center;
}

#ajillo_con .box_02 .f-right {
    padding-right: 5vw;
    position: relative;
    margin-top: -8vh;
}
#ajillo_con .box_02 .f-right .popup {
    position: absolute;
    width: 50%;
    height: 230px;
    top: -10vh;
    right: 1vw;
    transform: rotate( 12deg );
    max-width: 360px;
}
#ajillo_con .box_02 .popup img {
    width: 100%;
    height: auto;
}
#ajillo_con .box_02 .f-left {
    width: 48%;
    margin: -3vh 0 0% -8%;
}
#ajillo_con .box_02 .f-left img {
    max-width: 100%;
}
#ajillo_con .box_02 h3::before {
    background: url(../images/ttl02.webp) center center no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#ajillo_con .box_02 iframe {
    margin: 3vh auto 0;
}
#ajillo_con .box_03 {
    max-width: 1450px;
    margin: 10vh auto 0;
}
#ajillo_con .box_03 h3::before {
    background: url(../images/ttl03.webp)  0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#ajillo_con .box_03 .f-left {
    margin: -10vh auto 0;
}
#ajillo_con .box_03 .f-right {
    padding-right: 5vw;
}
#ajillo_con .box_03 .f-right .c-pop {
    float: left;
    width: 110px;
    height: 110px;
    background-color: #0b9fc8;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    padding-top: 44px;
    text-align: center;
    margin: 0 2%;
    letter-spacing: 0.08em;
}
#ajillo_con .box_03 .recipe_box {
    width: 49%;
    float: left;
    background-color: #fff;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -o-border-radius: 24px;
    -ms-border-radius: 24px;
    margin: 3vh auto 10vh;
}
#ajillo_con .box_03 .recipe_box.recipe02 {
    float: right;
}
#ajillo_con .box_03 .recipe_box h4 {
    background-color: #f2bc00;
    text-align: center;
    border-radius: 24px 24px 0 0;
    -webkit-border-radius: 24px 24px 0 0;
    -moz-border-radius: 24px 24px 0 0;
    -o-border-radius: 24px 24px 0 0;
    -ms-border-radius: 24px 24px 0 0;
    padding: 1vh 2%;
    color: #4a2813;
    letter-spacing: 0.06em;
    font-size: 1.4rem;
}
#ajillo_con .box_03 .recipe_box.recipe02 h4 {
    background-color: #f07672;
}
#ajillo_con .box_03 .recipe_box figure {
    float: left;
    position: relative;
    width: 38%;
    margin: 3.5vh 5% 0;
}
#ajillo_con .box_03 .recipe_box figure img {
    width: 100%;
}
#ajillo_con .box_03 .recipe_box .zairyo {
    width: 47%;
    float: right;
    margin: 3.5vh 5% 0 0;
}
#ajillo_con .box_03 .recipe_box .zairyo h5 {
    color: #4a2813;
    background-color: #f2bc00;
    font-size: 1.2rem;
    padding: 6px 2% 4px;
    text-align: center;
    margin: 0 auto 1.5vh;
}
#ajillo_con .box_03 .recipe_box.recipe02 .zairyo h5 {
    background-color: #f07672;
}
#ajillo_con .box_03 .recipe_box .zairyo ul li {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.8vh;
}
#ajillo_con .box_03 .recipe_box .zairyo ul li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0a9';
    position: absolute;
    left :  0.2rem;
    color: #f2bc00;
    font-weight: 900;
    margin-right: 4px;
}
#ajillo_con .box_03 .recipe_box.recipe02 .zairyo ul li::before {
    color: #f07672;
}
#ajillo_con .box_03 .recipe_txt {
    clear: both;
    margin: 2vh 5% 2vh;
    counter-reset: number 0;
}

#ajillo_con .box_03 ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 40px;
}
#ajillo_con .box_03 ol li::before{
  position: absolute;
  counter-increment: number 1;
  content: counter(number) " ";
  /*数字のデザイン変える*/
  display:inline-block;
  background: #f2bc00;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#ajillo_con .box_03 .recipe02 ol li::before{
  background: #f07672;
}
#ajillo_con .box_03 ol li span {
    display: inline-block;
    background: #f2bc00;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight: bold;
    width: 20px;
    height: 24px;
    line-height: 25px;
    text-align: center;
    padding-left: 1px;
    margin-right: 4px;
}
#ajillo_con .box_03 .recipe02 ol li span {
    background: #f07672;
}

/*-------------------------------------------------------------------------
    フォンデュソース
--------------------------------------------------------------------------*/

#fondue_product {
    max-width: 1450px;
    margin: 1vh auto 0;

}
#fondue_pop {
    max-width: 1450px;
    margin: 5vh auto -10vh;
    padding-top: 5vh;
}
#fondue_pop > .f-left {
    width: 45%;
    margin-left: 2%;
}
#fondue_pop > .f-right {
    display: flex;
}
#fondue_pop > .f-right li {
    position: relative;
}

#fondue_pop > .f-right li span {
    position: absolute;
    font-size: 16px;
    letter-spacing: -0.06em;
    font-weight: bold;
    text-align: center;
    transform:rotate(25deg);
    padding-top: 22px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    top: -2vh;
    right: 1.5vw;
    animation: flash2 2s linear infinite;
}
#fondue_pop > .f-right li .r_shadow {
    box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -moz-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -webkit-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -o-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
    -ms-box-shadow:2px 2px 8px -1px rgba(0,0,0,0.41);
}
@keyframes flash2 {
  0%,35%,60%,100%{
    opacity: 1;
    background-color: #0b9fc8;
    color: #fff;
  }
  25%{
    opacity: 1;
    background:#e60012;
    color: #fff;
  }
  50%{
    opacity: 1;
    background:#497f2b;
    color: #000;
  }
  75%{
    opacity: 1;
    background:#fff100;
    color: #000;
  }
}


#fondue_pop .f-left p {
    margin: 0 auto 3vh;
}
#fondue_con {
    position: relative;
}
#fondue_con::after {
    background: #df9c01;
    content: "";
    width: 100%;
    height: 190px;
    display: block;
    position: absolute;
    bottom: -16px;
    z-index: -1;
}
#fondue_con .box_01 {
    max-width: 1450px;
    margin: 0 auto 1vh;
}
#fondue_con .box_01 .f-left {
    margin: 2vh auto 2vh;
    padding: 0 0 0 2vw;
}
#fondue_con .box_02 .f-right {
    margin: 0 auto 2vh;
    padding: 0 2vw;
}
#fondue_con .box_01 figure {
    margin: 2vh auto 1vh -10px;
}
#fondue_con .box_01 .f-right {
    margin: 6vh auto 0;
}
#fondue_con .box_01 h3::before {
    background: url(../images/ttl01.webp) 0 0 no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#fondue_con .box_02 .f-left {
    width: 45%;
    margin: -20vh auto 0 -3%;
}
#fondue_con .box_02 .f-left img {
    width: 100%;
}
#fondue_con .box_02 .f-left img {
    max-width: 100%;
}
#fondue_con .box_02 h3::before {
    background: url(../images/ttl02.webp) center center no-repeat;
    content: "";
    display: block;
    width: 208px;
    height: 133px;
    margin-bottom: 3vh;
}
#fondue_con .box_02 .f-right figure {
    margin: 1.5vh auto ;
}
#fondue_con .box_03 {
    max-width: 1450px;
    margin: 10vh auto 0;
    text-align: center;
}
#fondue_con .box_03 h3 {
    margin-left: 208px
}
#fondue_con .box_03 h3::before {
    background: url(../images/ttl03.webp) center center no-repeat;
    content: "";
    display: inline-block;
    width: 208px;
    height: 133px;
    vertical-align: bottom;
    margin-bottom: -15px;
    margin-right: 2vw;
    margin-left: -12vw;
}
#fondue_con .box_03 .clearfix {
    max-width: 1200px;
    margin: 5vh auto 2vh;
}
#fondue_con .box_03 figure {
    float: left;
    position: relative;
    width: 47%;
    margin: 8vh 1.5% 0;
}
#fondue_con .box_03 figcaption {
    position: absolute;
    top: -2vh;
    width: 110px;
    height: 110px;
    background-color: #00617c;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 35px;
    left: 1.5vw;
    text-align: center;
}









#lineup {
    background-color: #00627d;
    margin-top: -33px;
}
#lineup h2 {
    text-align: center;
    color: #fff;
    padding-top: 8vh;
    margin-bottom: 7vh;
}
#lineup h2 span.title01 {
    width: 100%;
    display: inline-block;
}
#lineup h3 {
    padding: 0.2rem 2%;
    font-size: 1rem;
    text-align: center;
    margin: auto;
    border-bottom: 0.5vh solid #fff100;
    border-top: 0.5vh solid #fff100;
    display: initial;
}
#lineup img {
    display: block;
    margin: 2vh auto;
}
#product {
    max-width: 1450px;
    margin: 1vh auto 0;
    padding-bottom: 10vh;
}

.product_list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:auto;
    -ms-grid-rows:auto ;
    column-gap: 3%;
    -webkit-column-gap:3%;
    row-gap: 10vh;
    margin: 0 3% 10vh;
}
.product_list.two {
    display: grid;
    grid-template-columns: repeat(auto-fit, 31.5%);
    row-gap: 24px;
    justify-content: center;
}
.product_box {
    background-color: #fff;
    text-align: center;
    position: relative;
    padding-bottom: 6vh;
}
.product_box::before {
    content: "";
    display: block;
    width: 100.3%;
    height: 7vh;
    background-color: #00627d;
    background: linear-gradient(to bottom right, #00627d 50%, #fff 50%) no-repeat top left/50% 100%,
                linear-gradient(to bottom left, #00627d 50%, #fff 50%) no-repeat top right/50% 100%;
}
.product_box span.product_new {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 110px;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    top: 2vh;
    right: -1.5vw;
    background-color: #e60012;
    color: #fff;
    text-indent: -1px;
}
.product_box h4 {
    font-size: 20px;
    margin: 1vh auto 2vh;
    color: #4b3223;
}
.product_box p {
    font-size: 0.81rem;
    margin: 2vh 2vw 0;
    text-align: left;
    padding: 1.5vh 0;
    border-top: 1px solid #848484;
}
.product_box dl {
    margin: 0 2vw 32px;
    border-bottom: 1px solid #848484;
}
.product_box dt {
    border-top: 1px solid #848484;
    float: left;
    padding: 1vh 0  1vh 5%;
    font-size: 0.85rem;
    font-weight: bold;
    width: 60%;
    text-align: left;
}
.product_box dd {
    border-top: 1px solid #848484;
    float: right;
    padding: 1vh 5% 1vh 0;
    font-size: 0.85rem;
    width: 40%;
    text-align: right;
}
.product_box .link {
    margin: auto;
    background-color: #fff100;
    height: 6vh;
    line-height: 6vh;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.product_box .link i {
    padding-left: 0.5vw
}
.product_box .link a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    font-weight: bold;
}
.product_box .link a i.fas {
    color: #00627d;
    font-size: 14px;
    vertical-align: text-top;
    padding-top: 3px;
}
.product_box .link:hover {
    opacity: 0.4;
    filter: alpha(opacity=40);
}



/*-------------------------------------------------------------------------
		バナー
--------------------------------------------------------------------------*/
#bnr {
    background-color:  #fff;
}
.bnr_body {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2vw;
    row-gap: 3vh;
    padding: 6vh 0;
}
.bnr_body img {
    width: 100%;
    background-color: #fff;
    border: 1px solid #e3e3e3;
}



/*-------------------------------------------------------------------------
		footer
--------------------------------------------------------------------------*/

footer {
    background-color: #0b9fc8;
    padding: 4vh 0 2vh;
    color: #fff;
}
.footer_inner {
    max-width: 1450px;
    margin: auto;
    width: 95%; 
}
.footer_inner p {
    color: #00556d;
}
ul.footer_link {
    margin: 0.5vh auto 1vh;
    letter-spacing: 0.08em;
    /*float: left;
    width: 70%;*/
}
footer li {
    position: relative;
    float: left;
    margin-right: 2vw;
}
footer li a {
    font-size: 12px;
    text-decoration: none;
    color: #fff;
}
footer li a:hover {
    color: #a3deef;
}
footer li i {
    padding-left: 0.3vw;
}
.footer_sns {
    width: auto;
    float: right;
}
.footer_sns span.fab {
    color: #0b9fc8;
}

.gotop {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #00627d;
    opacity: 0.95;
    border-radius: 50%;
    z-index: 9;
    border: 1px solid rgba(255,255,255,0.35);
}
.gotop a{
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    text-decoration: none;
}
.gotop a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f062';
    font-size: 30px;
    color: #fff;
    position: absolute;
    width: 35px;
    height: 35px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.copyright {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-align: center;
    margin: 6vh auto 0;
}



/*-------------------------------------------------------------------------
		IE対応
--------------------------------------------------------------------------*/

_:-ms-lang(x)::-ms-backdrop, body {
  .bnr_body > div {
  	float: left;
  	width: 32%;
  	margin-right: 1%;
  	margin-bottom: 3vh;
  }
  header .tente {
  	display: none;
  }
  .product_list {
  	display: block;
  }
  .product_list > div {
  	float: left;
  	width: 32%;
  	margin-right: 1%;
  	margin-bottom: 3vh;
  }
}

@media all and (-ms-high-contrast:none) {
  .bnr_body > div {
  	float: left;
  	width: 32%;
  	margin-right: 1%;
  	margin-bottom: 3vh;
  }
  header .tente {
  	display: none;
  }
  .product_list {
  	display: block;
  }
  .product_list > div {
  	float: left;
  	width: 32%;
  	margin-right: 1%;
  	margin-bottom: 3vh;
  }
}