@charset "UTF-8";

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

/* column -------------------------------------*/
#column .system-list{
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1rem 0rem;
}
#column .system-list > li{line-height: 1.4;border-bottom: 1px dotted #b2b2b2;padding: 0 0 20px;}
#column .system-list li a:hover{ text-decoration: none; }
#column .system-list .system-date{font-size: 16px;line-height: 1.4;margin-bottom: 19px;}
#column .system-list .system-ttl-01{font-size: 16px;line-height: 1.6;display: block;width: 100%;}

#column .system-wrap {
   display: flex;
   padding-block: 0 14px;
}
#column .system-list .system-category-set {
   display: flex;
}
#column .system-list .system-category-set p {
   background: #1a1a1a;
   color: #fff;
   display: inline-block;
   padding: 4px 10px;
   margin-right: 10px;
   font-size: 14px;
}
#column .system-category{margin-bottom: 20px;}
#column .system-category span{display: inline-block;font-size: 14px;padding: 4px 10px;background: #1a1a1a;color: #fff;margin-right: 10px;}

#column .system-contents-inner { background: #fff; padding: 40px 20px;}
#column .system-contents .system-date{font-size: 16px;display: block;margin: 0;line-height: 2;}
#column .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;}
#column .system-contents .system-pic{ text-align: center; margin-bottom: 50px; }
#column .system-contents .system-pic img{ max-width: 100%; max-height: 600px; width: auto; max-height: auto; }

#column .system-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 26px;
   padding-left: 12px;
}
#column .system-tags li {
   font-size: 12px;
   color: #8d8d8d;
   position: relative;
   letter-spacing: 0;
}
#column .system-tags li::before {
   position: absolute;
   content: "#";
   left: -12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 12px;
}
}


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

/* column -------------------------------------*/
#column .system-list{padding: 1px;margin: 0 3vw 10vw;grid-template-columns: repeat(1, minmax(0, 1fr));}
#column .system-list-inner{ background: #fff; padding: 5vw 3vw;}
#column .system-list > li{overflow: hidden;line-height: 1.4;border-bottom: 0.2vw dotted #b2b2b2;padding: 0 0 2vw;}
#column .system-list li a:hover{ text-decoration: none; }
#column .system-list .system-date{ font-size: 3.2vw; line-height: 1.4; margin-bottom: 2vw}
#column .system-list .system-ttl-01{ font-size: 3.6vw; line-height: 1.6; }
#column .system-wrap {
   display: grid;
   grid-template-columns: 1fr;
   padding-block: 0 4vw;
   gap: 1.932vw 0;
}
#column .system-list .system-category-set { display: flex; margin-bottom: 2vw;}
#column .system-list .system-category-set p {
   background: #1a1a1a;
   color: #fff;
   display: inline-block;
   padding: 1vw 3vw;
   margin-right: 2vw;
   font-size: 3.2vw;
}
#column .system-category{ 
   margin-bottom: 3vw;
}
#column .system-category span {
   background: #1a1a1a;
   color: #fff;
   display: inline-block;
   padding: 1vw 3vw;
   margin-right: 2vw;
   font-size: 3.2vw;
}

#column .system-category span{display: inline-block;font-size: 3.4vw;padding: 1vw 3vw;}
#column .system-category{margin-bottom: 3vw;}

#column .system-contents{padding: 10.323671vw 0;margin: 0 3vw 10vw;}
#column .system-contents-inner { background: #fff; padding: 5vw 3vw;}
#column .system-contents .system-date{font-size: 3.8vw;display: block;margin: 0;line-height: 2;}
#column .system-contents .system-category-set {
    flex-wrap: wrap;
    margin: 0;
}
#column .system-contents .system-ttl{font-size: 5.2vw;font-weight: bold;margin-bottom: 4vw;padding-bottom: 2vw;border-bottom: 0.2vw #ccc solid;line-height: 1.4;}
#column .system-contents .system-pic { margin-bottom: 4vw; }
#column .system-contents .system-pic img{ max-width: 100%; height: auto; }

#column .system-tags {padding-left: 2.8vw;}
#column .system-tags li {
   font-size:2.898vw;
   color: #8d8d8d;
   position: relative;
   letter-spacing: 0;
}
#column .system-tags li::before {
   position: absolute;
   content: "#";
   left: -2.90vw;
   top: 50%;
   transform: translateY(-50%);
   font-size:2.898vw;
}
}