@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500|Noto+Serif+JP:300,400,500&display=swap");
html { font-size: 62.5%; }

#contents { width: 100%; margin: 0 auto; }

#dashiwotanoshimu-ninben { color: #3b302f; font-family: 'Noto Serif JP', serif,"游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; overflow: hidden; }

#dashiwotanoshimu-ninben div, #dashiwotanoshimu-ninben span, #dashiwotanoshimu-ninben applet, #dashiwotanoshimu-ninben object, #dashiwotanoshimu-ninben iframe, #dashiwotanoshimu-ninben h1, #dashiwotanoshimu-ninben h2, #dashiwotanoshimu-ninben h3, #dashiwotanoshimu-ninben h4, #dashiwotanoshimu-ninben h5, #dashiwotanoshimu-ninben h6, #dashiwotanoshimu-ninben p, #dashiwotanoshimu-ninben blockquote, #dashiwotanoshimu-ninben pre, #dashiwotanoshimu-ninben a, #dashiwotanoshimu-ninben abbr, #dashiwotanoshimu-ninben acronym, #dashiwotanoshimu-ninben address, #dashiwotanoshimu-ninben big, #dashiwotanoshimu-ninben cite, #dashiwotanoshimu-ninben code, #dashiwotanoshimu-ninben del, #dashiwotanoshimu-ninben dfn, #dashiwotanoshimu-ninben em, #dashiwotanoshimu-ninben img, #dashiwotanoshimu-ninben ins, #dashiwotanoshimu-ninben kbd, #dashiwotanoshimu-ninben q, #dashiwotanoshimu-ninben s, #dashiwotanoshimu-ninben samp, #dashiwotanoshimu-ninben small, #dashiwotanoshimu-ninben strike, #dashiwotanoshimu-ninben strong, #dashiwotanoshimu-ninben sub, #dashiwotanoshimu-ninben sup, #dashiwotanoshimu-ninben tt, #dashiwotanoshimu-ninben var, #dashiwotanoshimu-ninben b, #dashiwotanoshimu-ninben u, #dashiwotanoshimu-ninben i, #dashiwotanoshimu-ninben center, #dashiwotanoshimu-ninben dl, #dashiwotanoshimu-ninben dt, #dashiwotanoshimu-ninben dd, #dashiwotanoshimu-ninben ol, #dashiwotanoshimu-ninben ul, #dashiwotanoshimu-ninben li, #dashiwotanoshimu-ninben fieldset, #dashiwotanoshimu-ninben form, #dashiwotanoshimu-ninben label, #dashiwotanoshimu-ninben legend, #dashiwotanoshimu-ninben table, #dashiwotanoshimu-ninben caption, #dashiwotanoshimu-ninben tbody, #dashiwotanoshimu-ninben tfoot, #dashiwotanoshimu-ninben thead, #dashiwotanoshimu-ninben tr, #dashiwotanoshimu-ninben th, #dashiwotanoshimu-ninben td, #dashiwotanoshimu-ninben article, #dashiwotanoshimu-ninben aside, #dashiwotanoshimu-ninben canvas, #dashiwotanoshimu-ninben details, #dashiwotanoshimu-ninben embed, #dashiwotanoshimu-ninben figure, #dashiwotanoshimu-ninben figcaption, #dashiwotanoshimu-ninben footer, #dashiwotanoshimu-ninben header, #dashiwotanoshimu-ninben hgroup, #dashiwotanoshimu-ninben menu, #dashiwotanoshimu-ninben nav, #dashiwotanoshimu-ninben output, #dashiwotanoshimu-ninben ruby, #dashiwotanoshimu-ninben section, #dashiwotanoshimu-ninben summary, #dashiwotanoshimu-ninben time, #dashiwotanoshimu-ninben mark, #dashiwotanoshimu-ninben audio, #dashiwotanoshimu-ninben video { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

#dashiwotanoshimu-ninben main { display: block; }

#dashiwotanoshimu-ninben section { position: relative; z-index: 700; }

#dashiwotanoshimu-ninben img { vertical-align: bottom; }

#dashiwotanoshimu-ninben img[src$=".svg"] { max-width: 100%; }

#dashiwotanoshimu-ninben a { color: inherit; text-decoration: none; -webkit-transition: .3s; transition: .3s; }

#dashiwotanoshimu-ninben a:hover { opacity: .8; }

#dashiwotanoshimu-ninben a:hover img { opacity: 1; }

#dashiwotanoshimu-ninben .inner { margin: 0 auto; padding: 0 3.125%; width: 100%; }

#dashiwotanoshimu-ninben img { width: 100%; height: auto; }

