@charset "utf-8";
/*********************************
HOBBY ROUND 33 2025.11.09 STYLE-CONTENTS
last update - 2025.07.28
*********************************/ 
/*-------------------------------
 MAKER BOOTH
---------------------------------*/
#ctg-maker {
  background-image: url(/event/afterrepo/assets/image/240511_hr30/ar12_00.jpg);
  background-position: bottom;
}
.maker-catch {
  font-size: calc(var(--fs) * 2.6);
  text-align: center;
  line-height: 1;
  color: #fff;
  background-color: rgba(212, 7, 40, 1);
  background-image: repeating-linear-gradient(-80deg, transparent, transparent 10px, rgba(195, 13, 35, 1) 10px, rgba(195, 13, 35, 1) 20px);
  padding: calc(var(--rs) * 3) 1rem calc(var(--rs) * 2.5) 1rem;
  margin: 0 0 0 0;
  small {
    font-size:calc(var(--fs) * 1.6);
  }
}
.ev-maker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem , 1fr));
  gap: 2rem;
  @media (max-width: 500px) {
    grid-template-columns: repeat(2 , 1fr);
  }
  dt {
    display: none;
  }
}
.ev-maker dd {
  background: var(--c-link);
  position: relative;
  filter: drop-shadow(3px 3px 2px rgb(50 50 50 / 10%));
  overflow: visible;
  z-index: 1;
  & > a {
    position: relative;
  }
  & > a > img {
    transition: transform 0.3s ease;
  }
  &:hover {
    z-index: 5;
    transform: scale(1);
  }
  &:hover > a > img {
    transform: scale(1.2);
    opacity: 1;
  }
  & > a:hover {
    z-index: 10;
    transform: scale(1.05);
  }
  & > a:hover img {
    transform: scale(1.1);
    opacity: 1;
  }
}
.maker-name {
  font-size: calc(var(--fs) * 1.6);
  color: #fff;
  font-weight: bold;
  line-height: 1.2;
  padding: 1rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5em;
}
.ev-maker-notice {
  padding: 0 calc(var(--rs) * 2) 0;
  text-align: right;
}
/********************** 
 EVENT
************************/
#ctg-event {
  background-image: url(/event/afterrepo/assets/image/230513_hr28/ar11_00.jpg);
  background-position: center top -3rem;
}
.accordion-area {
  padding: 0.5rem calc(var(--rs)* 1) 0.5rem;
  background: #f2f1ed;
}
.time-title {
  font-size: calc(var(--fs) * 2.2);
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 50%);
  text-align: center;
  background-color: var(--c-link);
  padding: 1.3rem calc(var(--rs) * 1) 1rem;
  transition: all 0.5s ease;
  cursor: default;
  position: relative;
  margin: 3rem 0 0;
  &:hover {
    background-color: var(--c-link-hover);
  }
  &::before,&::after {
    position: absolute;
    content: '';
    width: calc(var(--rs) * 3);
    height: 0.3rem;
    background-color: hsla(0,0%,100%,1.00);
    transition: all 0.5s ease;
  }
  &::before {
    top: 48%;
    right: 1.5rem;
    transform: rotate(-45deg);
  }
  &::after {
    top: 48%;
    right: 1.5rem;
    transform: rotate(-135deg);
  }
  /*　closeというクラスがついたら形状変化　*/
  .time-title.close::before {
    transform: rotate(0deg);
  }
  .time-title.close::after {
    transform: rotate(90deg);
  }
}
.box {
  overflow-x: auto;
}
/*　タイムスケジュール　*/
.time-scd {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  text-align: center;
}
.time-scd th {
  text-align: left;
  line-height: 1;
  vertical-align: middle;
  &:hover {
    filter: brightness(1.2);
  }
}
.time-link {
  color: #fff;
  text-shadow: 0 0.1rem 0.1rem rgb(0 0 0 / 50%);
  display: block;
  padding: 1.3rem 1em 1rem 1em;
  position: relative;
  &:hover {
    color: #fff;
  }
  &:after {
    content: "";
    aspect-ratio: 1/cos(60deg);
    clip-path: polygon(0 0,25% 50%,0 100%);
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 1;
    height: 2em;
    background: #ccc;
    margin-top: -1em;
  }
}
/*　カラー制御　*/
.time-link--blue {
  background: #00a1e9;
  .time-link:after {
    background: #00a1e9;
  }
}
.time-link--green {
  background: #8ec31f;
  .time-link:after {
    background: #8ec31f;
  }
}
.time-link--red {
  background: #e60013;
  .time-link:after {
    background: #e60013;
  }
}
.time-link--orange {
  background: #f39800;
  .time-link:after {
    background: #f39800;
  }
}
.time-link--stripe {
  background: #ff6252;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0.1) 12px);
  .time-link:after {
    background: #ff6252;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0.1) 12px);
  }
}
.time-scd td {
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  line-height: 1.2;
  background: #fff;
  padding: 1.3rem 1em 1rem 2em;
}
/********************** 
 EVENT - contents
************************/
.event-cont {
  margin: 0 auto 0;
  padding: calc(var(--rs) * 2) calc(var(--rs) * 2);
  background: rgb(255 255 255 / 80%);
  box-shadow: 0 0 0.3rem 0.1rem #ccc , var(--bs-cmn);
}
.event-cont + .event-cont {
  margin-top: calc(var(--rs) * 6);
}
.event-title {
  font-size: calc(var(--fs) * 2.6);
  color: var(--c-dark);
  line-height: 1.1;
  margin: calc(var(--rs) * 1) 0 calc(var(--rs) * 2);
  text-indent: -1em;
  margin-left: 1em;
}
.event-title:before {
  content: "●";
}
.event-imgcut {
  margin: calc(var(--rs) * 2) auto 0;
  display: flex;
  flex-flow: row nowrap;
}
.event-imgcut > * {
  flex: 1 1 auto;
}
.event-catch {
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  display: inline-block;
  padding: 0 0 0.5rem 0;
}
.event-descrip {
  font-size: calc(var(--fs) * 1.6);
}
.event-descrip + .ta-c {
  margin: 2rem auto 0;
}
.event-data {
  font-size: calc(var(--fs) * 1.6);
  padding: calc(var(--rs) * 2);
  margin: 0 auto 2rem;
  background: #f2f1ed;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
  .event-title + .event-data {
  margin-top: 1rem;
}
.event-data > * {
  margin: 0 0;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  width: 100%;
}
.event-data li+li {
  margin-top: calc(var(--fs) * 1);
}
@media screen and (min-width: 767px) {
  .event-data > * {
    flex: 1 1 auto;
    width: calc(100% / 2);
  }
  .event-data > *:nth-of-type(n+3) {
    margin-top: 1rem;
  }
  .event-data li+li {
    margin-top: 0;
  }
}
.event-data__head {
  padding: 0.2em 0rem;
  margin: 0 1em 0 0rem;
  background: var(--c-dark);
  color: hsl(0deg 0% 100%);
  font-weight: normal;
  width: 6em;
  display: inline-block;
  text-align: center;
}
.koushien {
  margin: 2em 0 0;
  padding: calc(1em + calc(var(--fs) * 0.9)) 1em 1em;
  border: solid 3px var(--c-dark);
  border-radius: 0.5rem;
  position: relative;
  dt {
    font-size: calc(var(--fs) * 1.8);
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    color: var(--c-dark);
    padding: 0 10px;
    background: #FFF;
    position: absolute;
    top: calc(0px - calc(var(--fs) * 0.9));
    left: calc(var(--fs) * 0.5);
  }
  ul {
    font-weight: bold;
    padding: 0.5rem 0 0.5rem;
  }
}

.online-event-cont {
  background: #fff6f1;
  margin: 2rem 0 0;
}
.event-cont-group {
  padding: calc(var(--rs) * 1);
}
.event-cont-group__heading {
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  text-align: left;
  padding: 0.1rem 1rem;
  border-left: 0.5em solid var(--c-dark);
  color: var(--c-dark);
}
.event-cont-group__text {
  padding: 1rem 0 0 calc(0.5em + 1rem);
  line-height: 1.3;
}
.event-cont-group__text ~ .event-cont-group__text {
  border-top: 0.1rem dotted #f0f0f0;
}
.group-text__deco--more {
  position: relative;
}
.group-text__deco--more::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin: 0 0 0 1rem;
  border: 0;
  border-top: 0.2em solid var(--c-link);
  border-right: 0.2em solid var(--c-link);
  display: inline-block;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  top: -0.1em;
}
.ev-roulette {
  margin: calc(var(--rs) * 3) 0 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  flex-direction: column;
}
.ev-roulette-group {
  width: 100%;
  background: rgb(255 255 255 / 60%);
  border-radius: 1rem;
  position: relative;
  flex: 1 0 auto;
  &:nth-of-type(even) {
    margin: calc(var(--fs) * 5) 0;
  }
}
.ev-roulette-group:not(:last-of-type)::after {
  content: "";
  width: 0;
  height: 0;
  border: 1em solid transparent;
  border-top-color: #ccc;
  position: absolute;
  bottom: -4rem;
  right: 50%;
}
.ev-roulette__head {
  padding: 0.5em 1em 0.5em 0.5em;
  background: var(--c-dark);
  border-radius: 2rem;
  color: #fff;
  white-space: nowrap;
}
.ev-roulette__head > span {
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.5em;
  background: #fff;
  border-radius: 50%;
  color: var(--c-dark);
  font-family: system-ui;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-indent: -0.1em;
  display: inline-block;
}
.ev-roulette__detail {
  margin: 1em 1rem;
  line-height: 1.5;
  text-align: justify;
}
.ev-roulette-list {
  font-size: 87.5%;
}
.ev-roulette-list > * {
  padding-left: 1.5em;
  /* margin-top: 1em; */
  line-height: 1.2;
  text-indent: -1.5em;
  &:not(:last-of-type) {
    margin-top: 1em;
  }
  &:last-of-type {
    margin-top: 0.5em;
  }
}
/* media */
@media (max-width: 600px) {
  .ev-roulette {
    background-image: none;
    flex-direction: column;
    align-items: stretch;
  }
  .ev-roulette-group {
    margin: var(--rs-1rem) 0;
  }
  .ev-roulette-group:not(:last-of-type)::after {
    all: initial;
  }
}
/* キャラグミン教室 */
.join-wrap {
  background: #fff6f1;
  padding: calc(var(--rs) * 2) calc(var(--rs) * 2);
  margin: calc(var(--rs) * 2.5) 0 0 0;
}
.join-title {
  font-family: 'M PLUS 1p', sans-serif;
  font-size: calc(var(--fs) * 2.4);
  color: #fa3f90;
}
.join-tbl {
  font-size: calc(var(--fs) * 1.4);
  border-collapse: separate;
  border-spacing: 0 calc(var(--rs) * 1);
  /* padding: calc(var(--rs) * 1) 0; */
}
.join-tbl th , .join-tbl td {
  display: block;
}
.join-tbl th {
  text-align: center;
  color: #fff;
  background: var(--c-dark);
  width: 8em;
  padding: 0.5rem 1rem 0.5rem;
}
.join-info {
  padding: 1rem 0 1.5rem 0;
  line-height: 1.3;
}
.join-info li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.join-info li:not(:first-of-type) {
  margin: 0.3rem 0 0 0;
}
@media screen and (min-width: 767px) {
  .join-tbl th , .join-tbl td  {
    display: revert;
  }
  .join-info {
    padding: 1.5rem 0 1.5rem 1em;
  }
}