header,
#footer_Wrap,
#topicsPathArea,
.pageTop {
display: none;
}
footer,
.header-bnr-area {
display: none;
}
body {
margin: 0;
}
#mainContainer {
padding-bottom: 100px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
& ul,
& li {
padding: 0;
margin: 0;
list-style: none;
}
& a {
text-decoration: none;
color: unset;
}
& h1,
& h2,
& h3,
& p {
margin: 0;
}
.pickup {
padding: 48px;
background-color: #f7f7f7;
& h2 {
margin: auto;
width: fit-content;
position: relative;
padding: 0.25em 1em;
border: solid 2px #fff718;
background-color: #fff718;
border-radius: 3px 8px 3px 8px;
text-align: center;
font-size: 30px;
color: #e70b11;
font-weight: bold;
&::before,
&::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: solid 2px #fff718;
border-radius: 50%;
}
&::after {
top: -12px;
left: -12px;
}
&::before {
bottom: -12px;
right: -12px;
}
}
#pickupList {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 900px;
margin: 48px auto 0;
gap: 24px;
& li {
background-color: #fff;
padding: 16px;
border-radius: 20px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
transition: 0.3s ease;
position: relative;
&:hover {
opacity: 0.7;
}
.thumb {
padding: 24px;
.point {
position: absolute;
top: 0;
right: 0;
padding: 6px 10px;
background-color: #e70b11;
color: #fff;
line-height: 20px;
border-bottom-left-radius: 16px;
& span {
font-size: 12px;
}
& strong {
display: block;
text-align: center;
font-size: 16px;
}
}
& img {
width: 100%;
}
}
& h3 {
font-size: 16px;
}
}
}
}
.kv {
background-color: #e70b11;
text-align: center;
& img {
width: 100%;
max-width: 1400px;
}
.date {
padding: 16px 0;
font-weight: bold;
color: #fff;
}
}
.main-contents_inner {
max-width: 1000px;
padding: 64px 20px 100px;
margin: auto;
box-sizing: border-box;
}
.rule {
width: 100%;
color: #424242;
border-radius: 30px;
overflow: hidden;
border: 2px solid #e70b11;
> h3 {
position: relative;
font-size: 20px;
font-weight: bold;
background-color: #fff;
line-height: 60px;
text-align: center;
cursor: pointer;
color: #e70b11;
&::before,
&::after {
content: "";
position: absolute;
top: 50%;
right: 32px;
width: 16px;
height: 2px;
background-color: #e70b11;
}
&::after {
transform: rotate(90deg);
transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
&.active {
&::after {
transform: rotate(0);
transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
}
}
> section {
display: none;
overflow: hidden;
transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
background-color: #fff;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
> div {
display: flex;
width: calc(100% - 120px);
margin: auto;
box-sizing: border-box;
&:not(:last-child) {
border-bottom: 1px solid #e70b11;
}
> p {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
min-height: 66px;
width: 23%;
padding: 0 10px;
}
> div {
width: calc(100% - 23%);
padding: 28px 42px;
font-size: 16px;
line-height: 24px;
& a {
color: rgb(0, 0, 238);
text-decoration: underline;
}
}
}
}
}
.target-direct {
> h2 {
margin-top: 80px;
text-align: center;
font-size: 20px;
}
.all-link {
display: block;
position: relative;
font-size: 20px;
font-weight: bold;
line-height: 60px;
text-align: center;
cursor: pointer;
color: #fff;
background-color: #e70b11;
margin-top: 16px;
margin-top: 50px;
&::after {
content: "▶︎";
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: 20px;
color: #fff;
}
}
& h3 {
margin-top: 48px;
font-size: 24px;
}
.cta-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-top: 24px;
& li {
display: flex;
justify-content: center;
align-items: center;
border: 1px #297ba3 solid;
text-align: center;
overflow: hidden;
& img {
width: 50%;
height: 60px;
object-fit: contain;
}
}
}
}
.search {
margin-top: 80px;
& h2 {
text-align: center;
font-size: 30px;
}
& form {
max-width: 600px;
margin: auto;
}
& .form-inner {
display: flex;
margin-top: 24px;
.input-box {
position: relative;
width: calc(100% - 55px);
.word-box {
position: absolute;
bottom: 0;
left: 0;
background-color: #f7f7f7;
transform: translateY(100%);
width: 100%;
box-sizing: border-box;
max-height: 200px;
overflow-y: scroll;
& p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
font-size: 16px;
line-height: 1.5;
margin: 10px;
cursor: pointer;
&:hover {
color: #f06e00;
}
}
}
}
& input {
width: 100%;
height: 35px;
outline: none;
padding: 0 10px;
box-sizing: border-box;
}
& button {
background: url("https://shop.hikaritv.net/shopping/image/share/header/sprite.png")
no-repeat -275px -224px;
cursor: pointer;
border: none;
text-indent: -99999px;
width: 55px;
height: 35px;
display: inline-block;
position: relative;
outline: none;
}
}
.word-tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
> p {
background-color: #424242;
color: #fff;
font-size: 14px;
border-radius: 20px;
padding: 4px 10px;
cursor: pointer;
}
}
}
.search-result {
margin-top: 80px;
& h2 {
font-size: 30px;
}
.filters {
display: flex;
align-items: center;
justify-content: space-between;
& form {
margin: 0;
& select {
padding: 6px;
}
}
}
.search-products {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 48px;
gap: 24px;
.product {
position: relative;
.thumb {
aspect-ratio: 1/1;
padding-top: 16px;
& img {
width: 100%;
object-fit: contain;
}
}
& h4 {
font-size: 16px;
margin: 8px 0;
width: fit-content;
background-color: #f06e00;
color: #fff;
padding: 4px 6px;
}
& h3 {
font-size: 14px;
}
&.recommend {
&::before {
content: "ãŠã™ã™ã‚商å“";
position: absolute;
top: 0;
left: 0;
background-color: #e70b11;
color: #fff;
padding: 4px 6px;
font-size: 14px;
}
}
}
}
}
.paginationjs-pages {
margin-top: 48px;
& ul {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
& li {
cursor: pointer;
}
.disabled {
opacity: 0.5;
}
.active {
color: #f06e00;
font-weight: bold;
}
}
}
.back-btn {
display: block;
font-size: 20px;
background-color: #c03;
line-height: 60px;
max-width: 500px;
border-radius: 30px;
margin: 80px auto 0;
text-align: center;
color: #fff;
padding: 0 20px;
font-size: 20px;
font-weight: bold;
}
}
@media screen and (max-width: 768px) {
#mainContainer {
padding-bottom: 50px;
.pickup {
padding: 24px;
padding-right: 0;
& h2 {
font-size: 18px;
}
#pickupList {
display: flex;
overflow-x: scroll;
margin: 24px auto 0;
gap: 12px;
padding-right: 24px;
& li {
min-width: 200px;
& h3 {
font-size: 14px;
}
}
}
}
.kv {
.date {
padding: 8px 0;
font-size: 12px;
}
}
.main-contents_inner {
padding: 32px 15px 50px;
}
.rule {
> h3 {
font-size: 14px;
line-height: 40px;
&::before,
&::after {
width: 12px;
}
}
> section {
display: none;
> div {
display: block;
width: 100%;
padding: 15px;
&:not(:last-child) {
border-bottom: none;
}
> p {
display: block;
font-size: 12px;
min-height: unset;
width: auto;
padding: 0 10px;
text-align: center;
margin-bottom: 10px;
}
> div {
width: 100%;
padding: 0;
font-size: 12px;
line-height: 1.5;
> p {
margin: 0;
}
}
}
}
}
.target-direct {
> h2 {
margin-top: 40px;
font-size: 18px;
}
.all-link {
font-size: 18px;
line-height: 48px;
margin-top: 24px;
&::after {
font-size: 14px;
}
}
& h3 {
margin-top: 24px;
font-size: 18px;
}
.cta-list {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 12px;
}
}
.search {
margin-top: 40px;
& h2 {
font-size: 18px;
}
& .form-inner {
margin-top: 12px;
}
.word-tag-list {
gap: 5px;
margin-top: 8px;
> p {
font-size: 12px;
padding: 4px 6px;
}
}
}
.search-result {
margin-top: 40px;
& h2 {
font-size: 18px;
}
.filters {
display: block;
align-items: center;
justify-content: space-between;
margin-top: 10px;
& form {
margin: 0;
margin-top: 10px;
& select {
padding: 3px;
font-size: 14px;
}
}
}
.search-products {
grid-template-columns: repeat(2, 1fr);
margin-top: 24px;
gap: 12px;
.product {
.thumb {
padding-top: 8px;
}
& h4 {
font-size: 12px;
margin: 4px 0;
padding: 4px;
}
& h3 {
font-size: 12px;
}
&.recommend {
&::before {
padding: 4px;
font-size: 12px;
}
}
}
}
}
.paginationjs-pages {
margin-top: 24px;
& ul {
gap: 12px;
& li {
font-size: 12px;
}
}
}
.back-btn {
font-size: 14px;
line-height: 40px;
max-width: 300px;
margin: 40px auto 0;
padding: 0 16px;
font-size: 14px;
}
}
}