@charset "utf-8";
/* ------------------------------------------------------------ common */
body { position: relative; min-width: 1100px; overflow-x: hidden; }

/* ------------------------------------------------------------ header */
#header { position: fixed; width: 100%; padding: 20px; box-sizing: border-box; z-index: 9; min-width: 1100px; }
#header.bg { background: rgba(0,0,0,0.5); } 
#header .left { float: left; padding: 7px 0 0; }
#header .left .logo { float: left; }
#header .left .logo a img.PC { width: 12vw; height: auto; max-width: 221px; }
#header .left .social { float: left; margin: 3% 0 0 20px; }
#header .left .social a { margin: 0 5px; }
#header .left .social a img { width: 3vw; height: auto; max-width: 40px; height: auto; }
#header .right { float: right; }
#header .right a { display: inline-block; margin: 0 0 0 10px; }
#header .right a img { width: 9.3vw; height: auto; max-width: 170px; }

/* ------------------------------------------------------------ fv  */
#fv { position: relative; }
#fv .fv_pc { width: 100%; height: auto; }
#fv .scroll { position: absolute; bottom: 80px; text-align: center; left: 0; right: 0; }
#fv:after { content: ""; background: url(../images/fv_line.png) center bottom no-repeat; height: 122px; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }

/* ------------------------------------------------------------ movie  */
#movie { background: url(../images/bg_01.jpg) center center no-repeat; height: 976px; position: relative; }
#movie h2 { text-align: center; padding: 100px 0 20px; font-size: 20px; }
#movie h2 span { font-size: 80px; font-family: 'Cinzel', serif; display: block; line-height: 100%; letter-spacing: 7px; }
#movie .video { text-align: center; width: 980px; margin: 0 auto; }

/* ------------------------------------------------------------ merci  */
#merci { background: url(../images/bg_02.jpg) center top no-repeat; height: 985px; position: relative; text-align: center; }
#merci h2 { text-align: center; position: absolute; top: -50px; left: 0; right: 0; }
#merci .chocolat { padding: 150px 0 0; }
/*
#merci p { font-size: 30px; color: #401e1f; font-weight: bold; }
#merci p span { text-decoration: underline; font-weight: bold; }
*/

/* ------------------------------------------------------------ lineup  */
#lineup { background: url(../images/bg_03.jpg) center top no-repeat; padding: 0 0 140px; }
#lineup h2 { font-size: 20px; padding: 80px 0 0; }
#lineup h2 span { font-size: 150px; font-family: 'Cinzel', serif; display: block; line-height: 100%; letter-spacing: 7px; }

#lineup h3 { font-size: 50px; line-height: 100%; padding: 0 0 15px; }
#lineup h4 { padding: 0 0 10px; }
#lineup h4 span { font-size: 26px; text-decoration: underline; line-height: 130%; }
#lineup p { font-size: 18px; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }
#lineup .left { float: left; }
#lineup .right { float: right; }

#lineup .outer-box { background: url(../images/item_bg.jpg) center 100px no-repeat; }
#lineup .outer-box_first { background: url(../images/item_bg.jpg) center 270px no-repeat; }

#lineup .firstitem { margin: -200px auto 0; width: 1100px; }
#lineup .firstitem .first-image { text-align: center; }
#lineup .firstitem img.f_image { width: 100%; height: auto; }
#lineup .firstitem .bot { width: 900px; margin: -100px auto 0; }

#lineup .seconditem h4,
#lineup .thirditem h4 { padding: 30px 0 10px; }
#lineup .seconditem { margin: 50px 0 0; }
#lineup .seconditem img { height: auto; }
#lineup .seconditem .right { text-align: center; }
#lineup .seconditem .left { margin: 150px 0 0 50px; }

#lineup .thirditem {  }
#lineup .thirditem .left { margin: 30px auto 0 -70px; text-align: center; }
#lineup .thirditem .left img { height: auto; }
#lineup .thirditem .right { margin: 170px auto 0; }

