@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
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;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP', sans-serif;
font-size:18px;
text-align:left;
color:#191919;
min-width:1200px;
overflow-x: hidden;
}
@media screen and (max-width:767px){
html,body{ font-size:3.5vw; min-width:240px; max-width:767px;}
}

img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{ margin:0 auto; text-align:center;}

p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
p{ line-height:1.6em;}
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

.clear{ clear:both;}
.clearfix:after{ margin:0; padding:0; visibility:hidden; content:"."; display:block; line-height:0; clear:both;}

/*ヘッダー*/
#header{ position: fixed; left: 0; right: 0; top: 0; background: rgba(255,255,255,0.8); z-index: 5; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
#menu{ width: 1200px; padding:5px 20px; margin: 0 auto; display: table; table-layout: fixed;}
#header #logo{ display: table-cell; vertical-align: middle; width: 150px;}
#header #menu_nav{ display: table-cell; vertical-align: middle; text-align: center;}
#header #menu_nav ul{ letter-spacing: -1em;}
#header #menu_nav ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0;}
#header #menu_nav ul li a{ font-weight: bold; font-size: 24px; font-family: 'Noto Serif JP', serif; transition: 0.3s; position: relative;}
#header #menu_nav ul li a:hover{ color: #e60012;}
#header #menu_nav ul li a:after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; width:0; margin: auto; height: 2px; background: #e60012; opacity: 0; transition: 0.3s;}
#header #menu_nav ul li a:hover:after{ width: 100%; opacity: 1.0;}
#header #menu_nav ul li:before{ content: "｜"; margin: 0 1em;}
#header #menu_nav ul li:last-child:after{ content: "｜"; margin: 0 1em;}
#header #sns{ display: table-cell; vertical-align: middle; text-align: right; width: 264px;}
#header #sns ul{ letter-spacing: -1em;}
#header #sns ul li{ display: inline-block; vertical-align: middle; letter-spacing: normal;}
#header #sns ul li.twitter img{ width: 72px;}
#header #sns ul li.twitter{ margin-right: 20px;}
@media screen and (max-width:767px){
#menu{ width:100%; padding:1.5% 3% 1.5% 3%;}
/*
#header #logo{ width: 25%;}
#header #sns{ width: 75%; padding-right: 9vw; text-align: center;}
#header #sns ul li.twitter img{ width:12.5vw;}
#header #sns ul li.twitter{ margin:0 2.4% 0 3%;}
#header #sns ul li.facebook iframe{ transform: scale(0.8);}
*/
#header #logo{ width:100%; text-align: center;}
#header #logo img{ height: 16vw;}
#header #sns{ position: fixed; right: 1.5vw; bottom: 3vw; width: auto;}
#header #sns ul{ transform: scale(1.0); display: block;}
#header #sns ul li{ display: block;}
#header #sns ul li.twitter{ margin: 0 auto 10px;}

#header #menu_btn_smp{ position: absolute; right: 3vw; top:calc(50% - 4vw); cursor: pointer;}
#header #menu_btn_smp div{ position: relative; width:10vw; height: 8vw;}
#header #menu_btn_smp span{ display: block; position: absolute; width: 100%; border-bottom: solid 3px #191919; transition:0.3s ease-in-out;}
#header #menu_btn_smp span:nth-child(1){ top:0;}
#header #menu_btn_smp span:nth-child(2){ top: calc( 50% - 1.5px);}
#header #menu_btn_smp span:nth-child(3) { bottom: 0;}
#header #menu_btn_smp.active span:nth-child(1){ transform: rotate(-45deg); top: 3.75vw}
#header #menu_btn_smp.active span:nth-child(2){ opacity: 0;}
#header #menu_btn_smp.active span:nth-child(3){ transform: rotate(45deg); bottom: 3.75vw;}
#header #menu_nav_smp{ display: none;}
#header #menu_nav_smp{ position: absolute; right: 0; width: 50%; z-index: 10;}
#header #menu_nav_smp ul{ text-align: right; margin: 2px 0; position: relative; transition: 0.3s;}
#header #menu_nav_smp.active ul{ animation:drop_smp ease-in 0.3s forwards; top: 0;}
#header #menu_nav_smp ul li{ display: block; margin: 2px 0;}
#header #menu_nav_smp ul li:before{ display: none;}
#header #menu_nav_smp ul li:after{ display: none;}
#header #menu_nav_smp ul li a:after{ display: none;}
#header #menu_nav_smp ul li a{ display: block; background: rgba(255,255,255,0.8); color: #191919; font-size: 4.5vw; padding: 0.25em; text-align: center; box-shadow:rgba(0, 0, 0, 0.2) 0 0 2px 1px;}
}
/*drop_smp*/
@keyframes drop_smp{
0%{ top: -50vw;}
1%{ top: -50vw;}
100%{ top: 0;}
}

