@charset "euc-jp"; @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap'); /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } body { background: #ffffff; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 16px; color: #000000; word-break: break-word; } a { color: #000000; } a:active, a:focus { text-decoration: none; } a:hover, a:hover h3 > span { color: #cccccc!important; text-decoration: none; } a:hover img { opacity: 50%!important; } h2, h3, h4 { font-family: "Shippori Mincho", serif; font-weight: 700; } .is-serif { font-family: "Shippori Mincho", serif; } .btn { border-radius: 0; } .icon_new { display: inline-block!important; max-height: 1em; margin: 0 4px 4px 0; vertical-align: text-bottom; } ul, ol, form, p { margin: 0; } /* * layout */ #wrapper { max-width: 100%; } .container { max-width: 1080px; width: 100%; margin: 0 auto; padding: 0 40px } main.container { margin: 1.875rem auto 0; border-bottom: 1px solid #707070; } /* header */ #header .inner { position: relative; display: flex; justify-content: space-between; flex-direction: row; align-items: center; padding: 0 12px; } #header .headline { position: relative; padding: 1.5rem 0; } #header .headline > *, #header nav { display: inline-block; vertical-align: middle; font-size: 0; } #header .headline h1 { position: absolute; top: 0; left: 0; padding: 0.75em; font-size: 0.75rem; font-weight: normal; line-height: 1; } #header .headline img { display: block; width: 114px; height: 87px; margin: 0 auto; } #header .headline p { width: 240px; } #header .tagline p { margin-left: 17px; font-size: calc(14px + 3 * (100vw - 320px) / 1046); font-weight: 500; } #header .tagline span { display: block; width: 240px; letter-spacing: 0; word-break: keep-all; } #header .tel { display: block; width: max-content; padding: 1.5rem 0; text-align: center; font-size: 0.9375rem; font-weight: 700; line-height: 1; } #header .tel a { display: block; margin: 0.5rem; font-size: 2.2em; font-weight: 700; line-height: 1.4; } #header .tel a::before, #header .tel a::after { content: ""; position: relative; top: 2px; display: block; width: 100%; height: 1px; background-color: #707070; } #header .right-container { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } #header .buttons li { display: inline-block; } #header .buttons li + li { margin-left: 0.75rem; } #header .buttons li a { display: inline-block; padding: 15px 0 10px; width: 90px; height: 90px; border-radius: 9px; text-align: center; font-size: 0.75rem; font-weight: 700; line-height: 1; } #header .buttons .cart > span.product_num { position: absolute; top: -8px; right: -14px; width: 21px; height: 21px; line-height: 19px; background-color: #fff; border: 1.5px solid #fff; border-radius: 99px; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 10px; color: #000000; } @media screen and (min-width: 1200px) { #header .tagline p { font-size: 17px; } } @media screen and ( min-width: 1300px ) { #header .inner { justify-content: space-around; padding: 0; } #header .headline { padding: 1.726rem 0; } #header .headline p { margin: 0px 1em; } #header .tel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #header .buttons { padding-right: 20px; } /* for safari */ _::-webkit-full-page-media, _:future, :root #header .headline { padding-top: 1.75rem; padding-right: 9px; padding-bottom: 1.7rem; } _::-webkit-full-page-media, _:future, :root #header .headline p { margin-right: 0; margin-left: 0.93em; } _::-webkit-full-page-media, _:future, :root #header .tagline span[lang=ja] { margin-left: 0; } } #global-navigation { width: 1000px; margin: 0 auto; text-align: center; font-weight: 700; } #global-navigation ul { position: relative; height: 30px; list-style-type: none; font-size: 0; white-space: nowrap; } #global-navigation li { display: inline-block; width: 25%; font-size: 0; } #global-navigation li + li { border-left: 1px solid #B7B7B7; } #global-navigation li > a { display: block; text-align: center; font-size: 1.125rem; line-height: 30px; } #global-navigation li > a:hover > span:not(.submenu span) { color: #000000; border-bottom: 2px solid #ee4b13; } #global-navigation .submenu { position: absolute; top: 3.5rem; left: 0; display: none; width: 1000px; height: 200px; padding: 15px; list-style-type: none; background: #edeae4; border: none; border-radius: 15px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); content-visibility: auto; text-align: left; white-space: normal; z-index: 50; } #global-navigation .submenu.is-open { display: flex; flex-direction: row; flex-wrap: wrap; grid-gap: 10px 15px; z-index: 55; } #global-navigation .submenu li { display: inline-block; width: 180px; border: none; text-align: left; font-size: 0; } #global-navigation .submenu a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; word-break: break-word; } html:not([lang=ja]) #global-navigation .submenu a { font-size: 1rem; line-height: 1.25; } #global-navigation .submenu span { display: inline-block; min-width: 3rem; text-align: left; margin-left: 10px; } #global-navigation .submenu img { border-radius: 10px; border: 1px solid #B7B7B7; } /* search box */ .search-box { position: relative; margin-bottom: 20px; } .search-box::after { display: block; margin-top: 4px; font-size: 10px; font-weight: bold; color: #707070; line-height: 1; } .search-box[lang=ja]::after { content: "ひとふり昆布、天上昆布、上松葉、かみかみ昆布　etc."; } .search-box[lang=en]::after { content: "Dashi kombu, Hitofuri,Tsukudama, others"; } .search-box[lang=fr]::after { content: "Varech Dashi, Hitofuri, Tsukudama, autres"; } .search-box input { width: 100%; height: 35px; padding: 10px 30px 10px 10px; border: 1px solid #707070; border-radius: 0; } .search-box input:placeholder { font-size: 15px; color: #B7B7B7; } .search-box button { -webkit-appearance: none; appearance: none; position: absolute; top: 7px; right: 7px; display: block; border: none; background: none; } /* sidebar */ #sidebar { width: calc(100% - (640px + 80px)); margin-right: 80px; padding-bottom: 5rem; float: left; } #sidebar .module + .module:not(form) { margin-top: 45px; } #sidebar .module h2 { padding: 15px 0 14px; border-top: 3px solid #000000; border-bottom: 3px solid #000000; text-align: center; font-family: inherit; font-size: 1rem; line-height: 1; } #sidebar .module ul { list-style: none; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 18px; } #sidebar .module li { border-bottom: 1px solid #707070; line-height: 1; } #sidebar .module li > a { display: block; padding: 14px 0 13px; } #sidebar .module .subcategory { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 14px; } #sidebar .module .subcategory li:not(.subcategory li:last-child) { border-color: #edeae4; } #sidebar .module .subcategory li > a { padding: 10px 10px 10px 1em; } #sidebar .module.banner a + a { display: block; width: fit-content; margin: 5px auto 0; } #sidebar .category-list { margin-top: 30px; } .more-prd span { cursor: pointer; } /* breadcrumb */ ol#breadcrumb { display: flex; flex-direction: row; flex-wrap: wrap; } @-moz-document url-prefix() { .menu{ word-spacing: 0.1em; } } ol#breadcrumb > li { display: inline-block; font-size: 0.75rem; line-height: 1; } ol#breadcrumb > li:last-child { font-weight: bold; } ol#breadcrumb a { padding-right: 0.5em; color: #707070; } ol#breadcrumb li + li a::before { content: "＞"; display: inline-block; padding-right: 0.5em; font-weight: normal; } /* contents */ #contents { max-width: 640px; width: 100%; float: right; } .recommend-list, .seller-list, .together-list { margin-top: 40px; } .sub-list { padding-bottom: 60px; font-size: 0; } .sub-list__unit { display: inline-block; vertical-align: top; padding: 0 5px 20px; width: 32.3%; font-size: 14px; } .sub-list__img { padding-bottom: 10px; } .sub-list__link { display: block; } .sub-list__name { display: block; } /* suggest */ .suggest { margin-top: 5rem; } .suggest > .module { padding: 5rem 0 4.5rem; border-top: 1px solid #707070; overflow: hidden; } .suggest h2 { margin: 0 0 29px; text-align: center; font-family: "Shippori Mincho", serif; font-size: 18px; font-weight: 600; line-height: 1; line-height: 1; } .suggest li { margin-right: 1em; } .suggest h3 { margin: 1em 0 0.5em; font-size: 1rem; font-weight: 500; line-height: 1.5; } .suggest h3.has-icon.new::before { content: url('https://www.tsuku-shin.jp/colorme/icon/new.svg'); display: inline-block; padding-right: 0.25em; vertical-align: -1px; } .suggest h3.has-icon.restock::before { content: url('https://www.tsuku-shin.jp/colorme/icon/restock.svg'); display: inline-block; padding-right: 0.25em; vertical-align: -1px; } .suggest h3 > span { display: block; margin-top: 0.8em; color: #505050; font-size: 15px; line-height: 1.26; } .suggest p { font-size: 1rem; line-height: 1.875; } .suggest .slider_container { max-width: 96.5%; margin-left: auto; } .suggest .bx-wrapper { max-width: none!important; } .suggest .bx-wrapper > .bx-viewport { left: 0; height: 100%!important; border: none; box-shadow: none; } .suggest .bx-wrapper .bx-next, .suggest .bx-wrapper .bx-prev { position: absolute; top: 5rem; display: block; width: 0.5em; height: 0.5em; border-top: solid 1px #000000; border-right: solid 1px #000000; background: none; } .suggest .bx-wrapper .bx-next { right: 2px; transform: rotate(45deg); } .suggest .bx-wrapper .bx-prev { left: -15px; transform: rotate(-135deg); } .suggest .bx-wrapper .bx-controls-direction a.disabled { display: block; } /* guide */ #shopkeeper { padding: 3rem 0 3.5rem; } #shopkeeper > .inner { column-count: 2; column-gap: 4rem; column-rule: 1px solid #B7B7B7; } #shopkeeper h2 { position: relative; padding: 0.66em 0; background-color: #000000; color: #fff; text-align: center; font-size: 1.125rem; font-weight: 600; line-height: 1; } #shopkeeper h2::before { content: ""; position: absolute; top: 0; bottom: 0; display: inline-block; margin: auto; background-repeat: no-repeat; background-size: contain; vertical-align: -6px; transform: translateX(calc(-100% - 0.5rem)); } #shopkeeper h2[data-icon=truck]::before { width: 29px; height: 22px; background-image: url('https://www.tsuku-shin.jp/colorme/icon/truck_beige.svg'); vertical-align: -4px; } #shopkeeper h2[data-icon=return]::before { width: 26px; height: 26px; background-image: url('https://www.tsuku-shin.jp/colorme/icon/return_beige.svg'); } #shopkeeper h2[data-icon=en]::before { width: 26px; height: 26px; background-image: url('https://www.tsuku-shin.jp/colorme/icon/en_beige.svg'); } #shopkeeper a[target=_blank] { font-weight: bold; color: #ee4b13; } #shopkeeper a[target=_blank]::before { content: ""; position: relative; left: -3px; bottom: 2px; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 3px; border-top: 1px solid rgb(238, 75, 19); border-right: 1px solid rgb(238, 75, 19); background: none; transform: rotate(45deg); } #shopkeeper img { margin: 1rem 0; } #shopkeeper dl { page-break-inside: avoid; break-inside: avoid; } #shopkeeper dl h4 { font-family: inherit; } #shopkeeper dt { margin-top: 1.3rem; font-family: "Shippori Mincho", serif; font-size: 1rem; } #shopkeeper dt::before { content: "■"; color: #ee4b13; } #shopkeeper dl.payment dt:not(dt:first-child) { margin-top: 2.5rem; } #shopkeeper dd { margin: 0.5rem 0; font-size: 0.875rem; line-height: 2; } #shopkeeper dd br { display: none; } #shopkeeper dd small { display: inline-block; margin-top: 0.3em; font-size: 0.8125rem; line-height: 1.69; } #shopkeeper table { max-width: 100%; width: 100%; margin: 0.75rem 0; border: 1px solid #edeae4; border-collapse: collapse; } #shopkeeper th { padding: 1rem; background-color: #edeae4; font-weight: normal; } #shopkeeper td { text-align: center; } #shopkeeper table[data-content=postage-list] { margin-bottom: 4em; } #shopkeeper table[data-content=postage-list] th { width: calc(100% - 6.8em); text-align: left; line-break: strict; } #shopkeeper table[data-content=postage-list] tr + tr th { border-top: 1px solid #fff; } #shopkeeper table[data-content=postage-list] td { width: 6.8em; vertical-align: middle; text-align: center; line-height: 1.875; word-break: keep-all; } #shopkeeper table[data-content=postage-list] tr + tr td { border-top: 1px solid #edeae4; } #shopkeeper table[data-content=cash-on-delivery] { margin-bottom: 0; } #shopkeeper table[data-content=cash-on-delivery] th { width: 50%; } #shopkeeper table[data-content=cash-on-delivery] tr > th:first-child { border-right: 1px solid #fff; } #shopkeeper table[data-content=cash-on-delivery] tr > td:first-child { border-right: 1px solid #edeae4; } #shopkeeper table[data-content=cash-on-delivery] tbody > tr { border-bottom: 1px solid #edeae4; } #shopkeeper table[data-content=cash-on-delivery] td { padding: 1em; } #shopkeeper .mb_only { display: none; } /* calender */ .module.calendar h2 { position: relative; margin: 0 0 1rem; font-size: 1.125rem; } .module.calendar h2[data-icon=calendar]::before { content: ""; display: inline-block; width: 22px; height: 24px; margin-right: 0.5rem; background-image: url('https://www.tsuku-shin.jp/colorme/icon/calendar.svg'); background-repeat: no-repeat; background-size: contain; vertical-align: -5px; } .module.calendar h2[data-icon=calendar]::after { content: "※赤い丸印の部分が休業日となります"; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 14px; font-weight: normal; vertical-align: 1px; line-height: 1; } .module.calendar .tbl_calendar { position: relative; width: 300px; padding-top: 36px; background: #fff; border-collapse: separate; border-spacing: 11px 15px; float: left; text-align: center; font-family: Cardo; font-size: 0.875rem; } table.tbl_calendar::after { content: ""; position: absolute; right: 50%; top: 87px; left: 50%; display: block; width: 260px; height: 1px; background: #707070; transform: translateX(-50%); } .module.calendar .tbl_calendar + .tbl_calendar { margin: 0 3.5rem 0 2rem; } .module.calendar .tbl_calendar caption { position: absolute; top: 36px; right: 0; left: 0; font-family: "Shippori Mincho", serif; line-height: 0.7; } .module.calendar .tbl_calendar tbody { display: block; width: 260px; margin: 3px 2% -3px auto; } .tbl_calendar tr:first-child { position: relative; } .module.calendar .tbl_calendar th { padding-bottom: 5px; font-family: "Shippori Mincho", serif; font-weight: 500; line-height: 1; } .module.calendar .tbl_calendar td { width: 22px; height: 22px; border: none; border-radius: 50%; line-height: 22px; } .aword { display: inline-block; width: 257px; margin-top: 0.875rem; padding-left: 3.75rem; border-left: 1px solid #fff; } .aword p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.64; } /* ranking */ .ranking { background: #edeae4; } .ranking h2 { position: relative; display: block; width: fit-content; margin: 0 auto; padding: 0.83em 1.66em; background: #000000; border-right: 8px solid #edeae4; border-left: 8px solid #edeae4; color: #fff; line-height: 1; text-align: center; z-index: 30; } .ranking h2::before, .ranking h2::after { content: ""; position: absolute; top: 0; display: block; width: 3px; height: 100%; background-image: url('https://www.tsuku-shin.jp/colorme/img/dashed.svg'); background-repeat: no-repeat; background-size: contain; opacity: 0.75; } .ranking h2::before { left: 11px; } .ranking h2::after { right: 11px; } .ranking .is-circle { border-radius: 50%; border: 1px solid #707070; } .ranking .img { position: relative; display: block; margin: 0 auto; } .ranking li a img { display: block; width: 100%; height: auto; } .ranking span.rank-number { position: absolute; top: 0; left: 0; } #sidebar .ranking { margin-top: 5rem; padding: 0 1.25rem 0.8rem; } #sidebar .ranking h2 { margin-bottom: 0.5rem; font-size: 1.125rem; } #sidebar .ranking li { padding: 1.5rem 0; } #sidebar .ranking li + li { border-top: 1px solid #B7B7B7; } #sidebar .ranking .img { width: 128px; height: 128px; } #sidebar .ranking span.rank-number { width: 27px; } #sidebar .ranking h3 { margin-top: 1rem; line-height: 1.25; } #sidebar .ranking h3 > span { display: block; margin-top: 0.25em; font-size: 0.875rem; font-weight: normal; color: #505050; line-height: 1.2; } #sidebar .ranking .product-list__prices { margin-top: 0.9em; font-weight: bold; line-height: 1; } /* tel */ #tel { width: 100%; text-align: center; background: #000000; padding: 3.94rem 0; font-weight: 700; } #tel address { margin: 0; } #tel a { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; color: #fff; } #tel .hyphen { content: ""; display: inline-flex; width: 0.5rem; margin: 0 0.25rem; border-bottom: 2px solid #fff; transform: translate(0, -0.6rem); } #tel .tel-info { font-size: 1.3125rem; } #tel .number { display: inline-block; vertical-align: -3.5px; font-size: 2rem; } /* footer */ #footer a { color: #fff; } #footer a.is-rounded { display: block; width: 280px; height: 40px; padding: 0.5rem; border-radius: 99px; text-align: center; font-weight: 700; font-size: 1.125rem; line-height: 1; } #footer a.is-rounded + .is-rounded { margin-top: 1rem; } #footer .links ul { list-style: none; } #footer .links.internal .secondary > li::before { content: "＞"; padding-right: 0.5em; } #footer ul.sns-list li, #footer div.links.internal > * { display: inline-block; } #footer ul.sns-list li + li { margin-left: 1.5rem; } #footer .links.internal .primary li { border-bottom: 2px solid #fff; } #footer .links.internal .primary li > a { display: block; padding: 0 0 0.5em 0.5em; } #footer .links.internal .primary li > a::before { content: ""; display: inline-block; margin-right: 0.5rem; background-size: contain; background-repeat: no-repeat; } #footer .links.internal .primary a > span { white-space: nowrap; } #footer .links.internal .primary a[data-icon=person]::before { width: 19px; height: 20px; background-image: url('https://www.tsuku-shin.jp/colorme/icon/person_white.svg'); } #footer .links.internal .primary a[data-icon=cart]::before { width: 24px; height: 21px; margin-left: -5px; background-image: url('https://www.tsuku-shin.jp/colorme/icon/shopping-cart_white.svg'); } #footer .links.internal .primary li + li { margin-top: 1rem; } #footer .links.internal .primary .is-square { display: block; margin-top: 1.5rem; padding: 0.75rem; border: 4px double #fff; text-align: center; background: #000000; } .languages-menu li { display: inline-block; padding: 0 1.5rem; font-size: 0.875rem; } .languages-menu li:first-child { padding-left: 0; } .languages-menu li + li { border-left: 1px solid #000000; } .languages-menu input[type=radio]{ display: none; } .languages-menu label { margin: 0; font-weight: bold; line-height: 1; } /* Module */ .section__title-h2 { margin: 0; padding-bottom: 20px; border-bottom: 3px solid #707070; font-size: 16px; background: url(https://img.shop-pro.jp/tmpl_img/81/spacer.png) no-repeat; } .btn-primary { background: #ee4b13; border: none; color: #fff; } .btn-primary:hover { background: #666666; color: #fff; opacity: 0.8; -moz-opacity: 0.8; } .btn__addcart, .btn__quick, .btn__soldout { padding: 20px 0 22px 0; } .btn__quick i, .btn__soldout i { margin-right: 10px; } .btn__addcart span, .btn__quick span, .btn__soldout span { vertical-align: middle; } .btn__soldout.disabled, .btn__soldout[disabled] { height: 60px; padding: 1rem 0 1.3rem; background-color: #707070; border: none; color: rgb(255, 255, 255); font-family: "Shippori Mincho", serif; font-size: 1.125rem; font-weight: 700; line-height: 1; opacity: 1; } .txt--sm { font-size: 10px; } .txt--md { font-size: 12px; } .txt--lg { font-size: 16px; } .txt--c { text-align: center; } .txt--r { text-align: right; } .txt--red { color: #ff0000; } .txt--gray { color: #999; } .border--none { border: none; } .mar-t--20 { margin-top: 20px; } .mar-b--20 { margin-bottom: 20px; } .width--110 { width: 110px; } .width--160 { width: 160px; } .hide { display: none; } /* textarea input */ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { outline: none; } *[lang]:not(html) { opacity: 0; } *[lang=en], *[lang=fr] { word-break: break-word; } #page-top span { display: block; color: #f04b14; line-height: 1.5; } @supports (-webkit-touch-callout:none) { @media screen and (max-width: 1000px) { #wrapper { max-width: none; width: 1000px; } } }