/* debag */ #fs_preview_header {display: none;} /* reset ---------------------------------------------------------- */ .fb_iframe_widget {line-height: 1em;} /* title */ .fs-c-subSection__title {line-height: 2em;} /* productThumbnail */ .fs-c-productThumbnail__image__caption,.fs-c-productCarouselMainImage__thumbnail__caption {display: none;} .fs-c-productCarouselMainImage__thumbnailList {flex-wrap: wrap;} /* btn */ .fs-c-button--particular {box-shadow: none;} /* form */ .fs-c-dropdown::after {display: none; content: "";} .fs-c-checkout-communicationTextarea {min-height: 20em;font-size: 1em;} /* Layout */ .fs-c-panelContainer {flex-basis: unset; min-width: auto; margin: auto;} .fs-c-panelContainer .fs-c-panel { max-width: 1168px; margin: 25px auto 20px auto;} /* ぱんくず */ .fs-c-breadcrumb__list {line-height: 1.5;} /* COLOR */ .fs-p-cartItemNumber {background: #bd0711;} .fs-c-cartBundleInfo__title{background: #FFF;} /* 購入画面 */ .fs-c-radio__radioLabelText {line-height: 1;padding: 1em 0;} /* ヘッダーエリアシンプル（PC） */ .fs-p-logo__image {width: 60px; height: 60px;} .fs-p-logo {padding-top: 25px;} @media screen and (max-width: 750px) { .fs-c-panelContainer {padding-left: 24px;padding-right: 24px;line-height: 1.5;margin-bottom: 0;} } /* common ---------------------------------------------------------- */ body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-feature-settings:"palt"; font-family: Helvetica Neue, Helvetica, Helvetica, Arial, YuGothic, Yu Gothic, sans-serif; color: #333333; background: #fff; font-size: 1.5rem; line-height: 2em; margin-top: 90px; } p {margin: 0;} html, body, div, span, object, iframe, img, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; vertical-align:bottom; background:transparent; } body a:hover {opacity: 0.8;text-decoration: none;} .pc_only {display: block;} .sp_only {display: none;} .mb10{margin-bottom:10px;} .mb20{margin-bottom:20px;} .mt50{margin-top:50px;} .lh15{line-height:1.5em;} .pd5{padding:5px;} @media screen and (max-width: 750px) { .pc_only {display: none;} .sp_only {display: block;} } /* section ---------------------------------------------------------- */ section { width: 100%; padding: 30px 10px;} section section { padding: 25px 0px;} section.fs-l-pageMain{ padding: 30px 0px;} section h2 { font-size: 2.2em; font-weight: bold; text-align: center; margin-bottom: 8px; } section h3 { font-size: 1.1em; font-weight: bold; text-align: center; margin-bottom: 20px; } section p {text-align: center; line-height:1.5em;} section small { font-size: 0.8em; line-height: 1.5em; text-align: center; display: inherit; } section:after {clear: both;content: '';display: block;} section.category_top_title h2{ font-size: 1.9em; text-decoration:underline solid #bd0711;} section.category_top_title h1{ font-size: 1.9em; text-align: center; line-height: 1.3em;} section.category_top_title h1 span{color: #bd0711; display: block;} @media screen and (max-width: 750px) { section section { padding: 15px 0px;} section h2 { font-size: 1.4em;} section.fs-l-pageMain{ padding: 30px 10px} section.category_top_comment h2 { font-size: 1.2em; line-height: 1.5em;} section.category_top_title h2{ font-size: 1.5em; text-decoration:underline solid #bd0711;} section.category_top_title h1{ font-size: 1.2em; text-align: center; line-height: 1.3em;} } /* Layout ---------------------------------------------------------- */ .fs-l-main {max-width: 100%; padding: 0px; margin:0 auto; } .wrap {width: 1168px; margin: 0 auto;} .fs-l-pageMain{width: 1168px; margin: 0 auto;} .fs-l-pageMain.fullwide{width: 100%; max-width: 100%; } .fs-l-pageMain.fullwide .fs-c-productList{width: 1168px; margin: 0 auto;} .fs-c-breadcrumb {margin-bottom: 0px;} .fs-c-documentColumn__content p{text-align: left;} .fs-c-inputField__explanation{font-size:small; line-height:1.5em;} @media screen and (max-width: 750px) { .wrap, .fs-l-pageMain.fullwide .fs-c-productList {width: 100%;} } @media screen and (min-width: 750px) { .w60{width:60%;} } /* Parts ---------------------------------------------------------- */ /* pageTop */ #pageTop { position: fixed; right: 8px; bottom: 8px; width: 56px; height: 56px; z-index: 99; } /* heading */ .fs-p-heading--lv2 {font-size: 1.2em; line-height: 2em; font-weight: bold; color: #333333; margin-bottom: 30px; border-bottom: #ac251f solid 1px; text-align: left;} .fs-p-heading--lv3 {font-size: 1.2em; line-height: 2em; font-weight: bold; color: #333333; margin-bottom: 10px; text-align: left;} .fs-c-heading--page, .fs-c-wishlistProduct__title,.fs-c-featuredProduct__title {font-size: 1.2em; line-height: 2em; font-weight: bold; color: #333333; margin: 0 0 24px; border-bottom: #ac251f solid 1px; padding: 0; text-align: left;} .fs-c-documentColumn__heading{background: #f2f3f5;margin-bottom: 10px;padding: 10px;text-align: left;border: none;color: #333333;font-size: 1.1em;font-weight: bold;} .fs-c-featuredProduct__title span{margin: 0 0 0 1em;} /* heading system_DesignSettings */ .CrossHead {font-size: 1.2em; line-height: 2em; font-weight: bold; color: #333333; margin: 0 0 24px; border-bottom: #ac251f solid 1px; padding: 0; text-align: left;} .Definition {font-size: 1em; font-weight: bold; padding: 5px 0px; margin:20px 0 5px 0; border-bottom:2px dotted #DDDDDD; border-color: #bd0711;} /* product */ .fs-c-productNameHeading{font-size: 1.8em; font-weight: nomal;} .fs-p-productDescription{} .fs-p-productDescription h2 {font-weight: bold;} .fs-p-productDescription dl dt { font-size: 0.6em; } .fs-p-productDescription dl dd { font-size: 0.9em; line-height: 1.5rem; padding-bottom: 16px; margin: 0;} /* btn */ .btn,.btn:hover,.btn:visited{ width: 400px; display: block; font-size: 1.1em; color: #fff; background: #bd0711; padding: 10px; border-radius: 30px; border: none; text-align: center; margin: 20px auto; } .btn:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .btn.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .btn { width: 80%; margin: 20px auto; font-size: 1.0em; line-height: 1.2;} } /* btn_left */ .btn_left,.btn_left:hover,.btn_left:visited{ width: 400px; display: block; font-size: 1.1em; color: #fff; background: #bd0711; padding: 10px; border-radius: 30px; border: none; text-align: center; margin: 20px; } .btn_left:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .btn_left.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .btn_left { width: 80%; margin: 20px auto;line-height: 1.2;} } /* btn_white */ .btn_w,.btn_w:hover,.btn_w:visited{ width: 350px; display: block; font-size: 1.1em; color: #bd0711; background: #fff; padding: 10px; border-radius: 30px; border: solid 3px #bd0711; text-align: center; margin: 0 auto; } .btn_w:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .btn_w.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .btn_w { width: 80%; margin: 0 auto;line-height: 1.2;} } /* btn_mio */ .btn_mio,.btn_mio:hover,.btn_mio:visited{ width: 200px; display: block; font-size: 1.1em; color: #bd0711; background: #fff; padding: 5px; border-radius: 30px; border: solid 3px #bd0711; text-align: center; margin: 20px auto; } .btn_mio:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .btn_mio.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .btn_mio { width: 80%; margin: 20px auto; padding:5px 0; line-height: 1.2; font-size: 1.0em;} } /* sq_btn */ .sq_btn,.sq_btn:hover,.sq_btn:visited{ width: 500px; display: block; font-size: 1.1em; color: #333; background: #fff; padding: 5px; border: solid 1px #333; text-align: center; margin: 20px auto; } .sq_btn:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .sq_btn.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .sq_btn { width: 80%; margin: 20px auto; padding:5px 0; line-height: 1.2; font-size: 1.0em;} } /* sq_btn_left */ .sq_btn_left,.sq_btn_left:hover,.sq_btn_left:visited{ width: 300px; display: inline-block; font-size: 1.1em; color: #333; background: #fff; padding: 5px; border: solid 1px #333; text-align: center; margin: 20px; } .sq_btn_left:hover { opacity: 0.8; } .fs-c-button--primary {line-height: 1em;padding: 0.8em 1.6em;} .sq_btn_left.glay{background: #999;} .buttonPrev,.buttonPrev:hover,.buttonPrev:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} .buttonNext,.buttonNext:hover,.buttonNext:visited{display: block; font-size: 1.1em; color: #fff; background: #aaa; padding: 10px; border-radius: 30px; border: none; text-align: center;} @media screen and (max-width: 750px) { .sq_btn_left,.sq_btn_left:hover,.sq_btn_left:visited { width: 80%; display:block; margin: 20px auto; padding:5px 0; line-height: 1.2; font-size: 1.0em;} } /* link */ .link_arw, a.fs-c-textLink, a.fs-c-viewAllProductsLink, .fs-c-accountService__page--accountDelete a.fs-c-accountService__pageLink{ position: relative; display: inline-block; padding-right: 10px; vertical-align: middle;} .link_arw::after, a.fs-c-textLink::after, a.fs-c-viewAllProductsLink::after, .fs-c-accountService__page--accountDelete a.fs-c-accountService__pageLink::after{ position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle; right: 0; width: 4px; height: 4px; border-top: 1px solid #ac251f; border-right: 1px solid #ac251f; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* breadcrumb */ .fs-c-breadcrumb {margin: 0px auto; padding: 0px; max-width: 1168px;} .fs-c-breadcrumb a{color: #bd0711;} @media screen and (max-width: 750px) { .fs-c-breadcrumb {margin-bottom: 0px; padding-left: 10px; padding-right: 10px;} } /* Table */ .userTable_02 { border-top:1px solid #DDDDDD; border-left:1px solid #DDDDDD; width:100%; margin-bottom:10px; } .userTable_02 caption { padding:5px; text-align:center; background:#DDDDDD; } .userTable_02 th { font-weight:normal; background:#F6F6F6; border-bottom:1px solid #DDDDDD; border-right:1px solid #DDDDDD; padding:3px 5px; vertical-align: middle; line-height: normal;} .userTable_02 td { border-bottom:1px solid #DDDDDD; border-right:1px solid #DDDDDD; padding:3px 5px; vertical-align: middle; line-height: normal;} /* form */ #fs_form { margin: 50px 0 15px; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 750px) { #fs_form { margin: 24px 0 15px; } } form .inputSet { background: #edeff1; } form input, form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 1em; line-height: 1.2; border: none; outline: 0; border-radius: 0; height: 45px; background: #fff; box-sizing: border-box; border: 1px solid #cccccc;} form input[type="submit"], form input[type="button"], form select[type="submit"], form select[type="button"] { background: #edeff1 url(https://replug.itembox.design/item/search_g.svg?t=20250513165337) no-repeat; background-position: center; background-size: 60%; width: 45px; height: 45px; border: none;} form input[type="checkbox"], form select[type="checkbox"] { background: url(https://replug.itembox.design/item/check_off.svg?t=20250513165337) no-repeat; background-position: center; background-size: 100%; width: 18px; height: 18px; } form input[type="checkbox"]:checked,form select[type="checkbox"]:checked { background: url(https://replug.itembox.design/item/check_on.svg?t=20250513165337) no-repeat; background-size: 100%; background-position: center; width: 18px; height: 18px; } form input[type="text"], form select[type="text"] { padding: 0 20px; width: 100%; font-size: 16px;} form input[type="email"], form select[type="email"] { width: 100%; padding: 0 20px; font-size: 16px;} form input[type="radio"], form select[type="radio"] { background: url(https://replug.itembox.design/item/radio_off.svg?t=20250513165337) no-repeat; background-position: center; background-size: 100%; width: 18px; height: 18px; } form input[type="radio"]:checked, form select[type="radio"]:checked { background: url(https://replug.itembox.design/item/radio_on.svg?t=20250513165337) no-repeat; background-size: 100%; background-position: center; width: 18px; height: 18px; } form input[type="tel"], form select[type="tel"] { width: 100%; padding: 0 20px; } form input[type="password"], form select[type="password"] { width: 100%; padding: 0 20px; } form input:focus, form select:focus { outline: none; } form select,.fs-c-dropdown__menu { background-image: url(https://replug.itembox.design/item/select.svg?t=20250513165337); background-repeat: no-repeat; background-position: right 16px bottom 50%; background-size: auto 40%; padding-left: 15px; width: 100%; background-color: #fff;} form textarea { display: block; width: 100%; height: 160px; padding: 20px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 16px; outline: 0; border-radius: 10px; } form .fs-c-inputTable .fs-c-dropdown__menu {border: 1px solid #cccccc;} form .fs-c-productSelection__name {font-size: 1.2rem;line-height: 1.6;padding: 5px;} form .fs-c-requiredMark {color: #bd0711;height: 2em;} .fs-body-register .fs-c-inputTable__label[for="fs_input_password"]:after {content: "半角英数字を組み合わせて6文字以上で入力してください。";} /* #search */ #search { display: block; z-index: 999; width: 100%;} #search a { color: #bd0711; } #search form { margin: 0; } #search form input[type="text"] { background: #edeff1; width: calc(100% - 50px); border: none; } #search form input[type="submit"] { cursor: pointer; float: right; } /* #search spMenu*/ .spMenu #search { padding-top: 20px; margin-left: 15px; margin-right: 15px; margin-bottom: 15px; width: auto;} /* .fs-l-header nav pcMenu */ .fs-l-header{ height: 120px; padding: 0px;} .fs-l-header nav { position: fixed; z-index: 1000; width: 100%; top: 0; background: #fff; } .fs-l-header nav .navCon { margin: auto; width: 1170px; height: 120px; position: relative; z-index: 1000; display: flex; display: -webkit-flex;justify-content: space-between;-webkit-align-items: center;align-items: center;} .fs-l-header nav .navCon #navLogo { position: relative; left: 0; top: 0; line-height: 0;} .fs-l-header nav .navCon #navLogo img { width: 60px; height: 60px; } .fs-l-header nav .navCon h1 {display: none;} .fs-l-header nav .navCon .pcMenu {display: flex; display: -webkit-flex; width: 1170px;margin: 0;padding: 0;} .fs-l-header nav .navCon .pcMenu li { text-align: center; position: relative; font-size: 1.2em; line-height: 1.2em; font-family: "Roboto", Helvetica Neue, Helvetica, Arial, YuGothic, Yu Gothic, sans-serif; width: 100%; height: 35px; list-style: none;font-weight:400;} .fs-l-header nav .navCon .pcMenu li::before {content: "";position: absolute;left: 100%;top: 50%;margin-top: -10px;display: inline-block;width: 1px;height: 20px;background-color: rgb(226, 227, 231);} .fs-l-header nav .navCon .pcMenu li:nth-child(n+7)::before {width: 0px;} .fs-l-header nav .navCon .pcMenu li a {font-size: 1em;} .fs-l-header nav .navCon .pcMenu li smale {display: block;font-size: 0.7em;} .fs-l-header nav .navCon .pcMenu li.mypage { width: 65px; min-width: 65px;margin-left: 24px;} .fs-l-header nav .navCon .pcMenu li.mypage img{ width: 41px;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo { display: none; color: #fff; position: absolute; padding: 0px 16px; background: #bd0711; border-radius: 0 10px 10px; width: 180px; text-align: left; top: 40px;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo p { font-size: 0.8em;margin:0px; } .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo a { display: block; padding: 16px 0; font-size: 0.9em; color: #fff; border-top: #fff solid 1px; } .fs-l-header nav .navCon .pcMenu li.mypage:hover .fs-clientInfo { display: block; } .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo .logIn.my-true{display: block;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo .logIn.my-false{display: none;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo .logOut.my-true {display: none;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo .logOut.my-false {display: block;} .fs-l-header nav .navCon .pcMenu li.mypage .fs-clientInfo .logOut.my-false a{border-top: none;} .fs-l-header nav .navCon .pcMenu li.cart {width: 43px; min-width: 43px;} .fs-l-header nav .navCon .pcMenu li.cart a{padding: 0;} .fs-l-header nav .navCon .pcMenu li.cart img{width: 42px;} .fs-l-header nav .navCon .pcMenu li.cart .fs-p-cartItemNumber{top:-8px;right: -5px;font-size: 0.8em;} .fs-c-pairList {display:none;} /* Topics */ .fs-l-header#topics nav .navCon .pcMenu li.mypage:hover .fs-clientInfo, .fs-l-header#topics nav #navMenu, .fs-l-header#topics a.navLoginBtn {display: none;} .fs-l-header#topics a.navLoginBtnTopics {display: block;right: 56px;} .fs-l-header#topics nav #navCart {right: 15px;} /* ヘッダーエリアシンプル（PC） */ .fs-l-header--min{margin-bottom: 20px;} nav #navCart{display: none;} nav #navLogin { display: none; } nav .spMenu.fs-clientInfo.is-ready { display: none; !important} nav ul {list-style: none;margin: 0;padding: 0;border: 0;} ul#siteLinksList { display: none; } /* nav spMenu */ @media screen and (max-width: 750px) { .fs-l-header {height: 60px;} .fs-l-header nav .navCon { width: 100%; margin: auto; height: 60px; position: relative; z-index: 1000; } .fs-l-header nav .navCon h1 {display: block; position: absolute;top: 9px;left: 67px;font-size: 10px;line-height: 1.5;font-feature-settings: "palt"; margin: 0; font-weight: bold;} .fs-l-header nav .navCon .pcMenu li{display: none;} .fs-l-header nav .navCon #navLogo {display: inline-block;position: absolute;left: 15px;top: 8px;} .fs-l-header nav .navCon #navLogo img { width: 45px; height: 45px; } .fs-l-header nav #navMenu { width: 60px;height: 60px;display: block;position: absolute;right: 0px;z-index: 1000;} .fs-l-header nav #navMenu img { width: 60px; height: 60px; } .fs-l-header nav #navMenu.navOpen { background: url(https://replug.itembox.design/item/btn_menu.svg?t=20250513165337) no-repeat; background-size: 25px; background-position: top 16px center; } .fs-l-header nav #navMenu.navClose { background: url(https://replug.itembox.design/item/btn_close.svg?t=20250513165337) no-repeat; background-size: 25px; background-position: top 16px center; } nav #navLogin { display: block; } nav #navLogin > a.navLoginBtn, nav #navLogin > a.navLoginBtnTopics {width: 60px;height: 60px;background: url(https://replug.itembox.design/item/user_hdr.svg?t=20250513165337) no-repeat;background-size: 31px;background-position: top 9px center;position: absolute;top: 0px;right: 88px; display: block;} nav #navLogin > a.navLoginBtnTopics {display: none;} nav #navLogin > div { display: none; z-index: 1; background: #d0111b; position: fixed; top: 60px; width: 100%; box-sizing: border-box; padding: 0px 16px 0px; border-radius: 0 0 10px 10px;} nav #navLogin > div a { font-size: 1em; display: block; padding: 16px 0; color: #fff; border-top: #bd090f solid 1px; position: relative; } nav #navLogin > div a::before, nav #navLogin > div a::after { position: absolute; top: 50%; right: 12px; display: block; content: ''; width: 10px; height: 2px; background-color: #fff; border-radius: 3px; } nav #navLogin > div a::before { margin-top: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } nav #navLogin > div a::after { margin-top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } nav #navLogin > div p { font-size: 1em; display: block; padding: 16px 0; color: #fff; position: relative; } nav #navLogin > div .logIn.my-true {display:none;} nav #navLogin > div .logIn a {font-weight: bold;padding-left: 2em;} nav #navLogin > div .logIn a img { position: absolute; height: 24px; width: auto; top: 50%; -webkit-transform: translateY(-50%); /* Safari用 */ transform: translateY(-50%); left: 0; } nav #navLogin > div .logOut.my-false {display:none;} body.navLoginBtnOpen nav #navLogin > div {display: block;} body.navLoginBtnOpen nav #navLogin a.navLoginBtn { background: url(https://replug.itembox.design/item/user_hdr_on.svg?t=20250513165337) no-repeat; background-size: 31px; background-position: top 9px center; } nav #navCart { line-height: 0; display: inline-block; width: 40px; height: 60px; position: absolute; right: 55px; background: url(https://replug.itembox.design/item/cart.svg?t=20250513165337) no-repeat; background-size: 32px; background-position: top 12px center; } nav #navCart.sp .fs-p-cartItemNumber{top: 4px; right: -4px;font-weight: bold;} nav .spMenu a { color: #fff; padding: 0 12px; display: block; } nav .spMenu a.button { margin: 20px 0 60px; width: 100%; border: none; padding: 20px; background: #bd0711; color: #fff; font-size: 1em; cursor: pointer;} nav .spMenu .space { margin: 20px 0 60px; width: 100%; border: none; padding: 20px;} nav .spMenu #search .wrap { border: #fff solid 1px; width: 99%; } nav .spMenu.fs-clientInfo.is-ready { display: block; position: fixed; width: 90%; height: 100%; top: 60px; right: -100%; max-width: 400px; z-index: 1001; background: #d0111b; overflow: scroll; -webkit-overflow-scrolling: touch; } nav .spMenu .logInOut { margin-top: 10px; } nav .spMenu .logInOut.my-true .logIn {display: none;} nav .spMenu .logInOut .logIn { position: relative; padding: 12px; width: auto; text-indent: 32px; font-weight: bold; } nav .spMenu .logInOut .logIn::before, nav .spMenu .logInOut .logIn::after { position: absolute; top: 50%; right: 12px; display: block; content: ''; width: 10px; height: 2px; background-color: #fff; border-radius: 3px; } nav .spMenu .logInOut .logIn::before { margin-top: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } nav .spMenu .logInOut .logIn::after { margin-top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } nav .spMenu .logInOut .logIn img { position: absolute; height: 24px; width: auto; margin-right: 0.3em; top: 16px; left: 12px; } nav .spMenu ul { display: block; margin-bottom: 24px; } nav .spMenu ul li { padding-left: 0; padding-top: 12px; padding-bottom: 12px; border-bottom: #bd090f solid 1px; } nav .spMenu ul li a { position: relative; display: block; } nav .spMenu ul li a::before, nav .spMenu ul li a::after { position: absolute; top: 50%; right: 12px; display: block; content: ''; width: 10px; height: 2px; background-color: #ffffff; border-radius: 3px; } nav .spMenu ul li a::before { margin-top: -3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } nav .spMenu ul li a::after { margin-top: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } nav .spMenu #spMenu_itemList2 { width: 100%; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; margin-bottom: 24px; } nav .spMenu #spMenu_itemList2 a { line-height: 0; height: 22vw; margin-bottom: 15px; width: 100%;} nav .spMenu #spMenu_itemList2 figure { position: relative; overflow: hidden; height: 22vw; width: 100%; margin: 0;} nav .spMenu #spMenu_itemList2 figure::before { background-color: black; opacity: 0.4; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; } nav .spMenu #spMenu_itemList2 figure figcaption { position: absolute; width: 100%; line-height: 1.5rem; color: #fff; z-index: 997; text-align: center; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); } nav .spMenu #spMenu_itemList2 figure img { width: 100%; object-fit: cover; height: 22vw; } nav .spMenu #spMenu_itemList3 { padding-bottom: 30px; } nav .spMenu #spMenu_itemList3 li { padding-left: 0px; padding-top: 5px; padding-bottom: 5px; border-bottom: none; } nav .spMenu #spMenu_itemList3 li a { position: relative; display: inline-block; padding-right: 20px; } nav .spMenu #spMenu_itemList3 li a::before, nav .spMenu #spMenu_itemList3 li a::after { position: absolute; top: 50%; right: 5px; display: block; content: ''; width: 10px; height: 2px; background-color: #fff; border-radius: 3px; } nav .spMenu #spMenu_itemList3 li a::before { margin-top: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } nav .spMenu #spMenu_itemList3 li a::after { margin-top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } nav .spMenu #spMenu_itemList3 li:first-child a { font-weight: bold; margin-bottom: 20px; } body .nav-overlay a { position: fixed; z-index: 10; top: 60px; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.7); } body.navOpen .nav-overlay a { z-index: 999; display: block; opacity: 1 !important; } nav .SNSlink{margin-bottom:20px;} nav .SNSlink a{display: inline-block; margin: 0 0.5em 0;} nav .SNSlink a img{width:35px; margin-right:30px;} /* SP #siteLinksList */ ul#siteLinksList { width: 100%; display: table; background-color: #AAAAAA; padding: 0;margin: 0;top: 60px;position: fixed;} ul#siteLinksList li { width: calc(96%/5); list-style-type: none; border-right: 3px solid #ffffff; vertical-align: middle; display: table-cell; } ul#siteLinksList li a { font-size: 0.7em; font-weight: bold; color: #FFF; display: block; text-align: center; width: 100%; line-height: 1.1; padding-top: 0.9em; padding-bottom: 0.9em; } html.android ul#siteLinksList li a { font-size: 0.7rem; } } /* フッター */ footer { background: #edeff1; } footer #bnrArea figure { margin: 0 20px 20px; line-height: 1.5em; font-size: 0.9em; } footer #bnrArea figure img { width: 100%; } footer #spFoot { border-bottom: #d7d8db solid 1px; } footer #spFoot li { padding: 15px; border-top: #d7d8db solid 1px; } footer #spFoot li a { position: relative; display: block; } footer #spFoot li a::before, footer #spFoot li a::after { position: absolute; top: 50%; right: 5px; display: block; content: ''; width: 10px; height: 2px; background-color: #bd0711; border-radius: 3px; } footer #spFoot li a::before { margin-top: -3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } footer #spFoot li a::after { margin-top: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } footer #spFoot2 { padding-top: 30px; padding-bottom: 30px; } footer #spFoot2 li { padding-left: 15px; padding-top: 5px; padding-bottom: 5px; } footer #spFoot2 li a { position: relative; display: inline-block; padding-right: 20px; } footer #spFoot2 li a::before, footer #spFoot2 li a::after { position: absolute; top: 50%; right: 5px; display: block; content: ''; width: 10px; height: 2px; background-color: #bd0711; border-radius: 3px; } footer #spFoot2 li a::before { margin-top: -5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } footer #spFoot2 li a::after { margin-top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } footer #linkArea { padding: 50px 15px 20px; color: #fff; background: #bd0711; } footer #linkArea a { color: #fff; margin: 0 20px; display: block; } footer #linkArea ul { display: -webkit-flex; /* Safari */ display: flex; -webkit-justify-content: center; /* Safari */ justify-content: center; -webkit-align-items: center; /* Safari */ align-items: center; list-style: none; margin-bottom: 20px; } footer #linkArea ul li { margin: 0 20px; } footer #linkArea ul li img { width: 35px; height: 40px; } footer #linkArea p { margin-bottom: 40px; } @media screen and (min-width: 750px) { footer #bnrArea { display: -webkit-flex; /* Safari */ display: flex; -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; list-style: none; margin: 0 8px; padding-bottom: 30px; } footer #spFoot { display: none; } footer #spFoot2 { display: none; } footer #linkArea { text-align: center; } footer #linkArea a { display: inline; } } /* ページネーション */ .fs-c-pagination__item,.fs-c-pagination__item:visited {color: #bd0711;} .fs-c-pagination__item.is-active {color: #ffffff; background: #bd0711;} /* TOP送料無料テキスト */ .free_shipping_txt{background-color:#f2f3f5;} .free_shipping_txt p{font-weight: bold; text-align: center; vertical-align: middle; font-size: 1.0em; line-height: 1.5em; color:#333333;} @media only screen and (max-width: 750px){ .free_shipping_txt{margin-top:5px;} .free_shipping_txt p{font-size: 0.8em;} } .fs-p-banner--postage{margin-bottom: 30px;} /* キャンペーンバナー */ .campaign_img{text-align: center; margin-bottom: 5px;} @media only screen and (min-width: 750px){ .campaign_img img{width: 50%;} } @media only screen and (max-width: 750px){ .campaign_img img{width: 100%;} } /* 緊急告知パーツ ---------------------------------------------------------- */ .emergency_txt p{text-align: center; margin-top:50PX;} /* イベント見出し ---------------------------------------------------------- */ .event-top{font-size:1.8em; font-weight:bold; text-align:center; margin-bottom:8px;} /* 商品詳細ページ ---------------------------------------------------------- */ @media screen and (min-width: 960px) { .fs-l-product2 .fs-l-productLayout {display: grid; grid-template-columns: calc(60% - 50px / 2) calc(40% - 50px / 2);grid-gap: 50px;} } .fs-l-product2 #fs_form{margin-top: 0px; margin-bottom: 50px;} .fs-l-product2 .fs-l-productLayout p {text-align: left;} .fs-l-product2 .fs-l-productLayout h2 {text-align: left;font-size: 1.4em; line-height:1.5;} .fs-l-product2 .fs-l-productLayout #productDescription--full {padding-top: 0px;margin-bottom: 0px;} .fs-l-product2 .fs-c-variationCart__variationName__name{font-size: 0.8em;} .fs-l-product2 .fs-c-buttonContainer {padding: 0;} .fs-l-product2 .spec{font-size: 0.9em;line-height: 1.8; margin-top: 30px;} .fs-l-product2 .fs-c-button--addReview--detail{} .fs-c-button--plain:visited {color: #bd0711;} .fs-c-productPrice__main .fs-c-price__value{margin-right: 0.2em;} .fs-c-productQuantityAndWishlist select {min-width: 100px;} .fs-l-product2 .fs-c-productActionButton .fs-c-button--primary{margin-top: 15px; margin-bottom: 10px;} .fs-l-product2 .fs-c-featuredProduct{margin-bottom: 50px;} .fs-l-product2 .fs-p-productDescription {/* padding-top: 50px; */} .fs-l-product2 .fs-l-productLayout main > * > * {margin-bottom: 0px;} .fs-l-product2 .fs-l-productLayout #productDescription--full > * > * {margin-bottom: 0px;margin-bottom: 0px;} .fs-l-product2 .fs-l-productLayout > main > *, .fs-l-product2 .fs-l-productLayout > main > * > * {margin-bottom: 0;} .fs-l-product2 .fs-l-productLayout > main section {/* padding: 25px 0px; */} @media screen and (max-width: 750px) { .fs-l-product2 .fs-l-productLayout__item--2{margin-bottom: 50px;} .fs-l-product2 .fs-l-productLayout h2 {font-size: 1.3em; line-height:1.4;} } @media all and (-ms-high-contrast: none){ .fs-l-product2 .fs-l-productLayout {display: block; } .fs-l-product2 .fs-l-productLayout div {wide:60%} } .sg {padding-bottom:30px;} .sg table { with: 100%; border: #d7d8db solid 1px; } .sg table th { background: #f2f3f5; } .sg table td { padding: 10px; border: #d7d8db solid 1px; } .sg figcaption{padding:20px; line-height:1.8em;} @media screen and (max-width: 750px) { .sg figcaption{padding:10px;} } /* youtube */ .fs-l-product2 .youtube iframe { width: 100%; height: 380px;} section.youtube h4 {font-size: 1.6em;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;} section.youtube section{width: 60%;margin:0 auto; padding-top: 0;} section.youtube section p{margin-bottom: 1em;} .fluid-width-video-wrapper {z-index: -1;} @media screen and (max-width: 750px) { .youtube {width:100%;} .youtube iframe,.fs-l-product2 .youtube iframe{top:0;right:0;width:100%;height: 56.25vw;} section.youtube section{width: 100%;} section.youtube section p {text-align: left;} section.youtube section p br{display:none} } /* 商品詳細ページ 商品バナー */ ul.product-bnr li {list-style: none;margin-bottom: 1em;} ul.product-bnr li:last-child {margin-bottom: 0;} ul.product-bnr li a {border: 1px solid #777777;display: flex;flex-wrap: nowrap;} ul.product-bnr li .item-image {width: 35%;} ul.product-bnr li .item-image img {vertical-align: bottom;} ul.product-bnr li .item-text {display: flex;flex-wrap: wrap;flex: 1;justify-content: center;align-content: center;align-items: center;text-align: center;line-height: 1.8;padding-left: 5%;padding-right: 5%;} ul.product-bnr li .item-text p {width: 100%;text-align:center;} ul.product-bnr li strong {color: #bd0711; width: 100%;} ul.product-bnr li .link_arw {font-weight: bold;text-decoration: underline;} @media screen and (max-width: 750px) { ul.product-bnr li a {padding:0.5em;} ul.product-bnr li .item-text{font-size:0.9em; text-align: left; padding-right: 0;} ul.product-bnr li .item-text p{text-align: left; padding-right: 0;} ul.product-bnr li .item-text p br{display:none} } @media screen and (min-width: 750px) { ul.product-bnr.fullwide{width: 80%; margin: 0 auto;} } /* 商品詳細ページ おすすめ商品 */ .fs-c-productListCarousel__list__item { padding-bottom: 3em; } main.fs-l-product2 .fs-c-productListItem__control > *:last-child { margin-left: 0px; } /* ログイン ---------------------------------------------------------- */ body.fs-body-login .fs-c-subSection__title {font-size: 1.2em; line-height: 2em; font-weight: bold; color: #333333; margin: 0 0 24px; border-bottom: #ac251f solid 1px; padding: 0; text-align: left;} body.fs-body-login section p {text-align: left;} body.fs-body-login .fs-c-newUsers__message.fs-c-subSection__message{margin-bottom: 24px;} body.fs-body-login .fs-c-subSection {margin-bottom: 0;} /* マイページ ---------------------------------------------------------- */ .fs-c-button--myPageTop {width:100%;text-align: center;} .fs-c-button--myPageTop .fs-c-button__label { display: inline-block; font-size: 0.8em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 40px auto; border: 1px solid #bd0711; min-width: 240px; padding-top: 0.3em; padding-bottom: 0.3em;} @media screen and (max-width: 750px) { .fs-c-accountService > li {flex-basis: inherit; width: 47%;} .fs-c-accountService > li:last-child{display:block; width: 100%;height: auto;} } /* 注文履歴詳細パーツ（システムパーツ） */ .fs-c-orderDetail__data .fs-c-orderDetailList__date .fs-c-string--label, .fs-c-orderDetail__data .fs-c-time{color: #fff;} /* 商品一覧 */ .fs-c-productName__name{text-align: left; font-size: 1.2em;} .fs-c-productName__variation{text-align: left;} .fs-c-price__currencyMark, .fs-c-price__value {font-weight: bold;} .fs-c-productListItem__productDescription{line-height: 1.2;font-size: 0.8em;} .fs-c-button--plain.fs-c-button--addToCart--list::before, .fs-c-button--plain.fs-c-button--viewProductDetail::before{content: "";} .fs-c-button--addToCart--list.fs-c-button--plain, .fs-c-button--viewProductDetail.fs-c-button--plain {font-size: 0.7em; color: #FFF; font-weight: bold; padding-top: .5em; padding-bottom: .5em; border-radius: 5px; background-color: #bd0711; line-height: 1.2; text-align: center; width: 10em;} .fs-c-button--viewProductDetail.fs-c-button--plain {color: #bd0711; background-color: #edeff1;} .fs-c-productList__list {grid-auto-rows: minmax(29em, auto);} .fs-c-productList__list__item{position: relative;border: none; margin-bottom: 40px; padding: 16px 7px 33px 7px;} .fs-c-productListItem__control{ position: absolute;bottom: 0;} .fs-c-productListItem__control > *:last-child {margin-left: 10px;} #fs_ProductSearch .fs-c-productListItem__productName {margin-top: 0;} .fs-c-productPrices{line-height: 1.5;} @media all and (-ms-high-contrast: none){ .fs-c-productList__list__item {padding-bottom:45px} } @media screen and (max-width: 750px) { .fs-c-productList__list {grid-auto-rows: minmax(24.5em, auto);} .fs-c-button--addToCart--list.fs-c-button--plain, .fs-c-button--viewProductDetail.fs-c-button--plain { width: 8em;} } /*カタログダウンロード ---------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; } .catalogpage{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .catalogpage > div{ width: 50%; padding: 10px; } @media screen and (max-width: 960px) { .catalogpage> div{ width: 100%; } } #catalogdownload{margin-top: -80px; padding-top: 80px;} @media screen and (min-width: 750px) { #catalogdownload{margin-top: -120px; padding-top: 120px;} } /* 商品一覧 ---------------------------------------------------------- */ #fs_ProductSearch .fs-l-pageMain {padding-top: 30px;} #fs_ProductSearch .fs-l-pageMain #search{margin-bottom: 30px;} .fs-c-productList__list form {margin: 0;} /* ショッピングカート ---------------------------------------------------------- */ #fs_ShoppingCart section p {text-align: center;} #fs_ShoppingCart .fs-p-announcement__title{text-align: left; font-size: 1.1em; font-weight: bold; color: #333; padding: 5px 0px; margin:20px 0 5px 0; border-bottom:2px dotted #DDDDDD; border-color: #bd0711;} #fs_ShoppingCart .fs-c-cartPayment, .fs-c-payWithAmazon {margin-top: 24px; font-size: 1.2rem; line-height: 1.3;} #fs_ShoppingCart .fs-c-continueShopping {text-align: center; margin-bottom: 2em; padding-top: 2em; } #fs_ShoppingCart .fs-c-button--standard {font-size: 1em; box-shadow: none;} @media only screen and (min-width: 750px){ #fs_ShoppingCart .fs-p-announcement img{width:50%;} } /* 送料告知バナー(replug) ----------------------------------------------------------*/ .rp-p-banner { border-radius: 3px; display: flex; align-items: center; justify-content: center;} .rp-p-banner--postage{ margin-bottom: 20px; background: #e5e5e5; color: #333333;} .rp-p-banner__link { color: #333333; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 12px 8px; position: relative;} .rp-p-banner__link i {font-size: 2rem; padding-right: 4px;} .rp-p-banner__label{ flex-wrap: wrap; align-items: baseline; justify-content: center; font-weight: bold;} @media only screen and (min-width: 750px){ .rp-p-banner__label br{display: none;} } /* トップページ ---------------------------------------------------------- */ #fs_Top #top_h1_tag{padding: 0;} #fs_Top #top_h1_tag h1 { display: block; font-size: 0.9em; line-height: 1.5; padding-top: 0; padding-bottom: 1.5em; margin: 0; color: #333333; font-weight: bold;} #fs_Top #top_h1_tag h1 br:first-of-type{display: none;} #fs_Top #itemList { width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; } #fs_Top #itemList a { line-height: 0; width: calc(96%/3); margin-bottom: 15px; } #fs_Top #itemList a figure { position: relative; margin: 0;} #fs_Top #itemList a figure figcaption { font-size: 1em; width: 100%; line-height: 1.2em; font-feature-settings: "palt"; } #fs_Top #itemList a figure img { width: 100%; height: auto; margin-bottom: 8px; } #fs_Top .slider .bnr { position: relative; height: 400px; display: block;} #fs_Top .slider .bnr figure { } #fs_Top .slider .bnr figure img { position: absolute; height: 100%; top: 50%; left: 50%; object-fit: cover; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #fs_Top .slider .bnr figure figcaption { position: absolute; z-index: 997; color: #fff; font-size: 1.2em; bottom: 0; left: 0; right: 0; line-height: 1.2em; padding: 90px 20px 20px; background: repeat-x; background-size: 1px 155px; text-align: center; } #fs_Top .slider .bnr:before { content: ""; display: block; padding-top: 60%; } #fs_Top .slider .bnr:focus { outline: none; } #fs_Top .bx-wrapper .bx-controls-direction { display: block; } #fs_Top .bx-wrapper .bx-controls-direction a {z-index: 99;} #fs_Top .bx-wrapper .bx-next, #fs_Top .bx-wrapper .bx-prev {background-image: url(https://replug.itembox.design/item/controls.png?t=20250513165337)!important;} #fs_Top .bx-wrapper .bx-loading {background: url(https://replug.itembox.design/item/bx_loader.gif?t=20250513165337) center center no-repeat #fff; !important;} @media screen and (max-width: 750px) { #fs_Top #top_h1_tag {display: none;} #fs_Top section.fs-l-pageMain{ padding: 10px 10px; } #fs_Top .slider .bnr { height: 55vw; } #fs_Top .slider .bnr figure figcaption {font-size: 0.9em; padding: 90px 20px 10px;} #fs_Top .bx-wrapper{ margin-bottom: 0px; padding: 0;} #fs_Top .bx-wrapper .bx-controls-direction { display: none; } #fs_Top #itemList a figure figcaption { font-size: .8em; } } /* トップページ ランキング*/ #ranking {padding-top: 0;} #ranking .wrap:last-of-type .btn2 { margin-bottom: 0; } #ranking h3 { line-height: 2; text-align: left; border-bottom: #ac251f solid 1px; } #ranking ol { width: 100%; margin: 0; padding: 0;} #ranking ol::after { clear: both; content: ''; display: block; } #ranking ol li { list-style: none; width: calc(96%/3); float: left; position: relative; margin-right: 2%; padding-bottom: 2em; box-sizing:content-box;} #ranking ol li:last-child { margin-right: 0; } #ranking ol li img { width: 100%; line-height: 0; } #ranking ol li p { text-align: center; line-height: 1.4; font-feature-settings: "palt"; } #ranking ol li p a { font-weight: bold; font-size: 1em; } #ranking ol li p:nth-of-type(2) { font-size: 0.8em; color: #909293; padding-top: 0.5em;} #ranking ol li table { display: none; } #ranking ol li form { margin: 0; position: static; } #ranking ol li form input[type="submit"], #ranking ol li .submit_btn { color: #FFF; font-weight: bold; background-image: none; height: auto; padding-top: .5em; padding-bottom: .5em; border-radius: 5px; position: absolute; bottom: 0; background-color: #bd0711; line-height: 1.2; text-align: center; cursor: pointer; } #ranking ol li form input[type="submit"]:hover, #ranking ol li .submit_btn:hover { opacity: 0.8; } #ranking ol li form input[type="submit"], #ranking ol li .submit_btn { font-size: 0.7em; width: 50%; left: 0; right: 0; margin: 0 auto; } #ranking ol li form input[type="radio"]:checked { display: none; } #ranking ol li:after { width: 40px; height: 55px; top: -20px; left: -10px; background-size: 100% auto; background-repeat: no-repeat; content: ""; position: absolute; } #ranking ol li:nth-child(1):after { background-image: url("https://replug.itembox.design/item/rank1.png?t=20250513165337"); } #ranking ol li:nth-child(2):after { background-image: url("https://replug.itembox.design/item/rank2.png?t=20250513165337"); } #ranking ol li:nth-child(3):after { background-image: url("https://replug.itembox.design/item/rank3.png?t=20250513165337"); } #ranking .btn2 { display: block; font-size: 0.8em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 40px auto; border: 1px solid #bd0711; width: 350px; padding-top: 0.3em; padding-bottom: 0.3em;} @media screen and (max-width: 750px) { #ranking ol li:after { width: 6vw; height: 8vw; top: -4vw; left: -1vw;} #ranking .btn2 { display: block; font-size: 0.9em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 30px auto; border: 1px solid #bd0711; width: 80%; } #ranking ol li form input[type="submit"], #ranking ol li .submit_btn { width: 80%; } #ranking ol li p { text-align: left; font-size: 0.8em;} } /*ランキングレイアウト　順位マーク無し*/ #ranking-nomark {padding-top: 0;} #ranking-nomark .wrap:last-of-type .btn2 { margin-bottom: 0; } #ranking-nomark h3 { line-height: 2; text-align: left; border-bottom: #ac251f solid 1px; } #ranking-nomark ol { width: 100%; margin: 0; padding: 0;} #ranking-nomark ol::after { clear: both; content: ''; display: block; } #ranking-nomark ol li { list-style: none; width: calc(96%/3); float: left; position: relative; margin-right: 2%; padding-bottom: 3em; box-sizing:content-box;} #ranking-nomark ol li:last-child { margin-right: 0; } #ranking-nomark ol li img { width: 100%; line-height: 0; } #ranking-nomark ol li p { text-align: center; line-height: 1.4; font-feature-settings: "palt"; } #ranking-nomark ol li p a { font-weight: bold; font-size: 1em; } #ranking-nomark ol li p:nth-of-type(2) { font-size: 0.8em; color: #909293; padding-top: 0.5em;} #ranking-nomark ol li table { display: none; } #ranking-nomark ol li form { margin: 0; position: static; } #ranking-nomark ol li form input[type="submit"], #ranking-nomark ol li .submit_btn { color: #FFF; font-weight: bold; background-image: none; height: auto; padding-top: .5em; padding-bottom: .5em; border-radius: 5px; position: absolute; bottom: 0; background-color: #bd0711; line-height: 1.2; text-align: center; cursor: pointer; } #ranking-nomark ol li form input[type="submit"]:hover, #ranking-nomark ol li .submit_btn:hover { opacity: 0.8; } #ranking-nomark ol li form input[type="submit"], #ranking-nomark ol li .submit_btn { font-size: 0.7em; width: 50%; left: 0; right: 0; margin: 0 auto; } #ranking-nomark ol li form input[type="radio"]:checked { display: none; } #ranking-nomark ol li:after { width: 40px; height: 55px; top: -20px; left: -10px; background-size: 100% auto; background-repeat: no-repeat; content: ""; position: absolute; } #ranking-nomark .btn2 { display: block; font-size: 0.8em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 40px auto; border: 1px solid #bd0711; width: 350px; padding-top: 0.3em; padding-bottom: 0.3em;} @media screen and (max-width: 750px) { #ranking-nomark ol li:after { width: 6vw; height: 8vw; top: -4vw; left: -1vw;} #ranking-nomark .btn2 { display: block; font-size: 0.9em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 30px auto; border: 1px solid #bd0711; width: 80%; } #ranking-nomark ol li form input[type="submit"], #ranking-nomark ol li .submit_btn { width: 80%; } #ranking-nomark ol li p { text-align: left; font-size: 0.8em;} } /* 商品一覧*/ #productlist #itemList { width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; } #productlist #itemList a { line-height: 0; width: calc(96%/3); margin-bottom: 15px; } #productlist #itemList a figure { position: relative; margin: 0;} #productlist #itemList a figure figcaption { font-size: 1em; width: 100%; line-height: 1.2em; font-feature-settings: "palt"; } #productlist #itemList a figure img { width: 100%; height: auto; margin-bottom: 8px; } #productlist .slider .bnr { position: relative; height: 600px; display: block;} @media screen and (max-width: 750px) { #productlist #itemList a figure figcaption { font-size: .8em; } } /* カテゴリーページ KAWAII*/ #kawaii dl{margin-bottom:20px;} #kawaii dt{font-size: 1.5em; font-weight: bold; margin-bottom: 10px; line-height: 1.2;} .snslink{text-align: right;} .snslink img{padding: 5px; margin-left:20px;} @media screen and (max-width: 750px) { #kawaii dt{font-size: 1.2em;} .kawaii_txt br{display:none;} } /* カテゴリーページ アトリエ ミオ*/ .mio-ws{margin-bottom:20px;} .mio-ws img{margin-bottom:10px;} .mio-ws p{padding:10px 0; line-height:1.2;} .mio-ws h3{font-size: 1.5em; margin-bottom: 20px;} .square{margin: 10px 0; padding: 5px; border: solid 1px #bbb;} .square p{margin-top:5px;} /* カテゴリーページ Log book*/ @media screen and (min-width: 750px) { dl.log_category dt img{width:50%;} dl.log_category dd{font-size:1.2em;} } /* カテゴリーページ 松竹梅*/ #STB h1{font-size: 15px;} #STB h2{font-size: 1.5em;} .STB01{margin-bottom:20px;} .STB01 img{width: 80%; margin-top:20px;} .STB02{float:left; width: 48%;} .STB03{float:right; width: 48%;} .bg_gray{background-color: #f2f3f5; padding: 30px 0 1px 0;} @media screen and (max-width: 750px) { #STB p{font-size: 0.9em;} #STB p.category_top_txt{padding:0 10px;} .ttl{line-height:1.2em; font-weight:bold;} .STB01 img{width: 100%;} } /* カテゴリーページ PICASSO*/ .cate_problem img{margin-top:20px; width:750px;} /* カテゴリーページ シーン提案*/ #offer {padding-top: 0;} #offer .wrap:last-of-type .btn2 { margin-bottom: 0; } #offer h3 { line-height: 2; text-align: left; border-bottom: #ac251f solid 1px; } #offer ol { width: 100%; margin: 0; padding: 0;} #offer ol ::after { clear: both; content: ''; display: block; } #offer ol li { list-style: none; width: calc(96%/2); position: relative; margin-right: 2%; padding-bottom: 3em; box-sizing:content-box; float: left;} #offer ol li:last-child { margin-right: 0; } #offer ol li img { width: 100%; line-height: 0; } #offer ol li p { text-align: left; line-height: 1.4; font-feature-settings: "palt";} #offer ol li p a { font-weight: bold; font-size: 1em; } #offer ol li p:nth-of-type(2) { font-size: 0.8em; color: #909293; padding-top: 0.5em;} #offer ol li table { display: none; } #offer ol li:after { width: 40px; height: 55px; top: -20px; left: -10px; background-size: 100% auto; background-repeat: no-repeat; content: ""; position: absolute; } @media screen and (max-width: 750px) { #offer ol li:after { width: 6vw; height: 8vw; top: -4vw; left: -1vw;} #offer ol li p { text-align: left;} #offer ol li p a { font-size: 0.8em;} } /* カテゴリーページ ランキング*/ #ranking-2 {padding-top: 0; margin-top:20px;} #ranking-2 .wrap:last-of-type .btn2 { margin-bottom: 0; } #ranking-2 h3 { line-height: 2; text-align: left; border-bottom: #ac251f solid 1px; } #ranking-2 ol { width: 100%; margin: 0; padding: 0;} #ranking-2 ol ::after { clear: both; content: ''; display: block; } #ranking-2 ol li { list-style: none; width: calc(96%/2); position: relative; margin-right: 2%; padding-bottom: 3em; box-sizing:content-box; float: left;} #ranking-2 ol li:last-child { margin-right: 0; } #ranking-2 ol li img { width: 100%; line-height: 0; } #ranking-2 ol li p { text-align: left; line-height: 1.4; font-feature-settings: "palt";} #ranking-2 ol li p a { font-weight: bold; font-size: 1em; } #ranking-2 ol li p:nth-of-type(2) { font-size: 0.8em; color: #909293; padding-top: 0.5em;} #ranking-2 ol li table { display: none; } #ranking-2 ol li form { margin: 0; position: static; } #ranking-2 ol li form input[type="submit"], #ranking-2 ol li .submit_btn { color: #FFF; font-weight: bold; background-image: none; height: auto; padding-top: .5em; padding-bottom: .5em; border-radius: 5px; position: absolute; bottom: 0; background-color: #bd0711; line-height: 1.2; text-align: center; cursor: pointer; } #ranking-2 ol li form input[type="submit"]:hover, #ranking-2 ol li .submit_btn:hover { opacity: 0.8; } #ranking-2 ol li form input[type="submit"], #ranking-2 ol li .submit_btn { font-size: 0.7em; width: 50%; left: 0; right: 0; margin: 0 auto; } #ranking-2 ol li form input[type="radio"]:checked { display: none; } #ranking-2 ol li:after { width: 40px; height: 55px; top: -20px; left: -10px; background-size: 100% auto; background-repeat: no-repeat; content: ""; position: absolute; } #ranking-2 ol li:nth-child(1):after { background-image: url("https://replug.itembox.design/item/rank1.png?t=20250513165337"); } #ranking-2 ol li:nth-child(3):after { background-image: url("https://replug.itembox.design/item/rank2.png?t=20250513165337"); } #ranking-2 ol li:nth-child(5):after { background-image: url("https://replug.itembox.design/item/rank3.png?t=20250513165337"); } #ranking-2 .btn2 { display: block; font-size: 0.8em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 40px auto; border: 1px solid #bd0711; width: 350px; padding-top: 0.3em; padding-bottom: 0.3em;} @media screen and (max-width: 750px) { #ranking-2 ol li:after { width: 6vw; height: 8vw; top: -4vw; left: -1vw;} #ranking-2 .btn2 { display: block; font-size: 0.9em; font-weight: bold; color: #bd0711; background: #FFF; border-radius: 30px; border: none; text-align: center; margin: 30px auto; border: 1px solid #bd0711; width: 80%; } #ranking-2 ol li form input[type="submit"], #ranking-2 ol li .submit_btn { width: 80%; } #ranking-2 ol li p { text-align: left;} #ranking-2 ol li p a { font-size: 0.8em;} } /* カテゴリーページ レスポンシブボックス２列*/ *, *:before, *:after {box-sizing: border-box;} box-sizing: border-box; } .col_2{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_2 > div{ width: 50%; padding: 10px; } .col_2 p{margin:14px 0 32px; font-size:18px; vertical-align: middle; padding: 60px;} @media screen and (max-width: 750px) { .col_2 > div{ width: 100%; } } /*レスポンシブボックス２列　フッターガイド*/ *, *:before, *:after { box-sizing: border-box; } #footer_guid{background:#edeff1;} .col_2_footer-guid{ width: 1168px; margin:0 auto; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_2_footer-guid > div{ width: 50%; padding: 30px; } .col_2_footer-guid h2{font-size: 1.2em; text-align: left; border-bottom: #333333 solid 1px;} .contents_wrap{background: #FFFFFF; padding:20px 10px;} .contents_wrap a{font-weight: bold; color: #bd0711;} .contents_wrap .follow_us a{display: inline-block; margin: 0 0.5em 0;} p.left{text-align: left;} .follow_us a img{width:20%; margin-right:30px;} @media screen and (max-width: 960px) { .col_2_footer-guid h2{font-size: 1em; line-height:} p.left{font-size: 0.8em; line-height:1.8em;} .contents_wrap{padding:10px;} .col_2_footer-guid{width: 100%;} .col_2_footer-guid > div{ width: 100%; padding: 10px; } } /* カテゴリーページ レスポンシブボックス２列_Log bookカテゴリーページ用*/ *, *:before, *:after { box-sizing: border-box; } .linkbnr_col_2{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .linkbnr_col_2 > div{ width: 50%; padding: 10px; } @media screen and (max-width: 750px) { .linkbnr_col_2 > div{ width: 100%; } } @media screen and (min-width: 750px) { .linkbnr_col_2 > div{ margin-top:30px; } } /* カテゴリーページ レスポンシブボックス２列_アトリエミオ カテゴリーページ用*/ *, *:before, *:after {box-sizing: border-box;} .mio_col_2{ width: 100%; padding:20px; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .mio_col_2 p{padding:0 20px;} .mio_col_2 > div{ width: 50%; } @media screen and (max-width: 750px) { .mio_col_2 > div{ width: 100%; padding: 0; } .mio_col_2{padding:0;} } /* カテゴリーページ レスポンシブボックス3列*/ *, *:before, *:after { box-sizing: border-box; } .col_3{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3 h4{font-weight:bold;} .col_3 .txt{padding:5px;} .col_3 p{line-height:1.2em; padding-top:5px; text-align: left;} .col_3 > div{ width: 33.33333%; padding: 5px; } @media screen and (max-width: 750px) { .col_3 > div{ width: 50%; } .col_3 p{font-size:1.2rem;} } /* カテゴリーページ レスポンシブボックス3列→１列*/ *, *:before, *:after { box-sizing: border-box; } .col_3_1{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3_1 h4{font-weight:bold;} .col_3_1 .txt{padding:5px;} .col_3_1 p{line-height:1.2em; padding-top:5px; text-align: left;} .col_3_1 > div{ width: 33.33333%; padding: 5px; } @media screen and (max-width: 750px) { .col_3_1 > div{ width: 100%; } .col_3_1 p{font-size:1.4rem;line-height: 1.4em;} .col_3_1 img{width:100%;} } /* カテゴリーページ レスポンシブボックス3列→１列　余白あり*/ *, *:before, *:after { box-sizing: border-box; } .col_3_1_S{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3_1_S h4{font-weight:bold;} .col_3_1_S .txt{padding:5px;} .col_3_1_S p{line-height:1.2em; padding-top:5px; text-align: left;} .col_3_1_S > div{ width: 32%; padding: 5px; } @media screen and (max-width: 750px) { .col_3_1_S > div{ width: 100%; } .col_3_1_S p{font-size:1.4rem;line-height: 1.4em;} .col_3_1_S img{width:100%;} } /* カテゴリーページ リンクバナー*/ .category_link_bnr{margin:30px 0;border: solid 1px #333333;} .category_link_bnr h2{font-size: 1.4em; padding: 5px 0;} .category_link_bnr p{line-height: 1.5em; padding-bottom: 5px;} @media screen and (max-width: 750px) { .category_link_bnr p br{display: none;} } /* カスタムノートの作り方*/ *, *:before, *:after {box-sizing: border-box;} .custom-note_col_2{ width: 100%; display: flex; margin-bottom:20px; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .custom-note_col_2 p{ text-align: left; display: table-cell; vertical-align: middle; font-size: 18px; padding: 50px 20px;} .custom-note_col_2 > div{ width: 50%; padding: 10px; } @media screen and (max-width: 750px) { .custom-note_col_2 > div{ width: 100%; padding: 0; } .custom-note_col_2 p{width: 100%; height: 100px; font-size: 16px; padding: 10px;} } /* カスタムノートページ用-レスポンシブボックス２列カラーあり*/ *, *:before, *:after {box-sizing: border-box;} .custom-note_col_2_color{ width: 100%; display: flex; margin-bottom:20px; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .custom-note_col_2_color p{ text-align: center; display: table-cell; vertical-align: middle; font-size: 18px; padding: 50px 30px; background-color: #F3EED5;} .custom-note_col_2_color > div{ width: 50%; background-color: #F3EED5; } @media screen and (max-width: 750px) { .custom-note_col_2_color > div{ width: 100%; padding: 0; } .custom-note_col_2_color p{width: 100%; height: 100px; font-size: 16px; padding: 20px 20px; background-color: #F3EED5;} } /*yadorika*/ *, *:before, *:after {box-sizing: border-box;} .yadorika_col_2{ width: 100%; display: flex; margin-bottom:20px; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .yadorika_col_2 p{ text-align: left; font-size: 1.2em; padding: 0 20px;} .yadorika_col_2 > div{ width: 50%; } #yadorika h1{font-size: 1.5em; font-weight: bold; border-bottom: #ac251f solid 1px; padding: 0 20px; line-height: 1.3; margin-bottom: 10px;} #yadorika h2{font-size: 1.5em; font-weight: bold; text-align: left; padding: 10px 20px; margin-bottom:0;} #yadorika h2 img{padding: 0;} .yadorika_row2 ::after { clear: both; content: ''; display: block; } .yadorika_row2 ul li{list-style-type: none; float:left; width: 50%;} .yadorika_row2{margin-top: 20px;} p.yadorika_head{font-size: 1.2em; padding-left: 20px; text-align: left; font-weight: bold;} .yadorika_intro{margin-bottom: 20px;} .crafts_contents{padding:0 20px; margin-bottom:30px;} #category_catch .logo_area img{padding: 10px 20px;} @media screen and (max-width: 750px) { .yadorika_col_2 > div{ width: 100%; padding: 0; } .yadorika_col_2 p{width: 100%; padding:0 10px; font-size:1.0em; line-height: 1.5em; letter-spacing: 0.12em;} #yadorika h1{padding: 0 10px;} #yadorika h2{padding: 10px; font-size: 1.3em;} .yadorika_row2 p{padding: 0 10px;} p.yadorika_head{padding-left: 10px; font-weight:bolder;} .crafts_contents{padding: 0;} } @media screen and (min-width: 750px) { .m60{margin: 60px;} #category_catch .logo_area img{padding: 20px 60px;} dl.logo_area_text{margin: 0 60px;} } /* アトリエ ミオ*/ #STB .STB01 p.stb-ttl{font-weight:bold;} #STB .STB02 p.stb-ttl{font-weight:bold;} #STB .STB03 p.stb-ttl{font-weight:bold;} section.mio_top_title h2{ font-size: 1.9em; } .marker {background: linear-gradient(transparent 50%, #99ccff 50%);} .marker2 {background: linear-gradient(transparent 50%, #ffff00 50%);} .mio_about-products h3{font-size:1.9em; margin:10px 0; padding-bottom:10px; border-bottom:solid #bd0711 2px;} .mio_about-products{padding:30px 50px; background:#ffffff;} .mio_about-products p{font-size:1.2em;margin:20px 0; text-align:left;} .kodomo-smile-txt{padding:10px 20px; font-weight:bold; text-decoration:underline;} @media screen and (max-width: 750px) { section.mio_top_title h2{ font-size: 1.5em; } .mio_about-products{padding:10px 0;} .mio_about-products h3{font-size:1.3em;} .mio_about-products p{font-size:1.0em;} } /* アトリエ ミオ　商品詳細ページ*/ .mio_p h3{padding-top:20px; font-size:1.5em;} .mio_p p{margin:20px 0;} /* ノベルティーページ*/ #novelty h2{ font-size:2.1em; border-bottom:#ac251f solid 1px; background-color:#f2f3f5; padding:10px 0; margin-bottom:20px;} #novelty h2 img{width:250px;} #novelty h3{ font-size:1.8em; background-color:#f2f3f5; padding:10px 0;} #novelty h4{ font-weight:bold; font-size:1.2em; margin:10px 20px;} #novelty dl{margin-bottom:50px;} #novelty dt img{width:50%;} #novelty dd{font-size:1.2em; padding:10px 20px;} #novelty ul{list-style: none; margin-bottom:20px;} #novelty ul li{font-size:1.3em; padding:5px; margin:0 100px;} #novelty ul li.link{text-align:right; font-weight:bold;} #novelty p.link{text-align:left; font-weight:bold; margin-top:10px;} #novelty .contact p{font-size:1.2em; text-align:center;} #novelty .contact img{width:30%; margin:20px 0;} #novelty .sg table { margin: 10px 0 10px 130px; border: #d7d8db solid 1px; } #novelty .sg table th { background: #f2f3f5; } #novelty .sg table td { padding: 10px; border: #d7d8db solid 1px; } .novelty_top h1{font-size:2.2em; font-weight:bold; text-align:center; margin-bottom:20px;} .novelty_top img{margin-bottom:20px;} .novelty_top .txt{padding:0 10px; margin-bottom:10px;} dl.faq {margin: 30px auto;} dl.faq dt {line-height: 1; margin-bottom: 0; padding: 20px 70px 0px; background-color: #F2F3F5; font-weight: bold;} dl.faq dd {margin-bottom: 10px;padding: 10px 70px 10px; background-color: #F2F3F5;} p.novelty_catch{font-size:1.2em;} p.noverty_title{font-size:1.6em; font-weight: bold; padding: 5px 0;} p.novelty_top_logo{margin:0 50px;} @media screen and (max-width: 750px) { #novelty .sg table { width:100%; margin: 10px 0;} #novelty dd{font-size:1.1em; padding:10px 20px;} #novelty h4{font-size:1.0em; margin: 10px 0;} #novelty .contact p{font-size:1.0em;} dl.faq {margin: 10px auto; font-size: 0.9em;line-height: 1.5;} dl.faq dt {padding: 20px 20px 0px; } dl.faq dd{padding: 10px 20px 10px; } p.novelty_catch{font-size:1.0em;} p.noverty_title{font-size:1.3em;} p.novelty_top_logo{margin:0;} } *, *:before, *:after { box-sizing: border-box; } .noveity_col{width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */} .noveity_col > div{width: 50%; padding: 10px;} @media screen and (max-width: 750px) { #novelty h2{ font-size:1.4em;} #novelty h2 img{width:180px;} #novelty h3{ font-size:1.4em;} #novelty dl{margin-bottom:30px;} #novelty dt img{width:100%;} #novelty dt{font-size:1.2em;} #novelty dd{font-size:1em; line-height:1.2em; padding:10px;} #novelty .contact{font-size:1.1em;} #novelty .contact img{width:50%; margin:10px 0;} #novelty .sg {margin:0;} .novelty_top h1{font-size:1.3em; line-height:1.5em;} .novelty_top .txt p{text-align:left; line-height:1.5em;} .noveity_col > div{width: 100%;} #novelty ul li{font-size:1em; padding:0 5px; margin:0;} } /* ノベルティー　商品詳細ページ*/ #howto_order h3{background: #ddd; padding: 10px 0; margin:20px 0;} #howto_order dl dt{font-size:1.5em;} #howto_order dl dd{font-size:1.5em; padding-top:16px;} #howto_order img{padding-bottom:16px;} #howto_order p{font-size:1.2em; margin-bottom:10px;} .novelty_area dl dd{font-size:1.1em; line-height:1.5em;} /* アコーディオンメニュー*/ .ac_menu__item { background: #F2F3F5; color: #fff; cursor: pointer; display: block; margin-bottom: 1px; position: relative; } .ac_menu__item__link { color: #fff; display: block; padding: 1rem; } .ac_submenu { background: #fff; display: none; } .ac_submenu__item { color: #333; padding: 1rem; list-style-type: none; } #novelty ul li.ac_menu__item{border:solid 2px #FFF; margin:0 20px;} #novelty ul li.ac_submenu__item{font-size: 1.0em; margin:0 50px;} .product_details ul.ac_menu{margin-top: 20px;} .product_details ul li.ac_menu__item{font-size: 1.1em; border:solid 2px #FFF;} .product_details ul li.ac_submenu__item{font-size: 1.0em; margin:0 20px;} .product_details ul li.ac_submenu__item a{text-decoration: underline;} @media screen and (max-width: 750px) { #novelty ul li.ac_menu__item{border:solid 1px #FFF; margin:0;} #novelty ul li.ac_submenu__item{ margin:0 20px;} .product_details ul li.ac_menu__item{font-size: 1.0em; border:solid 1px #FFF;} } /* カレンダー名入れカテゴリーページ*/ .custom_txt img{width:250px;} .how_to_order_txt p{ text-align: left; margin:0 220px; font-size:1.2em; padding: 10px; line-height:1.6em;} .how_to_order p{font-size:1.2em; } .how_to_order p img{width:750px;} @media screen and (max-width: 750px) { .naire p br{display:none} .custom_txt img{width:180px;} .how_to_order_txt p{width: 100%; font-size: 1.0em; margin:0; padding: 10px;} .how_to_order p{font-size:1.0em; } .how_to_order p img{width:100%;} } /* 「続きを読む」の開閉ボタン*/ .cp_box *, .cp_box *:before, .cp_box *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .cp_box { position: relative; } .cp_box label { position: absolute; z-index: 1; bottom: 0; width: 100%; height: 140px; /* グラデーションの高さ */ cursor: pointer; text-align: center; /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */ background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%); } .cp_box input:checked + label { background: inherit; /* 開いた時にグラデーションを消す */ } .cp_box label:after { line-height: 2.5rem; position: absolute; z-index: 2; bottom: 20px; left: 50%; width: 16rem; content: ' 続きをよむ'; transform: translate(-50%, 0); letter-spacing: 0.05em; color: #ffffff; border-radius: 20px; background-color: #bd0711; } .cp_box input { display: none; } .cp_box .cp_container { overflow: hidden; height: 500px; /* 開く前に見えている部分の高さ */ transition: all 0.5s; } .cp_box input:checked + label { /* display: none ; 閉じるボタンを消す場合解放 */ } .cp_box input:checked + label:after { content:' 閉じる'; } .cp_box input:checked ~ .cp_container { height: auto; padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */ transition: all 0.5s; } /* Log book名入れカテゴリーページ*/ .naire_comment{margin-top:-100px; padding-top:180px;} .naire_comment h1{font-size: 1.5em; font-weight: bold; border-bottom: #ac251f solid 1px; padding: 0 20px; line-height: 1.3; margin-bottom: 10px;} .naire_comment h2{font-size: 1.5em; font-weight: bold; text-align: left; padding: 10px 20px; margin-bottom:0;} .naire_fullwide{padding:25px 0;} .naire_fullwide h2{font-size: 1.5em; font-weight: bold; text-align: left; padding: 10px 20px; margin-bottom:0;} .naire_fullwide p{ text-align: left; font-size: 1.2em; padding: 0 20px;} @media screen and (min-width: 750px) { .naire_fullwide figure{width:80%; padding:10px 0; margin:0 auto; text-align:center;} } @media screen and (max-width: 750px) { .naire_comment{margin-top:-100px; padding-top:120px;} .naire_comment h1{font-size: 1.4em; padding: 0 10px;} .naire_comment h2{padding: 10px; font-size: 1.3em;} .naire_fullwide{padding:15px 0;} .naire_fullwide img{width:100%;} .naire_fullwide h2{padding:0 10px; font-size: 1.3em;} .naire_fullwide p{font-size:16px; padding:10px;} } /* アウトレットカテゴリーページ*/ @media screen and (min-width: 750px) { .outlet_top{background-color:#f2f3f5;} .outlet_top_img{width:80%; padding:20px; margin:0 auto; text-align:center;} } /* トップバナー */ .top_bnr_fix{margin-left:210px;} .top_bnr_fix h4{font-weight:bold; margin-top:10px;} @media screen and (max-width: 750px) { .top_bnr_fix{margin-left:0;} .top_bnr_fix .txt{margin-left:5px;} } /* トップバナーmovie */ .top_bnr_area {margin-top:30px;} .bnr_list_mv{margin-top:30px;} .bnr_list_mv h4{font-weight:bold;font-size:1.4rem;padding-top:10px;} .bnr_list_mv video{ border:1px solid #ddd;} .bnr_list_mv ul { list-style:none;} .bnr_list_mv li { width:49%; float:left; margin-bottom:40px;} .bnr_list_mv li:not(:nth-child(2n)){margin-right:15px;} @media screen and (max-width: 750px) { .top_bnr_area {margin-top:20px;} .bnr_list_mv{margin-top:20px;} .bnr_list_mv li { width:48%; margin-bottom:20px;} .bnr_list_mv video{width:100%;} .bnr_list_mv p{font-size:1.2rem;} .bnr_list_mv .txt{margin-left:5px;} .bnr_list_mv h4{font-size:1.3rem;} } /* トップイベントバナー */ .top_bnr_event h4{font-weight:bold;} /* シーン提案バナーflexbox */ *, *:before, *:after { box-sizing: border-box; } .scene_bnr_flx{width: 1168px; margin: 0 auto; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ margin-top:-30px;} .scene_bnr_flx h4{font-weight:bold;} .scene_bnr_flx .txt{padding:10px;} .scene_bnr_flx p{line-height:1.2em; padding-top:5px;} .scene_bnr_flx > div{ width: 33.33333%; padding: 10px;} @media screen and (max-width: 750px) { .scene_bnr_flx > div{width: 50%;} .scene_bnr_flx p{font-size:1.2rem;} } /* Recommend */ #Recommend {padding-top: 0;padding-bottom: 0px; margin-top: 0px; margin-bottom: 30px;} #Recommend2 {padding-top: 0;padding-bottom: 0px; margin-top: 0px;} #Recommend .red { color: #bd0711; } #itemList2 { width: 100%; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; } #itemList2:after { clear: both; content: ''; display: block; } #itemList2 div.list { width: calc(96%/2); clear: both; margin-right: 4%; margin-bottom:10px;} #itemList2 div.list:nth-of-type(2n) { margin-right: 0; } #itemList2 div.list figure { position: relative; overflow: hidden; width: 260px; float: left; } #itemList2 div.list div.txt { float: right; width: 280px; } #itemList2 div.list div.txt h4 { font-size: 1.2em; font-weight: bold; margin-bottom: 0.3em;} #itemList2 div.list div.txt p { text-align: left; !important; line-height: 1.5; font-feature-settings:"palt";} #itemList2 div.list img { width: 100%; object-fit: cover; } @media screen and (max-width: 750px) { #itemList2 { display: block; } #itemList2 div.list { width: 100%; } #itemList2 div.list figure { width: calc(96%/3); height: 22vw; margin-bottom: 15px; } #itemList2 div.list div.txt { width: calc(96%/1.5); font-feature-settings: "palt"; margin-bottom: 1em; } #itemList2 div.list div.txt h4 { font-size: 1em; line-height: 1.2; margin-bottom: 0.3em; } #itemList2 div.list div.txt p, body section #itemList2 div.list div.txt a { font-size: 1.2rem; margin: 0;} #itemList2 div.list img { height: 22vw; } } /* topix */ #fs_Top #topix { background: #f2f3f5; } #topix article { display: flex; -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; list-style: none; overflow: hidden; } #topix article a { width: 25%; display: block; color: #333333;display: flex; margin-bottom: 16px;} #topix article a dl { background: #fff; border-radius: 10px; width: 100%; margin-right: 15px;} #topix article a dl dt { height: 145px; overflow: hidden; position: relative; width: 100%; border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; } #topix article a dl dt img { height: auto; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #topix article a dl dd { padding: 10px 15px 15px; line-height: 1.4; } #topix article a dl dd span { color: #909293; font-size: 0.9rem; line-height: 2; } #fs_ProductDetails #topix article a dl { background: #f2f3f5;} @media screen and (max-width: 750px) { #topix article { display: -webkit-flex; /* Safari */ display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; justify-content: space-between; } #topix article a { width: 48%; } #topix article a dl { margin-right: 0; } #topix article a dl dt {height: 85px;} } /* relation */ #relation .fs-c-featuredProduct__title {margin: 0 0 24px;} #relation article { display: flex; -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; list-style: none; overflow: hidden; } #relation article a { width: 35%; display: block; color: #333333;display: flex; margin-bottom: 16px;} #relation article a dl { background: #f2f3f5; border-radius: 10px; width: 100%; margin-right: 15px;} #relation article a:last-of-type dl { margin-right: 0px;} #relation article a dl dt { height: 145px; overflow: hidden; position: relative; width: 100%; border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; } #relation article a dl dt img { height: auto; width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #relation article a dl dd { padding: 10px 15px 15px; line-height: 1.4; } #relation article a dl dd span { color: #909293; font-size: 0.9rem; line-height: 2; } @media screen and (max-width: 750px) { #relation article { display: -webkit-flex; /* Safari */ display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; justify-content: space-between; } #relation article a { width: 48%; } #relation article a dl { margin-right: 0; } #relation article a dl dt {height: 85px;} } /* Instagram */ #Instagram #igimgs { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } #Instagram #igimgs a { width: 19%; margin-bottom: 15px; line-height: 0;} #Instagram #igimgs a img { width: 100%; height: 221px; object-fit: cover;} @media screen and (max-width: 750px) { #Instagram #igimgs a { width: 32%; margin-bottom: 8px; } #Instagram #igimgs a img { height: 28vw;} #Instagram #igimgs .hide { display: none; } } /* 4つの理由 */ body#fs_Top #evidence { background: #ffffff; } body#fs_Top #evidence h2 { font-size: 2.1em; margin-bottom: 50px; } body#fs_Top #evidence h2 span { color: #bd0711; display: block; } body#fs_Top #evidence h3 { font-size: 1.5em; margin-bottom: 0.3em; } body#fs_Top #evidence ol { counter-reset: li; } body#fs_Top #evidence ol > li { list-style: none; position: relative; margin-bottom: 20px; text-align: center; padding-top: 10px; } body#fs_Top #evidence ol > li:before { font-size: 2em; font-family: 'Roboto', sans-serif; font-weight: 100; line-height: 1.7; counter-increment: li; content: counter(li); color: #ffffff; background: #bd0711; border-radius: 50%; text-align: center; width: 1.7em; height: 1.7em; display: inline-block; margin-bottom: 20px; } body#fs_Top #evidence img {margin-top:30px;} @media screen and (max-width: 750px) { body#fs_Top #evidence ol > li p{text-align: left;} body#fs_Top #evidence ol > li p br{display: none;} } body#fs_Top #evidence img {width: 100%;} /* about us */ #aboutus { background: #f2f3f5; } /* インフォメーション */ #info { background: #ffffff; } #info article { font-size: 1em; line-height: 1.9; } #info article a { color: #bd0711; } #info article dl { margin: 0 0 20px; } #info article dl dt { width: 100%; margin-right: 20px; color: #909293; } #info article dl dd { width: 100%;} #info article dl .new:after { color: #bd0711; font-weight: 800; font-size: 0.6rem; margin-left: 10px; padding: 1px 8px; line-height: 0; border-width: 1px; border-style: solid; border-color: #bd0711; content: 'NEW'; width: 44px; height: 16px; } #info article dl:hover { opacity: 0.8; } @media screen and (min-width: 750px) { #info article dl { margin: 0 80px 20px; display: -webkit-flex; /* Safari */ display: flex; } #info article dl dt { width: 10%;} #info article dl dd { width: 90%;} } .product-list-page{margin-top:30px;} /* カテゴリートップ ---------------------------------------------------------- */ .category_top {width: 1168px; text-align: left; margin: 0px auto 30px auto; } .category_top_comment { padding: 24px 24px;} .category_top p.ttl { border-bottom: 2px solid #DDD; margin-bottom: 1em; font-weight: bold; text-align: left;} .category_top h1, .category_top h2, .category_top h3 { font-size: 0.8em; font-weight: normal; line-height: 1.8em; text-align: left;margin: 0;} .category_top_contents{width: 1168px; margin: 0 auto;} .category_top_contents ul { list-style: none; } .category_top_contents ul:after { content: ""; display: block; clear: both; } .category_top_contents ul li { margin-bottom: 20px; } .category_top_contents ul li:nth-child(2) figure, .category_top_contents ul li:nth-child(3) figure { height: 150px; } .category_top_contents ul li:nth-child(2) { width: calc(98%/2); float: left; } .category_top_contents ul li:nth-child(3) { width: calc(98%/2); float: right; } .category_top_contents a.bnr { position: relative; display: block; } .category_top_contents a.bnr figure { top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .category_top_contents a.bnr figure img { position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; } .category_top_contents a.bnr figure figcaption { position: absolute; z-index: 997; color: #fff; bottom: 0; left: 0; right: 0; line-height: 1.3em; padding: 90px 20px 20px; background-repeat: repeat-x; background-image: url("https://replug.itembox.design/item/slide_bg.png?t=20250513165337"); background-size: 1px 100px; text-align: left; background-position: 0% bottom; } .category_top_contents a.bnr figure figcaption strong { font-size: 1.1em; } .category_top_contents a.bnr:before { content: ""; display: block; padding-top: 60%; } .category_top_contents a.bnr:focus { outline: none; } .category_top_ranking ol { list-style: none; margin-bottom: 2em; } .category_top_ranking ol:after { content: ""; display: block; clear: both; } .category_top_ranking ol li { width: calc(96%/3); margin-right: 2%; float: left; box-sizing: border-box; } .category_top_ranking ol li img { width: 100%; vertical-align: bottom; } .category_top_ranking ol li:last-child { margin-right: 0; } .category_top_ranking ol li span { color: #FFF; font-weight: bold; text-align: center; display: block; padding-top: .7em; padding-bottom: .7em; line-height: 1.5; } .category_top_ranking ol li span br { display: none; } .category_top_ranking ol li:nth-child(1) span { background-color: #e4bd10; } .category_top_ranking ol li:nth-child(2) span { background-color: #808183; } .category_top_ranking ol li:nth-child(3) span { background-color: #a98d1f; } #category_catch{background-color: #f2f3f5; margin: 20px 0 10px; line-height: 1.5em;} #category_catch dt{font-size: 1.5em; padding: 10px 80px; font-weight: bold;} #category_catch dd{padding:10px 80px 30px; font-size:1.2em;} p.category-ranking{text-align: left; margin-bottom: 30px; line-height: 2; border-bottom: #ac251f solid 1px; font-size:1.5em; font-weight:bold;} @media all and (-ms-high-contrast: none) { .category_top_ranking h2 span { background-position: left top; } .category_top_ranking ol li span { padding-top: .9em; } } @media screen and (max-width: 750px) { .category_top, .category_top_contents{width: 100%;} .category_top_contents a.bnr figure figcaption { padding: 90px 10px 10px; } .category_top_contents ul li:nth-child(2) figure, .category_top_contents ul li:nth-child(3) figure { height: 25vw; } .category_top_contents h2 { font-size: 1.5em; line-height: 1.7em; } .category_top_ranking h2 span { font-size: 1rem; } .category_top_ranking ol li span { font-size: 3vw; height: 4.5em; } .category_top_ranking ol li span br { display: block; } p.category-ranking{font-size:1.2em;} #category_catch dt{padding:10px 20px; font-size: 1.2em;} #category_catch dd{padding:10px 20px; font-size:1.0em;} } /* カテゴリートップ2 ---------------------------------------------------------- */ .category_top2 {width: 1168px; text-align: center; margin: 0px auto; padding:20px; background-color: #f2f3f5;} .category_top_contents-2 p.ttl { font-weight: bold; text-align: left;} .category_top2 h1, .category_top2 h2, .category_top2 h3 { font-size: 0.8em; font-weight: normal; line-height: 1.8em; text-align: center;margin: 0; } .category_top2 h4{font-size:2.0em; font-weight:bold; text-align:center; margin:8px 0;} .category_top_contents-2{width: 1168px; margin: 0 auto;} .category_top_contents-2 ul {list-style: none;} .category_top_contents-2 ul:after { content: ""; display: block; clear: both; } .category_top_contents-2 ul li { margin-bottom: 20px; } .category_top_contents-2 ul li p {text-align: left;} .category_top_contents-2 a.bnr { position: relative; display: block; } .category_top_contents-2 a.bnr figure { top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .category_top_contents-2 a.bnr figure img { position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; } .category_top_contents-2 a.bnr figure figcaption { position: absolute; z-index: 997; color: #fff; bottom: 0; left: 0; right: 0; line-height: 1.3em; padding: 90px 20px 20px; background-repeat: repeat-x; background-image: url("https://replug.itembox.design/item/slide_bg02.png?t=20250513165337"); background-size: 1px 155px; text-align: left; background-position: 0% bottom; } .category_top_contents-2 a.bnr figure figcaption strong { font-size: 1.1em; } .category_top_contents-2 a.bnr:before { content: ""; display: block; padding-top: 60%; } .category_top_contents-2 a.bnr:focus { outline: none; } @media screen and (max-width: 750px) { .category_top2{ width: calc(100% + 48px);margin-left: -24px;margin-right: -24px;padding-left: 24px;padding-right: 24px;} .category_top_contents-2{width: 100%;} .category_top_contents-2 a.bnr figure figcaption { padding: 90px 10px 10px; } .category_top_contents-2 h2 { font-size: 1.2em; line-height: 1.8em; } .category_top2 h4{font-size:1.4em;} .category_top2 .sptxt br{display:none;} } /* 各カテゴリートップ ---------------------------------------------------------- */ .category_top_wide{width: 1000px; margin: 0 auto;} @media screen and (max-width: 750px) { .category_top_comment{line-height: 1.6;} .category_top_wide{width: 100%;} } /* カテゴリートップmovie ---------------------------------------------------------- */ .category_top_mv video{width:100%; margin-bottom:10px;} .category_top_mv .txt h4{text-align:center; font-weight:bold; font-size:1em;} /* 吹き出し */ ul.fukidashi {padding-top: 2em; margin: 0 auto;} ul.fukidashi:after {clear: both;content: '';display: block;} ul.fukidashi li {font-size: 1.1em;line-height: 1.5;background-color: #f2f3f5;display: block;border-radius: 15px;padding: 1em 2em;margin-bottom: 1em;width: 55%;position: relative;} ul.fukidashi li:last-child {margin-bottom: 0;} ul.fukidashi li:before {border: solid transparent;content: '';height: 0;width: 0;position: absolute;border-color: rgba(242, 243, 245, 0);border-top-width: 12px;border-bottom-width: 12px;border-left-width: 21px;border-right-width: 21px;margin-top: -12px;border-right-color: #F2F3F5;right: 100%;top: 50%;} ul.fukidashi li:nth-child(even) {margin-left: 45%;} ul.fukidashi li:nth-child(even):before {border-color: rgba(242, 243, 245, 0);border-top-width: 12px;border-bottom-width: 12px;border-left-width: 21px;border-right-width: 21px;margin-top: -12px;border-left-color: #F2F3F5;left: 100%;top: 50%;} @media screen and (max-width: 750px) { ul.fukidashi li {width: 85%;} ul.fukidashi li:nth-child(even) {margin-left: 15%;} } /* カテゴリーページ テキスト */ .category_comment{margin:20px 0;} .category_comment p{font-size:0.9em; line-height:1.8em; text-align:left;} /* 商品紹介 */ section.product-list{border: 2px solid #F2F3F5;margin:2em auto;} section.product-list h2 {margin-bottom: 1em;} section.product-list .item {display: block; width: 75%; margin: auto; align-items: center;} section.product-list .item img {width: 100%;} section.product-list .item p {padding-left: 0px; width: 100%; padding-top: 1em;} @media screen and (max-width: 750px) { section.product-list h2 {font-size: 1.1em;} section.product-list .item p {text-align: left;} section.product-list .item p br{display: none;} section.product-list a.btn{margin-bottom: 0;} } /* お客様の声 */ dl.voice {margin: 30px auto;} dl.voice dt {font-size: 0.8em; line-height: 1; margin-bottom: 0; padding: 20px 70px 0px; background-color: #F2F3F5;} dl.voice dd {margin-bottom: 10px;padding: 10px 70px 10px; background-color: #F2F3F5;} @media screen and (max-width: 750px) { dl.voice {margin: 10px auto; font-size: 0.9em;line-height: 1.5;} dl.voice dt {padding: 20px 20px 0px; } dl.voice dd {padding: 10px 20px 10px; } } /* お客様の声　リニューアル*/ *, *:before, *:after {box-sizing: border-box;} .review_area{ border:solid 1px #333333; margin:30px 0; padding:30px;} .review_col{ width: 100%; display: flex; margin-bottom:20px; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .review_col p{ text-align: left; display: table-cell; vertical-align: middle; font-size: 18px; padding: 10px; line-height:1.6em;} .review_col figure{width:80%; margin-top:10px;} .review_col > div{ width: 50%; padding: 10px; } @media screen and (max-width: 750px) { .review_col > div{ width: 100%; padding: 0; } .review_area{padding:10px;} .review_col p{width: 100%; height: 100px; font-size: 16px; padding: 10px;} .review_col figure{width:100%;} } /* フルワイド */ .category_top_contents.fullwide{width: 100%; background: #f2f3f5; padding: 25px 0; margin: 25px 0 25px 0;} @media screen and (max-width: 750px) { .category_top_contents.fullwide{ width: calc(100% + 48px);margin-left: -24px;margin-right: -24px;padding-left: 24px;padding-right: 24px;} } /* youtube */ .category_top_contents.youtube{position: relative; padding-bottom: 40.3%; margin-bottom: 50px;} @media screen and (max-width: 750px) { .category_top_contents.youtube{padding-bottom: 53.3%; } } /* quality */ .category_top_contents.quality{} .category_top_contents.quality h2 { font-size: 1.9em; margin-bottom: 30px; } .category_top_contents.quality h2 span { color: #bd0711; display: block; } .category_top_contents.quality ol li{margin-bottom:3em; list-style:none;} .category_top_contents.quality ol li:last-child {margin-bottom:0;} .category_top_contents.quality ol li figure{width:100%; } .category_top_contents.quality ol li figure img{width:100%;} .category_top_contents.quality figcaption h3,.category_top_contents.quality figcaption p{text-align:left !important;} .category_top_contents.quality figcaption h3{margin: 0.5em 0;line-height: 1.5;} .category_top_contents.quality figcaption.catch{background: #fff; margin-bottom: 0px;} @media screen and (max-width: 750px) { section.category_top_contents.quality h2 { font-size: 1.4em; line-height: 1.4em;} } /* catch */ .catch{background:#f2f3f5;padding:1em; width:100%; margin-bottom:30px;} .catch h1{line-height: 1.4; font-size: 2.5em; margin-bottom: .5em; margin-top: .5em;} .catch h2{line-height:1.4;font-size:1.2em;text-align:left;padding-right:10px;font-weight:normal;} @media screen and (max-width: 750px) { .catch h2 { font-size: 1.0em;} } /* 特記事項*/ section.info_comment{border: 2px solid #F2F3F5;margin:2em auto;} section.info_comment .item {display: block; margin: auto; align-items: center;} section.info_comment .item img {width: 100%;} section.info_comment .item p {width: 100%; padding-top: 1em;} @media screen and (max-width: 750px) { section.info_comment h2 {font-size: 1.1em;} section.info_comment .item p {text-align: left; line-height: 1.5em; padding: 0 10px;} section.info_comment .item p br{display: none;} section.info_comment a.btn{margin-bottom: 0;} } /* Sara bookカテゴリーページ （/fs/replug/c/gr142） ---------------------------------------------------------- */ #sarabook dl{margin-bottom:30px; padding:0 20px;} #sarabook dt{font-size: 1.5em; font-weight: bold; margin-bottom: 10px; line-height: 1.2;} #sarabook dd{font-size: 1.1em; text-align:left; margin-bottom:10px; line-height:2.5rem;} #sara_reco{background:#f2f3f5; padding:30px 20px; margin-bottom:50px;} #sara_reco ol{width:100%;} #sara_reco ol li{padding-bottom:3em;list-style:none;} #sara_reco h3{text-align:left;} #sara_reco ol li figure{margin-bottom:10px;width:100%;} .sarabook{border:2px solid #f2f3f5;padding:10px;} .saracustom li{list-style-type: none;} @media screen and (max-width: 750px) { .catch h1{font-size: 1.5em;} #sarabook dl{padding:0;} #sarabook dt{font-size: 1.2em;} #sarabook .sara_howto h2{font-size: 1.2em; text-align:center;}} .sarabook h2,.sarabook h3{font-size: 1rem;} .saracustom h2{font-size:1.6em;} } /* カテゴリーページランキング ---------------------------------------------------------- */ #cate_ranking dl{margin-bottom:-50px;} #cate_ranking dt{font-size: 1.5em; font-weight: bold; margin-bottom: 10px; line-height: 1.2;} #cate_ranking dd{text-align:left; margin-bottom:10px; line-height:2.5rem;} @media screen and (max-width: 750px) { 　#cate_ranking dt{font-size: 1.2em;} } /* attention /* ---------------------------------------------------------- */ .attention{ border:solid 2px #F2F3F5; padding:20px;} /* Atelier mio商品詳細ページ ---------------------------------------------------------- */ .mio-play{background-image: url(https://www.replug.jp/atelier_mio/img/bg_green.jpg);background-size: 100% auto;} /* 商品詳細ページ ---------------------------------------------------------- */ .product_details{width: 100%; margin: 0 auto;} .product_details h2{border-bottom:#bd0711 solid 1px;} .product_details ol li{list-style-type: none;} .bold{font-weight: bold;} /* catch2 */ .catch2{padding:1em; width:100%; margin-bottom:30px;} /* quality */ .product_details.quality h2 { font-size: 1.9em; margin-bottom: 30px; text-align:center; } .product_details.quality h2 span { color: #bd0711; display: block; } @media screen and (max-width: 750px) { section.product_details.quality h2 { font-size: 1.2em; line-height: 1.5em; text-align:center;} } /* カテゴリーページお得情報 ---------------------------------------------------------- */ #deals dd{font-size: 1em; text-align:left; margin-bottom:20px;} #deals dd img{margin-bottom:30px; width:100%;} #deals .bold{font-size: 1.2em; font-weight: bold; margin-bottom: 10px; line-height: 1.2;} /* 商品詳細ページお得情報 ---------------------------------------------------------- */ .deals dt{font-size: 1.2em; font-weight: bold; margin-bottom: 10px; line-height: 1.2;} .deals dd{font-size: 1em; text-align:left; margin-bottom:20px;} .deals dd img{margin-bottom:30px; width:100%;} /* コンセプト ---------------------------------------------------------- */ #about { padding-top: 50px; } #about .concept { margin: 50px auto; padding:0 30px;} #about .concept .bottom { display: -webkit-flex; /* Safari */ display: flex; width: 65%; margin: 0 auto;} #about .concept .bottom_box { margin: 20px auto; } #about .concept .bottom_box p { font-size: 0.9em; line-height: 1.3em; text-align: left; } @media screen and (max-width: 750px) { #about .concept .bottom {display: block;} } /* 会員限定クーポン ---------------------------------------------------------- */ #about .member-regi {text-align: center;} /* ご利用ガイド ---------------------------------------------------------- */ #guide { padding-top: 50px; } #guide p { text-align: left; } #guide .ttl > a { display: block; color: #333333; } #guide .container { margin: 0 auto; } #guide .container { display: -webkit-flex; /* Safari */ display: flex; } #guide .item { background: #fff; padding: 7px; color: #333; text-align: center; line-height:1.4; margin: 10px; font-size: 1em; flex: 1; display: block; border:solid #333 1px; } @media screen and (max-width: 750px) {#guide .item{ margin: 2px; font-size: 0.8em;} } #guide .guide_nav { margin-bottom: 20px; } #guide .guide h3 { background: #f2f3f5; margin-bottom: 10px; padding: 10px; } #guide .guide h3, #guide .guide h4 { text-align: left; } #guide .guide .sgwrap { margin-top: -80px; padding-top: 80px;} #guide .guide .sgwrap .red,.red,a.red:visited { color: #bd0711; } #guide .guide .sgwrap p { font-size: 1.1em; line-height: 1.8em; } #guide .guide .sgwrap .sg { margin-top: 20px; } #guide .guide .sgwrap .sg h4 { margin-bottom: 0px; font-weight:bold;} #guide .guide .sgwrap .sg h5 { font-size: 14px; } #guide .guide .sgwrap .sg ul { margin-top: -20px; } #guide .guide .sgwrap .sg li { list-style: none; margin-top: 20px; } #guide .guide .sgwrap .sg table { with: 100%; margin: 10px 0; border: #d7d8db solid 1px; } #guide .guide .sgwrap .sg table th { background: #f2f3f5; } #guide .guide .sgwrap .sg table th, #guide .guide .sgwrap .sg table td { padding: 10px; border: #d7d8db solid 1px; } #guide .guide .sgwrap .sg .cap { display: inline-block; width: 0.8em; text-indent: 0; font-size: 1em; } #guide .guide .sgwrap .stext { font-size: 0.8em; line-height: 1.3em; } #guide .guide .sgwrap .msize { font-size: 18px; } #guide .guide .sg .container img { padding: 10px; } @media screen and (min-width: 750px) {#guide .guide .sgwrap { margin-top: -120px; padding-top: 120px;} } /* 店舗一覧 ---------------------------------------------------------- */ #shopList { background: #f2f3f5; } #shopList ul { list-style: none; } #shopList .area { display: flex; } #shopList .inputSet { display: flex; display: -webkit-flex; background: #edeff1; margin-bottom: 1em;} #shopList #output { margin: 64px 0; } #shopList #output li { background: #fff; margin-bottom: 24px; padding: 24px; } #shopList #output li h4 { font-size: 1.1em; font-weight: bold;} #shopList #output li p { font-size: 0.9em; text-align: left; } #shopList #output li a { font-size: 0.9em; background: #fff; color: #bd0711; } #shopList #output li .gmaplink { background: url(https://replug.itembox.design/item/mapicon.svg?t=20250513165337) no-repeat; background-position: left center; padding-left: 16px; } #shopList #output li .products { font-size: 0.9em; margin-top: 16px; } #shopList #output li .products dt { width: 160px; color: #fff; padding: 2px 20px; background: #aaa url(https://replug.itembox.design/item/arrow_w.svg?t=20250513165337) no-repeat; background-position: right 20px bottom 50%; } #shopList #output li .products dd { display: none; background: #fff; border: #bd090f solid 1px; padding: 20px; } #shopList #output li .products:hover > dd { display: block; } #shopList .btnSet { display: flex; } #shopList .btnSet .btn { cursor: pointer; width: 40%; } #shopList .shop_search_btn{background-color:#fff; border:1px solid #ccc; border-radius:3px;} body .float_block { color: #FFF; background-color: #bd0711; text-align: center; z-index: 1000; position: fixed; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; line-height: 1.3;} body .float_block br { display: block; } body .float_block small { line-height: 1.3 !important; } @media screen and (min-width: 750px) { body .float_block { top: 120px; line-height: 1;} body .float_block br { display: none; } #shopList .btnSet .btn { width: 240px; } } /* 店舗一覧_230926new ---------------------------------------------------------- */ #shopList .Prefarea h3 { text-align: left; font-size: 1.3em; font-weight: bold; border-bottom: #ac251f solid 1px; line-height: 2; margin-top: 30px;} #shopList .container { margin: 0 auto; } #shopList .container { display: -webkit-flex; /* Safari */ display: flex; } #shopList .item { background: #fff; padding: 7px; color: #333; text-align: center; line-height:1.4; margin: 10px; font-size: 1em; flex: 1; display: block; border:solid #333 1px; } #shopList .pref_nav { margin-bottom: 20px; } #shopList .Prefarea { margin-top: -120px; padding-top: 120px;} #shopList .shop_col{margin: 10px 5px; padding: 20px;background: #fff;} @media screen and (max-width: 750px) { #shopList .item{ margin: 2px; font-size: 0.8em;} #shopList .Prefarea { margin-top: -80px; padding-top: 80px;} #shopList .shop_col{margin: 5px; padding: 10px;background: #fff;} } /* お問い合わせ ---------------------------------------------------------- */ section#contact { padding: 25px 0px 25px 0px;} section#contact { background: #f2f3f5; } section#contact h1{ font-size: 1em;font-weight: bold; margin-bottom: 0.5em;} section#contact article { padding: 15px; box-sizing: border-box; background: #fff; width: 100%; height: 180px; overflow: scroll; } section#contact li { margin-bottom: 24px; list-style: none; } section#contact li label { display: block; } section#contact li label.labelCenter { text-align: center; padding: 10px;} @media screen and (max-width: 750px) { section#contact {padding: 25px 10px 0px 10px;} } /* お問い合わせ iframe ---------------------------------------------------------- */ body#contactForm .iframeForm { padding: 0;} /* 個人情報取扱いについて ---------------------------------------------------------- */ #contentsPolicy { font-size: 0.8em; margin-top: 0px; } #contentsPolicy p { line-height: 1.3em; } #contentsPolicy h2 { margin-bottom: 30px; } #contentsPolicy h3 { font-size: 1em; text-align: left; background: #f2f3f5; padding: 10px; } #contentsPolicy h4 { margin: 20px 0; border-bottom: 2px solid #DDDDDD; padding-bottom: 5px; } #contentsPolicy p { text-align: left; } #contentsPolicy ol, #contentsPolicy ul { margin: 20px 0; padding-left: 20px; font-size: 0.9em; line-height: 1.5em; } #contentsPolicy ul { list-style: none; } #contentsPolicy li { margin-bottom: 0px; line-height: 1.5em;} #contentsPolicy .none li { list-style: none; margin-bottom: 1em;} #contentsPolicy .left_in { margin-bottom: 4em; } #contentsPolicy .left_in::last-of-type { margin-bottom: 1em; } #contentsPolicy .left_in p { margin-top: 10px; } #contentsPolicy .address { margin-top: 30px; } #contentsPolicy .sm { font-size: 0.9em; } #contentsPolicy .cap { display: inline-block; width: 0.8em; text-indent: 0; font-size: 1em; } #contentsPolicy .red { color: #bd0711; } #contentsPolicy .contact { border: 1px solid #DDDDDD; padding: 10px; margin: 30px 0; } #contentsPolicy .contact h3 { background: none; padding: 0; margin: 0; } /* 特定商取引法に基づく表示 ---------------------------------------------------------- */ #fs_AboutTerms section p {text-align: left;} /* 動画一覧ページ ---------------------------------------------------------- */ #movie {padding: 50px 0 50px 0;} #movie section.concept{margin-bottom: 50px;} #movie section.youtube:nth-of-type(even) {background: #f2f3f5;} #movie section.youtube{padding: 80px 0px 100px;} #movie section.youtube h4 {font-size: 1.6em;font-weight: bold;text-align: center;margin-top: 0px;margin-bottom: 20px;} @media screen and (max-width: 750px) { #movie section.concept, #movie section.youtube{ padding-left: 25px; padding-right: 25px;} #movie section.concept p{text-align: left;} }