@charset "utf-8"; body { opacity: 0; transition: opacity 1.3s ease-in-out; } /* CSS関数設定 */ :root { /* カラーパレット */ --WHITE: #FFFFFF; --BLACK: #000000; --RIGHTBLACK: #313131; --RIGHTBLACK02: #616161; --LIGHTBORDER:#c7c7c7; --CREAM:#f7f5f0; --RED: #e10c0c; --ORANGE:#ff6b20; --LIGHTGREEN: #b3ff00; --BACKGROUND_GRAY:#f4f6f9; --PINK:#f75593; --NAVYBLUE:rgb(62, 68, 80); --HOVERBLUE:#0054fa; --WHITE_OP50: rgba(255, 255, 255, 0.5); --GRAY01: #F5F5F5; --GRAY02: #DEDEDE; --GRAY03: #A7A7A7; --GRAY04: #818181; --DARK01: #2E2E2E; --RED01: #dc3b3b; --PINK01: #ee8899; --YELLOW01: #FFD700; /* テキストカラー */ --TXT_COLOR_BASE: var(--DARK01); /* ベースフォント */ --FF_BASE: kinto-sans, sans-serif; /* フォトサイズ */ --FZ_11: clamp(10px, 1.1vw, 11px); --FZ_14: clamp(12px, 1.2vw, 14px); --FZ_15: clamp(13px, 1.4vw, 15px); --FZ_18: clamp(15px, 1.6vw, 18px); --TITLEFONT:clamp(23px, 3.8vw, 38px); --INNER_WIDTH:96%; --SP_INNER_WIDTH:90%; --SP_LIST_GAP:25px 3.5%; /* テキストカラー */ --TXT_COLOR_BASE: var(--DARK01); --TXT_COLOR_WHITE: var(--WHITE); /* ボーダーカラー */ --BDCOLOR_GRAY_1: var(--GRAY02); /* 背景カラー */ --BGCOLOR_GRAY_1: var(--GRAY01); /* ランキングカラー */ --RANKING_1ST: #BA9700; --RANKING_2ND: #A7A7A7; --RANKING_3RD: #B75400; --RANKING_OTHER: #002C1B; /* 間隔 */ --GENERALSEC:clamp( 70px, 10vw, 120px); --MAINTITLEMARGIN:70px 0 50px; --MAINTITLEMARGIN_SP:35px 0 30px; --MIDDLEMARGIN:clamp( 30px, 3.5vw, 40px); --MINMARGIN:10px; --PRODUCT_MARGIN_VERTICAL:clamp( 30px, 3.5vw, 50px); --PRODUCT_MARGIN_HORIZONTAL:clamp( 1%, 1.1vw, 20px); /* セクション間隔半分 */ --GENERALSEC_HALF: calc(var(--GENERALSEC) / 2); --MYPAGEICON:url('data:image/svg+xml;charset=UTF-8,'); --LOGINICON:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 256C480 132.3 379.7 32 256 32c-8.8 0-16-7.2-16-16s7.2-16 16-16C397.4 0 512 114.6 512 256s-114.6 256-256 256c-8.8 0-16-7.2-16-16s7.2-16 16-16c123.7 0 224-100.3 224-224zM202.6 116l144 128c3.4 3 5.4 7.4 5.4 12s-2 8.9-5.4 12l-144 128c-6.6 5.9-16.7 5.3-22.6-1.3s-5.3-16.7 1.3-22.6L293.9 272 16 272c-8.8 0-16-7.2-16-16s7.2-16 16-16l277.9 0L181.4 140c-6.6-5.9-7.2-16-1.3-22.6s16-7.2 22.6-1.3z'/%3E%3C/svg%3E"); --LOGOUTICON:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M480 256C480 132.3 379.7 32 256 32c-8.8 0-16-7.2-16-16s7.2-16 16-16C397.4 0 512 114.6 512 256s-114.6 256-256 256c-8.8 0-16-7.2-16-16s7.2-16 16-16c123.7 0 224-100.3 224-224zM202.6 116l144 128c3.4 3 5.4 7.4 5.4 12s-2 8.9-5.4 12l-144 128c-6.6 5.9-16.7 5.3-22.6-1.3s-5.3-16.7 1.3-22.6L293.9 272 16 272c-8.8 0-16-7.2-16-16s7.2-16 16-16l277.9 0L181.4 140c-6.6-5.9-7.2-16-1.3-22.6s16-7.2 22.6-1.3z'/%3E%3C/svg%3E"); --HEARTICON:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M244 130.6l-12-13.5-4.2-4.7c-26-29.2-65.3-42.8-103.8-35.8c-53.3 9.7-92 56.1-92 110.3l0 3.5c0 32.3 13.4 63.1 37.1 85.1L253 446.8c.8 .7 1.9 1.2 3 1.2s2.2-.4 3-1.2L443 275.5c23.6-22 37-52.8 37-85.1l0-3.5c0-54.2-38.7-100.6-92-110.3c-38.5-7-77.8 6.6-103.8 35.8l-4.2 4.7-12 13.5c-3 3.4-7.4 5.4-12 5.4s-8.9-2-12-5.4zm34.9-57.1C311 48.4 352.7 37.7 393.7 45.1C462.2 57.6 512 117.3 512 186.9l0 3.5c0 36-13.1 70.6-36.6 97.5c-3.4 3.8-6.9 7.5-10.7 11l-184 171.3c-.8 .8-1.7 1.5-2.6 2.2c-6.3 4.9-14.1 7.5-22.1 7.5c-9.2 0-18-3.5-24.8-9.7L47.2 299c-3.8-3.5-7.3-7.2-10.7-11C13.1 261 0 226.4 0 190.4l0-3.5C0 117.3 49.8 57.6 118.3 45.1c40.9-7.4 82.6 3.2 114.7 28.4c6.7 5.3 13 11.1 18.7 17.6l4.2 4.7 4.2-4.7c4.2-4.7 8.6-9.1 13.3-13.1c1.8-1.5 3.6-3 5.4-4.5z'/%3E%3C/svg%3E"); --CARTICON:url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220%200%20576%20512%22%3E%3Cpath d%3D%22M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16l37.9 0c7.6 0 14.2 5.3 15.7 12.8l58.9 288c6.1 29.8 32.3 51.2 62.7 51.2L496 384c8.8 0 16-7.2 16-16s-7.2-16-16-16l-304.8 0c-15.2 0-28.3-10.7-31.4-25.6L152 288l314.6 0c29.4 0 55-20 62.1-48.5L570.6 71.8c5-20.2-10.2-39.8-31-39.8L99.1 32C92.5 13 74.4 0 53.9 0L16 0zm90.1 64l433.4 0L497.6 231.8C494 246 481.2 256 466.5 256l-321.1 0L106.1 64zM168 456a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm80 0a56 56 0 1 0 -112 0 56 56 0 1 0 112 0zm200-24a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm0 80a56 56 0 1 0 0-112 56 56 0 1 0 0 112z%22/%3E%3C/svg%3E'); --HAMBURGERICON:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%2064c94.4%200%20172.9%2068.1%20189%20157.8l0%20.1c0%20.1-.1%20.2-.3%20.3c-.7%20.8-2.4%201.7-4.7%201.7L72%20224c-2.4%200-4-1-4.7-1.7c-.1-.1-.2-.2-.3-.3l0-.1C83.1%20132.1%20161.6%2064%20256%2064zM440%20256c22.1%200%2040.4-18.1%2036.5-39.8C457.7%20111.5%20366.1%2032%20256%2032S54.3%20111.5%2035.5%20216.2C31.6%20237.9%2049.9%20256%2072%20256l368%200zM128%20448c-35.3%200-64-28.7-64-64l384%200c0%2035.3-28.7%2064-64%2064l-256%200zM32%20384c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96c0-17.7-14.3-32-32-32L64%20352c-17.7%200-32%2014.3-32%2032zM16%20304c0%208.8%207.2%2016%2016%2016l448%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16L32%20288c-8.8%200-16%207.2-16%2016zM160%20160a16%2016%200%201%200%200-32%2016%2016%200%201%200%200%2032zm112-48a16%2016%200%201%200%20-32%200%2016%2016%200%201%200%2032%200zm80%2048a16%2016%200%201%200%200-32%2016%2016%200%201%200%200%2032z'%2F%3E%3C%2Fsvg%3E"); --HAMBURGERCLOSE:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M183.3%2021.4C198.3%207.7%20218%200%20238.4%200l1%200C283.9%200%20320%2036.1%20320%2080.6c0%2021.4-8.5%2041.9-23.6%2057L89.5%20344.4c-6.1%206.1-9.5%2014.4-9.5%2023c0%2018%2014.6%2032.6%2032.6%2032.6c8.6%200%2016.9-3.4%2023-9.5L374.5%20151.6c15.1-15.1%2035.6-23.6%2057-23.6c44.5%200%2080.6%2036.1%2080.6%2080.6c0%2021.4-8.5%2041.9-23.6%2057L384.2%20369.8c-10.4%2010.3-16.2%2024.4-16.2%2039c0%2030.5%2024.7%2055.2%2055.2%2055.2l4.4%200c5.6%200%2011.2-.9%2016.6-2.7l36.2-12.1%2015.2%2045.5-36.2%2012.1c-10.2%203.4-21%205.2-31.8%205.2l-4.4%200c-57%200-103.2-46.2-103.2-103.2c0-27.4%2010.9-53.6%2030.2-73L454.5%20231.6c6.1-6.1%209.5-14.4%209.5-23c0-18-14.6-32.6-32.6-32.6c-8.6%200-16.9%203.4-23%209.5L169.5%20424.4c-15.1%2015.1-35.6%2023.6-57%2023.6C68.1%20448%2032%20411.9%2032%20367.4c0-21.4%208.5-41.9%2023.6-57L262.5%20103.6c6.1-6.1%209.5-14.4%209.5-23c0-18-14.6-32.6-32.6-32.6l-1%200c-8.4%200-16.5%203.2-22.7%208.8L40.2%20217.7%207.8%20182.3%20183.3%2021.4z'%2F%3E%3C%2Fsvg%3E"); --CLOSEICON:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z' fill='%23000'/%3E%3C/svg%3E") ; --RIGHTARROW:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20fill='%23000000'%20d='M435.3%20267.3L446.6%20256l-11.3-11.3-168-168L256%2065.4%20233.4%2088l11.3%2011.3L385.4%20240%2016%20240%200%20240l0%2032%2016%200%20369.4%200L244.7%20412.7%20233.4%20424%20256%20446.6l11.3-11.3%20168-168z'/%3E%3C/svg%3E"); --SEARCHICON:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384 208A176 176 0 1 0 32 208a176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z' fill='%23000'/%3E%3C/svg%3E"); } /* 内部の関数設定 */ :root{ /* 商品マーク背景ベース */ --FS_MARK_BG: var(--BLACK); /* ボタン */ --FS_BTN_COLOR_1: var(--BLACK); --FS_BTN_COLOR_2: var(--HOVERBLUE); --FS_BTN_COLOR_3: var(--TXT_COLOR_BASE); --FS_BTN_WIDTH: 100%; /* 入力系 */ --FS_INPUT_BDCOLOR: var(--GRAY01); /* ボーダー */ --FS_BD_COLOR: var(--GRAY02); /* お気に入り色 */ --FS_WISH_COLOR: var(--PINK01); /* レビュー色 */ --FS_REVIEW_COLOR: var(--YELLOW01); } @media screen and (min-width: 768px){ :root{ /* ボタン */ --FS_BTN_HEIGHT: 50px; --FS_BTN_MAX_WIDTH: 300px; /* 入力系 */ --FS_INPUT_HEIGHT: 40px; --FS_INPUT_PADDING_INLINE: 17px; --FS_INPUT_BDRS: 5px; } } @media screen and (max-width: 767px){ :root{ /* ボタン */ --FS_BTN_HEIGHT: 40px; --FS_BTN_MAX_WIDTH: 300px; /* 入力系 */ --FS_INPUT_HEIGHT: 35px; --FS_INPUT_PADDING_INLINE: 10px; --FS_INPUT_BDRS: 5px; } } /* リセットCSS */ *{margin:0;padding:0;min-height: 0;min-width: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} html {height:100%;scroll-behavior: smooth;} html, body { overscroll-behavior: none; /* 全体のオーバースクロールを無効化 */ } ul li ,ol li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size: 100%;margin: 0;} p{margin: 0;} strong{font-weight: inherit;} a:focus, *:focus{ outline:none; } article, header, footer, aside, figure, figcaption, nav, section,main{ display:block; } body{ font-family: var(--FF_BASE); font-weight: 400; font-style: normal; width:100%; color: var(--TXT_COLOR_BASE); position:relative; z-index: 0; overflow-x: clip; font-size: clamp(14px, 1.4vw, 16px); line-height:1.5; } body > *{ overflow-x: clip; } a{ text-decoration: none; outline: none; word-wrap: break-word; color: var(--TXT_COLOR_BASE); } a:visited{ color: var(--TXT_COLOR_BASE); } a img,a{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s; } img{ height: auto; max-width: 100%; box-sizing: unset; vertical-align: bottom; } iframe{ vertical-align: bottom; } .formReset button, .formReset input[type="button"], .formReset input[type="submit"], .formReset input[type="text"], .formReset input[type="image"], .formReset select{ background-color: unset; color: var(--TXT_COLOR_BASE); -webkit-appearance: none; border-radius: 0; } .formReset input[type="text"], .formReset input[type="text"]::placeholder{ font-family: var(--FF_BASE); color: var(--TXT_COLOR_BASE); } /* imgリセット */ .imgauto{ height: auto; width: 100%; box-sizing: unset; line-height: 1rem; display: block; } /* フォント */ .kitano{ font-family: var(--FF_BASE); font-weight: 400; font-style: normal; } .tt-commons{ font-family: tt-commons-pro, sans-serif; font-weight: 600; font-style: normal; } .robotomono{ font-family: "roboto-mono", monospace; font-weight: 400; font-style: normal; } /* グリッド、フレックス */ .grid{ display: grid; } .flex{ display: flex; } /* スクロールバー消す */ .noscrollbar, .noscrollbar{ -ms-overflow-style: none;/* IE, Edge 対応 */ scrollbar-width: none;/* Firefox 対応 */ } .noscrollbar::-webkit-scrollbar, .noscrollbar::-webkit-scrollbar{/* Chrome, Safari 対応 */ display: none; } /* Webkit用 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #fff; } ::-webkit-scrollbar-thumb { background-color: var(--LIGHTGREEN); border-radius: 6px; border: 3px solid var(--LIGHTGREEN); } ::-webkit-scrollbar-thumb:hover { background-color: var(--LIGHTGREEN); } html { scrollbar-color: var(--LIGHTGREEN) #fff; scrollbar-width: thin; } @media (hover: hover){ .formReset button:hover, .formReset input[type="button"]:hover, .formReset input[type="submit"]:hover, .formReset input[type="image"]:hover, .formReset select:hover{ cursor: pointer; } a:hover{ text-decoration: none; } a:hover img{ } } @media screen and (min-width: 768px){ a[href^="tel:"] { pointer-events: none; } .sp{ display: none !important; } .g-inner{ width:var(--INNER_WIDTH); margin-left: auto; margin-right: auto; } } @media screen and (max-width: 767px){ .pc{ display: none !important; } .g-inner{ width:var(--SP_INNER_WIDTH); } } /* header */ header { position: absolute; top: 11px; left:2%; display: flex; justify-content: space-between; align-items: center; padding: 30px 0; z-index: 900; background: rgba(255, 255, 255, 0.67); padding: 5px 20px; border-radius: 5px; transition: transform 0.3s ease, position 0.3s ease; } header.fixed { position: fixed; top: 5px; left:2%; background: rgba(255, 255, 255, 0.9); border-radius: 4px; padding: 10px 20px; transform: translateY(0); } header.hidden { transform: translateY(-110%); } header nav{ display: flex; align-items: center; gap:0 25px; margin-right: 2%; } header nav ul.btnarea{ display: flex; gap:0 10px; } header nav ul.btnarea li a{ border-radius:30px; width:210px; text-align: center; display: block; padding: 8px 0; } header nav ul.btnarea li.docu_dl a{ background:var(--LIGHTGREEN); } header nav ul.btnarea li.contact_link a{ background:var(--BLACK); color: var(--WHITE); } header nav ul.btnarea li a{ transition: 0.5s; position: relative; z-index: 1; overflow: hidden; display: flex; height: 100%; align-items: center; justify-content: center; } header nav ul.btnarea li a::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--HOVERBLUE); transform-origin: right top; transform: scaleX(0); transition: transform .5s ease; z-index: -1; } @media (hover: hover){ header nav ul.btnarea li a:hover{ color: var(--WHITE); opacity: 1; } header nav ul.btnarea li a:hover::before{ transform-origin: left top; transform: scaleX(1); } } .hd-logo{ width:180px; } header nav ul.iconarea{ display: flex; gap:0 9px; align-items: center; padding-right: 5px; } header nav ul.iconarea a{ color: transparent; text-indent: -9999px; overflow: hidden; } header nav ul.iconarea li{ position: relative; } header nav ul.iconarea a span{ color: inherit; text-indent: 0; position: absolute; display: flex; justify-content: center; align-items: center; text-align: center; aspect-ratio: 1 / 1; width: 20px; font-size: 10px; font-weight: 500; background-color: var(--HOVERBLUE); color: var(--WHITE); border-radius: 50%; position: absolute; top:-10px; right:-4px; } header nav ul.iconarea .mypageicon a::before { content: ""; display: block; width: 43px; height: 43px; background-image: var(--MYPAGEICON); background-repeat: no-repeat; background-size: contain; background-position: center; } header nav ul.iconarea .carticon a::before { content: ""; background-image:var(--CARTICON); display: block; width: 28px; height:28px; background-repeat: no-repeat; background-size: contain; background-position: center; } header nav ul.iconarea .searchicon a::before { content: ""; display: block; width: 25px; height: 25px; background-image: var(--SEARCHICON); background-repeat: no-repeat; background-size: contain; background-position: center; padding-right: 7px; } .hd-user__searchForm { width: 300px; position: absolute; left: 0%; top: 42px; z-index: 2; display: none; } .iconarea .search-box { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; width: 100%; } .iconarea .search-box input { flex: 1; padding: 10px; border: none; outline: none; font-size: 16px; } .iconarea .search-box button { padding: 10px 15px; border: none; font-size: 15px; cursor: pointer; background: #f1f1f1; } .iconarea .search-box button:hover { background-color: var(--HOVERBLUE); color:var(--WHITE); } .hd-navContainer--scroll ul li.hd-btn__item { position: relative; } .hd-user__searchForm.is-active{ display: block; } .tooltip { position: absolute; top: 45px; left: 6px; border-bottom: 1px solid #929292; font-size: 11px; text-align: center; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; z-index: 10; } @media (hover: hover){ .mypageicon:hover .tooltip { visibility: visible; opacity: 1; } } @media screen and (min-width:768px) and (max-width:850px) { .hd-logo{ width:150px; } header nav ul.btnarea li a{ width:174px; } header nav{ margin-right: 4%; } } @media screen and (max-width:767px) { header.g-inner{ width:96%; } header{ top:8.7px; } header nav{ margin-right: 33px; } header nav ul.btnarea{ display:none; } header nav ul.iconarea{ padding-right: 0px; } header nav ul.iconarea{ gap:0 11px; } .hd-logo{ width:144px; } header nav ul.iconarea .mypageicon a::before{ width:35px; height:35px; } header nav ul.iconarea .carticon a::before { width:24px; height:24px; } header nav ul.iconarea .searchicon{ display: none; } } /* hamburger */ .hamburger { display: block; width: 39px; height: 39px; padding: 2px; position: absolute; top:17px; left:auto; right: 1.9%; z-index: 999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; transition: transform 0.3s ease, position 0.3s ease; } .hamburger__icon{ margin: 0; position: relative; } .hamburger__icon:after{ content:none; } .hamburger__icon{ width: 39px; height: 39px; } .hamburger__icon::before { content: ''; display: inline-block; width: 35px; height: 35px; background-image: var(--HAMBURGERICON); background-size: 29px; background-repeat: no-repeat; background-position: center; vertical-align: middle; transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger.active .hamburger__icon:before{ -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; content: ''; display: inline-block; width: 35px; height: 35px; background-image: var(--HAMBURGERCLOSE); background-repeat: no-repeat; background-position: center; background-size: 26px; } .hamburger__icon { transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger { transition: transform 0.3s ease, position 0.3s ease; } .hamburger.active .hamburger__icon:after{ content:"CLOSE"; -moz-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; font-size:10px; position: absolute; bottom: -6px; left: -2px; width: 100%; text-align: center; font-weight: bold; } .hamburger.active .hamburger__icon { background-color: transparent; } .fat-nav { top: auto; left:auto; right:1%; bottom: -150%; z-index: 996; position: fixed; width: 86%; max-width:1100px; height: 98%; background:#ffffff; box-shadow: 0px 0px 2px rgba(102, 102, 102, 0.34); border-radius:10px; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s; } .fat-nav.active { bottom:1%; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease; -o-transition: all 1.2s ease; transition: all 1.2s; transform: translateX(0); } .fat-nav__wrapper { margin:0 auto; width:90%; height: 100%; display: table; table-layout: fixed; padding:8% 0% 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body::before{ content: ''; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s; } body.no-scroll::before{ background: rgba(223, 223, 223, 0.5); content: ''; display: block; height: 100%; position: fixed; right: 0; top: 0; width: 100%; z-index: 993; -webkit-overflow-scrolling: touch; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s; } .hamburger.fixed{ top:17px; left:auto; right: 1.9%; position: fixed; } .hamburger.hidden { transform: translateY(-140%); } @media screen and (max-width:767px) { .hamburger{ width: 36px; height: 48px; right:2.9%; top: 12px; } .hamburger__icon{ width: 34px; height: 34px; } .hamburger__icon::before { width: 34px; height: 34px; background-size: 24px; } .hamburger.active .hamburger__icon:before{ width: 34px; height: 34px; background-size: 18px; } .hamburger.fixed{ right:2.9%; top: 12px; } .hamburger.active .hamburger__icon:after{ bottom:-10px; z-index:99; } .fat-nav.active { bottom:0.3%; height: 98.5%; } } /* ハンバーガーメニュー内コンテンツ */ .burgerlist{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 3%; } .burgerlist li img{ margin-bottom: 7px; } .burgermenu{ background: var(--RIGHTBLACK); padding:3%; color:var(--WHITE); } .burgermenu .menutitle{ background: #fa6d1f; text-align: center; color: #fff; padding:5px 0; font-weight: 600; font-size:1.12em; margin-bottom: 20px; border-radius:3px; } .burgermenu .burgerlist__name{ font-size:0.85em; } .burgermenu .price{ font-size:0.9em; text-align: right; } .close-button-container { grid-column: span 4; text-align: center; } .close-button { padding: 6px 20px; margin-bottom: 20px; background-color: var(--WHITE); color: var(--BLACK); font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .fn-user{ display: flex; justify-content: center; align-items: center; gap:0 20px; border-bottom: 1px solid var(--LIGHTBORDER); border-top: 1px solid var(--LIGHTBORDER); margin-bottom: 20px; padding-bottom: var(--MINMARGIN); padding-top: 10px; } .fn-user li { position: relative; flex: 1; border-right: 1px solid var(--LIGHTBORDER); text-align: center; display: flex; justify-content: center; align-items: center; gap: 20px; } .fn-user li:last-child{ border-right: none; } .fn-user li a{ display: flex; justify-content: center; align-items: center; gap: 5px; position:relative; } .fn-user .loginicon:before { content: ''; display: inline-block; background-image: var(--LOGINICON); background-size: contain; background-repeat: no-repeat; width: 15px; height: 15px; vertical-align: middle; margin-top: 0px; } .fn-user .logouticon:before{ content: ''; display: inline-block; margin-top: 6px; transform: scaleX(-1); background-image: var(--LOGOUTICON); background-size:100%; background-repeat: no-repeat; width: 15px; height: 15px; vertical-align: middle; margin-top: 0px; } .fn-user .mypageicon:before{ content: ""; display: block; background-image: var(--MYPAGEICON); background-size:100%; background-repeat: no-repeat; width: 25px; height: 17px; vertical-align: middle; margin-top: 0px; } .fn-user .wishlisticon:before{ content: ''; display: inline-block; background-image: var(--HEARTICON); background-size:100%; background-repeat: no-repeat; width: 16px; height: 16px; vertical-align: middle; margin-top: 0px; } .fn-user .carticon:before{ content: ""; display: inline-block; background-image: var(--CARTICON); background-size:100%; background-repeat: no-repeat; width: 17px; height: 17px; vertical-align: middle; margin-top: 0px; } .fn-user .carticon span { color: inherit; text-indent: 0; position: absolute; display: flex; justify-content: center; align-items: center; text-align: center; aspect-ratio: 1 / 1; width: 20px; font-size: 10px; font-weight: 500; background-color: var(--HOVERBLUE); color: var(--WHITE); border-radius: 50%; position: absolute; top: -8px; left: -11px; } .fn-userInfo_sec{ background: #f1f1f1; text-align: center; font-size:0.9em; padding:20px; margin-bottom: 20px; line-height: 1.8; } .fn-link{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px 3%; margin: 45px auto; } .fn-link li{ border-top: 1px solid var(--LIGHTBORDER); padding: 13px 3px; position: relative; } .fn-link li:nth-last-of-type(-n+3){ border-bottom: 1px solid var(--LIGHTBORDER); } .fn-link li a{ display: block; } .fn-link li:after{ content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 13px; height: 13px; background-image: var(--RIGHTARROW); background-size: contain; background-repeat: no-repeat; transition: right 0.3s ease; } .fn-link li:hover{ opacity:0.7; } .fn-link li:hover:after { right: 5px; } .fn-contactbtn{ display: flex; justify-content: center; gap:0 20px; } .fn-contactbtn li a{ border-radius:10px; width:300px; text-align: center; display: block; padding: 13px 0; } .fn-contactbtn li.docu_dl a{ background:var(--LIGHTGREEN); } .fn-contactbtn li.contact_link a{ background:var(--BLACK); color: var(--WHITE); } .fn-contactbtn li a{ transition: 0.5s; position: relative; z-index: 1; overflow: hidden; display: flex; height: 100%; align-items: center; justify-content: center; } .fn-contactbtn li a::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--HOVERBLUE); transform-origin: right top; transform: scaleX(0); transition: transform .5s ease; z-index: -1; } .ham_searcharea { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; width: 80%; margin: 0 auto 20px; } .ham_searcharea input { flex: 1; padding: 10px; border: none; outline: none; font-size: 16px; } .ham_searcharea button { padding: 10px 40px; border: none; font-size: 15px; cursor: pointer; background: #f1f1f1; } .ham_searcharea button:hover { background-color: var(--HOVERBLUE); color:var(--WHITE); } @media (hover: hover){ .fn-contactbtn li a:hover{ color: var(--WHITE); opacity: 1; } .fn-contactbtn li a:hover::before{ transform-origin: left top; transform: scaleX(1); } } @media screen and (max-width:767px) { .fat-nav{ width:94%; } .fn-user{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0px; padding: 0; } .fn-user li{ justify-content: flex-start; padding:8px 5px 8px 14px; } .fn-user li.fs-clientInfo.is-ready{ display: flex; } .fn-user li:nth-last-child(-n+2){ border-top: 1px solid var(--LIGHTBORDER); } .fn-user li:nth-child(even){ border-right: none; } .fn-user li a.carticon{ padding-left:4px; } .fn-user .carticon:before{ margin-right: 6px; } .fat-nav__wrapper{ padding-top: 17%; } .burgerlist{ grid-template-columns: repeat(2, 1fr); } .burgerlist li:nth-child(n+5){ display: none; } .burgerlist li:last-child{ display: block; } .close-button-container{ grid-column: span 2; } .fn-link{ grid-template-columns: repeat(2, 1fr); } .fn-link.g-inner{ width:100%; } .fn-link li{ padding: 13px 23px 13px 3px; display: flex; align-items: center; font-size: 12px; } .fn-link li:after{ right: 4px; } .fn-link li:nth-last-of-type(3){ border-bottom: none; } .fn-contactbtn{ flex-direction: column; } .fn-contactbtn li{ margin-bottom: var(--MINMARGIN); } .fn-contactbtn li a{ width:100%; font-weight: bold; padding: 18px 0; font-size:1.08em; } .ham_searcharea{ width:100%; } .ham_searcharea button{ padding: 10px 20px; } } /* footer */ footer { position: relative; text-align: center; z-index: 6; overflow: hidden; transition: bottom 0.5s ease, opacity 0.5s ease; pointer-events: none; background: var(--CREAM); } .footer_inner{ border-radius: 10px; width: 96%; min-height: 86vh; background: var(--NAVYBLUE); color: var(--WHITE); padding: 20px 0; padding-top: 25vh; margin: 0px auto 30px; } .footer_contents_right ul li a, .footer_contents_right ul li a:visited{ color: var(--WHITE); } .footlogo{ position: absolute; bottom:-3px; left: 50%; width:40%; transform: translateX(-50%); -webkit-transform:translateX(-50%); margin: auto; } .footer_contents{ width:88%; margin: 0 auto; display:flex; justify-content: space-between; gap:0 8%; align-items: center; position: fixed; bottom: 36vh; left: 50%; transform: translateX(-50%); } .footer_contents .footer_contents_left{ flex:45; } .footer_contents .footer_contents_right{ flex:55; display: flex; justify-content: flex-end; padding-right: 4%; } .footer_contents_right ul{ display: flex; flex-direction: column; text-align:left; } .footer_contents_right ul:first-child{ margin-right: 35px; } .footer_contents_right ul li{ padding: 0 10px 16px; } .footer_contents_right ul li { position: relative; list-style: none; } .footer_contents_right ul li a { display: inline-block; padding-left: 20px; text-decoration: none; transition: all 0.3s ease; } @media (hover: hover){ .footer_contents_right ul li a:hover { transform: translateX(10px); } } .footer_contents_right ul li a::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20fill='%23FFFFFF'%20d='M435.3%20267.3L446.6%20256l-11.3-11.3-168-168L256%2065.4%20233.4%2088l11.3%2011.3L385.4%20240%2016%20240%200%20240l0%2032%2016%200%20369.4%200L244.7%20412.7%20233.4%20424%20256%20446.6l11.3-11.3%20168-168z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: opacity 0.3s ease; } @media (hover: hover){ .footer_contents_right ul li a:hover::before { opacity: 1; } } .footer_contents_title{ font-size:2em; font-family: var(--FF_BASE); font-weight: 900; font-style: normal; margin-bottom: 30px; } .footer_contents_contactbtn a { background: var(--ORANGE); display: block; width: 100%; margin: 20px auto; padding: 18px 0; border-radius: 5px; font-size: 1.2em; color: var(--BLACK); position: relative; z-index: 99; overflow: hidden; text-align: center; transition: 0.5s; height: 100%; } .footer_contents_contactbtn a::after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--HOVERBLUE); transform-origin: right top; transform: scaleX(0); transition: transform .5s ease; z-index: -1; } @media (hover: hover){ .footer_contents_contactbtn a:hover{ color: var(--WHITE); opacity: 1; } .footer_contents_contactbtn a:hover::after{ transform-origin: left top; transform: scaleX(1); } } .footer_contents_contactbtn a::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent); z-index: 1; transform: skewX(-30deg); animation: shine 10s infinite; } @keyframes shine { 0% { left: -100%; } 17% { left: 100%; } 100% { left: 100%; } } footer a { pointer-events: auto; } .copyrightarea{ position: absolute; bottom:38px; left: 50%; width:90%; transform: translateX(-50%); -webkit-transform:translateX(-50%); margin: auto; text-align: center; } .corpsite_link{ margin-bottom: 20px; } .corpsite_link a{ display: inline-block; background: var(--WHITE); border-radius: 30px; padding: 8px 40px 8px 35px; color: var(--NAVYBLUE); font-family: roboto-mono, monospace; font-weight: 500; font-style: normal; position: relative; letter-spacing:-0.5px; } .corpsite_link a:hover{ background: var(--BLACK); color: #fff; } .corpsite_link a:after{ content: ''; display: inline-block; width: 17px; height: 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M336 96c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-185.4L59.3 411.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L297.4 128 112 128c-8.8 0-16-7.2-16-16s7.2-16 16-16l224 0z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top:11px; right:15px; transition: all 0.5s; } .corpsite_link a:hover:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23FFFFFF' d='M336 96c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-185.4L59.3 411.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L297.4 128 112 128c-8.8 0-16-7.2-16-16s7.2-16 16-16l224 0z'/%3E%3C/svg%3E"); } .copyright_note{ font-size: 0.9em; opacity:0.88; } .copyright{ opacity:0.7; padding-top: 7px; } @media screen and (min-width:768px) and (max-width:900px) { .footer_contents{ gap:0 3%; } .footer_contents .footer_contents_right{ padding-right: 0; } .footer_contents_title{ font-size:1.65em; } .footer_contents_right ul li a{ font-size: 13px; } } @media screen and (max-width:767px) { .footer_contents{ flex-direction: column; bottom: 35vh; } .footer_inner{ min-height: 81.5vh; padding-top: 20px; } .footer_contents_title{ font-size: 1.7em; } .footer_contents .footer_contents_right{ display: none; } .footer_contents_contactbtn a{ padding: 13px 0; } .copyright{ padding-top: 13px; } } /* メルマガ登録 */ .magazine_subscribe{ background: var(--CREAM); position: relative; z-index: 7; padding-bottom: 43px; padding-top: 25px; } .magazine_subscribe_title{ font-family: tt-commons-pro, sans-serif; font-weight: 600; font-style: normal; font-size: clamp(36px, 4.6vw, 55px); margin-bottom: var(--MINMARGIN); text-align: center; } .magazine_subscribe_note{ text-align: center; } .magazine_subscribe form{ text-align: center; margin-top: 30px; } .magazine_form{ border:1px solid #9b9b9b; border-radius: 0; padding:14px 10px; width:450px; height: 46px; font-size:16px; font-family: roboto-mono, monospace; font-weight: 500; font-style: normal; } .magazine_subscribe_btnarea{ display: flex; justify-content: center; align-items: center; } .submit_button { background: var(--WHITE); border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; padding:10px 14px; border:1px solid #9b9b9b; border-left:none; height: 46px; } .submit_icon { width: 24px; height: 24px; fill: #000; transition: fill 0.3s; } @media (hover: hover){ .submit_button:hover .submit_icon { fill: var(--PINK); } } @media screen and (max-width:767px) { .magazine_subscribe_note{ text-align: left; } } /* 資料請求固定ボタン */ .footfix_doculink { position: fixed; bottom: var(--MINMARGIN); right: 10px; width: 363px; background: var(--RIGHTBLACK); color: var(--WHITE); padding: 30px 16px; z-index: 9; border-radius: 8px; text-align: center; overflow: visible; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0.5s ease; } .footfix_doculink_btn a { background: var(--LIGHTGREEN); display: block; text-align: center; padding: 10px 0; color: var(--BLACK); margin-top: 10px; border-radius: 3px; font-size:1.075em; position: relative; overflow: hidden; transition: 0.5s; height: 100%; width: 100%; z-index: 99; } .footfix_doculink_btn a::after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--HOVERBLUE); transform-origin: right top; transform: scaleX(0); transition: transform .5s ease; z-index: -1; } @media (hover: hover){ .footfix_doculink_btn a:hover{ color: var(--WHITE); opacity: 1; } .footfix_doculink_btn a:hover::after{ transform-origin: left top; transform: scaleX(1); } } .footfix_close_button { position: absolute; top: -10px; left: -10px; width: 35px; height: 35px; background: var(--WHITE); border-radius: 50%; border: 1px solid var(--BLACK); display: flex; align-items: center; justify-content: center; color: var(--BLACK); font-size: 20px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, color 0.3s ease; } .footfix_doculink.visible { opacity: 1; visibility: visible; } @media screen and (max-width:767px) { .footfix_doculink.visible { opacity: 0; visibility: hidden; } .sp_footfix_doculink{ position: fixed; bottom:0; left:2%; width:96%; z-index:9; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .sp_footfix_doculink.visible { opacity: 1; visibility: visible; } .sp_footfix_doculink-contactbtn{ display:flex; } .sp_footfix_doculink-contactbtn li{ flex:1; text-align: center; font-weight: bold; } .sp_footfix_doculink-contactbtn li a{ display: block; padding:15px 0 18px; } .sp_footfix_doculink-contactbtn li.docu_dl a{ background: var(--LIGHTGREEN); border-radius: 5px 0px 0px 0px; } .sp_footfix_doculink-contactbtn li.contact_link a{ background: var(--BLACK); color: var(--WHITE); border-radius: 0px 5px 0px 0px; } .sp_footfix_doculink-contactbtn li.contact_link a.scrolled-over { background: var(--ORANGE); color: var(--BLACK); } .sp_footfix_doculink.hidden { opacity: 0; visibility: hidden; } } /* 共通 */ #wrap{ position: relative; z-index: 8; padding-bottom: 0; } .g-inner{ margin-left:auto; margin-right:auto; } #wrapcontents{ background: var(--WHITE); } h2.sec_title{ font-family: tt-commons-pro, sans-serif; font-weight: 600; font-style: normal; font-size:clamp(36px, 5.5vw, 68px); margin-bottom:40px; } h2.sec_title span{ display:block; font-size: 14px; letter-spacing:0; } h2.sec_title span:before{ content:"●"; color: var(--LIGHTGREEN); padding-right: 5px; font-size:0.9em; } #fs_ShoppingCart h2.sec_title{ font-size:clamp(28px, 5.0vw, 58px); } .generalsec{ margin-bottom: var(--GENERALSEC); } .price{ font-family: "roboto-mono", monospace; font-weight: 400; font-style: normal; margin-top: 3px; } .price:before{ content:"¥"; padding-right:1px; } .morelink_btn{ text-align: center; } .morelink_btn a{ width:200px; display: inline-block; margin: 60px auto 0px; background: var(--RIGHTBLACK); color: var(--WHITE); text-align: center; padding:13px 15px; border-radius: 30px; } @media (hover: hover) { .morelink_btn a:hover { transform: scale(1.1); } } .morelink_btn.white a{ background: var(--WHITE); color: var(--BLACK); } .morelink_btn.radiusnone a{ border-radius:3px; } .morelink a { display: inline-block; margin: 0px auto 60px; text-align: center; position: relative; font-family: "roboto-mono", monospace; font-weight: 400; font-style: normal; color: var(--BLACK); text-decoration: none; } .morelink a::after { content: ""; display: block; width: 0; height: 1px; background: var(--BLACK); position: absolute; bottom: -2px; left: 0; transition: width 0.3s ease; } @media (hover: hover){ .morelink a:hover::after { width: 100%; } } @media screen and (max-width:767px) { h2.sec_title{ line-height: 1.15; margin-bottom: 25px; } h2.sec_title span{ padding-bottom: 7px; } .generalsec{ margin-bottom: var(--GENERALSEC); } } #maincontents{ padding-top: 75px; padding-bottom: 60px; } /* -----------------フューチャーリセットCSS----------------- */ .logout.my-false { display: none; } .login.my-true { display: none; } .fs-client-cart-count--0{display: none;} /* 内部幅設定 */ #wrapper{ margin-inline: auto; width: var(--INNER_WIDTH); margin-bottom: var(--GENERALSEC); } /* カートカウント */ .fs-client-cart-count{ display: flex; justify-content: center; align-items: center; text-align: center; aspect-ratio: 1/1; width: 15px; font-size: 8px; background-color: var(--TXT_COLOR_BASE); color: var(--WHITE); border-radius: 50%; position: absolute; } /* 商品マークリセット */ .fs-c-productMarks{ display: flex; flex-wrap: wrap; } .fs-c-productMark__mark{ width: fit-content; margin: 0; padding: 0; } .fs-c-productMark img{ width: auto; height: 20px; } .fs-c-productMarks > .fs-c-mark{ line-height: 1; } /* 1回のみ・定期 */ .fs-c-productMarks > .fs-c-mark--normalAndSubscription .fs-c-mark__label{ background-color: var(--BROWN02); color: var(--WHITE); } /* 定期販売 */ .fs-c-productMarks > .fs-c-mark--subscription .fs-c-mark__label{ background-color: #D21341; color: var(--WHITE); } /* 初回特別価格あり */ .fs-c-productMarks > .fs-c-mark--firstTimeSpecialPrice .fs-c-mark__label{ background-color: #FF506F; color: var(--WHITE); } /* 予約商品 */ .fs-c-productMarks > .fs-c-mark--preorder .fs-c-mark__label{ background-color: #FF506F; color: var(--WHITE); } /* 商品マークグループスタイル */ .fs-c-productListItem .fs-c-productMark__label{ font-size: 11px; font-weight: 400; background-color: var(--FS_MARK_BG); display: inline-block; padding: 3px 8px 4px; line-height: 1.2; } .fs-c-productListItem .fs-c-productMark__item:has(.g-productMark--productOnly){ display: none; } @media screen and (min-width: 768px){ .fs-c-productListItem .fs-c-productMark{ gap: 6px; } .fs-c-productListItem .fs-c-productMark__label{ font-size: 11px; padding: 4px 8px 4px; } } @media screen and (max-width: 767px){ .fs-c-productListItem .fs-c-productMark{ gap: 4px; } .fs-c-productListItem .fs-c-productMark__label{ font-size: 9px; padding: 3px 6px 3px; } } /* 商品マーク商品詳細スタイル */ #tocart .fs-c-productMark__label{ font-size: 11px; color: var(--TXT_COLOR_BASE); font-weight: 500; display: inline-block; padding: 3px 8px 4px; line-height: 1.2; } #tocart .fs-c-productMark__mark{ background-color: var(--FS_MARK_BG); border-radius: 13px; } @media screen and (min-width: 768px){ #tocart .fs-c-productMark{ gap: 10px 5px; } #tocart .fs-c-productMark__label{ font-size: 11px; padding: 6px 15px 7px; } } @media screen and (max-width: 767px){ #tocart .fs-c-productMark{ gap: 8px 4px; margin-bottom: 20px; } #tocart .fs-c-productMark__label{ font-size: 10px; padding: 4px 10px 5px; } } /* パンくずリセット */ .breadcrumb__area{ background: var(--GRAY01); margin-bottom: var(--MIDDLEMARGIN); } .fs-c-breadcrumb__list{ padding:0 calc(2% + 20px) 0; margin-inline: auto; } #wrapper .fs-c-breadcrumb__list{ width: unset; } .fs-c-breadcrumb__list > li { box-sizing: border-box; } .fs-c-breadcrumb__listItem { display: inline-block; word-break: break-all; } .fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before { content: " > "; } .fs-c-breadcrumb li, .fs-c-breadcrumb li a { color: var(--RIGHTBLACK02); } .fs-c-breadcrumb li a{ text-decoration: underline; } @media screen and (min-width: 768px) { .fs-c-breadcrumb{ margin: 0 auto; padding: 10px 0 10px; font-size: 14px; } } @media screen and (max-width: 767px) { .fs-c-breadcrumb{ font-size: 11px; overflow: hidden; position: relative; padding:10px 0; } nav.fs-c-breadcrumb{ } div.fs-c-breadcrumb{ margin-top: 30px; } .fs-c-breadcrumb::after{ /* content: ""; right: 0; width: 6.25rem; height: 100%; position: absolute; background: linear-gradient(270deg,#fff 21.11%,hsla(0,0%,100%,0) 107.22%); z-index: 10; top: 0; */ } .fs-c-breadcrumb__list{ white-space: nowrap; overflow: scroll; padding-right: 40px; -ms-overflow-style: none;/* IE, Edge 対応 */ scrollbar-width: none;/* Firefox 対応 */ } .fs-c-breadcrumb__list::-webkit-scrollbar{ display: none; } } /* レビュー */ .fs-c-rating__value{ color: var(--FS_REVIEW_COLOR); } .fs-c-reviewStars::before{ color: var(--FS_REVIEW_COLOR); } /* 旧説明文閉じタグ抜け対策 */ .g-closeMissingTagForcedTable{ width: 100%; table-layout: fixed; } /* ページャー */ .fs-c-listControl { } .fs-c-productList__list+.fs-c-productList__controller{ margin-top: 25px; } .wp-pagenavi{ display: flex; justify-content: center; align-items: center; } #next > span.pages{ display: block; text-align: center; margin-top: 10px; display: none; } .found-postContainer, #next .post_range{ font-size: 13px; text-align: center; margin-bottom: 25px; } /* -----------------入力リセット----------------- */ [type=hidden], [type=text], [type=search], [type=tel], [type=url], [type=email], [type=password], [type=datetime], [type=date], [type=month], [type=week], [type=time], [type=datetime-local], [type=number], select, textarea{ outline: none; font-weight: 400; } [type=hidden], [type=text], [type=search], [type=tel], [type=url], [type=email], [type=password], [type=datetime], [type=date], [type=month], [type=week], [type=time], [type=datetime-local], [type=number]{ min-height: var(--FS_INPUT_HEIGHT); padding-inline: var(--FS_INPUT_PADDING_INLINE); } [class*="fs-c-inputGroup"] input{ border-radius: 0; } .fs-c-checkout-settings__additionalArea input, .fs-c-checkout-settings__additionalArea select, .fs-c-checkout-settings__additionalArea textarea{ background-color: var(--WHITE); } select{ min-height: var(--FS_INPUT_HEIGHT); } textarea{ padding-inline: var(--FS_INPUT_PADDING_INLINE); } *:focus{ outline: none; } @media screen and (min-width: 768px){ textarea{ min-height: 120px; padding-block: 10px; } select{ padding-inline: var(--FS_INPUT_PADDING_INLINE) 30px; } } @media screen and (max-width: 767px){ textarea{ min-height: 80px; padding-block: 8px; } select{ padding-inline: var(--FS_INPUT_PADDING_INLINE) 20px; } ::placeholder{ font-size: 12px; } } /* -----------------入力系設定----------------- */ /* パスワード入力欄 */ .fs-c-inputGroup, .fs-c-inputGroup--inline, .fs-c-inputGroup--vertical{ --BORDER: 1px solid var(--GRAY03); border: var(--BORDER); border-radius: var(--FS_INPUT_BDRS); overflow: hidden; } button.fs-c-button--displayPassword, button.fs-c-button--hidePassword{ background-color: var(--FS_INPUT_BDCOLOR); -webkit-appearance: none; border-radius: 0; border: none; position: relative; padding: 0; width: 30px; } button.fs-c-button--displayPassword::before, button.fs-c-button--hidePassword::before{ font-family: 'fs-icon' !important; font-weight: 500; content: "\e919"; font-size: 18px; position: absolute; font-size: 18px; top: 50%; transform: translateY(-50%); left: 3px; color: var(--DARK01); } button.fs-c-button--displayPassword::before{ content: "\e917"; } button.fs-c-button--hidePassword::before{ content: "\e918"; } /* セレクト */ .fs-c-dropdown select{ width: 100%; font-weight: 400; } .fs-c-dropdown::before{ content: "" !important; display: inline-block; background: url(/asset2025/images/common/select-arrow.svg) no-repeat center center / 100%; aspect-ratio: 1/1; position: absolute; top: 50%; transform: translateY(-50%); padding-right: 0 !important; } .fs-c-dropdown::after{ content: none; } @media screen and (min-width: 768px){ .fs-c-dropdown select{ height: var(--FS_INPUT_HEIGHT); border-radius: 10px; padding-inline: 17px 30px; font-size: var(--FZ_14); } .fs-c-dropdown::before{ width: 20px; right: 10px; } } @media screen and (max-width: 767px){ .fs-c-dropdown select{ height: var(--FS_INPUT_HEIGHT); border-radius: 10px; padding-inline: 10px 20px; font-size: 12px; } .fs-c-dropdown::before{ width: 15px; right: 5px; } } /* ラジオ */ .fs-c-radio__radioLabelText{ color: var(--TXT_COLOR_BASE); } .fs-c-radio__label{ color: var(--TXT_COLOR_BASE); font-size: 13px; } .fs-c-checkout-paymentMethod.is-active .fs-c-checkout-paymentMethod__title .fs-c-radio__radioLabelText{ color: var(--WHITE); } /* 入力テーブル */ fieldset[form="fs_form"]+fieldset[form="fs_form"]{ margin-top: 15px; } fieldset[name="memberPolicyAgree"]+fieldset[name="privacyAgree"]{ margin-top: 8px; } .fs-c-inputTable{ width: 100%; border-collapse: collapse; } .fs-c-inputTable > tbody > tr{ padding: 0; display: grid; grid-template-rows: 1fr; } .fs-c-inputTable__headerCell{ color: var(--TXT_COLOR_BASE); text-align: left; } .fs-c-inputTable tr:first-child .fs-c-inputTable__headerCell{ padding-top: 0; } .fs-c-inputTable tr:last-child .fs-c-inputTable__dataCell{ } .fs-c-inputTable__dataCell{ padding-top: 0; } .fs-c-checkbox__label{ gap: 3px; } .fs-c-checkbox__checkbox:checked + label > .fs-c-checkbox__checkMark{ background: var(--BLACK); border-color: var(--BLACK); } .fs-c-additionalCheckField a{ color: var(--TXT_COLOR_BASE); text-decoration: underline; } .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark{ border-color: var(--BLACK); } .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark::before{ background: var(--BLACK); } .fs-c-inputTable .fs-c-dropdown select{ border-radius: var(--FS_INPUT_BDRS); } .fs-c-inputTable input[type="text"]+.fs-c-dropdown{ border-left: none; } .fs-c-inputTable input[type="text"]+.fs-c-dropdown select{ border-radius: 0 var(--FS_INPUT_BDRS) var(--FS_INPUT_BDRS) 0; } .fs-c-agreementConfirmationArea{ margin: 0; } .fs-c-agreementConfirmation{ padding: 0; margin: 0; } .fs-c-agreementConfirmation__message, .fs-c-inputField__explanation, .fs-c-inputTable__comment{ background-color: var(--YELLOW03); color: var(--TXT_COLOR_BASE); } .fs-c-agreementConfirmation__password{ margin: 15px 0 0 0; } .fs-c-inputTable .fs-c-inputTable__label, .fs-c-agreementConfirmation__password .fs-c-agreementConfirmation__addon__message{ font-weight: 700; } @media screen and (min-width: 768px){ .fs-c-inputTable .fs-c-inputTable__headerCell{ padding-bottom: 5px; } .fs-c-inputTable .fs-c-inputTable__dataCell{ padding-bottom: var(--MINMARGIN); } .fs-c-inputTable .fs-c-inputTable__label, .fs-c-agreementConfirmation__password .fs-c-agreementConfirmation__addon__message{ font-size: 14px; } .fs-c-inputTable .fs-c-dropdown select{ height: 40px; font-size: var(--FZ_14); } .fs-c-inputTable .fs-c-dropdown::before{ width: 20px; right: 10px; } .fs-c-inputDate__year{ width: 90px; } .fs-c-inputDate__month, .fs-c-inputDate__date{ width: 70px; } .fs-c-inputTable .fs-c-inputDate .fs-c-dropdown::before{ width: 15px; right: 8px; } .fs-c-checkbox__labelText, .fs-c-checkbox__labelText a{ font-size: 13px; } .fs-c-agreementConfirmation__message, .fs-c-inputField__explanation, .fs-c-inputTable__comment{ padding: 8px; font-size: var(--FZ_14); } .fs-c-agreementConfirmation .fs-c-agreementConfirmation__message{ margin-block: var(--GAP_20) var(--GAP_10); } .fs-c-agreementConfirmation__addon__message{ margin-bottom: 5px; } .fs-c-inputField__explanation{ margin-top: var(--GAP_20); } .fs-c-inputTable__comment{ margin-block: var(--GAP_20); } } @media screen and (max-width: 767px){ .fs-c-inputTable .fs-c-inputTable__headerCell{ padding-bottom: 3px; } .fs-c-inputTable .fs-c-inputTable__dataCell{ padding-bottom: 8px; } .fs-c-inputTable .fs-c-inputTable__label, .fs-c-agreementConfirmation__password .fs-c-agreementConfirmation__addon__message{ font-size: 13px; } .fs-c-inputTable .fs-c-dropdown select{ height: 30px; font-size: 12px; } .fs-c-inputTable .fs-c-dropdown::before{ width: 15px; right: 5px; } .fs-c-inputDate__year{ width: 70px; } .fs-c-inputDate__month, .fs-c-inputDate__date{ width: 60px; } .fs-c-inputTable .fs-c-inputDate .fs-c-dropdown::before{ width: 15px; right: 8px; } .fs-c-checkbox__labelText, .fs-c-checkbox__labelText a{ font-size: 12px; } .fs-c-agreementConfirmation__message, .fs-c-inputField__explanation, .fs-c-inputTable__comment{ padding: 10px 15px; font-size: 12px; } .fs-c-agreementConfirmation .fs-c-agreementConfirmation__message{ margin-block: 15px 8px; } .fs-c-agreementConfirmation__addon__message{ margin-bottom: 3px; } .fs-c-inputField__explanation{ margin-top: 15px; } .fs-c-inputTable__comment{ margin-block: 15px; } } /* モーダル */ .fs-c-modal, .fs-c-modal--small, .fs-c-modal--medium{ } .fs-c-modal__inner{ border-radius: 0px; } .fs-c-modal__contents{ padding: 0; } .fs-c-modal__header{ justify-content: center; color: var(--TXT_COLOR_BASE); padding: 0; background: unset; border-radius: 0; } .fs-c-modal__title{ color: var(--BLACK); } .fs-c-modal__close{ position: absolute; width: fit-content; display: flex; align-items: center; padding: 0; } .fs-c-modal__close::before{ content: none; } .fs-c-modal__close::after{ content: ""; display: block; width: 25px; height: 25px; background: var(--CLOSEICON) no-repeat center center; background-size: contain; } @media screen and (min-width: 768px){ .fs-c-modal__inner{ padding: 50px 30px; max-height: 90vh; min-width: 500px; } .fs-c-modal__close{ top: 16px; right: 12px; gap: 10px; } .fs-c-modal__close::before{ font-size: 14px; } .fs-c-modal__header{ margin-bottom: 37px; } .fs-c-modal__title{ font-size: 18px; } .fs-c-modal__inner .fs-c-buttonContainer--pair{ max-width: 600px; margin-inline: auto; } } @media screen and (max-width: 767px){ .fs-c-modal__inner{ padding: 43px 15px; max-height: 80vh; min-width: 90%; } .fs-c-modal__contents{ -ms-overflow-style: none;/* IE, Edge 対応 */ scrollbar-width: none;/* Firefox 対応 */ } .fs-c-modal__contents::-webkit-scrollbar{ display: none; } .fs-c-modal__close{ top: 14px; right: 14px; font-size: 11px; gap: 3px; } .fs-c-modal__close::before{ font-size: 11px; } .fs-c-modal__header{ margin-bottom: 30px; } .fs-c-modal__title{ font-size: 16px; } } /* --------------------おすすめ商品------------------- */ .fs-c-featuredProduct{ max-width: 1060px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1101px){ .product-list{ grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 768px) and (max-width: 1100px){ .product-list{ grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 1100px){ .product-list article:nth-of-type(n+5){ display: none; } } @media screen and (min-width: 768px){ .product-list{ gap: 30px; } } @media screen and (max-width: 767px){ .product-list{ grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 25px; } } /* -----------------ボタンベース----------------- */ [class*="fs-c-buttonContainer"]{ padding: 0; } .fs-c-button__label{ font-family: var(--FF_BASE); } @media (hover: hover){ [class*="fs-c-button--"]:hover{ opacity: 1; } .fs-c-button__label{ transition: .3s; } a:hover .fs-c-button__label, button:hover .fs-c-button__label{ transform: scale(1.1); } } @media screen and (min-width: 768px){ [class*="fs-c-buttonContainer"]{ margin-top: var(--GAP_40); } } @media screen and (max-width: 767px){ [class*="fs-c-buttonContainer"]{ margin-top: 13px; } } /* fs-c-buttonContainer--pair */ .fs-c-buttonContainer--pair{ display: grid; grid-template-columns: repeat(2, 1fr); } .fs-c-buttonContainer--pair .fs-c-button--primary{ order: 2; } .fs-c-buttonContainer--pair .fs-c-button--standard{ order: 1; } @media screen and (min-width: 768px){ .fs-c-buttonContainer--pair{ grid-template-columns: repeat(2,1fr); gap: 20px; } .fs-c-buttonContainer--pair > *{ width: 100%; } } @media screen and (max-width: 767px){ .fs-c-buttonContainer--pair{ grid-template-columns: repeat(2,1fr); gap: 10px; } .fs-c-buttonContainer--pair > *{ min-width: unset; padding-inline: 0 !important; } .fs-c-buttonContainer--pair > *:first-child{ grid-row: unset; grid-column: unset; } .fs-c-buttonContainer--pair > *:last-child{ grid-row: unset; grid-column: unset; } .fs-c-buttonContainer--pair .fs-c-button__label{ font-size: 11px; } } /* fs-c-button-- */ .fs-c-button--primary, .fs-c-button--secondary, .fs-c-button--standard, .fs-c-button--plain{ -webkit-appearance: none; border-radius: 0; border: none; display: flex; justify-content: center; align-items: center; box-shadow: unset; padding-block: 0; padding-inline: 20px; } .fs-c-button__label{ } @media (hover: hover){ [class*="fs-c-button--"]{ transition: .3s; } } @media screen and (min-width: 768px){ .fs-c-button__label{ font-size: var(--FZ_15); } } @media screen and (max-width: 767px){ .fs-c-button__label{ font-size: 13px; } } /* fs-c-button--primary */ .fs-c-button--primary{ background-color: var(--FS_BTN_COLOR_1); } .fs-c-button--primary .fs-c-button__label{ color: var(--WHITE); } @media (hover: hover){ .fs-c-button--primary:hover{ /* background-color: var(--BLACK); */ } } /* fs-c-button--standard */ .fs-c-button--standard{ background-color: var(--FS_BTN_COLOR_1); } @media (hover: hover){ .fs-c-button--standard:hover{ /* background-color: var(--BLACK); */ } } /* fs-c-button--cancel */ .fs-c-button--cancel{ background-color: var(--FS_BTN_COLOR_2); } .fs-c-button--cancel .fs-c-button__label{ color: var(--WHITE); } @media (hover: hover){ .fs-c-button--cancel:hover{ /* background-color: var(--GRAY02); */ } } /* fs-c-button--sendInquiry */ .fs-c-button--sendInquiry{ background-color: var(--FS_BTN_COLOR_1); margin-inline: auto; border-radius: 35px; } .fs-c-button--sendInquiry .fs-c-button__label{ color: var(--WHITE); } @media (hover: hover){ .fs-c-button--sendInquiry:hover{ /* background-color: var(--BLACK); */ } } @media screen and (min-width: 768px){ .fs-c-button--sendInquiry{ width: 300px; } } @media screen and (max-width: 767px){ .fs-c-button--sendInquiry{ width: 250px; } } /* -----------------結果なし----------------- */ .fs-c-productList:has(.fs-c-noResultMessage__title){ margin-bottom: var(--GENERALSEC); } .fs-c-noResultMessage__title{ text-align: center; color: var(--TXT_COLOR_BASE); } /* -----------------reCAPTCHA----------------- */ @media screen and (max-width: 767px){ .grecaptcha-badge{ bottom: 90px !important; } } .maincontents__area{ width:var(--INNER_WIDTH); margin:0 auto; }