@charset "UTF-8"; /* ### mixin.scss ### */ /* ### setting.scss ### */ .nowater #contents .item, .nowater .aboutArea .aboutAreaCont, .nowater .seriesArea .seriesAreaCont, .nowater .instagramArea .instagramAreaCont, .nowater .himitsuArea .himitsuAreaCont, .nowater .mainVisualUnder .mainVisualUnderCont, .nowater .productDetailCont { width: 1200px; margin: 0 auto; min-width: 1200px; } @media screen and (max-width: 760px) { .nowater #contents .item, .nowater .aboutArea .aboutAreaCont, .nowater .seriesArea .seriesAreaCont, .nowater .instagramArea .instagramAreaCont, .nowater .himitsuArea .himitsuAreaCont, .nowater .mainVisualUnder .mainVisualUnderCont, .nowater .productDetailCont { width: auto; min-width: 0; } } .headline1, .headline2, .newsMain h2, .newsMain .date, .news h1.newstitle, .news .newsList h2, .news .date, .article-body h2, .otoriyose .kodawariArea .buttonStyle a, .otoriyose .vesselArea .title, .otoriyose .productDetail .cont01 .price, .otoriyose .howtoArea .cont02 .text01, .otoriyose .otherList li, .messageArea { font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #himitsu .inner, .newsMain .slick-list li, .categoryMenu ul, .news .main-content, .news .mainArea .banner, .news .newsList article, .otoriyose .kodawariArea .inner, .otoriyose .otoriyoseList .cont, .otoriyose .otoriyoseList .pack, .otoriyose .introduceArea .cont02, .otoriyose .vesselArea, .otoriyose .productDetail .cont01, .otoriyose .productDetail .cont01 .package, .otoriyose .howtoArea .cont01, .otoriyose .howtoArea .cont01 .inner:nth-of-type(1), .otoriyose .howtoArea .cont01 .box, .otoriyose .otherList { *zoom: 1; } #himitsu .inner:after, .newsMain .slick-list li:after, .categoryMenu ul:after, .news .main-content:after, .news .mainArea .banner:after, .news .newsList article:after, .otoriyose .kodawariArea .inner:after, .otoriyose .otoriyoseList .cont:after, .otoriyose .otoriyoseList .pack:after, .otoriyose .introduceArea .cont02:after, .otoriyose .vesselArea:after, .otoriyose .productDetail .cont01:after, .otoriyose .productDetail .cont01 .package:after, .otoriyose .howtoArea .cont01:after, .otoriyose .howtoArea .cont01 .inner:nth-of-type(1):after, .otoriyose .howtoArea .cont01 .box:after, .otoriyose .otherList:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media screen and (min-width: 761px) { .w100 { width: 100px !important; } .w110 { width: 110px !important; } .w120 { width: 120px !important; } .w130 { width: 130px !important; } .w140 { width: 140px !important; } .w150 { width: 150px !important; } .w160 { width: 160px !important; } .w170 { width: 170px !important; } .w180 { width: 180px !important; } .w190 { width: 190px !important; } .w200 { width: 200px !important; } .w210 { width: 210px !important; } .w220 { width: 220px !important; } .w230 { width: 230px !important; } .w240 { width: 240px !important; } .w250 { width: 250px !important; } .w260 { width: 260px !important; } .w270 { width: 270px !important; } .w280 { width: 280px !important; } .w290 { width: 290px !important; } .w300 { width: 300px !important; } .w310 { width: 310px !important; } .w320 { width: 320px !important; } .w330 { width: 330px !important; } .w340 { width: 340px !important; } .w350 { width: 350px !important; } .w360 { width: 360px !important; } .w370 { width: 370px !important; } .w380 { width: 380px !important; } .w390 { width: 390px !important; } .w400 { width: 400px !important; } .w410 { width: 410px !important; } .w420 { width: 420px !important; } .w430 { width: 430px !important; } .w440 { width: 440px !important; } .w450 { width: 450px !important; } .w460 { width: 460px !important; } .w470 { width: 470px !important; } .w480 { width: 480px !important; } .w490 { width: 490px !important; } .w500 { width: 500px !important; } .w510 { width: 510px !important; } .w520 { width: 520px !important; } .w530 { width: 530px !important; } .w540 { width: 540px !important; } .w550 { width: 550px !important; } .w560 { width: 560px !important; } .w570 { width: 570px !important; } .w580 { width: 580px !important; } .w590 { width: 590px !important; } .w600 { width: 600px !important; } .w610 { width: 610px !important; } .w620 { width: 620px !important; } .w630 { width: 630px !important; } .w640 { width: 640px !important; } .w650 { width: 650px !important; } .w660 { width: 660px !important; } .w670 { width: 670px !important; } .w680 { width: 680px !important; } .w690 { width: 690px !important; } .w700 { width: 700px !important; } .w710 { width: 710px !important; } .w720 { width: 720px !important; } .w730 { width: 730px !important; } .w740 { width: 740px !important; } .w750 { width: 750px !important; } .w760 { width: 760px !important; } .w770 { width: 770px !important; } .w780 { width: 780px !important; } .w790 { width: 790px !important; } .w800 { width: 800px !important; } .w810 { width: 810px !important; } .w820 { width: 820px !important; } .w830 { width: 830px !important; } .w840 { width: 840px !important; } .w850 { width: 850px !important; } .w860 { width: 860px !important; } .w870 { width: 870px !important; } .w880 { width: 880px !important; } .w890 { width: 890px !important; } .w900 { width: 900px !important; } .w910 { width: 910px !important; } .w920 { width: 920px !important; } .w930 { width: 930px !important; } .w940 { width: 940px !important; } .w950 { width: 950px !important; } } .headline1 { font-size: 45px; text-align: center; margin-bottom: 40px; } @media screen and (max-width: 760px) { .headline1 { font-size: 30px; text-align: center; margin-bottom: 20px; } } .headline2 { margin-bottom: 30px; padding: 5px 10px 10px; font-size: 25px; letter-spacing: -2px; font-weight: bold; text-align: center; position: relative; } .headline2:after, .headline2:before { content: ""; display: block; height: 1px; width: 100%; background: url(/common/img/common/line_title.png) no-repeat 50% 50%; position: absolute; left: 0; } .headline2:before { top: 0; } .headline2:after { bottom: 0; } @media all and (-ms-high-contrast: none) { .headline2 { padding-top: 15px; } } @media screen and (max-width: 760px) { .headline2 { line-height: 1.2; font-size: 20px; margin-bottom: 20px; } } #himitsumenu img { max-width: 100%; max-height: 100%; } #himitsumenu .scroll { position: fixed; left: 0; z-index: 2; right: 0; bottom: 130px; width: 67px; margin: auto; } #himitsumenu ul { position: fixed; left: 0; right: 0; bottom: 10px; margin: auto; z-index: 1; width: 480px; } #himitsumenu ul li { float: right; margin: 0 20px 0 0; } #himitsumenu ul a { text-indent: -9999px; display: block; } #himitsumenu ul a:hover { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); } @media screen and (max-width: 760px) { #himitsumenu ul { display: none; } } #himitsumenu .num1 a { width: 33px; height: 102px; background: url(/common/img/magokoro/himitsu/nav_01.png) no-repeat 0 0; } #himitsumenu .num2 a { width: 33px; height: 76px; background: url(/common/img/magokoro/himitsu/nav_02.png) no-repeat 0 0; } #himitsumenu .num3 a { width: 34px; height: 75px; background: url(/common/img/magokoro/himitsu/nav_03.png) no-repeat 0 0; } #himitsumenu .num4 a { width: 32px; height: 116px; background: url(/common/img/magokoro/himitsu/nav_04.png) no-repeat 0 0; } #himitsumenu .num5 a { width: 32px; height: 79px; background: url(/common/img/magokoro/himitsu/nav_05.png) no-repeat 0 0; } #himitsumenu .num6 a { width: 33px; height: 98px; background: url(/common/img/magokoro/himitsu/nav_06.png) no-repeat 0 0; } #himitsumenu .num7 a { width: 34px; height: 108px; background: url(/common/img/magokoro/himitsu/nav_07.png) no-repeat 0 0; } #himitsumenu .num8 a { width: 33px; height: 90px; background: url(/common/img/magokoro/himitsu/nav_08.png) no-repeat 0 0; margin-left: 0; } #himitsumenu .num1 a:hover, #himitsumenu .num1.active { background: url(/common/img/magokoro/himitsu/nav_01_hover.png) no-repeat 0 0; } #himitsumenu .num2 a:hover, #himitsumenu .num2.active { background: url(/common/img/magokoro/himitsu/nav_02_hover.png) no-repeat 0 0; } #himitsumenu .num3 a:hover, #himitsumenu .num3.active { background: url(/common/img/magokoro/himitsu/nav_03_hover.png) no-repeat 0 0; } #himitsumenu .num4 a:hover, #himitsumenu .num4.active { background: url(/common/img/magokoro/himitsu/nav_04_hover.png) no-repeat 0 0; } #himitsumenu .num5 a:hover, #himitsumenu .num5.active { background: url(/common/img/magokoro/himitsu/nav_05_hover.png) no-repeat 0 0; } #himitsumenu .num6 a:hover, #himitsumenu .num6.active { background: url(/common/img/magokoro/himitsu/nav_06_hover.png) no-repeat 0 0; } #himitsumenu .num7 a:hover, #himitsumenu .num7.active { background: url(/common/img/magokoro/himitsu/nav_07_hover.png) no-repeat 0 0; } #himitsumenu .num8 a:hover, #himitsumenu .num8.active { background: url(/common/img/magokoro/himitsu/nav_08_hover.png) no-repeat 0 0; } #himitsu .section { position: relative; } #himitsu .inner { width: 980px; text-align: center; margin: 0 auto; position: relative; } #himitsu .inner h2 { float: right; } #himitsu .inner .text { float: left; } #himitsu .onlinebutton { vertical-align: bottom; position: absolute; left: 0px; bottom: 140px; width: 347px; right: 0; margin: auto; } #himitsu .onlinebutton a:hover { opacity: 0.7; -ms-filter: "alpha(opacity=70)"; filter: alpha(opacity=70); } #himitsu #section0 { background: url(/common/img/magokoro/himitsu/bg_01.jpg) no-repeat 50% 50%/cover; } #himitsu #section1 { background: url(/common/img/magokoro/himitsu/bg_02.jpg) no-repeat 50% 50%/cover; } #himitsu #section2 { background: url(/common/img/magokoro/himitsu/bg_03.jpg) no-repeat 50% 50%/cover; } #himitsu #section3 { background: url(/common/img/magokoro/himitsu/bg_04.jpg) no-repeat 50% 50%/cover; } #himitsu #section4 { background: url(/common/img/magokoro/himitsu/bg_05.jpg) no-repeat 50% 50%/cover; } #himitsu #section5 { background: url(/common/img/magokoro/himitsu/bg_06.jpg) no-repeat 50% 50%/cover; } #himitsu #section6 { background: url(/common/img/magokoro/himitsu/bg_07.jpg) no-repeat 50% 50%/cover; } #himitsu #section7 { background: url(/common/img/magokoro/himitsu/bg_08.jpg) no-repeat 50% 50%/cover; } #himitsu #site-footer { margin-top: 0; padding-bottom: 90px; } #himitsu #site-footer .copyright { padding-top: 0; } @media screen and (max-width: 760px) { #himitsu { position: relative; } #himitsu #section0, #himitsu #section1, #himitsu #section2, #himitsu #section3, #himitsu #section4, #himitsu #section5, #himitsu #section6, #himitsu #section7 { background: none; } #himitsu #section0 h2 { background: url(/common/img/magokoro/himitsu/bg_01.jpg) no-repeat 50% 50%/cover; } #himitsu #section1 h2 { background: url(/common/img/magokoro/himitsu/bg_02.jpg) no-repeat 50% 50%/cover; } #himitsu #section2 h2 { background: url(/common/img/magokoro/himitsu/bg_03.jpg) no-repeat 50% 50%/cover; } #himitsu #section3 h2 { background: url(/common/img/magokoro/himitsu/bg_04.jpg) no-repeat 50% 50%/cover; } #himitsu #section4 h2 { background: url(/common/img/magokoro/himitsu/bg_05.jpg) no-repeat 50% 50%/cover; } #himitsu #section5 h2 { background: url(/common/img/magokoro/himitsu/bg_06.jpg) no-repeat 50% 50%/cover; } #himitsu #section6 h2 { background: url(/common/img/magokoro/himitsu/bg_07.jpg) no-repeat 50% 50%/cover; } #himitsu #section7 h2 { background: url(/common/img/magokoro/himitsu/bg_08.jpg) no-repeat 50% 50%/cover; } #himitsu .inner { width: auto; margin: 0 auto; padding: 0; } #himitsu .inner h2 { float: none; zoom: 0.7; padding: 50px 30px; } #himitsu .inner .text { float: none; margin: 15px 10px 25px; text-align: left; } #himitsu .onlinebutton { margin-bottom: 30px; position: static; width: 100%; } } .slider { display: none; } .newsMain { background: url(/common/img/news/bg.jpg) no-repeat 50% 50%/cover; padding: 30px 0 30px; } .newsMain .slick-list li { width: 469px; background: #fff; padding-bottom: 15px; } .newsMain h2 { font-size: 22px; letter-spacing: -2px; line-height: 1.2; padding: 15px 20px 10px; } .newsMain .item-thumb { height: 246px; overflow: hidden; } .newsMain .date { color: #707070; margin-right: 20px; float: right; } .newsMain .category { float: right; margin-right: 20px; margin-left: 20px; padding: 5px 20px; font-size: 13px; color: #fff; line-height: 1; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background: #000; } @media screen and (max-width: 760px) { .newsMain { background-size: cover; padding: 30px 0 30px; } .newsMain .slick-list li { width: 300px; } .newsMain .item-thumb { height: 157px; } .newsMain h2 { font-size: 18px; } .newsMain li .date { float: left; margin-left: 20px; } .newsMain li .category { float: right; text-align: center; } .slick-arrow { display: none !important; } } .categoryMenu { padding: 10px 0; background: #fff url(/common/img/news/menu_line.gif) no-repeat 0 0; position: relative; margin-bottom: 40px; text-align: center; } .categoryMenu:after { content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0px; bottom: 0px; background: url(/common/img/news/menu_line.gif) no-repeat 0 0; } .categoryMenu li { float: left; } @media screen and (max-width: 760px) { .categoryMenu { padding: 0; background: none; margin-bottom: 10px; } .categoryMenu:after { display: none; } .categoryMenu li { float: left; width: 49%; margin-bottom: 7px; } .categoryMenu li:nth-child(2n+1) { float: right; } } .news .newstitle { position: relative; padding: 15px 0 15px 30px; margin-bottom: 30px; font-size: 30px; letter-spacing: -2px; line-height: 1; } .news .newstitle img { vertical-align: middle; } .news .newstitle:after, .news .newstitle:before { content: ""; display: block; height: 4px; width: 100%; background: url(/common/img/news/line.png) no-repeat 50% 0; position: absolute; left: 0; } .news .newstitle:before { top: 0; } .news .newstitle:after { bottom: 0; } .news h1.newstitle { padding-bottom: 20px; } .news .snsArea { float: right; zoom: 1; } .news .snsArea:before, .news .snsArea:after { display: block; height: 0; visibility: hidden; content: "."; } .news .snsArea:after { clear: both; } .news .snsArea li { float: right; margin-left: 10px; } .news .snsArea * { vertical-align: middle; } .news .mainArea { width: 640px; float: left; } .news .mainArea .banner { text-align: center; } .news .mainArea .banner li { float: left; } .news .mainArea .banner li:nth-child(2n+1) { margin-right: 10px; } .news .mainArea .article-body a { color: #1855dd; text-decoration: underline; } .news .side { float: right; width: 296px; } .news .side .banner { margin-bottom: 30px; text-align: center; } .news .side .rankingArea { padding: 1px; background: url(/common/img/news/bg_ranking.gif) repeat 0 0; margin-bottom: 30px; } .news .side .rankingArea h2 { text-align: center; } .news .side .rankingArea .inner { padding: 20px 20px 0; background: #fff; } .news .side .rankingArea li { border-bottom: 1px solid #cccccc; margin-top: 20px; padding: 0 0 20px 40px; list-style: none; } .news .side .rankingArea li:nth-child(1) { background: url(/common/img/news/icon_rank_01.gif) no-repeat 0 5px; } .news .side .rankingArea li:nth-child(2) { background: url(/common/img/news/icon_rank_02.gif) no-repeat 0 5px; } .news .side .rankingArea li:nth-child(3) { background: url(/common/img/news/icon_rank_03.gif) no-repeat 0 5px; } .news .side .rankingArea li:nth-child(4) { background: url(/common/img/news/icon_rank_04.gif) no-repeat 10px 5px; } .news .side .rankingArea li:nth-child(5) { background: url(/common/img/news/icon_rank_05.gif) no-repeat 10px 5px; border: none; } .news .newsList { margin-bottom: 50px; } .news .newsList .item-thumb { width: 150px; float: left; margin-right: 20px; } .news .newsList h2 { font-size: 22px; line-height: 1.2; letter-spacing: -2px; margin-bottom: 10px; } .news .newsList .item-summary { margin: 15px 0 0 0; } .news .newsList .inner { overflow: hidden; } .news .newsList article { margin-bottom: 20px; padding-bottom: 20px; background: url(/common/img/news/line_list.gif) repeat-x 0 100%; } .news .newsList .item-title .new { vertical-align: middle; margin-right: 10px; } .news .newsList .item-title .pdf { padding-left: 10px; vertical-align: middle; } .news .category { float: left; width: 110px; text-align: center; line-height: 1; padding: 5px 0px; background: #000; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 13px; margin-right: 15px; } .news .cat-blog .category { background: #1c8845; } .news .cat-campaign .category { background: #c43a15; } .news .cat-kinrei-news .category { background: #b98a00; } .news .cat-pressrelease .category { background: #324398; } .news .date { font-size: 18px; line-height: 1; color: #707070; } .news .pager { text-align: center; margin-bottom: 50px; } .news .pager li { display: inline-block; margin: 0 5px; } .news .pager li a { display: block; padding: 5px 13px; background: #000; color: #fff; } .news .commentArea { clear: both; background: #fff; border: 1px solid #d4d4d4; margin-top: 50px; padding: 10px 10px 0; } .news .commentArea h2 { margin: 0 0 10px; line-height: 1; padding: 5px 20px 13px; color: #fff; background: #000; letter-spacing: -2px; } @media all and (-ms-high-contrast: none) { .news h1.newstitle { padding-top: 32px; } } @media screen and (max-width: 760px) { .news .main-content { margin: 0 10px; } .news .newstitle { padding: 10px 10px; margin-bottom: 10px; font-size: 20px; line-height: 1.2; } .news .newstitle img { zoom: 0.7; } .news .snsArea { clear: both; float: none; margin-top: 10px; } .news .snsArea li { float: left; margin: 0 10px 0 0; } .news .mainArea { width: auto; float: none; } .news .mainArea .banner { margin-bottom: 20px; } .news .mainArea .banner li { float: left; width: 48%; } .news .mainArea .banner li::nth-child(even) { float: right; margin-right: 0; } .news .side { float: none; width: auto; } .news .side .banner { margin-bottom: 30px; } .news .side .rankingArea .inner { padding: 10px 10px 0; } .news .side .rankingArea li { margin-top: 10px; padding: 0 0 10px 30px; } .news .side .rankingArea li:nth-child(1) { background-size: 22px auto; } .news .side .rankingArea li:nth-child(2) { background-size: 22px auto; } .news .side .rankingArea li:nth-child(3) { background-size: 22px auto; } .news .side .rankingArea li:nth-child(4) { background-size: 6px auto; } .news .side .rankingArea li:nth-child(5) { background-size: 6px auto; } .news .side .fb_iframe_widget_fluid { display: block; text-align: center; } .news .newsList { margin-bottom: 20px; } .news .newsList .item-thumb { width: auto; float: none; text-align: center; margin: 0 0 10px; } .news .newsList h2 { font-size: 18px; line-height: 1.2; letter-spacing: -2px; margin-bottom: 10px; } .news .newsList .item-summary { display: none; } .news .newsList article { margin-bottom: 20px; padding-bottom: 20px; background: url(/common/img/news/line_list.gif) repeat-x 0 100%; } .news .newsList .date { float: right; } .news .newsList .pdf { width: 30px; height: auto; } } .article-body { margin: 30px 0; padding-bottom: 30px; background: url(/common/img/news/line_body.png) no-repeat 0 100%; clear: both; } .article-body .article-main-img { margin-bottom: 30px; } .article-body h2 { clear: both; font-size: 24px; margin-top: 40px; } .article-body h3 { clear: both; font-weight: bold; margin-top: 25px; padding: 15px 0 15px 20px; position: relative; line-height: 1.2; background: url(/common/img/news/title_h3.gif) no-repeat 0 50%; } .article-body h3:after, .article-body h3:before { content: ""; display: block; width: 100%; height: 1px; left: 0; position: absolute; border-top: 1px dotted #000; } .article-body h3:before { top: 0; } .article-body h3:after { bottom: 0; } .article-body h4 { clear: both; font-weight: bold; color: #115a1d; margin-top: 20px; } .article-body ul { margin-top: 20px; } .article-body ul li { padding: 0 0 0 26px; position: relative; } .article-body ul li:after { content: ""; display: block; width: 4px; height: 4px; background: #000; position: absolute; left: 10px; top: 0.6em; } .article-body p { margin-top: 10px; line-height: 2.5em;} .article-body .box01 { margin-top: 30px; border: 5px solid #c2c2c2; padding: 10px 20px 15px; } .article-body .box02 { margin-top: 30px; padding: 10px 20px 15px; color: #e80011; border: 5px solid #e80011; } .article-body .pdf-link { margin-top: 30px; padding: 0 0 0 45px; background: url(/common/img/news/icon_pdf.gif) no-repeat 0 50%; } @media screen and (max-width: 760px) { .article-body { margin: 15px 0; } .article-body h2 { font-size: 24px; margin-top: 20px; font-weight: bold; line-height: 1.2; } .article-body h3 { font-size: 16px; } .article-body p { margin-top: 10px; } .article-body .box01 { padding: 0 10px 10px; } .article-body .box02 { padding: 0 10px 10px; } .article-body ul li { padding-left: 10px; } .article-body ul li:after { left: 0; } } /*----------------------------------------- re-company ------------------------------------------*/ @media screen and (max-width: 1450px) { header#re-header nav > ul.header_pc-only > li .p-head_link { font-size: 15px!important; } header#re-header nav .header_hamburger-only .header_hamburger_parentlist > li a { font-size: 15px!important; } header#re-header nav > ul.header_pc-only > li { margin: 0px 21px!important; } } @media screen and (max-width: 760px) { header#re-header nav .header_hamburger-only .header_hamburger_parentlist > li a { font-size: 5.5vw!important; } } @media screen and (min-width: 761px) { header#re-header { height: 86px!important; } header#re-header nav > ul.header_pc-only > li:last-child { margin-right: 0!important; } header#re-header nav > ul.header_pc-only > li:last-child .re-nav_link_box a:last-child { height: 86px!important; font-size: 20px!important; } header#re-header nav > ul.header_pc-only > li { margin: 0 14px!important; } header#re-header nav > ul.header_pc-only > li .p-head_link { font-size: 16px!important; } header#re-header nav > ul.header_pc-only > li a, header#re-header.re-under nav > ul.header_pc-only > li a { font-size: 16px!important; color: #fff!important; } header#re-header.header_white nav > ul.header_pc-only > li a, header#re-header.re-under nav > ul.header_pc-only > li a { color: #000!important; } header#re-header nav > ul.header_pc-only > li:last-child .re-nav_link_box a { color: #fff!important; } } .re-company_lead-cont { margin-bottom: 100px; } .re-company_lead-txt { font-size: 24px; font-weight: 600; line-height: calc(44 / 24); text-align: left; letter-spacing: .05em; } .re-company_button { display: inline-block; font-size: 15px; line-height: 1; border: 1px solid #000; border-radius: 22px; padding: 12px 23px; position: relative; text-align: center; } .re-company_button:before { content: ""; width: 20px; height: 10px; background: url(/common/img/common/icon_arrow-right.png) 0 0 /contain no-repeat; position: absolute; top: calc(50% - 6px); right: 15px; } .re-company_button[target="_blank"]:before { content: ""; width: 21px; height: 21px; background: url(/common/img/common/icon_window.png) 0 0 /contain no-repeat; position: absolute; top: calc(50% - 12px); right: 18px; } .re-company_contact { margin-bottom: 105px; padding: 50px 55px; background-color: #F8F8F4; position: relative; } .re-company_contact-block { position: relative; } .re-company_contact-block.tel { width: 100%; } .re-company_contact-block.mail { width: 100%; text-align: center; } .re-company_contact-block.mail .re-company_button { margin-top: 60px; } .re-company_contact-block.post { padding-top: 40px; width: 100%; border-top: 2px solid #d8d8d8; } .re-company_contact-head { padding-left: 30px; font-size: 18px; font-weight: bold; text-align: left; letter-spacing: .05em; position: relative; } .re-company_contact-block.tel .re-company_contact-head { padding-left: 40px; } .re-company_contact-block.tel .re-company_contact-head:before { width: 29px; height: 32px; background: url(/common/img/common/icon_tell.png) 0 0 /contain no-repeat; top: calc(50% - 16px); left: 0; } .re-company_contact-block.mail .re-company_contact-head { padding-left: 50px; } .re-company_contact-block.mail .re-company_contact-head:before { width: 38px; height: 28px; background: url(/common/img/common/icon_mail.png) 0 0 /contain no-repeat; top: calc(50% - 14px); left: 0; } .re-company_contact-block.mail .re-company_contact-txt { text-align: left; } .re-company_contact-block.mail .re-company_contact-attention-list { text-align: left; } .re-company_contact-block.post .re-company_contact-head { padding-left: 50px; } .re-company_contact-block.post .re-company_contact-head:before { width: 34px; height: 42px; background: url(/common/img/common/icon_post.png) 0 0 /contain no-repeat; top: calc(50% - 21px); left: 0; } .re-company_contact-head:before { content: ""; position: absolute; } .re-company_contact-tel { margin: 25px auto 15px; font-size: 56px; font-weight: bold; letter-spacing: .05em; } .re-company_contact-tel a { padding-left: 64px; display: block!important; position: relative; } .re-company_contact-tel a:before { content: ""; width: 60px; height: 47px; background: url(/common/img/common/icon_free.png) 0 0 /contain no-repeat; position: absolute; top: calc(50% - 18px); left: 0; } .re-company_contact-txt { font-size: 16px; font-weight: bold; line-height: 1.4; letter-spacing: .05em; } .re-company_contact-attention-list li { padding-left: 1em; text-indent: -1em; font-weight: bold; font-size: 16px; color: #758767; line-height: 1.4; letter-spacing: .05em; } .re-company_group-cont { margin-top: 140px; padding: 50px 50px 50px 55px; border: 2px solid #d0d0d0; border-bottom: 5px solid #d0d0d0; } .re-company_group-cont .re-company_title.title3 { margin-bottom: 40px; font-size: 38px; font-weight: 600; color: #000; line-height: 1; text-align: left; letter-spacing: .05em; } .re-company_group-txt { font-size: 24px; font-weight: 600; line-height: calc(44 / 24); text-align: left; letter-spacing: .05em; } @media screen and (max-width: 760px) { .re-company_lead-cont { margin-bottom: calc(80 / 750 * 100vw); text-align: center; } .re-company_lead-cont .re-company_button { margin-top: calc(60 / 750 * 100vw); } .re-company_lead-txt { font-size: calc(28 / 750 * 100vw); line-height: calc(52 / 28); } .re-company_button { padding: calc(20 / 750 * 100vw); min-width: calc(550 / 750 * 100vw); font-size: calc(28 / 750 * 100vw); border: calc(2 / 750 * 100vw) solid #000; border-radius: calc(36 / 750 * 100vw); } .re-company_button:before { width: calc(34 / 750 * 100vw); height: calc(19 / 750 * 100vw); top: calc(50% - 13 / 750 * 100vw); right: calc(24 / 750 * 100vw); } .re-company_button[target="_blank"]:before { width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw); top: calc(50% - 18 / 750 * 100vw); right: calc(19 / 750 * 100vw); } .re-company_contact { margin-bottom: calc(75 / 750 * 100vw); padding: calc(50 / 750 * 100vw) calc(40 / 750 * 100vw) calc(45 / 750 * 100vw) calc(50 / 750 * 100vw); } .re-company_contact-block.tel { padding-bottom: calc(60 / 750 * 100vw); } .re-company_contact-block.mail { padding: calc(65 / 750 * 100vw) 0 calc(70 / 750 * 100vw); border-top: calc(2 / 750 * 100vw) solid #d8d8d8; } .re-company_contact-block.mail .re-company_button { margin: calc(45 / 750 * 100vw) 0; } .re-company_contact-block.post { padding-top: calc(60 / 750 * 100vw); border-top: calc(2 / 750 * 100vw) solid #d8d8d8; } .re-company_contact-head { padding-left: calc(60 / 750 * 100vw); font-size: calc(32 / 750 * 100vw); } .re-company_contact-block.tel .re-company_contact-head { padding-left: calc(52 / 750 * 100vw); } .re-company_contact-block.tel .re-company_contact-head:before { width: calc(39 / 750 * 100vw); height: calc(43 / 750 * 100vw); top: calc(50% - 21 / 750 * 100vw); left: 0; } .re-company_contact-block.mail .re-company_contact-head { padding-left: calc(65 / 750 * 100vw); } .re-company_contact-block.mail .re-company_contact-head:before { width: calc(50 / 750 * 100vw); height: calc(38 / 750 * 100vw); top: calc(50% - 19 / 750 * 100vw); left: 0; } .re-company_contact-block.post .re-company_contact-head { padding-left: calc(60 / 750 * 100vw); } .re-company_contact-block.post .re-company_contact-head:before { width: calc(46 / 750 * 100vw); height: calc(57 / 750 * 100vw); top: calc(50% - 28 / 750 * 100vw); left: 0; } .re-company_contact-tel { font-size: calc(70 / 750 * 100vw); margin: calc(30 / 750 * 100vw) auto calc(15 / 750 * 100vw); } .re-company_contact-tel a { padding-left: calc(92 / 750 * 100vw); } .re-company_contact-tel a:before { width: calc(80 / 750 * 100vw); height: calc(63 / 750 * 100vw); top: calc(50% - 23 / 750 * 100vw); left: 0; } .re-company_contact-txt { font-size: calc(22 / 750 * 100vw); line-height: calc(34 / 22); } .re-company_contact-block.post .re-company_contact-txt { margin-top: calc(40 / 750 * 100vw); } .re-company_contact-block.post .re-company_contact-txt:last-of-type { margin-top: calc(50 / 750 * 100vw); } .re-company_contact-attention-list li { font-size: calc(22 / 750 * 100vw); line-height: calc(26 / 22); } .re-company_contact-attention-list li:not(:last-of-type) { margin-bottom: calc(10 / 750 * 100vw); } .re-company_group-cont { margin-top: calc(75 / 750 * 100vw); padding: calc(40 / 750 * 100vw) calc(50 / 750 * 100vw) calc(50 / 750 * 100vw) calc(35 / 750 * 100vw); text-align: center; border: calc(2 / 750 * 100vw) solid #d0d0d0; border-bottom: calc(6 / 750 * 100vw) solid #d0d0d0; } .re-company_group-cont .re-company_title.title3 { margin-bottom: calc(45 / 750 * 100vw); font-size: calc(38 / 750 * 100vw); } .re-company_group-cont .re-company_button { margin-top: calc(40 / 750 * 100vw); } .re-company_group-txt { font-size: calc(28 / 750 * 100vw); line-height: calc(52 / 28); } } @media screen and (min-width: 761px) { .re-company_lead-cont { display: flex; justify-content: space-between; align-items: center; } .re-company_button { min-width: 270px; } .re-company_contact-inner { display: flex; justify-content: center; align-items: flex-start; } .re-company_contact-block.tel { padding-right: 35px; max-width: 490px; } .re-company_contact-block.tel:before { content: ""; width: 2px; height: 210px; display: block; background-color: #d8d8d8; position: absolute; top: calc(50% - 105px); right: 0; } .re-company_contact-block.mail { max-width: 480px; } .re-company_contact-block.post { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; } .re-company_contact-block.mail .re-company_contact-head { margin-left: 40px; } .re-company_contact-block.mail .re-company_button { margin: 30px 0; } .re-company_contact-block.mail .re-company_contact-txt { margin-left: 40px; } .re-company_contact-block.mail .re-company_contact-attention-list { margin-left: 40px; } .re-company_contact-attention-list li { margin-top: 10px; } .re-company_contact-attention-list li:not(:last-of-type) { margin-bottom: 3px; } .re-company_group-block { display: flex; justify-content: space-between; align-items: center; } } /*----------------------------------------- otoriyose ------------------------------------------*/ .otoriyose { /*otoriyoseList*/ /*instagramArea*/ /*under page*/ /*introduceArea*/ /*vesselArea*/ /*productDetail*/ /*howtoArea*/ /*otherList*/ } .otoriyose #topicpath { display: none; } .otoriyose .main-content { padding-bottom: 0; } .otoriyose .mainVisual { margin-bottom: 75px; position: relative; text-align: center; background: #000; } @media screen and (max-width: 760px) { .otoriyose .mainVisual { padding-bottom: 30px; } } .otoriyose .mainVisual.hide-on-mobile { background: #000 url(/common/img/otoriyose/index/mainvisual_bg.jpg) no-repeat 50% 0/100% auto; height: -moz-calc(100vh - 64px); height: -o-calc(100vh - 64px); height: -webkit-calc(100vh - 64px); height: calc(100vh - 64px); display: table; min-height: 800px; width: 100%; position: relative; } .otoriyose .mainVisual.hide-on-mobile h1 { display: table-cell; height: -moz-calc(100vh - 64px); height: -o-calc(100vh - 64px); height: -webkit-calc(100vh - 64px); height: calc(100vh - 64px); vertical-align: middle; min-height: 760px; } .otoriyose .mainVisual.hide-on-mobile:after { content: ""; display: block; background: url(/common/img/otoriyose/index/mainvisual_item.png) no-repeat 50% 0/100% auto; width: 363px; height: 436px; position: absolute; right: 0px; bottom: 0px; } .otoriyose .headlineImg { text-align: center; background: url(/common/img/otoriyose/headine_bg.png) no-repeat 50% 0; padding: 30px 0; margin-bottom: 50px; } .otoriyose .kodawariArea { width: 988px; margin: 0 auto 80px; } .otoriyose .kodawariArea .inner { position: relative; margin-bottom: 50px; } .otoriyose .kodawariArea .text { overflow: hidden; padding: 50px 0 0 20px; width: 440px; } .otoriyose .kodawariArea h3 { float: left; position: relative; z-index: 1; } .otoriyose .kodawariArea .thumb02 { z-index: 2; position: absolute; top: 180px; } .otoriyose .kodawariArea .inner:nth-child(1) h3 { margin: -115px 20px 0 -30px; } .otoriyose .kodawariArea .inner:nth-child(1) .thumb02 { right: 0; } .otoriyose .kodawariArea .inner:nth-child(2) h3 { float: right; margin: -115px -50px 0 30px; } .otoriyose .kodawariArea .inner:nth-child(2) .text { margin: 0 0 0 auto; } .otoriyose .kodawariArea .inner:nth-child(2) .thumb02 { left: 0; } .otoriyose .kodawariArea .inner:nth-child(3) { height: 506px; } .otoriyose .kodawariArea .inner:nth-child(3) h3 { float: right; margin: -115px 280px 0 30px; z-index: 3; position: relative; } .otoriyose .kodawariArea .inner:nth-child(3) .thumb02 { right: 0; top: 140px; } .otoriyose .kodawariArea .inner:nth-child(3) .text { width: 400px; padding-left: 0; } .otoriyose .kodawariArea .buttonStyle { width: 302px; position: absolute; right: 35px; top: 460px; } .otoriyose .kodawariArea .buttonStyle a { display: block; text-align: center; padding: 10px 10px 15px 20px; border: 1px solid #989f72; background: #fff url(/common/img/otoriyose/arrow.png) no-repeat 10px 45%/6px auto; text-decoration: none; font-size: 16px; line-height: 1; } @media screen and (max-width: 760px) { .otoriyose .main-content { padding-bottom: 0; } .otoriyose .mainVisual { margin-bottom: 25px; } .otoriyose .headlineImg { text-align: center; background: url(/common/img/otoriyose/headine_bg.png) no-repeat 50% 0; padding: 30px 0; margin: 0 10px 20px; } .otoriyose .kodawariArea { width: auto; margin: 0 auto 20px; } .otoriyose .kodawariArea .inner { position: relative; margin-bottom: 30px; } .otoriyose .kodawariArea .thumb01 { height: 150px; } .otoriyose .kodawariArea .thumb01 img { width: auto; max-width: inherit; height: 100%; margin-left: -30%; } .otoriyose .kodawariArea .text { overflow: hidden; padding: 20px 0 0 10px; width: auto; } .otoriyose .kodawariArea h3 { float: left; position: relative; z-index: 1; width: 30%; } .otoriyose .kodawariArea .thumb02 { position: static; margin-left: 7%; } .otoriyose .kodawariArea .inner:nth-child(1), .otoriyose .kodawariArea .inner:nth-child(2), .otoriyose .kodawariArea .inner:nth-child(3) { height: auto; } .otoriyose .kodawariArea .inner:nth-child(1) h3, .otoriyose .kodawariArea .inner:nth-child(2) h3, .otoriyose .kodawariArea .inner:nth-child(3) h3 { margin: -20% 0 0; float: left; width: 40%; } .otoriyose .kodawariArea .inner:nth-child(1) .thumb02, .otoriyose .kodawariArea .inner:nth-child(2) .thumb02, .otoriyose .kodawariArea .inner:nth-child(3) .thumb02 { float: left; } .otoriyose .kodawariArea .inner:nth-child(1) .text, .otoriyose .kodawariArea .inner:nth-child(2) .text, .otoriyose .kodawariArea .inner:nth-child(3) .text { width: auto; margin: 15px 10px 0 0; padding: 0; } .otoriyose .kodawariArea .inner:nth-child(1) .text p, .otoriyose .kodawariArea .inner:nth-child(2) .text p, .otoriyose .kodawariArea .inner:nth-child(3) .text p { position: relative; overflow: hidden; z-index: 2; } .otoriyose .kodawariArea .buttonStyle { width: auto; position: static; clear: both; margin: 0 10px; } } .otoriyose .otoriyoseList { width: 988px; margin: 0 auto 80px; } @media screen and (max-width: 760px) { .otoriyose .otoriyoseList { width: auto; } } .otoriyose .otoriyoseList .cont { padding-top: 30px; margin-top: 30px; background: url(/common/img/otoriyose/line_otoriyoselist.png) no-repeat 0 0; position: relative; } .otoriyose .otoriyoseList .inner { float: right; width: 450px; } .otoriyose .otoriyoseList .thumb { float: left; } .otoriyose .otoriyoseList h3 { float: right; } .otoriyose .otoriyoseList .text { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; width: 160px; height: 350px; float: right; padding: 80px 40px 0 0; } .otoriyose .otoriyoseList .text p { margin-left: 10px; } .otoriyose .otoriyoseList .buttonArea { position: absolute; right: 107px; bottom: 0px; } .otoriyose .otoriyoseList .buttonArea li { margin-top: 10px; } .otoriyose .otoriyoseList .pack { position: absolute; right: 287px; bottom: 135px; } .otoriyose .otoriyoseList .pack li { margin-top: 10px; } .otoriyose .otoriyoseList .pack li:first-child img { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0; -ms-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0; } @media screen and (max-width: 760px) { .otoriyose .otoriyoseList { width: auto; margin: 0 20px 20px; } .otoriyose .otoriyoseList .cont { padding: 30px 0 0; margin-top: 30px; background: url(/common/img/otoriyose/line_otoriyoselist.png) no-repeat 0 0; position: relative; } .otoriyose .otoriyoseList .inner { float: none; width: auto; } .otoriyose .otoriyoseList .thumb { float: none; margin: 0 10px 25px; } .otoriyose .otoriyoseList h3 { float: none; margin-bottom: 20px; text-align: center; } .otoriyose .otoriyoseList h3 img { zoom: 0.5; } .otoriyose .otoriyoseList .text { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: tb-tb; writing-mode: horizontal-tb; width: auto; height: auto; float: none; padding: 0 10px 20px; } .otoriyose .otoriyoseList .text p { margin-left: 0; } .otoriyose .otoriyoseList .buttonArea { position: static; text-align: center; } .otoriyose .otoriyoseList .pack { position: static; padding-bottom: 15px; } .otoriyose .otoriyoseList .pack { position: static; text-align: center; } .otoriyose .otoriyoseList .pack li { width: 49%; float: left; } .otoriyose .otoriyoseList .pack li:nth-child(even) { float: right; } } .otoriyose .instagramArea { padding: 60px 0; background: url(/common/img/otoriyose/bg_insta.gif) repeat 0 0; } .otoriyose .instagramArea h2 { text-align: center; margin-bottom: 40px; } .otoriyose .instagramArea .inner { width: 988px; margin: 0 auto; } .otoriyose .instagramArea #vtdr_body p { background: none; color: #fff; } .otoriyose .instagramArea #vtdr_body .vtdr_contents_pt10 { padding-top: 30px; } .otoriyose .instagramArea #vtdr_body #more { background: url(/common/img/otoriyose/index/button_more.png) no-repeat 0 0; width: 98px; height: 17px; border: none; text-indent: -9999px; overflow: hidden; } .otoriyose .instagramArea #vtdr_body #more:hover { opacity: 0.5; -ms-filter: "alpha(opacity=50)"; filter: alpha(opacity=50); } @media screen and (max-width: 760px) { .otoriyose .instagramArea { padding: 20px 0; background: url(/common/img/otoriyose/bg_insta.gif) repeat 0 0; } .otoriyose .instagramArea h2 { text-align: center; margin-bottom: 10px; } .otoriyose .instagramArea h2 img { zoom: 0.8; } .otoriyose .instagramArea .inner { width: auto; margin: 0 10px; } } .otoriyose .item { padding: 0; width: 988px; margin: 0 auto; overflow: visible; } .otoriyose .item img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .otoriyose .item a:hover img { opacity: 0.7; -ms-filter: "alpha(opacity=70)"; filter: alpha(opacity=70); } @media screen and (max-width: 760px) { .otoriyose .item { width: auto; margin: 0 10px; } } .otoriyose .underMainvisual { padding-top: 60px; text-align: center; width: 100%; margin-bottom: 40px; position: relative; } .otoriyose .underMainvisual:after { content: ""; display: block; background: url(/common/img/otoriyose/index/mainvisual_item.png) no-repeat 50% 0/100% auto; width: 363px; height: 436px; position: absolute; right: 0px; bottom: 0px; } .otoriyose .underMainvisual .package { position: absolute; right: 0px; top: 241px; } .otoriyose .underMainvisual .otoriyoseLogo { position: absolute; right: 49px; top: 64px; } .otoriyose .underMainvisual .inner { width: 980px; margin: 0 auto; position: relative; height: 660px; display: table; vertical-align: middle; } .otoriyose .underMainvisual h1 { display: table-cell; height: 660px; vertical-align: middle; } .otoriyose.otoriyose-nabeyaki .underMainvisual { background: #000 url(/common/img/otoriyose/nabeyaki/bg_main.jpg) no-repeat 0 0/cover; } .otoriyose.otoriyose-curry .underMainvisual { background: #000 url(/common/img/otoriyose/curry/bg_main.jpg) no-repeat 0 0/cover; } .otoriyose.otoriyose-kujonegi .underMainvisual { background: #000 url(/common/img/otoriyose/kujonegi/bg_main.jpg) no-repeat 0 0/cover; } .otoriyose.otoriyose-kitsune .underMainvisual { background: #000 url(/common/img/otoriyose/kitsune/bg_main.jpg) no-repeat 0 0/cover; } .otoriyose.otoriyose-miso .underMainvisual { background: #000 url(/common/img/otoriyose/miso/bg_main.jpg) no-repeat 0 0/cover; } @media screen and (max-width: 760px) { .otoriyose .underMainvisual { padding-top: 0; text-align: center; margin-bottom: 40px; height: -moz-calc(100vh - 57px); height: -o-calc(100vh - 57px); height: -webkit-calc(100vh - 57px); height: calc(100vh - 57px); display: table; width: 100%; position: relative; } .otoriyose .underMainvisual:after { display: none; } .otoriyose .underMainvisual .underMainvisualCont { display: table-cell; vertical-align: middle; padding-bottom: 30px; } .otoriyose .underMainvisual .package { position: static; padding-top: 10px; zoom: 0.7; } .otoriyose .underMainvisual .otoriyoseLogo { position: static; zoom: 0.8; padding: 0 0 10px 0; } .otoriyose .underMainvisual .inner { width: auto; margin: 0 auto; position: relative; vertical-align: middle; height: auto; } .otoriyose .underMainvisual h1 { display: block; width: auto; height: auto; zoom: 0.5; } .otoriyose.otoriyose-nabeyaki .underMainvisual { background: #000 url(/common/img/otoriyose/nabeyaki/bg_main_sp.jpg) no-repeat 50% 0/cover; } .otoriyose.otoriyose-curry .underMainvisual { background: #000 url(/common/img/otoriyose/curry/bg_main_sp.jpg) no-repeat 50% 0/cover; } .otoriyose.otoriyose-kujonegi .underMainvisual { background: #000 url(/common/img/otoriyose/kujonegi/bg_main_sp.jpg) no-repeat 50% 0/cover; } .otoriyose.otoriyose-kitsune .underMainvisual { background: #000 url(/common/img/otoriyose/kitsune/bg_main_sp.jpg) no-repeat 50% 0/cover; } .otoriyose.otoriyose-miso .underMainvisual { background: #000 url(/common/img/otoriyose/miso/bg_main_sp.jpg) no-repeat 50% 0/cover; } } .otoriyose .item .headline { text-align: center; margin-bottom: 50px; } .otoriyose .item .headline:first-child { margin-bottom: 30px; } @media screen and (max-width: 760px) { .otoriyose .item .headline { margin-bottom: 20px; } .otoriyose .item .headline:first-child { margin-bottom: 20px; } } .otoriyose .introduceArea .boldText { font-weight: bold; text-align: center; margin-bottom: 50px; } .otoriyose .introduceArea .boldText span { font-weight: normal; } .otoriyose .introduceArea h3 { text-align: center; } .otoriyose .introduceArea .cont01 { width: 645px; margin: 0 auto 65px; display: table; } .otoriyose .introduceArea .cont01 h3 { display: table-cell; vertical-align: middle; } .otoriyose .introduceArea .cont01 p { display: table-cell; width: 460px; overflow: hidden; vertical-align: middle; } .otoriyose .introduceArea .cont02 { padding: 0 20px; position: relative; overflow: visible; } .otoriyose .introduceArea .cont02 figure { float: left; } .otoriyose .introduceArea .cont02 figure:after { content: ''; display: block; width: 420px; height: 515px; background: url(/common/img/otoriyose/bg_deco_01.png) no-repeat 0 0; position: absolute; left: -145px; bottom: -112px; z-index: -1; } .otoriyose .introduceArea .cont02 figure figcaption { margin-top: -35px; font-size: 13px; margin-bottom: 35px; } .otoriyose .introduceArea .cont02 .inner { width: 450px; float: right; } .otoriyose .introduceArea .cont02 h3 { margin-bottom: 20px; } .otoriyose .introduceArea .cont02 h3:nth-of-type(2) { margin-top: 40px; } @media screen and (max-width: 760px) { .otoriyose .introduceArea { margin: 0 10px 30px; } .otoriyose .introduceArea .boldText { font-weight: normal; text-align: left; margin-bottom: 25px; } .otoriyose .introduceArea .cont01 { width: auto; margin: 0 auto 25px; display: block; } .otoriyose .introduceArea .cont01 h3 { display: block; margin-bottom: 20px; } .otoriyose .introduceArea .cont01 p { display: block; width: auto; } .otoriyose .introduceArea .cont02 { padding: 0 0; } .otoriyose .introduceArea .cont02 figure { float: none; text-align: center; margin: 0 0 0 6%; } .otoriyose .introduceArea .cont02 figure:after { width: 300px; height: 300px; background-size: 100% auto; bottom: inherit; top: -30px; left: -30px; } .otoriyose .introduceArea .cont02 figure figcaption { margin-top: -15px; } .otoriyose .introduceArea .cont02 .inner { width: auto; float: none; } .otoriyose .introduceArea .cont02 h3 { margin-bottom: 20px; } .otoriyose .introduceArea .cont02 h3:nth-of-type(2) { margin-top: 40px; } } .otoriyose .vesselArea { background: #fff; padding: 50px; margin-bottom: 100px; } .otoriyose .vesselArea .title { font-size: 20px; font-weight: bold; margin-bottom: 3px; } .otoriyose .vesselArea .notice { font-size: 12px; } .otoriyose .vesselArea .inner { display: table; direction: rtl; } .otoriyose .vesselArea .inner .thumb { display: table-cell; vertical-align: middle; width: 330px; } .otoriyose .vesselArea .inner .text { display: table-cell; vertical-align: middle; text-align: left; direction: ltr; padding-top: 10px; } @media screen and (max-width: 760px) { .otoriyose .vesselArea { padding: 20px; margin: 0 10px 30px; -webkit-box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px 0; -moz-box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px 0; -ms-box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px 0; box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px 0; } .otoriyose .vesselArea .inner { display: block; } .otoriyose .vesselArea .inner .thumb { display: block; vertical-align: middle; width: auto; text-align: center; } .otoriyose .vesselArea .inner .text { display: block; vertical-align: middle; text-align: left; } } .otoriyose .productDetail .cont01 { padding-bottom: 30px; margin-bottom: 10px; background: url(/common/img/otoriyose/line_otoriyoselist.png) no-repeat 0 100%; } .otoriyose .productDetail .cont01 .thumb { float: right; background: url(/common/img/otoriyose/bg_product.png) no-repeat 0 100%; padding: 0 0 50px 50px; } .otoriyose .productDetail .cont01 .inner { width: 385px; float: left; margin-left: 30px; } .otoriyose .productDetail .cont01 h3 { margin-bottom: 20px; } .otoriyose .productDetail .cont01 .price { font-size: 20px; font-weight: bold; line-height: 1; margin-bottom: 20px; } .otoriyose .productDetail .cont01 .price span { font-size: 30px; } .otoriyose .productDetail .cont01 .buttonStyle { margin-bottom: 30px; } .otoriyose .productDetail .cont01 .package li { float: left; margin-right: 15px; } @media screen and (max-width: 760px) { .otoriyose .productDetail .cont01 { padding-bottom: 30px; margin-bottom: 10px; background: url(/common/img/otoriyose/line_otoriyoselist.png) no-repeat 0 100%; } .otoriyose .productDetail .cont01 .thumb { float: none; text-align: center; background: url(/common/img/otoriyose/bg_product.png) no-repeat 0 100%/100% auto; padding: 0 20px 20px 20px; } .otoriyose .productDetail .cont01 .inner { width: auto; float: none; margin: 0; } .otoriyose .productDetail .cont01 h3 { margin-bottom: 10px; text-align: center; zoom: 0.7; } .otoriyose .productDetail .cont01 .price { text-align: center; } .otoriyose .productDetail .cont01 .buttonStyle { margin-bottom: 30px; text-align: center; } .otoriyose .productDetail .cont01 .package li { text-align: center; width: 48%; margin-right: 0; } .otoriyose .productDetail .cont01 .package li:nth-child(even) { float: right; } .otoriyose .productDetail .cont01 .package li img { width: 100%; height: auto; } } .otoriyose .howtoArea { background: #fff; border: 1px solid #a19f9f; padding: 5px; margin-bottom: 100px; } .otoriyose .howtoArea .cont01 { display: table; line-height: 1.4; } .otoriyose .howtoArea .cont01 h3 { background: #c30e22; display: table-cell; width: 41px; text-align: center; vertical-align: middle; } .otoriyose .howtoArea .cont01 .detail { display: table-cell; padding: 10px 0; } .otoriyose .howtoArea .cont01 .inner { display: table-cell; padding: 0 10px; } .otoriyose .howtoArea .cont01 h4 { font-weight: normal; padding: 10px 0 15px 75px; } .otoriyose .howtoArea .cont01 ul { color: #e60012; margin: 0 10px; } .otoriyose .howtoArea .cont01 ul li { text-indent: -1em; margin-left: 1em; } .otoriyose .howtoArea .cont01 ul li:before { content: "・"; } .otoriyose .howtoArea .cont01 .inner:not(:nth-of-type(1)) { border-left: 1px dotted #000; position: relative; } .otoriyose .howtoArea .cont01 .inner:not(:nth-of-type(1)):after { content: ""; display: block; height: 40px; width: 22px; background: #fff url(/common/img/otoriyose/arrow_howto.png) no-repeat 0 50%; position: absolute; left: -10px; top: 0px; bottom: 0; margin: auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(1) { width: 347px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(1) h4 { background: url(/common/img/otoriyose/step_num_01.png) no-repeat 0 0/60px auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(1) p { float: right; margin: 0 10px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(2) { width: 300px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(2) h4 { background: url(/common/img/otoriyose/step_num_02.png) no-repeat 0 0/60px auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) { font-weight: bold; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) h4 { background: url(/common/img/otoriyose/step_num_03.png) no-repeat 0 0/60px auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .thumb { float: left; padding-right: 10px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .text01 { line-height: 1.3; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .text02 { position: absolute; left: 154px; bottom: 0px; } .otoriyose .howtoArea .cont01 .box { position: relative; margin: 0 10px; } .otoriyose .howtoArea .cont02 { border: 7px solid #000; display: table; width: 100%; } .otoriyose .howtoArea .cont02 h3 { background: #000; display: table-cell; width: 182px; text-align: right; vertical-align: middle; } .otoriyose .howtoArea .cont02 p, .otoriyose .howtoArea .cont02 figure { display: table-cell; vertical-align: middle; } .otoriyose .howtoArea .cont02 .text01 { font-weight: bold; width: 183px; font-size: 140%; text-align: center; line-height: 1.2; } .otoriyose .howtoArea .cont02 .text02 { padding: 0 15px; } .otoriyose .howtoArea .cont02 .thumb { position: relative; z-index: 2; } .otoriyose .howtoArea .cont02 .thumb img { margin-top: -50px; } .otoriyose .howtoArea .notice { font-size: 90%; margin-top: 5px; } @media screen and (max-width: 760px) { .otoriyose .howtoArea { padding: 5px; margin-bottom: 50px; } .otoriyose .howtoArea .cont01 { display: block; } .otoriyose .howtoArea .cont01 h3 { background: #c30e22; display: block; width: auto; padding: 10px; } .otoriyose .howtoArea .cont01 h3 img { zoom: 0.5; } .otoriyose .howtoArea .cont01 .detail { display: block; padding: 10px 0; } .otoriyose .howtoArea .cont01 .inner { display: block; padding: 0 5px; } .otoriyose .howtoArea .cont01 h4 { font-weight: normal; padding: 10px 0 15px 70px; } .otoriyose .howtoArea .cont01 ul { color: #e60012; margin: 0 5px; } .otoriyose .howtoArea .cont01 .inner:not(:nth-of-type(1)) { border-left: none; border-top: 1px dotted #000; padding: 15px 0 0; margin-top: 15px; } .otoriyose .howtoArea .cont01 .inner:not(:nth-of-type(1)):after { height: 20px; width: 35px; background: #fff url(/common/img/otoriyose/arrow_howto_sp.png) no-repeat 50% 50%/17px 17px; left: 0; right: 0; top: -10px; bottom: inherit; margin: auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(1) { width: auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(1) p { float: right; margin: 0 10px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(2) { width: auto; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) { font-weight: bold; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .thumb { float: left; padding-right: 10px; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .text01 { line-height: 1.3; } .otoriyose .howtoArea .cont01 .inner:nth-of-type(3) .text02 { position: absolute; left: 154px; bottom: 0px; } .otoriyose .howtoArea .cont01 .box { position: relative; margin: 0 5px; } .otoriyose .howtoArea .cont02 { border: 7px solid #000; display: block; width: 100%; margin-top: 20px; } .otoriyose .howtoArea .cont02 h3 { display: block; width: auto; text-align: center; vertical-align: middle; } .otoriyose .howtoArea .cont02 h3 img { width: 100%; height: auto; } .otoriyose .howtoArea .cont02 p, .otoriyose .howtoArea .cont02 figure { display: block; vertical-align: middle; } .otoriyose .howtoArea .cont02 .text01 { font-weight: bold; width: auto; font-size: 140%; text-align: center; line-height: 1.2; } .otoriyose .howtoArea .cont02 .text02 { width: auto; padding: 15px 15px; } .otoriyose .howtoArea .cont02 .thumb { display: none; } } .otoriyose .otherList { margin-bottom: 160px; } .otoriyose .otherList li { float: left; text-align: center; font-weight: bold; } .otoriyose .otherList span { padding: 10px 0 0; display: block; } .otoriyose .otherList li:not(:first-child) { margin-left: 68px; } @media screen and (max-width: 760px) { .otoriyose .otherList { margin-bottom: 60px; } .otoriyose .otherList li { float: left; width: 50%; text-align: center; margin: 0 0 10px; } .otoriyose .otherList li img { padding: 0 10px 0; } .otoriyose .otherList span { padding: 5px 0 0; display: block; } .otoriyose .otherList li:not(:first-child) { margin-left: 0; } } /*messageArea*/ .messageArea { text-align: center; } .messageArea .title { color: #727b41; font-size: 38px; font-weight: bold; line-height: 1; margin-bottom: 20px; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; display: -webkit-box; /*--- Androidブラウザ用 ---*/ display: -ms-flexbox; /*--- IE10 ---*/ display: -webkit-flex; /*--- safari（PC）用 ---*/ display: flex; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .messageArea .title:before, .messageArea .title:after { border-top: 4px double #bcc1a0; content: ""; display: inline; /* for IE */ -webkit-flex-grow: 1; /*Safari*/ -webkit-box-flex: 1; /*android */ flex-grow: 1; } .messageArea .title:before { margin-right: 0.5em; } .messageArea .title:after { margin-left: 0.5em; } .messageArea h2 { font-weight: bold; font-size: 36px; margin-bottom: 15px; } .messageArea .page-section { margin-bottom: 80px; } .messageArea .section-inner { margin-bottom: 35px; } @media screen and (max-width: 760px) { .messageArea .title { font-size: 24px; margin-bottom: 10px; } .messageArea h2 { font-size: 20px; text-align: center; } .messageArea .page-section { margin-bottom: 50px; text-align: left; } .messageArea .section-inner { margin-bottom: 35px; } } .company-message .rule-block .rule-title { font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } #vtdr_body #vtdr_modal_product_thumbimg li a { color: #fff !important; } .nowater { font-size: 18px; background: #000; /*---aboutArea--------------------------------*/ /*---seriesArea--------------------------------*/ /*---instagramArea--------------------------------*/ /*---himitsuArea--------------------------------*/ /*mainVisualUnder*/ /*productDetail*/ /*item-sub-info*/ /*productList----------------------*/ } .nowater #contents .item, .nowater .aboutArea .aboutAreaCont, .nowater .seriesArea .seriesAreaCont, .nowater .instagramArea .instagramAreaCont, .nowater .himitsuArea .himitsuAreaCont, .nowater .mainVisualUnder .mainVisualUnderCont, .nowater .productDetailCont { width: 990px; margin: 0 auto; min-width: 990px; } @media screen and (max-width: 760px) { .nowater #contents .item, .nowater .aboutArea .aboutAreaCont, .nowater .seriesArea .seriesAreaCont, .nowater .instagramArea .instagramAreaCont, .nowater .himitsuArea .himitsuAreaCont, .nowater .mainVisualUnder .mainVisualUnderCont, .nowater .productDetailCont { width: auto; min-width: 0; } } @media screen and (max-width: 760px) { .nowater { font-size: 16px; } } .nowater #topicpath { display: none; } .nowater #contents { background: url(/common/img/ramen/nowater/common/bg.jpg) repeat-y 0 0; } .nowater #contents .item { color: #fff; font-size: 15px; padding: 0; overflow: visible; } .nowater .mainVisual { position: relative; background: url(/common/img/ramen/nowater/index/main_bg_pc.png) no-repeat 50% 0; background-size: 100% auto; padding-bottom: 130px; } .nowater .mainVisual .mainVisualInner { position: absolute; left: 0px; top: 0px; right: 0; width: 988px; height: 500px; margin: 0 auto; z-index: 10; } .nowater .mainVisual .mainVisualInner .mainLogo { position: absolute; left: -152px; bottom: 180px; } .nowater .mainVisual .mainVisualInner .text { position: absolute; right: 0px; top: 100px; } .nowater .mainVisual .seriesTitle { width: 300px; position: absolute; left: 120px; bottom: -100px; } .nowater .mainVisual .scroll { bottom: -300px; } .nowater .mainVisual #js-slider .sp-slides { position: relative; } .nowater .mainVisual #js-slider .title { position: absolute; left: 0px; bottom: 140px; } .nowater .mainVisual #js-slider .kitakata .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 180px; } .nowater .mainVisual #js-slider .kitakata .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .yokozuna .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 280px; } .nowater .mainVisual #js-slider .yokozuna .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .hakata .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 250px; } .nowater .mainVisual #js-slider .hakata .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .sapporo .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 250px; } .nowater .mainVisual #js-slider .sapporo .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .kadoya .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 220px; } .nowater .mainVisual #js-slider .kadoya .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .tokyo .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 240px; } .nowater .mainVisual #js-slider .tokyo .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .shikairo .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 220px; } .nowater .mainVisual #js-slider .shikairo .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .taiwan .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 265px; } .nowater .mainVisual #js-slider .taiwan .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .shio-gensui .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 250px; } .nowater .mainVisual #js-slider .shio-gensui .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .gomoku .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 250px; } .nowater .mainVisual #js-slider .gomoku .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .yokohama .title img:nth-of-type(1) { position: absolute; left: 0; bottom: 250px; } .nowater .mainVisual #js-slider .yokohama .title img:nth-of-type(2) { position: relative; left: 20px; } .nowater .mainVisual #js-slider .kitakata { background: url(/common/img/ramen/nowater/kitakata/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .hakata { background: url(/common/img/ramen/nowater/hakata/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .sapporo { background: url(/common/img/ramen/nowater/sapporo/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .kadoya { background: url(/common/img/ramen/nowater/kadoya/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .tokyo { background: url(/common/img/ramen/nowater/tokyo/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .shikairo { background: url(/common/img/ramen/nowater/shikairo/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .taiwan { background: url(/common/img/ramen/nowater/taiwan/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .kinsho { background: url(/common/img/ramen/nowater/kinsho/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .yokozuna { background: url(/common/img/ramen/nowater/yokozuna/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .onomichi { background: url(/common/img/ramen/nowater/onomichi/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .saihou { background: url(/common/img/ramen/nowater/saihou/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .korakuen { background: url(/common/img/ramen/nowater/korakuen/index_main_pc.png) no-repeat 40% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .hokkai { background: url(/common/img/ramen/nowater/hokkai/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .shiho { background: url(/common/img/ramen/nowater/shiho/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .kokuo { background: url(/common/img/ramen/nowater/kokuo/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .ichigen { background: url(/common/img/ramen/nowater/ichigen/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .shio-gensui { background: url(/common/img/ramen/nowater/shio-gensui/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .gomoku { background: url(/common/img/ramen/nowater/gomoku/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .yokohama { background: url(/common/img/ramen/nowater/yokohama/index_main_pc.png) no-repeat 50% 40%; background-size: 100% auto; } .nowater .mainVisual #js-slider .sp-thumbnails-container { position: relative; z-index: 10; margin-top: -100px; } .nowater .mainVisual #js-slider .sp-thumbnails-container img { filter: brightness(50%); } .nowater .mainVisual #js-slider .sp-selected-thumbnail img { filter: brightness(100%); } .nowater .mainVisual #js-slider .sp-buttons { display: none; } @media screen and (max-width: 760px) { .nowater .mainVisual { position: relative; background: url(/common/img/ramen/nowater/index/main_bg_sp.png) no-repeat 50% 0; background-size: 100% auto; padding-bottom: 90px; } .nowater .mainVisual .mainVisualInner { position: static; right: 0; width: auto; height: auto; margin: 0 auto; z-index: 10; } .nowater .mainVisual .mainVisualInner .mainLogo { z-index: 10; left: 10px; bottom: 58%; width: 80px; } .nowater .mainVisual .mainVisualInner .text { top: 20px; z-index: 10; margin: 0 30px; } .nowater .mainVisual .seriesTitle { width: 280px; left: 0; bottom: 160px; right: 0; margin: auto; z-index: 15; } .nowater .mainVisual .scroll { bottom: 0px; } .nowater .mainVisual #js-slider .sp-slides-container, .nowater .mainVisual #js-slider .sp-mask { height: 430px !important; } .nowater .mainVisual #js-slider .sp-slides { position: relative; } .nowater .mainVisual #js-slider .sp-slide { height: 430px !important; } .nowater .mainVisual #js-slider .title { position: relative; padding-top: 365px; margin: 0 50px; } .nowater .mainVisual #js-slider .kitakata .title { padding-top: 330px; } .nowater .mainVisual #js-slider .kitakata .title img:nth-of-type(1) { width: 80px; left: -45px; bottom: -11px; } .nowater .mainVisual #js-slider .kitakata .title img:nth-of-type(2) { width: 180px; position: relative; left: 45px; bottom: -15px; } .nowater .mainVisual #js-slider .hakata .title { padding-top: 330px; } .nowater .mainVisual #js-slider .hakata .title img:nth-of-type(1) { width: 75px; left: -45px; bottom: 25px; } .nowater .mainVisual #js-slider .hakata .title img:nth-of-type(2) { width: 160px; position: relative; left: 35px; bottom: 0; } .nowater .mainVisual #js-slider .sapporo .title { padding-top: 330px; } .nowater .mainVisual #js-slider .sapporo .title img:nth-of-type(1) { width: 75px; left: -45px; bottom: 25px; } .nowater .mainVisual #js-slider .sapporo .title img:nth-of-type(2) { width: 160px; position: relative; left: 35px; bottom: 0; } .nowater .mainVisual #js-slider .kadoya .title { padding-top: 330px; } .nowater .mainVisual #js-slider .kadoya .title img:nth-of-type(1) { width: 75px; left: -45px; bottom: 27px; } .nowater .mainVisual #js-slider .kadoya .title img:nth-of-type(2) { width: 200px; position: relative; left: 35px; bottom: 0; } .nowater .mainVisual #js-slider .tokyo .title { padding-top: 330px; } .nowater .mainVisual #js-slider .tokyo .title img:nth-of-type(1) { width: 75px; left: -45px; bottom: 95px; } .nowater .mainVisual #js-slider .tokyo .title img:nth-of-type(2) { width: 200px; position: relative; left: 25px; bottom: 35px; } .nowater .mainVisual #js-slider .yokozuna .title { padding-top: 330px; } .nowater .mainVisual #js-slider .yokozuna .title img:nth-of-type(1) { width: 80px; left: -42px; bottom: 96px; } .nowater .mainVisual #js-slider .yokozuna .title img:nth-of-type(2) { width: 200px; position: relative; left: 45px; bottom: 30px; } .nowater .mainVisual #js-slider .onomichi .title { padding-top: 330px; } .nowater .mainVisual #js-slider .onomichi .title img:nth-of-type(1) { width: 90px; left: -43px; bottom: 48px; } .nowater .mainVisual #js-slider .onomichi .title img:nth-of-type(2) { width: 300px; position: relative; left: -33px; bottom: -30px; } .nowater .mainVisual #js-slider .yokohama .title { padding-top: 305px; } .nowater .mainVisual #js-slider .yokohama .title img:nth-of-type(1) { width: 85px; left: -45px; bottom: 48px; } .nowater .mainVisual #js-slider .yokohama .title img:nth-of-type(2) { width: 200px; position: relative; left: 35px; } .nowater .mainVisual #js-slider .shikairo .title { padding-top: 330px; } .nowater .mainVisual #js-slider .shikairo .title img:nth-of-type(1) { width: 75px; left: -45px; bottom: 20px; } .nowater .mainVisual #js-slider .shikairo .title img:nth-of-type(2) { width: 200px; position: relative; left: 35px; bottom: -10px; } .nowater .mainVisual #js-slider .gomoku .title { padding-top: 305px; } .nowater .mainVisual #js-slider .gomoku .title img:nth-of-type(1) { width: 85px; left: -45px; bottom: 58px; } .nowater .mainVisual #js-slider .gomoku .title img:nth-of-type(2) { width: 200px; position: relative; left: 42px; } .nowater .mainVisual #js-slider .shio-gensui .title { padding-top: 305px; } .nowater .mainVisual #js-slider .shio-gensui .title img:nth-of-type(1) { width: 85px; left: -40px; bottom: 5px; } .nowater .mainVisual #js-slider .shio-gensui .title img:nth-of-type(2) { width: 200px; position: relative; left: 45px; bottom: -20px; } .nowater .mainVisual #js-slider .taiwan .title { padding-top: 390px; } .nowater .mainVisual #js-slider .taiwan .title img:nth-of-type(1) { width: 85px; left: -40px; bottom: 153px; } .nowater .mainVisual #js-slider .taiwan .title img:nth-of-type(2) { width: 200px; position: relative; left: 50px; bottom: 90px; } .nowater .mainVisual #js-slider .korakuen .title { padding-top: 330px; } .nowater .mainVisual #js-slider .korakuen .title img:nth-of-type(1) { width: 90px; left: 0px; bottom: 36px; } .nowater .mainVisual #js-slider .korakuen .title img:nth-of-type(2) { width: 200px; position: relative; left: 0; bottom: 10px; } .nowater .mainVisual #js-slider .kitakata { background: url(/common/img/ramen/nowater/kitakata/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .hakata { background: url(/common/img/ramen/nowater/hakata/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .sapporo { background: url(/common/img/ramen/nowater/sapporo/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .kadoya { background: url(/common/img/ramen/nowater/kadoya/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .tokyo { background: url(/common/img/ramen/nowater/tokyo/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .shikairo { background: url(/common/img/ramen/nowater/shikairo/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .taiwan { background: url(/common/img/ramen/nowater/taiwan/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .kinsho { background: url(/common/img/ramen/nowater/kinsho/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .yokozuna { background: url(/common/img/ramen/nowater/yokozuna/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .onomichi { background: url(/common/img/ramen/nowater/onomichi/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .saihou { background: url(/common/img/ramen/nowater/saihou/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .korakuen { background: url(/common/img/ramen/nowater/korakuen/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .hokkai { background: url(/common/img/ramen/nowater/hokkai/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .shiho { background: url(/common/img/ramen/nowater/shiho/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .kokuo { background: url(/common/img/ramen/nowater/kokuo/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .ichigen { background: url(/common/img/ramen/nowater/ichigen/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .shio-gensui { background: url(/common/img/ramen/nowater/shio-gensui/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .gomoku { background: url(/common/img/ramen/nowater/gomoku/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .yokohama { background: url(/common/img/ramen/nowater/yokohama/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater .mainVisual #js-slider .sp-fade-thumbnail-arrows { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); } .nowater .mainVisual #js-slider .sp-thumbnail-arrow { background: url(/common/img/ramen/nowater/index/arrow_right.png) no-repeat 0 0; width: 30px; height: 32px; background-size: 100% auto; } .nowater .mainVisual #js-slider .sp-thumbnail-arrow.sp-previous-thumbnail-arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .nowater .mainVisual #js-slider .sp-thumbnail-arrow:before, .nowater .mainVisual #js-slider .sp-thumbnail-arrow:after { display: none; } } .nowater .aboutArea { position: relative; color: #fff; background: url(/common/img/ramen/nowater/index/about_bg_01_pc.png) no-repeat 5% 50%; padding: 70px 0 100px; } .nowater .aboutArea .aboutAreaCont { position: relative; z-index: 2; } .nowater .aboutArea h2 { float: left; } .nowater .aboutArea .text { width: 420px; float: right; margin: 50px 0 0 -20px; } .nowater .aboutArea .thumb { clear: both; } .nowater .aboutArea .thumb img { margin-top: -300px; } .nowater .aboutArea .online { text-align: center; margin-top: -170px; } @media screen and (max-width: 760px) { .nowater .aboutArea { background-size: contain; padding: 0 0 50px; } .nowater .aboutArea .aboutAreaCont { position: relative; z-index: 2; } .nowater .aboutArea h2 { float: none; width: 230px; } .nowater .aboutArea .text { width: auto; float: none; margin: 10px 10px 0; } .nowater .aboutArea .thumb { clear: both; } .nowater .aboutArea .thumb img { margin: 0; } .nowater .aboutArea .online { margin: -50px 10px 0; } } .nowater .seriesArea { color: #fff; font-size: 17px; background: url(/common/img/ramen/nowater/index/bg_circle.png) no-repeat 0 0; } .nowater .seriesArea h2 { text-align: center; } .nowater .seriesArea .cont { margin-top: 50px; zoom: 1; } .nowater .seriesArea .cont:before, .nowater .seriesArea .cont:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .seriesArea .cont:after { clear: both; } .nowater .seriesArea .cont:nth-child(even) .thumb { float: right; } .nowater .seriesArea .cont:nth-child(even) .thumb img { margin-left: -30px; } .nowater .seriesArea .cont:nth-child(odd) .thumb { float: left; } .nowater .seriesArea .cont:nth-child(odd) .thumb img { margin-right: -30px; } .nowater .seriesArea .thumb { width: 500px; position: relative; } .nowater .seriesArea .thumb :nth-child(2) { position: absolute; left: 0px; bottom: -25px; z-index: 10; } .nowater .seriesArea .thumb.shikairo :nth-child(2) { bottom: -25px; } .nowater .seriesArea .thumb:after { content: ""; display: block; position: absolute; width: 1004px; height: 562px; top: -250px; right: -200px; background: url(/common/img/ramen/nowater/index/series_yuge.png) no-repeat 50% 50%; } .nowater .seriesArea .thumb img { position: relative; z-index: 10; } .nowater .seriesArea .inner { overflow: hidden; width: 475px; position: relative; z-index: 2; } .nowater .seriesArea h3 img { margin-top: -20px; } .nowater .seriesArea .text { margin: 20px 0; margin-right: 20px; line-height: 1.33; } .nowater .seriesArea ul { zoom: 1; } .nowater .seriesArea ul:before, .nowater .seriesArea ul:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .seriesArea ul:after { clear: both; } .nowater .seriesArea ul li { float: left; margin-right: 10px; } @media screen and (max-width: 760px) { .nowater .seriesArea { padding-bottom: 45px; background: none; font-size: 16px; } .nowater .seriesArea h2 { width: 250px; margin: 0 auto; } .nowater .seriesArea .cont { margin: 30px 15px 0; padding-top: 30px; background: url(/common/img/ramen/nowater/common/line_sp.gif) repeat-x 0 0; } .nowater .seriesArea .cont.first { padding-top: 0; background: none; margin-top: 0; } .nowater .seriesArea .cont:nth-child(even) .thumb { float: none; } .nowater .seriesArea .cont:nth-child(even) .thumb img { margin-left: 0; } .nowater .seriesArea .cont:nth-child(even) .thumb:before { left: -20px; } .nowater .seriesArea .cont:nth-child(odd) .thumb { float: none; } .nowater .seriesArea .cont:nth-child(odd) .thumb img { margin-right: 0; } .nowater .seriesArea .cont:nth-child(odd) .thumb:before { background: url(/common/img/ramen/nowater/index/bg_circle_sp_02.png) no-repeat 0 0; background-size: 100% auto; right: -20px; } .nowater .seriesArea .thumb { width: auto; margin: 0 0 20px; position: relative; } .nowater .seriesArea .thumb :nth-child(2) { position: absolute; left: 10px; bottom: 0px; z-index: 10; width: 135px; } .nowater .seriesArea .thumb.shikairo :nth-child(2) { bottom: 0; } .nowater .seriesArea .thumb:after { content: ""; display: block; position: absolute; width: 334px; height: 313px; top: -70px; background: url(/common/img/ramen/nowater/index/series_yuge_sp.png) no-repeat 50% 50%; } .nowater .seriesArea .thumb:before { content: ""; display: block; position: absolute; width: 300px; height: 300px; top: -100px; right: -20px; background: url(/common/img/ramen/nowater/index/bg_circle_sp_01.png) no-repeat 0 0; background-size: 100%; } .nowater .seriesArea .thumb img { position: relative; z-index: 10; } .nowater .seriesArea .inner { width: auto; } .nowater .seriesArea h3 { margin: 0px 10px 0; } .nowater .seriesArea h3 img { margin-top: 0; } .nowater .seriesArea .catch { margin: 0 0 0 -20px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .nowater .seriesArea .text { margin: 10px 0 10px; } .nowater .seriesArea ul { display: table; margin: 0 0; } .nowater .seriesArea ul li { float: none; margin-right: 0; display: table-cell; } .nowater .seriesArea ul li:first-child { padding-right: 10px; } } .nowater .instagramArea { background: url(/common/img/ramen/nowater/index/insta_bg.gif) repeat 50% 50%; padding: 70px 0; } .nowater .instagramArea h2 { text-align: center; } .nowater .instagramArea .hash { text-align: center; color: #fff; margin: 20px 0; } @media screen and (max-width: 760px) { .nowater .instagramArea { background: url(/common/img/ramen/nowater/index/insta_bg.gif) repeat 50% 50%; padding: 30px 20px; } .nowater .instagramArea h2 { width: 270px; margin: 0 auto; } } .nowater .himitsuArea { padding: 90px 0 120px; background: url(/common/img/ramen/nowater/index/himitsu_bg.png) no-repeat 90% 50%; background-size: 100% auto; } .nowater .himitsuArea h2 { text-align: center; margin-bottom: 30px; } .nowater .himitsuArea .thumb { margin-bottom: 60px; } .nowater .himitsuArea ul { zoom: 1; margin-bottom: 80px; } .nowater .himitsuArea ul:before, .nowater .himitsuArea ul:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .himitsuArea ul:after { clear: both; } .nowater .himitsuArea ul li { float: left; } .nowater .himitsuArea ul li:not(:first-child) { margin-left: 15px; } .nowater .himitsuArea .text01 { text-align: center; margin-bottom: 30px; } .nowater .himitsuArea .button01 { text-align: center; } @media screen and (max-width: 760px) { .nowater .himitsuArea { padding: 30px 15px 30px; background: url(/common/img/ramen/nowater/index/himitsu_bg_sp.png) repeat-y 0 0; background-size: 100% auto; } .nowater .himitsuArea h2 { text-align: center; margin-bottom: 10px; } .nowater .himitsuArea .thumb { margin-bottom: 60px; } .nowater .himitsuArea ul { margin-bottom: 0; } .nowater .himitsuArea ul li { margin-bottom: 10px; float: none; } .nowater .himitsuArea ul li:not(:first-child) { margin-left: 0; } .nowater .himitsuArea .text01 { text-align: center; margin-bottom: 30px; } .nowater .himitsuArea .button01 { text-align: center; } } .nowater .mainVisualUnder { height: 560px; } .nowater .mainVisualUnder .mainVisualUnderCont { position: relative; height: 560px; } .nowater .mainVisualUnder h1 { position: absolute; left: 0px; top: 120px; z-index: 2; } .nowater-gomoku .mainVisualUnder h1 { left: 125px; top: 110px; } .nowater-gomoku .mainVisualUnder h1 img { width: 370px; } .nowater-shio-gensui .mainVisualUnder h1 { left: 130px; top: 90px; } .nowater-shio-gensui .mainVisualUnder h1 img { width: 400px; } .nowater-yokohama .mainVisualUnder h1 { left: 125px; top: 100px; } .nowater-yokohama .mainVisualUnder h1 img { width: 320px; } .nowater-korakuen .mainVisualUnder h1 { position: absolute; left: 160px; top: 80px; z-index: 2; } .nowater .mainVisualUnder .mainLogo { position: absolute; left: 0px; top: 85px; } .nowater .mainVisualUnder .package { position: absolute; left: 10px; top: 330px; } .nowater .mainVisualUnder .seriesTitle { position: absolute; left: 220px; top: 340px; width: 350px; z-index: 2; } .nowater .mainVisualUnder .text { position: absolute; left: 220px; top: 390px; z-index: 2; } .nowater .mainVisualUnder .thumb { position: absolute; right: -250px; top: -50px; } .nowater-gomoku .mainVisualUnder .thumb { top: 15px; } .nowater-shio-gensui .mainVisualUnder .thumb {top: -15px; } .nowater-yokohama .mainVisualUnder .thumb { top: 10px; } .nowater .mainVisualUnder .inner { zoom: 1; } .nowater .mainVisualUnder .inner:before, .nowater .mainVisualUnder .inner:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .mainVisualUnder .inner:after { clear: both; } .nowater.nowater-shikairo .mainVisualUnder { background: url(/common/img/ramen/nowater/shikairo/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-kinsho .mainVisualUnder { background: url(/common/img/ramen/nowater/kinsho/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-yokozuna .mainVisualUnder { background: url(/common/img/ramen/nowater/yokozuna/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-shio-gensui .mainVisualUnder { background: url(/common/img/ramen/nowater/shio-gensui/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-gomoku .mainVisualUnder { background: url(/common/img/ramen/nowater/gomoku/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-yokohama .mainVisualUnder { background: url(/common/img/ramen/nowater/yokohama/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-onomichi .mainVisualUnder { background: url(/common/img/ramen/nowater/onomichi/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-hokkai .mainVisualUnder { background: url(/common/img/ramen/nowater/hokkai/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-ichigen .mainVisualUnder { background: url(/common/img/ramen/nowater/ichigen/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-kokuo .mainVisualUnder { background: url(/common/img/ramen/nowater/kokuo/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-shiho .mainVisualUnder { background: url(/common/img/ramen/nowater/shiho/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-korakuen .mainVisualUnder { background: url(/common/img/ramen/nowater/korakuen/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-saihou .mainVisualUnder { background: url(/common/img/ramen/nowater/saihou/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater.nowater-saihou .mainVisualUnder h1 { top: 130px; } @media screen and (max-width: 760px) { .nowater .mainVisualUnder { height: auto; } .nowater .mainVisualUnder .mainVisualUnderCont { height: auto; padding: 10px 10px; } .nowater .mainVisualUnder .thumb { position: static; } .nowater .mainVisualUnder .scroll { display: none; } .nowater .mainVisualUnder h1 { position: static; } .nowater-korakuen .mainVisualUnder h1{ text-align: center; } .nowater-korakuen .mainVisualUnder h1 img{ width: 220px; } .nowater .mainVisualUnder .mainLogo { position: static; width: 80px; margin: -50px 10px -30px; } .nowater-gomoku .mainVisualUnder .mainLogo { margin: -30px 10px 5px; } .nowater-shio-gensui .mainVisualUnder .mainLogo { margin: -30px 10px 0; } .nowater-yokohama .mainVisualUnder .mainLogo { margin: -30px 10px 0; } .nowater-korakuen .mainVisualUnder .mainLogo{ margin: -50px 10px 10px; } .nowater .mainVisualUnder .package { position: static; float: left; width: 37%; } .nowater .mainVisualUnder .seriesTitle { position: static; width: 63%; float: left; } .nowater .mainVisualUnder .text { position: static; float: left; width: 63%; } .nowater .mainVisualUnder .scroll { position: static; text-align: center; } .nowater .mainVisualUnder .inner { margin-top: 15px; } .nowater.nowater-shikairo .mainVisualUnder { background: url(/common/img/ramen/nowater/shikairo/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-kinsho .mainVisualUnder { background: url(/common/img/ramen/nowater/kinsho/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-yokozuna .mainVisualUnder { background: url(/common/img/ramen/nowater/yokozuna/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-shio-gensui .mainVisualUnder { background: url(/common/img/ramen/nowater/shio-gensui/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-gomoku .mainVisualUnder { background: url(/common/img/ramen/nowater/gomoku/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-yokohama .mainVisualUnder { background: url(/common/img/ramen/nowater/yokohama/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-onomichi .mainVisualUnder { background: url(/common/img/ramen/nowater/onomichi/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-hokkai .mainVisualUnder { background: url(/common/img/ramen/nowater/hokkai/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-ichigen .mainVisualUnder { background: url(/common/img/ramen/nowater/ichigen/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-kokuo .mainVisualUnder { background: url(/common/img/ramen/nowater/kokuo/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-shiho .mainVisualUnder { background: url(/common/img/ramen/nowater/shiho/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-korakuen .mainVisualUnder { background: url(/common/img/ramen/nowater/korakuen/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater.nowater-saihou .mainVisualUnder { background: url(/common/img/ramen/nowater/saihou/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } } .nowater .productDetail { padding-top: 100px; zoom: 1; margin-bottom: 100px; background: url(/common/img/ramen/nowater/common/bg_detail_02.png) no-repeat 10% 0%; color: #fff; font-size: 15px; } .nowater .productDetail:before, .nowater .productDetail:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .productDetail:after { clear: both; } .nowater .productDetail h2 { text-align: center; margin-bottom: 20px; } .nowater .productDetail .thumb { float: left; width: 500px; padding-top: 50px; margin-right: 30px; } .nowater .productDetail .inner { overflow-y: hidden; } .nowater .productDetail .inner .ramenLogo { margin-bottom: 15px; } .nowater .productDetail .inner .howto { zoom: 1; margin-bottom: 10px; padding-top: 15px; line-height: 2; background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 0; } .nowater .productDetail .inner .howto:before, .nowater .productDetail .inner .howto:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .productDetail .inner .howto:after { clear: both; } .nowater .productDetail .inner .howto ul { float: left; } .nowater .productDetail .inner .howto ul:first-child { margin-right: 20px; } .nowater .productDetail .inner .howto ul:first-child span { width: 6.5em; } .nowater .productDetail .inner .howto ul:nth-child(even) span { width: 6.5em; } .nowater .productDetail .inner .howto span { display: inline-block; color: #e2dbaf; } .nowater .productDetail .inner .howto img { width: 60px;vertical-align: middle; } .nowater .productDetail .inner .productPackage { background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 0; padding-top: 30px; zoom: 1; } .nowater .productDetail .inner .productPackage:before, .nowater .productDetail .inner .productPackage:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .productDetail .inner .productPackage:after { clear: both; } .nowater .productDetail .inner .productPackage li { margin-right: 15px; float: left; width: 114px; padding: 5px; height: 97px; background: #fff; display: table-cell; vertical-align: middle; text-align: center; } .nowater .productDetail .online { clear: both; text-align: center; } .nowater-gomoku .productDetail .online { margin-top: 40px; } .nowater-yokohama .productDetail .online { margin-top: 40px; } @media screen and (max-width: 760px) { .nowater .productDetail { padding: 30px 20px 0; margin-bottom: 50px; background: url(/common/img/ramen/nowater/common/bg_detail_01_sp.png) no-repeat 10% 0%; background-size: 100% auto; } .nowater .productDetail h2 { width: 80px; margin: 0 auto 15px; } .nowater .productDetail .thumb { display: none; } .nowater .productDetail .inner { overflow: visible; margin-bottom: 20px; } .nowater .productDetail .inner .ramenLogo { display: none; } .nowater .productDetail .inner .howto ul { float: none; } .nowater .productDetail .inner .howto ul:first-child { margin-right: 0; } .nowater .productDetail .inner .productPackage li { margin-right: 0; width: 49%; height: 70%; padding: 0; } .nowater .productDetail .inner .productPackage li img { padding: 10px; } .nowater .productDetail .inner .productPackage li:nth-child(even) { float: right; } .nowater .productDetail .online { margin: 0 50px; } } .nowater .item-sub-info { zoom: 1; margin: 0 28px 0; } .nowater .item-sub-info:before, .nowater .item-sub-info:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .item-sub-info:after { clear: both; } .nowater .item-sub-info h2 { margin: 0 0 10px -20px; } .nowater .item-sub-info .allergy { margin-bottom: 50px; } .nowater .item-sub-info .allergy .notice { color: #b8b8b8; } .nowater .item-sub-info .materials { width: 570px; float: left; } .nowater .item-sub-info .materials h2 { background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 100%; margin-bottom: 0; padding-bottom: 5px; } .nowater .item-sub-info .materials .materials-data { border: none; background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 100%; } .nowater .item-sub-info .materials .materials-data.materials-list { border: none; } .nowater .item-sub-info .materials .materials-data > dt { color: #e2dbaf; font-weight: normal; width: 100px; padding: 7px 0; } .nowater .item-sub-info .materials .materials-data > dt:after { content: "："; } .nowater .item-sub-info .materials .notice-list { color: #b8b8b8; } .nowater .item-sub-info .item-data { width: 320px; float: right; } .nowater .item-sub-info .item-data h2 { margin-bottom: 0; padding-bottom: 5px; } .nowater .item-sub-info .item-data .data-table { border: none; background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 0%; } .nowater .item-sub-info .item-data .data-table tr:first-child th, .nowater .item-sub-info .item-data .data-table tr:first-child td { padding-top: 20px; } .nowater .item-sub-info .item-data .data-table td:after, .nowater .item-sub-info .item-data .data-table th:after { display: none; } .nowater .item-sub-info .item-data .data-table th { color: #e2dbaf; font-weight: normal; width: 140px; padding: 5px 0; } .nowater .item-sub-info .item-data .data-table th:after { content: "："; } .nowater .item-sub-info .item-data .data-table td { padding: 5px 0; } .nowater .item-sub-info .item-data .remarks { background: url(/common/img/ramen/nowater/common/line_02.gif) repeat-x 0 0%; padding-top: 15px; color: #b8b8b8; margin-top: 20px; } @media screen and (max-width: 760px) { .nowater .item-sub-info { margin: 0 10px 0; } .nowater .item-sub-info h2 { margin: 0 0 10px -10px; } .nowater .item-sub-info .allergy { margin-bottom: 20px; } .nowater .item-sub-info .materials { width: auto; float: none; } .nowater .item-sub-info .materials h2 img { width: 75px; } .nowater .item-sub-info .materials .materials-data > dt { width: auto; background: none; padding-bottom: 0; } .nowater .item-sub-info .materials .materials-data > dd { padding: 5px 0 10px; } .nowater .item-sub-info .item-data { width: auto; float: none; margin-top: 30px; } .nowater .item-sub-info .item-data h2 img { width: 175px; } } .nowater .productList { padding: 110px 0; position: relative; } .nowater .productList .online { display: none; } .nowater .productList:after { display: block; content: ""; position: absolute; right: -450px; top: -100px; width: 907px; height: 671px; background: url(/common/img/ramen/nowater/common/bg_detail_02.png) no-repeat 0 0%; } .nowater .productList h2 { text-align: center; padding-bottom: 20px; } .nowater .productList ul { zoom: 1; position: relative; z-index: 10; } .nowater .productList ul:before, .nowater .productList ul:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater .productList ul:after { clear: both; } .nowater .productList ul li { float: left; margin-bottom: 20px; } .nowater .productList ul li:not(:nth-child(4n+1)) { margin-left: 12px; } @media screen and (max-width: 760px) { .nowater .productList { padding: 20px 20px 0; background: url(/common/img/ramen/nowater/common/bg_detail_02.png) no-repeat 0 0%; background-size: 100% auto; } .nowater .productList .online { margin: 0 30px 30px; display: block; } .nowater .productList:after { display: none; } .nowater .productList h2 { text-align: center; padding: 20px 10px; } .nowater .productList ul li { float: left; width: 49%; margin-bottom: 10px; } .nowater .productList ul li:not(:nth-child(4n+1)) { margin-left: 0; } .nowater .productList ul li:nth-child(even) { float: right; } } /* logo 2017/08/28 */ .logoSeries{ position: absolute; bottom: 150px; } @media screen and (min-width: 761px) { .shikairo .logoSeries{ left: 410px; bottom: 10px; } /* 尾道 */ .onomichi .logoSeries{ bottom: 210px; } /* 幸楽苑 */ .korakuen .logoSeries{ bottom: 240px; } } @media screen and (max-width: 760px) { .nowater .mainVisual #js-slider .title { bottom: 170px; } .logoSeries{ width: 100px; bottom: 80px; } .shiho .logoSeries, .kinsho .logoSeries{ bottom: 60px; } /* 幸楽苑 */ .nowater .mainVisual #js-slider .korakuen .title{ margin: 0 auto; padding-top: 375px; text-align: center; } .korakuen .logoSeries{ bottom: 100px; } .korakuen .title img:nth-of-type(2){ width: 200px; } } /* nowater_nabe */ @keyframes scroll { 0% { top: 0; } 50% { top: -3px; } 100% { top: 0; } } .nowater_nabe { font-size: 18px; background: url(/common/img/ramen/nowater_nabe/common/bg_pc.jpg) 0 0 /100% repeat; } .nowater_nabe .scroll a { background: url(/common/img/ramen/nowater_nabe/himitsu/scroll.png) no-repeat 0 0; width: 54px; height: 100px; } .nowater_nabe .scroll img { position: relative; left: 5px; top: -7px; animation: scroll 1.4s infinite; } @media screen and (max-width: 760px) { .nowater_nabe { background: url(/common/img/ramen/nowater_nabe/common/bg_sp.jpg) 0 0 /100% repeat; } } .nowater_nabe #contents .item, .nowater_nabe .aboutArea .aboutAreaCont, .nowater_nabe .seriesArea .seriesAreaCont, .nowater_nabe .instagramArea .instagramAreaCont, .nowater_nabe .himitsuArea .himitsuAreaCont, .nowater_nabe .mainVisualUnder .mainVisualUnderCont, .nowater_nabe .productDetailCont { width: 990px; margin: 0 auto; min-width: 990px; } @media screen and (max-width: 760px) { .nowater_nabe #contents .item, .nowater_nabe .aboutArea .aboutAreaCont, .nowater_nabe .seriesArea .seriesAreaCont, .nowater_nabe .instagramArea .instagramAreaCont, .nowater_nabe .himitsuArea .himitsuAreaCont, .nowater_nabe .mainVisualUnder .mainVisualUnderCont, .nowater_nabe .productDetailCont { width: auto; min-width: 0; } } @media screen and (max-width: 760px) { .nowater_nabe { font-size: 16px; } } .nowater_nabe #topicpath { display: none; } .nowater_nabe #contents .item { color: #fff; font-size: 15px; padding: 0; overflow: visible; } .nowater_nabe .mainVisual { padding-bottom: 65px; position: relative; background: url(/common/img/ramen/nowater_nabe/index/main_bg_pc.png) no-repeat 50% 0; background-size: 100% auto; z-index: 0; } .nowater_nabe .mainVisual:before { content: ""; width: 100%; height: 166px; display: block; background: url(/common/img/ramen/nowater_nabe/index/main_before_pc.png) 0 0 /100% no-repeat; position: absolute; bottom: 0; left: 0; z-index: 2; } .nowater_nabe .mainVisual .mainVisualInner { position: absolute; left: 0px; top: 0px; right: 0; width: 988px; height: 500px; margin: 0 auto; z-index: 10; } .nowater_nabe .mainVisual .mainVisualInner .mainLogo { position: absolute; left: -152px; bottom: 180px; } .nowater_nabe .mainVisual .mainVisualInner .logo { padding: 0; position: absolute; left: calc(50% - 508px); top: -1px; } .nowater_nabe .mainVisual .mainVisualInner .logo img { width: 300px; } .nowater_nabe .mainVisual .mainVisualInner .text { position: absolute; right: 0px; top: 100px; } .nowater_nabe .mainVisual .seriesTitle { position: absolute; left: 220px; bottom: -170px; } .nowater_nabe .mainVisual .scroll { bottom: -265px; } .nowater_nabe .mainVisual #js-slider .sp-slides { position: relative; } .nowater_nabe .mainVisual #js-slider .title { position: absolute; left: 0px; bottom: 140px; } .nowater_nabe .mainVisual #js-slider .yose { background: url(/common/img/ramen/nowater_nabe/yose/index_main_pc.png) no-repeat -50% 35%; background-size: 92% auto; } .nowater_nabe .mainVisual #js-slider .umakara { background: url(/common/img/ramen/nowater_nabe/umakara/index_main_pc.png) no-repeat -60% 35%; background-size: 94% auto; } .nowater_nabe .mainVisual #js-slider .sp-thumbnails-container { position: absolute; left: calc(50% + 45px); bottom: 10px; z-index: 10; } .nowater_nabe .mainVisual #js-slider .sp-thumbnails-container img { filter: brightness(50%); } .nowater_nabe .mainVisual #js-slider .sp-selected-thumbnail img { filter: brightness(100%); } .nowater_nabe .sp-buttons { display: none; } @media screen and (max-width: 760px) { .nowater_nabe .mainVisual { padding-bottom: 120px; position: relative; background: url(/common/img/ramen/nowater_nabe/index/main_bg_sp.png) no-repeat 50% 0; background-size: 100% auto; } .nowater_nabe .mainVisual:before { content: ""; width: 100%; height: 163px; display: block; background: url(/common/img/ramen/nowater_nabe/index/main_before_sp.png) 0 0 /100% no-repeat; position: absolute; bottom: 0; left: 0; z-index: 2; } .nowater_nabe .mainVisual .mainVisualInner { position: static; right: 0; width: auto; height: auto; margin: 0 auto; z-index: 10; } .nowater_nabe .mainVisual .mainVisualInner .mainLogo { z-index: 10; left: 10px; bottom: 58%; width: 80px; } .nowater_nabe .mainVisual .mainVisualInner .logo { padding: 0; position: absolute; left: 20px; top: -1px; z-index: 11; } .nowater_nabe .mainVisual .mainVisualInner .logo img { width: calc(358 / 750 * 100vw) } .nowater_nabe .mainVisual .mainVisualInner .text { top: 10px; right: -5%; z-index: 10; margin: 0 30px; width: 20%; } .nowater_nabe .mainVisual .seriesTitle { text-align: center; left: 0; bottom: 125px; right: 0; margin: auto; z-index: 15; } .nowater_nabe .mainVisual .seriesTitle img { width: 200px; height: auto;} .nowater_nabe .mainVisual .scroll { bottom: -30px; z-index: 99; } .nowater_nabe .mainVisual .scroll a { padding-top: 25px; } .nowater_nabe .mainVisual #js-slider .sp-slides-container, .nowater_nabe .mainVisual #js-slider .sp-mask { height: 430px !important; } .nowater_nabe .mainVisual #js-slider .sp-slides { position: relative; } .nowater_nabe .mainVisual #js-slider .sp-slide { height: 430px !important; } .nowater_nabe .mainVisual #js-slider .title { position: relative; margin: 0 50px; } .nowater_nabe .mainVisual #js-slider .sub { width: 35%; } .nowater_nabe .mainVisual #js-slider .logo { width: 90%; } .nowater_nabe .mainVisual #js-slider .yose .sub { position: absolute; left: -15%; bottom: -5px; width: 40%; } .nowater_nabe .mainVisual #js-slider .yose .logo { position: absolute; left: -4%; bottom: 100px; } .nowater_nabe .mainVisual #js-slider .umakara .sub { position: absolute; left: 50%; bottom: -370px; } .nowater_nabe .mainVisual #js-slider .umakara .logo { position: absolute; left: 0px; bottom: 105px; width: 70%; } .nowater_nabe .mainVisual #js-slider .yose { background: url(/common/img/ramen/nowater_nabe/yose/index_main_sp.png) no-repeat 50% 50%; background-size: 100% auto; } .nowater_nabe .mainVisual #js-slider .umakara { background: url(/common/img/ramen/nowater_nabe/umakara/index_main_sp.png) no-repeat 50% 50%; background-size: 100% auto; } .nowater_nabe .mainVisual #js-slider .sp-thumbnails-container { bottom: -70px; left: calc(50% - 102px); } .nowater_nabe .mainVisual #js-slider .sp-fade-thumbnail-arrows { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); } .nowater_nabe .mainVisual #js-slider .sp-thumbnail-arrow { background: url(/common/img/ramen/nowater_nabe/index/arrow_right.png) no-repeat 0 0; width: 30px; height: 32px; background-size: 100% auto; } .nowater_nabe .mainVisual #js-slider .sp-thumbnail-arrow.sp-previous-thumbnail-arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .nowater_nabe .mainVisual #js-slider .sp-thumbnail-arrow:before, .nowater_nabe .mainVisual #js-slider .sp-thumbnail-arrow:after { display: none; } } .nowater_nabe .aboutArea { padding: 85px 0 100px; position: relative; color: #231815; } .nowater_nabe .aboutArea .aboutAreaCont { text-align: center; position: relative; z-index: 2; } .nowater_nabe .aboutArea h2 { margin-bottom: 35px; } .nowater_nabe .aboutArea .text { margin-bottom: 20px; font-size: 18px; line-height: 1.6; line-height: calc(30 / 18); } .nowater_nabe .aboutArea .online { margin-bottom: 50px; transition: all .3s; } .nowater_nabe .aboutArea .online:hover { opacity: .7; } .nowater_nabe .aboutArea .thumb { position: relative; } .nowater_nabe .aboutArea .thumb:after { content: ""; display: block; position: absolute; width: 190px; height: 170px; background: url(/common/img/ramen/nowater_nabe/index/mark.png) 50% 50% /contain no-repeat; z-index: 99; top: 0; left: 5px; } .nowater_nabe .aboutAreaContInner { margin: 0 auto; padding: 55px 45px 40px; width: 800px; background: #fff; } .nowater_nabe .aboutAreaContInner .thumb { margin-bottom: 25px; } .nowater_nabe .aboutAreaContInner .thumb:after { content: none; } .nowater_nabe .aboutAreaContInner .text { font-size: 16px; line-height: 1.8; line-height: calc(30 / 18); text-align: left; } @media screen and (max-width: 760px) { .nowater_nabe .aboutArea { padding: 30px 0 50px; } .nowater_nabe .aboutArea .aboutAreaCont { position: relative; z-index: 2; } .nowater_nabe .aboutArea .aboutAreaCont h2 { margin: 0 auto; float: none; width: calc(363 / 750 * 100vw); } .nowater_nabe .aboutArea .text { width: auto; float: none; margin: 10px 10px 15px 10px; font-size: 14px; text-align: center; } .nowater_nabe .aboutArea .online { margin: 12px 20px 40px; } .nowater_nabe .aboutArea .thumb:after { width: 77px; height: 77px; top: 0; left: 15px; } .nowater_nabe .aboutArea .thumb { margin: 0 20px; clear: both; } .nowater_nabe .aboutArea .thumb img { margin: 0 auto; width: calc(725 / 750 * 100vw); height: auto; } .nowater_nabe .aboutAreaContInner { margin: 0 10px; padding: 20px 10px 20px; width: auto; } .nowater_nabe .aboutAreaContInner .thumb { margin: 0 0 22px; } .nowater_nabe .aboutAreaContInner .thumb img { margin: 0 auto; width: calc(512 / 750 * 100vw); height: auto; } .nowater_nabe .aboutAreaContInner .text { margin: 0; font-size: 14px; text-align: left; } } .nowater_nabe .seriesArea { padding: 105px 0 50px; background: url(/common/img/ramen/nowater_nabe/index/series_bg_pc.png) 0 0 /100% repeat; } .nowater_nabe .seriesArea h2 { margin-bottom: 60px; text-align: center; } .nowater_nabe .seriesArea .cont { margin-bottom: 55px; zoom: 1; display: flex; justify-content: space-between; position: relative; } .nowater_nabe .seriesArea .outline:nth-child(2n+1) .cont { flex-direction: row-reverse; } .nowater_nabe .seriesArea .outline:nth-child(2n) .cont .inner { margin-left: 550px; } .nowater_nabe .seriesArea .outline:nth-child(2n+1) .cont .inner { margin-right: 550px; flex-direction: row-reverse; } .nowater_nabe .seriesArea .outline .movie { margin: 0 auto 100px; max-width: 800px; max-height: 450px; } .nowater_nabe .seriesArea .cont .thumb { position: absolute; z-index: -1; } .nowater_nabe .seriesArea .cont.yose .thumb { top: 60px; left: -120px; } .nowater_nabe .seriesArea .cont.umakara .thumb { top: 60px; right: -65px; } .nowater_nabe .seriesArea .cont .thumb .package { position: absolute; left: 0px; bottom: 0px; z-index: 10; } .nowater_nabe .seriesArea .cont .thumb img { position: relative; z-index: 10; } .nowater_nabe .seriesArea .cont.yose .thumb .package { bottom: -80px; left: calc(50% + 32px); } .nowater_nabe .seriesArea .cont.umakara .thumb .package { bottom: -48px; left: calc(50% + 84px); } .nowater_nabe .seriesArea .cont .thumb:after { content: ""; display: block; position: absolute; width: 165px; height: 150px; background: url(/common/img/ramen/nowater_nabe/index/mark.png) 50% 50% /contain no-repeat; z-index: 99;} .nowater_nabe .seriesArea .cont.yose .thumb:after { top: -62px; left: 35px; } .nowater_nabe .seriesArea .cont.umakara .thumb:after { top: -65px; right: -30px; } .nowater_nabe .seriesArea .cont.yose h3 img { margin-left: -10px; } .nowater_nabe .seriesArea .inner { width: 425px; position: relative; z-index: 2; } .nowater_nabe .seriesArea .cont .text { margin-bottom: 15px; font-size: 16px; line-height: 1.5; line-height: calc(24 / 16); color: #231815; } .nowater_nabe .seriesArea .catch { margin-bottom: 5px; } .nowater_nabe .seriesArea .cont .note { margin-bottom: 20px; font-size: 13px; line-height: 1.6; line-height: calc(20 / 13); color: #231815; } .nowater_nabe .seriesArea ul { zoom: 1; } .nowater_nabe .seriesArea ul:before, .nowater_nabe .seriesArea ul:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater_nabe .seriesArea ul:after { clear: both; } .nowater_nabe .seriesArea ul li { float: left; margin-right: 10px; } .nowater_nabe .seriesArea ul li:last-child { margin-right: 0; } @media screen and (max-width: 760px) { .nowater_nabe .seriesArea { padding: 45px 0 20px; background: url(/common/img/ramen/nowater_nabe/index/series_bg_sp.png) 0 0 /100% repeat; font-size: 16px; } .nowater_nabe .seriesArea h2 { width: calc(476 / 750 * 100vw); margin: 0 auto; margin-bottom: 30px; } .nowater_nabe .seriesArea .cont.first { padding-top: 0; background: none; margin-top: 0; } .nowater_nabe .seriesArea .cont { margin-bottom: 20px; flex-direction: column; } .nowater_nabe .seriesArea .outline:nth-child(2n+1) .cont { flex-direction: column; } .nowater_nabe .seriesArea .outline:nth-child(2n) .cont .inner { margin: 0 20px; } .nowater_nabe .seriesArea .outline:nth-child(2n+1) .cont .inner { margin: 0 20px; flex-direction: column; } .nowater_nabe .seriesArea .outline .movie { margin: 0 20px 30px; max-width: 800px; max-height: 450px; } .nowater_nabe .seriesArea .cont .thumb { margin: 0 0 20px; width: auto; text-align: center; position: relative; } .nowater_nabe .seriesArea .cont .thumb img { position: relative; } .nowater_nabe .seriesArea .cont.yose .thumb { top: 0; left: 0; } .nowater_nabe .seriesArea .cont.yose .thumb img { margin: 0 auto; width: calc(685 / 750 * 100vw) } .nowater_nabe .seriesArea .cont.umakara .thumb { top: 0; left: 0; } .nowater_nabe .seriesArea .cont.umakara .thumb img { margin: 0 auto; width: calc(658 / 750 * 100vw) } .nowater_nabe .seriesArea .cont .thumb:after { content: none; } .nowater_nabe .seriesArea .cont .thumb img { position: relative; z-index: 10; } .nowater_nabe .seriesArea .inner { width: auto; } .nowater_nabe .seriesArea h3 { margin: 0; margin-bottom: 18px; width: 100%; text-align: center; } .nowater_nabe .seriesArea .cont.yose h3 img { margin: 0 auto; width: calc(628 / 750 * 100vw); } .nowater_nabe .seriesArea .cont.umakara h3 img { margin: 0 auto; width: calc(657 / 750 * 100vw); } .nowater_nabe .seriesArea .cont:nth-child(2) h3 img { margin-left: 0;} .nowater_nabe .seriesArea .cont .text { margin-top: -5px; } .nowater_nabe .seriesArea .catch { margin: 0; margin-bottom: 10px; text-align: center; } .nowater_nabe .seriesArea .cont.yose .catch img { margin: 0 auto; width: calc(401 / 750 * 100vw); } .nowater_nabe .seriesArea .cont.umakara .catch img { margin: 0 auto; width: calc(401 / 750 * 100vw); } .nowater_nabe .seriesArea .text { margin: 10px 0 10px; } .nowater_nabe .seriesArea ul { display: table; margin: 0 0; } .nowater_nabe .seriesArea ul li { float: none; margin-right: 0; display: table-cell; } .nowater_nabe .seriesArea ul li:first-child { padding-right: 10px; } } .nowater_nabe .mainVisualUnder { height: 560px; } .nowater_nabe .mainVisualUnder .mainVisualUnderCont { position: relative; height: 560px; } .nowater_nabe .mainVisualUnder h1 { position: absolute; left: 0px; top: 120px; z-index: 2; } .nowater_nabe .mainVisualUnder .mainLogo { position: absolute; left: 0px; top: 85px; } .nowater_nabe .mainVisualUnder .package { position: absolute; left: 10px; top: 330px; } .nowater_nabe .mainVisualUnder .seriesTitle { position: absolute; left: 220px; top: 340px; width: 350px; z-index: 2; } .nowater_nabe .mainVisualUnder .text { position: absolute; left: 220px; top: 390px; z-index: 2; } .nowater_nabe .mainVisualUnder .thumb { position: absolute; right: -250px; top: -50px; } .nowater_nabe .mainVisualUnder .inner { zoom: 1; } .nowater_nabe .mainVisualUnder .inner:before, .nowater_nabe .mainVisualUnder .inner:after { display: block; height: 0; visibility: hidden; content: "."; } .nowater_nabe .mainVisualUnder .inner:after { clear: both; } .nowater_nabe.nowater_nabe-yose .mainVisualUnder { background: url(/common/img/ramen/nowater_nabe/yose/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .nowater_nabe.nowater_nabe-umakara .mainVisualUnder { background: url(/common/img/ramen/nowater_nabe/umakara/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } @media screen and (max-width: 760px) { .nowater_nabe .mainVisualUnder { height: auto; } .nowater_nabe .mainVisualUnder .mainVisualUnderCont { height: auto; padding: 10px 10px; } .nowater_nabe .mainVisualUnder .thumb { position: static; } .nowater_nabe .mainVisualUnder .scroll { display: none; } .nowater_nabe .mainVisualUnder h1 { position: static; } .nowater_nabe .mainVisualUnder .mainLogo { position: static; width: 80px; margin: -50px 10px -30px; } .nowater_nabe .mainVisualUnder .package { position: static; float: left; width: 37%; } .nowater_nabe .mainVisualUnder .seriesTitle { position: static; width: 63%; float: left; } .nowater_nabe .mainVisualUnder .text { position: static; float: left; width: 63%; } .nowater_nabe .mainVisualUnder .scroll { position: static; text-align: center; } .nowater_nabe .mainVisualUnder .inner { margin-top: 15px; } .nowater_nabe.nowater_nabe-yose .mainVisualUnder { background: url(/common/img/ramen/nowater_nabe/yose/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .nowater_nabe.nowater_nabe-umakara .mainVisualUnder { background: url(/common/img/ramen/nowater_nabe/umakara/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } } /* nowater lp */ .nowater_lp_wrap { padding-bottom: calc(160 / 750 * 100vw); background-color: #fff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; position: relative; } .nowater_lp_list.list1 .nowater_lp_list_item { margin-bottom: calc(180 / 750 * 100vw); } .nowater_lp_list.list1 .nowater_lp_list_item:not(:last-of-type) { margin-bottom: calc(120 / 750 * 100vw); } .nowater_lp_list.list2 .nowater_lp_list_item { margin-bottom: calc(40 / 750 * 100vw); } .nowater_lp_list.list2 .nowater_lp_list_item:not(:last-of-type) { margin-bottom: calc(100 / 750 * 100vw); } .nowater_lp_list.list2 .nowater_lp_title.title4 { margin-bottom: calc(50 / 750 * 100vw); } .nowater_lp_title.title3 { margin-bottom: calc(60 / 750 * 100vw); font-family: 'ShipporiMinchoB1', serif; font-size: calc(44 / 750 * 100vw); font-weight: 600; line-height: calc(34 / 22); letter-spacing: -.025em; text-align: center; } .nowater_lp_title.title4 { font-size: calc(40 / 750 * 100vw); font-weight: 600; line-height: calc(26 / 20); letter-spacing: -.025em; text-align: left; } .nowater_lp_question { margin-bottom: calc(40 / 750 * 100vw); padding-left: 1.7em; text-indent: -1.7em; font-size: calc(36 / 750 * 100vw); font-weight: 600; line-height: calc(26 / 15); letter-spacing: -.025em; text-align: left; } .nowater_lp_text { font-size: calc(30 / 750 * 100vw); font-weight: 300; line-height: calc(26 / 15); letter-spacing: -.025em; text-align: left; } .nowater_lp_comment.comment2 { padding: calc(60 / 750 * 100vw) calc(40 / 750 * 100vw) calc(680 / 750 * 100vw) calc(50 / 750 * 100vw); border-radius: calc(48 / 750 * 100vw); background-color: #F7F1E1; position: relative; } .nowater_lp_comment.comment2 .nowater_lp_title.title4 { margin-bottom: calc(20 / 750 * 100vw); } .nowater_lp_thumb .nowater_lp_name { margin-top: calc(50 / 750 * 100vw); font-size: calc(30 / 750 * 100vw); font-weight: 600; line-height: calc(26 / 15); text-align: center; } .nowater_lp_box.flexbox { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .nowater_lp_box.flexbox img { margin-bottom: 0; } .nowater_lp_box.flexbox.reverse { flex-direction: column-reverse; } .nowater_lp_wrap#kitakata .comment2:before { content: ""; width: calc(750 / 750 * 100vw); height: calc(708 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kitakata/lp/thumb02.png) 0 0 /contain no-repeat; position: absolute; bottom: 0; right: calc(50% - 375 / 750 * 100vw); } .nowater_lp_wrap#kitakata .nowater_lp_bubble { margin: 0 auto calc(20 / 750 * 100vw); padding: calc(60 / 750 * 100vw) calc(34 / 750 * 100vw) calc(80 / 750 * 100vw) calc(55 / 750 * 100vw); width: calc(666 / 750 * 100vw); height: calc(657 / 750 * 100vw); background: url(/common/img/ramen/nowater/common/lp/icon_bubble.png) 50% 50% /contain no-repeat; } .nowater_lp_wrap img { height: auto; vertical-align: bottom; } .nowater_lp_wrap section { position: relative; } /* カドヤ食堂 中華そば */ .nowater_lp_wrap img { height: auto; vertical-align: bottom; } .nowater_lp_wrap section { position: relative; } .nowater_lp_wrap#kadoya-chukasoba { padding: 0 0 calc(140 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba:before { content: ""; width: calc(750 / 750 * 100vw); height: calc(888 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/bg01.png) 0 0/100% no-repeat; position: absolute; top: 0; left: calc(50% - 375 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba:after { content: ""; width: calc(750 / 750 * 100vw); height: calc(639 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/bg02.png) 0 0/100% no-repeat; position: absolute; top: calc(888 / 750 * 100vw); left: calc(50% - 375 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_outline { position: relative; z-index: 100; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_mv { text-align: center; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie { margin: calc(-20 / 750 * 100vw) auto calc(40 / 750 * 100vw); width: calc(660 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_title { position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_title:before { content: ""; width: calc(113 / 750 * 100vw); height: calc(114 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/movie_title_before.png) 0 0/contain no-repeat; position: absolute; top: calc(-28 / 750 * 100vw); left: calc(-28 / 750 * 100vw); z-index: 110; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_box iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_wrap { padding: calc(60 / 750 * 100vw) calc(40 / 750 * 100vw) calc(1050 / 750 * 100vw); box-shadow: 0 calc(12 / 750 * 100vw) calc(20 / 750 * 100vw) 0 rgba(0, 0, 0, 0.16); background-color: #FFFAF0; position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_wrap:before { content: ""; width: calc(720 / 750 * 100vw); height: calc(979 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/about_before.png) 0 0/contain no-repeat; position: absolute; bottom: 0; left: calc(50% - 360 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_cont { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box:not(:last-of-type) { margin-bottom: calc(90 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box .nowater_lp_about_title { margin-bottom: calc(20 / 750 * 100vw); font-size: calc(44 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(34 / 22); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_text strong { font-weight: 600; color: #9D0000; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment { padding: calc(48 / 750 * 100vw) calc(40 / 750 * 100vw) calc(70 / 750 * 100vw); border: calc(6 / 750 * 100vw) solid #EACE96; border-radius: calc(52 / 750 * 100vw); background-color: #fff; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_name { margin-bottom: calc(52 / 750 * 100vw); font-size: calc(44 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(32 / 22); text-align: center; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_text { font-size: calc(36 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 18); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_wrap { padding: calc(90 / 750 * 100vw) 0 calc(150 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_title { margin-bottom: calc(40 / 750 * 100vw); text-align: center; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_cont { padding: calc(50 / 750 * 100vw) calc(40 / 750 * 100vw) 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_box:not(:last-of-type) { margin-bottom: calc(70 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point { padding: calc(90 / 750 * 100vw) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw); border: calc(2 / 750 * 100vw) solid #707070; background-color: #000; background-image: url(/common/img/ramen/nowater/kadoya/chukasoba/point_bg01.png); background-position: 50% calc(540 / 750 * 100vw); background-size: calc(978 / 750 * 100vw); background-repeat: no-repeat; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_wrap { border-radius: calc(42 / 750 * 100vw); background-color: #fff; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont { padding: calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview { padding: calc(30 / 750 * 100vw) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_name { margin-bottom: calc(30 / 750 * 100vw); font-size: calc(36 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(28 / 18); text-align: center; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(26 / 16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title { line-height: 1; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title1 { margin-bottom: calc(600 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title3 { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title4 { margin-bottom: calc(36 / 750 * 100vw); padding-left: calc(40 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title4:before { content: ""; width: calc(18 / 750 * 100vw); height: calc(50 / 750 * 100vw); display: block; background-color: #000; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_thumb { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_wrap { padding: calc(140 / 750 * 100vw) calc(40 / 750 * 100vw) calc(70 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box { border-radius: calc(34 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box:not(:last-of-type) { margin-bottom: calc(50 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1 { padding: calc(80 / 750 * 100vw) calc(40 / 750 * 100vw) calc(510 / 750 * 100vw); background-color: #F7E1E1; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1:before { content: ""; width: calc(540 / 750 * 100vw); height: calc(487 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/message_thumb01.png) 0 0/contain no-repeat; position: absolute; bottom: 0; left: calc(50% - 270 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2 { padding: calc(80 / 750 * 100vw) calc(40 / 750 * 100vw) calc(480 / 750 * 100vw); background-color: #F2EFE6; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2:before { content: ""; width: calc(471 / 750 * 100vw); height: calc(409 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/message_thumb02.png) 0 0/contain no-repeat; position: absolute; bottom: 0; left: calc(50% - 235 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_title { margin-bottom: calc(50 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr { padding: 0 calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr_catch { margin-bottom: calc(30 / 750 * 100vw); } /* カドヤ食堂 つけそば */ .nowater_lp_wrap#kadoya-tsukesoba { padding: 0 0 calc(140 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba:before { content: ""; width: 100%; height: calc(890 / 750 * 100vw); display: block; background-color: #FFF8E5; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba:after { content: ""; width: calc(750 / 750 * 100vw); height: calc(636 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/bg.png) 0 0/100% no-repeat; position: absolute; top: calc(890 / 750 * 100vw); left: calc(50% - 375 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_outline { position: relative; z-index: 100; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_mv { text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie { margin: calc(-20 / 750 * 100vw) auto calc(40 / 750 * 100vw); width: calc(660 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_title { position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_title:before { content: ""; width: calc(113 / 750 * 100vw); height: calc(114 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/movie_title_before.png) 0 0/contain no-repeat; position: absolute; top: calc(-28 / 750 * 100vw); left: calc(-28 / 750 * 100vw); z-index: 110; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_box iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_wrap { padding: calc(60 / 750 * 100vw) calc(40 / 750 * 100vw) calc(1050 / 750 * 100vw); box-shadow: 0 calc(12 / 750 * 100vw) calc(20 / 750 * 100vw) 0 rgba(0, 0, 0, 0.16); background-color: #FFFAF0; position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_wrap:before { content: ""; width: calc(718 / 750 * 100vw); height: calc(927 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/about_before.png) 0 0/contain no-repeat; position: absolute; bottom: calc(35 / 750 * 100vw); left: calc(50% - 360 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_cont { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box:not(:last-of-type) { margin-bottom: calc(90 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box .nowater_lp_about_title { margin-bottom: calc(20 / 750 * 100vw); font-size: calc(44 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(34 / 22); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_text strong { font-weight: 600; color: #9D0000; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment { padding: calc(48 / 750 * 100vw) calc(40 / 750 * 100vw) calc(70 / 750 * 100vw); border: calc(6 / 750 * 100vw) solid #EACE96; border-radius: calc(52 / 750 * 100vw); background-color: #fff; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_name { margin-bottom: calc(52 / 750 * 100vw); font-size: calc(44 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(32 / 22); text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_text { font-size: calc(36 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 18); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_wrap { padding: calc(90 / 750 * 100vw) 0 calc(150 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_title { margin-bottom: calc(40 / 750 * 100vw); text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_cont { padding: calc(50 / 750 * 100vw) calc(40 / 750 * 100vw) 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_box:not(:last-of-type) { margin-bottom: calc(70 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point { padding: calc(90 / 750 * 100vw) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw); border: calc(2 / 750 * 100vw) solid #707070; background-color: #000; background-image: url(/common/img/ramen/nowater/kadoya/tsukesoba/point_bg01.png); background-position: 100% calc(510 / 750 * 100vw); background-size: calc(983 / 750 * 100vw); background-repeat: no-repeat; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_wrap { border-radius: calc(42 / 750 * 100vw); background-color: #fff; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont { padding: calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview { padding: calc(30 / 750 * 100vw) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_name { margin-bottom: calc(30 / 750 * 100vw); font-size: calc(36 / 750 * 100vw); font-weight: 600; color: #000; line-height: calc(28 / 18); text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(26 / 16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment { padding: calc(100 / 750 * 100vw) calc(50 / 750 * 100vw) calc(60 / 750 * 100vw); position: relative; z-index: 100; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment:before { content: ""; width: calc(586 / 750 * 100vw); height: calc(687 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/point_comment_before.png) 0 0/contain no-repeat; position: absolute; top: 0; left: calc(50% - 293 / 750 * 100vw); z-index: -10; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_text { font-size: calc(36 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(30 / 18); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title { line-height: 1; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title1 { margin-bottom: calc(600 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title3 { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title4 { margin-bottom: calc(36 / 750 * 100vw); padding-left: calc(40 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title4:before { content: ""; width: calc(18 / 750 * 100vw); height: calc(50 / 750 * 100vw); display: block; background-color: #000; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_thumb { margin-bottom: calc(30 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_wrap { padding: calc(140 / 750 * 100vw) calc(40 / 750 * 100vw) calc(80 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box { border-radius: calc(34 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box:not(:last-of-type) { margin-bottom: calc(50 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1 { padding: calc(80 / 750 * 100vw) calc(40 / 750 * 100vw) calc(510 / 750 * 100vw); background-color: #F7E1E1; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1:before { content: ""; width: calc(623 / 750 * 100vw); height: calc(492 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/message_thumb01.png) 0 0/contain no-repeat; position: absolute; bottom: 0; left: calc(50% - 312 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2 { padding: calc(80 / 750 * 100vw) calc(40 / 750 * 100vw) calc(480 / 750 * 100vw); background-color: #F2EFE6; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2:before { content: ""; width: calc(373 / 750 * 100vw); height: calc(395 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/message_thumb02.png) 0 0/contain no-repeat; position: absolute; bottom: 0; left: calc(50% - 186 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_title { margin-bottom: calc(50 / 750 * 100vw); position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_text { font-size: calc(32 / 750 * 100vw); font-weight: 300; color: #000; line-height: calc(32 / 16); position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_text strong { font-weight: 600; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr { padding: 0 calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr_catch { margin-bottom: calc(30 / 750 * 100vw); } @media screen and (max-width: 760px) { .nowater_lp_comment.comment1 { margin-bottom: calc(100 / 750 * 100vw); padding: 0 calc(24 / 750 * 100vw); } .nowater_lp_comment.comment2 { margin: 0 calc(56 / 750 * 100vw); } .nowater_lp_box { padding: 0 calc(56 / 750 * 100vw); } .nowater_lp_box.flexbox { margin-bottom: calc(80 / 750 * 100vw); } .nowater_lp_box.flexbox .nowater_lp_img { margin-bottom: 0; } .nowater_lp_box.flexbox >* { margin-bottom: calc(60 / 750 * 100vw); } .nowater_lp_img { margin-bottom: calc(60 / 750 * 100vw); } .nowater_lp_thumb.thumb1 { text-align: center; } .nowater_lp_thumb.thumb1 img { width: calc(240 / 750 * 100vw); } /* カドヤ食堂 中華そば */ .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_wrap { border: calc(2 / 750 * 100vw) solid #707070; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_thumb { margin-bottom: calc(50 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_thumb { margin-bottom: calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_title img { width: calc(648 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title img { width: calc(565 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_title { height: calc(50 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_title img { padding-top: calc(4 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(1) .nowater_lp_point_title img { width: calc(318 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(2) .nowater_lp_point_title img { width: calc(261 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(3) .nowater_lp_point_title img { width: calc(431 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(4) .nowater_lp_point_title img { width: calc(348 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(5) .nowater_lp_point_title img { width: calc(394 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_box:not(:last-of-type) { margin-bottom: calc(60 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_thumb { padding: calc(96 / 750 * 100vw) 0 calc(28 / 750 * 100vw); text-align: center; position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_thumb img { width: calc(264 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_thumb:before { content: ""; width: calc(616 / 750 * 100vw); height: calc(96 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/point_thumb_before.png) 0 0/contain no-repeat; position: absolute; top: 0; left: calc(50% - 308 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title1 img { width: calc(666 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title2 img { width: 100%; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_thumb img { width: calc(576 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1 .nowater_lp_message_title img { width: calc(463 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2 .nowater_lp_message_title img { width: calc(374 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr_catch img { width: calc(656 / 750 * 100vw); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr_img img { width: calc(690 / 750 * 100vw); } /* カドヤ食堂 つけそば */ .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_wrap { border: calc(2 / 750 * 100vw) solid #707070; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_thumb { margin-bottom: calc(50 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_thumb { margin-bottom: calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_title img { width: calc(648 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title img { width: calc(492 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_title img { padding-top: calc(4 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(1) .nowater_lp_point_title img { width: calc(220 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(2) .nowater_lp_point_title img { width: calc(389 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(3) .nowater_lp_point_title img { width: calc(411 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(4) .nowater_lp_point_title img { width: calc(308 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_box:not(:last-of-type) { margin-bottom: calc(60 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_thumb { padding: calc(96 / 750 * 100vw) 0 calc(28 / 750 * 100vw); text-align: center; position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_thumb img { width: calc(264 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_thumb:before { content: ""; width: calc(616 / 750 * 100vw); height: calc(96 / 750 * 100vw); display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/point_thumb_before.png) 0 0/contain no-repeat; position: absolute; top: 0; left: calc(50% - 308 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_thumb { text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_thumb img { width: calc(260 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_text { margin-bottom: calc(40 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title1 img { width: calc(666 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title2 img { width: 100%; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_thumb img { width: calc(576 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1 .nowater_lp_message_title img { width: calc(463 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2 .nowater_lp_message_title img { width: calc(374 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr_catch img { width: calc(612 / 750 * 100vw); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr_img img { width: calc(690 / 750 * 100vw); } } @media screen and (min-width: 760px) { .nowater_lp_wrap { padding-bottom: 220px; } .nowater_lp_wrap#kitakata .nowater_lp_outline { margin: 0 auto; max-width: 1280px; } .nowater_lp_cont { margin: 0 auto; max-width: 980px; } .nowater_lp_box { margin-bottom: 25px; } .nowater_lp_box.flexbox { margin-bottom: 80px; flex-direction: row; justify-content: space-between; align-items: flex-start; } .nowater_lp_box.flexbox .nowater_lp_text { width: 580px; } .nowater_lp_box.flexbox .nowater_lp_img { width: 360px; } .nowater_lp_box.flexbox.reverse { flex-direction: row-reverse; } .nowater_lp_title.title3 { margin-bottom: 25px; font-size: 36px; line-height: 1; text-align: left; } .nowater_lp_title.title4{ font-size: 22px; line-height: 1; } .nowater_lp_list.list1 .nowater_lp_list_item { margin-bottom: 100px; } .nowater_lp_list.list1 .nowater_lp_list_item:not(:last-of-type) { margin-bottom: 80px; } .nowater_lp_list.list2 { margin-bottom: 50px; } .nowater_lp_list.list2 .nowater_lp_list_item { margin-bottom: 50px; display: flex; justify-content: space-between; align-items: flex-start; } .nowater_lp_list.list2 .nowater_lp_list_item:nth-of-type(2n) { flex-direction: row-reverse; } .nowater_lp_list.list2 .nowater_lp_list_item:not(:last-of-type) { margin-bottom: 110px; } .nowater_lp_list.list2 .nowater_lp_list_item .nowater_lp_box { width: 600px; } .nowater_lp_list.list2 .nowater_lp_title.title4 { margin-bottom: 40px; } .nowater_lp_list.list2 .nowater_lp_list_item .nowater_lp_img { margin: 0 50px 0 0; width: 320px; } .nowater_lp_list.list2 .nowater_lp_list_item:nth-of-type(2n) .nowater_lp_img { margin: 0 0 0 50px; } .nowater_lp_comment.comment1 { display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_comment.comment1 >:first-of-type { margin-right: 15px; } .nowater_lp_comment.comment2 { width: 980px; padding: 48px 380px 48px 85px; border-radius: 40px; } .nowater_lp_comment.comment2 .nowater_lp_title.title4 { margin-bottom: 12px; } .nowater_lp_thumb.thumb1 img { width: 200px; } .nowater_lp_thumb .nowater_lp_name { margin-top: 15px; font-size: 18px; } .nowater_lp_question { margin-bottom: 25px; font-size: 18px; line-height: 1; } .nowater_lp_text { font-size: 18px; line-height: calc(34 / 18); } .nowater_lp_wrap#kitakata .box7 { margin-bottom: 48px; } .nowater_lp_wrap#kitakata .img1 { margin-bottom: 50px; } .nowater_lp_wrap#kitakata .img3 { margin-bottom: 30px; } .nowater_lp_wrap#kitakata .img4 { margin-bottom: 40px; } .nowater_lp_wrap#kitakata .img5 { margin-bottom: 48px; } .nowater_lp_wrap#kitakata .img6 { margin-bottom: 48px; } .nowater_lp_wrap#kitakata .comment2 { margin-top: 120px; } .nowater_lp_wrap#kitakata .comment2:before { content: ""; width: 382px; height: 360px; bottom: 0; right: 0; } .nowater_lp_wrap#kitakata .nowater_lp_bubble { padding: 60px 95px 50px 35px; width: 754px; height: 285px; background: url(/common/img/ramen/nowater/common/lp/pc/icon_bubble.png) 0 0 /contain no-repeat; } /* カドヤ食堂 中華そば */ .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_inline, .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_inline { margin: 0 auto; max-width: 980px; } .nowater_lp_wrap#kadoya-chukasoba { padding: 0 0 90px; } .nowater_lp_wrap#kadoya-chukasoba:before { width: 100%; height: 451px; display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/bg01.png) 0 0/cover no-repeat; top: 0; left: 50%; transform: translateX(-50%); } .nowater_lp_wrap#kadoya-chukasoba:after { width: 100%; height: 933px; display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/bg02.png) 0 0/cover no-repeat; top: 451px; left: 50%; transform: translateX(-50%); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie { margin: -90px auto 60px; width: 806px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_title:before { content: ""; width: 127px; height: 127px; display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/movie_title_before.png) 0 0/contain no-repeat; position: absolute; top: -34px; left: 6px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_movie_box iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_wrap { padding: 50px 66px 414px 58px; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_wrap:before { width: 934px; height: 414px; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/about_before.png) 0 0/contain no-repeat; bottom: 0; left: calc(50% - 467px); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_cont { margin-bottom: 45px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box { display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box:nth-of-type(2n) { flex-direction: row-reverse; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box:nth-of-type(2n) .nowater_lp_about_thumb { margin: 0 0 0 50px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box:not(:last-of-type) { margin-bottom: 55px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_box .nowater_lp_about_title { margin-bottom: 12px; font-size: 22px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_inner { max-width: 450px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_thumb { margin: 0 50px 0 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_text { font-size: 18px; line-height: calc(32 / 18); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment { padding: 35px 30px 40px 45px; border: 3px solid #EACE96; border-radius: 26px; display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_box { padding-top: 15px; max-width: 530px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_thumb { margin-right: 35px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_name { margin-bottom: 20px; font-size: 22px; line-height: 1; text-align: left; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_about_comment_text { font-size: 18px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_wrap { padding: 90px 0 110px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_title { margin-bottom: 25px; padding-left: 10px; text-align: left; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_cont { padding: 35px 0 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_box:not(:last-of-type) { margin-bottom: 35px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_product_text { font-size: 18px; line-height: calc(34 / 18); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point { padding: 45px 50px 70px; border: 1px solid #707070; background-position: 100% 33px; background-size: 500px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_wrap { border-radius: 21px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont { padding: 37px 48px 20px; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/point_bg02.png) 0 calc(100% + 5px)/301px no-repeat; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child { margin-bottom: 70px; display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_inner { padding-top: 15px; max-width: 480px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_thumb { margin-left: 60px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title { margin-bottom: 20px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title img { width: 385px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :first-child .nowater_lp_point_text { font-size: 18px; line-height: calc(34 / 18); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box { margin-bottom: 25px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(1) .nowater_lp_point_title img { width: 160px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(2) .nowater_lp_point_title img { width: 132px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(3) .nowater_lp_point_title img { width: 225px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(4) .nowater_lp_point_title img { width: 175px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(5) .nowater_lp_point_title img { width: 200px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_outline { display: flex; flex-wrap: wrap; justify-content: flex-end; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_outline > .nowater_lp_point_box { max-width: 244px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_box { margin-right: 25px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_box:nth-of-type(3n), .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_box:last-of-type { margin-right: 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview { padding: 40px 55px 24px 70px; display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_inner { padding-top: 55px; max-width: 528px; position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_inner:before { content: ""; width: 528px; height: 48px; display: block; background: url(/common/img/ramen/nowater/kadoya/chukasoba/pc/point_thumb_before.png) 0 0/contain no-repeat; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_thumb { margin-right: 55px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_thumb img { width: 174px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_name { margin-bottom: 15px; font-size: 20px; line-height: 1; text-align: left; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_interview_text { font-size: 16px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title { line-height: 1; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title1 { margin-bottom: 45px; position: relative; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title3 { margin-bottom: 25px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title4 { margin-bottom: 18px; padding-left: 20px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_title.title4:before { width: 8px; height: 21px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_thumb { margin-bottom: 12px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_thumb img { width: 244px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_point_text { font-size: 16px; line-height: calc(26 / 16); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_wrap { padding: 90px 0 140px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box { border-radius: 40px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box:not(:last-of-type) { margin-bottom: 65px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1 { padding: 50px 45px 50px 400px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1:before { width: 428px; height: 384px; bottom: 0; left: 35px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message1 .nowater_lp_message_title img { width: 290px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2 { padding: 30px 300px 30px 80px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2:before { width: 354px; height: 310px; bottom: 0; left: 590px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_box.message2 .nowater_lp_message_title img { width: 240px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_title { margin-bottom: 20px; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_message_text { font-size: 20px; line-height: calc(34 / 20); } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr { text-align: center; } .nowater_lp_wrap#kadoya-chukasoba .nowater_lp_bnr_catch { margin-bottom: 50px; } /* カドヤ食堂 つけそば */ .nowater_lp_wrap#kadoya-tsukesoba { padding: 0 0 90px; } .nowater_lp_wrap#kadoya-tsukesoba:before { width: 100%; height: 451px; display: block; background-color: #FFF8E5; top: 0; left: 50%; transform: translateX(-50%); } .nowater_lp_wrap#kadoya-tsukesoba:after { width: 100%; height: 933px; display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/bg.png) 0 0/cover no-repeat; top: 451px; left: 50%; transform: translateX(-50%); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_mv { position: relative; z-index: 100; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_mv:before { content: ""; width: 1110px; height: 389px; display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/mv_before.png) 0 0/contain no-repeat; position: absolute; top: calc(451px - 388px); left: calc(50% - 370px); z-index: -10; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie { margin: -90px auto 60px; width: 806px; position: relative; z-index: 110; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_title:before { content: ""; width: 127px; height: 127px; display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/movie_title_before.png) 0 0/contain no-repeat; position: absolute; top: -34px; left: 6px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_movie_box iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_wrap { padding: 50px 66px 414px 58px; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_wrap:before { width: 907px; height: 383px; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/about_before.png) 0 0/contain no-repeat; bottom: 20px; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_cont { margin-bottom: 45px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box { display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box:nth-of-type(2n) { flex-direction: row-reverse; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box:nth-of-type(2n) .nowater_lp_about_thumb { margin: 0 0 0 50px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box:not(:last-of-type) { margin-bottom: 55px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_box .nowater_lp_about_title { margin-bottom: 12px; font-size: 22px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_inner { max-width: 450px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_thumb { margin: 0 50px 0 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_text { font-size: 18px; line-height: calc(32 / 18); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment { padding: 35px 30px 40px 45px; border: 3px solid #EACE96; border-radius: 26px; display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_box { padding-top: 15px; max-width: 530px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_thumb { margin-right: 35px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_name { margin-bottom: 20px; font-size: 22px; line-height: 1; text-align: left; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_about_comment_text { font-size: 18px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_wrap { padding: 90px 0 50px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_title { margin-bottom: 25px; padding-left: 10px; text-align: left; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_cont { padding: 35px 0 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_box:not(:last-of-type) { margin-bottom: 35px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_product_text { font-size: 18px; line-height: calc(34 / 18); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point { padding: 45px 50px 70px; border: 1px solid #707070; background-position: 100% 33px; background-size: 500px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_wrap { border-radius: 21px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont { padding: 37px 48px 20px; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/point_bg02.png) calc(100% - 20px) calc(100% - 30px)/532px no-repeat; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child { margin-bottom: 70px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_outline { margin-bottom: 10px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_inner { padding-top: 15px; max-width: 480px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_thumb { margin: 37px 0 0 50px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title { margin-bottom: 20px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_title img { width: 340px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :first-child .nowater_lp_point_text { font-size: 18px; line-height: calc(34 / 18); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box { margin-bottom: 25px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(1) .nowater_lp_point_title img { width: 110px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(2) .nowater_lp_point_title img { width: 194px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(3) .nowater_lp_point_title img { width: auto; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_box:nth-of-type(4) .nowater_lp_point_title img { width: 145px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_cont > :not(:first-child) .nowater_lp_point_title { height: 58px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_outline { display: flex; flex-wrap: wrap; justify-content: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_outline > .nowater_lp_point_box { max-width: 244px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_box { margin-right: 25px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_box:nth-of-type(3n), .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_box:last-of-type { margin-right: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview { padding: 40px 55px 24px 70px; display: flex; justify-content: flex-start; align-items: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_inner { padding-top: 55px; max-width: 528px; position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_inner:before { content: ""; width: 528px; height: 48px; display: block; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/point_thumb_before.png) 0 0/contain no-repeat; position: absolute; top: 0; left: 0; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_thumb { margin-right: 55px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_thumb img { width: 174px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_name { margin-bottom: 15px; font-size: 20px; line-height: 1; text-align: left; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_interview_text { font-size: 16px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment { padding: 40px 60px 30px 55px; display: flex; justify-content: space-between; align-items: flex-start; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment:before { width: 780px; height: 185px; background: url(/common/img/ramen/nowater/kadoya/tsukesoba/pc/point_comment_before.png) 0 0/contain no-repeat; top: 0; left: calc(50% - 390px); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_thumb img { width: 130px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_comment_text { margin-top: 35px; max-width: 480px; font-size: 18px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title { line-height: 1; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title1 { margin-bottom: 45px; position: relative; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title3 { margin-bottom: 25px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title4 { margin-bottom: 18px; padding-left: 20px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_title.title4:before { width: 8px; height: 21px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_thumb { margin-bottom: 12px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_thumb img { width: 244px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_point_text { font-size: 16px; line-height: calc(26 / 16); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_wrap { padding: 90px 0 140px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box { border-radius: 40px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box:not(:last-of-type) { margin-bottom: 65px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1 { padding: 50px 40px 50px 430px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1:before { width: 450px; height: 315px; bottom: 0; left: 35px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message1 .nowater_lp_message_title img { width: 290px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2 { padding: 30px 305px 45px 80px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2:before { width: 238px; height: 250px; bottom: 0; left: 660px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_box.message2 .nowater_lp_message_title img { width: 240px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_title { margin-bottom: 20px; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_message_text { font-size: 20px; line-height: calc(34 / 20); } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr { text-align: center; } .nowater_lp_wrap#kadoya-tsukesoba .nowater_lp_bnr_catch { margin-bottom: 20px; } } /* bimitankyu */ .bimitankyu { font-size: 18px; background: url(/common/img/ramen/bimitankyu/common/bg.jpg) repeat 0 0; } .bimitankyu .scroll a { background: url(/common/img/ramen/bimitankyu/himitsu/scroll.png) no-repeat 0 0; width: 54px; height: 100px; } .bimitankyu .scroll img { position: relative; left: 5px; top: -5px; } .bimitankyu #contents .item, .bimitankyu .aboutArea .aboutAreaCont, .bimitankyu .seriesArea .seriesAreaCont, .bimitankyu .instagramArea .instagramAreaCont, .bimitankyu .himitsuArea .himitsuAreaCont, .bimitankyu .mainVisualUnder .mainVisualUnderCont, .bimitankyu .productDetailCont { width: 990px; margin: 0 auto; min-width: 990px; } @media screen and (max-width: 760px) { .bimitankyu #contents .item, .bimitankyu .aboutArea .aboutAreaCont, .bimitankyu .seriesArea .seriesAreaCont, .bimitankyu .instagramArea .instagramAreaCont, .bimitankyu .himitsuArea .himitsuAreaCont, .bimitankyu .mainVisualUnder .mainVisualUnderCont, .bimitankyu .productDetailCont { width: auto; min-width: 0; } } @media screen and (max-width: 760px) { .bimitankyu { font-size: 16px; } } .bimitankyu #topicpath { display: none; } .bimitankyu #contents { background: url(/common/img/ramen/bimitankyu/common/bg_cont.jpg) repeat-y 0 -6%; } .bimitankyu #contents .item { color: #fff; font-size: 15px; padding: 0; overflow: visible; } .bimitankyu .mainVisual { position: relative; background: url(/common/img/ramen/bimitankyu/index/main_bg_pc.png) no-repeat 50% 0; background-size: 100% auto; padding-bottom: 100px; z-index: 0; } .bimitankyu .mainVisual .mainVisualInner { position: absolute; left: 0px; top: 0px; right: 0; width: 988px; height: 500px; margin: 0 auto; z-index: 10; } .bimitankyu .mainVisual .mainVisualInner .mainLogo { position: absolute; left: -152px; bottom: 180px; } .bimitankyu .mainVisual .mainVisualInner .logo { padding: 0; position: absolute; left: calc(50% - 508px); top: -1px; } .bimitankyu .mainVisual .mainVisualInner .logo img { width: 300px; } .bimitankyu .mainVisual .mainVisualInner .text { position: absolute; right: 0px; top: 100px; } .bimitankyu .mainVisual .seriesTitle { width: 376px; position: absolute; left: calc(50% - 340px); bottom: -160px; } .bimitankyu .mainVisual .scroll { bottom: -275px; } .bimitankyu .mainVisual #js-slider .sp-slides { position: relative; } .bimitankyu .mainVisual #js-slider .title { position: absolute; left: 0px; bottom: 140px; } .bimitankyu .mainVisual #js-slider .shikairo .sub { position: relative; left: 470px; bottom: 90px; z-index: 99; } .bimitankyu .mainVisual #js-slider .shikairo .logo { position: absolute; left: 50px; bottom: 50px; } .bimitankyu .mainVisual #js-slider .komi .sub { position: relative; left: 510px; bottom: -30px; z-index: 99; } .bimitankyu .mainVisual #js-slider .komi .logo { position: absolute; left: 50px; bottom: 60px; } .bimitankyu .mainVisual #js-slider .mala .sub { position: relative; left: 330px; bottom: 90px; z-index: 99; } .bimitankyu .mainVisual #js-slider .mala .logo { position: absolute; left: 60px; bottom: 80px; } .bimitankyu .mainVisual #js-slider .shikairo { background: url(/common/img/ramen/bimitankyu/shikairo/index_main_pc.png) no-repeat 50% 50%; background-size: 90% auto; } .bimitankyu .mainVisual #js-slider .komi { background: url(/common/img/ramen/bimitankyu/komi/index_main_pc.png) no-repeat 50% 50%; background-size: 90% auto; } .bimitankyu .mainVisual #js-slider .mala { background: url(/common/img/ramen/bimitankyu/mala/index_main_pc.png) no-repeat 50% 50%; background-size: 90% auto; } .bimitankyu .mainVisual #js-slider .sp-thumbnails-container { position: relative; z-index: 10; margin-top: -100px; margin-right: 200px; } .bimitankyu .mainVisual #js-slider .sp-thumbnails-container img { filter: brightness(50%); } .bimitankyu .mainVisual #js-slider .sp-selected-thumbnail img { filter: brightness(100%); } .bimitankyu .sp-buttons { display: none; } @media screen and (max-width: 760px) { .bimitankyu .mainVisual { position: relative; background: url(/common/img/ramen/bimitankyu/index/main_bg_sp.png) no-repeat 50% 0; background-size: 100% auto; padding-bottom: 90px; } .bimitankyu .mainVisual .mainVisualInner { position: static; right: 0; width: auto; height: auto; margin: 0 auto; z-index: 10; } .bimitankyu .mainVisual .mainVisualInner .mainLogo { z-index: 10; left: 10px; bottom: 58%; width: 80px; } .bimitankyu .mainVisual .mainVisualInner .logo { padding: 0; position: absolute; left: 20px; top: -1px; z-index: 11; } .bimitankyu .mainVisual .mainVisualInner .logo img { width: 150px; } .bimitankyu .mainVisual .mainVisualInner .text { top: 10px; right: -5%; z-index: 10; margin: 0 30px; width: 20%; } .bimitankyu .mainVisual .seriesTitle { width: 280px; left: 0; bottom: 160px; right: 0; margin: auto; z-index: 15; } .bimitankyu .mainVisual .scroll { bottom: 0; z-index: 99; } .bimitankyu .mainVisual #js-slider .sp-slides-container, .bimitankyu .mainVisual #js-slider .sp-mask { height: 430px !important; } .bimitankyu .mainVisual #js-slider .sp-slides { position: relative; } .bimitankyu .mainVisual #js-slider .sp-slide { height: 430px !important; } .bimitankyu .mainVisual #js-slider .title { position: relative; margin: 0 50px; } .bimitankyu .mainVisual #js-slider .sub { width: 35%; } .bimitankyu .mainVisual #js-slider .logo { width: 90%; } .bimitankyu .mainVisual #js-slider .shikairo .title { padding-top: 330px; } .bimitankyu .mainVisual #js-slider .shikairo .sub { position: absolute; left: -15%; bottom: -5px; width: 40%; } .bimitankyu .mainVisual #js-slider .shikairo .logo { position: absolute; left: -4%; bottom: 100px; } .bimitankyu .mainVisual #js-slider .komi .sub { position: absolute; left: 50%; bottom: -370px; } .bimitankyu .mainVisual #js-slider .komi .logo { position: absolute; left: 0px; bottom: 105px; width: 70%; } .bimitankyu .mainVisual #js-slider .mala .sub { position: absolute; left: 50%; bottom: -370px; } .bimitankyu .mainVisual #js-slider .mala .logo { position: absolute; left: 0px; bottom: 120px; width: 70%; } .bimitankyu .mainVisual #js-slider .shikairo { background: url(/common/img/ramen/bimitankyu/shikairo/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .bimitankyu .mainVisual #js-slider .komi { background: url(/common/img/ramen/bimitankyu/komi/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .bimitankyu .mainVisual #js-slider .mala { background: url(/common/img/ramen/bimitankyu/mala/index_main_sp.png) no-repeat 50% 0; background-size: 100% auto; } .bimitankyu .mainVisual #js-slider .sp-thumbnails-container { margin: -100px auto 0; } .bimitankyu .mainVisual #js-slider .sp-fade-thumbnail-arrows { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); } .bimitankyu .mainVisual #js-slider .sp-thumbnail-arrow { background: url(/common/img/ramen/bimitankyu/index/arrow_right.png) no-repeat 0 0; width: 30px; height: 32px; background-size: 100% auto; } .bimitankyu .mainVisual #js-slider .sp-thumbnail-arrow.sp-previous-thumbnail-arrow { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .bimitankyu .mainVisual #js-slider .sp-thumbnail-arrow:before, .bimitankyu .mainVisual #js-slider .sp-thumbnail-arrow:after { display: none; } } .bimitankyu .aboutArea { position: relative; color: #231815; background: url(/common/img/ramen/bimitankyu/index/about_bg_01_pc.jpg) no-repeat 50% 50%; padding: 20px 0 80px; } .bimitankyu .aboutArea .aboutAreaCont { text-align: center; position: relative; z-index: 2; } .bimitankyu .aboutArea h2 { margin-bottom: 30px; } .bimitankyu .aboutArea .text { } .bimitankyu .aboutArea .text strong { color: #e00111; } .bimitankyu .aboutArea .online { margin-top: -55px; margin-bottom: 50px; transition: all .3s; } .bimitankyu .aboutArea .online:hover { opacity: .7; } .bimitankyu .aboutArea .thumb:after { content: ""; display: block; position: absolute; width: 160px; height: 160px; background: url(/common/img/ramen/bimitankyu/index/mark.png) 50% 50% /contain no-repeat; z-index: 99; top: 240px; left: 0; } .bimitankyu .aboutAreaContInner { display: flex; justify-content: center; } .bimitankyu .aboutAreaContInner .thumb { margin-right: 30px; } .bimitankyu .aboutAreaContInner .text { margin-top: 40px; text-align: left; } @media screen and (max-width: 760px) { .bimitankyu .aboutArea { background: url(/common/img/ramen/bimitankyu/index/about_bg_01_sp.jpg) no-repeat 50% 50%; padding: 40px 0 25px; } .bimitankyu .aboutArea .aboutAreaCont { position: relative; z-index: 2; } .bimitankyu .aboutArea h2 { margin: 0 auto; float: none; width: 230px; } .bimitankyu .aboutArea .text { width: auto; float: none; margin: 20px 10px 20px 15px; text-align: left; } .bimitankyu .aboutArea .online { margin: 30px 20px; } .bimitankyu .aboutArea .thumb:after { width: 77px; height: 77px; top: 218px; left: 15px; } .bimitankyu .aboutArea .thumb { margin: 0 20px; clear: both; } .bimitankyu .aboutArea .thumb img { margin: 0; } .bimitankyu .aboutAreaContInner { margin: 0 20px; flex-direction: column; } .bimitankyu .aboutAreaContInner .thumb { margin: 0 0 20px; } .bimitankyu .aboutAreaContInner .text { margin: 0; } } .bimitankyu .seriesArea { padding: 80px 0 160px; color: #fff; font-size: 17px; background: url(/common/img/ramen/bimitankyu/index/bg_circle.png) no-repeat 0 0; } .bimitankyu .seriesArea h2 { margin-bottom: 50px; text-align: center; } .bimitankyu .seriesArea .cont { margin-top: 50px; zoom: 1; } .bimitankyu .seriesArea .cont:before, .bimitankyu .seriesArea .cont:after { display: block; height: 0; visibility: hidden; content: "."; } .bimitankyu .seriesArea .cont:after { clear: both; } .bimitankyu .seriesArea .cont:nth-child(even) .thumb { float: left; } .bimitankyu .seriesArea .cont:nth-child(even) .thumb img { margin-top: 105px; margin-left: -30px; } .bimitankyu .seriesArea .cont:nth-child(odd) .thumb { float: right; } .bimitankyu .seriesArea .cont:nth-child(odd) .thumb img { margin-top: 105px; margin-right: -30px; } .bimitankyu .seriesArea .cont .thumb { width: 550px; position: relative; } .bimitankyu .seriesArea .cont .thumb :nth-child(2) { position: absolute; left: 0px; bottom: 0px; z-index: 10; } .bimitankyu .seriesArea .cont .thumb:before { content: ""; display: block; position: absolute; z-index: 11;} .bimitankyu .seriesArea .cont.shikairo .thumb:before { width: 172px; height: 118px; background: url(/common/img/ramen/bimitankyu/shikairo/logo_sub.png) 50% 50% /contain no-repeat; top: 25px; left: calc(50% + 70px); } .bimitankyu .seriesArea .cont.komi .thumb:before { width: 174px; height: 122px; background: url(/common/img/ramen/bimitankyu/komi/logo_sub.png) 50% 50% /contain no-repeat; top: 13px; left: -185px; } .bimitankyu .seriesArea .cont.mala .thumb:before { width: 172px; height: 118px; background: url(/common/img/ramen/bimitankyu/mala/logo_sub.png) 50% 50% /contain no-repeat; top: 10px; right: -380px; } .bimitankyu .seriesArea .cont .thumb:after { content: ""; display: block; position: absolute; width: 140px; height: 140px; background: url(/common/img/ramen/bimitankyu/index/mark.png) 50% 50% /contain no-repeat; z-index: 99;} .bimitankyu .seriesArea .cont.shikairo .thumb:after { top: 70px; left: 0; } .bimitankyu .seriesArea .cont.komi .thumb:after { top: 25px; right: 0; } .bimitankyu .seriesArea .cont.mala .thumb:after { top: 25px; right: 30px; } .bimitankyu .seriesArea .cont.shikairo .thumb :nth-child(2) { bottom: -60px; left: calc(50% + 32px); } .bimitankyu .seriesArea .cont.komi .thumb :nth-child(2) { bottom: -33px; left: calc(50% + 84px); } .bimitankyu .seriesArea .cont.mala .thumb :nth-child(2) { bottom: -50px; left: calc(50% + 70px); } .bimitankyu .seriesArea .cont .detail { margin-top: 95px; padding: 20px; width: 988px; height: 260px; background: url(/common/img/ramen/bimitankyu/index/detail_bg_pc.jpg) 0 0 /contain no-repeat; display: flex; justify-content: center; align-items: center; } .bimitankyu .seriesArea .cont .detail .detailTxtCont { margin-top: 20px; margin-right: 55px; max-width: 530px; color: #231815; text-align: left; } .bimitankyu .seriesArea .cont .detail .detailTxtCont h4 { margin-bottom: 15px; font-size: 20px; font-weight: 600; } .bimitankyu .seriesArea .cont .detail .detailTxtCont .text { font-size: 16px; } .bimitankyu .seriesArea .cont .detail .img { max-width: 330px; } .bimitankyu .seriesArea .cont .thumb img { position: relative; z-index: 10; } .bimitankyu .seriesArea .inner { overflow: hidden; width: 425px; position: relative; z-index: 2; } .bimitankyu .seriesArea h3 { width: 120%; } .bimitankyu .seriesArea h3 img { margin-top: -20px; } .bimitankyu .seriesArea .cont:nth-child(2) h3 img { margin-left: -52px;} .bimitankyu .seriesArea .cont:nth-child(3) h3 img { margin-left: -38px;} .bimitankyu .seriesArea .cont:nth-child(4) h3 img { margin-left: -26px;} .bimitankyu .seriesArea .cont .text { margin: 20px 0; color: #231815; } .bimitankyu .seriesArea .cont.shikairo .text.first { margin-top: -40px; } .bimitankyu .seriesArea .cont.komi .text.first { margin-top: -20px; } .bimitankyu .seriesArea .cont.mala .text.first { margin-top: -10px; } .bimitankyu .seriesArea ul { zoom: 1; } .bimitankyu .seriesArea ul:before, .bimitankyu .seriesArea ul:after { display: block; height: 0; visibility: hidden; content: "."; } .bimitankyu .seriesArea ul:after { clear: both; } .bimitankyu .seriesArea ul li { float: left; margin-right: 10px; } .bimitankyu .seriesArea ul li:last-child { margin-right: 0; } .bimitankyu .seriesArea .catch { color: #231815; position: absolute; } @media screen and (max-width: 760px) { .bimitankyu .seriesArea { padding: 45px 0 80px; background: none; font-size: 16px; } .bimitankyu .seriesArea h2 { width: 250px; margin: 0 auto; margin-bottom: 30px; } .bimitankyu .seriesArea .cont { margin: 30px 15px 0; padding-top: 30px; background: url(/common/img/ramen/bimitankyu/common/line_sp.gif) repeat-x 0 0; } .bimitankyu .seriesArea .cont.first { padding-top: 0; background: none; margin-top: 0; } .bimitankyu .seriesArea .cont:nth-child(even) .thumb { float: none; } .bimitankyu .seriesArea .cont:nth-child(even) .thumb img { margin-top: 0; margin-left: 0; } .bimitankyu .seriesArea .cont:nth-child(even) .thumb:before { left: -20px; } .bimitankyu .seriesArea .cont:nth-child(odd) .thumb { float: none; } .bimitankyu .seriesArea .cont:nth-child(odd) .thumb img { margin-top: 0; margin-right: 0; } .bimitankyu .seriesArea .cont:nth-child(odd) .thumb:before { background: url(/common/img/ramen/bimitankyu/index/bg_circle_sp_02.png) no-repeat 0 0; background-size: 100% auto; right: -20px; } .bimitankyu .seriesArea .cont .thumb { width: auto; margin: 0 0 20px; position: relative; } .bimitankyu .seriesArea .cont .thumb :nth-child(2) { max-width: 150px; position: absolute; left: 0px; bottom: 0px; z-index: 10; } .bimitankyu .seriesArea .cont .thumb:before { content: ""; display: block; position: absolute; z-index: 11;} .bimitankyu .seriesArea .cont.shikairo .thumb:before { width: 110px; height: 118px; background: url(/common/img/ramen/bimitankyu/shikairo/logo_sub.png) 50% 50% /contain no-repeat; top: calc( 450 / 750 * 100vw); left: calc(50% + 100 / 750 * 100vw); } .bimitankyu .seriesArea .cont.komi .thumb:before { width: 110px; height: 122px; background: url(/common/img/ramen/bimitankyu/komi/logo_sub.png) 50% 50% /contain no-repeat; top: calc( 450 / 750 * 100vw); left: calc(50% + 20 / 750 * 100vw); } .bimitankyu .seriesArea .cont.mala .thumb:before { width: 110px; height: 118px; background: url(/common/img/ramen/bimitankyu/mala/logo_sub.png) 50% 50% /contain no-repeat; top: calc( 450 / 750 * 100vw); left: calc(50% + 20 / 750 * 100vw); } .bimitankyu .seriesArea .cont .thumb:after { content: ""; display: block; position: absolute; width: 77px; height: 77px; background: url(/common/img/ramen/bimitankyu/index/mark.png) 50% 50% /contain no-repeat; z-index: 99;} .bimitankyu .seriesArea .cont.shikairo .thumb:after { top: -8px; left: 5px; } .bimitankyu .seriesArea .cont.komi .thumb:after { top: -8px; left: 5px; } .bimitankyu .seriesArea .cont.mala .thumb:after { top: -8px; left: 5px; } .bimitankyu .seriesArea .cont.shikairo .thumb :nth-child(2) { bottom: -20px; left: 50%; } .bimitankyu .seriesArea .cont.komi .thumb :nth-child(2) { bottom: -33px; left: 50%; } .bimitankyu .seriesArea .cont.mala .thumb :nth-child(2) { bottom: -35px; left: 50%; } .bimitankyu .seriesArea .cont .detail { margin: 20px 5px 0; padding: 20px; width: calc(100% - 10px); height: auto; border: 2px solid #058133; background: #fff; flex-direction: column; position: relative; } .bimitankyu .seriesArea .cont .detail:before { content: ""; width: 42px; height: 41px; display: block; background: url(/common/img/ramen/bimitankyu/index/detail_bg_01_sp.png) 0 0 /100% no-repeat; position: absolute; top: 0; left: 0; } .bimitankyu .seriesArea .cont .detail:after { content: ""; width: 119px; height: 64.5px; display: block; background: url(/common/img/ramen/bimitankyu/index/detail_bg_02_sp.png) 0 0 /100% no-repeat; position: absolute; top: calc(100% - 64.5px); left: calc(100% - 119px); } .bimitankyu .seriesArea .cont .detail .detailTxtCont { margin-top: 20px; margin-right: 0; } .bimitankyu .seriesArea .cont .detail .detailTxtCont h4 { margin-bottom: 15px; font-size: 20px; font-weight: 600; } .bimitankyu .seriesArea .cont .detail .detailTxtCont .text { font-size: 16px; } .bimitankyu .seriesArea .cont .detail .img { position: relative; z-index: 1; } .bimitankyu .seriesArea .cont .thumb img { position: relative; z-index: 10; } .bimitankyu .seriesArea .inner { width: auto; } .bimitankyu .seriesArea h3 { margin: 0px 10px 0; width: 100%; } .bimitankyu .seriesArea h3 img { margin-top: 0; } .bimitankyu .seriesArea .cont:nth-child(2) h3 img { margin-left: -35px;} .bimitankyu .seriesArea .cont .text { margin-top: -5px; } .bimitankyu .seriesArea .cont.shikairo .text.first { margin-top: -25px; } .bimitankyu .seriesArea .catch { margin: 0 0 0 -20px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); font-size: 85%; } .bimitankyu .seriesArea .text { margin: 10px 0 10px; } .bimitankyu .seriesArea ul { display: table; margin: 0 0; } .bimitankyu .seriesArea ul li { float: none; margin-right: 0; display: table-cell; } .bimitankyu .seriesArea ul li:first-child { padding-right: 10px; } } .bimitankyu .mainVisualUnder { height: 560px; } .bimitankyu .mainVisualUnder .mainVisualUnderCont { position: relative; height: 560px; } .bimitankyu .mainVisualUnder h1 { position: absolute; left: 0px; top: 120px; z-index: 2; } .bimitankyu .mainVisualUnder .mainLogo { position: absolute; left: 0px; top: 85px; } .bimitankyu .mainVisualUnder .package { position: absolute; left: 10px; top: 330px; } .bimitankyu .mainVisualUnder .seriesTitle { position: absolute; left: 220px; top: 340px; width: 350px; z-index: 2; } .bimitankyu .mainVisualUnder .text { position: absolute; left: 220px; top: 390px; z-index: 2; } .bimitankyu .mainVisualUnder .thumb { position: absolute; right: -250px; top: -50px; } .bimitankyu .mainVisualUnder .inner { zoom: 1; } .bimitankyu .mainVisualUnder .inner:before, .bimitankyu .mainVisualUnder .inner:after { display: block; height: 0; visibility: hidden; content: "."; } .bimitankyu .mainVisualUnder .inner:after { clear: both; } .bimitankyu.bimitankyu-shikairo .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/shikairo/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .bimitankyu.bimitankyu-komi .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/komi/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } .bimitankyu.bimitankyu-mala .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/mala/main_bg.jpg) no-repeat 0 0; background-size: 100% auto; } @media screen and (max-width: 760px) { .bimitankyu .mainVisualUnder { height: auto; } .bimitankyu .mainVisualUnder .mainVisualUnderCont { height: auto; padding: 10px 10px; } .bimitankyu .mainVisualUnder .thumb { position: static; } .bimitankyu .mainVisualUnder .scroll { display: none; } .bimitankyu .mainVisualUnder h1 { position: static; } .bimitankyu .mainVisualUnder .mainLogo { position: static; width: 80px; margin: -50px 10px -30px; } .bimitankyu .mainVisualUnder .package { position: static; float: left; width: 37%; } .bimitankyu .mainVisualUnder .seriesTitle { position: static; width: 63%; float: left; } .bimitankyu .mainVisualUnder .text { position: static; float: left; width: 63%; } .bimitankyu .mainVisualUnder .scroll { position: static; text-align: center; } .bimitankyu .mainVisualUnder .inner { margin-top: 15px; } .bimitankyu.bimitankyu-shikairo .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/shikairo/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .bimitankyu.bimitankyu-komi .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/komi/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } .bimitankyu.bimitankyu-mala .mainVisualUnder { background: url(/common/img/ramen/bimitankyu/mala/main_bg_sp.jpg) no-repeat 0 100%; background-size: 100% auto; } } /*! * fullPage 2.8.4 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo * Contribution by Jhony0311 */ html.fp-enabled, .fp-enabled body { margin: 0; padding: 0; overflow: hidden; /*Avoid flicker on slides transitions for mobile phones #336 */ -webkit-tap-highlight-color: transparent; } #superContainer { height: 100%; position: relative; /* Touch detection for Windows 8 */ -ms-touch-action: none; /* IE 11 on Windows Phone 8.1*/ touch-action: none; } .fp-section { position: relative; -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ -moz-box-sizing: border-box; /* <=28 */ box-sizing: border-box; } .fp-slide { float: left; } .fp-slide, .fp-slidesContainer { height: 100%; display: block; } .fp-slides { z-index: 1; height: 100%; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ transition: all 0.3s ease-out; } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout: fixed; width: 100%; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-slidesContainer { float: left; position: relative; } .fp-controlArrow { -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent #fff transparent transparent; } .fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent #fff; } .fp-scrollable { overflow: scroll; } .fp-notransition { -webkit-transition: none !important; transition: none !important; } .fp-slidesNav { position: absolute; z-index: 4; left: 50%; opacity: 1; } .fp-slidesNav.bottom { bottom: 17px; } .fp-slidesNav.top { top: 17px; } #fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; } #fp-nav ul li, .fp-slidesNav ul li { display: block; width: 14px; height: 13px; margin: 7px; position: relative; } #fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span { height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; } #fp-nav ul li:hover #fp-nav ul li a.active span, #fp-slidesNav ul li:hover #fp-nav ul li a.active span, #fp-nav ul li:hover .fp-slidesNav ul li a.active span, #fp-slidesNav ul li:hover .fp-slidesNav ul li a.active span { height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; } #fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 4px; width: 4px; border: 0; background: #333; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { width: 10px; height: 10px; margin: -5px 0px 0px -5px; } #fp-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0); } #fp-nav.right { right: 17px; } #fp-nav.left { left: 17px; } #fp-nav ul li .fp-tooltip { position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer; } #fp-nav ul li .fp-tooltip.right { right: 20px; } #fp-nav ul li:hover .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; } #fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; } .fp-slidesNav ul li { display: inline-block; } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell { height: auto !important; } .fp-responsive .fp-auto-height-responsive.fp-section, .fp-responsive .fp-auto-height-responsive .fp-slide, .fp-responsive .fp-auto-height-responsive .fp-tableCell { height: auto !important; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; margin: 0 10px; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-dots { text-align: center; margin-top: 20px; } .slick-dots li { display: inline-block; padding: 0 5px; } .slick-dots button { overflow: hidden; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.8); border: none; cursor: pointer; width: 12px; height: 12px; display: block; text-indent: -9999px; display: block; padding: 0; } .slick-dots button:hover { background: #fff; } .slick-dots .slick-active button { background: #fff; } @media all and (-ms-high-contrast: none) { .slick-dots button { height: 15px; } } .slick-arrow { width: 58px; height: 100px; text-indent: -9999px; overflow: hidden; border: none; cursor: pointer; position: absolute; bottom: 0; top: 0; margin: auto; z-index: 1; } .slick-arrow.slick-prev { background: url(/common/img/news/arrow_l.png) no-repeat 0 0; left: 0; } .slick-arrow.slick-next { background: url(/common/img/news/arrow_r.png) no-repeat 0 0; right: 0; } /*! * - v1.3 * Homepage: http://bqworks.com/slider-pro/ * Author: bqworks * Author URL: http://bqworks.com/ */ /* Core --------------------------------------------------*/ .slider-pro { position: relative; margin: 0 auto; -moz-box-sizing: content-box; box-sizing: content-box; } .sp-slides-container { position: relative; } .sp-mask { position: relative; overflow: hidden; } .sp-slides { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .sp-slide { position: absolute; } .sp-image-container { overflow: hidden; } .sp-image { position: relative; display: block; border: none; } .sp-no-js { overflow: hidden; max-width: 100%; } /* Thumbnails --------------------------------------------------*/ .sp-thumbnails-container { position: relative; overflow: hidden; direction: ltr; } .sp-top-thumbnails, .sp-bottom-thumbnails { left: 0; margin: 0 auto; } .sp-top-thumbnails { position: absolute; top: 0; margin-bottom: 4px; } .sp-bottom-thumbnails { margin-top: 4px; } .sp-left-thumbnails, .sp-right-thumbnails { position: absolute; top: 0; } .sp-right-thumbnails { right: 0; margin-left: 4px; } .sp-left-thumbnails { left: 0; margin-right: 4px; } .sp-thumbnails { position: relative; } .sp-thumbnail { border: none; } .sp-thumbnail-container { position: relative; display: block; overflow: hidden; float: left; -moz-box-sizing: border-box; box-sizing: border-box; } .sp-rtl .sp-thumbnail-container { float: right; } /* Horizontal thumbnails ------------------------*/ .sp-top-thumbnails .sp-thumbnail-container, .sp-bottom-thumbnails .sp-thumbnail-container { margin-left: 2px; margin-right: 2px; } .sp-top-thumbnails .sp-thumbnail-container:first-child, .sp-bottom-thumbnails .sp-thumbnail-container:first-child { margin-left: 0; } .sp-top-thumbnails .sp-thumbnail-container:last-child, .sp-bottom-thumbnails .sp-thumbnail-container:last-child { margin-right: 0; } /* Vertical thumbnails ----------------------*/ .sp-left-thumbnails .sp-thumbnail-container, .sp-right-thumbnails .sp-thumbnail-container { margin-top: 2px; margin-bottom: 2px; } .sp-left-thumbnails .sp-thumbnail-container:first-child, .sp-right-thumbnails .sp-thumbnail-container:first-child { margin-top: 0; } .sp-left-thumbnails .sp-thumbnail-container:last-child, .sp-right-thumbnails .sp-thumbnail-container:last-child { margin-bottom: 0; } /* Right thumbnails with pointer --------------------------------*/ .sp-right-thumbnails.sp-has-pointer { margin-left: -13px; } .sp-right-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; left: 18px; margin-left: 0 !important; } .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; height: 100%; border-left: 5px solid #F00; left: 0; top: 0; margin-left: 13px; } .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 0; top: 50%; margin-top: -8px; border-right: 13px solid #F00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } /* Left thumbnails with pointer -------------------------------*/ .sp-left-thumbnails.sp-has-pointer { margin-right: -13px; } .sp-left-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; right: 18px; } .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; height: 100%; border-left: 5px solid #F00; right: 0; top: 0; margin-right: 13px; } .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; right: 0; top: 50%; margin-top: -8px; border-left: 13px solid #F00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } /* Bottom thumbnails with pointer ---------------------------------*/ .sp-bottom-thumbnails.sp-has-pointer { margin-top: -13px; } .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; top: 18px; margin-top: 0 !important; } .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 100%; border-bottom: 5px solid #F00; top: 0; margin-top: 13px; } .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 50%; top: 0; margin-left: -8px; border-bottom: 13px solid #F00; border-left: 8px solid transparent; border-right: 8px solid transparent; } /* Top thumbnails with pointer ------------------------------*/ .sp-top-thumbnails.sp-has-pointer { margin-bottom: -13px; } .sp-top-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; bottom: 18px; } .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 100%; border-bottom: 5px solid #F00; bottom: 0; margin-bottom: 13px; } .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 50%; bottom: 0; margin-left: -8px; border-top: 13px solid #F00; border-left: 8px solid transparent; border-right: 8px solid transparent; } /* Layers --------------------------------------------------*/ .sp-layer { position: absolute; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-backface-visibility: hidden; } .sp-black { color: #FFF; background: black; background: rgba(0, 0, 0, 0.7); } .sp-white { color: #000; background: white; background: rgba(255, 255, 255, 0.7); } .sp-rounded { border-radius: 10px; } .sp-padding { padding: 10px; } /* Touch Swipe --------------------------------------------------*/ .sp-grab { cursor: url(/common/img/common/openhand.cur), move; } .sp-grabbing { cursor: url(/common/img/common/closedhand.cur), move; } .sp-selectable { cursor: default; } /* Caption --------------------------------------------------*/ .sp-caption-container { text-align: center; margin-top: 10px; } /* Full Screen --------------------------------------------------*/ .sp-full-screen { margin: 0 !important; background-color: #000; } .sp-full-screen-button { position: absolute; top: 5px; right: 10px; font-size: 30px; line-height: 1; cursor: pointer; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sp-full-screen-button:before { content: '\2195'; } .sp-fade-full-screen { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .slider-pro:hover .sp-fade-full-screen { opacity: 1; } /* Buttons --------------------------------------------------*/ .sp-buttons { position: relative; width: 100%; text-align: center; padding-top: 10px; } .sp-rtl .sp-buttons { direction: rtl; } .sp-full-screen .sp-buttons { display: none; } .sp-button { width: 10px; height: 10px; border: 2px solid #000; border-radius: 50%; margin: 4px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .sp-selected-button { background-color: #000; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .sp-button { width: 14px; height: 14px; } } @media only screen and (min-width: 568px) and (max-width: 768px) { .sp-button { width: 16px; height: 16px; } } @media only screen and (min-width: 320px) and (max-width: 568px) { .sp-button { width: 18px; height: 18px; } } /* Arrows --------------------------------------------------*/ .sp-arrows { position: absolute; } .sp-fade-arrows { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .sp-slides-container:hover .sp-fade-arrows { opacity: 1; } .sp-horizontal .sp-arrows { width: 100%; left: 0; top: 50%; margin-top: -15px; } .sp-vertical .sp-arrows { height: 100%; left: 50%; top: 0; margin-left: -10px; } .sp-arrow { position: absolute; display: block; width: 20px; height: 30px; cursor: pointer; } .sp-vertical .sp-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sp-horizontal .sp-previous-arrow { left: 20px; right: auto; } .sp-horizontal.sp-rtl .sp-previous-arrow { right: 20px; left: auto; } .sp-horizontal .sp-next-arrow { right: 20px; left: auto; } .sp-horizontal.sp-rtl .sp-next-arrow { left: 20px; right: auto; } .sp-vertical .sp-previous-arrow { top: 20px; } .sp-vertical .sp-next-arrow { bottom: 20px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after { content: ''; position: absolute; width: 50%; height: 50%; background-color: #FFF; } .sp-arrow:before { left: 30%; top: 0; -webkit-transform: skew(145deg, 0deg); -ms-transform: skew(145deg, 0deg); transform: skew(145deg, 0deg); } .sp-arrow:after { left: 30%; top: 50%; -webkit-transform: skew(-145deg, 0deg); -ms-transform: skew(-145deg, 0deg); transform: skew(-145deg, 0deg); } .sp-next-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sp-horizontal.sp-rtl .sp-previous-arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sp-horizontal.sp-rtl .sp-next-arrow { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .ie8 .sp-arrow, .ie7 .sp-arrow { width: 0; height: 0; } .ie8 .sp-arrow:before, .ie8 .sp-arrow:after, .ie7 .sp-arrow:before, .ie7 .sp-arrow:after { content: none; } .ie8.sp-horizontal .sp-previous-arrow, .ie7.sp-horizontal .sp-previous-arrow { border-right: 20px solid #FFF; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .ie8.sp-horizontal .sp-next-arrow, .ie7.sp-horizontal .sp-next-arrow { border-left: 20px solid #FFF; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .ie8.sp-vertical .sp-previous-arrow, .ie7.sp-vertical .sp-previous-arrow { border-bottom: 20px solid #FFF; border-left: 20px solid transparent; border-right: 20px solid transparent; } .ie8.sp-vertical .sp-next-arrow, .ie7.sp-vertical .sp-next-arrow { border-top: 20px solid #FFF; border-left: 20px solid transparent; border-right: 20px solid transparent; } /* Thumbnail Arrows --------------------------------------------------*/ .sp-thumbnail-arrows { position: absolute; } .sp-fade-thumbnail-arrows { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .sp-thumbnails-container:hover .sp-fade-thumbnail-arrows { opacity: 1; } .sp-top-thumbnails .sp-thumbnail-arrows, .sp-bottom-thumbnails .sp-thumbnail-arrows { width: 100%; top: 50%; left: 0; margin-top: -12px; } .sp-left-thumbnails .sp-thumbnail-arrows, .sp-right-thumbnails .sp-thumbnail-arrows { height: 100%; top: 0; left: 50%; margin-left: -7px; } .sp-thumbnail-arrow { position: absolute; display: block; width: 15px; height: 25px; cursor: pointer; } .sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow, .sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sp-top-thumbnails .sp-previous-thumbnail-arrow, .sp-bottom-thumbnails .sp-previous-thumbnail-arrow { left: 0px; } .sp-top-thumbnails .sp-next-thumbnail-arrow, .sp-bottom-thumbnails .sp-next-thumbnail-arrow { right: 0px; } .sp-left-thumbnails .sp-previous-thumbnail-arrow, .sp-right-thumbnails .sp-previous-thumbnail-arrow { top: 0px; } .sp-left-thumbnails .sp-next-thumbnail-arrow, .sp-right-thumbnails .sp-next-thumbnail-arrow { bottom: 0px; } .sp-previous-thumbnail-arrow:before, .sp-previous-thumbnail-arrow:after, .sp-next-thumbnail-arrow:before, .sp-next-thumbnail-arrow:after { content: ''; position: absolute; width: 50%; height: 50%; background-color: #FFF; } .sp-previous-thumbnail-arrow:before { left: 30%; top: 0; -webkit-transform: skew(145deg, 0deg); -ms-transform: skew(145deg, 0deg); transform: skew(145deg, 0deg); } .sp-previous-thumbnail-arrow:after { left: 30%; top: 50%; -webkit-transform: skew(-145deg, 0deg); -ms-transform: skew(-145deg, 0deg); transform: skew(-145deg, 0deg); } .sp-next-thumbnail-arrow:before { right: 30%; top: 0; -webkit-transform: skew(35deg, 0deg); -ms-transform: skew(35deg, 0deg); transform: skew(35deg, 0deg); } .sp-next-thumbnail-arrow:after { right: 30%; top: 50%; -webkit-transform: skew(-35deg, 0deg); -ms-transform: skew(-35deg, 0deg); transform: skew(-35deg, 0deg); } .ie8 .sp-thumbnail-arrow, .ie7 .sp-thumbnail-arrow { width: 0; height: 0; } .ie8 .sp-thumbnail-arrow:before, .ie8 .sp-thumbnail-arrow:after, .ie7 .sp-thumbnail-arrow:before, .ie7 .sp-thumbnail-arrow:after { content: none; } .ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow, .ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow { border-right: 12px solid #FFF; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow, .ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow { border-left: 12px solid #FFF; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow, .ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow { border-bottom: 12px solid #FFF; border-left: 12px solid transparent; border-right: 12px solid transparent; } .ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow, .ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow { border-top: 12px solid #FFF; border-left: 12px solid transparent; border-right: 12px solid transparent; } /* Video --------------------------------------------------*/ a.sp-video { text-decoration: none; } a.sp-video img { -webkit-backface-visibility: hidden; border: none; } a.sp-video:after { content: '\25B6'; position: absolute; width: 45px; padding-left: 5px; height: 50px; border: 2px solid #FFF; text-align: center; font-size: 30px; border-radius: 30px; top: 0; color: #FFF; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.2); margin: auto; line-height: 52px; } /* CSS for preventing styling issues in WordPress --------------------------------------------------*/ .slider-pro img.sp-image, .slider-pro img.sp-thumbnail { max-width: none; max-height: none; border: none !important; border-radius: 0 !important; padding: 0 !important; -webkit-box-shadow: none !important; -mox-box-shadow: none !important; box-shadow: none !important; transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } .slider-pro a { position: static; transition: none !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; } .slider-pro iframe, .slider-pro object, .slider-pro video, .slider-pro embed, .slider-pro canvas { max-width: none; max-height: none; } .slider-pro p.sp-layer { font-size: 14px; line-height: 1.4; margin: 0; } .slider-pro h1.sp-layer { font-size: 32px; line-height: 1.4; margin: 0; } .slider-pro h2.sp-layer { font-size: 24px; line-height: 1.4; margin: 0; } .slider-pro h3.sp-layer { font-size: 19px; line-height: 1.4; margin: 0; } .slider-pro h4.sp-layer { font-size: 16px; line-height: 1.4; margin: 0; } .slider-pro h5.sp-layer { font-size: 13px; line-height: 1.4; margin: 0; } .slider-pro h6.sp-layer { font-size: 11px; line-height: 1.4; margin: 0; } .slider-pro img.sp-layer { border: none; } /*# sourceMappingURL=base.css.map */ /* 2017 news column */ .news-column .header-container, .news-column .categoryMenu, .news-column aside.side, .news-column-entry .header-container, .news-column-entry .categoryMenu, .news-column-entry aside.side, .news-column #site-footer .footlogo, .news-column #site-footer .footer-nav, .news-column #site-footer .snsIcon, .news-column-entry #site-footer .footlogo, .news-column-entry #site-footer .footer-nav, .news-column-entry #site-footer .snsIcon { display: none; } body.news-column, body.news-column-entry { background: #fff; } .news-column #site-footer, .news-column-entry #site-footer { background: #000; height: auto; margin-top: 0; } .news-column #wrapper, .news-column-entry #wrapper { padding-bottom: 0; } .news-column #container, .news-column-entry #container { padding-bottom: 60px; } .news-column .mainArea, .news-column-entry .mainArea { width: 100%; float: none; } .news-column .newstitle:before, .news-column .newstitle:after, .news-column .article-body, .news-column-entry .newstitle:before, .news-column-entry .newstitle:after, .news-column-entry .article-body { background-repeat: repeat-x; } .news-column .news-column-mv, .news-column .news-column-entry-mv, .news-column-entry .news-column-mv, .news-column-entry .news-column-entry-mv { text-align: center; background: #000; } .column-article-footer-share, .column-article-footer-share { font-size: 0; padding: 30px 0; } .column-article-footer-share li, .column-article-footer-share li { font-size: 1rem; display: inline-block; } .column-article-footer-share li.twitter, .column-article-footer-share li.twitter { margin-right: 20px; } @media screen and (max-width: 760px){ .column-article-footer-share li, .column-article-footer-share li { width: 50%;} .column-article-footer-share li.twitter, .column-article-footer-share li.twitter { margin-right: 0; padding-right: 5px; } .column-article-footer-share li.facebook, .column-article-footer-share li.facebook { margin-right: 0; padding-left: 5px; } } .column-article-author, .column-article-author { margin: 0 0 20px; border-image: url("/common/img/news/bgAuthor.png") 2 round; border-style: solid; border-width: 2px; padding: 30px; font-size: 0; } .column-article-author figure, .column-article-author figure { display: inline-block; width: 80px; vertical-align: middle; margin-right: 15px; } .column-article-author .column-article-author-text, .column-article-author .column-article-author-text { display: inline-block; vertical-align: middle; font-size: 1rem; } @media screen and (min-width: 761px){ .column-article-author .column-article-author-text { width: 700px; } } .column-article-author .column-article-author-name, .column-article-author .column-article-author-name { font-size: 20px; font-weight: bold; } .article-body-cat-column { background: none; } @media screen and (min-width: 761px){ .article-body-cat-column { padding: 0 70px; } .column-article-footer { margin: 0 70px; } } .column-article-footer-poweredby { font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 16px; text-align: right; margin-bottom: 40px; } /* column page */ .news-column-entry .article-body h2 { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px 0 2px 0; position: relative; padding: 5px 0 10px 18px; } .news-column-entry .article-body h2:before { content: ""; display: block; position: absolute; top: 9px; left: 0; bottom: 9px; width: 5px; background: #0b5532; } .news-column-entry .article-body h3 { clear: both; font-weight: bold; margin-top: 25px; padding: 0 0 10px 0; position: relative; line-height: 1.2; background: none; border-bottom: 1px solid #666; font-size: 24px; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news-column-entry .article-body h3:before, .news-column-entry .article-body h3:after { display: none; } .news-column-entry .article-body h4 { clear: both; font-weight: bold; color: #000; margin-top: 20px; font-size: 21px; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news-column-entry .article-body blockquote { display: block; margin-top: 20px; padding: 5px 0 15px 15px; border-left: 4px solid #989898; font-style: italic; } .news-column-entry .article-body .columnBorderBox { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px; margin-top: 20px; padding: 5px 15px 15px 15px; } .column-article-footer-direction { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px 0 0 0; margin: 20px 0 40px; padding: 30px 0 0; position: relative; } .column-article-footer-direction:after { content: ""; display: table; clear: both; } .column-article-footer-direction a { font-size: 1rem; display: block; box-sizing: border-box; width: 50%; position: relative; padding: 5px 30px; color: #0066cc; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 16px; } .column-article-footer-direction a:after { content: ""; display: block; width: 6px; height: 10px; position: absolute; top: 50%; margin-top: -5px; } .column-article-footer-direction a.column-article-footer-direction-prev { float: left; } .column-article-footer-direction a.column-article-footer-direction-prev:after { background: url(/common/img/common/direction_prev.png) 0 0 no-repeat; left: 0; } .column-article-footer-direction a.column-article-footer-direction-next { float: right; } .column-article-footer-direction a.column-article-footer-direction-next:after { background: url(/common/img/common/direction_next.png) 0 0 no-repeat; right: 0; } .column-article-footer-direction a.column-article-footer-direction-next:before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; background: url(/common/img/news/bgAuthor.png) 0 0 repeat-y; width: 2px; } .news-column .newsList ul { font-size: 0rem; } .news-column .newsList li { font-size: 1rem; } @media screen and (min-width: 761px){ .news-column .newsList li.cat-column:nth-child(1), .news-column .newsList li.cat-column:nth-child(2) { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-right: 20px; } .news-column .newsList li.cat-column:nth-child(1) .item-thumb, .news-column .newsList li.cat-column:nth-child(2) .item-thumb { float: none; margin: 0 0 20px; width: 100%; } .news-column .newsList li.cat-column:nth-child(1) article, .news-column .newsList li.cat-column:nth-child(2) article { background: none; } .news-column .newsList li.cat-column:nth-child(3) article { position: relative; padding-top: 20px; } .news-column .newsList li.cat-column:nth-child(3) article:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: url(/common/img/news/line_list.gif) repeat-x 0 0; } } /* 2017 news kokumen */ .news-kokumen .header-container, .news-kokumen .categoryMenu, .news-kokumen aside.side, .news-kokumen-entry .header-container, .news-kokumen-entry .categoryMenu, .news-kokumen-entry aside.side, .news-kokumen #site-footer .footlogo, .news-kokumen #site-footer .footer-nav, .news-kokumen #site-footer .snsIcon, .news-kokumen-entry #site-footer .footlogo, .news-kokumen-entry #site-footer .footer-nav, .news-kokumen-entry #site-footer .snsIcon { display: none; } body.news-kokumen, body.news-kokumen-entry { background: #fff; } .news-kokumen #site-footer, .news-kokumen-entry #site-footer { background: #000; height: auto; margin-top: 0; } .news-kokumen #wrapper, .news-kokumen-entry #wrapper { padding-bottom: 0; } .news-kokumen #container, .news-kokumen-entry #container { padding-bottom: 60px; } .news-kokumen .mainArea, .news-kokumen-entry .mainArea { width: 100%; float: none; } .news-kokumen .newstitle:before, .news-kokumen .newstitle:after, .news-kokumen .article-body, .news-kokumen-entry .newstitle:before, .news-kokumen-entry .newstitle:after, .news-kokumen-entry .article-body { background-repeat: repeat-x; } .news-kokumen .news-kokumen-mv, .news-kokumen .news-kokumen-entry-mv, .news-kokumen-entry .news-kokumen-mv, .news-kokumen-entry .news-kokumen-entry-mv { text-align: center; background: #F8F6EA; } .news-kokumen .kokumen-article-footer-share, .news-kokumen-entry .kokumen-article-footer-share { font-size: 0; padding: 30px 0; } .news-kokumen .kokumen-article-footer-share li, .news-kokumen-entry .kokumen-article-footer-share li { font-size: 1rem; display: inline-block; } .news-kokumen .kokumen-article-footer-share li.twitter, .news-kokumen-entry .kokumen-article-footer-share li.twitter { margin-right: 20px; } .news-kokumen-entry .news-kokumen-entry-mv a { display: block; width: 1000px; margin: 0 auto; text-align: left; } @media screen and (max-width: 760px){ .news-kokumen .kokumen-article-footer-share li, .news-kokumen-entry .kokumen-article-footer-share li { width: 50%;} .news-kokumen .kokumen-article-footer-share li.twitter, .news-kokumen-entry .kokumen-article-footer-share li.twitter { margin-right: 0; padding-right: 5px; } .news-kokumen .kokumen-article-footer-share li.facebook, .news-kokumen-entry .kokumen-article-footer-share li.facebook { margin-right: 0; padding-left: 5px; } } .news-kokumen .kokumen-article-author, .news-kokumen-entry .kokumen-article-author { margin: 0 0 20px; border-image: url("/common/img/news/bgAuthor.png") 2 round; border-style: solid; border-width: 2px; padding: 30px; font-size: 0; } .news-kokumen .kokumen-article-author figure, .news-kokumen-entry .kokumen-article-author figure { display: inline-block; width: 80px; vertical-align: middle; margin-right: 15px; } .news-kokumen .kokumen-article-author .kokumen-article-author-text, .news-kokumen-entry .kokumen-article-author .kokumen-article-author-text { display: inline-block; vertical-align: middle; font-size: 1rem; } @media screen and (min-width: 761px){ .news-kokumen-entry .kokumen-article-author .kokumen-article-author-text { width: 700px; } } .news-kokumen .kokumen-article-author .kokumen-article-author-name, .news-kokumen-entry .kokumen-article-author .kokumen-article-author-name { font-size: 20px; font-weight: bold; } .article-body-cat-kokumen { background: none; } @media screen and (min-width: 761px){ .article-body-cat-kokumen { padding: 0 70px; } .kokumen-article-footer { margin: 0 70px; } } .kokumen-article-footer-poweredby { font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; font-size: 16px; text-align: right; margin-bottom: 40px; } /* kokumen page */ .news-kokumen-entry .article-body h2 { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px 0 2px 0; position: relative; padding: 5px 0 10px 18px; } .news-kokumen-entry .article-body h2:before { content: ""; display: block; position: absolute; top: 9px; left: 0; bottom: 9px; width: 5px; background: #0b5532; } .news-kokumen-entry .article-body h3 { clear: both; font-weight: bold; margin-top: 25px; padding: 0 0 10px 0; position: relative; line-height: 1.2; background: none; border-bottom: 1px solid #666; font-size: 24px; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news-kokumen-entry .article-body h3:before, .news-kokumen-entry .article-body h3:after { display: none; } .news-kokumen-entry .article-body h4 { clear: both; font-weight: bold; color: #000; margin-top: 20px; font-size: 21px; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news-kokumen-entry .article-body blockquote { display: block; margin-top: 20px; padding: 5px 0 15px 15px; border-left: 4px solid #989898; font-style: italic; } .news-kokumen-entry .article-body .kokumenBorderBox { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px; margin-top: 20px; padding: 5px 15px 15px 15px; } .kokumen-article-footer-direction { border-image: url(/common/img/news/bgAuthor.png) 2 round; border-style: solid; border-width: 2px 0 0 0; margin: 20px 0 40px; padding: 30px 0 0; position: relative; } .kokumen-article-footer-direction:after { content: ""; display: table; clear: both; } .kokumen-article-footer-direction a { font-size: 1rem; display: block; box-sizing: border-box; width: 50%; position: relative; padding: 5px 30px; color: #0066cc; font-family: hannari,"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 16px; } .kokumen-article-footer-direction a:after { content: ""; display: block; width: 6px; height: 10px; position: absolute; top: 50%; margin-top: -5px; } .kokumen-article-footer-direction a.kokumen-article-footer-direction-prev { float: left; } .kokumen-article-footer-direction a.kokumen-article-footer-direction-prev:after { background: url(/common/img/common/direction_prev.png) 0 0 no-repeat; left: 0; } .kokumen-article-footer-direction a.kokumen-article-footer-direction-next { float: right; } .kokumen-article-footer-direction a.kokumen-article-footer-direction-next:after { background: url(/common/img/common/direction_next.png) 0 0 no-repeat; right: 0; } .kokumen-article-footer-direction a.kokumen-article-footer-direction-next:before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; background: url(/common/img/news/bgAuthor.png) 0 0 repeat-y; width: 2px; } .news-kokumen .newsList ul { font-size: 0rem; } .news-kokumen .newsList li { font-size: 1rem; } @media screen and (min-width: 761px){ .news-kokumen .newsList li.cat-kokumen:nth-child(1), .news-kokumen .newsList li.cat-kokumen:nth-child(2) { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-right: 20px; } .news-kokumen .newsList li.cat-kokumen:nth-child(1) .item-thumb, .news-kokumen .newsList li.cat-kokumen:nth-child(2) .item-thumb { float: none; margin: 0 0 20px; width: 100%; } .news-kokumen .newsList li.cat-kokumen:nth-child(1) article, .news-kokumen .newsList li.cat-kokumen:nth-child(2) article { background: none; } .news-kokumen .newsList li.cat-kokumen:nth-child(3) article { position: relative; padding-top: 20px; } .news-kokumen .newsList li.cat-kokumen:nth-child(3) article:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: url(/common/img/news/line_list.gif) repeat-x 0 0; } } /* nowater */ body.nowater-onomichi .mainVisualUnder .mainLogo, body.nowater-shikairo .mainVisualUnder .mainLogo { top: 25px;} @media screen and (min-width: 761px){ .nowater .seriesArea .catch02 { margin: 0 0 30px; } } @media screen and (max-width: 760px){ body.nowater-shikairo .mainVisualUnder .mainLogo { margin: -80px 0 10px; } } /* gold */ /*.nowater.nowater-yokozuna .mainVisualUnder .mainVisualUnderCont:after { content: ""; display: block; width: 148px; height: 166px; position: absolute; top: 0; right: 0; background: url(/common/img/ramen/nowater/common/gold.png); } @media screen and (max-width: 760px){ .nowater.nowater-yokozuna .mainVisualUnder .mainVisualUnderCont:after { width: 75px; height: 100px; right: 20px; background: url(/common/img/ramen/nowater/common/gold.png) 0 0 no-repeat; background-size: contain; } }*/ .nowater.nowater-yokozuna .productDetail .thumb { position: relative; } /*.nowater.nowater-yokozuna .productDetail .thumb:after { content: ""; display: block; width: 89px; height: 102px; position: absolute; top: 60px; left: 0; background: url(/common/img/ramen/nowater/common/gold.png) 0 0 no-repeat; background-size: contain; }*/ .nowater .seriesArea .cont .thumb.goldPrize { position: relative; } .nowater .seriesArea .cont .thumb.goldPrize:after { content: ""; display: block; width: 89px; height: 102px; position: absolute; top: 0; left: -30px; background: url(/common/img/ramen/nowater/common/gold.png) 0 0 no-repeat; background-size: contain; z-index: 10; } @media screen and (max-width: 760px){ .nowater .seriesArea .cont .thumb.goldPrize:after { width: 75px; height: 100px; left: 0; background-size: contain; } } /* recruit */ .company-recruit .page-title-container{ display: none; } .sp { display: none; } @media screen and (max-width: 760px){ .pc { display: none; } .sp { display: inline-block; } }