@charset "UTF-8";
/* CSS Document */

/*

font-family:"din-2014", sans-serif;
font-weight:400;
font-weight:600;
font-weight:700;

font-family:'zen-kaku-gothic-new', sans-serif;
font-weight:400;
font-weight:500;
font-weight:700;

*/

:root {
  --base: 106, 123, 188;
  --white: 255, 255, 255;
  --back: 223, 241, 247;
}

* {
  color: rgba(var(--base), 1);
  font-family: 'din-2014', 'zen-kaku-gothic-new', sans-serif;
  font-style: normal;
  font-weight: 500;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-size: 18px;
  text-align: justify;
  line-height: 2.0;
  word-break: break-all;
  margin: 0;
  padding: 0;
  background-color: rgba(var(--back), 1);
}

h1,
h2,
h3,
h4,
div,
dl,
dt,
dd,
ul,
li,
img,
a,
p,
span,
iframe,
small,
strong,
figure,
address,
select,
input,
button,
textarea,
i,
b,
u,
hr,
em,
sub,
time {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  list-style: none;
  text-align: justify;
  word-break: break-all;
  outline: none;
  background: none;
  border: none;
}

picture {
  display: block;
}

br {
  line-height: 1;
}

svg {
  display: block;
}

img {
  display: block;
  width: 100%;
}

#mv-fitting {
  position: relative;
  overflow: hidden;
}

/* mainvisual */
.background {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.background picture:nth-child(even) {
  transform: scale(1, -1);
}

.background img {
  width: 100%;
  height: auto;
  opacity: .5;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

header>* {
  letter-spacing: -.04rem;
}

header h1 {
  width: 90%;
  max-width: 875px;
  margin: 15px 0 0 0;
}

header h2 {
  width: 55%;
  max-width: 360px;
  margin: 22px 0 18px;
}

header h3 {
  display: flex;
  justify-content: center;
  gap: 1px;
  margin: 20px 0 0;
  color: rgba(var(--white), 1);
  font-size: 97%;
  letter-spacing: -.05rem;
  line-height: 2.4;
}

header h3 > * {
  white-space: nowrap;
}

header h3 i {
  padding: 1px 36px 0 55px;
  border-radius: 25px 0 0 25px;
  background-color: rgba(147, 201, 204, 1);
}

header h3 b {
  padding: 1px 55px 0 36px;
  border-radius: 0 25px 25px 0;
  background-color: rgba(175, 174, 211, 1);
}

header p :is(a, i) {
  display: flex;
  align-items: center;
}

header p img {
  width: 22px;
  margin: -3px 10px 0 0;
}

header p i {
  margin: 0 0 0 6px;
}

/* main */
.frame {
  width: 90%;
  max-width: 900px;
  margin: auto;
  position: relative;
}

.intro h2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  margin: 50px 0 130px 0;
  font-style: italic;
  font-weight: 600;
  font-size: 104%;
  font-family: "dnp-shuei-gothic-gin-std";
  letter-spacing: .02rem;
  line-height: 3.3;
}

.intro h2 i {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.partners dl+dl {
  margin: 20px 0 0 0;
}

.partners dt:before {
  content: "▼";
  margin: 0 5px 0 0;
  font-size: 90%;
  position: relative;
  top: -1px;
}

.partners dd i+i:before {
  content: '／';
  margin: 0 2px 0 0;
}

.access h3 {
  margin: 75px 0 20px 0;
  font-size: 225%;
  font-weight: 600;
}

.access p {
  display: flex;
  flex-direction: column;
}

.access i::before {
  content: '□';
  margin: 0 3px 0 0;
  position: relative;
  top: 1px;
}

.access iframe {
  width: 100%;
  height: 550px;
  margin: 60px 0;
  border: 0;
}

.archive h2 {
  margin: 150px 0 20px 0;
  font-size: 225%;
  font-weight: 600;
}

.archive .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 25px;
  grid-row-gap: 20px;
  padding: 90px 0 0;
}

.archive .list a {
  display: inline-flex;
  flex-direction: column;
}

.archive .list picture {
  margin: 0 0 2px 0;
  box-shadow: 3px 3px 6px 2px rgba(var(--base),.4);
  border-radius: 5px;
  overflow: hidden;
}

.archive .list i {
  display: inline-flex;
  align-items: center;
  font-size: 110%;
  letter-spacing: -.04rem;
}

.archive .list i img {
  width: 15px;
  aspect-ratio: 1;
  margin: 0 4px 0 0;
}

/* footer */
footer {
  padding: 130px 0 150px;
}

footer .frame {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sns {
  display: inline-flex;
}

.sns a {
  width: 38px;
  aspect-ratio: 1;
}

.sns>a+a {
  margin: 0 0 0 11px;
}

.copyright {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.copyright small {
  margin: 0 2px 0 0;
  position: relative;
  top: -1px;
}


@media screen and (max-width:1080px) {


  .frame {
    max-width: 900px;
  }

}


@media screen and (max-width:880px) {

  .archive .list {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 35px;
    grid-row-gap: 20px;
  }

}


@media screen and (max-width:640px) {

  body {
    font-size: 14px;
  }

header p a {
  flex-direction: column;
  line-height: 1.5;
}
header h2 {
  margin: 25px 0;
}
header h3 {
  flex-direction: column;
}
header h3 :is(i,b) {
  width: 275px;
  padding: 1px 0 0;
  border-radius: 25px;
  text-align: center;
}
header h3 i {
  margin: 0 0 2px 0;
}
.intro h2 {
  font-size: 112%;
  letter-spacing: -.02rem;
}
.access h2 {
  font-size: 275%;
}
.access i::before {
  margin: 0 2px 0 0;
  font-size: 75%;
  top: -1px;
}
.partners dt:before {
  margin: 0 2px 0 0;
  font-size: 75%;
  top: -1px;
}
.partners dd {
  margin: 3px 0 0 0;
  line-height: 1.8;
}
.partners dd i {
  display: block;
}
.partners dd i + i:before {
  display: none;
}
.archive h2 {
  font-size: 275%;
}
.archive .list {
  padding: 40px 0 0 0;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
}
.archive .list i img {
  width: 10px;
}

footer .frame {
  flex-direction: column;
}
.sns a {
  width: 35px;
}
.copyright {
  margin: 40px 0 0 0;
  font-size: 105%;
}


}