#lineup {  }
#lineup .box { float: left; margin: 140px 0 0; }
#lineup .box:nth-of-type(even) { float: right; }
#lineup .box:nth-of-type(odd) { clear: both; }
#lineup .box .i_image { text-align: center; }
#lineup .box h3 { display: table; padding: 30px 0 20px; }
#lineup .box h3 span { font-size: 40px; display: table-cell; vertical-align: bottom; line-height: 90%; }
#lineup .box h3 span:first-of-type { padding: 0 10px 0 0; }
#lineup .box h3 img {  }
#lineup .box h4 {  }
#lineup .box h4 span {  }
#lineup .box p {  }

/* ------------------------------------------------------------ qanda  */
#qanda { background: url(../images/bg_04_rep.jpg) center center repeat-y; padding: 0 0 50px; }
#qanda h2 { text-align: center; color: #401e1f; padding: 150px 0 30px; background: url(../images/bg_04.jpg) center top no-repeat; }
#qanda h2 span { font-size:80px; line-height: 130%; display: block; font-family: 'Cinzel', serif; }
#qanda dl { margin: 2px 0 0; }
#qanda dl dt { padding: 20px 0 20px 90px; background: url(../images/q.png) 35px center no-repeat #3b1a10; cursor: pointer; }
#qanda dl dt span { font-size: 20px; background: url(../images/arr.png) 98% center no-repeat; display: block; padding: 0 60px 0 0; }
#qanda dl dt span.active { background: url(../images/arr_active.png) 98% center no-repeat; }
#qanda dl dd { font-size: 16px; color: #210d07; padding: 20px 20px 20px 90px; background: url(../images/a.png) 35px 20px no-repeat #fff; display: none; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }
#qanda dl dd a { color: #007deb; text-decoration: underline; }
/* ------------------------------------------------------------ #sns  */
#sns { background: url(../images/footer_bg.jpg) center center repeat-y; padding: 0 0 80px; }
#sns h2 { font-size: 20px; text-align: center; letter-spacing: 3px; background: url(../images/bg_05.jpg) center top no-repeat; padding: 200px 0 0; }
#sns h2 span { font-size: 80px; font-family: 'Cinzel', serif; display: block; line-height: 100%; letter-spacing: 5px; }
#sns .sns_socials { text-align: center; margin: 30px 0 60px; }
#sns .sns_socials a { padding: 0 15px; }
#sns p { font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }

/* ------------------------------------------------------------ footer  */
#footer { background: url(../images/footer_bg.jpg) center center repeat-x; border-top: 1px solid #bf9345; padding: 50px 0 10px; }
#footer .footer_logo { text-align: center; }
#footer .f_menu { text-align: center; padding: 20px 0; }
#footer .f_menu a { color: #fff; padding: 0 20px; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }
#footer p { text-align: center; letter-spacing: 3px; }

/* ------------------------------------------------------------ footer  */
.fixed_aside { position: fixed; right: 0; bottom: 0; }
.fixed_aside .PC img { width: 15vw; height: auto; max-width: 281px; }

@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */
body { position: relative; min-width: inherit;  }

/* ------------------------------------------------------------ common */
#fv:after { content: none; }

/* ------------------------------------------------------------ header */
#header { position: fixed; width: 100%; box-sizing: border-box; z-index: 10; min-width: inherit; padding: 15px 5%; }
#header .logo { float: left; }
#header .logo img { width: 100px; height: auto; }

/* ------------------------------------------------------------ groval nav */
.fixed { position: fixed !important; top: 0 !important; width: 100%; }
#mask { background: #000; height: 100%; width: 100%; min-height: 100%; position: fixed; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.70; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; }
#open_modal { cursor: pointer; display: block; }

#menu-btn { width: 50px; height: auto; float: right; padding: 10px 0 0; }
#menu-btn img { display: inline !important; width: 80%; height: auto; }

