@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* event -------------------------------------*/
#event .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 40px;
}
#event .system-list li {
   position: relative;
}
#event .system-list li a:hover{ text-decoration: none; }

#event .system-pic{width: 100%;height: 280px;overflow: hidden;text-align: center;margin-bottom: 23px;}
#event .system-pic img{width: auto;height: 100%;}
#event .system-list li .system-date{
   display: grid;
   gap: 0 6px;
   margin-bottom: 8px;
   grid-template-columns: 18% 1fr;
   align-items: flex-start;
}
#event .system-list li .system-date .date-ttl{
   background: #666464;
   font-weight: 500;
   font-size: clamp(0.625rem, 0.542rem + 0.17vw, 0.75rem);
   letter-spacing: 0.05em;
   line-height: 1.8333;
   text-align: center;
   color: #fff;
}
#event .system-list li .system-date .start_text{
   font-weight: 500;
   font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
   letter-spacing: 0.05em;
   line-height: 1.571428;
}
#event .system-ttl-01{
   font-weight: bold;
   font-size: 20px;
   letter-spacing: 0.05em;
   line-height: 1.6;
   border-bottom: 1px solid #1A1A1A;
   padding: 0 0 18px;
   margin-bottom: 19px;
}
#event .icon{width: 80px;height: 80px;border-radius: 40px;text-align: center;padding-top: 26px;display: block;color: #fff;position: absolute;top: -40px;right: 20px;z-index: 2;}
#event .icon01 {
   background: #FABE00;
   color: #1A1A1A;
}
#event .icon02 {
   background: #263868;
}
#event .icon03 {
   background: #1A1A1A;
}
}



/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* event -------------------------------------*/
#event .system-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 9.2vw;
   order: 3;
}
#event .system-list li {
   position: relative;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .system-pic{width: 100%;height: 60.87vw;overflow: hidden;text-align: center;margin-bottom: 4.6vw;}
#event .system-pic img{width: auto;height: 100%;}
#event .system-list li .system-date{
   display: grid;
   gap: 0 2.2vw;
   margin-bottom: 2vw;
   grid-template-columns: 19% 1fr;
}
#event .system-list li .system-date .date-ttl{
   width: 16.426vw;
   height: 4.834vw;
   background: #666464;
   font-weight: 500;
   font-size:2.898vw;
   letter-spacing: 0.05em;
   line-height: 1.8333;
   text-align: center;
   color: #fff;
}
#event .system-list li .system-date .start_text{
   font-weight: 500;
   font-size:3.382vw;
   letter-spacing: 0.05em;
   line-height: 1.571428;
}
#event .system-ttl-01{
   font-weight: bold;
   font-size:3.865vw;
   letter-spacing: 0.05em;
   line-height: 1.75;
   border-bottom: 0.242vw solid #1A1A1A;
   padding: 0 0 2.8vw;
   margin-bottom: 4.6vw;
}
#event .icon{width: 14.495vw;height: 14.495vw;border-radius: 50%;text-align: center;padding-top: 5vw;display: block;color: #fff;position: absolute;top: -7.2vw;right: 4.8vw;font-size: 2.898vw;z-index: 2;}
#event .icon01 {
   background: #FABE00;
   color: #1A1A1A;
}
#event .icon02 {
   background: #263868;
}
#event .icon03 {
   background: #1A1A1A;
}
#event .taxttl{margin-bottom: 8vw;}
}