#dashiwotanoshimu-ninben .pc_hidden { display: block; }

#dashiwotanoshimu-ninben .sp_hidden { display: none !important; }

#dashiwotanoshimu-ninben #js_mediaFlag { width: 1px; }

#dashiwotanoshimu-ninben .tategaki { position: relative; width: 100%; height: 100%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

#dashiwotanoshimu-ninben .tategaki .tategaki_inner { display: block; position: absolute; overflow: hidden; top: 0; right: 0; width: 0%; height: 100%; -webkit-transition: 3.0s .2s; transition: 3.0s .2s; }

#dashiwotanoshimu-ninben .tategaki.animation .tategaki_inner { width: 100%; }

#dashiwotanoshimu-ninben .fadeIn { opacity: 0; }

#dashiwotanoshimu-ninben .fadeIn.animation { -webkit-animation: fadeIn 3s .2s both; animation: fadeIn 3s .2s both; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

#dashiwotanoshimu-ninben .slideIn { opacity: 0; }

#dashiwotanoshimu-ninben .slideIn.animation { -webkit-animation: slideIn 3s .2s both; animation: slideIn 3s .2s both; }

@-webkit-keyframes slideIn { 0% { opacity: 0;
    -webkit-transform: translateX(2%);
            transform: translateX(2%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }

@keyframes slideIn { 0% { opacity: 0;
    -webkit-transform: translateX(2%);
            transform: translateX(2%); }
  100% { opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }

#dashiwotanoshimu-ninben .kirari_wrap { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }

#dashiwotanoshimu-ninben .kirari_wrap:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }

#dashiwotanoshimu-ninben .kirari_wrap:before { width: 100%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.4))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%); -webkit-transform: translateX(-100%) skewX(-45deg); transform: translateX(-100%) skewX(-45deg); -webkit-animation: kirari 3s infinite; animation: kirari 3s infinite; }

@-webkit-keyframes kirari { 0% { -webkit-transform: scale(1) translateX(-100%) skewX(-45deg); transform: scale(1) translateX(-100%) skewX(-45deg); }
  10% { -webkit-transform: scale(3) translateX(100%) skewX(-45deg); transform: scale(3) translateX(100%) skewX(-45deg); }
  11% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); }
  20% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); }
  100% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); } }

@keyframes kirari { 0% { -webkit-transform: scale(1) translateX(-100%) skewX(-45deg); transform: scale(1) translateX(-100%) skewX(-45deg); }
  10% { -webkit-transform: scale(3) translateX(100%) skewX(-45deg); transform: scale(3) translateX(100%) skewX(-45deg); }
  11% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); }
  20% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); }
  100% { -webkit-transform: scale(4) translateX(100%) skewX(-45deg); transform: scale(4) translateX(100%) skewX(-45deg); } }

#dashiwotanoshimu-ninben #kv { padding-top: 3.90625%; padding-bottom: 154.6875%; position: relative; font-size: 2.4rem; font-size: 3.75vw; background: -webkit-gradient(linear, left top, right top, from(#f9f6ed), color-stop(50%, #f9f6ed), color-stop(50%, #fff), to(#fff)); background: linear-gradient(90deg, #f9f6ed 0%, #f9f6ed 50%, #fff 50%, #fff 100%); }

#dashiwotanoshimu-ninben #kv img { position: absolute; }

#dashiwotanoshimu-ninben #kv .kv_logo { -webkit-animation: fadeIn 2s .5s both; animation: fadeIn 2s .5s both; }

#dashiwotanoshimu-ninben #kv .kv_copy { -webkit-animation: fadeIn 2s 1.25s both; animation: fadeIn 2s 1.25s both; }

#dashiwotanoshimu-ninben #kv .kv_pkg_date { font-size: 2rem; font-size: 3.125vw; position: absolute; right: 7.85em; bottom: 18.6em; width: 8.4em; height: auto; -webkit-animation: fadeIn 2s 3s both; animation: fadeIn 2s 3s both; }

#dashiwotanoshimu-ninben #kv .kv-misoimg { padding-top: 91.40625%; -webkit-animation: fadeIn 2s 2.00s both; animation: fadeIn 2s 2.00s both; }

#dashiwotanoshimu-ninben h2 { padding: 0px 6.25% 0px 67.1875%; position: absolute; top: 0; right: 0; left: 0; }

#dashiwotanoshimu-ninben h3 { display: inline-block; right: 15.625%; font-size: 3.9rem; font-size: 6.09375vw; line-height: 1.6; }

#dashiwotanoshimu-ninben p { font-size: 2.4rem; font-size: 3.75vw; line-height: 2.1; }