#navigation { position: fixed; text-align: center; margin: 0; top: 0; right: 0; left: 0; z-index: 999; display: none; height: 100%; overflow-y: scroll; background: linear-gradient(to bottom, #2a0802, #99734c); }

#menu-header { padding: 30px 0; position: fixed; z-index: 999; width: 100%; }
#menu-header .close_modal { position: absolute; right: 20px; top: 3px; }
#menu-header .close_modal img { width: 25px; height: 25px; padding: 15px 0 0; }
#navigation #menu-header a { display: block; max-width: 50%; margin: 0 auto; }
#navigation #menu-header a img { width: 100%; height: auto; margin: 0 auto; padding: 0; }
#navigation ul { font-size: 14px; z-index: 999; width: 80%; padding: 120px 10% 0; }
#navigation ul li { text-align: left; border-bottom: #dcdcdc solid 1px; }
#navigation ul li:first-child { border-top: #dcdcdc solid 1px; }
#navigation ul li a { font-size: 16px; color: #dcdcdc; display: block; width: 100%; padding: 10px 3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: relative; font-family: 'Cinzel', serif; }
#navigation ul li a::before { position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; display: block; width: 8px; height: 8px; border-top: solid 1px #dcdcdc; border-right: solid 1px #dcdcdc; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; }

/* ------------------------------------------------------------ fv  */
#fv { background: none; height: auto; position: relative; }
#fv .fv_sp { width: 100%; height: auto; }
#fv .scroll { display: none; }

/* ------------------------------------------------------------ movie  */

#movie { background: url(../images/sp/bg_01.png) top center no-repeat; height: inherit; margin: -84px auto 0; position: relative; padding: 0 0 150px; }
#movie h2 { padding: 130px 0 20px; }
#movie h2 span { font-size: 40px; }
#movie .video { width: 100%; background: url(../images/sp/gold_cloud.png) center center no-repeat; padding: 40px 0; background-size: 130%; }
#movie .video img { width: 90%; height: auto; }

#movie .video2 { position: relative; width: 90%; padding-top: 56.25%; margin: 0 auto; }
#movie .video2 iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }



/* ------------------------------------------------------------ merci  */

#merci { background: url(../images/sp/bg_02.png) center top no-repeat; height: inherit; position: relative; margin: -85px auto 0; padding: 0 0 40px; }
#merci h2 { position: absolute; top: -30px; }
#merci h2 img { width: 90%; height: auto; margin: 0 auto; }
#merci .chocolat { padding: 30% 0 0; width: 100%; height: auto; }
#merci p { font-size: 20px; padding: 20px 0; }
#merci p span { text-decoration: underline; }

/* ------------------------------------------------------------ lineup  */

#lineup { background: url(../images/sp/bg_04.jpg) center top repeat-y; height: auto; padding: 0 0 150px; }
#lineup h2 { font-size: 14px; padding: 140px 5% 100px; background: url(../images/sp/bg_03.jpg) center top no-repeat; }
#lineup h2 span { font-size: 50px; display: block; line-height: 100%; letter-spacing: 7px; }

#lineup h3 { font-size: 24px; line-height: 100%; padding: 0 0 15px; }
#lineup h4 { padding: 20px 0 10px; }
#lineup h4 span { font-size: 18px; text-decoration: underline #836e68; line-height: 130%; }
#lineup .price img { max-width: 70%; height: auto; }
#lineup p { font-size: 14px; }
#lineup .left { float: none; }
#lineup .right { float: none; }

#lineup .outer-box { background: none; }
#lineup .outer-box_first { background: none; }

#lineup .firstitem { margin: -120px auto 0; width: 100%; }
#lineup .firstitem img.f_image { width: 100%; height: auto; }
#lineup .firstitem .bot { width: 90%; margin: 0 auto; }

#lineup .seconditem h4,
#lineup .thirditem h4 { padding: 20px 0 10px; }
#lineup .seconditem { margin: 50px 0 0; }
#lineup .seconditem .left { margin: 20px auto 0; width: 90%; }
#lineup .seconditem .right img { width: 100%; height: auto; }