#catch{ background:url("../img/catch_bg.jpg") center center; text-align: center; padding-bottom: 40px;}
#catch h1{ margin: 40px auto; position: relative; max-width: 1200px;}
#catch h1 span{ position: absolute; right: 90px; top: -30px; animation: shake ease-in 1.0s infinite alternate; width: 240px;}
#catch ul{ letter-spacing: -1em; text-align: center; margin: 40px auto;}
#catch ul li{ display: inline-block; vertical-align: middle; margin: 0 10px;}
#catch #catch_txt{ text-align: center; margin: 40px auto;}
@media screen and (max-width:767px){
#catch{ background-size: cover; padding-bottom:3%;}
#catch h1{ margin:3% auto; width: 94%; padding-right: 10%;}
#catch h1 span{ right:0; top:auto; bottom: 0; width: 15%;}
#catch ul{ margin:3% auto; padding:0 1%}
#catch ul li{ margin:1%; width: 30%;}
#catch ul li img{ width: 100%;}
#catch #catch_txt{ width:94%; margin:3% auto;}
#catch #limited{ width:94%; margin:0 auto;}
}

#catch.active ul li{ animation: fadein ease-in-out 1.0s forwards; position: relative; opacity: 0;}
#catch.active ul li:nth-child(1){ animation-delay: 0.3s;}
#catch.active ul li:nth-child(2){ animation-delay: 0.6s;}
#catch.active ul li:nth-child(3){ animation-delay: 0.9s;}
#catch.active ul li:nth-child(4){ animation-delay: 1.2s;}
#catch.active ul li:nth-child(5){ animation-delay: 1.5s;}
#catch.active ul li:nth-child(6){ animation-delay: 1.8s;}
#catch.active ul li:nth-child(7){ animation-delay: 2.1s;}
@media screen and (max-width:767px){
#catch.active ul li{ animation: fadein_smp ease-in-out 1.0s forwards;}
}
/*shake*/
@keyframes shake{
0%{ transform:rotate(0deg);}
40%{ transform:rotate(0deg);}
50%{ transform:rotate(2deg);}
60%{ transform:rotate(-1deg);}
70%{ transform:rotate(3deg);}
80%{ transform:rotate(-2deg);}
90%{ transform:rotate(0deg);}
100%{ transform:rotate(0deg);}
}
/*fadein*/
@keyframes fadein{
0%{ top: -140px; opacity: 0;}
1%{ top: -140px; opacity: 0;}
100%{ top: 0; opacity: 1.0;}
}
@keyframes fadein_smp{
0%{ top: -10vw; opacity: 0;}
1%{ top: -10vw; opacity: 0;}
100%{ top: 0; opacity: 1.0;}
}