#dashiwotanoshimu-ninben h3, #dashiwotanoshimu-ninben p, #dashiwotanoshimu-ninben .tategaki { height: -webkit-max-content; height: -moz-max-content; height: max-content; }

#dashiwotanoshimu-ninben #about { padding-top: 12.5%; background: -webkit-gradient(linear, left top, right top, from(#f9f6ed), color-stop(50%, #f9f6ed), color-stop(50%, #fff), to(#fff)); background: linear-gradient(90deg, #f9f6ed 0%, #f9f6ed 50%, #fff 50%, #fff 100%); }

#dashiwotanoshimu-ninben #about h3 { padding-right: 15.625%; }

#dashiwotanoshimu-ninben #about p { padding-right: 9.375%; }

#dashiwotanoshimu-ninben #about h2 { position: relative; }

#dashiwotanoshimu-ninben #about .tategaki { margin-top: 7.8125%; padding-bottom: 113.28125%; }

#dashiwotanoshimu-ninben #about .tategaki p { height: 100%; }

#dashiwotanoshimu-ninben #about .about-slide-contents { margin-top: -16.40625%; padding-bottom: 106.25%; position: relative; width: 100%; }

#dashiwotanoshimu-ninben #about .about-slide { width: 100%; position: absolute; padding: 0 6.25%; display: -webkit-box; display: -ms-flexbox; display: flex; }

#dashiwotanoshimu-ninben #about .about-slide div + div { margin-left: 3.125%; }

#dashiwotanoshimu-ninben #about .about-slide.animation .img1 { padding-top: 34.375%; -webkit-animation: fadeIn 3s 1.5s both; animation: fadeIn 3s 1.5s both; }

#dashiwotanoshimu-ninben #about .about-slide.animation .img1 .about-slide-text { padding-top: 74.2857142857%; }

#dashiwotanoshimu-ninben #about .about-slide.animation .img2 { padding-top: 22.65625%; -webkit-animation: fadeIn 3s 1.0s both; animation: fadeIn 3s 1.0s both; }

#dashiwotanoshimu-ninben #about .about-slide.animation .img2 .about-slide-text { padding-top: 37.1428571429%; }

#dashiwotanoshimu-ninben #about .about-slide.animation .img3 { padding-top: 11.71875%; -webkit-animation: fadeIn 3s .5s both; animation: fadeIn 3s .5s both; }

#dashiwotanoshimu-ninben #about .about-slide-text { position: absolute; left: 0; top: 0; }

#dashiwotanoshimu-ninben #about .about-slide-img { -webkit-box-shadow: 40px 40px 60px rgba(107, 83, 22, 0.35); box-shadow: 40px 40px 60px rgba(107, 83, 22, 0.35); }

#dashiwotanoshimu-ninben #about .img1, #dashiwotanoshimu-ninben #about .img2, #dashiwotanoshimu-ninben #about .img3 { position: relative; width: 33%; opacity: 0; }

#dashiwotanoshimu-ninben #katsuobushi { padding-top: 10.9375%; margin-top: 10.9375%; position: relative; }

#dashiwotanoshimu-ninben #katsuobushi h2 { z-index: 2; }

#dashiwotanoshimu-ninben #katsuobushi .tategaki { padding-bottom: 185.9375%; background: url(../images/dashiwotanoshimu-ninben/katsuobushi-bgImg.png) no-repeat; background-size: cover; color: #fff; }

#dashiwotanoshimu-ninben #katsuobushi p { font-size: 2.4rem; font-size: 3.75vw; padding-right: 3.125em; height: 100%; }

#dashiwotanoshimu-ninben #katsuobushi .tategaki_inner { font-size: 2rem; font-size: 3.125vw; padding-top: 7.5em; padding-right: 3.75em; }

#dashiwotanoshimu-ninben #ninben { padding: 9.375% 0 21.875% 0; position: relative; background: #050028; color: #fff; }

#dashiwotanoshimu-ninben #ninben h2 { padding: 9.375% 67.1875% 0px 6.25%; z-index: 2; }

#dashiwotanoshimu-ninben #ninben .ninben-img { padding-top: 10.9375%; position: relative; }

#dashiwotanoshimu-ninben #ninben .sub { padding-top: 50%; position: absolute; top: 0; left: 0; opacity: 0; }

#dashiwotanoshimu-ninben #ninben .main { opacity: 0; }

#dashiwotanoshimu-ninben #ninben .animation .main { -webkit-animation: fadeIn 2s .25s both; animation: fadeIn 2s .25s both; }

