@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: 'Kokoro', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;
font-size:24px;
text-align:left;
color:#191919;
background:url("../images/bg.jpg") center center fixed;
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.5em; 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.5em;}
}

.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{ background: url("../images/catch_bg.jpg"); background-size: cover; position: relative; z-index: 100;}
#header_in{ width: 1000px; margin: 0 auto; text-align: center; padding: 160px 0 40px; background: rgba(255,255,255,0.9); position: relative;}
#header h1 img{ border-radius: 50%;}
#header #logo{ display: inline-block; width: 320px; position: absolute; left: 0; right: 0; top: 40px; margin: auto; z-index: 5;}
#header #sns{ position: absolute; right: 40px; top: 40px;}
#header #sns ul{ letter-spacing: -1em;}
#header #sns ul li{ display: inline-block; letter-spacing: 0; vertical-align: middle; margin-left: 20px;}
#header #header_txt{ width: 800px; margin: -80px auto 0; position: relative; z-index: 5;}
#header #header_txt dl dt{ padding: 5px; background: rgb(180,150,60); background: -moz-linear-gradient(left,  rgba(180,150,60,1) 0%, rgba(240,210,120,1) 50%, rgba(180,150,60,1) 100%); background: -webkit-linear-gradient(left,  rgba(180,150,60,1) 0%,rgba(240,210,120,1) 50%,rgba(180,150,60,1) 100%); background: linear-gradient(to right,  rgba(180,150,60,1) 0%,rgba(240,210,120,1) 50%,rgba(180,150,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4963c', endColorstr='#b4963c',GradientType=1 );}
#header #header_txt dl dt strong{ display: block; background: #b40000; color: #e6cd82; font-size: 60px; letter-spacing: 0.1em; line-height: 1em; padding: 0.25em 0.5em 0.5em;}
#header #header_txt dl dd{ padding: 20px;}
#header #header_txt dl dd p{ text-align: center; line-height: 1.5em;}
@media screen and (max-width:767px){
#header{ background: url("../images/catch_bg.jpg"); background-size: cover;}
#header_in{ width:90%; padding:3% 0;}
#header h1 img{ width: 66.6666%; margin-top: -12%;}
#header #logo{ position: relative; top: 0; width: 33.3333%;}
#header #sns{ right: 3vw; top: 3vw; text-align: right;}
#header #sns ul li{ margin-left:1.5vw;}
#header #sns ul li img{ width: 10.5vw;}
#header #header_txt{ width:94%; margin:-9% auto 0;}
#header #header_txt dl dt{ padding:0.75vw;}
#header #header_txt dl dt strong{ font-size:6vw;}
#header #header_txt dl dd{ padding:0.5em 1em; font-size: 3vw;}
#header #header_txt dl dd p{ text-align: left;}
}
/*アニメ*/
#header h1 img,
#header #logo,
#header #header_txt dl dt,
#header #header_txt dl dd,
#header #sns ul li{ opacity: 0;}
#header h1 img{ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.0s;}
#header #logo{ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.3s;}
#header #header_txt dl dt{ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.6s;}
#header #header_txt dl dd{ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.9s;}
#header #sns ul li.tw{ animation: dong ease-in-out 1.0s forwards; animation-delay: 2.2s;}
#header #sns ul li.fb{ animation: dong ease-in-out 1.0s forwards; animation-delay: 2.4s;}

