@charset "UTF-8";

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

/* event -------------------------------------*/
#event .system-contents {
   width: min(95%, 1320px);
   margin-inline: auto;
}
#event .system-list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0 60px;
}
#event .system-list li {
   display: contents;
}
#event .system-list li a {
   display: block grid;
   grid-template-rows: subgrid;
   grid-row: span 4;
   margin-bottom: 60px;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .icon{
   font-size: 12px;
   text-align: center;
   padding-block: 4px;
   display: grid;
   place-items: center;
   color: #fff;
   width: 60px;
   margin-block: 0 11px;
}
#event .icon01 {
   background: #C34848;
}
#event .icon02 {
   background: #374A94;
}
#event .icon03 {
   background: #1A1A1A;
}
#event .system-pic{width: 100%;height: 260px;text-align: center;margin-bottom: 16px;}
#event .system-pic img{width: 100%;height: 100%;}
#event .system-ttl-01{
   font-size: 18px;
   font-weight: 500;
   line-height: 1.6666;
   letter-spacing: 0.05em;
   margin-bottom: 23px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   white-space: normal;
   border-bottom: 1px solid #DEDAD1;
   padding-bottom: 13px;
}
#event .txt-box {
   display: grid;
   gap: 9px;
}
#event .date-ttl{
   width: 40px;
   background: #d16b35;
   display: grid;
   place-content: center;
   font-size: 12px;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
}
#event .system-date{
   font-size: 12px;
   letter-spacing: 0em;
   color: #666666;
   display: grid;
   align-items: center;
   gap: 0px 9px;
   grid-template-columns: 40px 1fr;
}
#event .system-contents .system-ttl{font-size: 26px;font-weight: bold;margin-bottom: 30px;padding-bottom: 25px;border-bottom: 1px #ccc solid;line-height: 1.4;}
#event .system-category{margin-bottom: 20px;}
#event .system-category span{display: inline-block;font-size: 14px;padding: 4px 10px;background: #1a1a1a;color: #fff;margin-right: 10px;}
#event .system-tags {
   padding-bottom: 20px;
}


.single .system-contents-inner{width: min(95%, 1000px); margin: 0 auto;}
.single .system-date{
   font-size: 16px !important;
   gap: 0px 15px !important;
}
.single .date-ttl{
   width: 45px !important;
   font-size: 16px !important;
}
.single .txt-box {
   gap: 20px !important;
}



/* bottom-sec
-------------------------------------*/
.bottom-sec {
   background: #12294b;
   padding-block: 60px 118px;
}
.bottom-sec .tel-box {
   border-bottom: 1px solid #1F4C8E;
   width: min(95%, 1000px);
   margin-inline: auto;
   display: flex;
   gap: 40px;
   align-items: center;
   justify-content: center;
   padding-block: 73px 20px;
}
.bottom-sec .tel-box .txt {
   font-weight: 500;
   font-size: 18px;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
}
.bottom-sec .company {
   font-size: 16px;
   line-height: 1.8125;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
   padding-block: 19px 0;
}

/* single */
#event .single .system-i-pic {
   margin-bottom: 30px;
}
#event .single .txt-box {
   display: flex;
   margin-bottom: 30px;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
   #event .system-list {
      gap: 0 6.00vw;
   }
   #event .system-ttl-01 {
      font-size: clamp(0.813rem, -0.222rem + 2.16vw, 1.125rem);
   }
}



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

/* event -------------------------------------*/
#event .system-contents-inner { background: #fff; padding: 5vw 3vw;}
#event .system-list {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 9.66vw 0;
   width: 86.96vw;
   margin-inline: auto;
}
#event .system-list li a:hover{ text-decoration: none; }
#event .icon{
   font-size:2.898vw;
   text-align: center;
   padding-block: 0.97vw;
   display: grid;
   place-items: center;
   color: #fff;
   width: 14.49vw;
   margin-block: 0 2.90vw;
}
#event .icon01 {
   background: #C34848;
}
#event .icon02 {
   background: #374A94;
}
#event .icon03 {
   background: #1A1A1A;
}
#event .system-pic{width: 100%;height: 56.52vw;text-align: center;margin-bottom: 3.86vw;}
#event .system-pic img{width: 100%;height: 100%;}
#event .system-ttl-01{
   font-size:3.865vw;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.05em;
   margin-bottom: 5.80vw;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   white-space: normal;
   border-bottom: 0.2vw solid #DEDAD1;
   padding-bottom: 3.06vw;
}
#event .txt-box {
   display: grid;
   gap: 2.22vw;
}
#event .date-ttl{
   width: 9.66vw;
   background: #d16b35;
   display: grid;
   place-content: center;
   font-size:2.898vw;
   text-align: center;
   color: #fff;
   letter-spacing: 0;
}
#event .system-date{
   font-size:2.898vw;
   letter-spacing: 0em;
   color: #666666;
   display: grid;
   align-items: center;
   gap: 0px 2.17vw;
   grid-template-columns: 9.66vw 1fr;
}
#event .system-category span {
   background: #1a1a1a;
   color: #fff;
   display: inline-block;
   padding: 1vw 3vw;
   margin-right: 1vw;
   font-size: 3.2vw;
}
#event .system-category span{display: inline-block;font-size: 3.4vw;padding: 1vw 2vw;}
#event .system-category{margin-bottom: 3vw;}
#event .system-tags {
   padding-bottom: 2.8vw;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
   background: #12294b;
   padding-block: 0 23vw;
}
.bottom-sec .tel-box {padding-block: 14.5vw 7vw;text-align: center;display: grid;gap: 5vw;}
.bottom-sec .tel-box .txt {
 font-weight: 500;
 font-size:3.865vw;
 text-align: center;
 color: #fff;
 letter-spacing: 0;
}
.bottom-sec .company {
 font-size:2.898vw;
 font-weight: 500;
 line-height: 2.16666;
 text-align: center;
 color: #fff;
 letter-spacing: 0;
}

/* single */
#event .single .system-i-pic {
   margin-bottom: 4.83vw;
}
#event .single .txt-box {
   /* display: flex; */
   margin-bottom: 10.83vw;
}


.single .system-date{
   font-size: 3.6vw !important;
   gap: 0px 8vw !important;
}
.single .date-ttl{
   width: 15vw !important;
   font-size: 3.6vw !important;
}
.single .txt-box {
   gap: 2vw !important;
}


}