#dashiwotanoshimu-ninben #ninben .animation .sub { -webkit-animation: fadeIn 2s .8s both; animation: fadeIn 2s .8s both; }

#dashiwotanoshimu-ninben #ninben .ninben-text { padding: 38.28125% 6.25% 0px 6.25%; }

#dashiwotanoshimu-ninben #ninben p { padding-top: 7.03125%; line-height: 2; }

#dashiwotanoshimu-ninben #another { background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, #fff), color-stop(50%, #f9f6ed), to(#f9f6ed)); background: linear-gradient(90deg, #fff 0%, #fff 50%, #f9f6ed 50%, #f9f6ed 100%); }

#dashiwotanoshimu-ninben #another h3 span { border-right: 6px solid #ae923c; }

#dashiwotanoshimu-ninben #another .how-to-eat { padding-top: 15.625%; position: relative; }

#dashiwotanoshimu-ninben #another .how-to-eat .tategaki { padding-bottom: 60.9375%; z-index: 2; }

#dashiwotanoshimu-ninben #another .how-to-eat h3 { padding-right: 15.3846153846%; padding-left: 14.7058823529%; }

#dashiwotanoshimu-ninben #another .how-to-eat p { padding-top: 14.7058823529%; height: 100%; }

#dashiwotanoshimu-ninben #another .how-to-eat .misoimg { padding-bottom: 79.6875%; position: relative; }

#dashiwotanoshimu-ninben #another .how-to-eat .misoimg img { margin-top: -31.3725490196%; position: absolute; right: 0; top: 0; opacity: 0; }

#dashiwotanoshimu-ninben #another .how-to-eat .animation img { -webkit-animation: fadeIn 3.0s .5s both; animation: fadeIn 3.0s .5s both; }

#dashiwotanoshimu-ninben #another .product_information-contents { position: relative; }

#dashiwotanoshimu-ninben #another .product_information-contents .tategaki { padding-bottom: 52.34375%; position: relative; }

#dashiwotanoshimu-ninben #another .product_information-contents h3 { padding-right: 17.9104477612%; }

#dashiwotanoshimu-ninben #another .product_information-contents .info_pkg { position: absolute; right: 0; top: 0; opacity: 0; }

#dashiwotanoshimu-ninben #another .product_information-contents .animation img { -webkit-animation: fadeIn 3.0s .5s both; animation: fadeIn 3.0s .5s both; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information { padding: 6.25% 6.25% 18.75% 6.25%; font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information li { padding: 3.90625% 0px 4.6875%; border-top: 1px solid #b8b7bc; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information li:last-child { border-bottom: 1px solid #b8b7bc; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information h4 { padding-left: 2.5%; font-size: 2.4rem; font-size: 3.75vw; font-weight: bold; border-left: 8px solid #454545; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information h4 span { font-weight: normal; }

#dashiwotanoshimu-ninben #another .product_information-contents .product_information p { padding-top: 2.34375%; font-size: 2.4rem; font-size: 3.75vw; }

#dashiwotanoshimu-ninben .pkg_wrap { position: relative; width: 100%; }

#dashiwotanoshimu-ninben .pkg_wrap .info_pkg_date { font-size: 2rem; font-size: 3.125vw; position: absolute; top: 10.55em; left: 5.3em; width: 6em; height: auto; z-index: 100; }

/* pc
-------------------------------------------------- */
.spOnly, .br999, .br640 { display: none; }

/* pc-small
-------------------------------------------------- */
@media only screen and (max-width: 999px) { .br999 { display: block; } }

/* tablet
-------------------------------------------------- */
/* sp-side
-------------------------------------------------- */
@media only screen and (max-width: 640px) { html { font-size: 62.5%; } }

/* iPhone5-side
-------------------------------------------------- */
@media only screen and (max-width: 568px) { html { font-size: 55.46875%; } }

/* android-w
-------------------------------------------------- */
@media only screen and (max-width: 540px) { html { font-size: 52.734375%; } }

/* android-m
-------------------------------------------------- */
@media only screen and (max-width: 480px) { html { font-size: 46.875%; } }

/* iphone6plus
-------------------------------------------------- */
@media only screen and (max-width: 414px) { html { font-size: 40.4296875%; } }

/* iphone6
-------------------------------------------------- */
@media only screen and (max-width: 375px) { html { font-size: 36.62109375%; } }

/* android
-------------------------------------------------- */
@media only screen and (max-width: 360px) { html { font-size: 35.15625%; } }

/* iphone5, android-s
-------------------------------------------------- */
@media only screen and (max-width: 320px) { html { font-size: 31.25%; } }