@charset "UTF-8";
 .p-event-archive {
padding: 72px 0 0;
background: #eee;
}
.p-event-h {
background: #fff;
border-bottom: 1px solid #bbb;
} .p-event-archive-head {
max-width: 1360px;
margin: 0 auto;
padding: 40px 40px 0 40px;
}
.p-event-archive-head-ja {
margin: 0 0 6px;
font-size: 1.4rem;
line-height: 1.5;
color: #666;
font-weight: 500;
}
.p-event-archive-head-en {
display: flex;
align-items: center;
gap: 30px;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 4.8rem;
font-weight: 700;
line-height: 1;
}
.p-event-archive-head-en::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: #bbb;
} .p-event-archive-nav {
display: flex;
align-items: flex-end;
gap: clamp(10px, 1.5vw, 20px);
max-width: 1360px;
margin: 0 auto;
padding: 0px 40px 0px 40px;
} .p-event-archive-month {
flex: 0 0 auto;
padding: 30px 0 0 0;
}
.p-event-archive-month ul {
display: flex;
align-items: flex-end;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.p-event-archive-month li {
display: flex;
align-items: flex-end;
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.p-event-archive-month a {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
box-sizing: border-box;
padding: 0 12px 20px 12px;
color: #111;
font-size: 1.3rem;
font-weight: 400;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
} .p-event-archive-month-num {
font-size: 2rem;
font-weight: 400;
line-height: 1;
}
.p-event-archive-month-after,
.p-event-archive-month-suffix {
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
} .p-event-archive-month li.is-active
.p-event-archive-month-num {
font-size: 4rem;
font-weight: 700;
}
.p-event-archive-month li.is-active
.p-event-archive-month-after,
.p-event-archive-month li.is-active
.p-event-archive-month-suffix {
font-size: 2rem;
font-weight: 700;
} .p-event-archive-month li.is-active a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
background: #111;
} .p-event-archive-filter-toggle-item {
display: none !important;
} .p-event-archive-filter-panel {
flex: 1 1 auto;
min-width: 0;
margin-left: auto;
container-type: inline-size;
}
.p-event-archive-quick-search {
width: 100%;
height: 100%;
margin: 0 0 0 auto;
max-width: 800px;
}
.p-event-archive-quick-search-inner {
height: 100%;
padding: 10px 0 14px 20px;
} .p-event-archive-quick-search-inner.month {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: stretch;
gap: 14px;
max-width: 560px;
margin-left: auto;
} .p-event-archive-quick-search-inner.list {
display: grid;
grid-template-columns:
minmax(0, 1.5fr)
minmax(180px, 1.3fr)
minmax(0, 0.8fr)
minmax(0, 0.8fr);
align-items: stretch;
gap: 14px;
}
.p-event-archive-quick-search-inner.list
.p-event-archive-quick-search-keyword,
.p-event-archive-quick-search-inner.list
.p-event-archive-quick-search-select {
width: 100%;
min-width: 0;
}
@media (max-width: 958px) and (min-width: 769px) {
.p-event-archive-nav.month{
flex-wrap: wrap;
}
.p-event-archive-nav.month .p-event-archive-month{
width: 100%;
order: 2;
padding: 0 0 0 0;
}
.p-event-archive-nav.month .p-event-archive-quick-search-inner{
padding: 10px 0 0px 20px;
}
} .p-event-archive-quick-search-keyword {
position: relative;
flex: 1.7 1 0;
min-width: 180px;
} .p-event-archive-quick-search-select {
position: relative;
flex: 1 1 0;
min-width: 130px;
} .p-event-archive-quick-search-keyword input,
.p-event-archive-quick-search-select select {
display: block;
width: 100%;
height: 52px;
min-width: 0;
box-sizing: border-box;
margin: 0;
border: 1px solid #bbb;
border-radius: 6px;
background-color: #fff;
outline: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
} .p-event-archive-quick-search-keyword input {
padding: 0 18px;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #111;
}
.p-event-archive-quick-search-keyword input::placeholder {
color: #999;
opacity: 1;
}
.p-event-archive-quick-search-keyword input[type="search"] {
appearance: none;
-webkit-appearance: none;
}
.p-event-archive-quick-search-keyword
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
} .p-event-archive-quick-search-select select {
padding: 0 42px 0 18px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
color: #111;
}
.p-event-archive-quick-search-select::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 7px;
height: 7px;
border-right: 1px solid #111;
border-bottom: 1px solid #111;
pointer-events: none;
transform:
translateY(-70%)
rotate(45deg);
} .p-event-archive-quick-search-keyword input:focus,
.p-event-archive-quick-search-select select:focus {
border-color: #111;
} @media screen and (max-width: 768px) {
.p-event-archive-quick-search-inner{
margin: 0 auto;
max-width: 560px;
} .p-event-archive-quick-search-inner.month {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
height: auto;
}
.p-event-archive-quick-search-inner.month
.p-event-archive-quick-search-keyword {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
.p-event-archive-quick-search-inner.month
.p-event-archive-quick-search-select {
width: 100%;
min-width: 0;
} .p-event-archive-quick-search-inner.list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
height: auto;
} .p-event-archive-quick-search-inner.list
.p-event-archive-quick-search-keyword {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
} .p-event-archive-quick-search-inner.list
.p-event-archive-quick-search-select {
width: 100%;
min-width: 0;
} .p-event-archive-quick-search-inner.list
.p-event-archive-quick-search-select:nth-of-type(2) {
grid-column: 1 / -1;
}
} .p-event-archive-main {
max-width: 1360px;
margin: 0 auto;
padding: 50px 40px 120px 40px;
} .p-event-archive-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 50px 26px;
margin: 0;
padding: 0;
list-style: none;
} .p-event-archive-more {
display: flex;
justify-content: center;
margin: 80px 0 0;
}
.p-event-archive-more-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 190px;
padding: 10px 40px 12px 40px;
border: 1px solid #111;
border-radius: 100px;
color: #111;
background: transparent;
font-family: inherit;
font-size: 1.6rem;
cursor: pointer;
transition:
color 0.2s ease,
background 0.2s ease,
opacity 0.2s ease;
}
.p-event-archive-more-icon {
display: block;
font-size: 18px;
font-weight: 300;
line-height: 1;
}
@media (hover: hover) {
.p-event-archive-more-button:hover {
color: #fff;
background: #111;
}
} .p-event-archive-more-button.is-loading {
cursor: wait;
opacity: 0.5;
}
.p-event-archive-more-button:disabled {
pointer-events: none;
} .p-event-archive-empty {
margin: 0;
padding: 50px 20px;
font-size: 1.6rem;
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 768px) {
.p-event-archive-empty {
margin: 0;
padding: 40px 20px;
font-size: 1.4rem;
line-height: 1.8;
text-align: center;
}
} @media screen and (max-width: 1023px) { .p-event-archive-head {
padding-right: 30px;
padding-left: 30px;
} .p-event-archive-nav {
padding-right: 30px;
padding-left: 30px;
} .p-event-archive-main {
padding-right: 30px;
padding-left: 30px;
}
.p-event-archive-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 60px 20px;
} .p-event-archive .m-event-search {
padding-right: 30px;
padding-left: 30px;
}
} @media screen and (max-width: 767px) { .p-event-archive {
padding-top: 0px;
} .p-event-archive-breadcrumb {
width: auto;
padding:
15px
clamp(20px, 5vw, 30px)
0;
}
.p-event-archive-breadcrumb ol {
gap: 6px;
}
.p-event-archive-breadcrumb li {
gap: 6px;
font-size: 10px;
} .p-event-archive-head {
padding:30px 20px 0 20px;
}
.p-event-archive-head-ja {
font-size: 1.4rem;
margin: 0 0 6px;
}
.p-event-archive-head-en {
gap: 10px;
font-size: 3.2rem;
}
.p-event-archive-head-en::after {
min-width: 0;
} .p-event-archive-nav {
display: block;
width: 100%;
padding: 30px 0 0;
}
@media screen and (max-width: 767px) {
.p-event-archive-nav {
display: block;
width: 100%;
padding: 20px 0 0;
}
} .p-event-archive-month {
width: 100%;
overflow: visible;
padding:0 clamp(16px, 4vw, 28px) ;
box-sizing: border-box;
}
.p-event-archive-month ul {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: clamp(8px, 2vw, 18px);
width: 100%;
height: auto;
margin: 0;
padding: 0;
list-style: none;
}
.p-event-archive-month li {
display: flex;
align-items: flex-end;
flex: 0 0 auto;
min-width: 0;
margin: 0;
padding: 0;
}
.p-event-archive-month a {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
width: auto;
height: auto;
min-width: 0;
box-sizing: border-box;
padding:0 6px 14px 6px;
color: #111;
font-size: clamp(13px, 3.8vw, 17px);
font-weight: 400;
line-height: 1;
text-decoration: none;
white-space: nowrap;
} .p-event-archive-month-num {
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
}
.p-event-archive-month-after {
display: inline;
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
}
.p-event-archive-month-suffix {
display: none;
} .p-event-archive-month li.is-active
.p-event-archive-month-num {
font-size: 2.8rem;
font-weight: 700;
line-height: .9;
}
.p-event-archive-month li.is-active
.p-event-archive-month-after {
font-size: clamp(15px, 4vw, 18px);
font-weight: 700;
}
.p-event-archive-month li.is-active a::after {
right: 0;
bottom: 0;
left: 0;
height: 3px;
} .p-event-archive-month
.p-event-archive-filter-toggle-item {
display: flex !important;
align-items: flex-end;
flex: 0 0 auto; margin-left: auto;
padding-left: clamp(12px, 3vw, 24px);
}
.p-event-archive-filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(7px, 2vw, 12px);
min-width: 0;
margin: 0;
padding:0 0 11px 0;
border: 0;
color: #111;
background: transparent;
font-family: inherit;
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.p-event-archive-filter-toggle-icon {
position: relative;
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid #111;
border-radius: 50%;
}
.p-event-archive-filter-toggle-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #111;
transform: translate(-50%, -35%);
transition:
transform .3s ease;
}
.p-event-archive-filter-toggle.is-open
.p-event-archive-filter-toggle-icon::before {
transform:
translate(-50%, -65%)
rotate(180deg);
} .p-event-archive-filter-panel {
display: grid;
grid-template-rows: 0fr;
width: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
background: #404040;
transition:
grid-template-rows 0.3s ease;
}
.p-event-archive-filter-panel.is-open {
grid-template-rows: 1fr;
}
.p-event-archive-quick-search {
min-height: 0;
height: auto;
margin: 0;
overflow: hidden;
}
.p-event-archive-quick-search-inner {
display: grid;
grid-template-columns: 1fr;
gap: clamp(12px, 3vw, 18px);
width: 100%;
height: auto;
box-sizing: border-box;
padding:
clamp(20px, 5vw, 40px)
clamp(20px, 5vw, 40px)
clamp(24px, 6vw, 42px);
}
.p-event-archive-quick-search-keyword,
.p-event-archive-quick-search-select {
width: 100%;
min-width: 0;
}
.p-event-archive-quick-search-keyword input,
.p-event-archive-quick-search-select select {
width: 100%;
height: clamp(50px, 13vw, 60px);
min-width: 0;
border-color: #aaa;
border-radius: 6px;
background: #fff;
font-size: clamp(16px, 4.2vw, 19px);
}
.p-event-archive-quick-search-keyword input {
padding:
0
clamp(16px, 4vw, 24px);
}
.p-event-archive-quick-search-select select {
padding:
0
clamp(44px, 11vw, 56px)
0
clamp(16px, 4vw, 24px);
}
.p-event-archive-quick-search-select::after {
right: clamp(18px, 5vw, 26px);
width: 8px;
height: 8px;
} .p-event-archive-main {
padding:
50px
clamp(20px, 5vw, 30px)
50px;
}
.p-event-archive-list {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
45px
clamp(12px, 3vw, 20px);
} .p-event-archive-more {
margin-top: 55px;
}
.p-event-archive-more-button {
min-width: 170px;
font-size: 1.4rem;
}
}