.iic-late-column {
width: 100% !important;
max-width: 100% !important;
}
.iic-late { --iic-late-red: var(--e-global-color-primary);
--iic-late-green: var(--e-global-color-accent);
--iic-late-sand: var(--e-global-color-bd14155); --iic-late-orange: var(--e-global-color-dbf93c3); --iic-late-cream: var(--e-global-color-secondary);
--iic-late-text: var(--e-global-color-3c63f92); --iic-late-white: var(--e-global-color-0f94bec); --iic-late-line: var(--e-global-color-secondary);
--iic-late-muted: var(--e-global-color-text);
color: var(--iic-late-text);
} .iic-late-intro__start,
.iic-late-intro__label {
color: var(--e-global-color-3c63f92);
}
.iic-late-intro__dates {
color: var(--e-global-color-primary);
} .iic-late__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 0 0 20px;
padding: 14px 20px;
background: var(--iic-late-sand);
border-radius: 20px 0;
}
.iic-late .iic-late__period {
margin: 0;
line-height: 1.6;
font-family: "Noto Sans JP", sans-serif;
font-size: 17px;
}
.iic-late__period-label {
font-weight: 600;
margin-right: 10px;
}
.iic-late__period-dates {
color: var(--iic-late-red);
font-weight: 600;
}
.iic-late__status {
padding: 3px 12px;
border-radius: 10px 0;
background: var(--iic-late-orange);
color: var(--iic-late-muted);
font-size: 14px;
}
.iic-late__status--open {
background: var(--iic-late-green);
color: var(--iic-late-sand);
} .iic-late.has-filters {
display: grid;
grid-template-columns: 273px minmax( 0, 1fr );
gap: 30px;
align-items: start;
} .iic-late__filters-inner {
display: flex;
flex-direction: column;
padding: 20px 0 30px;
background: var(--iic-late-sand);
border-radius: 0 20px;
}
.iic-late__filter {
padding: 15px 20px;
}
.iic-late__filter + .iic-late__filter {
border-top: 2px solid var(--iic-late-white);
}
.iic-late .iic-late__filter-label {
margin: 0 0 6px;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--iic-late-muted);
}
.iic-late .iic-late__checks {
list-style: none;
margin: 0;
padding: 0;
}
.iic-late__filter--day .iic-late__checks,
.iic-late__filter--time .iic-late__checks {
display: flex;
flex-wrap: wrap;
column-gap: 15px;
}
.iic-late__filter--day .iic-late__checks li {
width: calc( 50% - 15px );
}
.iic-late .iic-late__check {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 0 0;
margin: 0 0 5px;
font-size: 16px;
line-height: 16px;
color: var(--e-global-color-e977eb2); cursor: pointer;
} .iic-late__check input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.iic-late__box {
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 1px solid var(--iic-late-line);
border-radius: 3px;
background-color: var(--e-global-color-e977eb2);
}
.iic-late__check input:checked + .iic-late__box {
background: var(--iic-late-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M26.1 8.8c0 .4-.2.8-.4 1.1L12.2 23.3c-.3.3-.7.4-1.1.4s-.8-.1-1.1-.4L2.3 15.6c-.3-.3-.4-.7-.4-1.1s.1-.8.4-1.1l2.1-2.1c.3-.3.7-.4 1.1-.4s.8.1 1.1.4l4.6 4.6 10.3-10.3c.3-.3.7-.4 1.1-.4s.8.1 1.1.4l2.1 2.1c.3.3.4.7.4 1.1z'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.iic-late__check input:checked ~ .iic-late__check-text {
color: var(--iic-late-red);
}
.iic-late__check input:focus-visible + .iic-late__box {
outline: 2px solid var(--iic-late-green);
outline-offset: 2px;
} .iic-late .iic-late__select {
width: 100%;
padding: 10px;
border: 3px solid var(--iic-late-line);
border-radius: 5px;
background-color: var(--iic-late-white);
color: var(--iic-late-text);
font-size: 16px;
} .iic-late .iic-late__toggle {
display: none;
} .iic-late__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.iic-late__card {
display: grid;
grid-template-columns: 200px minmax( 0, 1fr );
grid-template-areas:
"media body"
"side  side"; align-items: start;
gap: 12px 20px;
padding: 10px;
background-image: linear-gradient( 135deg, var(--iic-late-white) 0%, var(--iic-late-sand) 100% );
border: 1px solid var(--iic-late-white);
border-radius: 20px 0;
}
.iic-late__card[hidden] {
display: none;
}
.iic-late__media {
grid-area: media;
display: block;
align-self: start; line-height: 0;
}
.iic-late__media img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 20px 0;
}
.iic-late__body {
grid-area: body;
min-width: 0;
}
.iic-late .iic-late__title {
margin: 4px 0 10px;
font-family: "Noto Sans JP", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 30px;
}
.iic-late .iic-late__title a {
color: var(--iic-late-red);
}
.iic-late .iic-late__title a:hover,
.iic-late .iic-late__title a:focus-visible {
color: var(--iic-late-green);
}
.iic-late__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
line-height: 1.6;
} .iic-late__tag {
flex: 1 1 auto;
padding: 3px 10px;
text-align: center;
color: var(--iic-late-green);
}
.iic-late__tag--cat {
flex-grow: 0;
background: var(--iic-late-sand);
}
.iic-late__tag--subject {
background: var(--iic-late-cream);
}
.iic-late__tag--level {
background: var(--iic-late-orange);
color: var(--iic-late-text);
}
.iic-late__tag-start {
color: var(--iic-late-green);
}
.iic-late__excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 10px;
font-size: 15px;
line-height: 1.6;
}
.iic-late__teacher {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto; font-size: 14px;
}
.iic-late .iic-late__photo { width: 44px;
height: 44px;
object-fit: cover;
border-radius: 3px;
}
.iic-late__teacher-label {
color: var(--iic-late-muted);
}
.iic-late__teacher-name {
font-weight: 600;
}
.iic-late .iic-late__rows {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
align-content: start;
gap: 1px; margin: 0;
border: 1px solid var(--iic-late-sand);
border-radius: 10px 10px 0 10px; overflow: hidden;
background: var(--iic-late-sand);
font-size: 13px;
line-height: 1.5;
}
.iic-late__rows > div {
display: grid;
grid-template-columns: 7.5em minmax( 0, 1fr );
background: white; } .iic-late__rows > div:first-child {
grid-column: 1 / -1;
}
.iic-late__rows dt {
padding: 3px 10px;
white-space: nowrap;
font-weight: 600;
color: var(--iic-late-muted);
}
.iic-late__rows dd {
margin: 0;
padding: 3px 10px;
}
.iic-late__side {
grid-area: side;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px 20px;
}
.iic-late .iic-late__enroll {
margin: 0;
font-size: 15px;
font-weight: 600;
text-align: right;
color: var(--iic-late-red);
}
.iic-late .iic-late__enroll.is-open {
color: var(--iic-late-green);
}
.iic-late__price {
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--iic-late-green);
}
.iic-late__seats {
font-size: 14px;
}
.iic-late .iic-late__btn {
display: inline-block;
padding: 12px 24px;
border-radius: 10px 0 10px 10px;
background: var(--iic-late-green);
color: var(--iic-late-sand);
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.iic-late .iic-late__btn:hover,
.iic-late .iic-late__btn:focus-visible {
background: var(--iic-late-red);
color: var(--iic-late-cream);
}
.iic-late__empty,
.iic-late__none {
padding: 20px;
background: var(--iic-late-sand);
border-radius: 20px 0;
}
@media ( max-width: 1024px ) {
.iic-late__card {
grid-template-columns: 140px minmax( 0, 1fr );
}
.iic-late__media img {
width: 140px;
height: 140px;
}
.iic-late .iic-late__rows {
grid-template-columns: minmax( 0, 1fr );
}
}
@media ( max-width: 767px ) {
.iic-late.has-filters {
display: block;
} body.snapped {
position: fixed;
}
.iic-late__filters {
position: fixed;
left: 0;
top: 100%;
z-index: 99;
width: 100%;
height: 100%;
margin: 0;
padding: 0 5%;
background-color: var(--iic-late-green);
transition: top 0.3s ease-in-out;
}
.iic-late__filters-wrap.is-open .iic-late__filters {
top: 0;
}
body.admin-bar .iic-late__filters-wrap.is-open .iic-late__filters {
top: 46px;
} .iic-late__filters-inner {
height: 100%;
overflow-y: auto;
padding: 140px 0 150px;
border-radius: 0;
background: var(--iic-late-sand);
box-shadow: 10px 0 10px color-mix( in srgb, var(--iic-late-text) 20%, transparent );
}
.iic-late .iic-late__toggle {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
width: 70%;
height: 40px;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: 10px 10px 0 0;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--iic-late-red);
color: var(--iic-late-cream);
font-family: "Noto Sans JP", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 40px;
box-shadow: 5px 0 5px color-mix( in srgb, var(--iic-late-text) 40%, transparent );
}
.iic-late .iic-late__toggle:hover,
.iic-late .iic-late__toggle:focus {
background-color: var(--iic-late-red);
color: var(--iic-late-cream);
}
.iic-late__filters-wrap:not(.is-open) .iic-late__toggle--open,
.iic-late__filters-wrap.is-open .iic-late__toggle--close {
display: flex;
}
.iic-late__card {
grid-template-columns: minmax( 0, 1fr );
grid-template-areas:
"media"
"body"
"side";
}
.iic-late__media img {
width: 100%;
height: 180px;
}
.iic-late__tag--cat {
flex-grow: 1;
}
.iic-late__side {
justify-content: space-between;
} .iic-late .iic-late__rows {
border-radius: 10px 10px 10px 0;
}
.iic-late__teacher,
.iic-late .iic-late__enroll {
flex-basis: 100%;
text-align: left;
}
}