/*フッター*/
#footer{ padding:0;}
#footer #footer_message{ background: #fff; text-align: center; color: #b40000; padding: 20px;}
#footer #footer_message p{ text-align: center;}
@media screen and (max-width:767px){
#footer #footer_message{ padding:3%; font-size: 4.5vw;}
#footer{ padding:3% 0 0;}
}
#footer_nav{ color: #fff;}
#footer_nav ul{ text-align: center; letter-spacing: -1em; margin: 20px auto 40px;}
#footer_nav ul li{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 18px; line-height: 1em;}
#footer_nav ul li:after{ content: "|"; margin: 0 1em;}
#footer_nav ul li:last-child:after{ display: none;}
#footer_nav ul li a{ display: inline-block; position: relative;}
#footer_nav ul li a:after{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: -1px; margin: auto; transition: 0.3s;}
#footer_nav ul li a:hover:after{ width: 100%;}
@media screen and (max-width:767px){
#footer_nav ul{ margin:2px 0;}
#footer_nav ul li{ font-size:3vw; line-height: 1.5em; display: block; margin: 1px 0;}
#footer_nav ul li:after{ display: none;}
#footer_nav ul li a{ display:block; background: rgba(0,0,0,0.33); padding: 0.25em 0.5em 0.5em;}
#footer_nav ul li a:after{ display: none;}
}
p.copyright{ text-align:center; margin:0; padding:0.5em; background:#e6cd82; font-size:15px; letter-spacing:0.1em;}
@media screen and (max-width:767px){
p.copyright{ font-size:2.5vw; padding: 0.5em;}
}

/*メイン*/
#content{ position: relative; z-index: 100;}
section{ width:100%; margin:0 auto 120px; padding: 0;}
.maincontent{ padding:0; margin:0 auto; width:1000px; margin: 0 auto;}
@media screen and (max-width:767px){
section{ width:100%; margin:0 auto 9%; padding:0;}
.maincontent{ width:94%; margin:0 auto 0;}
}

/*title*/
h2{ text-align: center; margin-bottom: 60px; padding: 10px 0; color: #3c281e; background: rgb(180,150,60); background: -moz-linear-gradient(left,  rgba(180,150,60,1) 0%, rgba(240,210,120,1) 50%, rgba(180,150,60,1) 100%); background: -webkit-linear-gradient(left,  rgba(180,150,60,1) 0%,rgba(240,210,120,1) 50%,rgba(180,150,60,1) 100%); background: linear-gradient(to right,  rgba(180,150,60,1) 0%,rgba(240,210,120,1) 50%,rgba(180,150,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4963c', endColorstr='#b4963c',GradientType=1 ); position: relative; z-index: 5; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
h2 strong{ font-size: 60px; letter-spacing: 0.1em; line-height: 1em; padding: 0.25em 0.5em 0.5em; display: block; background: rgba(240,210,120,0.5);}
@media screen and (max-width:767px){
h2{ margin-bottom:6%; padding:1.5vw 0;}
h2 strong{ font-size:6vw; line-height: 1.25em;}
}

/*ボタン*/
.btn{ text-align: center;}
.btn a{ display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 0.25em 0.25em 0.66em; font-size: 36px; line-height: 1em; background: #b40000; color: #fff; position: relative; text-shadow:1px 1px 5px #000; border: 6px double #fff;}
.btn a span.lsf{ position: absolute; right: 20px; top: calc(50% - 0.45em);}
.btn.btn2 a{ background: #fff; color: #b40000; text-shadow: none; border: 6px double #b40000;}
.btn.btn2 { background: #fff; color: #b40000; text-shadow: none; border: 6px double #b40000;}
@media screen and (max-width:767px){
.btn a{ padding: 0.5em 0.25em 0.75em; font-size:6vw; border:1vw double #fff;}
.btn { padding: 0em 0em 0em; font-size:6vw; border:1vw double #fff;}
.btn.btn2 a{ border:1vw double #b40000;}
.btn.btn2 { border:1vw double #b40000;}
.btn a span.lsf{ right:1.5vw; top: calc(50% - 0.4em);}
}
.btn a span.lsf{ animation: btn_arrow ease-in-out 1.0s infinite;}
@media screen and (max-width:767px){
.btn a span.lsf{ animation: btn_arrow_smp ease-in-out 1.0s infinite;}
}
@keyframes btn_arrow{
0%{ opacity: 0; right: 0;}
50%{ opacity: 1.0; right: 20px;}
100%{ opacity: 0; right: 0;}
}
@keyframes btn_arrow_smp{
0%{ opacity: 0; right: 0;}
50%{ opacity: 1.0; right: 3vw;}
100%{ opacity: 0; right: 0;}
}



/*sec001-宅麺.comとは？*/

#sec001 #sec001_img_list ul{ letter-spacing: -1em; text-align: center;}
#sec001 #sec001_img_list ul li{ display: inline-block; vertical-align: bottom; letter-spacing: 0; width: 320px;}
#sec001 #sec001_img_list ul li:nth-child(2){ margin: 0 10px;}
#sec001 #sec001_img_list ul li img{ background: #fff; padding: 4px; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}*/

@media screen and (max-width:767px){
#sec001 #sec001_img_list ul{ text-align: center;}
#sec001 #sec001_img_list ul li{ width: 30.3333%; margin: 1.5%;}
#sec001 #sec001_img_list ul li:nth-child(2){ margin: 1.5%;}
#sec001 #sec001_img_list ul li img{ padding:0.66vw;}
}

#sec001 .sec001_box{ background: #fff; border: 10px double #b40000; padding: 20px; margin: 40px auto;}
#sec001 .sec001_box ul.notice{ font-size: 75%; line-height: 1.25em;}
#sec001 .sec001_box ul.notice li{ position: relative; padding-left: 1.25em; margin-bottom: 0.25em;}
#sec001 .sec001_box ul.notice li:before{ content: "※"; position: absolute; left: 0; top: 0;}

#sec001 .sec001_box h3{ text-align: center; position: relative; font-size: 48px; line-height: 1.25em; margin-bottom: 20px;}
#sec001 .sec001_box h3:before{ content: ""; width: 100%; height: 1px; background: #191919; position: absolute; left: 0; right: 0; top: 55%;}
#sec001 .sec001_box h3 strong{ display: inline-block; background: #fff; padding: 0 0.5em; position: relative; z-index: 3;}

#sec001 .sec001_box ul.schedule{ display: table; table-layout: fixed; width: 100%; margin: 20px auto 0; text-align: center;}
#sec001 .sec001_box ul.schedule li{ display: table-cell; vertical-align: top;}
#sec001 .sec001_box ul.schedule li.arrow{ width: 90px; padding-top: 45px;}
#sec001 .sec001_box ul.schedule dl dd{ padding: 10px 10px 0;}
#sec001 .sec001_box ul.schedule dl dd p{ font-size: 75%; line-height: 1.25em; position: relative; padding-left: 1.25em; margin-bottom: 0.5em;}
#sec001 .sec001_box ul.schedule dl dd p:before{ content: "※"; position: absolute; left: 0; top: 0;}

@media screen and (max-width:767px){
#sec001 .sec001_box{ border:1.5vw double #b40000; padding:3%; margin:3% auto;}
#sec001 .sec001_box ul.notice{ font-size:80%;}
#sec001 .sec001_box h3{ font-size:5vw; margin-bottom:3%;}
#sec001 .sec001_box ul.schedule{ display:block; margin:3% auto 0;}
#sec001 .sec001_box ul.schedule li{ display:block;}
#sec001 .sec001_box ul.schedule li.arrow{ width:100%; padding:1.5% 42.5% 1.5% 0; line-height: 0;}
#sec001 .sec001_box ul.schedule li.arrow img{ position: relative; transform: rotate(90deg); width: 12.5%; line-height: 0;}
#sec001 .sec001_box ul.schedule dl{ display: table; table-layout: fixed; width: 100%;}
#sec001 .sec001_box ul.schedule dl dt{ display: table-cell; vertical-align:top; width: 57.5%;}
#sec001 .sec001_box ul.schedule dl dd{ display: table-cell; vertical-align: middle; padding: 0 1.5%;}
#sec001 .sec001_box ul.schedule dl dd p{ font-size:80%;}
}

/*アニメ*/
#sec001 h2,
#sec001 #sec001_img_list ul li,

#sec001 .sec001_box{ opacity: 1;}
#sec001.active h2{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec001.active #sec001_img_list ul li:nth-child(1){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.3s;}
#sec001.active #sec001_img_list ul li:nth-child(2){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec001.active #sec001_img_list ul li:nth-child(3){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.9s;}
#sec001 .sec001_box.active{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.3s;}




/*sec002-宅麺限定豪華ラインナップ*/
#sec002 dl{ display: flex; flex-direction: row; align-items: stretch; width: 100%; background: #fff; margin: 40px auto; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
#sec002 dl:nth-child(2n){ display: flex; flex-direction: row-reverse;}
#sec002 dl dt{ flex-basis: 480px; background: #000; display: flex; flex-direction: row; align-items: flex-end;}
#sec002 dl dt .lineup_info{ margin: 10px 10px; background: rgba(0,0,0,0.66); padding: 10px; width: 100%; text-shadow:1px 1px 5px #000;}
#sec002 dl dt .lineup_info p{ font-size: 16px; color: #fff; margin-bottom: 0.25em;}
#sec002 dl dd{ flex-basis: 520px; padding: 20px;}
#sec002 dl dd figure img{ width: 33.3333%;}
#sec002 dl dd h3{ font-size: 28px; text-align: center; margin: 20px auto;}
#sec002 dl dd h3 strong{ display: inline-block; font-size: 120%; text-decoration: underline; margin: 0 0.75em;}
#sec002 dl dd h3 span{ display: inline-block;}
#sec002 dl dd p{ font-size: 18px;}
#sec002 dl dd p.price{ font-size: 36px; text-align: right; color: #b40000; margin: 20px auto;}
#sec002 dl dd p.price span{ font-size: 75%;}
#sec002 dl dd p.price strong{ display: inline-block; padding: 0 0.25em; background:linear-gradient(transparent 80%, #fae196 20%); background: -webkit-linear-gradient(transparent 80%, #fae196 20%);}
@media screen and (max-width:767px){
#sec002 dl{ display: block; margin:6% auto;}
#sec002 dl:nth-child(2n){ display:block;}
#sec002 dl dt{ display: block; overflow: hidden;}
#sec002 dl dt .lineup_info{ margin:66.6666% auto 3%; padding:3%; width: 94%;}
#sec002 dl dt .lineup_info p{ font-size:3vw;}
#sec002 dl dd{ padding:3%;}
#sec002 dl dd figure img{ width: 50%;}
#sec002 dl dd h3{ font-size:6vw; margin:1.5% auto 3%;}
#sec002 dl dd h3 strong{ font-size: 110%;}
#sec002 dl dd p{ font-size:3.5vw;}
#sec002 dl dd p.price{ font-size:6vw; margin:3% auto;}
#sec002 dl dd p.price span{ font-size: 80%;}
}
#sec002 dl:nth-child(1) dt{ background: url("../images/lineup/001_img1.jpg") center center; background-size: cover;}
#sec002 dl:nth-child(2) dt{ background: url("../images/lineup/003_img1.jpg") center center; background-size: cover;}
#sec002 dl:nth-child(3) dt{ background: url("../images/lineup/002_img1.jpg") center center; background-size: cover;}
#sec002 dl:nth-child(4) dt{ background: url("../images/lineup/005_img1.jpg") center center; background-size: cover;}
#sec002 dl:nth-child(5) dt{ background: url("../images/lineup/004_img1.jpg") center center; background-size: cover;}
/*アニメ*/
#sec002 h2,
#sec002 dl{ opacity: 0;}
#sec002.active h2{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec002 dl.active{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.3s;}


/*sec003-こちらもおススメ*/
#sec003 ul{ letter-spacing: -1em; width: calc(100% + 20px); margin-left: -10px; text-align: center;}
#sec003 ul li{ display: inline-block; vertical-align: top; width: calc(33.3333% - 20px); margin: 10px; letter-spacing: 0; background: #fff; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
#sec003 dl dd{ padding: 10px;}
#sec003 dl dd h3{ font-size: 24px; line-height: 1.5em; text-align: center; margin-bottom: 10px;}
#sec003 dl dd h3 strong{ display: inline-block; text-decoration: underline;}
#sec003 dl dd h3 span{ display: block;}
#sec003 dl dd p{ font-size: 18px;}
#sec003 dl dd .btn a{ font-size: 24px; margin-top: 10px;}
@media screen and (max-width:767px){
#sec003 ul{ width:100%; margin:0;}
#sec003 ul li{ width:48.5%; margin:1.5%;}
#sec003 ul li:nth-child(2n+1){ margin-left: 0;}
#sec003 ul li:nth-child(2n+2){ margin-right: 0;}
#sec003 dl dd{ padding:1.5% 1.5% 3%;}
#sec003 dl dd h3{ font-size:4.5vw; margin-bottom:1.5%;}
#sec003 dl dd h3 span{ font-size: 3.25vw;}
#sec003 dl dd p{ font-size: 3vw;}
#sec003 dl dd .btn a{ font-size:3.5vw; margin-top:1.5%;}
}
/*アニメ*/
#sec003 h2,
#sec003 ul li{ opacity: 0;}
#sec003.active h2{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec003.active ul li:nth-child(1){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.3s;}
#sec003.active ul li:nth-child(2){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec003.active ul li:nth-child(3){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.9s;}
#sec003.active ul li:nth-child(4){ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.2s;}
#sec003.active ul li:nth-child(5){ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.5s;}
#sec003.active ul li:nth-child(6){ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.8s;}



/*sec004-原材料表記*/
#sec004 ul{ letter-spacing: -1em; width: calc(100% + 20px); margin-left: -10px; text-align: center;}
#sec004 ul li{ display: inline-block; vertical-align: top; width: calc(33.3333% - 20px); margin: 10px; letter-spacing: 0; background: #fff; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
#sec004 dl dd{ padding: 10px;}
#sec004 dl dd h3{ font-size: 24px; line-height: 1.5em; text-align: center; margin-bottom: 10px;}
#sec004 dl dd h3 strong{ display: inline-block; text-decoration: underline;}
#sec004 dl dd h3 span{ display: block;}
#sec004 dl dd .btn a{ font-size: 24px; margin-top: 10px;}
#sec004 dl dd figure.ico{ margin: -80px 0 10px;}
#sec004 dl dd figure.ico img{ height: 160px;}
@media screen and (max-width:767px){
#sec004 ul{ width:100%; margin:0;}
#sec004 ul li{ width:100%; margin:1.5% 0;}
#sec004 ul li:nth-child(2n+1){ margin-left: 0;}
#sec004 ul li:nth-child(2n+2){ margin-right: 0;}
#sec004 dl dd{ padding:3%;}
#sec004 dl dd h3{ font-size:6vw; margin-bottom:1.5%;}
#sec004 dl dd h3 span{ font-size:4.5vw;}
#sec004 dl dd .btn a{ margin-top:3%;}
}
/*アニメ*/
#sec004 h2,
#sec004 ul li{ opacity: 0;}
#sec004.active h2{ animation: dong ease-in-out 1.0s forwards; animation-delay: 0s;}
#sec004.active ul li:nth-child(1){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.3s;}
#sec004.active ul li:nth-child(2){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.6s;}
#sec004.active ul li:nth-child(3){ animation: dong ease-in-out 1.0s forwards; animation-delay: 0.9s;}
#sec004.active ul li:nth-child(4){ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.2s;}
#sec004.active ul li:nth-child(5){ animation: dong ease-in-out 1.0s forwards; animation-delay: 1.5s;}



/*アニメ*/
.cloud001 img{ animation: cloud001 ease-in-out 10.0s infinite; position: fixed; z-index: 99;}
.cloud002 img{ animation: cloud002 ease-in-out 10.0s infinite; position: fixed; z-index: 99;}
@keyframes cloud001{
0%{ opacity: 0; top: 25%; right: -240px; width: 120px;}
25%{ opacity: 0.33; top: 50%;}
50%{ opacity: 0.33; top: 25%; width: 480px;}
75%{ opacity: 0; top: 75%; right: 150%; width: 240px;}
100%{ opacity: 0; top: 100%;}
}
@keyframes cloud002{
0%{ opacity: 0; bottom: 25%; left: -240px; width: 120px;}
25%{ opacity: 0; bottom: 25%; left: -240px; width: 120px;}
50%{ opacity: 0.33; bottom: 50%;}
75%{ opacity: 0.33; bottom: 75%; width: 480px;}
100%{ opacity: 0; bottom: 100%; left: 150%; width: 240px;}
}
@keyframes dong{
0%{ opacity: 0; transform: scale(3.0);}
50%{ opacity: 0.75; transform: scale(0.75);}
75%{ opacity: 1.0; transform: scale(1.2);}
100%{ opacity: 1.0; transform: scale(1.0);}
}
@keyframes fadein{
0%{ opacity: 0; top: -40px;}
100%{ opacity: 1.0; top: 0;}
}



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