@charset "utf-8";

/* =============================================
	system index
  TOP 目次部分共通
============================================= */

/* --- メインイメージ --- */
.system-header{
  position: relative;
  height: auto;
  overflow: hidden;
  background: #fff url(../img/s/main.png) no-repeat right center;
  background-size: 100% 110%;
}
.main-ttl{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  width: 100%;
  padding: 11% 7%;
  margin: auto 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
}
.main-ttl h1 img{
  width: 80%;
  max-width: 600px;
  height: auto;
}
.main-ttl p{
  width: 100%;
  margin: 0;
  font-size: clamp(1.2rem, calc(1.08rem + 0.6vw), 1.8rem);
  color: #333;
  text-align: left;
  letter-spacing: 0.1em;
  text-shadow:0 1px 1px #fff,0 0 1px #fff,1px 0 1px #fff,0 -1px 1px #fff,-1px -1px 1px #fff,-1px 0 1px #fff;
}
.main-ttl p.lead{
  font-size: clamp(1.4rem, calc(1.08rem + 1.6vw), 3rem);
  font-weight: bold;
  text-align: left;
}
.main-ttl > *{
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: 1s;
}
.main-ttl > h1{
  margin: 0 0 5px;
  text-align: left;
  opacity: 0.01;
  animation: catch_anime 1.4s forwards 0.5s;
}
.main-ttl > p:nth-child(2) {
  animation: catch_anime 1.4s forwards 1s;
}
.main-ttl > p:nth-child(3) {
  animation: catch_anime 1.4s forwards 1.5s;
}
@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 本文 --- */

/* イベント PICK UP */
.swiper-wrapper img{
  width: 100%;
  height: auto;
}
.swiper-wrapper{
  align-items: stretch;
}
.event-cont{
  position: relative;
  margin-bottom: 80px;
}
.event-cont.empty{
  display: none;
}
.event-search__info{
  display: none;
}
.event-search__info.empty{
  display: block;
}
.event-list{
  padding-top: 10px;
}
.event-list li.swiper-slide{
  display: flex;
  flex-direction: column;
  height: auto;
}
.event-list li p img{
  width: 100%;
  height: auto;
  margin: 0 0 10px;
}
.event-list li h3{
  margin: 0 0 5px;
  font-size: 1.4rem;
}
.event-list li p{
  margin: -3px 0 5px;
  font-size: 1.1rem;
}
.event-list li a,
.solution-box a{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: #313131;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--line-light);
  box-shadow: 0 3px 3px rgb(0 0 0 / 10%);
  transition: all 0.1s ease;
}
.event-list li a:hover,
.solution-box a:hover{
  border: 1px solid var(--ict-color);
  box-shadow: 0 10px 5px rgb(0 0 0 / 10%);
  opacity: 0.8;
  transform: translateY(-0.25rem);
}
.event-list li a > div{
  padding: 20px;
}
.solution-box p.event-list__link,
.event-list li p.event-list__link{
  position: relative;
  display: inline-block;
  padding: 0 10px 5px 2px;
  margin: auto 20px 20px auto;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  color: var(--ict-btn-dark);
  text-align: center;
  background: none;
  border-bottom: 1px solid var(--ict-btn-dark);
  transition: all 0.2s ease;
}
.solution-box p.event-list__link::before,
.event-list li p.event-list__link::before{
  position: absolute;
  top: 0.2em;
  right: 0;
  width: 8px;
  height: 10px;
  content: ' ';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.88 7.88"><path d="m1.35.22-.82.82 2.83 2.84L.53 6.71l.82.82L5 3.88 1.35.22z" style="fill:rgb(32, 75, 100)"/></svg>');
  background-position: top left;
  background-size: 100% auto;
}
.solution-box a:hover p.event-list__link,
.event-list li a:hover p.event-list__link{
  color: var(--ict-red);
  border-bottom: 1px solid var(--ict-red);
}
.solution-box a:hover p.event-list__link::before,
.event-list li a:hover p.event-list__link::before{
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.88 7.88"><path d="m1.35.22-.82.82 2.83 2.84L.53 6.71l.82.82L5 3.88 1.35.22z" style="fill:rgb(237, 91, 82)"/></svg>');
  background-size: 100% auto;
}
.event-list li a > div{
  padding: 0 20px 10px;
}
.event-list li p.event-type{
  position: relative;
  display: inline-block;
  margin: 0 0 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ict-color);
}
.event-list li p.event-type::after{
  display: inline-block;
  padding-left: 2px;
  content: '／';
}
.event-outline div dt{
  position: relative;
  display: inline-block;
  width: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  background-color: #fff;
}
.event-outline div dt::after{
  display: inline-block;
  padding: 0 0 0 3px;
  content: ':';
}
.event-outline div{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 5px;
}

