@charset "UTF-8"; /* Theme Name: urbancosme Theme URI: https://www.urbancosme.co.jp/blog/ Description: theme for urbancosme Version: 1.0.0 */ /* 以下、makeshopの全ページ共通cssからコピペ画像パス(url)は修正してください */ /* 例　url(/view/images/template/10/icon-arrow-up.png) -> url(https://www.urbancosme.co.jp/view/images/template/10/icon-arrow-up.png) → url(./images/icon-arrow-up.png) */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* 「User-Agent-Stylesheet」のスタイルを「display」プロパティ以外、すべて削除する。 - 「symbol *」の部分は、Firefox SVG スプライトのバグを解決するためのものです。 */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } *, *::before, *::after { box-sizing: border-box; } a, button { cursor: revert; } ol, ul, menu { list-style: none; } 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; } /* reset default text opacity of input placeholder */ ::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; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* reset css */ html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-size: 10px; } body { margin: 0; } main { display: block; width: 100%; } @media screen and (min-width: 1000px) { main { width: calc(100% - 260px); } } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } *, *::before, *::after { box-sizing: border-box; } body, a { color: #333; font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Original Yu Gothic", "Yu Gothic", sans-serif; font-weight: 500; } a { text-decoration: none; } h1, h2, h3, ul, ol, p, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: block; height: auto; max-height: 100%; max-width: 100%; width: auto; } body.open { overflow: clip; } .sp-only { display: block!important; } .pc-only { display: none!important; } a:hover { opacity: .8; } .ff_jost{ font-family: "Jost", sans-serif; } header { position: sticky; top: 0; width: 100%; z-index: 999; border-bottom: 1px solid #ddd; } header.is-invisible { visibility: hidden; opacity: 0; pointer-events: none; } .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 4%; position: relative; z-index: 999; } .header-inner-wrap{ background-color: #fff; } .header-logo { height: 30px; } .header-logo a { display: block; } .header-logo img { max-height: 30px; } .header-nav ul { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 4px; } .header-nav li { width: 46px; display: flex; justify-content: center; } .header-nav li a, .header-nav .icon-hamburger { display: flex; flex-direction: column; align-items: center; } .header-nav li a { gap: 3px 0; } .header-nav .icon-hamburger { gap: 7px 0; padding-top: 4px; } .header-nav .icon-cart { padding-bottom: 3px; } .header-nav .icon-login { display: none; } .header-nav .icon-favorite .icon-image { width: 22px; opacity: 0.8; } .nav-text { font-size: 10px; transform: scale(0.9); white-space: nowrap; } .header-nav .icon-cart { position: relative; } .icon-cart-num { background-color: #ee0038; border-radius: 50%; color: #fff; display: block; font-size: 10px; height: 20px; line-height: 20px; position: absolute; right: -10px; text-align: center; top: -4px; width: 20px; } .hamburger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px 0; height: 15px; width: 18px; position: relative; } .hamburger-btn span { width: 100%; height: 1px; background-color: #333; transition: all .4s; } .open .hamburger-btn { gap: 0; } .open .hamburger-btn span:nth-of-type(1) { transform: translate(0, 1px) rotate(-45deg); } .open .hamburger-btn span:nth-of-type(2) { opacity: 0; } .open .hamburger-btn span:nth-of-type(3) { transform: translate(0, -1px) rotate(45deg); } .header-menu { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; padding-left: 50px; background-color: rgb(0 0 0 / 80%); z-index: 1000; } .header-nav-member { border-bottom: 1px solid #eaeaea; display: flex; flex-wrap: wrap; padding: 30px 4%; } .header-nav-member li { margin: 0 30px 20px 0; } .header-nav-member li:nth-last-child(-n+2) { margin-bottom: 0; } .header-nav-member li:last-child { margin-right: 0; } .header-nav-member a { font-weight: 600; } @media(min-width: 1000px) { .header-nav-search-wrap { display: none; } } .header-nav-search { display: flex; height: 60px; padding: 10px 15px; } .header-nav-search-input { width: 88%; } .header-nav-search-input input { -webkit-appearance: none; background-color: #fff; border: 1px solid #eaeaea; border-radius: 5px 0 0 5px; font-size: 1.4rem; height: 100%; padding: 0 16px; width: 100%; } .header-nav-search-input input::placeholder{ color: #666; font-size: 1.6rem; } .header-nav-search-btn { width: 12%; } .header-nav-search-btn a { background: #E35E84 url(https://www.urbancosme.co.jp/view/images/template/10/icon-search.png) no-repeat center center/19px 17px; border-radius: 0 5px 5px 0; display: block; height: 40px; width: 37px; width: 100%; } .header-nav-category { height: 100%; background-color: #fff; } .header-nav-category .has-sub-category { background-image: url(https://www.urbancosme.co.jp/view/images/template/10/icon-arrow-down.png); background-size: 12px 7px; } .header-nav-category .has-sub-category.open { background-image: url(https://www.urbancosme.co.jp/view/images/template/10/icon-arrow-up.png); background-size: 12px 7px; } .header-nav-category .header-nav-sub-category { display: none; } .header-nav-category .header-nav-sub-category a { font-weight: 300; padding-left: 8%; } .header-other-link { border-bottom: 1px solid #e5e5e5; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 4%; } .header-other-link li { margin: 0 15px 15px 0; } .header-other-link li:last-child { margin: 0; } .header-user-name{ display: flex; align-items: baseline; gap: 10px; font-size: 1.6rem; font-weight: 800; } .hamburger-close { position: absolute; top: 20px; left: 18px; } .hamburger-close::before { background: url(https://gigaplus.makeshop.jp/urban5910/img/ico_close.svg) no-repeat center center/contain; content: ''; display: inline-block; height: 15px; width: 15px; } .new-login-box { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (max-width: 999px) { .open .header-inner{ display: none; } .new-login-box-wrap dt, .sp-only .header-user-name dt, .header-nav-link dt{ font-size: 1.3rem; font-weight: 500; background: #F7F7F5; width: 100%; padding: 10px 15px; border-bottom: 1px solid #DDDDDD; } .header-user-name dd, .header-nav-link dd, .new-login-box-wrap dd{ width: 100%; border-bottom: 1px solid #DDDDDD; } .sp-only .header-user-name dd a, .header-nav-link dd a{ display: block; font-size: 1.3rem; font-weight: 800; width: 100%; padding: 15px 15px 15px 25px; } .header-user-name .g_ic_arrow_bl::after, .header-nav-link .g_ic_arrow_bl::after{ right: 15px; } .new-login-box{ grid-template-columns: repeat(2,1fr); padding: 20px 15px; } .new-entry{ margin-top: 0; } } @media (min-width: 1000px) { body.open { overflow-y: scroll; } .open header { background-color: initial; height: auto; } .header-inner { padding: 20px 0 30px 30px; max-width: 1500px; margin: 0 auto; } .header-logo { height: auto; display: flex; flex-direction: column; gap: 0.7vw; margin-right: 2.6%; } .header-logo a { width: 100%; max-width: 193px; } .header-logo img { max-height: 44px; max-width: 193px; } .header-logo-txt { font-size: 1.2rem; display: inline-block; width: 288px; } .header-nav ul { gap: 0; } .header-nav li { width: 5.7vw; min-width: 66px; max-width: 66px; } .header-nav .nav-text { font-size: 10px; font-weight: 600; } .header-nav .icon-guide a, .header-nav .icon-login, .header-nav .icon-login > a, .header-nav .icon-favorite a, .header-nav .icon-cart a, .header-nav .icon-hamburger { display: flex; flex-direction: column; align-items: center; gap: 7px; } .header-nav .icon-cart { padding-bottom: 0; } .header-nav .icon-hamburger { padding-top: 0; } .header-nav .icon-login:hover, .header-nav .icon-hamburger:hover { opacity: .8; } .header-nav .icon-login.open:hover{ opacity: 1; } .header-nav .icon-login { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; } .header-nav .icon-login .nav-text { position: relative; } .header-nav .icon-login.logged-in.open .nav-text::after { background-image: url(https://www.urbancosme.co.jp/view/images/template/10/icon-arrow-up.png); } .header-nav .icon-login .header-member-list { display: none; left: calc(50% - 75px); padding-top: 22px; position: absolute; top: 16px; width: 150px; } .header-nav .icon-login .header-member-list:hover { opacity: 1; } .header-nav .icon-login .header-member-list li { background-color: #EEEEEE; border-bottom: 1px solid #DDDDDD; width: 100%; max-width: 100%; } .header-nav .icon-login .header-member-list li:last-child { border-bottom: none; } .header-nav .icon-login .header-member-list li a { display: block; font-weight: 600; font-size: 10px; padding: 10px 0; text-align: center; width: 100%; } .header-nav .icon-login .icon-image { width: 24px; } .header-nav .icon-favorite .icon-image { padding-top: 2px; } .header-nav .icon-cart .icon-image { width: 24px; padding-bottom: 0; } .header-nav-link .g_ic_arrow_bl::after{ right: 0; } .new-entry{ margin-top: 30px; } .icon-cart-num { left: 14px; } .hamburger-btn { width: 20px; margin: 4px 0; } .header-menu { position: sticky; inset: 100px auto auto; width: 100%; height: auto; padding-left: 0; max-height: calc(100% - 100px); background-color: #fff; overflow: hidden; } .header-nav-member, .hamburger-close { display: none; } .header-nav-search-box { flex: auto; margin-right: 2.6%; } .header-nav-search { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.6rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; padding: 0; height: 37px; } .header-nav-search-input input { border-radius: 3px 0 0 3px; font-size: 12px; } .header-nav-search-btn { max-width: 37px; } .header-nav-search-btn a { background-size: 16px 14px; height: 37px; width: 37px; } .header-nav-category { border-bottom: 1px solid #d5d5d5; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto; padding: 50px 0; } .header-nav-user{ padding-right: 6.66vw; border-right: 1px solid #DDDDDD; } .header-nav-link{ padding-left: 6.66vw; display: flex; gap: 6.66vw; } .header-nav-link dl{ width: 174px; } .header-nav-link dt{ font-size: 1.6rem; font-weight: 800; } .header-nav-link dd a{ width: 100%; display: block; font-size: 1.4rem; margin-top: 20px; } .header-nav-category { height: auto; background-color: transparent; } .header-nav-category .has-sub-category { margin-bottom: 30px; } .header-nav-category .has-sub-category:last-child { margin-bottom: 0; } .header-nav-category .header-nav-sub-category { display: block; } .header-nav-category .header-nav-sub-category li { margin-bottom: 20px; } .header-nav-category .header-nav-sub-category .header-nav-category-parent { display: none; } .header-nav-category .header-nav-sub-category a { font-weight: 300; padding: 0; } .header-member { flex-shrink: 0; display: flex; align-items: center; margin-right: 20px; } .header-member-name { font-size: 1.2rem; font-weight: 600; line-height: 1.8; text-align: center; white-space: nowrap; } .header-member-name span { display: inline-block; margin-right: 8px; font-size: 1.3rem; } .header-other-link { border: none; margin: 0 auto; padding: 30px 0 40px; width: 1000px; } .header-other-link li { margin-right: 30px; } .header-other-link a { font-size: 12px; } } footer { width: 100%; } .footer-wrapper { background-color: #F7F7F5; } .footer-wrapper-inr { padding: 50px 30px; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; max-width: 1500px; margin: 0 auto; } .footer-info { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 15px; } .footer-logo { margin-right: 30px; } .footer-logo img { max-height: 30px; } .footer-link-wrapper{ display: flex; gap: 80px; } .footer-link-wrapperL, .footer-link-wrapperR{ display: flex; gap: 80px; } .footer-link-wrapper .footer-link-ttL, .footer-link-wrapper .footer-link-ttL a{ font-size: 1.5rem; font-weight: 800; } .footer-link-wrapper .footer-link-ttL:not(:first-of-type){ margin-top: 30px; } .footer-link-wrapper .footer-link-ttM{ font-size: 1.3rem; } .footer-link-wrapper .footer-link-ttM:first-of-type{ margin-top: 30px; } .footer-link-wrapper .footer-link-ttM:not(:first-of-type){ margin-top: 20px; } .footer-sns-list { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-sns-list li { margin-right: 15px; } .footer-sns-list li:last-child { margin-right: 0; } .footer-sns-list .footer-sns-instagram, .footer-sns-list .footer-sns-facebook { width: 22px; } .footer-sns-list .footer-sns-twitter { width: 24px; } .footer-sns-list .footer-sns-youtube { width: 28px; } .footer-sns-list a { display: block; } .footer-info-address span { display: block; font-size: 13px; line-height: 1; margin-bottom: 10px; } .footer-info-address span:last-child { margin-bottom: 0; } .footer-nav-category { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; } .footer-nav-category li { background: url(https://www.urbancosme.co.jp/view/images/template/10/icon-arrow-right.png) no-repeat left center/7px 12px; margin: 0 30px 20px 0; padding-left: 16px; } .footer-nav-category li:last-child { margin-right: 0; } .footer-nav-category a { font-size: 12px; font-weight: 600; } .footer-nav-sub-category { display: none; } .footer-nav-other { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; margin-top: 20px; } .footer-nav-other li { position: relative; } .footer-nav-other-wrapL, .footer-nav-other-wrapR{ display: flex; } .footer-nav-other-wrapR{ padding-left: 20px; margin-top: 0; } .footer-nav-other-wrapL a{ border-right: 1px solid #333; } .footer-nav-other-wrapL a, .footer-nav-other-wrapR a{ display: block; font-size: 1.2rem; padding-right: 20px; line-height: 1; } .footer-nav-other-wrapL a:not(:first-of-type), .footer-nav-other-wrapR a:not(:first-of-type){ padding-left: 20px; } .footer-special-box{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; } .copyright { padding: 15px; text-align: center; } .copyright small { font-size: 1.2rem; } /* side-nav ------------------------------------------*/ .side-nav { display: none; } .side-banner-list img{ width: 100%; } .bx-viewport ul li{ padding: 0 30px; } /* other-item ------------------------------------------*/ .other-item { padding: 40px 0; } .other-item-title { font-size: 2.2rem; font-weight: 600; margin-bottom: 30px; text-align: left; } .other-item-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .other-item-list li { margin-bottom: 15px; width: 44vw; } .other-item-list li:nth-last-child(-n+2) { margin-bottom: 0; } .contents-item { position: relative; padding-bottom: 40px; z-index: 0; } .other-item-img { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #f2f2f2; display: -webkit-box; display: -ms-flexbox; display: flex; height: 44vw; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10px; position: relative; } .other-item-name { font-size: 1.5rem; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; /*　-webkit-line-clamp: 1;　*/ margin-bottom: 5px; overflow: hidden; } _:-ms-lang(x)::-ms-backdrop, .other-item-name { display: block; max-height: 32px; line-height: 18px; } .item-sale-price { color: #c3123b; } .contents-item-price { font-size: 1.6rem; display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; font-weight: 500; color: #D0104C; } .other-item-button { display: grid; place-items: center; width: min(100%, 260px); height: 46px; margin-top: 30px; margin-inline: auto; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } @media (any-hover: hover) { .other-item-button:hover { background-color: #f2f2f2; } } .other-item-button span { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.1em; color: #555; } .contents-item-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px 12px; position: relative; margin-top: 30px; } .other-item-more-wrap { display: grid; grid-template-rows: 0fr; transition: 250ms grid-template-rows ease; } .other-item-more-wrap > ul { overflow: hidden; } .other-item-more-wrap.is-open { grid-template-rows: 1fr; } .other-item-more { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; position: relative; margin-top: 10px; } .reco_ranking_no { background: #EBBBD3; display: inline-block; color: #fff; padding: 4px 10px 3px; font-size: 1.2rem; font-family: "Jost", sans-serif; position: absolute; z-index: 10; } .contents-item-list a, .other-item-more a { display: block; } .contents-item-img { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10px; position: relative; border: 1px solid #ddd; aspect-ratio: 1 / 1; } .contents-item-img img{ height: 100%; width: 100%; object-fit: cover; } .contents-item-name { min-height: 63px; font-size: 13px; font-weight: 800; display: -webkit-box; -webkit-box-orient: vertical; /* -webkit-line-clamp: 1; */ margin-bottom: 5px; overflow: hidden; } .cart-btn { display: flex !important; justify-content: center; align-items: center; position: absolute; inset: auto 0 0; width: 100%; height: 32px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: #E35E84; color: #fff; cursor: pointer; transition: background-color 0.25s ease-in-out; z-index: -1; } .contents-item .cart-btn:hover { background-color: #D0104C; } .favorite-btn { position: absolute; inset: auto auto 42px 4px; width: 20px; z-index: 3; } .favorite-btn i { font-size: 20px; color: rgb(153, 153, 153); } .js-favorite.is-colored i { color: #E35E84; } .contents-new-item-list .contents-item-img::before { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffa00b; border-radius: 50%; color: #fff; content: 'NEW'; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 10px; font-weight: 600; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 35px; left: calc(50% - 18px); position: absolute; top: -18px; width: 35px; } .contents-ranking-item-list { counter-reset: ranking; } .contents-ranking-item-list .contents-item-info { display: -webkit-box; display: -ms-flexbox; display: flex; } .contents-ranking-item-list .contents-item-info::before { color: #fec557; content: counter(ranking); counter-increment: ranking; font-family: Futura, Century Gothic; font-size: 30px; line-height: 1; } .windows .contents-ranking-item-list .contents-item-info::before { font-weight: 600; } .contents-ranking-item-list .contents-item-info div { margin-left: 10px; } .sale-discount-rate{ font-size: 1.1rem; font-weight: 400; background: #CC0C39; color: #fff; padding: 0 4px; margin-right: 10px; } .sale-yen, .item-yen{ font-size: 1.2rem; } .item-category-name a{ font-size: 1rem; color: #999999; } .original-price { margin-bottom: 8px; font-size: 1.3rem; display: inline-block; position: relative; color: #999999; } .original-price::before { content: ""; width: 100%; height: 0.5px; background-color: #999999; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .original-price span{ font-size: 1rem; } .other-item-price { font-size: 12px; display: block; } .other-item-price::before { content: '\a5'; } .pc-breadcrumb { display: none; } .breadcrumb-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 15px; } .breadcrumb-list li { margin-bottom: 10px; } .breadcrumb-list li:not(:last-child)::after { content: '/'; margin: 0 5px; color: #222222; } .breadcrumb-list li, .breadcrumb-list a { font-size: 1.2rem; font-weight: 500; } .breadcrumb-list li:not(:last-of-type) a{ color: #E35E84; text-decoration: underline; } .calendar-wrap { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .calendar-wrap div { padding: 0 10px 10px; } .calendar-title { padding: 8px; color: #fff; display: flex; align-items: baseline; margin-bottom: 4px; } .calendar-title dt { font-size: 12px; margin-right: 6px; } .makeshop-calendar1, .makeshop-calendar2 { width: 100%; border-collapse: inherit; padding: 8px; } .makeshop-calendar1 tr, .makeshop-calendar2 tr { text-align: center; font-size: 12px; } .makeshop-calendar1 thead tr th, .makeshop-calendar2 thead tr th { padding-bottom: 8px; } .makeshop-calendar1 tbody tr td, .makeshop-calendar2 tbody tr td { padding: 8px 0; height: auto !important; } .makeshop-calendar1 td.today { background: #F23E0C; color: #fff; height: auto; } .this-month { background: #333; } .next-month { background: #333; } .saturday { color: #006BED; } .sunday { color: #F23E0C; } /* 共通 ------------------------------------------*/ .contents-wrapper { padding: 0 0 80px; overflow: hidden; width: 90vw; max-width: 1500px; margin: 0 auto; } .textalignC{ text-align: center; } .textalignE{ text-align: end; } .contents-section-title { font-size: 1.8rem; font-weight: 600; } .section-title-pb { font-size: 2.2rem; font-weight: 600; padding-bottom: 10px; } .btm-section-title{ font-size: 1.8rem; font-weight: 600; } .item-ttl{ font-size: 1.6rem; font-weight: 600; } .txt_pi{ font-size: 1.2rem; font-weight: 600; color: #E35E84; } .txt_link{ color: #E35E84; text-decoration: underline; } .txt_indent{ text-indent: -1rem; padding-left: 1rem; } .txt_indent_note{ text-indent: -1rem; padding-left: 1rem; font-size: 1.2rem; } .bg_gray{ background: #F7F7F5; } .gray_box{ background: #F7F7F5; padding: 15px; } .box_radius{ border-radius: 10px; } .columnBox2{ display: grid; grid-template-columns: 100%; justify-content: space-between; gap: 10px; border-radius: 10px; } .columnBox_ttl{ font-size: 1.6rem; font-weight: 600; } .columnBox_ttl_s{ font-size: 1.5rem; font-weight: 600; } .columnBox_step{ color: #A88F48; margin-right: 10px; } .columnBox_txt{ font-size: 1.4rem; line-height: 1.7; } .columnBox_txt:first-of-type{ margin-top: 10px; } .columnBox_img { border-radius: 10px; overflow: hidden; } .columnBox_img img{ width: 100%; height: 100%; object-fit: cover; } @media screen and (min-width: 500px) { .contents-item-img img{ max-height: 140px; } } @media screen and (min-width: 1000px) { .contents-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 0 200px; width: 96vw; } } @media screen and (min-width: 768px) { .gray_box{ padding: 30px; } .columnBox2{ grid-template-columns: 55.9% 36.4%; gap: 30px; } .columnBox_txt:first-of-type{ margin-top: 20px; } .columnBox_ttl{ font-size: 1.8rem; } .contents-item-img img{ max-height: 216px; } } /* head_search ------------------------------------------*/ .head_search{ display: grid; grid-template-columns: repeat(3,1fr); margin-top: 10px; margin-bottom: 10px; padding: 0 15px; } .head_search a{ color: #333333; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5rem; font-weight: 800; height: 55px; position: relative; transition: 0.2s; } .head_search a:hover{ color: #E35E84; } .head_search a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; transition: 0.2s; } .head_search a:hover::after{ background: #E35E84; } .third-category_box{ border-radius: 10px; background: #F7F7F5; } .search_cont_category .third-category_box{ padding: 0 10px; margin-bottom: 5px; } .search-sub-category-ico{ position:relative; } .search-sub-category-ico::after{ content: ""; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; border-right: 1px solid #333333; border-bottom: 1px solid #333333; transform: translateY(-50%) rotate(-45deg); } .search-sub-category-ico{ width: 100%; display: block; } .search-sub-category-col{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .head_search_cont .side-nav-first-category{ font-size: 1.6rem; font-weight: 700; padding: 10px 0; margin-top: 45px; } .head_search_cont .side-nav-second-category{ font-size: 1.6rem; padding: 10px 0; font-weight: 600; } .head_search_cont .side-nav-third-category, .head_search_cont .side-nav-last-category{ padding: 10px 20px 10px 10px; } .head_search_cont .side-nav-third-category{ font-size: 1.6rem; font-weight: 500; cursor: default; } .head_search_cont .side-nav-last-category{ font-size: 1.4rem; } .head_search_cont .bg_gray{ border-radius: 10px; } .side-nav-indent{ padding-left: 2rem!important; } .navbar-sub-list-data a{ width: 100%; display: block; } @media screen and (min-width: 1000px) { .head_search_cont .side-nav-second-category{ font-size: 1.8rem; padding: 10px 0; font-weight: 600; } .head_search_cont .side-nav-third-category{ font-size: 1.8rem; font-weight: 500; } .head_search_cont.search_cont_category .side-nav-third-category{ cursor: pointer; } .head_search_cont .side-nav-last-category{ font-size: 1.6rem; } .side-nav-category-column4{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 20px 0; } } /* フリーページ ------------------------------------ */ /* about */ .about-explanation-img{ max-width: 300px; width: 60%; } .about-explanation-txt{ margin-top: 20px; font-size: 1.6rem; } .about-features{ margin-top: 30px; } .about-features .l_column-item dl{ padding: 30px; } .help-guide{ margin-top: 30px; } .help-guide a{ padding: 30px; color: #E35E84; display: block; border: 2px solid; border-radius: 10px; } .about-features .txt_indent{ font-size: 1.2rem; } /* faq */ .faq_anchor{ margin-top: 20px; display: grid; grid-template-columns: repeat(2,1fr); } .faq_anchor .g_anchor{ min-height: 72px; padding: 15px 40px 15px 15px; } .faq .btm-section-title{ margin: 20px 0 15px; } .faq_box:not(:first-of-type){ margin-top: 20px; } .faq_box{ border-radius: 10px; } .faq_box_ttl_q{ color: #A88F48; margin-right: 10px; } .faq_box_ttl{ font-size: 1.6rem; font-weight: 600; } .faq_box_txt{ font-size: 1.4rem; margin-top: 10px; } .faq_box_ttl:not(:first-of-type){ margin-top: 30px; } /* general ------------------------------------ */ .g_sp{ display: block; } .g_pc{ display: none; } .g_link_transp { transition: opacity 0.2s; } @media (any-hover: hover) { .g_link_transp:hover { opacity: o.8; } } .g_bb{ border-bottom: 1px solid #DDDDDD; } /* ボタン */ .g_btn{ height: 42px; width: 100%; max-width: 315px; border-radius: 30px; border: 2px solid #E35E84; background-color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #E35E84; } .g_ic_arrow, .g_ic_pen{ position: relative; } .g_ic_arrow::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 6px; height: 6px; border-right: 2px solid #E35E84; border-bottom: 2px solid #E35E84; transform: translateY(-50%) rotate(-45deg); } .g_ic_arrow_bl::after{ border-right: 1px solid #333; border-bottom: 1px solid #333; } .g_ic_pen::after{ content: ""; position: absolute; background: url(https://gigaplus.makeshop.jp/urban5910/img/ico_pen.svg) no-repeat center center/contain; top: 50%; right: 20px; width: 20px; height: 20px; transform: translateY(-50%); } .g_btn_pi{ background: #E35E84; color: #fff; } .g_btn_pi.g_ic_arrow::after{ border-right: 2px solid #fff; border-bottom: 2px solid #fff; } .g_ic_circle_pi::before{ content: ""; position: absolute; top: 50%; right: 30px; background: #E35E84; border-radius: 50%; transform: translateY(-50%); } .g_ic_circle_pi.g_ic_arrow::after{ border-right: 2px solid #fff; border-bottom: 2px solid #fff; } .g_ic_circle_pi.g_ic_arrow.g_ic_circle_30::after{ right: 43px; width: 7px; height: 7px; } .g_ic_circle_16::before{ width: 16px; height: 16px; } .g_ic_circle_30::before{ width: 30px; height: 30px; } .guide_entry_btn.g_btn { height: 90px; width: 100%; font-size: 16px; border-radius: 10px; } .g_anchor{ width: 100%; padding: 10px 31px 10px 10px; color: #E35E84; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid; border-radius: 10px; font-size: 1.4rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .g_anchor span{ display: inline-block; } .g_anchor.g_ic_circle_30::before{ width: 20px; height: 20px; right: 10px; } .g_anchor.g_ic_circle_pi.g_ic_arrow.g_ic_circle_30::after { right: 17px; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); } .g_anchor:hover, .g_anchor.js_crnt { color: #fff; border: 2px solid #E35E84; background: #E35E84; } .g_anchor:hover.g_ic_circle_pi::before, .g_anchor.js_crnt.g_ic_circle_pi::before{ background: #fff; } .g_anchor:hover.g_ic_circle_pi.g_ic_arrow::after, .g_anchor.js_crnt.g_ic_circle_pi.g_ic_arrow::after{ border-right: 2px solid #E35E84; border-bottom: 2px solid #E35E84; } .txt_pi.g_ic_arrow.g_ic_circle_pi { display: inline-block; text-align: end; padding-right: 21px; } .txt_pi.g_ic_arrow.g_ic_circle_pi::before { right: 0px; } .txt_pi.g_ic_arrow.g_ic_circle_pi::after { right: 5px; } /* スライダー */ .g_slider_itm{ padding: 0 5px; aspect-ratio: 167 / 74; } .contents-banner-list{ margin-top: 30px; } .g_slider_itm img{ width: 100%; height: 100%; } .orderNullText{ padding: 0 15px!important; } /* layout ------------------------------------ */ .l_grid{ display: grid; } .l_grid_1{ grid-template-columns: repeat(1, 1fr); } .l_grid_2{ grid-template-columns: repeat(2, 1fr); } .l_grid_3{ grid-template-columns: repeat(3, 1fr); } .l_gap_10{ gap: 10px; } .l_gap_20{ gap: 20px; } .l_gap_30{ gap: 30px; } .l_column-item{ background: #F7F7F5; font-size: 1.4rem; border-radius: 10px; } .mt_5{ margin-top: 5px!important; } .mt_10{ margin-top: 10px!important; } .mt_20{ margin-top: 20px!important } .mt_30{ margin-top: 30px!important } .mt_50{ margin-top: 50px!important; } .mx_auto{ margin: 0 auto; } .mr_1rem{ margin-right: 1rem; } @media screen and (min-width: 350px) { .header-other-link li:nth-last-child(-n+2) { margin-bottom: 0; } } @media screen and (min-width: 418px) { .header-nav-member li { margin-bottom: 0; } } @media screen and (min-width: 550px) { .header-other-link li { margin-bottom: 0; } /* layout ------------------------------------ */ .l_grid_1_tbl{ grid-template-columns: repeat(1, 1fr); } .l_grid_2_tbl{ grid-template-columns: repeat(2, 1fr); } .l_grid_3_tbl{ grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 768px) { .footer-info-wrapper { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; } .footer-info { margin: 0 30px 0 0; } .other-item { padding: 40px 4%; } .other-item-list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .other-item-list li { margin-right: 2%; width: 29vw; } .other-item-list li:nth-child(3n) { margin-right: 0; } .other-item-img { height: 29vw; } .contents-item-price { font-size: 2rem; } .sale-discount-rate{ font-size: 1.3rem; } .sale-yen, .item-yen{ font-size: 1.4rem; } .item-category-name a{ font-size: 1.2rem; } .original-price { font-size: 1.5rem; } /* head_search ------------------------------------------*/ .head_search{ margin: 20px auto; padding: 0 30px; max-width: 1500px; } .head_search a{ font-size: 1.5rem; font-weight: 800; height: 64px; } /* 共通 ------------------------------------------*/ h2.contents-section-title, h2.other-item-title { position: relative; padding-bottom: 10px; font-size: 1.8rem; font-weight: 600; color: #555; } h2.contents-section-title::before, h2.other-item-title::before { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px; background-color: #ccc; } h2.contents-section-title::after, h2.other-item-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 86px; height: 3px; background-color: #E35E84; } .section-title-pb { font-size: 2.8rem; padding-bottom: 30px; } .btm-section-title{ font-size: 2.2rem; } .item-ttl{ font-size: 1.8rem; } .txt_pi{ font-size: 1.3rem; } .g_anchor{ width: 100%; padding: 30px 61px 30px 30px; color: #E35E84; border: 2px solid; border-radius: 10px; font-size: 1.8rem; font-weight: 600; } .g_anchor.g_ic_circle_30::before{ width: 30px; height: 30px; right: 30px; } .g_anchor.g_ic_circle_pi.g_ic_arrow.g_ic_circle_30::after { right: 42px; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg); } /* フリーページ ------------------------------------ */ /* about */ .about-explanation-img{ max-width: 300px; } .about-explanation-txt{ margin-top: 20px; font-size: 1.4rem; } /* faq */ .faq_box:not(:first-of-type){ margin-top: 10px; } .faq .btm-section-title{ margin: 30px 0 30px; } .faq_anchor{ margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); } .faq_anchor .g_anchor{ padding: 0 61px 0 30px; } .faq_box_ttl{ font-size: 1.8rem; } /* layout ------------------------------------ */ .l_grid_1_pc{ grid-template-columns: repeat(1, 1fr); } .l_grid_2_pc{ grid-template-columns: repeat(2, 1fr); } .l_grid_3_pc{ grid-template-columns: repeat(3, 1fr); } .l_grid_4_pc{ grid-template-columns: repeat(4, 1fr); } .l_grid_5_pc{ grid-template-columns: repeat(5, 1fr); } .l_gap_10_pc{ gap: 10px; } .l_gap_20_pc{ gap: 20px; } .l_gap_30_pc{ gap: 30px; } .l_gap_40_pc{ gap: 40px; } .mt_10_pc{ margin-top: 10px!important; } .mt_20_pc{ margin-top: 20px!important; } .mt_32_pc{ margin-top: 32px!important; } .mt_30_pc{ margin-top: 30px!important; } .mt_40_pc{ margin-top: 40px!important; } .mt_50_pc{ margin-top: 50px!important; } .mt_80_pc{ margin-top: 80px!important; } /* general ------------------------------------ */ .g_sp{ display: none; } .g_pc{ display: block; } .contents-section-title { font-size: 2.2rem; } .g_btn{ height: 60px; width: 273px; } .header-member .g_btn{ margin-top: 30px; } .guide_entry_btn.g_btn { height: 90px; width: 33.33%; min-width: 315px; font-size: 18px; padding-right: 20px; } } @media (max-width: 999px) { .sp-only .header-user-name{ flex-direction: column; gap: 0; } /* top */ .contents-item-price { font-size: 2rem; } .item-sale-price { flex-direction: column; } /* footer */ .footer-nav-other { flex-direction: column; align-items: center; } .footer-nav-other-wrapR{ margin-top: 10px; padding-left: 0; } .footer-nav-other-wrapL a:last-of-type, .footer-nav-other-wrapR a:last-of-type{ border-right: none; padding-right: 0; } .footer-nav-other-wrapL a:not(:first-of-type){ padding-right: 2.2rem; } .footer-wrapper-inr { flex-direction: column; gap: 20px; padding: 50px 15px; } .footer-link-wrapper{ gap: 60px; } .footer-link-wrapperL, .footer-link-wrapperR{ gap: 20px; flex-wrap: wrap; } .footer-link-wrapper .footer-link-ttL:not(:first-of-type){ margin-top: 20px; } .footer-link-wrapper .footer-link-ttM:not(:first-of-type){ margin-top: 15px; } .footer-special-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; } /* スライダー */ .slick-dots{ padding: 0 30px; width: 100%; } .slick-dots li{ position: relative; display: inline-block; width: 20%; height: 2px; margin: 0 0px; padding: 0; cursor: pointer; } .slick-dots li button::before{ width: 100%; background-color: #E1E1E1; border-radius: 0; } .slick-dots li.slick-active button::before{ width: 100%; background-color: #E35E84; color: #E35E84; } .slick-initialized .slick-slide img{ width: 100%; } .slick-dotted.slick-slider{ margin: 0 calc(50% - 50vw); width: 100vw; margin-top: 20px; margin-bottom: 70px; } } @media screen and (min-width: 1000px) { .sp-only { display: none!important; } .pc-only { display: block!important; } .footer-logo { max-width: 200px; width: auto; } .footer-logo img { max-height: 44px; } .footer-info-address span{ font-size: 14px; } .footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; padding: 30px 0; } .footer-nav-category { height: 0; } .footer-nav-category li { background: none; margin: 0; padding: 0; } .footer-nav-category > li { margin: 0 40px 30px 0; } .footer-nav-category > li > a { display: inline-block; font-size: 14px; margin-bottom: 20px; } .footer-nav-sub-category { display: block; } .footer-nav-sub-category li { margin-bottom: 15px; } .footer-nav-sub-category li:last-child { margin-bottom: 0; } .footer-nav-sub-category a { font-size: 14px; font-weight: 300; } .footer-nav-other a { font-size: 14px; } .copyright { padding: 10px 0 20px; } /* スライダー */ .slick-track{ margin-left: 0!important; margin-right: auto; } /* side-nav */ .side-nav { display: block; margin-right: 60px; width: 200px; min-width: 200px; } .side-nav-search { display: -webkit-box; display: -ms-flexbox; display: flex; height: 46px; font-size: 1.4rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; } .side-nav-search-input{ width: 81.5%; } .side-nav-search-input input { border-radius: 4px 0 0 4px; font-size: 1.4rem; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; height: 46px; padding-left: 10px; width: 100%; } .side-nav-search-input input::placeholder{ color: #666; } .side-nav-search-btn{ width: 18.5%; } .side-nav-search-btn a { background-size: 16px 14px; background: #E35E84 url(https://www.urbancosme.co.jp/view/images/template/10/icon-search.png) no-repeat center center/19px 17px; border-radius: 0 5px 5px 0; display: block; height: 100%; } .side-nav-title{ font-size: 1.6rem; font-weight: 700; } .side-nav { display: block; margin-right: 60px; width: 200px; } .side-nav-first-category{ font-size: 1.6rem; font-weight: 700; padding: 10px 0; margin-top: 45px; } .side-nav-second-category{ font-size: 1.4rem; padding: 10px 0; font-weight: 600; } .side-nav-third-category, .side-nav-last-category{ padding: 10px; } .side-nav-third-category{ font-size: 1.3rem; font-weight: 500; cursor: pointer; } .side-nav-last-category{ font-size: 1.2rem; } .side-nav-category > li:last-child { border-bottom: none; } .side-nav-sub-category .js_acd .sub-category-ico{ position: relative; } .side-nav-sub-category .js_acd .sub-category-ico::after{ content: ""; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; border-right: 1px solid #333333; border-bottom: 1px solid #333333; transform: translateY(-50%) rotate(45deg); } .side-nav-sub-category .js_acd.js_open a::after{ transform: translateY(-50%) rotate(-135deg); } .side-nav-category a { display: block; padding-right: 20px; } .side-nav-category > li > a, .side-nav-sub-category li { } .side-nav-category > li > a:last-child, .side-nav-sub-category li:last-child { margin-bottom: 0; } .other-item { padding: 80px 0 0; } .other-item-inner { margin: 0 auto; } .other-item-list li { margin: 0 20px 0 0; width: 184px; } .other-item-list li:nth-child(3n) { margin-right: 20px; } .other-item-list li:nth-child(n+5) { margin-right: 0; } .other-item-list li:nth-child(n+6) { display: none; } .other-item-img { height: 184px; } .other-item-name { min-height: 54px; font-size: 14px; line-height: 18px; margin-bottom: 10px; } .other-item-price { font-size: 14px; font-weight: 600; } .pc-breadcrumb { display: block; } .sp-breadcrumb { display: none; } .breadcrumb-list { padding: 0; } /* 商品レイアウト */ .contents-item-list { grid-template-columns: repeat(5,1fr); gap: 20px 30px; margin-top: 20px; } .other-item-more { grid-template-columns: repeat(5,1fr); gap: 20px 30px; margin-top: 20px; } .not_item_txt{ font-size: 14px; } .reco_ranking_no{ padding: 8px 12px 2px; font-size: 1.5rem; } .contents-item-name { /* -webkit-line-clamp: 2;*/ font-size: 14px; margin-bottom: 10px; } _:-ms-lang(x)::-ms-backdrop, .contents-item-name { display: block; max-height: 32px; line-height: 18px; } } @media screen and (max-width: 417px) { .footer-special-box{ display: grid; grid-template-columns: repeat(2,1fr); } } @media screen and (min-width: 1148px) { .header-logo { height: 44px; flex-direction: row; align-items: center; gap: 1.2vw; } } @media screen and (min-width: 1420px) { /* faq */ .faq_anchor{ grid-template-columns: repeat(5,1fr); } } .icon-cart-num-position { left: auto; } @media screen and (min-width: 1000px) { /* faq */ .icon-cart-num-position { right: 10px; } } @media screen and (max-width: 999px) { .icon-cart-num-position{ right: 0px; } } /* カレンダー　*/ .side-attention { width: min(100%, 320px); margin-block: 30px; margin-inline: auto; padding-block: .6em; border: 3px solid #E35E84; border-radius: 10px; font-size: 13px; line-height: 1.7; letter-spacing: 0.06em; text-align: center; color: #333; } .urban-calendar { width: min(100%, 320px); margin-block: 30px; margin-inline: auto; } .urban-calendar h2 { width: fit-content; margin-bottom: 8px; margin-inline: auto; padding: .2em .8em; border-radius: 20px; font-size: 14px; font-weight: 700; text-align: center; color: #fff; background-color: #E35E84; } /* カレンダーのサイズ設定 */ .makeshop-calendar1, .makeshop-calendar2 { width: 100%; margin: 0 auto 16px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } /* テキスト位置・罫線設定 */ .makeshop-calendar1 th, .makeshop-calendar1 td, .makeshop-calendar2 th, .makeshop-calendar2 td { box-sizing: border-box; text-align: center; /*border: 1px solid #e6e6e6;*/ } /* 【曜日】テキストの太さ・背景設定 */ .makeshop-calendar1 th, .makeshop-calendar2 th { background: #fbfbfb; font-weight: bold; padding: 10px 0; } /* 【日付】テキストの太さ・背景設定 */ .makeshop-calendar1 td, .makeshop-calendar2 td { background: #fff; font-weight: bold; padding: 25px 0; } /* 【今日】テキストの太さ・背景設定 */ .makeshop-calendar1 td.today, .makeshop-calendar2 td.today { background-color: #57886C; color: #fff; } /* 【日曜日】の設定 */ .makeshop-calendar1 th.sunday, .makeshop-calendar2 th.sunday { background: #f0808073; } /* 【日曜日】日付の設定 */ .makeshop-calendar1 tbody td.sunday, .makeshop-calendar2 tbody td.sunday { background: #f0808073; } /* 【土曜日】の設定 .makeshop-calendar1 th.saturday, .makeshop-calendar2 th.saturday { color: #fff; background: #6495ed; } /* 【土曜日】日付の設定 .makeshop-calendar1 tbody td.saturday, .makeshop-calendar2 tbody td.saturday { background: #6495ed36; } */ /* 【月曜日】の設定 */ .monday { color: black; } /* 【火曜日】の設定 */ .tuesday { color: black; } /* 【水曜日】の設定 */ .wednesday { color: black; } /* 【木曜日】の設定 */ .thursday { color: black; } /* 【金曜日】の設定 */ .friday { color: black; } /* 【土曜日】の設定 */ .saturday { color: black !important; } @media screen and (max-width: 640px){ .makeshop-calendar1, .makeshop-calendar2 { width: 100%; } .makeshop-calendar1 th, .makeshop-calendar1 td, .makeshop-calendar2 th, .makeshop-calendar2 td { font-size: 14px; } } .banner { padding-inline: 15px; } .contents-wrapper .banner { padding-inline: 0; } .fixed-nav-sp { position: fixed; inset: 0 0 auto; border-bottom: 1px solid #e5e5e5; background-color: #fff; z-index: 1000; } .fixed-nav-sp.is-invisible { visibility: hidden; opacity: 0; pointer-events: none; } .fixed-nav-sp .fixed-nav { width: 100%; padding-block: 10px; } .fixed-nav-sp .fixed-nav-list { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; } .fixed-nav-sp .fixed-nav-list li { -webkit-box-flex: 0; flex: 0 0 14.285%; max-width: 14.285%; } .fixed-nav-sp .fixed-nav-list li a { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .fixed-nav-sp .fixed-nav-list li a .nav-text { font-size: 10px; } .fixed-nav-sp .fixed-nav-list li a .nav-text.pt { padding-top: 2px; } .fixed-nav-sp .fixed-nav-list li:nth-child(5) a { padding-top: 2px; } .fixed-nav-sp .fixed-nav-list li:nth-child(6) a { gap: 3px 0; } .fixed-nav-sp .fixed-nav-list li a .icon-image { width: 24px; } .fixed-nav-sp .fixed-nav-list li.icon-hamburger { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; gap: 6px 0; padding-top: 6px; } .fixed-nav-sp .fixed-nav-list li.icon-cart a { position: relative; } .fixed-cart-btn { display: none; position: fixed; inset: auto 0 0; width: 100%; padding: 8px 12px 14px; -webkit-transition-property: display, opacity; transition-property: display, opacity; transition-behavior: allow-discrete; -webkit-transition-duration: 1s; transition-duration: 1s; z-index: 9999; } @starting-style { .fixed-cart-btn { opacity: 0; display: none; } } .fixed-cart-btn[data-show=true] { display: block; opacity: 1; } .fixed-cart-btn a { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 100%; height: 60px; border: 1px solid #ffd814; border-radius: 12px; font-size: 17px; letter-spacing: 0.1em; background-color: #ffd814; -webkit-transition: box-shadow 0.25s ease-in-out; transition: box-shadow 0.25s ease-in-out; } body:has(.fixed-cart-btn[data-show=true]) { padding-bottom: 82px; } .totop { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: fixed; inset: auto 20px 20px auto; width: 50px; height: 42px; padding-top: 16px; background-color: #666; -webkit-transition-property: display, opacity; transition-property: display, opacity; transition-behavior: allow-discrete; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; z-index: 989; } @starting-style { .totop { opacity: 0; } } .totop button { display: grid; place-items: center; position: relative; } .totop button::before { content: ""; position: absolute; inset: -14px 0 auto; width: 10px; height: 10px; margin-inline: auto; background-color: transparent; border-top: 2px solid #fff; border-left: 2px solid #fff; rotate: 45deg; } .totop button span { color: #fff; } @media (any-hover: hover) { .fixed-cart-btn a:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } } @media (min-width: 1000px) { .totop { display: none !important; } } /* フッター上info */ .info-block { width: min(100%, 720px); margin-inline: auto; padding: 30px 15px; background-color: #F7F7F5; box-shadow: 0 0 0 100vmax #F7F7F5; clip-path: inset(0 -100vmax); } .info-block:first-of-type { margin-top: 80px; } .info-block .info-title { position: relative; width: fit-content; margin-bottom: 20px; margin-inline: auto; font-size: 16px; font-weight: 700; } .info-block .info-title::before { content: ""; position: absolute; inset: 0 calc(100% + 15px) 0 auto; width: 24px; height: 1px; margin-block: auto; background-color: #E35E84; } .info-block .info-title::after { content: ""; position: absolute; inset: 0 auto 0 calc(100% + 15px); width: 24px; height: 1px; margin-block: auto; background-color: #E35E84; } .info-block .info-subtitle { margin-block: 18px 10px; font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: 0.06em; } .info-block .info-text { font-size: 14px; font-weight: 400; line-height: 1.6; } .info-block .info-text a { text-decoration: underline; text-underline-offset: 3px; } .info-block .info-text a:hover { text-decoration: none; } .info-block .credit { width: min(100%, 500px); margin-block: 20px; } .info-block .delivery-list { margin-block: 10px 20px; } .info-block .delivery-list li { font-size: 13px; font-weight: 400; line-height: 1.6; } .info-block .shipping-list { margin-block: 0 20px; } .info-block .shipping-list li { font-size: 13px; font-weight: 400; line-height: 1.6; } .info-block .map { width: min(100%, 520px); margin-block: 20px; } .productWidget_title,.reviewWidget_title,.u_komi_qa_title { font-size: 2.4rem !important; }