/*フッター*/
#footer{ background: #e60012; color: #fff; font-size: 13px;}
#footer ul{ text-align: center; letter-spacing: -1em; padding: 1em;}
#footer ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0;}
#footer ul li:before{ content: "｜"; margin: 0 1em;}
#footer ul li:last-child:after{ content: "｜"; margin: 0 1em;}
#footer ul li a:hover{ text-decoration: underline;}
p.copyright{ background: #000; color: #fff; text-align: center; padding: 0.5em; letter-spacing: 0.1em;}
@media screen and (max-width:767px){
#footer{ font-size: 2.5vw}
#footer ul{ padding: 1em;}
#footer ul li{ display: block; border-bottom: 1px dotted #fff;}
#footer ul li:first-child{ border-top: 1px dotted #fff;} 
#footer ul li a{ display: block; padding: 0.5em;}
#footer ul li:before,
#footer ul li:after{ display: none;}
p.copyright{ font-size: 2.25vw;}
}

/*メイン*/
#content{}
section { width:100%; background:#fff; margin:0 auto;}
.maincontent { padding:0; margin:0 auto; width:1200px;}
@media screen and (max-width:767px){
.maincontent { padding:0; margin:0 auto; width:94%;}
}

/*タイトル*/
h1,h2,h3,h4{ font-family: 'Noto Serif JP', serif; letter-spacing: 0.1em; line-height: 1.25em;}

/*特典タイトル*/
.special{ background: url("../img/special_bg.png") center center;}
.special_in{ width: 1200px; padding: 60px 0; margin: 0 auto; position: relative;}
.special_in:before{ content: ""; background: url("../img/special_ico1.png") center center no-repeat; background-size: 100%; width: 80px; height: 70px; position: absolute; left: 20px; top: 20px;}
.special_in:after{ content: ""; background: url("../img/special_ico2.png") center center no-repeat; background-size: 100%; width: 80px; height: 70px; position: absolute; right: 20px; bottom: 20px;}
.special h2{ text-align: center; background: none !important; text-align: center; padding: 0 !important; font-size: 60px; color: #FAE132; line-height: 1em; margin-bottom: 20px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);}
.special h2 strong{ display: inline-block; position: relative;}
.special h2 strong:before{ content: ""; position: absolute; left: -140px; top: 50%; width: 120px; height: 1px; background: #FAE132;}
.special h2 strong:after{ content: ""; position: absolute; right: -140px; top: 50%; width: 120px; height: 1px; background: #FAE132;}
.special p{ text-align: center; color: #fff; font-size: 24px; line-height: 1.5em; text-shadow:2px 2px 5px rgba(0,0,0,0.5);}
@media screen and (max-width:767px){
.special{ background-size: cover;}
.special_in{ width:100%; padding:6% 3%;}
.special_in:before{ width:8vw; height:7vw; left:1.5vw; top:1.5vw;}
.special_in:after{ width:8vw; height:7vw; right:1.5vw; bottom:1.5vw;}
.special h2{ font-size:9vw !important; margin-bottom:3%;}
.special h2 strong:before{ left:-27vw; width:24vw;}
.special h2 strong:after{ right:-27vw; width:24vw;}
.special p{ font-size:3.5vw !important;}
}
.active .special_in{ animation: zoom ease-in-out 1.0s forwards;}
@keyframes zoom{
0%{ transform: scale(1.5); opacity: 0;}
1%{ transform: scale(1.5); opacity: 0;}
100%{ transform: scale(1.0); opacity: 1.0;}
}



/*特典１*/
#sec001{ background: url("../img/sec001_bg.png") fixed;}
#sec001 .maincontent{ padding: 80px 0;}
#sec001 p{ text-align: center;}
#sec001 ul{ letter-spacing: -1em; text-align: center; margin-bottom: 40px;}
#sec001 ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; margin:0 20px; position: relative; opacity: 0;}
#sec001 ul li img{ box-shadow:rgba(0, 0, 0, 0.1) 0 0 10px 5px;}
@media screen and (max-width:767px){
#sec001{ background-size: cover; background-attachment:scroll;}
#sec001 .maincontent{ padding:0 0 6%; width: 100%;}
#sec001 ul{ margin:3%;}
#sec001 ul li{ width: 47%; text-align: center; margin:1.5%;}
#sec001 p{ font-size: 2.5vw;}
}

#sec001.active ul li:nth-child(1){ animation: swipe_left ease-in-out 1.0s forwards; animation-delay: 0.3s;}
#sec001.active ul li:nth-child(2){ animation: swipe_right ease-in-out 1.0s forwards; animation-delay: 0.6s;}
@keyframes swipe_left{
0%{ left: 480px; opacity: 0;}
1%{ left: 480px; opacity: 0;}
100%{ left: 0; opacity: 1.0;}
}
@keyframes swipe_right{
0%{ right: 480px; opacity: 0;}
1%{ right: 480px; opacity: 0;}
100%{ right: 0; opacity: 1.0;}
}



/*特典２*/
#sec002 h2{ background: url("../img/sec002_tit_bg.jpg") center center; background-size: 50%; font-size: 60px; padding: 0.5em; text-align: center;}
#sec002 .maincontent:after{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.75); position: absolute; left: 0; top: 0;}
#sec002 .maincontent{ width: 100%; padding: 80px 0 120px;}
#sec002_1{ background: url("../img/sec002_1_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_2{ background: url("../img/sec002_2_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_3{ background: url("../img/sec002_3_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_4{ background: url("../img/sec002_4_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_5{ background: url("../img/sec002_5_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_6{ background: url("../img/sec002_6_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002_7{ background: url("../img/sec002_7_bg.jpg") center center fixed; background-size: cover; position: relative;}
#sec002 dl{ position: relative; z-index: 3; width: 1200px; margin: 0 auto; display: table; table-layout: fixed;}
#sec002 dl dt{ display: table-cell; vertical-align: middle; color: #fff; text-align: center; font-family: 'Noto Serif JP', serif;}
#sec002 dl dd{ display: table-cell; vertical-align: middle; position: relative; width: 540px;}
#sec002 dl dd span{ position: absolute; left: -60px; bottom: -40px; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px; border-radius: 50%; width: 240px;}
#sec002 dl dd span img{ border-radius: 50%;}
#sec002 .maincontent#sec002_2 dl dd span,
#sec002 .maincontent#sec002_4 dl dd span,
#sec002 .maincontent#sec002_6 dl dd span{ left: auto; right: -60px;}
#sec002 h3{ font-size: 60px; text-shadow:2px 2px 5px #000;}
#sec002 h3 span{ font-size: 36px;}
#sec002 h4{ font-size: 36px; text-shadow:2px 2px 5px #000;}
#sec002 .sec002_price{ display: inline-block; font-size: 36px; text-shadow:2px 2px 5px #000; color: #fae132; border-bottom: 2px solid #fae132; padding: 0 0.5em 0.1em;}
#sec002 .sec002_price strong{ font-size: 90px; font-weight: 900; display: inline-block; vertical-align: bottom; margin-right: 0.1em;}
#sec002 .btn{ margin-top: 40px;}
#sec002 .btn a{ display: inline-block; width: 480px; background: #e60012; font-size: 48px; letter-spacing: 0.1em; line-height: 1em; padding: 0.25em 0.25em 0.5em; transition: 0.3s; position: relative; border-radius: 8px; overflow: hidden; box-shadow:rgba(0, 0, 0, 0.5) 0 0 10px 5px;}
#sec002 .btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0;}
#sec002 .btn a.soldout{ pointer-events: none; background: #191919;}
#sec002 .btn a.soldout:after{ display: none;}
@media screen and (max-width:767px){
#sec002 h2{ font-size:6vw;}
#sec002 .maincontent{ padding:6% 0 9%;}
#sec002_1, #sec002_2, #sec002_3, #sec002_4, #sec002_5, #sec002_6, #sec002_7{ background-attachment:scroll;}
#sec002 dl{ width:94%; display:block;}
#sec002 dl dt{ display:block;}
#sec002 dl dd{ display:block; width:80%; margin:0 auto 6%;}
#sec002 dl dd span{ left:-1.5vw; bottom:-3vw; width:40%;}
#sec002 .maincontent#sec002_2 dl dd span,
#sec002 .maincontent#sec002_4 dl dd span,
#sec002 .maincontent#sec002_6 dl dd span{ right:-1.5vw;}
#sec002 h3{ font-size:6vw;}
#sec002 h3 span{ font-size:4.5vw;}
#sec002 h4{ font-size:4.5vw;}
#sec002 .sec002_price{ font-size:4.5vw;}
#sec002 .sec002_price strong{ font-size:12vw;}
#sec002 .btn{ margin-top:6%}
#sec002 .btn a{ width:80%; font-size:6vw; padding:0.5em; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
}

#sec002 .btn a.opa{ animation: shake ease-in 1.0s infinite alternate;}
#sec002 dl dt{ opacity: 0;}
#sec002 dl dd{ opacity: 0;}
#sec002 dl dd span{ opacity: 0;}
#sec002 .active dl dt{ animation: fade ease-in-out 1.0s forwards; opacity: 0; animation-delay: 0.3s;}
#sec002 .active dl dd{ animation: fade ease-in-out 1.0s forwards; opacity: 0;}
#sec002 .active dl dd span{ animation: fade ease-in-out 1.0s forwards; opacity: 0; animation-delay: 0.6s;}
@keyframes fade{
0%{ opacity: 0;}
1%{ opacity: 0;}
100%{ opacity: 1.0;}
}



/*原材料表記*/
#sec003{ background:url("../img/sec003_bg.jpg") center center; background-size: 50%; color: #fff; padding: 80px 0;}
#sec003 h2{ text-align: center; font-size: 48px; margin: 0 auto 40px; max-width: 1200px; overflow: hidden;}
#sec003 h2 strong{ display: inline-block; position: relative;}
#sec003 h2 strong:before{ content: ""; position: absolute; left: -620px; top: 50%; width: 600px; height: 1px; background: #fff;}
#sec003 h2 strong:after{ content: ""; position: absolute; right: -620px; top: 50%; width: 600px; height: 1px; background: #fff;}
#sec003 ul{ letter-spacing: -1em; text-align: center;}
#sec003 ul li{ display: inline-block; letter-spacing: 0; vertical-align: top; width: 20%; padding: 0.5em;}
#sec003 ul li dl{ background: rgba(255,255,255,0.2); padding: 1em; border: 1px solid #fff;}
#sec003 ul li dl dt{ margin-bottom: 1em;}
#sec003 ul li p{ font-size: 15px; line-height: 1.25em; margin-bottom: 0.5em;}

@media screen and (min-width: 767px)){	
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 767px){	
  .pc { display:none; }
  .sp { display:block; }
}


@media screen and (max-width:767px){
#sec003{ padding:6% 0;}
#sec003 h2{ font-size:4.5vw; margin: 0 auto 3%; max-width: 94%;}
#sec003 h2 strong:before{ left: -33vw; width:30vw;}
#sec003 h2 strong:after{ right: -33vw; width:30vw;}
/*
#sec003 ul li{ width:50%; padding: 0.5em;}
#sec003 ul li dl{ padding: 0.5em;}
#sec003 ul li p{ font-size:2.5vw;}
*/
#sec003 ul li{ width:100%; padding: 0.5em;}
#sec003 ul li dl{ padding: 0.5em; display: table; table-layout: fixed; width: 100%;}
#sec003 ul li dl dt{ display: table-cell; vertical-align: middle; width: 30%;}
#sec003 ul li dl dd{ display: table-cell; vertical-align: middle; padding-left: 3%;}
#sec003 ul li p{ font-size:2.5vw;}
}

#sec003.active ul li{ animation: swipe_down ease-in-out 1.0s forwards; position: relative; opacity: 0;}
#sec003.active ul li:nth-child(2){ animation-delay: 0.3s;}
#sec003.active ul li:nth-child(3){ animation-delay: 0.6s;}
#sec003.active ul li:nth-child(4){ animation-delay: 0.9s;}
#sec003.active ul li:nth-child(5){ animation-delay: 1.2s;}
#sec003.active ul li:nth-child(6){ animation-delay: 1.5s;}
#sec003.active ul li:nth-child(7){ animation-delay: 1.8s;}
@keyframes swipe_down{
0%{ top: -240px; opacity: 0;}
1%{ top: -240px; opacity: 0;}
100%{ top: 0; opacity: 1.0;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}