/* 選択 */
.event-search__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10em, 15em));
  gap: 0;
  padding: 20px 25px 10px;
}
.event-search__list li a{
  display: inline-block;
  padding: 10px 10px 8px;
  font-size: 1.5rem;
  font-weight: bold;
  vertical-align: middle;
  color: var(--font-dark);
  text-align: left;
  text-decoration: underline;
  transition: all 0.2s ease;
}
.event-search__list li a.active,
.event-search__list li a.selected{
  color: var(--ict-color);
  background-color: #f6e4df;
}
.sys-content-box.solution{
  padding: 80px 0;
  background-color: #fff;
}
.sys-content-box.news{
  padding: 20px 0 120px;
  background-color: #fff;
}
.news-list{
  margin: 0 0 30px;
}
.news-list div{
  padding: 15px 0;
  border-bottom: 1px solid var(--line-light);
}
.news-list div dt{
  color: #4f4f4f;
}
.solution-line-up{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 40px 0 0;
}
.solution__ttl{
  margin: 0 0 15px;
  font-size: 1.8rem;
  color: var(--ict-color);
}
.software-name .solution-line-up{
  grid-template-columns: repeat(4, 1fr);
}
.software-name .solution-box a{
  padding-top: 15px;
  text-align: center;
}
.software-name .solution-box p{
  margin: 0 0 15px;
  font-size: 1.3rem;
}
.item-img img{
  width: 100%;
  height: auto;
}
.event-search__wrap{
  background-color: #fff;
  border: 1px solid #333;
  border-top: none;
}
.search__type{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.search__type li{
  box-sizing: border-box;
  width: 50%;
}
.search__type li a{
  position: relative;
  display: block;
  padding: 15px;
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--font-dark);
  text-align: center;
  background-color: #dcdee0;
  border: 1px solid #a3a3a3;
  transition: all 0.2s ease;
}
.search__type li a.active{
  font-weight: bold;
  color: #fff;
  background-color: #6d7378;
}
.search__type li a.active::before{
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  width: 30px;
  height: calc(30px / 2);
  margin: 0 auto;
  content: ' ';
  background: #6d7378;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.search__type li a:hover{
  opacity: 0.8;
}
.search__type li:first-child a{
  border-right: none;
  border-radius: 20px 0 0;
}
.search__type li:nth-child(2) a{
  border-left: none;
  border-radius: 0 20px 0 0;
}
.panel{
  display: none;
}
.panel.active{
  display: block;
}
.system-cont__ttl{
  margin: 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--ict-color);
}
.system-cont__ttl .ttl-wrap{
   font-size: 0.82em;
   line-height: 1.4;
}
.system-cont__ttl .ttl-head{
  display: block;
  line-height: 1.3;
}
.system-cont__ttl .ttl-main{
  display: block;
   line-height: 1.3;
}
.category-name{
  margin: 80px 0 0;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}
