@charset "utf-8";
@import url(common.css);
@import url(jarallax.css);
@import url(swiper.css);
@import url(swiper-bundle.min.css);
@import url(swiper.custom.css);
@import url(hamburger.css);
/*--------------------------------------------------------------------------------------
    debug
--------------------------------------------------------------------------------------*/
/*
* {
    outline: 1px solid red!important;
}
*/
/*--------------------------------------------------------------------------------------
    custom properties
--------------------------------------------------------------------------------------*/ :root {
  --font-color: hsla(0, 0%, 80%, 1);
  --font-color-bk: hsla(0, 0%, 10%, 1);
  --base-bg: hsla(0, 100%, 100%, 1);
  --boder-color: hsla(0, 0%, 90%, 0.4);
  --title-accent: hsla(0, 100%, 40%, 1);
  --main-color: hsla(30, 90%, 50%, 1);
  --hover-color: hsla(0, 100%, 70%, 1);
  --base-line: 1.8;
  --contents-width: min(90%, 1540px);
  --contents-bottom: 2rem;
  --text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.7);
}
/*--------------------------------------------------------------------------------------
    main contents : first view
--------------------------------------------------------------------------------------*/
.swiper {
  width: 100%;
  aspect-ratio: 40 / 21;
}
.swiper-wrapper {
  margin: 0;
  padding: 0;
  .swiper-slide {
    margin: 0;
    padding: 0;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.swiper img {
  /*    object-fit: cover;*/
}
/*--------------------------------------------------------------------------------------
    main contents : shared style
--------------------------------------------------------------------------------------*/
section {
  width: var(--contents-width);
  margin-inline: auto;
  margin-top: 60px;
}
/*layout*/
.about, .activity-report ul, .portfolio ul {
  display: flex;
  justify-content: space-between;
}
/*list reset*/
.activity-report ul, .portfolio ul {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    margin: 0;
    padding: 0;
    width: min(370px, calc(100% / 4 - 10px));
  }
}
section img {
  width: 100%;
  height: auto;
}
.more {
  margin-top: 1rem;
  text-align: right;
}
/*--------------------------------------------------------------------------------------
    main contents : about
--------------------------------------------------------------------------------------*/
.about {
  flex-direction: row-reverse;
}
/*--------------------------------------------------------------------------------------
    main contents : activity-report
--------------------------------------------------------------------------------------*/
.activity-report {}
/*--------------------------------------------------------------------------------------
    main contents : portfolio
--------------------------------------------------------------------------------------*/
.portfolio {}
/*--------------------------------------------------------------------------------------
    responsive
--------------------------------------------------------------------------------------*/
@media (width <=770px) {
  /*list reset*/
  .activity-report ul, .portfolio ul {
    flex-wrap: wrap;
    li {
      margin-bottom: 20px;
      width: calc(100% / 2 - 10px);
    }
  }
}