@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.morphing {
  font-family: "Montserrat", serif;
  position: relative;
  font-size: 10vw;
  font-weight: bold;
  background: rgba(19, 118, 166, 0.8);
  color: #fff;
  min-height: 11vw;
  width: 100%;
  overflow: hidden;
  filter: contrast(2.5) blur(1px);
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: word 11s infinite ease-in-out;
}
.word:nth-child(1) {
  animation-delay: -11s;
}
.word:nth-child(2) {
  animation-delay: -9.625s;
}
.word:nth-child(3) {
  animation-delay: -8.25s;
}
.word:nth-child(4) {
  animation-delay: -6.875s;
}
.word:nth-child(5) {
  animation-delay: -5.5s;
}
.word:nth-child(6) {
  animation-delay: -4.125s;
}
.word:nth-child(7) {
  animation-delay: -2.75s;
}
@keyframes word {
  0%, 5%, 100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%, 80% {
    filter: blur(1em);
    opacity: 0;
  }
}

/* 新しい書き方 (Range Syntax) 1230 node 20 latest*/
/*@media (600px <= width <= 1024px) {
  #header {
    display: none;
  }
}*/
/**
  【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）
  https://zenn.dev/kagan/articles/4f96a97aadfcb8
 */
.Header {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.Header__List {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  -moz-column-gap: 2px;
       column-gap: 2px;
  justify-self: end;
  width: 100%;
  max-width: 840px;
  height: 100%;
}
.Header__List a {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px;
  font-weight: bold;
  color: white;
  background-color: #09f;
}

.Card {
  display: grid;
  row-gap: 20px;
  min-height: 100px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.Card span {
  align-self: end;
  justify-self: end;
  font-size: 0.8em;
}

.CardList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px 4%;
}

.CenteredCardList {
  display: grid;
  grid-template-columns: repeat(auto-fit, 22%);
  row-gap: 24px;
  -moz-column-gap: 4%;
       column-gap: 4%;
  justify-content: center;
  margin: 40px 0;
}

.Steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 40px;
}
.Steps > li:nth-child(4n) {
  grid-column-start: 1;
}
.Steps > li:not(:last-child) {
  position: relative;
}
.Steps > li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -20px;
  display: block;
  width: 10px;
  height: 20px;
  content: "";
  background-color: #09f;
  transform: translate(50%, -50%);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 2" preserveAspectRatio="none"><path d="M0,0 L1,1 L0,2 Z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 2" preserveAspectRatio="none"><path d="M0,0 L1,1 L0,2 Z"/></svg>');
}

.Link {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
  max-width: 260px;
  padding: 8px 16px;
  margin: 10px auto;
  font-weight: bold;
  color: white;
  background-color: #09f;
  border-radius: 9999px;
}
.Link::before {
  content: "";
}
.Link::after {
  justify-self: end;
  content: "→";
}

.Heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 1.5rem;
  font-weight: bold;
  color: #09f;
}
.Heading::before, .Heading::after {
  min-width: 30px;
  height: 4px;
  content: "";
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.ComplexGrid {
  display: grid;
  grid-template: "Alpha  Beta  Beta" 80px "Alpha     . Gamma" 80px "Alpha Delta Gamma" auto/40% 80px 1fr;
  gap: 4px;
}
input:checked ~ .ComplexGrid {
  grid-template: "Beta Alpha" 80px "Beta Gamma" 80px "Beta Delta" auto/20% 1fr;
}

.ComplexGrid__Alpha {
  grid-area: Alpha;
  background-color: #fc9;
}

.ComplexGrid__Beta {
  grid-area: Beta;
  background-color: #9cf;
}

.ComplexGrid__Gamma {
  grid-area: Gamma;
  background-color: #3fc;
}

.ComplexGrid__Delta {
  grid-area: Delta;
  background-color: #ff9;
}

.ShiftedLayer {
  display: grid;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
  /* わかりやすさを優先する場合、以下の書き方もできる */
  /* grid-template:
    '. . .' 20px
    '. . .' auto
    '. . .' 20px /
    20px auto 20px;
  */
}
.ShiftedLayer div {
  grid-area: 1/1/span 2/span 2;
  padding: 20px;
  background-color: #fff;
}
.ShiftedLayer::after {
  z-index: -1;
  grid-area: 2/2/span 2/span 2;
  content: "";
  background-color: #09f;
}

.Layout {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr 15%;
  /* わかりやすさを優先する場合、以下の書き方もできる */
  /*
  grid-template:
    '. .' auto
    '. .' auto
    '. .' 1fr /
    1fr 15%;
  */
  -moz-column-gap: 5%;
       column-gap: 5%;
  min-height: 100vh;
}

.Layout__Header {
  grid-area: 1/1/span 1/span 2;
}

.Layout__Hero {
  grid-area: 2/1/span 1/span 2;
  padding-right: 15%;
}

.Layout__Nav {
  grid-area: 2/2/span 2;
  margin-top: 40px;
}

.Hero {
  display: grid;
  align-items: center;
  min-height: 150px;
  padding-left: 3%;
  font-size: 2rem;
  font-weight: bold;
  background-color: #eee;
}

.Nav {
  padding: 20px;
  background-color: #fff;
  border-top-left-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}/*# sourceMappingURL=add-style-s.css.map */