@charset "UTF-8";

:root {
  --font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-mincho: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho, serif;
  --main-color: #000;
  --base-color: #fff;
  --point-color: #bd96ff;
  --lettering-base: -.001em;
  --size-value: calc(1920 / 100);
  --size-mid-value: calc(744 / 100);
  --size-sm-value: calc(375 / 100);
}
* {
  --min-viewport: 375;
  --max-viewport: 1920;
  --slope: calc((var(--max-size) - var(--min-size)) / (var(--max-viewport) - var(--min-viewport)));
  --intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport));
  --fluid-size: calc(var(--slope) * 100vw + var(--intercept) / 10 * 1rem);
  --clamp-size: clamp(var(--min-size) / 10 * 1rem, var(--fluid-size), var(--max-size) / 10 * 1rem);
  min-height: 0vw;
}
body {
  position: relative;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  line-height: 1.8;
  letter-spacing: var(--lettering-base);
  --max-size: 17;
  --min-size: 15;
  font-size: var(--clamp-size);
  font-family: var(--font-family);
  font-weight: 400;
  font-feature-settings: "palt";
  color: var(--main-color);
}
.header {
  display: block;
  padding-block: min(calc(115vw / var(--size-value)), 115px) 0;
  height: calc(1364vw / var(--size-value));
  background-image: url("assets/images/visual.jpg");
  background-image:
  image-set(url("assets/images/visual.webp") type("image/webp"),
            url("assets/images/visual.jpg") type("image/jpg"));
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.header__union {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.header__logo {
  width: 888px;
  width: calc(888vw / var(--size-value));
}
.header__lead {
  margin-block: 0 calc(50vw / var(--size-value));
  padding-block: .5em;
  padding-inline: 1.85em;
  border-top: solid 2px var(--main-color);
  border-bottom: solid 2px var(--main-color);
  text-align: center;
  line-height: 1.6;
  --max-size: 26;
  --min-size: 15;
  font-size: var(--clamp-size);
  font-weight: 500;
  font-size: calc(26vw / var(--size-value));
}
.container {
  margin-inline: auto;
  width: min(calc(1340vw / var(--size-value)), 1100px);
}
h2 {
  text-align: center;
}
.announce {
  margin-block: calc(-60vw / var(--size-value)) 0;
}
.announce__text {
  margin-inline: auto;
  width: min(calc(826 / 1100 * 100%), 826px);
}
.content {
  padding-block: min(calc(200vw / var(--size-value)), 200px) 0;
}
.news__head {
  --max-size: 31;
  --min-size: 18;
  font-size: var(--clamp-size);
  font-weight: 700;
}
.news__list {
  margin-inline: auto;
  padding-block: 15px 0;
}
.news__item {
  border-top: 1px solid var(--main-color);
  --max-size: 22;
  --min-size: 15;
  font-size: var(--clamp-size);
  font-weight: 500;
}
.news__item:last-child {
  border-bottom: 1px solid var(--main-color);
}
.news__link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 20px;
  align-items: center;
  padding-block: min(calc(24vw / var(--size-value)), 24px);
  padding-inline-start: 5px;
}
.news__summary {
  display: flex;
  align-items: center;
  gap: calc(46vw / var(--size-value));
}
.news__date {
  width: 6.9em;
}
.news__category {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: .225em;
  padding-inline: .75em;
  width: 9.15em;
  border-radius: 100vmax;
  background: var(--point-color);
  text-align: center;
  --max-size: 22;
  --min-size: 14;
  font-size: var(--clamp-size);
  color: var(--base-color);
}
.outline {
  padding-block: min(calc(225vw / var(--size-value)), 225px) 0;
}
.outline__list {
  display: grid;
  gap: 0 min(calc(148vw / var(--size-value)), 148px);
  grid-template-columns: repeat(2, 1fr);
}
.outline__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
}
.outline__head {
  margin-block: .75em .55em;
  --max-size: 41;
  --min-size: 24;
  font-size: var(--clamp-size);
  font-family: var(--font-family-mincho);
  order: 2;
}
.outline__head > picture {
  order: 1;
}
.outline__summary {
  line-height: 2.1;
  order: 3;
}
.outline__link {
  margin-block: 52px 0;
  order: 4;
}
.outline__image {
  width: 100%;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(25vw / var(--size-value)); 
  padding-block: min(calc(325vw / var(--size-value)), 325px) min(calc(145vw / var(--size-value)), 145px);
}
.footer__copyright {
  --max-size: 13;
  --min-size: 11;
  font-size: var(--clamp-size);
  font-weight: 300;
}
.--btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  padding: 1em;
  width: 308px;
  border: solid 1px #231815;
  border-radius: 100vmax;
  background: var(--base-color);
  --max-size: 21;
  --min-size: 16;
  font-size: var(--clamp-size);
}
@media (any-hover: hover) {
  .--link {
    transition: opacity .5s ease;  
  }
  .--link:hover {
    opacity: .6  
  }
}

/*-------------------------------------------------
 * mediaqueries
-------------------------------------------------*/
@media (max-width: 1279px) {
  .header {
    padding-block: calc(55vw / var(--size-mid-value)) 0;
    height: calc(750vw / var(--size-mid-value));
  }
  .header__logo {
    width: calc(540vw / var(--size-mid-value));
  }
  .header__lead {
    margin-block: 0 calc(17vw / var(--size-sm-value));
    --max-size: 26;
    --min-size: 15;
    font-size: var(--clamp-size);
  }
  .container {
    padding-inline: 4.5vw;
    width: 100%;
  }
  .announce {
    margin-block-start: calc(-30vw / var(--size-mid-value));
  }  
  .news__list {
    width: 100%;
  }
  .news__link {
    padding-block: calc(24vw / var(--size-mid-value));
  }
  .outline__list {
    gap: 0 calc(40vw / var(--size-mid-value));
  }
  .outline__link {
    margin-block: calc(45vw / var(--size-mid-value)) 0;
  }
  .footer__logo {
    max-width: min(calc(114vw / var(--size-sm-value)), 180px);
  }
}
@media (max-width: 743px) {
  .header__lead {
    border-width: 1px;
  }
  .header__union {
    padding-inline: 4.5vw;
  }
  .news__list {
    padding-block: calc(15vw / var(--size-sm-value)) 0;
  }
  .news__link {
    padding-block: calc(15vw / var(--size-sm-value));
  }
  .news__summary {
    gap: calc(5vw / var(--size-sm-value));
  }
  .outline__link {
    padding: .75em;
    width: 72%;
  }
}
@media (max-width: 649px) {
  .header {
    height: calc(435vw / var(--size-sm-value));
    background-image: url("assets/images/visual_sp.jpg");
    background-image:
    image-set(url("assets/images/visual_sp.webp") type("image/webp"),
              url("assets/images/visual_sp.jpg") type("image/jpg"));
  }
  .header__logo {
    width: calc(316vw / var(--size-sm-value));
  }
  .header__lead span {
    display: block;
  }
  .announce__text {
    width: 100%;
  }
  .news__link {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .news__date {
    padding: 0;
    width: 5.6em;
  }
  .outline__list {
    grid-template-columns: 1fr;
    gap: calc(45vw / var(--size-sm-value)) 0;
  }
}