#lineup .thirditem {  }
#lineup .thirditem .left { margin: 0 auto; }
#lineup .thirditem .left img { width: 100%; height: auto; }
#lineup .thirditem .right { margin: 30px auto 0; width: 90%; }

#lineup .inner { width: 100%; }
#lineup .box { float: none; margin: 0 auto 70px; position: relative; z-index: 1; }
#lineup .box:before { content: ""; position: absolute; width: 80%; height: 90%; left: 0; right: 0; margin: 0 auto; top: 120px; background: linear-gradient(to top right, #643f23, #2a0a03); z-index: -1; }
#lineup .box .innerbox { width: 90%; margin: 0 auto; }
#lineup .box:nth-of-type(even) { float: none; }
#lineup .box .i_image { text-align: center; }
#lineup .box .i_image img { width: 100%; height: auto; }
#lineup .box h3 { display: inherit; padding: 0; }
#lineup .box h3 span { font-size: 24px; display: inherit; vertical-align: bottom; line-height: 90%; }
#lineup .box h3 span:first-of-type { padding: 0 0 10px 0; }
#lineup .box h3 img { max-width: 70%; height: auto; }
#lineup .box h4 {  }
#lineup .box h4 span {  }
#lineup .box p {  }

/* ------------------------------------------------------------ qanda  */
#qanda { background: url(../images/sp/bg_06.jpg) center center repeat-y; height: inherit; position: relative; padding: 0 0 100px; }
#qanda:before { content: ""; background: url(../images/sp/bg_05.png) center center no-repeat; position: absolute; top: -80px; width: 100%; height: 90px; }
#qanda .inner { width: 100%; }
#qanda h2 { padding: 30px 0 30px; font-size: 14px; background: none; }
#qanda h2 span { font-size:50px; line-height: 130%; }
#qanda dl { width: 90%; margin: 2px auto 0; }
#qanda dl dt { padding: 10px 0 10px 40px; background: url(../images/sp/q.png) 13px 20px no-repeat #3b1a10; background-size: 20px auto; }
#qanda dl dt span { font-size: 14px; background: url(../images/arr.png) 94% center no-repeat; background-size: 13px auto; padding: 0 30px 0 0; }
#qanda dl dt span.active { background: url(../images/arr_active.png) 94% center no-repeat; background-size: 13px auto; }
#qanda dl dd { font-size: 14px; padding: 10px 10px 10px 40px; background: url(../images/sp/a.png) 13px 15px no-repeat #fff; display: none; background-size: 20px auto; }

/* ------------------------------------------------------------ #sns  */
#sns { background: url(../images/sp/footer_bg.jpg) center center repeat-y; padding: 50px 0 30px; position: relative; }
#sns:before { content: ""; background: url(../images/sp/bg_07.jpg) center center no-repeat; position: absolute; top: -80px; width: 100%; height: 90px; }
#sns h2 { font-size: 14px; text-align: center; letter-spacing: 3px; background: none; padding: 0; }
#sns h2 span { font-size: 50px; line-height: 100%; letter-spacing: 5px; }
#sns .sns_socials { text-align: center; margin: 20px 0 30px; }
#sns .sns_socials a { padding: 0 10px; }
#sns .sns_socials a img { width: 30px; height: auto; }

/* ------------------------------------------------------------ footer  */
#footer { background: url(../images/sp/footer_bg.jpg) center center repeat-y; border-top: 1px solid #bf9345; padding: 30px 0 30%; }
#footer .footer_logo { text-align: center; }
#footer .footer_logo img { width: 150px; height: auto; }
#footer .f_menu { text-align: center; padding: 20px 0; }
#footer .f_menu a { font-size: 12px; color: #fff; padding: 0 5px; }
#footer p { text-align: center; letter-spacing: 3px; font-size: 10px; word-break: break-word; }

/* ------------------------------------------------------------ fixed search  */
.fixed_aside { z-index: 9; }
.fixed_aside img { width: 100%; height: auto;}
}