.solution-box{
  display: flex;
}
.solution-line-up .item-name img{
  width: 100%;
  height: auto;
}
.solution-box p{
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333;
}
.solution-box .info__wrap{
  padding: 30px 30px 0;
}
.solution-attention{
  margin: 70px 0 0;
}
.news-cont{
  margin: 25px auto 0;
}
.news-pickup a{
  position: relative;
  display: inline-block;
  padding: 10px 20px 10px 30px;
  font-size: 1.6rem;
  border: 1px solid #333;
}
.news-pickup a::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 8px;
  height: 10px;
  margin: auto 0;
  content: ' ';
  background: url(../img/arrow3.svg) no-repeat left top;
}
.news-pickup a:hover{
  opacity: 0.6;
}
.cls-1{
  fill: url(#gradient);
}
#stop1{
  animation: step1 2s ease-in-out infinite alternate;
}
#stop2{
  animation: step2 2s ease-in-out infinite alternate;
}
@keyframes step1{
  0% {
    stop-color: #fff;
  }
  100% {
    stop-color: #79d7d6;
  }
}
@keyframes step2{
  0% {
    stop-color: #79d7d6;
  }
  100% {
    stop-color: #fff;
  }
}
.more{
  position: relative;
  z-index: 10;
  margin: 50px 0 0;
}
.more a{
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 300px;
  padding: 30px 45px 30px 25px;
  margin: 0 auto;
  font-size: 2.0rem;
  font-weight: bold;
  color: var(--ict-btn-text);
  text-align: center; 
  text-decoration: none;
  background: none;
  background: linear-gradient(-45deg, var(--ict-btn) 0%, var(--ict-btn-dark) 50%, var(--ict-btn-dark) 100%);
  border-radius: 15px;
  box-shadow: 0 3px 3px rgb(0 0 0 / 5%); 
  transition: all 0.2s ease;
}
.more a::after{
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  z-index: 10;
  width: 12px;
  height: 16px;
  margin: auto 0;
  content: ' ';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.88 7.88"><path d="m1.35.22-.82.82 2.83 2.84L.53 6.71l.82.82L5 3.88 1.35.22z" style="fill:rgb(149, 214, 207)"/></svg>');
  background-size: 100% auto;
  transition: all 0.2s ease;
}
.more a:hover{
  opacity: 0.8;
}
.event-list li a,
.solution-box a{
  border-radius: 20px;
}
.btn-link{
  text-align: center;
}
.btn-link a{
  display: block;
  padding: 50px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.6rem;
  font-weight: bold;
   color: var(--ict-btn-text);
  text-decoration: none;
 background: linear-gradient(-45deg, var(--ict-btn) 0%, var(--ict-btn-dark) 50%, var(--ict-btn-dark) 100%);
  border-radius: 15px;
  transition: all 0.1s ease;
}
.btn-link a:hover{
  background-color: var(--ict-btn);
  border-radius: 15px;
  opacity: 0.8;
}
.sys-content-box.news{
  padding: 40px 0 80px;
  background-color: #fff;
}
.sys-content-box.solution{
  padding: 60px 0;
  background-color: #fff;
}
.solution .search__type li:first-child a{
  border-radius: 20px 0 0 20px;
}
.solution .search__type li:nth-child(2) a{
  border-radius: 0 20px 20px 0;
}
.event-search__wrap{
  border: 1px solid #a3a3a3;
  border-top: none;
  border-radius: 0 0 20px 20px;
}
.filter-links a {
  display: inline-block;
  color: #333;
  text-decoration: none;
}
.filter-links a::after {
  font-size: 12px;
  color: #666;
  content: attr(data-count);
}
.filter-links a.disabled {
  color: #ccc;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}
p.event-search__info{
  margin: 0 0 15px;
  font-size: 1.3em;
  text-align: center;
}
.open-event span.tag-close{
  display: none;
}

/* ===========================================
	MediaQueries
=========================================== */

/* スマホ----------------------------- */
@media screen and (width <= 767px){
  .event-cont{
    padding: 0 20px;
    margin: 0 -10px 100px;
  }
  .event-list li{
    box-sizing: border-box;
    width: 72%;
    padding: 0 10px 0 0;
  }
  .solution-line-up{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
  }
  .main-ttl svg{
    width: 90%;
  }
  .main img{
    height: 100%;
    object-fit: cover;
  }
  .sys-content-box,
  .sys-content-box.solution{
    padding-right: 10px;
    padding-left: 10px;
  }
  .software-name .solution-line-up{
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- swiper --- */
  .stus-header .swiper-button-next span,
  .stus-header .swiper-button-prev span{
    background: none;
  }
  .slick-dots li button::before{
    color: #fff;
    opacity: 0.9;
  }
  .swiper-button-next button,
  .swiper-button-prev button{
    padding: 0;
    appearance: none;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: none;
    opacity: 0.8;
    transition: all 0.3s ease;
  }
  .swiper-button-next span,
  .swiper-button-prev span{
    display: block;
    width: 28px;
    height: 42px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url(../img/swiper-arrow.svg) no-repeat left center;
    background-position: 0 center;
    background-size: 100% auto;
    transition: all 0.2s ease;
  }
  .swiper-button-next,
  .swiper-button-prev{
    transition: all 0.1s ease;
  }
  .swiper-button-prev span{
    transform: rotate(180deg); 
  }
  .swiper-button-next::after,
  .swiper-button-prev::after{
    content: none;
  }
  .swiper-button-next button:hover,
  .swiper-button-prev button:hover{
    opacity: 1.0;
  }
  .swiper-button-next button:hover span,
  .swiper-button-prev button:hover span{
    background-position: 3px center;
  }
  .mySwiper .swiper-button-next{
    right: 0;
  }
  .mySwiper .swiper-button-prev{
    left: 0;
  }
  .swiper-pagination-bullet-active{
    background-color: var(--ict-color);
  }
  .swiper-button-next .focus-visible,
  .swiper-button-prev .focus-visible{
    box-sizing: border-box;
    border: 3px solid #00278c;
    opacity: 1;
  }
  .slider_controls{
    position: absolute;
    right: 0;
    bottom: -50px;
    z-index: 100;
    display: block;
    width: 11em;
    padding: 0 6em 0 0;
    margin: 0;
    text-align: center;
    list-style: none;
  }
  .event-cont .slider_controls{
    left: 0;
    width: 10em;
    padding: 0;
    margin: 0 auto;
  }
  .mySwiper{
    position: relative;
    width: 100%;
  }
  .mySwiper .swiper-button-next,
  .mySwiper .swiper-button-prev{
    top: 56%;
  }
  .event-cont .mySwiper{
    margin-bottom: 50px;
  }
  .sys-content-box,
  .sys-content-box.solution,
  .sys-content-box.inquiry,
  .sys-content-box.news{
    padding-right: 15px;
    padding-left: 15px;
  }
  .event-search__list{
   grid-template-columns: repeat(2, 1fr);
  }


  /* --- メインイメージ --- */
  .system-header{
    border-top: 1px solid #ccc;
  }
  .system-header > div:first-child {
    width: 100%;
    height: 100%;
  }
   .system-header .swiper-wrapper{
    display: block;
    text-align: right;
   }
  .system-header .swiper-wrapper img{
    height: 100%;
    object-fit: cover;
  }
  .event-list li{
    box-sizing: border-box;
    width: 88%;
    padding: 0 2%;
  }
  .sys-content-box,
  .sys-content-box.solution,
  .sys-content-box.inquiry,
  .sys-content-box.news{
    padding-right: 15px;
    padding-left: 15px;
  }

}

/* PC----------------------------- */
@media screen and (width >= 768px){
  /* --- メインイメージ --- */
  .system-header{
    background: #fff url(../img/main.png) no-repeat right top;
    background-size: auto 100%;
  }
  .main-ttl h1 img{
    width: 100%;
    height: auto;
  }
  .main-ttl{
    padding: 8% 5% 6.0%;
  }
  .main-ttl p{
   letter-spacing: 0.2em;
  }
  .search__type li a{
    padding: 20px 15px;
    font-size: 2.0rem;
  }
  .event-search__list{
    padding: 20px 25px;
  }
  .event-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding-top: 10px;
  }
  .event-search__list li a{
    font-size: 1.6rem;
  }
  .event-list li h3{
    margin: 0 0 5px;
    font-size: 1.5rem;
  }
  .event-list li p{
    margin: -3px 0 5px;
    font-size: 1.3rem;
  }
  .solution-box p.event-list__link,
  .event-list li p.event-list__link{
    margin: auto 20px 20px auto;
  }
  .news-list div{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 0;
  }
  .news-list div dt{
    width: 10em;
    font-size: 1.6rem;
  }
  .news-list div dd{
    flex: 1;
    font-size: 1.6rem;
  }
  .support-list{
    justify-content: center;
  }
  .system-cont__ttl{
    font-size: 1.8rem;
  }
  .system-cont__ttl .ttl-wrap{
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85em;
    line-height: 1.4;
  }
  .system-cont__ttl .ttl-head{
    min-width: 5em;
  }
  .system-cont__ttl .ttl-main{
    flex: 1;
  }
}