.search__inner {
position: relative;
}
.field {
display: block;
font-size: .875rem;
}
.field__item {
display: block;
background-color: var(--form-base-bg);
border: solid 1px var(--form-base-color);
border-radius: var(--border-radius);
color: var(--form-font-color);
overflow: hidden;
}
.search__inner .fieldInput__input {
padding-right: 3em;
}
.search__inner .fieldInput__input::placeholder {
opacity: 0.3;
}
.fieldInput__input {
display: block;
width: 100%;
padding: 0.78em;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--form-font-color);
font: inherit;
font-size: 14px;
line-height: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.seach__button {
position: absolute;
top: 0.5em;
right: 0.5em;
width: 1.25em;
height: 1.25em;
font-size: 1.25em;
appearance: unset;
background-color: transparent;
border: none;
pointer-events: none;
}
.seach__icon {
position: initial;
top: 0;
right: 0;
width: 1em;
height: 1em;
font-size: 1.25em;
pointer-events: none;
color: var(--primary-color);
}
.pc_searcharea .search{
position: fixed;
width: 300px !important;
margin: 0 0 0 0 !important;
top: 20px;
right: 200px;
z-index: 2;
}
.sp_searchbutton{
display:none;
}
.sp_searcharea{
display:none;
background-color: var(--header-background);
padding: 10px;
position: fixed;
top: 80px;
z-index: 2;
width: 100vw;
}
.sp_searcharea .search{
margin: 0px auto !important;
}
@media screen and (max-width: 1042px) {
.pc_searcharea{
display:none;
}
.sp_searcharea .search{
width: 50% !important;
margin: 0 auto !important;
}
.sp_searchbutton {
display:block;
position: fixed;
width: 60px;
height: 60px;
top: 10px;
bottom: auto;
right: 180px;
left: auto !important;
margin-left: 0;
padding: 0;
z-index: 2;
}
.app .nav[data-v-72590458] {
position: fixed;
z-index: 2;
}
}
@media screen and (max-width: 768px) {
.sp_searcharea {
top:60px;
}
.sp_searchbutton {
width: 40px;
height: 40px;
right: 130px;
}
.sp_searchbutton button {
padding:0px !important;
}
.sp_searcharea .search{
width: 100% !important;
}
.sp_searchbutton svg {
width: 18px !important;
height: 18px !important;
}
}
.sp_searchbutton button {
display: block;
padding: 0;
margin: 0;
background: none;
border-radius: 0;
box-shadow: none;
font: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
width: 100%;
height: 100%;
padding: 16px;
background-color: var(--main-bg);
border: 0;
border-radius: calc(var(--border-radius)/2);
box-shadow: 0 2px 4px 0 var(--box-shadow-color);
color: var(--primary-color);
font-size: .875rem;
line-height: 1.29;
}
.sp_searchbutton svg{
width: 25px;
height: 25px;
font-size: 1.25em;
pointer-events: none;
}
.seach__icon_sp {
width: 1em;
height: 1em;
font-size: 1.25em;
pointer-events: none;
}
function spRewrite(){
if(document.getElementById("str").textContent == '絞り込み'){
document.getElementById("str").textContent='メンバー';
}
else{
document.getElementById("str").textContent='絞り込み';
}
}
$(function() {
var news_list_cnt = $('#COM_EC_top_info__ul > li').length;
if( news_list_cnt < 6){
$('#top_info__more').hide();
}else{
$('#COM_EC_top_info__ul > li:last-child').hide();
}
$(".sp_Itemarea").click(function() {
$(".panel-group").slideToggle("sp_show");
$(".category").slideToggle("sp_show");
});
$(".sp_searchbutton").click(function(){
$(".sp_searcharea").slideToggle("sp_show");
});
});
NEW
PICK UP
商品カテゴリ
.COM_EC_top_info {
width: 100%;
max-width: 600px;
padding: 10px;
border: 1px solid var(--primary-color);
margin: 100px auto 36px;
}
.COM_EC_top_info__title {
font-size: 14px;
color: var(--primary-color);
font-weight: bold;
margin-bottom: 10px;
}
.COM_EC_top_info__list {
list-style: none;
}
.COM_EC_top_info__list:not(:last-child) {
margin-bottom: 10px;
}
.COM_EC_top_info__list__link {
font-size: 14px;
text-decoration: none;
}
.COM_EC_top_info__list__link__date {
color: var(--primary-color);
font-weight: bold;
}
.COM_EC_top_info__list__link__title {
text-decoration: underline;
}
.COM_EC_top_info_more {
margin-top: 15px;
text-align: right;
}
.COM_EC_top_info_more_btn {
color: var(--primary-color);
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
.COM_EC_top_info {
width: 100%;
max-width: 600px;
padding: 10px;
border: 1px solid var(--primary-color);
margin: 100px auto 36px;
}
.COM_EC_top_info__title {
font-size: 14px;
color: var(--primary-color);
font-weight: bold;
margin-bottom: 10px;
}
.COM_EC_top_info__list {
list-style: none;
}
.COM_EC_top_info__list:not(:last-child) {
margin-bottom: 10px;
}
.COM_EC_top_info__list__link {
font-size: 14px;
text-decoration: none;
}
.COM_EC_top_info__list__link__date {
color: var(--primary-color);
font-weight: bold;
}
.COM_EC_top_info__list__link__title {
text-decoration: underline;
}
.COM_EC_top_info_more {
margin-top: 15px;
text-align: right;
}
.COM_EC_top_info_more_btn {
color: var(--primary-color);
text-decoration: none;
font-size: 14px;
font-weight: bold;
}