@charset "UTF-8";
/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
/**
* SETTINGS
* File-header..........The file header for the themes style.css file.
* Fonts................Any font files, if the project needs specific fonts.
* Global...............Project-specific, globally available variables.
*
* TOOLS
* Functions............Global functions.
* Mixins...............Global mixins.
*
* GENERIC
* Normalize.css........Normalise browser defaults.
* Breakpoints..........Mixins and variables for responsive styles
* Vertical-margins.....Vertical spacing for the main components.
* Reset................Reset specific elements to make them easier to style in other contexts.
* Clearings............Clearings for the main components.
*
* ELEMENTS
* Blockquote...........Default blockquote.
* Forms................Element-level form styling.
* Headings.............H1–H6
* Links................Default links.
* Lists................Default lists.
* Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
*
* BLOCKS
* Audio................Specific styles for the audio block.
* Button...............Specific styles for the button block.
* Code.................Specific styles for the code block.
* Columns..............Specific styles for the columns block.
* Cover................Specific styles for the cover block.
* File.................Specific styles for the file block.
* Gallery..............Specific styles for the gallery block.
* Group................Specific styles for the group block.
* Heading..............Specific styles for the heading block.
* Image................Specific styles for the image block.
* Latest comments......Specific styles for the latest comments block.
* Latest posts.........Specific styles for the latest posts block.
* Legacy...............Specific styles for the legacy gallery.
* List.................Specific styles for the list block.
* Media text...........Specific styles for the media and text block.
* Navigation...........Specific styles for the navigation block.
* Paragraph............Specific styles for the paragraph block.
* Pullquote............Specific styles for the pullquote block.
* Quote................Specific styles for the quote block.
* Search...............Specific styles for the search block.
* Separator............Specific styles for the separator block.
* Spacer...............Specific styles for the spacer block.
* Table................Specific styles for the table block.
* Verse................Specific styles for the verse block.
* Video................Specific styles for the video block.
* Utilities............Block alignments.
*
* COMPONENTS
* Header...............Header styles.
* Footer...............Footer styles.
* Comments.............Comment styles.
* Archives.............Archive styles.
* 404..................404 styles.
* Search...............Search styles.
* Navigation...........Navigation styles.
* Footer Navigation....Footer Navigation styles.
* Pagination...........Pagination styles.
* Single...............Single page and post styles.
* Posts and pages......Misc, sticky post styles.
* Entry................Entry, author biography.
* Widget...............Widget styles.
* Editor...............Editor styles.
*
* UTILITIES
* A11y.................Screen reader text, prefers reduced motion etc.
* Color Palette........Classes for the color palette colors.
* Editor Font Sizes....Editor Font Sizes.
* Measure..............The width of a line of text, in characters.
*/
/* Categories 01 to 03 are the basics. */
/* Variables */
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
/* Font Size */
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
/* Line Height */
--global--line-height-body: 1.7;
--global--line-height-heading: 1.3;
--global--line-height-page-title: 1.1;
/* Headings */
--heading--font-family: var(--global--font-primary);
--heading--font-size-h6: var(--global--font-size-xs);
--heading--font-size-h5: var(--global--font-size-sm);
--heading--font-size-h4: var(--global--font-size-lg);
--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
--heading--font-size-h2: var(--global--font-size-xl);
--heading--font-size-h1: var(--global--font-size-page-title);
--heading--letter-spacing-h6: 0.05em;
--heading--letter-spacing-h5: 0.05em;
--heading--letter-spacing-h4: var(--global--letter-spacing);
--heading--letter-spacing-h3: var(--global--letter-spacing);
--heading--letter-spacing-h2: var(--global--letter-spacing);
--heading--letter-spacing-h1: var(--global--letter-spacing);
--heading--line-height-h6: var(--global--line-height-heading);
--heading--line-height-h5: var(--global--line-height-heading);
--heading--line-height-h4: var(--global--line-height-heading);
--heading--line-height-h3: var(--global--line-height-heading);
--heading--line-height-h2: var(--global--line-height-heading);
--heading--line-height-h1: var(--global--line-height-page-title);
--heading--font-weight: normal;
--heading--font-weight-page-title: 300;
--heading--font-weight-strong: 600;
/* Block: Latest posts */
--latest-posts--title-font-family: var(--heading--font-family);
--latest-posts--title-font-size: var(--heading--font-size-h3);
--latest-posts--description-font-family: var(--global--font-secondary);
--latest-posts--description-font-size: var(--global--font-size-sm);
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray);
/* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray);
/* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green);
/* Mint, default body background */
--global--color-border: var(--global--color-primary);
/* Used for borders (separators) */
/* Spacing */
--global--spacing-unit: 20px;
--global--spacing-measure: unset;
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px;
/* Elevation */
--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
/* Forms */
--form--font-family: var(--global--font-secondary);
--form--font-size: var(--global--font-size-sm);
--form--line-height: var(--global--line-height-body);
--form--color-text: var(--global--color-dark-gray);
--form--color-ranged: var(--global--color-secondary);
--form--label-weight: 500;
--form--border-color: var(--global--color-secondary);
--form--border-width: 3px;
--form--border-radius: 0;
--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
/* Cover block */
--cover--height: calc(15 * var(--global--spacing-vertical));
--cover--color-foreground: var(--global--color-white);
--cover--color-background: var(--global--color-black);
/* Buttons */
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--button--font-family: var(--global--font-primary);
--button--font-size: var(--global--font-size-base);
--button--font-weight: 500;
--button--line-height: 1.5;
--button--border-width: 3px;
--button--border-radius: 0;
--button--padding-vertical: 15px;
--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
/* entry */
--entry-header--color: var(--global--color-primary);
--entry-header--color-link: currentColor;
--entry-header--color-hover: var(--global--color-primary-hover);
--entry-header--color-focus: var(--global--color-secondary);
--entry-header--font-size: var(--heading--font-size-h2);
--entry-content--font-family: var(--global--font-secondary);
--entry-author-bio--font-family: var(--heading--font-family);
--entry-author-bio--font-size: var(--heading--font-size-h4);
/* Header */
--branding--color-text: var(--global--color-primary);
--branding--color-link: var(--global--color-primary);
--branding--color-link-hover: var(--global--color-secondary);
--branding--title--font-family: var(--global--font-primary);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--heading--font-size-h4);
--branding--title--font-weight: normal;
--branding--title--text-transform: uppercase;
--branding--description--font-family: var(--global--font-secondary);
--branding--description--font-size: var(--global--font-size-sm);
--branding--description--font-family: var(--global--font-secondary);
--branding--logo--max-width: 300px;
--branding--logo--max-height: 100px;
--branding--logo--max-width-mobile: 96px;
--branding--logo--max-height-mobile: 96px;
/* Main navigation */
--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
/* Pagination */
--pagination--color-text: var(--global--color-primary);
--pagination--color-link-hover: var(--global--color-primary-hover);
--pagination--font-family: var(--global--font-secondary);
--pagination--font-size: var(--global--font-size-lg);
--pagination--font-weight: normal;
--pagination--font-weight-strong: 600;
/* Footer */
--footer--color-text: var(--global--color-primary);
--footer--color-link: var(--global--color-primary);
--footer--color-link-hover: var(--global--color-primary-hover);
--footer--font-family: var(--global--font-primary);
--footer--font-size: var(--global--font-size-sm);
/* Block: Pull quote */
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h3);
--pullquote--font-style: normal;
--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 3px;
--pullquote--border-color: var(--global--color-primary);
--pullquote--color-foreground: var(--global--color-primary);
--pullquote--color-background: var(--global--color-background);
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-xl);
--quote--font-style: normal;
--quote--font-weight: 700;
--quote--font-weight-strong: bolder;
--quote--font-style-large: normal;
--quote--font-style-cite: normal;
--quote--line-height: var(--global--line-height-body);
--quote--line-height-large: 1.35;
--separator--border-color: var(--global--color-border);
--separator--height: 1px;
/* Block: Table */
--table--stripes-border-color: var(--global--color-light-gray);
--table--stripes-background-color: var(--global--color-light-gray);
--table--has-background-text-color: var(--global--color-dark-gray);
/* Widgets */
--widget--line-height-list: 1.9;
--widget--line-height-title: 1.4;
--widget--font-weight-title: 700;
--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
/* Admin-bar height */
--global--admin-bar--height: 0px;
}
.admin-bar {
--global--admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
.admin-bar {
--global--admin-bar--height: 46px;
}
}
@media only screen and (min-width: 652px) {
:root {
--global--font-size-xl: 2.5rem;
--global--font-size-xxl: 6rem;
--global--font-size-xxxl: 9rem;
--heading--font-size-h3: 2rem;
--heading--font-size-h2: 3rem;
}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration-thickness: 1px;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration-style: dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/**
* Responsive Styles
*/
/**
* Required Variables
*/
/**
* Root Media Query Variables
*/
:root {
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
}
@media only screen and (min-width: 482px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
/**
* Extends
*/
.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
max-width: var(--responsive--aligndefault-width);
margin-left: auto;
margin-right: auto;
}
.widget-area,
.pagination,
.comments-pagination,
.post-navigation,
.site-footer,
.site-header,
.alignwide,
.wide-max-width {
max-width: var(--responsive--alignwide-width);
margin-left: auto;
margin-right: auto;
}
.alignfull,
.wp-block-group .wp-block-group__inner-container > *.alignfull,
.full-max-width {
max-width: var(--responsive--alignfull-width);
width: var(--responsive--alignfull-width);
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 482px) {
.alignfull,
.full-max-width {
max-width: var(--responsive--alignfull-width);
width: auto;
margin-left: auto;
margin-right: auto;
}
}
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide {
margin-left: auto;
margin-right: auto;
width: var(--responsive--alignwide-width);
max-width: var(--responsive--alignfull-width);
}
@media only screen and (min-width: 482px) {
.entry-content > .alignleft {
/*rtl:ignore*/
margin-left: var(--responsive--alignleft-margin);
/*rtl:ignore*/
margin-right: var(--global--spacing-horizontal);
}
}
@media only screen and (min-width: 482px) {
.entry-content > .alignright {
/*rtl:ignore*/
margin-left: var(--global--spacing-horizontal);
/*rtl:ignore*/
margin-right: var(--responsive--alignright-margin);
}
}
/**
* Site Structure
*
* - Set vertical margins and responsive widths on
* top-level wrappers and content wrappers
* - `--global--width-content` is a responsive variable
* - See: globals/_global-width-responsive.scss
*/
/**
* Top Level Wrappers (header, main, footer)
* - Set vertical padding and horizontal margins
*/
.site-header,
.site-main,
.widget-area,
.site-footer {
padding-top: var(--global--spacing-vertical);
padding-bottom: var(--global--spacing-vertical);
margin-left: auto;
margin-right: auto;
}
.site-header {
padding-top: calc(0.75 * var(--global--spacing-vertical));
padding-bottom: calc(2 * var(--global--spacing-vertical));
}
@media only screen and (min-width: 482px) {
.site-header {
padding-bottom: calc(3 * var(--global--spacing-vertical));
}
}
/**
* Site-main children wrappers
* - Add double vertical margins here for clearer hierarchy
*/
.site-main > * {
margin-top: calc(3 * var(--global--spacing-vertical));
margin-bottom: calc(3 * var(--global--spacing-vertical));
}
.site-main > *:first-child {
margin-top: 55px;
}
.site-main > *:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 767px){
.site-main > *:first-child {
margin-top: 11px;
}
}
/**
* Set the default maximum responsive content-width
*/
/**
* Set the wide maximum responsive content-width
*/
/**
* Set the full maximum responsive content-width
*/
/*
* Block & non-gutenberg content wrappers
* - Set margins
*/
.entry-header,
.post-thumbnail,
.entry-content,
.entry-footer,
.author-bio {
margin-top: var(--global--spacing-vertical);
margin-right: auto;
margin-bottom: var(--global--spacing-vertical);
margin-left: auto;
}
/*
* Block & non-gutenberg content wrapper children
* - Sets spacing-vertical margin logic
*/
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
}
@media only screen and (min-width: 482px) {
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.wp-block-post-template :where(li > *):first-child {
margin-top: 0;
}
.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.wp-block-post-template :where(li > *):last-child {
margin-bottom: 0;
}
.site-footer > *,
.widget-area > * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
}
@media only screen and (min-width: 482px) {
.site-footer > *,
.widget-area > * {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
/*
* Block & non-gutenberg content wrapper children
* - Sets spacing-unit margins
*/
.entry-header > *,
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.widget > * {
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
}
.entry-header > *:first-child,
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.widget > *:first-child {
margin-top: 0;
}
.entry-header > *:last-child,
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.widget > *:last-child {
margin-bottom: 0;
}
/*
* .entry-content children specific controls
* - Adds special margin overrides for alignment utility classes
*/
.entry-content > * {
/* Reset alignleft and alignright margins after alignfull */
}
.entry-content > *.alignleft,
.entry-content > *.alignright,
.entry-content > *.alignleft:first-child + *,
.entry-content > *.alignright:first-child + *,
.entry-content > *.alignfull.has-background {
margin-top: 0;
}
.entry-content > *:last-child,
.entry-content > *.alignfull.has-background {
margin-bottom: 0;
}
.entry-content > *.alignfull + .alignleft,
.entry-content > *.alignfull + .alignright {
margin-top: var(--global--spacing-vertical);
}
/**
* Reset specific elements to make them easier to style in other contexts.
*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/**
* Apply generic border-box to all elements.
* See:
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
/* Apply border-box across the entire page. */
box-sizing: border-box;
font-family: var(--global--font-secondary);
line-height: var(--global--line-height-body);
}
/**
* Relax the definition a bit, to allow components to override it manually.
*/
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-size: var(--global--font-size-base);
font-weight: normal;
color: var(--global--color-primary);
text-align: left;
background-color: var(--global--color-background);
}
button {
cursor: pointer;
}
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/*共通*/
html {
line-height: var(--global--line-height-body);
}
body {
background-color:#fff;
font-family: 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ ゴシック" !important;
}
body.fixed {
position:fixed;
width:100%;
height:100%;
}
#page {
overflow:hidden;
}
.site-main {
padding-bottom:0;
padding-top:0;
}
a:hover {
text-decoration-style: none;
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
outline: none;
text-decoration: none;
background:none;
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
outline: none;
}
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
background:none;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
background:none;
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
background:none;
}
.site .button:focus,
button:focus,
input[type=submit]:focus,
input[type=reset]:focus,
.wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus,
.wp-block-file a.wp-block-file__button:focus {
outline:none;
background:none;
}
.primary-navigation .current-menu-item > a:first-child:hover, .primary-navigation .current_page_item > a:first-child:hover {
text-decoration:none;
}
h3 {
margin:70px 0 26px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix:before {
content: "";
display: block;
clear: both;
}
.clearfix {
display: block;
}
.sp {
display:none;
}
@media only screen and (max-width: 767px){
.pc {
display:none;
}
.sp {
display:block;
}
}
:root {
--global--font-size-base: 1.25rem;
--global--line-height-body: 1.7;
}
/*header*/
.site-header {
background: #E1C3E5;
width:100%;
max-width:100%;
padding:0;
display:flex;
}
.wp-custom-logo .site-header {
align-items: flex-start;
height: 86px;
}
.site-header .logo {
width:180px;
margin:25px auto 25px 25px;
}
.site-header .header-search {
width:350px;
margin:25px 20px;
height: 37px;
position:relative;
}
.site-header #form{
position:relative;
}
.site-header #s-box{
height: 37px;
padding: 0 10px 0 60px;
position: absolute;
left: 0;
top: 0;
border:none;
border-bottom:solid 1px #fff;
outline: 0;
background:none;
width:350px;
box-sizing: border-box;
font-size:13px;
color: #fff;
}
.site-header #s-box:focus {
background:none !important;
}
.site-header #s-box::placeholder {
color:#fff
}
.site-header #s-btn-area{
height: 37px;
position: absolute;
left: 0;
top: 0;
background: none;
color: #666;
border: none;
font-size: 20px;
outline: 0;
padding: 0;
width: 50px;
}
.site-header #s-btn{
width: 50px;
height: 37px;
position: relative;
left: 0;
bottom: -6px;
}
.site-header #s-btn:after {
content:'';
display:inline-block;
width:18px;
height:18px;
background-image:url(../img/search-icon.png);
background-size:100% auto;
}
.site-header .login {
margin:25px 20px;
height:37px;
display:flex;
align-items:center;
font-size:13px;
color:#fff;
text-decoration:none;
}
.site-header .login img {
margin-right:5px;
}
.site-header .cart {
margin:25px 140px 25px 20px;
height:37px;
display:flex;
align-items:center;
position:relative;
}
.site-header .cart .number {
position:absolute;
background-color:#4A4A4A;
color:#fff;
font-size:11px;
width:18px;
height:18px;
top:0;
right:-7px;
border-radius:50%;
text-align:center;
line-height:18px;
}
.site-header #g-nav{
position:fixed;
z-index: 999;
top:0;
right: -120%;
width:395px;
height: 100vh;
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
transition: all 0.6s;
}
.site-header #g-nav.panelactive{
right: 0;
overflow: scroll;
}
.site-header #g-nav.panelactive #g-nav-list{
z-index: 999;
width: 395px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.site-header #g-nav .nav-logo {
width:200px;
margin:40px auto 60px;
}
.site-header #g-nav ul.bb {
border-bottom:1px solid #fff;
padding-bottom: 30px;
margin-bottom:30px;
}
.site-header #g-nav ul {
list-style: none;
padding:0 40px;
}
.site-header #g-nav ul.pb100 {
padding-bottom:100px;
}
.site-header #g-nav ul li {
font-size:14px;
}
.site-header #g-nav ul li a {
text-decoration:none;
position:relative;
color: #fff;
text-decoration: none;
padding: 10px 0;
transition: opacity .6s ease;
display:block;
text-align:left;
}
.site-header #g-nav ul li a:after {
content:'';
display:inline-block;
width: 10px;
height: 10px;
border: 1px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
position:absolute;
top:20px;
right:0;
}
.site-header #g-nav ul li span {
text-decoration:none;
position:relative;
color: #fff;
text-decoration: none;
padding: 10px 0;
transition: opacity .6s ease;
display:block;
text-align:left;
}
.site-header #g-nav ul li span:after {
content:'';
display:inline-block;
width: 10px;
height: 10px;
border: 1px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(135deg);
position:absolute;
top:20px;
right:-4px;
}
.site-header #g-nav ul li.active span:after {
transform: rotate(-45deg);
}
.site-header #g-nav ul li.close ul {
display:none;
padding:0 0 0 20px;
}
.site-header #g-nav ul li.close ul li {
font-size:14px;
}
.site-header #g-nav ul li.close ul li a:after {
content:none;
}
.site-header #g-nav ul li.active ul {
display:block;
}
.site-header #g-nav a:hover {
opacity: 0.6;
}
/*ボタン*/
.openbtn1{
position:absolute;
z-index: 9999;
top:0;
right: 0;
cursor: pointer;
width: 86px;
height:86px;
border-radius: 0 0 0 30px;
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
}
.openbtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 26px;
height: 2px;
border-radius: 2px;
background-color: #fff;
width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:25px;
}
.openbtn1 span:nth-of-type(2) {
top:40px;
}
.openbtn1 span:nth-of-type(3) {
top:55px;
}
.openbtn1.active {
background:none;
}
.openbtn1.active span:nth-of-type(1) {
top: 30px;
left: 25px;
transform: translateY(6px) rotate(-45deg);
width: 45%;
}
.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
top: 42px;
left: 25px;
transform: translateY(-6px) rotate(45deg);
width: 45%;
}
.is-open {
overflow: hidden;
}
.is-open #nav-content {
z-index: 999;
visibility: visible;
opacity: 1;
display:block;
}
.is-open #nav-content a {
pointer-events: auto;
}
@media only screen and (max-width: 1000px){
.site-header {
position:relative;
}
.site-header .header-search {
width: 220px;
}
.site-header #s-box {
width: 220px;
}
.site-header #s-btn-area {
}
}
@media only screen and (max-width: 767px){
.wp-custom-logo .site-header {
height: 60px;
}
.site-header .logo {
width: 120px;
margin:11px auto 13px 10px;
}
.site-header .logo img {
vertical-align:middle;
}
.site-header #s-box {
width: 90%;
left: 5%;
top: 10px;
}
.site-header #s-btn-area {
left: 22px;
top: 8px;
}
.site-header .header-search {
margin: 12px 10px;
height: 36px;
width: 32px;
}
.site-header #s-btn:after {
top: 6px;
left: 10px;
position: absolute;
}
.site-header .login {
margin: 12px 10px 11px;
}
.site-header .login span {
display:none;
}
.openbtn1 {
width:60px;
height:60px;
}
.openbtn1 span {
left: 18px;
}
.openbtn1 span:nth-of-type(1) {
top: 22px;
}
.openbtn1 span:nth-of-type(2) {
top: 30px;
}
.openbtn1 span:nth-of-type(3) {
top: 38px;
}
.openbtn1.active span:nth-of-type(1) {
top:24px;
left:20px;
}
.openbtn1.active span:nth-of-type(3) {
top:36px;
left:20px;
}
.site-header .cart {
margin: 12px 75px 11px 10px;
}
.site-header #form {
display:none;
width:100%;
background-color:#EA84C4;
padding:15px;
box-sizing:border-box;
position:absolute;
bottom:-60px;
left: 0;
height: 60px;
z-index:2;
}
}
#header-hash {
width:100%;
/*padding:20px 0;*/
/*border-bottom:1px solid #ddd;*/
/*new*/
margin: 30px 0 0 0;
overflow: auto;
white-space: nowrap;
text-align: center;
}
/*new*/
@media only screen and (max-width: 767px) {
#header-hash {
margin: 20px 0 0 0;
}
}
/*new*/
#header-hash::-webkit-scrollbar {
display: none;
}
/*new*/
#header-hash {
-ms-overflow-style: none;
scrollbar-width: none;
}
#header-hash .inner {
/* display:flex;
justify-content:center; */
display: inline-flex; /*new*/
}
#header-hash .inner a {
display: inline-block;
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
text-decoration: none;
color: #fff;
padding: 9px 10px;
border-radius: 45px;
width: 150px;
text-align: center;
margin: 0 10px;
font-size: 13px;
height: 38px;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 767px){
#header-hash .inner a {
font-size:10px;
line-height:11px;
margin:0 5px;
}
}
/*ぱんくず*/
#bread-list {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
#bread-list ul{
max-width:1000px;
margin:0 auto;
padding:5px;
display:flex;
align-items: center;
flex-wrap:wrap;
}
#bread-list ul li {
font-size:12px;
list-style:none;
position:relative;
color:#A7A7A7;
padding-right:20px;
}
#bread-list ul li:after {
content:'>';
display:inline-block;
position:absolute;
top:0;
right:7px;
}
#bread-list ul li:last-child:after {
content:none;
}
#bread-list ul li a {
text-decoration:none;
color:#C495CB;
}
/*スライダー*/
.slider {
margin-top:30px !important;
}
@media only screen and (max-width: 767px){
.slider {
margin-top:20px !important;
}
}
.slider .slider-img {
margin: 0 15px;
opacity:0.6;
width:672px;
}
@media only screen and (max-width: 767px){
.slider .slider-img {
width:100%;
}
}
.slider .slider-img.slick-active {
opacity:1;
}
.slider .slide-dots,.top-item-list .slide-dots {
margin: 0;
padding: 0;
text-align: center;
}
.slider .slide-dots li,.top-item-list .slide-dots li {
display: inline-block;
margin: 0 10px;
}
.slider .slide-dots li button,.top-item-list .slide-dots li button {
position: relative;
background:none !important;
background-color:#fff !important;
text-indent: -9999px;
}
.slider .slide-dots li button::before,.top-item-list .slide-dots li button::before {
background-image: url(../img/main-v/slide-dot.png);
background-repeat: no-repeat;
background-size: contain;
content: "";
cursor: pointer;
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 24px;
width: 10px;
}
.slider .slide-dots li.slick-active button::before ,.top-item-list .slide-dots li.slick-active button::before {
background-image: url(../img/main-v/slide-dot_active.png);
}
.slider button,.top-item-list button {
background: none;
border: none;
outline: none;
padding: 0 7px;
}
.slider .slick-arrow:before,.top-item-list .slick-arrow:before{
content:""!important;
}
.slider .slick-arrow:before,.top-item-list .slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
}
.slider .slick-prev, .slider .slick-next,.top-item-list .slick-prev, .top-item-list .slick-next {
bottom: -20px;
top:auto;
background:none !important;
width: 10px;
}
.slider .slick-prev,.top-item-list .slick-prev {
left: 480.8px;
}
.slider .slick-next,.top-item-list .slick-next {
right: 417.6px;
}
.slider .slick-next:before,.top-item-list .slick-next:before{
background: url(../img/arrow_r.png)!important;
background-size: contain!important;
background-repeat:no-repeat!important;
}
.slider .slick-prev:before,.top-item-list .slick-prev:before{
background: url(../img/arrow_l.png)!important;
background-size: contain!important;
background-repeat:no-repeat!important;
}
@media only screen and (max-width: 767px){
.slider .slider-img,.top-item-list .slider-img {
margin:0;
}
}
/*トップページ*/
.top-inner {
max-width:1000px;
margin:50px auto 70px;
position:relative;
}
.top-inner .link {
position:absolute;
font-size:15px;
color:#C495CB;
top:12px;
right:0;
padding-right:15px;
}
.top-inner .link span {
position:relative;
}
.top-inner .link span:after {
content:'';
display:inline-block;
width:8px;
height:14px;
background-image:url(../img/all-arrow.png);
background-size:100% auto;
position:absolute;
right:-13px;
top:50%;
margin-top:-7px;
background-repeat:no-repeat;
}
h2.top-h2 {
font-size:32px;
text-align:center;
font-family: 'Montserrat' !important;
font-weight:600;
margin-bottom:50px;
}
h3.top-h3 {
font-size:28px;
text-align:center;
font-family: 'Montserrat' !important;
font-weight:600;
margin-bottom:70px;
}
h3.top-h3 span {
font-size:14px;
display:inline-block;
font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ ゴシック";
margin-left:10px;
}
.history {
background-color:#F9EFFA;
padding:60px 0;
margin-bottom:0;
}
.top-item-list {
display:flex;
}
.top-item-list.wrap {
flex-wrap:wrap;
}
.top-item-list.ranking {
margin-top:20px;
position:relative;
margin-bottom:0;
flex-wrap:wrap;
}
.top-item-list>a {
width:232px;
margin-right:24px;
text-decoration:none;
}
.top-item-list.wrap>a {
margin-bottom:60px;
}
.top-pick-slider>.slick-list>.slick-track>a {
text-decoration:none;
margin:0 7px;
}
.top-item-list>a:nth-of-type(4n) {
margin-right:0;
}
.top-item-list.ranking>a {
position:relative;
margin-bottom:80px;
}
.top-item-list.ranking>a:before {
content:'';
display:inline-block;
width:36px;
height:20px;
background-image:url(../img/rank01.png);
background-size:100% auto;
position:absolute;
left:50%;
margin-left:-18px;
top:-25px;
background-repeat:no-repeat;
}
.top-item-list.ranking>a:nth-child(2):before {
background-image:url(../img/rank02.png);
}
.top-item-list.ranking>a:nth-child(3):before {
background-image:url(../img/rank03.png);
}
.top-item-list.ranking>a:nth-child(4):before {
background-image:url(../img/rank04.png);
width:12px;
}
.top-item-list.ranking>a:nth-child(5):before {
background-image: url(../img/rank05.png);
width: 12px;
}
.top-item-list.ranking>a:nth-child(6):before {
background-image: url(../img/rank06.png);
width: 12px;
}
.top-item-list.ranking>a:nth-child(7):before {
background-image: url(../img/rank07.png);
width: 12px;
}.top-item-list.ranking>a:nth-child(8):before {
background-image: url(../img/rank08.png);
width: 12px;
}
.top-item-list.ranking>a:nth-child(9):before {
background-image: url(../img/rank09.png);
width: 12px;
}
.top-item-list.ranking>a:nth-child(10):before {
background-image: url(../img/rank10.png);
}
/*
.top-item-list.ranking>a:nth-child(5):before,.top-item-list.ranking>a:nth-child(6):before,.top-item-list.ranking>a:nth-child(7):before,.top-item-list.ranking>a:nth-child(8):before,.top-item-list.ranking>a:nth-child(9):before,.top-item-list.ranking>a:nth-child(10):before {
background-image:none;
width:12px;
font-weight:bold;
color:#333;
margin-left: -6px;
}
.top-item-list.ranking>a:nth-child(5):before {
content:'5';
}
.top-item-list.ranking>a:nth-child(6):before {
content:'6';
}
.top-item-list.ranking>a:nth-child(7):before {
content:'7';
}
.top-item-list.ranking>a:nth-child(8):before {
content:'8';
}
.top-item-list.ranking>a:nth-child(9):before {
content:'9';
}
.top-item-list.ranking>a:nth-child(10):before {
content:'10';
}*/
.top-item-list>a .img,.top-pick-slider>.slick-list>.slick-track>a .img {
margin-bottom:15px;
}
.top-pick-slider>.slick-list>.slick-track>a .img img {
border-radius:10px;
}
.top-item-list>a .img img {
width:100%;
border-radius:10px;
}
.top-item-list>a img:not(:last-child) {
margin-bottom:5px;
}
.top-item-list>a .tags,.top-pick-slider>.slick-list>.slick-track>a .tags,.mypage-item-list li a>div:last-child .tags {
display:flex;
margin-bottom:15px;
flex-wrap:wrap;
}
.top-item-list>a .tags>span,.top-pick-slider>.slick-list>.slick-track>a .tags>span,.mypage-item-list li a>div:last-child .tags>span {
font-size:12px;
padding:3px 12px;
border-radius:20px;
margin-right:5px;
margin-bottom:5px;
}
.top-item-list>a .tags>span.size,.top-pick-slider>.slick-list>.slick-track>a .tags>span.size,.mypage-item-list li a>div:last-child .tags>span.size {
color:#F57183;
border:1px solid #F57183;
}
.top-item-list>a .tags>span.cat,.top-pick-slider>.slick-list>.slick-track>a .tags>span.cat,.mypage-item-list li a>div:last-child .tags>span.cat {
color:#82ADC7;
border:1px solid #82ADC7;
}
.top-item-list>a .title,.top-pick-slider>.slick-list>.slick-track>a .title,.mypage-item-list li a>div:last-child .title {
font-size:14px;
color:#333333;
margin-bottom:5px;
}
.top-item-list>a .price,.top-pick-slider>.slick-list>.slick-track>a .price,.mypage-item-list li a>div:last-child .price {
color:#F57183;
font-size:20px;
}
.top-item-list>a .price .sub,.top-item-list>a .price .yen,.top-pick-slider>.slick-list>.slick-track>a .price .yen,.top-pick-slider>.slick-list>.slick-track>a .price .sub,.mypage-item-list li a>div:last-child .price .sub {
font-size:12px;
}
.top-item-list>a .price-off,.top-pick-slider>.slick-list>.slick-track>a .price-off,.mypage-item-list li a>div:last-child .price-off {
font-size:13px;
color:#989898;
position:relative;
display:inline-block;
margin-right:5px;
}
.top-item-list>a .price-off:after,.top-pick-slider>.slick-list>.slick-track>a .price-off:after,.mypage-item-list li a>div:last-child .price-off:after {
width:60px;
height:1px;
content:'';
background-color:#F57183;
display:inline-block;
position:absolute;
top:50%;
left:0;
}
.top-item-list>a .price-off02,.top-pick-slider>.slick-list>.slick-track>a .price-off02,.mypage-item-list li a>div:last-child .price-off02 {
color:#F57183;
font-size:13px;
display:inline-block;
}
.top-item-list>a .remain {
font-size:14px;
padding-left:28px;
position:relative;
margin-top:5px;
color:#333;
}
.top-item-list>a .remain span {
font-size:16px;
}
.top-item-list>a .remain:before {
display:inline-block;
content:'';
background-image:url(../img/remain-icon.png);
background-repeat:no-repeat;
width:24px;
height:20px;
background-size:100% auto;
position:absolute;
top:50%;
margin-top:-11px;
left:0;
}
@media only screen and (max-width: 767px){
.pickup .top-item-list {
display:block;
}
}
.top-bnr a {
display:block;
position:relative;
}
.top-bnr a .shindan {
position:absolute;
top:19%;
right:20%;
text-align:center;
font-size:22px;
font-family: 'Kiwi Maru', serif;
color:#fff;
}
.top-bnr a .figu {
position:absolute;
top:35%;
right:15%;
text-align:center;
font-size:48px;
font-family: 'Montserrat', serif;
color:#fff;
font-weight: 600;
}
.top-bnr a .check {
position:absolute;
bottom:4%;
right:4%;
text-align:center;
font-size:20px;
font-family: 'Montserrat', serif;
color:#fff;
font-weight: 600;
}
.top-bnr a .check:after {
content: '';
display: inline-block;
width: 8px;
height: 13px;
background-image: url(../img/click-icon.png);
background-size: 100% auto;
position: absolute;
right: -17px;
margin-top: -6px;
top: 50%;
background-repeat: no-repeat;
}
.top-history-list {
display:flex;
margin-bottom:80px;
}
.top-history-list>a:nth-of-type(6n) {
margin-right:0;
}
.top-history-list>a {
width:184px;
margin-right:24px;
text-decoration:none;
}
.top-history-list>a img {
border-radius:10px;
}
.top-history-list>a .img {
margin-bottom:15px;
}
.top-history-list>a .title {
font-size: 14px;
color: #333333;
margin-bottom: 5px;
}
.top-history-list>a .price {
color: #F57183;
font-size: 20px;
}
.top-history-list>a .price .sub,.top-history-list>a .price .yen {
font-size:12px;
}
.top-history-list>a .price-off{
font-size: 13px;
color: #989898;
position: relative;
display: inline-block;
margin-right: 5px;
}
.top-history-list>a .price-off:after {
width: 60px;
height: 1px;
content: '';
background-color: #F57183;
display: inline-block;
position: absolute;
top: 50%;
left: 0;
}
.top-history-list>a .price-off02 {
color: #F57183;
font-size: 13px;
display: inline-block;
}
.top-features-list {
display:flex;
}
.top-features-list>a {
width: 320px;
max-width: 320px;
margin-right: 20px;
}
.top-features-list>a img {
border-radius:10px;
}
.top-features-list>a:nth-of-type(3n) {
margin-right:0;
}
@media only screen and (max-width: 1000px){
.top-inner {
padding:0 50px;
}
}
@media only screen and (max-width: 767px){
.top-inner {
padding:0 20px;
margin-bottom:30px;
}
.top-inner.bland {
padding:0 ;
margin-top: 25px;
}
h2.top-h2 {
font-size:24px;
margin-bottom:5px;
}
h2.top-h2.mb40 {
margin-bottom:40px;
}
h3.top-h3 {
font-size:20px;
margin-bottom: 45px;
margin-top: 30px;
}
h3.top-h3 span {
font-size:12px;
}
.top-inner .link {
position:static;
margin-bottom:20px;
text-align:center;
width:100%;
font-size:13px;
display:block;
}
.top-item-list {
flex-wrap:wrap;
justify-content:space-between;
}
.top-item-list.ranking {
margin-bottom:0;
}
.top-item-list>a {
width:48%;
margin-right:4%;
margin-bottom:20px;
}
.top-item-list.ranking>a {
margin-bottom:40px;
}
.top-item-list>a:nth-of-type(2n) {
margin-right:0;
}
.top-item-list>a .tags>span, .top-pick-slider>.slick-list>.slick-track>a .tags>span,.mypage-item-list li a>div:last-child .tags>span {
font-size:10px;
}
.top-item-list>a .title,.top-pick-slider>.slick-list>.slick-track>a .title,.mypage-item-list li a>div:last-child .title {
font-size:12px;
}
.top-item-list>a .price-off,.top-pick-slider>.slick-list>.slick-track>a .price-off,.mypage-item-list li a>div:last-child .price-off {
font-size:12px;
}
.top-item-list>a .price-off02,.top-pick-slider>.slick-list>.slick-track>a .price-off02,.mypage-item-list li a>div:last-child .price-off02 {
font-size:12px;
}
.top-pick-slider {
display:block !important;
}
.top-pick-slider .slick-track {
display: flex;
}
.top-pick-slider .slick-slide {
height: auto !important;
}
.top-bnr a .shindan {
font-size: 16px;
top: 22%;
right: 15%;
}
.top-bnr a .figu {
font-size: 30px;
top: 35%;
right: 15%;
}
.top-bnr a .check {
font-size:14px;
}
.top-bnr a .check:after {
width: 6px;
height: 10px;
right: -11px;
margin-top: -5px;
}
.history {
padding: 10px 0;
margin: 20px 0 0;
}
.top-history-list {
flex-wrap:wrap;
justify-content:center;
margin-bottom:40px;
}
.top-history-list>a {
width:48%;
margin-right:4%;
margin-bottom:20px;
}
.top-history-list>a:nth-of-type(2n) {
margin-right:0;
}
.top-history-list>a .title {
font-size:12px;
}
.top-history-list>a .price-off {
font-size:12px;
}
.top-history-list>a .price-off02 {
font-size:12px;
}
.top-features-list {
flex-wrap:wrap;
}
.top-features-list>a {
width:48%;
margin-right:4%;
margin-bottom:15px;
}
.top-features-list>a:nth-of-type(3n) {
margin-right:4%;
}
.top-features-list>a:nth-of-type(2n) {
margin-right:0;
}
}
/*TOPへ戻る*/
.top-button{
position: fixed;
right: 30px;
bottom: 30px;
transition: .3s;
opacity: 0;
visibility: hidden;
width:60px;
}
.top-button.active{
opacity: 1;
visibility: visible;
}
@media only screen and (max-width: 767px){
.top-button{
width:40px;
}
}
/*ポップアップ*/
.popup {
position: fixed;
right: 10px;
bottom: 100px;
margin-bottom: 0;
}
.popup img {
width: 100%;
}
@media only screen and (max-width: 767px){
.popup {
right: 18px;
bottom: 80px;
width: 65px;
}
}
/*フッター*/
.site-footer {
padding:0;
max-width:100%;
}
.footer-conts {
max-width:1000px;
margin:0 auto;
padding: 50px 0 30px;
display:flex;
align-items:flex-start;
}
.footer-conts>div.logo {
width:40%;
}
.footer-conts>div.logo .logo-img {
max-width:235px;
}
.footer-conts>div.menu {
width:60%;
display:flex;
}
.footer-conts>div.menu ul {
list-style:none;
width:50%;
padding:0;
margin:0;
}
.footer-conts>div.menu ul li {
list-style:none;
margin-bottom:20px;
}
.footer-conts>div.menu ul li a {
text-decoration:none;
font-size:14px;
color:#727171;
}
.copyright {
border-top:1px solid #E5E5E5;
padding:40px 0 40px;
font-size:12px;
text-align:center;
margin:0;
}
@media only screen and (max-width: 1000px){
.footer-conts {
padding:0 50px;
}
}
@media only screen and (max-width: 767px){
.footer-conts {
padding:30px 30px 0;
display:block;
}
.footer-conts>div {
justify-content:space-between;
}
.footer-conts>div.logo {
width:160px;
display:block;
margin:0 auto 20px;
}
.footer-conts>div.menu {
width:100%;
margin-bottom: 20px;
}
.footer-conts>div.menu ul {
width:48%;
}
.footer-conts>div.menu ul li {
margin-bottom:10px;
}
.footer-conts>div.menu ul li a {
font-size:12px;
}
.copyright {
padding:20px 0;
font-size:10px;
}
}
/*シェア買い開催中商品一覧*/
.use-bnr .how-to {
position: absolute;
top: 50%;
left: 80px;
text-align: center;
font-size: 22px;
color: #fff;
display:flex;
align-items:center;
margin-top:-42.7px;
}
.use-bnr .how-to>div.heart {
width:86px;
}
.use-bnr .how-to>div.title {
width:250px;
font-size:32px;
font-weight:bold;
}
.use-bnr .how-to>div.title .main {
font-family: 'Montserrat';
}
.use-bnr .how-to>div.title .sub {
font-size:16px;
margin-top:5px;
}
@media only screen and (max-width: 767px){
.use-bnr .how-to {
top: 28px;
left: 50%;
width: 240px;
margin-left: -120px;
text-align: center;
margin-top: 0;
line-height: 1.2;
}
.use-bnr .how-to>div.heart {
width:48px;
}
.use-bnr .how-to>div.title {
width: auto;
font-size: 24px;
margin-left: 20px;
}
.use-bnr .how-to>div.title .sub {
font-size:13px;
}
}
.guide-conts {
max-width:890px;
display:flex;
justify-content:space-between;
padding:60px 0 90px;
border-bottom:2px dotted #E1C3E5;
}
.guide-conts:last-child {
border:none;
}
.guide-conts>div:first-child {
width:200px;
margin-right:35px;
padding-top:20px;
text-align:center;
}
.guide-conts>div:first-child img {
width:90%;
}
.guide-conts>div:last-child {
flex:1;
text-align:left;
font-size:14px;
line-height: 1.8;
}
.guide-conts>div:last-child .img-list {
display:flex;
align-items:center;
}
.guide-conts>div:last-child .img-list img {
width:150px;
margin-right:20px;
}
.guide-conts>div:last-child .img-list img:last-child {
margin-right:0;
}
.guide-conts>div:last-child p {
margin-bottom:20px;
}
.guide-conts>div:last-child .title {
font-size:20px;
margin-bottom:25px;
font-weight:bold;
}
.guide-conts>div:last-child .title span {
font-size:28px;
display:inline-block;
margin-right:7px;
font-family: 'Montserrat';
color:#E1C3E5;
}
@media only screen and (max-width: 767px){
.top-item-list.wrap>a {
margin-bottom:20px;
}
.top-item-list.wrap>a:nth-last-child(1),.top-item-list.wrap>a:nth-last-child(2) {
margin-bottom:0;
}
.top-item-list>a .remain:before {
width: 20px;
height: 16px;
margin-top: -7px;
}
.top-item-list>a .remain {
font-size:11px;
}
.top-item-list>a .remain span {
font-size:14px;
}
.guide-conts {
display:block;
padding:40px 0 50px;
}
.guide-conts:first-child {
padding:0 0 50px;
}
.guide-conts>div:first-child {
width:145px;
margin:0 auto 20px;
}
.guide-conts>div:last-child {
width:100%;
}
.guide-conts>div:last-child .title {
font-size:18px;
text-align:center;
}
.guide-conts>div:last-child .title span {
font-size:22px;
}
.guide-conts>div:last-child .img-list img {
width:31%;
margin: auto;
}
.use-bnr a .how-to {
width: 210px;
top: 10%;
margin-top: 0;
width: 210px;
justify-content: space-between;
}
.use-bnr a .how-to>div.heart {
width:65px;
}
.use-bnr a .how-to>div.title {
width: 138px;
font-size: 22px;
}
.use-bnr a .how-to>div.title .sub {
font-size:12px;
}
}
/*商品ページ*/
.second-inner {
max-width:1000px;
margin:50px auto 70px;
position:relative;
display:flex;
flex-wrap: wrap;
align-items:flex-start;
}
.item-slider-conts {
width:45%;
margin-right:5%;
}
.item-slider-conts img{
max-width:100%;
margin:0 auto;
border-radius:10px;
}
.item-title-conts {
width:50%;
}
.item-info-conts{
width:45%;
margin-right:5%;
}
.item-des-conts {
width:50%;
}
.item-slider {
margin-bottom:25px;
}
.item-thumbnail {
margin:0 auto 45px;
width:90%;
}
.item-thumbnail .slick-track {
padding-bottom:12px;
}
.item-thumbnail .thumbnail-img {
padding:0 5px;
}
.item-thumbnail .thumbnail-img.slick-current {
position:relative;
}
.item-thumbnail .thumbnail-img.slick-current:after {
content:'';
display:inline-block;
position:absolute;
left:0;
bottom:-10px;
width:100%;
height:2px;
background-color:#E0BDE5;
}
.item-thumbnail .slick-arrow:before{
content:""!important;
}
.item-thumbnail .slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
left: 0;
top:5px;
}
.item-thumbnail .slick-prev,.item-thumbnail .slick-next {
top: 50%;
margin-top:-10px;
background:none !important;
width: 10px;
}
.item-thumbnail .slick-prev {
left: -15px;
}
.item-thumbnail .slick-next {
right:-15px;
}
.item-thumbnail .slick-next:before{
background: url(../img/arrow_r.png)!important;
background-size: contain!important;
background-repeat:no-repeat!important;
}
.item-thumbnail .slick-prev:before{
background: url(../img/arrow_l.png)!important;
background-size: contain!important;
background-repeat:no-repeat!important;
}
.item-info {
margin-bottom:30px;
}
.item-info .ato {
text-align:center;
color:#F57183;
margin-bottom:45px;
font-size:16px;
}
.item-info .price-info {
display:flex;
align-items:flex-end;
margin-bottom:30px;
}
.item-info .price-info:last-child {
margin-left:10px;
}
.item-info .price-info .price {
color:#F57183;
font-size:28px;
}
.item-info .price-info .price .sub,.item-info .price-info .price .yen {
font-size:16px;
}
.item-info .syuuki {
color:#F57183;
font-size:16px;
}
.item-info .price-info .price-off {
font-size:16px;
color:#989898;
position:relative;
display:inline-block;
margin-right:5px;
}
.item-info .price-info .price-off:after {
width:60px;
height:1px;
content:'';
background-color:#F57183;
display:inline-block;
position:absolute;
top:50%;
left:0;
}
.item-info .price-info .price-off02 {
color:#F57183;
font-size:16px;
margin-left:5px;
display:inline-block;
}
.item-info .needs-number,.item-info .remain-number,.item-info .time-number {
margin-bottom:10px;
font-size:16px;
position:relative;
padding-left:50px;
}
.item-info .needs-number:before,.item-info .remain-number:before,.item-info .time-number:before {
content: '';
display: inline-block;
width: 34px;
height: 34px;
background-size: 100% auto;
position: absolute;
left: 0;
margin-top: -17px;
top: 50%;
background-repeat: no-repeat;
}
.item-info .needs-number:before {
background-image: url(../img/item/needs-number-icon.png);
}
.item-info .remain-number:before {
background-image: url(../img/item/remain-number-icon.png);
}
.item-info .time-number:before {
background-image: url(../img/item/time-number-icon.png);
}
.item-info .needs-number,.item-info .remain-number .time,.item-info .time-number .time {
font-size:14px;
}
.item-info .about-share {
text-align:right;
}
.item-info .about-share a {
display:inline-block;
font-size:14px;
color:#C495CB;
text-decoration:none;
position:relative;
}
.item-info .about-share a:before {
content: '>';
display: inline-block;
position: absolute;
top: 0;
left: -12px;
}
.lens-info {
background-color:#F8F4F8;
padding:30px;
display:flex;
border-radius:15px;
justify-content:space-between;
margin-bottom:35px;
}
.lens-info>div {
width:48%;
}
.lens-info>div .title {
width:75px;
height:75px;
border-radius:50%;
background-color:#F4E2F7;
box-sizing:border-box;
text-align:center;
margin:0 auto 10px;
padding: 5px;
}
.lens-info>div .title img {
width:35px;
display: block;
margin: 0 auto;
}
.lens-info>div select {
border:1px solid #E1C3E5;
padding:7px;
box-sizing: border-box;
padding-right: 30px;
background-color:#fff;
color:#333;
}
.lens-info>div select.sight {
width:100%;
margin-bottom:15px;
}
.lens-info>div div.sight {
width:100%;
margin-bottom:15px;
}
.lens-info>div select.number {
display: inline-block;
margin-bottom:10px;
}
.lens-info>div div.number {
display:inline-block;
margin-right:5px;
margin-bottom:10px;
}
.lens-info>div select {
-webkit-appearance: none;
appearance: none; /* デフォルトの矢印を非表示 */
}
.lens-info>div select:-ms-expand {
display: none; /* デフォルトの矢印を非表示(IE用) */
}
.lens-info>div select {
background-image: url(../img/item/seledt-btn.png);
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 13px 13px;
border-radius: 4px;
}
.lens-info>div .supplement{
font-size:12px;
}
.item-total {
display:flex;
justify-content:space-between;
align-items:flex-end;
border-bottom:1px solid #EDDFEF;
padding-bottom:25px;
margin-bottom:25px;
}
.item-total>div:first-child {
font-size:16px;
}
.item-total>div:first-child span {
font-size:20px;
}
.item-total>div:last-child {
font-size:14px;
}
.item-total>div:last-child span {
font-size:20px;
}
.postage {
font-size:13px;
color:#F57183;
margin-bottom:25px;
}
.jouken {
font-size:13px;
margin-bottom:25px;
}
.jouken .bold {
font-weight:bold;
}
.share-buy-btn {
display:block;
width:92%;
margin:0 auto;
padding:23px 0;
border-radius:40px;
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
text-align:center;
text-decoration:none;
color:#fff;
font-size:18px;
}
.more-btn {
display:block;
width:92%;
margin:0 auto;
padding:23px 0;
border-radius:40px;
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
text-align:center;
text-decoration:none;
color:#fff;
font-size:18px;
}
.brand-link {
color:#C495CB;
font-size:14px;
text-decoration:none;
}
.item-title {
border-bottom:1px solid #EDDFEF;
padding:20px 0;
font-size:24px;
margin-bottom:25px;
}
.item-title .sub {
font-size:16px;
}
.page-item-tags {
display:flex;
margin-bottom:25px;
flex-wrap:wrap;
}
.page-item-tags>span {
font-size:14px;
padding:3px 12px;
border-radius:20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom:5px;
}
.page-item-tags>span.size {
color:#F57183;
border:1px solid #F57183;
margin-right:12px;
line-height:23px;
}
.page-item-tags>span.cat {
color:#82ADC7;
border:1px solid #82ADC7;
}
.color-variation {
margin:25px auto;
border-bottom:1px solid #EDDFEF;
}
.color-variation .title {
font-weight:bold;
font-family: 'Montserrat';
font-size:30px;
}
.color-variation .list {
display:flex;
flex-wrap:wrap;
padding:0;
}
.color-variation .list>li {
margin-right:10px;
width:80px;
margin-bottom:10px;
padding:0;
font-size:10px;
list-style:none;
}
.color-variation .list>li:nth-of-type(5n) {
margin-right:0;
}
.color-variation .list>li img {
width:100%;
margin-bottom:10px;
border-radius:10px;
}
.item-description {
font-size:13px;
line-height:1.8;
}
.item-description .title {
font-size:18px;
margin:10px 0 25px;
}
.item-description p {
margin-bottom:30px;
}
.item-details {
width:100%;
margin:20px auto;
border:none;
font-size:13px;
}
.item-details tr {
vertical-align:top;
}
.item-details th {
border:none;
color:#868686;
width:23%;
font-weight:normal;
padding:7px 7px 7px 0;
text-align:left;
}
.item-details td {
padding:7px;
}
.item-movie {
max-width:270px;
display: block;
margin:35px auto;
}
.staff-comment {
border-top:1px solid #EDDFEF;
padding:40px 0 0;
font-size:13px;
}
.staff-comment .staff {
margin-bottom:40px;
}
.staff-comment .staff.line {
padding-bottom:40px;
border-bottom:1px solid #EDDFEF;
}
.staff-comment .title {
font-size:18px;
margin-bottom:20px;
}
.staff-comment p {
margin-bottom:30px;
}
.staff-comment .staff-item {
display:flex;
justify-content:space-between;
}
.staff-comment .staff-item>div:first-child {
width:54%;
margin-right:6%;
}
.staff-comment .staff-item .item-list {
width:100%;
margin-bottom:50px;
}
.staff-comment .staff-item .slide-dots {
margin: 0;
padding: 0;
text-align: center;
}
.staff-comment .staff-item .slick-dots li {
display: inline-block;
margin: 0 10px;
}
.staff-comment .staff-item .slick-dots li button {
position: relative;
background:none !important;
background-color:#fff !important;
text-indent: -9999px;
}
.staff-comment .staff-item .slick-dots li button::before {
background-image: url(../img/main-v/slide-dot.png);
background-repeat: no-repeat;
background-size: contain;
content: "";
cursor: pointer;
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 24px;
width: 10px;
}
.staff-comment .staff-item .slick-dots li.slick-active button::before {
background-image: url(../img/main-v/slide-dot_active.png);
}
.staff-comment .staff-item>div:last-child {
width:40%;
font-size:13px;
}
.staff-comment .staff-item .staff-info {
display:flex;
margin-bottom:30px;
}
.staff-comment .staff-item .staff-info>div:first-child {
width:70px;
margin-right:10px;
}
.staff-comment .staff-item .staff-info>div:last-child {
flex:1;
font-size:13px;
}
.staff-comment .staff-item .staff-info>div:last-child .name {
font-size:16px;
margin-bottom:5px;
font-weight:bold;
}
.staff-comment .staff-item .staff-info-tb {
width: 100%;
margin: 20px auto;
border: none;
font-size: 13px;
}
.staff-comment .staff-item .staff-info-dl {
width: 100%;
margin: 20px auto;
border: none;
font-size: 13px;
}
.staff-comment .staff-item .staff-info-dl dt {
float: left;
margin-right: 7px;
font-weight:bold;
}
.staff-comment .staff-item .staff-info-dl dd {
}
.staff-comment .staff-item p {
margin-bottom:5px;
}
.staff-comment .staff-profile {
display:flex;
justify-content:space-between;
margin-bottom:20px;
}
.staff-comment .staff-profile>div:first-child {
width:120px;
margin-right:10px;
text-align:center;
}
.staff-comment .staff-profile>div:first-child .img {
width:70px;
margin:0 auto 20px;
}
.staff-comment .staff-profile>div:first-child .name {
font-weight:bold;
font-size:16px;
}
.staff-comment .staff-profile>div:last-child {
flex:1;
}
.staff-comment .staff-profile>div:last-child .type-conts {
background-color:#E2F4F7;
border-radius:10px;
box-sizing:border-box;
padding:15px;
width:100%;
text-align:center;
margin-bottom:10px;
}
.staff-comment .staff-profile>div:last-child .type-conts .eye-title {
display:flex;
justify-content:center;
align-items:center;
}
.staff-comment .staff-profile>div:last-child .type-conts .eye-title .icon {
width:32px;
margin-right:20px;
}
.staff-comment .staff-profile>div:last-child .type-conts .eye-title .title {
font-size:13px;
font-weight:bold;
}
.staff-comment .staff-profile>div:last-child .type-conts .type-list {
padding:0;
margin:0;
display:flex;
justify-content:center;
align-items:center;
}
.staff-comment .staff-profile>div:last-child .type-conts .type-list li {
width:80px;
height:30px;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
border-radius:15px;
background:#fff;
margin:0 5px;
}
.staff-comment .staff-profile>div:last-child .type-conts .type-list li.active {
background-color:#F597C2;
color:#fff;
}
.staff-comment .staff-profile>div:last-child .details {
display: flex;
flex-wrap: wrap;
width: 100%;
font-size:13px;
}
.staff-comment .staff-profile>div:last-child .details dt {
font-weight:bold;
margin-right:5px;
}
.staff .hoshi {
display:flex;
align-items:center;
}
.staff .hoshi .hoshi-title {
font-weight:bold;
font-size:13px;
margin-right:15px;
}
.staff .hoshi .hyouka {
display:flex;
margin-right:10px;
color:#D5D5D5;
}
.staff .hoshi .hyouka span {
margin-right:3px;
font-size:16px;
}
.staff .hoshi .hyouka span.pink {
color:#F597C2;
}
.staff .hoshi>div:last-child {
font-family: 'Montserrat';
}
.item-rec-type {
width:100%;
margin:20px auto;
border:none;
font-size:13px;
}
.item-rec-type th {
border:none;
width:23%;
font-weight:bold;
padding:7px 7px 7px 0;
text-align:left;
}
.item-rec-type td {
padding:7px;
}
.item-rec-type td ul.type-list {
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
list-style:none;
}
.item-rec-type td ul.type-list li {
padding:0;
margin-right:10px;
background-color:#EAEAEA;
color:#868686;
padding:0 5px;
box-sizing:border-box;
width:80px;
height:30px;
line-height:30px;
border-radius:30px;
text-align:center;
margin-bottom:5px;
}
.item-rec-type td ul.type-list li.active {
background-color:#F597C2;
color:#fff;
}
@media only screen and (max-width: 767px){
.site-main.item-page {
padding-top: 0;
}
.second-inner {
width:100%;
padding:0;
display:block;
margin:0 auto;
}
.item-slider-conts {
float:none;
width:100%;
}
.item-info-conts {
float:none;
width:100%;
box-sizing:border-box;
padding:0 20px;
margin:0 auto;
}
.item-title-conts, .item-des-conts {
float:none;
width:100%;
box-sizing:border-box;
padding:0 20px;
}
.item-title-conts {
}
.item-des-conts {
margin-top:50px;
}
.brand-link {
font-size:13px;
}
.item-title {
font-size:20px;
}
.item-title .sub {
font-size:14px;
}
.page-item-tags>span {
font-size:13px;
}
.color-variation .title {
font-size:22px;
}
.color-variation .list>li {
margin-right: 2%;
width: 18.2%;
}
.color-variation {
padding-bottom:15px;
}
.item-info .price-info .price .sub, .item-info .price-info .price .yen {
font-size:15px;
}
.item-info .price-info .price {
font-size:27px;
}
.lens-info {
flex-direction: column-reverse;
}
.item-info .ato {
font-size:15px;
}
.lens-info>div {
width:100%;
display: flex;
}
.lens-info>div:first-child {
margin-top:20px;
}
.lens-info>div .title {
margin: 0 30px 20px 0;
}
.lens-info>div div.sight {
margin-bottom:10px;
}
.postage {
text-align:center;
}
.lens-info>div select.number {
width: 87%;
}
.share-buy-btn {
width: 100%;
padding: 15px 0;
}
.more-btn {
width: 100%;
padding: 15px 0;
}
.item-details th {
width:80px;
}
.staff-comment .staff {
padding:0 20px;
}
.staff-comment .staff-item {
display:block;
}
.staff-comment .staff-item>div:first-child {
width:100%;
margin-right:0;
}
.staff-comment .staff-item>div:last-child {
width:100%;
}
.item-rec-type th,.item-rec-type td {
width:100%;
display:block;
}
.item-rec-type td {
padding:7px 0;
}
.staff-comment .staff.line {
padding:0 0 20px
}
.staff-comment .staff-profile {
display:block;
}
.staff-comment .staff-profile>div:first-child {
display:flex;
align-items:center;
width:100%;
}
.staff-comment .staff-profile>div:first-child .img {
margin-bottom:10px;
margin-right:15px;
margin-left:10px;
}
}
/*よくある質問ページ*/
.faq-inner {
max-width:890px;
width:92%;
margin:0 auto;
}
.faq-intro {
text-align:center;
font-size:14px;
margin-bottom:40px;
}
.faq-btn-list {
display:flex;
justify-content:center;
margin-bottom:60px;
flex-wrap:wrap;
}
.faq-btn-list a {
width:31.5%;
background-color:#F5F5F5;
border-radius:10px;
text-align:center;
box-sizing: border-box;
position:relative;
font-size:12px;
padding:20px 20px 30px;
text-decoration:none;
color:#848484;
margin-bottom:20px;
margin-right:2.75%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.faq-btn-list a:nth-of-type(3n){
margin-right:0;
}
.faq-btn-list a:after {
content:'';
position:absolute;
width:16px;
height:16px;
display:inline-block;
background-image: url(../img/faq-arrow.png);
background-repeat: no-repeat;
background-size: contain;
bottom:5px;
left:50%;
margin-left:-4px;
}
.faq-btn-list a .title {
font-size:20px;
margin-bottom:8px;
color:#333333;
line-height: 30px;
}
.faq-btn-list a .title span {
color:#E1C3E5;
font-family: 'Montserrat';
font-size:28px;
font-weight:bold;
display:inline-block;
margin-right:5px;
}
.faq-btn-list a span {
display:block;
}
.faq-inner .line-area {
text-align:center;
color:#00B926;
font-size:14px;
margin-bottom:70px;
}
.faq-inner .line-area .line-btn {
max-width:400px;
margin:20px auto;
display:block;
background-color:#00B926;
color:#fff;
text-align:center;
padding:15px 15px 15px 45px;
text-decoration:none;
border-radius:30px;
}
.faq-inner .line-area .line-btn span {
position:relative;
}
.faq-inner .line-area .line-btn span:before {
content:'';
position:absolute;
width:36px;
height:34px;
display:inline-block;
background-image: url(../img/line-icon.png);
background-repeat: no-repeat;
background-size: contain;
left:-50px;
top:50%;
margin-top:-18px;
}
.faq-h3 {
text-align:center;
font-size:26px;
margin-top:70px;
}
.faq-h3 span {
color:#E1C3E5;
font-weight:bold;
font-size:28px;
display:inline-block;
margin-right:5px;
}
.faq-dl {
border:2px solid #E1C3E5;
border-radius:10px;
font-size:14px;
margin-bottom:30px;
}
.faq-dl dt {
position:relative;
padding:20px 60px;
font-family: 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ ゴシック" !important;
}
.faq-dl dd {
padding: 0 60px 20px;
margin-left:0;
font-family: 'Montserrat', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka","ＭＳ ゴシック" !important;
}
.faq-dl dd a {
color:#C495CB;
text-decoration:underline;
}
.faq-dl dt:before {
position:absolute;
content:'Q.';
display:inline-block;
font-family: 'Montserrat';
font-size:28px;
font-weight:bold;
top: 11px;
left: 15px;
}
.faq-dl dt span::before,
.faq-dl dt span::after {
content: '';
display: block;
width: 15px;
height: 2px;
border-radius: 5px;
background: #333333;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.faq-dl dt span::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}
.faq-dl dt span.active::after {
transform: rotate(0);
transition: 0.5s;
}
.contact-area {
margin:70px auto;
text-align:center;
font-size:14px;
}
.contact-area .btn-list {
display:flex;
/*justify-content:space-between;*/
justify-content:center;
max-width:625px;
margin:30px auto;
}
.contact-area .btn-list>a {
width:300px;
display: block;
background-color: #00B926;
color: #fff;
text-align: center;
padding: 15px;
text-decoration: none;
border-radius: 30px;
box-sizing:border-box;
}
.contact-area .btn-list>a:focus {
background-color: #00B926;
}
.contact-area .btn-list>a.line-btn {
background-color: #00B926;
padding:15px 15px 15px 45px;
}
.contact-area .btn-list>a.line-btn:focus {
background-color: #00B926;
}
.contact-area .btn-list>a.line-btn span {
position:relative;
}
.contact-area .btn-list>a.line-btn span:before {
content:'';
position:absolute;
width:36px;
height:34px;
display:inline-block;
background-image: url(../img/line-icon.png);
background-repeat: no-repeat;
background-size: contain;
left:-50px;
top:50%;
margin-top:-18px;
}
.contact-area .btn-list>a.contact-btn {
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
}
.contact-area .btn-list>a.contact-btn:focus {
background: -moz-linear-gradient(left, #D09AD8, #F88EC3);
background: -webkit-linear-gradient(left, #D09AD8, #F88EC3);
background: linear-gradient(to right, #D09AD8, #F88EC3);
}
@media only screen and (max-width: 767px){
.top-inner.faq {
margin: 20px auto 70px;
}
.faq-intro {
margin-top:35px;
text-align:left;
}
.faq-btn-list {
display:block;
margin-bottom:40px;
}
.faq-btn-list a {
width:100%;
padding: 10px 10px 25px;
margin-bottom:15px;
}
.faq-btn-list a .title {
font-size:17px;
}
.faq-btn-list a .title span {
font-size:24px;
}
.faq-h3 {
font-size:20px;
margin-top:50px;
}
.faq-h3 span {
font-size:22px;
}
.faq-dl {
margin-bottom:20px;
}
.faq-dl dt {
padding: 20px 40px 20px 50px;
}
.faq-dl dd {
padding: 0 40px 20px 50px;
}
.faq-dl dt:before {
font-size: 20px;
top: 14px;
left: 10px;
}
.faq-dl dt span::before, .faq-dl dt span::after {
top: 32px;
}
.contact-area .btn-list {
display:block;
}
.contact-area .btn-list>a {
width:100%;
}
.contact-area .btn-list>a.line-btn {
margin-bottom:20px;
}
}
/*検索結果*/
h2.top-h2.search-h2 {
font-size:26px;
}
.search-item-list {
display: flex;
flex-wrap:wrap;
}
.search-item-list>a {
width: 232px;
margin-right: 24px;
text-decoration: none;
margin-bottom:60px;
}
.search-item-list>a:nth-of-type(4n) {
margin-right: 0;
}
.search-item-list>a .img {
margin-bottom: 15px;
}
.search-item-list>a .title {
font-size: 14px;
color: #333333;
margin-bottom: 10px;
}
.search-item-list>a .tags {
display: flex;
margin-bottom: 10px;
flex-wrap:wrap;
justify-content:space-between;
}
.search-item-list>a .tags>span {
color: #BF72C7;
box-sizing:border-box;
border: 1px solid #BF72C7;
line-height: 14px;
min-height: 28px;
margin-bottom:5px;
font-size: 12px;
padding: 3px 3px;
border-radius: 20px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
width:48%;
}
.search-item-list>a .tags>span:nth-child(odd) {
margin-right:4%;
}
.search-item-list>a .price {
color: #F57183;
font-size: 20px;
}
.search-item-list>a .price .yen {
font-size: 12px;
}
@media only screen and (max-width: 767px){
.top-inner.search {
margin: 20px auto 30px;
}
h2.top-h2.search-h2 {
font-size:18px;
}
.search-item-list {
margin-top:35px;
}
.search-item-list>a {
width: 48%;
margin-right: 4%;
margin-bottom:35px;
}
.search-item-list>a:nth-of-type(2n) {
margin-right:0;
}
.search-item-list>a .title {
font-size:12px;
}
.search-item-list>a .tags>span {
font-size:10px;
line-height:10px;
letter-spacing: -0.5px;
}
}
/*マイページ*/
.mypage-top {
display:flex;
justify-content:center;
align-items:center;
margin-bottom:60px;
}
.mypage-top.mt80 {
margin-top:80px;
}
.share-finish {
background-color:#FD5151;
max-width:1000px;
width:100%;
margin:70px auto 0;
padding:10px 0;
color:#fff;
text-align:center;
font-size:22px;
}
.mypage-top .top-link {
font-size:15px;
color:#C495CB;
margin-right: 60px;
display:block;
}
.mypage-top .logo {
width:170px;
display:block;
}
.mypage-item-list {
padding:0;
max-width:700px;
margin:0 auto;
}
.mypage-item-list ul {
padding:0;
margin:0;
}
.mypage-item-list li {
margin-bottom:35px;
list-style:none;
width:100%;
}
.mypage-item-list li a {
display:flex;
width:100%;
justify-content:space-between;
text-decoration:none;
}
.mypage-item-list li a>div:first-child {
width:232px;
margin-right:25px;
}
.mypage-item-list li a>div:last-child {
flex:1;
}
.mypage-item-list li a>div:last-child .price-info {
display:flex;
align-items: flex-end;
margin-bottom: 20px;
}
.mypage-item-list li a>div:last-child .remain {
font-size:14px;
padding-left:28px;
position:relative;
margin-top:5px;
color:#333;
}
.mypage-item-list li a>div:last-child .remain span {
font-size:16px;
}
.mypage-item-list li a>div:last-child .remain:before {
display:inline-block;
content:'';
background-image:url(../img/remain-icon.png);
background-repeat:no-repeat;
width:24px;
height:20px;
background-size:100% auto;
position:absolute;
top:50%;
margin-top:-11px;
left:0;
}
.item-info .time-number {
margin-bottom:20px;
}
.item-info .share-remain {
margin-bottom: 10px;
position: relative;
margin-left: 50px;
height:34px;
border-radius:30px;
background-color:#E2E2E2;
z-index:0;
margin-bottom:45px;
}
.item-info .share-remain .per {
position: absolute;
left:0;
top:0;
height:34px;
border-radius:30px;
background-color:#D199D7;
z-index:1;
}
.item-info .share-remain .per-txt {
position: absolute;
left:26px;
top:6px;
font-size:14px;
color:#fff;
}
.item-info .price-info .point {
font-size:16px;
margin-top:8px;
}
.item-info .share-friend {
background-color:#F8F4F8;
border-radius:15px;
padding:60px;
font-size:13px;
margin:0 0 40px;
}
.item-info .share-friend .title {
font-size:18px;
margin-bottom:25px;
text-align:center;
}
.item-info .share-friend .share-btn {
display:flex;
justify-content:center;
}
.item-info .share-friend .share-btn a {
width:58px;
display:block;
margin:0 10px;
}
.item-info .bnr {
width:100%;
}
@media only screen and (max-width: 767px) {
h2.top-h2.mypage {
font-size: 19px;
}
.mypage-top {
display:block;
}
.mypage-top.mt80 {
margin-top:40px;
}
.share-finish {
display:none;
}
.mypage-top .top-link {
font-size:13px;
margin-right:0;
margin-bottom:15px;
text-align:center;
}
.mypage-top .logo {
width:150px;
margin:0 auto;
}
.mypage-item-list li a>div:first-child {
width:48%;
margin-right:4%;
}
.mypage-item-list li a>div:last-child {
width:48%;
}
.mypage-item-list li a>div:last-child .price-info {
display:block;
margin-bottom: 5px;
}
.mypage-item-list li a>div:last-child .tags {
margin-bottom:5px;
}
.mypage-item-list li a>div:last-child .remain:before {
width: 20px;
height: 16px;
margin-top: -7px;
}
.mypage-item-list li a>div:last-child .remain {
font-size:11px;
}
.mypage-item-list li a>div:last-child .remain span {
font-size:14px;
}
.item-info .share-friend {
padding:35px;
}
.item-info .share-friend .title {
font-size:16px;
}
.item-info .share-friend .share-btn a {
width:50px;
}
}
/*ブランドページ*/
.brand-h2 {
font-size:22px;
text-align:center;
margin-bottom:40px
}
.brand-page-wrap {
max-width:690px;
margin:0 auto;
}
.brand-page-wrap .btn {
width:273px;
display:block;
margin:30px auto;
}
.brand-page-wrap .btn img {
width:100%;
}
@media only screen and (max-width: 767px) {
.brand-h2 {
font-size:18px;
margin-bottom: 25px;
}
.brand-page-wrap .btn {
width:40%;
}
}
/*PONPISHとはページ*/
.about-inner {
max-width:690px;
width:100%;
margin:0 auto;
}
.about-inner .share-flow {
background-color:#F6F4F9;
padding-top:70px;
padding-bottom:70px;
}
.about-inner .sns {
background-color:#f6f4f9;
margin-top:70px;
padding-bottom: 70px;
}
.about-inner .sns .inner {
background-color:#f0e9f1;
max-width:627px;
margin:0 auto 60px;
border-radius:60px;
padding:50px 30px;
box-sizing:border-box;
width:94%;
}
.about-inner .btn {
display:block;
max-width:627px;
margin:0 auto;
width:90%;
}
@media only screen and (max-width: 767px){
.about-inner .share-flow {
padding-top:40px;
padding-bottom:40px;
}
.about-inner .sns .inner {
border-radius:30px;
padding:30px 20px;
margin:0 auto 30px;
}
}
.ranking.top-inner {
padding-top:20px;
}
/*infinity logo*/
.infinity-loop {
margin: initial;
}
@media only screen and (max-width: 767px) {
.infinity-loop {
margin-top: 50px;
}
}
.loop {
display: flex;
overflow: hidden;
}
.loop:hover .loop__box {
animation-play-state: paused;
}
.loop__box {
display: flex;
animation: loop-list 40s linear infinite;
}
.loop__item {
list-style: none;
opacity: 0.7;
padding-left: calc((20 / 750) * 100vw);
padding-right: calc((20 / 750) * 100vw);
}
.loop__item:hover {
opacity: 1;
}
.loop__item a {
display: block;
}
.loop__item img {
width: calc((80 / 390) * 100vw);
max-width: 100px;
}
@keyframes loop-list {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/*korea area*/
#korea .korea a .price .sub {
color: #333333 !important;
}
#korea .mrg-bottom {
margin-bottom: 24px;
}
@media only screen and (max-width: 767px) {
#korea .mrg-bottom {
margin-bottom: 0px;
}
#korea .top-item-list .non {
display: none;
}
}
/*best seller*/
.besrseller .best a .img {
position: relative;
}
.besrseller .best a .img .best-seller-tag {
position: absolute;
top: -10px;
left: 10px;
}
.best-seller {
position: relative;
width: 50px;
height: 50px;
border: 1px solid #F57183;
background-color: rgb(255, 255, 255);
border-radius: 50%;
margin: 0 auto;
text-align: center;
}
.best-seller-buy {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 10px;
color: #F57183;
}
/*clear eria*/
.clear-lens-container {
background-color: #fcf2fd;
width: 100%;
margin: initial;
padding: 40px 50px;
}
@media only screen and (max-width: 767px) {
.clear-lens-container {
padding: 40px 20px;
}
}
.clear-lens-container .clear-bg {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.clear-lens-contents {
display: flex;
align-items: center;
border-radius: 15px;
background-color: #ffffff;
}
@media only screen and (max-width: 767px) {
.clear-lens-contents {
display: block;
}
}
.clear-lens-contents .clear-item {
width: 50%;
}
@media only screen and (max-width: 767px) {
.clear-lens-contents .clear-item {
width: 100%;
}
}
.clear-lens-contents .list {
padding: 40px 0 40px 60px;
}
@media only screen and (max-width: 767px) {
.clear-lens-contents .list {
padding: 5% 8%;
}
}
.clear-lens-contents .list2 {
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.clear-lens-contents .list2 {
padding: 0 0 20px;
}
}
.clear-lens-container .clear-bg img {
width: 100%;
border-radius: 15px;
vertical-align: top;
}
.clear-item .clear-title {
font-weight: bold;
white-space: nowrap;
}
.clear-item p {
font-size: 13px;
margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
.clear-item .clear-title {
font-size: max(calc((30 / 767) * 100vw), 15px);
}
.clear-item p {
font-size: 12px;
}
}
.clear-item a {
display: inline-block;
background: #f47ccc;
text-decoration: none;
color: #fff;
padding: 9px 10px;
border-radius: 45px;
width: 150px;
text-align: center;
margin: 0 10px;
font-size: 13px;
}
/*new ranking*/
section.newrank {
padding: 0 50px;
}
@media only screen and (max-width: 767px) {
section.newrank {
padding: 20px 20px 0;
}
}
#slider-rank {
margin-bottom: 50px;
}
#slider-rank .cover {
padding: 25px 12px 0;
position: relative;
}
@media only screen and (max-width: 767px) {
#slider-rank {
margin-bottom: 20px;
}
#slider-rank .cover {
padding: 25px 0 0;
}
}
#slider-rank .rank0::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank01.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank1::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank02.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank2::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank03.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank3::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank04.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank4::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank05.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank5::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank06.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank6::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank07.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank7::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank08.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank8::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank09.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .rank9::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank10.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank .cover a {
text-decoration: none;
}
#slider-rank .cover a img {
border-radius: 15px;
margin-bottom: 30px;
height: auto;
width: 100%;
}
#slider-rank .cover a .title {
font-size: 14px;
color: #333333;
margin-bottom: 5px;
}
#slider-rank .cover a .price {
color: #F57183;
font-size: 20px;
}
#slider-rank .cover a .price .sub,
#slider-rank .cover a .price .yen {
font-size: 12px;
}
/*new ranking sp*/
@media only screen and (max-width: 767px) {
#slider-rank {
display: flex;
flex-wrap: wrap;
/* ラップすることで要素が次の行に移動する */
justify-content: space-between;
}
#slider-rank .cover a .title {
font-size: 12px;
}
#slider-rank .cover {
width: 48%;
/* 2つの要素を均等に配置（必要に応じて調整） */
margin-bottom: 15px;
/* 要素の間にマージンを追加（必要に応じて調整） */
}
}
h3.top-h3-new {
font-size: 28px;
text-align: center;
font-family: 'Montserrat' !important;
font-weight: 600;
margin-bottom: 45px;
}
@media only screen and (max-width: 767px) {
h3.top-h3-new {
font-size: 20px;
margin-bottom: 20px;
margin-top: 30px;
}
}
#slider-rank .slide-arrow {
bottom: 0;
cursor: pointer;
margin: auto;
position: absolute;
top: -110px;
width: 30px;
}
#slider-rank .prev-arrow {
left: -40px;
}
#slider-rank .next-arrow {
right: -40px;
}
/*new ranking btn*/
.rank-btn-wrapper {
text-align: center;
}
@media only screen and (max-width: 767px) {
.rank-btn-wrapper {
margin-bottom: 60px;
}
}
.rank-btn-wrapper a.rank-btn {
display: inline-block;
background: #f47ccc;
text-decoration: none;
color: #fff;
padding: 15px 0px;
border-radius: 45px;
width: 210px;
text-align: center;
font-size: 13px;
}
@media only screen and (max-width: 500px) {
.rank-btn-wrapper a.rank-btn {
padding: 10px 0px;
width: 170px;
}
}
/*new ranking month*/
section.newrank {
padding: 0 50px;
}
@media only screen and (max-width: 767px) {
section.newrank {
padding: 20px 20px 0;
}
}
#slider-rank-month {
margin-bottom: 50px;
}
#slider-rank-month .cover {
padding: 25px 12px 0;
position: relative;
}
@media only screen and (max-width: 767px) {
#slider-rank-month {
margin-bottom: 20px;
}
#slider-rank-month .cover {
padding: 25px 0 0;
}
}
#slider-rank-month .rank0::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank01.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank1::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank02.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank2::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank03.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank3::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank04.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank4::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank05.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank5::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank06.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank6::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank07.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank7::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank08.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank8::before {
content: '';
display: inline-block;
width: 13px;
height: 20px;
background-image: url(../img/rank09.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .rank9::before {
content: '';
display: inline-block;
width: 36px;
height: 20px;
background-image: url(../img/rank10.png);
background-size: 100% auto;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 0px;
background-repeat: no-repeat;
}
#slider-rank-month .cover a {
text-decoration: none;
}
#slider-rank-month .cover a img {
border-radius: 15px;
margin-bottom: 30px;
height: auto;
width: 100%;
}
#slider-rank-month .cover a .title {
font-size: 14px;
color: #333333;
margin-bottom: 5px;
}
#slider-rank-month .cover a .price {
color: #F57183;
font-size: 20px;
}
#slider-rank-month .cover a .price .sub,
#slider-rank-month .cover a .price .yen {
font-size: 12px;
}
/*new ranking sp*/
@media only screen and (max-width: 767px) {
#slider-rank-month {
display: flex;
flex-wrap: wrap;
/* ラップすることで要素が次の行に移動する */
justify-content: space-between;
}
#slider-rank-month .cover a .title {
font-size: 12px;
}
#slider-rank-month .cover {
width: 48%;
/* 2つの要素を均等に配置（必要に応じて調整） */
margin-bottom: 15px;
/* 要素の間にマージンを追加（必要に応じて調整） */
}
}
h3.top-h3-new {
font-size: 28px;
text-align: center;
font-family: 'Montserrat' !important;
font-weight: 600;
margin-bottom: 45px;
}
@media only screen and (max-width: 767px) {
h3.top-h3-new {
font-size: 20px;
margin-bottom: 20px;
margin-top: 30px;
}
}
#slider-rank-month .slide-arrow {
bottom: 0;
cursor: pointer;
margin: auto;
position: absolute;
top: -110px;
width: 30px;
}
#slider-rank-month .prev-arrow {
left: -40px;
}
#slider-rank-month .next-arrow {
right: -40px;
}
/*popup*/
.ponpish-modal {
/* display: none; */
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
/* background-color: rgba(0, 0, 0, 0.5); */
}
.ponpish-modal-content {
background-color: #ffffff;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
animation-name: modalopen;
animation-duration: 1s;
border-radius: 15px;
border: 8px solid #E1C3E5;
}
@media only screen and (max-width: 767px) {
.ponpish-modal-content {
width: calc((500 / 767) * 100vw);
}
}
@keyframes modalopen {
from {
opacity: 0
}
to {
opacity: 1
}
}
.ponpish-modal-content .modalClose {
position: absolute;
top: -20px;
right: -20px;
background-color: #E1C3E5;
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 300;
}
.modalClose span {
width: 25px;
height: 3px;
background-color: white;
display: inline-block;
position: absolute;
left: calc(50% - 12px);
top: 50%;
border-radius: 20px;
}
.modalClose span:nth-child(1) {
transform: rotate(45deg) translate(-1px, -1px);
}
.modalClose span:nth-child(2) {
transform: rotate(-45deg) translate(1px, -1px);
}
.ponpish-modal-content .modal-slider img {
width: 100%;
}
.modal-moji {
text-align: center;
padding: 30px 0 30px 0;
/*height: 126px;*/
font-size: 13px;
}
.modal-select {
display: flex;
justify-content: space-between;
background-color: #E1C3E5;
color: #ffffff;
padding: 10px 5px;
font-size: 13px;
}
.ponpish-banner-slider .slick-dots {
bottom: 76px !important;
}
.ponpish-banner-slider .slick-dots li button#slick-slide-control40 {
background-color: transparent !important;
}
.ponpish-banner-slider .slick-dots li button#slick-slide-control41 {
background-color: transparent !important;
}
.ponpish-banner-slider .slick-dots li button#slick-slide-control42 {
background-color: transparent !important;
}
.ponpish-banner-slider .slick-dots li button#slick-slide-control43 {
background-color: transparent !important;
}
.ponpish-banner-slider .slick-dots li {
margin: 0 !important;
}
.modal-slider .slick-dotted.slick-slider {
margin-bottom: 0 !important;
}