@charset "euc-jp"; @import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&display=swap"); /*------------------------------------------- ÊÑ¿ô -------------------------------------------*/ /* ¥«¥é¡¼¥Ñ¥ì¥Ã¥È */ :root { --page_bgcolor: #ffffff; --page_bgimg : ; --font_color : #000000; --link_normal: #000000; --link_hover: #cccccc; --key_color: #ee4b13; --sub_key_color: #edeae4; --cart_btn_color: #ee4b13; --cart_btn_color_hover: #666666; --bordercolor_primary: #000000; --bordercolor_secondary: #707070; } /* ¥Õ¥©¥ó¥È */ :root { --font-gothic: "Þâ¥´¥·¥Ã¥¯ÂÎ", YuGothic, "Þâ¥´¥·¥Ã¥¯ Medium", "Yu Gothic Medium", "Þâ¥´¥·¥Ã¥¯", "Yu Gothic", sans-serif; --font-mincho: "Shippori Mincho", serif; } /*------------------------------------------- ¥ê¥»¥Ã¥ÈCSS -------------------------------------------*/ /* ** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; user-select: auto; -moz-user-select: auto; -ms-user-select: auto; 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; line-break: after-white-space; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /*------------------------------------------- ¶¦ÄÌ -------------------------------------------*/ body { display: block; background: var(--page_bgcolor); font-family: var(--font-gothic); font-size: 16px; color: var(--font_color); line-height: 1.7; } a { text-decoration: none; color: var(--link_normal); -webkit-tap-highlight-color: rgba(255, 0, 0, 0); &:active { background: rgba(0, 0, 0, 0.1); } &:active, &:focus { text-decoration: none; } } a:hover { color: var(--link_hover) !important; text-decoration: none; h3 > span { color: var(--link_hover) !important; text-decoration: none; } img { opacity: 50% !important; } } h2, h3, h4 { text-box-trim: trim-both; font-family: var(--font-mincho); font-weight: 700; } b { font-weight: 700; } ul, ol, form, p { margin: 0; } .is-serif { font-family: var(--font-mincho); } .icon_new { display: inline-block !important; max-height: 1em; margin: 0 4px 4px 0; @media screen and (min-width: 1100px) { margin: 0 2px -1px 0 !important; vertical-align: text-bottom; } } .txt--red { color: #ff0000; } :where(.sold-out, .discount-rate) { color: #ff0000; } @media screen and (max-width: 1099px) { p { line-height: 1.2rem; margin: 0; } img { max-width: 100%; height: auto; } input { border: none; border-radius: 0; font-size: 16px; line-height: normal; } input::-webkit-input-placeholder { font-size: 0.75rem; } input::placeholder, input::-webkit-input-placeholder { font-size: 0.75rem; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } } /*------------------------------------------- É½¼¨¾ò·ï -------------------------------------------*/ *[lang]:not(html) { opacity: 0; } *[lang="en"], *[lang="fr"] { word-break: break-word; } :is(.mobile-only) { @media screen and (max-width: 999px) { display: block; } @media screen and (min-width: 1000px) { display: none !important; } } :is(.pc-only) { @media screen and (max-width: 999px) { display: none !important; } @media screen and (min-width: 1000px) { display: block; } } /*------------------------------------------- ¥ì¥¤¥¢¥¦¥È -------------------------------------------*/ #wrapper { position: relative; max-width: 100%; } .is-fluid { max-width: 100%; @media screen and (max-width: 999px) { padding-right: 24px; padding-left: 24px; } @media screen and (min-width: 1000px) { width: 1000px; margin-inline: auto; } } main { position: relative; max-width: 100%; overflow: hidden; @media screen and (min-width: 1000px) { display: flex; flex-direction: row; flex-wrap: nowrap; grid-gap: 80px; width: 1000px; margin-top: 30px; margin-inline: auto; } } #contents { max-width: 640px; width: 100%; margin-inline: auto; } .recommend-list, .seller-list, .together-list { margin-top: 40px; } /*------------------------------------------- ¥Ø¥Ã¥À -------------------------------------------*/ #header { position: relative; width: 100%; background: var(--page_bgcolor); z-index: 100; @media screen and (min-width: 1100px) { max-width: calc(3% + 1100px); height: 170px; margin: 0 auto; padding: 0 3%; } .shop-name { @media screen and (max-width: 1099px) { display: flex; justify-content: center; height: 25px; padding: 0.5rem; background-color: #edeae4; } @media screen and (min-width: 1100px) { position: absolute; } } h1 { margin: 0; font-size: 10px; font-weight: normal; line-height: 1; @media screen and (max-width: 1099px) { transform: scale(0.9); } @media screen and (min-width: 1100px) { padding: 9px; font-size: 12px; } } .inner { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; @media screen and (max-width: 1099px) { padding: 12px 3%; font-size: 0; > * { display: inline-block; vertical-align: middle; } } @media screen and (min-width: 1100px) { flex-wrap: nowrap; height: inherit; text-align: center; } } nav { display: inline-block; vertical-align: middle; font-size: 0; } } #header .headline { position: relative; display: flex; align-items: center; @media screen and (max-width: 1099px) { grid-gap: 11px; width: 100%; } @media screen and (min-width: 1100px) { grid-gap: 12px; flex-direction: row; flex-wrap: nowrap; justify-content: center; } img { display: block; width: 117px; height: auto; margin: 0 auto; } p { font-size: 10.5px; line-height: 1.57; @media screen and (min-width: 1100px) { display: inline-block; text-align: left; font-size: 15px; letter-spacing: 0; line-height: 1.66; word-break: keep-all; } span { display: block; width: 240px; letter-spacing: 0; word-break: keep-all; } } } #header .tel { position: absolute; inset: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: auto; text-align: center; font-weight: 700; line-height: 1; a { display: inline-flex; flex-direction: column; justify-content: space-between; height: 35px; margin: 5px 0 7px; font-size: 27px; font-weight: 700; @media screen and (min-width: 1100px) { height: 47px; font-size: 33px; } &::before, &::after { content: ""; position: relative; top: 0; display: block; width: 100%; height: 1px; background-color: var(--bordercolor_secondary); } } span[glot-model="order-by-phone"] { font-size: 12px; @media screen and (min-width: 1100px) { font-size: 15px; } } span[glot-model="support-hours"] { font-size: 11px; @media screen and (min-width: 1100px) { font-size: 13px; } } @media screen and (max-width: 374px) { transform: scale(0.8); & + a { transform: scale(0.8); } } } #header .utilities { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; grid-gap: 12px; height: 90px; dl.free-shiping { display: inline-block; width: 120px; margin: 0; padding: 5px; border: 1px solid #707070; vertical-align: middle; text-align: center; dt { padding: 6px; border-bottom: 4px double #707070; font-size: 21px; font-weight: 700; } dd { margin: 5px 0 1px; line-height: 1.2; font-size: 10px; } } .cart { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto; padding: 0; } } #header a[role="button"] { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 4px; height: 100%; aspect-ratio: 1/1; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1; .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: var(--font-gothic); font-size: 10px; color: var(--font_color); } } @media screen and (max-width: 1099px) { html[lang="ja"] #header .headline { width: 21%; p { display: none; } } html:not([lang="ja"]) #header .headline a { width: 21%; } html:not([lang="ja"]) #header .tel { display: none !important; & + a { display: none !important; } } } /*------------------------------------------- ¥°¥í¡¼¥Ð¥ë¥Ê¥Ó¥²¡¼¥·¥ç¥ó -------------------------------------------*/ @media screen and (max-width: 999px) { #global-navigation { position: -webkit-sticky; position: sticky; top: 0; left: 0; font-size: 0; z-index: 900; } #global-navigation .mobile-only { display: block; height: 55px; padding: 7px 0; background: #fff; box-shadow: 0px 3px 6px rgb(0 0 0 / 15%); line-height: 1; a { position: relative; display: block; color: var(--font_color); font-size: 10px; font-weight: bold; > * { display: block; margin: 0 auto; } &:active { background: rgba(255, 255, 255, 0.1); } } img { width: 44px; height: 21px; margin-bottom: 5px; -o-object-fit: contain; object-fit: contain; } li { display: inline-block; width: 20%; height: 40px; padding: 3px 0; vertical-align: bottom; text-align: center; + li { border-left: 1px solid #edeae4; } } .cart { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0; } span.product_num { position: absolute; top: -6px; right: -6px; width: 21px; height: 21px; line-height: 19px; background-color: #ee4b13; border: 1.5px solid #fff; border-radius: 99px; font-size: 10px; color: #fff; } } } @media screen and (min-width: 1000px) { #global-navigation .pc-only { position: relative; display: grid; grid-auto-flow: column; justify-items: center; max-width: 1000px; margin: 0 auto; border-right: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7; text-align: center; font-weight: 700; ul { height: 30px; list-style-type: none; font-size: 0; white-space: nowrap; } li { width: 100%; + li { border-left: 1px solid #b7b7b7; } a { display: block; text-align: center; font-size: 18px; line-height: 30px; } a:hover span { color: var(--font_color); border-bottom: 2px solid var(--key_color); } } } #global-navigation .pc-only .submenu { position: absolute; top: 54px; left: 0; display: flex; flex-direction: row; flex-wrap: wrap; grid-gap: 10px 15px; width: 1000px; height: auto; padding: 15px; list-style-type: none; background: var(--sub_key_color); border: none; border-radius: 15px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); text-align: left; white-space: normal; content-visibility: auto; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; z-index: 50; li { display: inline-block; width: 180px; height: 80px; border: none; text-align: left; font-size: 0; } a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; word-break: break-word; } span { display: inline-block; text-align: left; margin-left: 10px; } img { border-radius: 10px; border: 1px solid #b7b7b7; } &.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } } } html:not([lang="ja"]) #global-navigation .submenu a { font-size: 16px; line-height: 1.25; } /*------------------------------------------- ¥µ¥¤¥É¥Ð¡¼¡ÊPC¡Ë¡¿¥É¥í¥ï¡¼¥á¥Ë¥å¡¼¡Ê¥â¥Ð¥¤¥ë¡Ë -------------------------------------------*/ #site-menu { width: 280px; padding-bottom: 80px; @media screen and (max-width: 999px) { position: fixed; top: 55px; right: 0; display: flex; flex-direction: column; flex-wrap: nowrap; grid-gap: 10px; width: 240px; height: calc(100vh - 55px); padding: 0 20px; background: #fff; border-left: 2px solid #dbdbdb; box-shadow: rgb(0 0 0 / 16%) -3px 0px 6px; transition-property: transform; transform: translateX(100%); transition-duration: 0.2s; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll; z-index: 800; &.is-open { transform: translateX(0); } .close-menu { position: relative; margin: 0 -20px; padding: 10px 0; background-color: var(--font_color); text-align: center; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; &::before { content: ""; position: absolute; top: 6px; right: 7px; display: block; width: 18px; height: 18px; background-image: url("https://www.tsuku-shin.jp/colorme/icon/close.svg"); background-size: contain; background-repeat: no-repeat; } &:last-child { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } } @media screen and (min-width: 1000px) { > *:not(form) { margin-top: 45px; } } a { font-family: var(--font-mincho); } h2 { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 22px; border-top: 2.5px solid var(--font_color); border-bottom: 2.5px solid var(--font_color); text-align: center; font-family: var(--font-gothic); font-size: 12px; line-height: 1; box-sizing: content-box; @media screen and (max-width: 999px) { margin: 0; } @media screen and (min-width: 1000px) { height: 46px; border-top: 3px solid var(--bordercolor_primary); border-bottom: 3px solid var(--bordercolor_primary); font-size: 16px; } } ul { list-style: none; font-size: 15px; font-weight: 700; line-height: 1; @media screen and (min-width: 1000px) { font-size: 18px; } } li { border-bottom: 1px solid var(--bordercolor_secondary); a { display: inline-flex; align-items: center; width: 100%; height: 40px; @media screen and (min-width: 1000px) { height: 46px; } } } .banner a + a { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 5px auto 0; } ul.terms { list-style: none; padding: 8px 0; border-top: 1px solid var(--bordercolor_secondary); border-bottom: 1px solid var(--bordercolor_secondary); a { display: inline-flex; height: 27px; font-size: 12px; line-height: 1; flex-wrap: nowrap; align-items: center; } li { border: none; } } .buttons { a { position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 37px; border-radius: 6px; font-size: 15px; font-weight: 700; line-height: 1; + a { margin-top: 10px; } } .has-icon { justify-content: space-between; padding: 0 8px; img { width: 30px; height: 25px; -o-object-fit: contain; object-fit: contain; } } } } #site-menu .category-list { @media screen and (min-width: 1100px) { margin-top: 30px; } li:has(.subcategory) { position: relative; border: none; &::before { content: ""; position: absolute; inset: 40px 0 0; display: block; width: 100%; height: 1px; border-top: 1px solid var(--bordercolor_secondary); @media screen and (min-width: 1000px) { top: 46px; } } } .subcategory { padding-left: 1em; li:not(.subcategory li:last-child) { border-color: var(--sub_key_color); } a { display: inline-flex; align-items: center; width: 100%; height: 32px; font-family: var(--font-gothic); font-size: 12px; @media screen and (min-width: 1100px) { height: 34px; font-size: 14px; } } } @media screen and (max-width: 999px) { + ul { margin-top: 10px; } } } /* search box */ .search-box { position: relative; @media screen and (min-width: 1100px) { margin-bottom: 20px; } input { display: flex; width: 100%; height: 35px; padding: 0 30px 0 10px; border: 1px solid var(--bordercolor_secondary); border-radius: 0; align-items: center; &:placeholder { font-size: 15px; color: #b7b7b7; } } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 7px; right: 7px; display: block; border: none; background: none; } span { display: block; margin-top: 3px; font-size: 9px; font-weight: bold; color: var(--bordercolor_secondary); line-height: 1.33; @media screen and (min-width: 1000px) { font-size: 10px; line-height: 1; } } } /*------------------------------------------- ¥Ñ¥ó¤¯¤º¥ê¥¹¥È -------------------------------------------*/ #breadcrumb { display: flex; flex-direction: row; flex-wrap: wrap; @media screen and (max-width: 999px) { padding: 16px; } @media screen and (min-width: 1000px) { margin-bottom: 8px; } li { display: inline-block; font-size: 0.75rem; line-height: 1.33; &:last-child { font-weight: bold; } + li::before { content: "¡ä"; display: inline-block; padding-right: 0.5em; font-weight: normal; } } a { padding-right: 0.5em; color: var(--bordercolor_secondary); } } @-moz-document url-prefix() { .menu { word-spacing: 0.1em; } } /*------------------------------------------- ¥¹¥é¥¤¥À¡¼¡ÊºÇ¶á¥Á¥§¥Ã¥¯¤·¤¿¾¦ÉÊ¡¦¤ª¤¹¤¹¤á¾¦ÉÊ¡Ë -------------------------------------------*/ .suggest { margin: 40px 0 0; @media screen and (min-width: 1000px) { margin: 80px 0 0; } .module { padding: 40px 0; border-top: 1px solid var(--bordercolor_secondary); @media screen and (min-width: 1000px) { padding: 80px 0; } } h2 { margin: 0 0 20px; text-align: center; font-family: var(--font-mincho); font-weight: 700; line-height: 1; @media screen and (min-width: 1000px) { font-size: 16px; } @media screen and (min-width: 1000px) { margin-bottom: 32px; font-size: 18px; } } .slider_inner { padding-left: 24px; } h3 { margin: 0.5em 0 0; font-size: 12px; font-weight: 500; line-height: 1.5; @media screen and (min-width: 1000px) { margin: calc(16px - 0.25em) 0; font-size: 1rem; } span { display: block; margin-top: calc(16px - 0.125em); color: #505050; line-height: 1.25; } &.has-icon::before { display: inline-block; height: 1em; padding-right: 0.25em; vertical-align: -1px; } &.has-icon.new::before { content: url("https://www.tsuku-shin.jp/colorme/icon/new.svg"); } &.has-icon.restock::before { content: url("https://www.tsuku-shin.jp/colorme/icon/restock.svg"); } } .product-list__text { @media screen and (max-width: 999px) { font-size: 12px; } } li { margin-right: 1em; } .slider_container { max-width: 96.5%; margin-left: auto; @media screen and (max-width: 999px) { position: relative; top: 0.6rem; } } } .suggest .bx-wrapper { max-width: none !important; .bx-viewport { left: 0; height: 100% !important; border: none; box-shadow: none; } .bx-next, .bx-prev { position: absolute; top: 57px; display: block; width: 0.5em; height: 0.5em; border-top: solid 1px var(--bordercolor_primary); border-right: solid 1px var(--bordercolor_primary); background: none; @media screen and (min-width: 1000px) { top: 63px; } } .bx-prev { left: -20px; transform: rotate(-135deg); } .bx-next { right: 5px; transform: rotate(45deg); } .bx-controls-direction a.disabled { display: block; } } /*------------------------------------------- ¥«¥Æ¥´¥ê°ìÍ÷¡Ê¥â¥Ð¥¤¥ë¡Ë -------------------------------------------*/ .category-grid { max-width: 640px; margin-inline: auto; h2 { margin-top: 0; padding: 15px 0 14px; border-top: 3px solid var(--font_color); border-bottom: 3px solid var(--font_color); text-align: center; font-family: inherit; font-weight: 700; line-height: 1; } a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90%; height: 90%; border-radius: 3px; } span { margin-top: 17px; text-align: center; } img { border-radius: 15px; } ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; list-style: none; font-weight: 700; font-size: 18px; } li { position: relative; display: flex; justify-content: center; align-items: center; height: 210px; border-bottom: 1.5px solid #dbdbdb; &:nth-child(even) { border-left: 1.5px solid #dbdbdb; } &:where(:first-child, :nth-child(even))::after { content: ""; position: absolute; display: block; width: 18px; height: 18px; background-color: #fff; z-index: 20; } &:first-child::after { top: 0; right: 0; transform: translateX(50%); } &:nth-child(even)::after { bottom: -9px; left: -9px; } &:nth-child(10)::after { bottom: 0.5px; height: 9px; } } } /*------------------------------------------- ¥¡¼¥ï¡¼¥É¤ÇÃµ¤¹¡Ê¥â¥Ð¥¤¥ë¡Ë -------------------------------------------*/ .search-by-keyword { max-width: 640px; margin-inline: auto; padding: 1.5rem 0 2rem; h2 { margin: 0 0 1rem; text-align: center; font-family: inherit; font-weight: bold; font-size: 20px; line-height: 1; } form { position: relative; } input { width: 100%; height: 40px; padding: 11px 10px; border: 1px solid #707070; border-radius: 0; &:placeholder { font-size: 18px; color: #b7b7b7; } } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 10px; right: 20px; display: block; border: none; background: none; } } /*------------------------------------------- ¿Íµ¤¥é¥ó¥¥ó¥° -------------------------------------------*/ .ranking { background: var(--sub_key_color); h2 { position: relative; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 0.83em 1.66em; background: var(--font_color); border-right: 8px solid var(--sub_key_color); border-left: 8px solid var(--sub_key_color); color: #fff; line-height: 1; text-align: center; z-index: 30; &::before, &::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; } &::before { left: 11px; } &::after { right: 11px; } } .is-circle { border-radius: 50%; border: 1px solid var(--bordercolor_secondary); } .img { position: relative; display: block; margin-inline: auto; } li a img { display: block; width: 100%; height: auto; } span.rank-number { position: absolute; top: 0; left: 0; } } /* ¥µ¥¤¥É¥Ð¡¼¡ÊPC¡Ë */ #site-menu .ranking { margin-top: 5rem; padding: 0 1.25rem 0.8rem; h2 { box-sizing: border-box; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 48px; margin-bottom: 16px; padding: 0 30px; border: none; font-family: var(--font-mincho); font-size: 18px; } li { padding: 24px 0; border: none; + li { border-top: 1px solid #b7b7b7; } } a { display: block; height: auto; } .img { width: 128px; height: 128px; } span.rank-number { width: 27px; } h3 { margin-top: 1em; line-height: 1.25; span { display: block; margin-top: 8px; font-size: 14px; font-weight: normal; color: #505050; } } .prices { margin-top: 1em; text-box-trim: trim-both; font-weight: bold; } } /*------------------------------------------- ¥·¥ç¥Ã¥Ô¥ó¥°¥¬¥¤¥É -------------------------------------------*/ #shopkeeper { padding: 3rem 0 3.5rem; border-top: 1px solid var(--bordercolor_secondary); > .inner { -moz-column-count: 2; column-count: 2; -moz-column-gap: 4rem; column-gap: 4rem; -moz-column-rule: 1px solid #b7b7b7; column-rule: 1px solid #b7b7b7; } a[target="_blank"] { font-weight: bold; color: var(--key_color); &::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); } } img { margin: 1rem 0; } h2 { display: flex; align-items: center; justify-content: center; height: 48px; background-color: var(--font_color); color: #fff; font-size: 18px; font-weight: 600; line-height: 1; &::before { content: ""; display: inline-block; width: 29px; height: 26px; background-repeat: no-repeat; background-size: auto; background-position-x: right; background-position-y: center; margin-right: 8px; } &[data-icon="truck"]::before { background-image: url("https://www.tsuku-shin.jp/colorme/icon/truck_beige.svg"); } &[data-icon="return"]::before { background-image: url("https://www.tsuku-shin.jp/colorme/icon/return_beige.svg"); } &[data-icon="en"]::before { background-image: url("https://www.tsuku-shin.jp/colorme/icon/en_beige.svg"); } } .mb_only { display: none; } } #shopkeeper dl { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; h4 { font-family: inherit; } dt { margin-top: 1.3rem; font-family: var(--font-mincho); font-size: 1rem; &::before { content: "¢£"; color: var(--key_color); } } dd { margin: 0.5rem 0; font-size: 0.875rem; line-height: 2; br { display: none; } small { display: inline-block; margin-top: 0.3em; font-size: 0.8125rem; line-height: 1.69; } } &.payment dt:not(dt:first-child) { margin-top: 2.5rem; } table { max-width: 100%; width: 100%; margin: 0.75rem 0; border: 1px solid var(--sub_key_color); border-collapse: collapse; } th { padding: 15px; background-color: var(--sub_key_color); text-box-trim: trim-both; font-weight: normal; } td { text-align: center; } } #shopkeeper table[data-content="postage-list"] { margin-bottom: 4em; th { width: calc(100% - 6.8em); text-align: left; line-break: strict; word-break: auto-phrase; } tr + tr th { border-top: 1px solid #fff; } td { width: 6.8em; vertical-align: middle; text-align: center; line-height: 1.875; word-break: keep-all; } tr + tr td { border-top: 1px solid var(--sub_key_color); } } #shopkeeper table[data-content="cash-on-delivery"] { margin-bottom: 0; th { width: 50%; } tr > th:first-child { border-right: 1px solid #fff; } tr > td:first-child { border-right: 1px solid var(--sub_key_color); } tbody > tr { border-bottom: 1px solid var(--sub_key_color); } td { padding: 1em; } } /*------------------------------------------- Å¹ÊÞ¾ðÊó¡ÊPC¡Ë -------------------------------------------*/ #shop-info { padding: 40px 0; background-color: #edeae4; .inner { display: flex; flex-wrap: wrap; align-items: flex-start; } } /* ±Ä¶ÈÆü¥«¥ì¥ó¥À¡¼ */ .calendar { h2 { position: relative; margin: 0 0 1rem; font-size: 1.125rem; &[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; } &[data-icon="calendar"]::after { content: "¢¨ÀÖ¤¤´Ý°õ¤ÎÉôÊ¬¤¬µÙ¶ÈÆü¤È¤Ê¤ê¤Þ¤¹"; font-family: var(--font-gothic); font-size: 14px; font-weight: normal; vertical-align: 1px; line-height: 1; } } } .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; &::after { content: ""; position: absolute; right: 50%; top: 87px; left: 50%; display: block; width: 260px; height: 1px; background: var(--bordercolor_secondary); transform: translateX(-50%); } + .tbl_calendar { margin: 0 3.5rem 0 2rem; } caption { position: absolute; top: 36px; right: 0; left: 0; font-family: var(--font-mincho); line-height: 0.7; } tbody { display: block; width: 260px; margin: 3px 2% -3px auto; } tr:first-child { position: relative; } th { padding-bottom: 5px; font-family: var(--font-mincho); font-weight: 500; line-height: 1; } 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; p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.64; } } /*------------------------------------------- ¥Õ¥Ã¥¿ -------------------------------------------*/ #footer { background-color: #203d1e; background-image: url(https://www.tsuku-shin.jp/assets/img/bg/footer.png); background-repeat: repeat; color: #fff; a { color: #fff; } > .inner { position: relative; margin: 40px 0; margin-inline: auto; @media screen and (max-width: 999px) { box-sizing: content-box; width: 340px; padding: 0 5%; @media screen and (max-width: 340px) { width: auto; } } @media screen and (min-width: 1000px) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; max-width: 1000px; width: 100%; margin: 56px auto; } } .logo { display: flex; justify-content: center; align-items: center; width: 158px; height: 158px; background-color: #fdfdfd; @media screen and (max-width: 999px) { margin-inline: auto; } img { max-width: 85%; min-height: 1px; height: auto; } } .headline p { display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 8px auto 24px; text-align: center; font-family: initial; font-size: 14px; line-height: 1.57; } } #footer .tel { display: flex; justify-content: center; align-items: center; width: 100%; height: 150px; font-weight: 700; background: var(--font_color); a { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; vertical-align: middle; grid-gap: 1em; @media screen and (max-width: 999px) { flex-direction: column; } } .tel-info { font-size: min(5.6vw, 21px); } .number { font-size: 32px; } .hyphen { content: ""; display: inline-flex; width: 0.35em; transform: translate(0px, -0.35em); margin: 0px 0.15em; border-bottom: 2px solid currentColor; } address { margin: 0; } } @media screen and (max-width: 999px) { html[lang="fr"] #footer .tel-info { font-size: min(4.5vw, 16px); } } #footer .links { ul { list-style: none; } &.outbound { @media screen and (min-width: 1000px) { width: 280px; margin: 0 35px; } > a { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; height: 60px; margin-inline: auto; border-radius: calc(infinity * 1px); font-weight: 700; font-size: min(6vw, 24px); line-height: 1; @media screen and (min-width: 1000px) { width: inherit; height: 40px; font-size: 18px; } + a { margin-top: 16px; } img { width: 35px; aspect-ratio: 1/1; -o-object-fit: contain; object-fit: contain; } } } &.internal { display: flex; flex-direction: column; margin-left: auto; @media screen and (min-width: 1000px) { flex-direction: row; padding-bottom: 64px; } > * { display: inline-block; } .primary { margin-left: 38px; font-size: 18px; font-weight: 700; line-height: 1; vertical-align: top; li { border-bottom: 2px solid #fff; + li { margin-top: 1rem; } a { display: block; padding: 0 0 0.5em 0.5em; &::before { content: ""; display: inline-block; margin-right: 0.5rem; background-size: contain; background-repeat: no-repeat; } span { white-space: nowrap; } } } .is-square { box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 36px; margin-top: 24px; border: 3px double #fff; background: var(--font_color); } } .secondary { line-height: 1.875; @media screen and (min-width: 1000px) { li::before { content: "¡ä"; padding-right: 0.5em; } } } @media screen and (max-width: 999px) { .secondary a { display: block; padding: 16px 0; border-top: 1px solid #edeae4; line-height: 1.875; } li:last-child a { border-bottom: 1px solid #edeae4; } } a[data-icon="person"]::before { width: 19px; height: 20px; background-image: url("https://www.tsuku-shin.jp/colorme/icon/person_white.svg"); } 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 ul.sns-list { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; grid-gap: 24px; height: 31px; @media screen and (max-width: 999px) { justify-content: center; margin: 32px auto; text-align: center; } @media screen and (min-width: 1000px) { position: absolute; right: 0; bottom: 0; } li { display: inline-block; font-size: 0; } } /* ¸À¸ìÁªÂò¥á¥Ë¥å¡¼ */ .languages-menu { font-size: 0; list-style: none; li { display: inline-block; padding: 0 24px; line-height: 1; @media screen and (min-width: 1000px) { &:first-child { padding-left: 0; } } > a { font-weight: bold; color: var(--font_color); } & + li { border-left: 1px solid var(--font_color); } } input[type="radio"] { display: none; } label { margin: 0; font-weight: bold; font-size: 12px; line-height: 1; @media screen and (min-width: 1000px) { font-size: 14px; } } } /* ¥³¥Ô¡¼¥é¥¤¥È */ #copyright { height: 80px; padding: 24px 0; background: #ffffff; font-weight: bold; color: var(--font_color); @media screen and (max-width: 999px) { display: block; padding: 1.5rem 0 calc(17px + env(safe-area-inset-bottom)); text-align: center; } .inner { max-width: 1000px; width: 100%; margin: 0 auto; line-height: 1.5; @media screen and (min-width: 1000px) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } } small { margin-left: auto; font-weight: bold; @media screen and (max-width: 999px) { display: block; margin-top: 16px; font-size: 12px; line-height: 1.15; } @media screen and (min-width: 1000px) { font-size: 14px; } } } /*------------------------------------------- ¥Ú¡¼¥¸¥È¥Ã¥×¤ØÌá¤ë¥Ü¥¿¥ó -------------------------------------------*/ #page-top { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); text-align: center; transition: all 1s; z-index: 100; @media screen and (min-width: 1000px) { right: 3%; bottom: 3%; } a { display: block; @media screen and (max-width: 999px) { padding: 11px 10px 13px; background: #707070; opacity: 0.75; } } .icon { display: block; margin: 0 auto; width: 19px; height: 16px; background-image: url(https://www.tsuku-shin.jp/assets/img/triangle.svg); background-size: contain; background-repeat: no-repeat; @media screen and (min-width: 1000px) { width: 40px; height: 40px; background-image: url(https://www.tsuku-shin.jp/assets/img/to-top.svg); } } @media screen and (min-width: 1000px) { span { color: var(--key_color); line-height: 1.5; } } }