@charset "utf-8";

/* ======================================== */

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('../font/BarlowSemiCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('../font/BarlowSemiCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('../font/BarlowSemiCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('../font/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face{
  font-family: 'IBM Plex Sans JP';
  src: url('../font/IBMPlexSansJP-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face{
  font-family: 'IBM Plex Sans JP';
  src: url('../font/IBMPlexSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face{
  font-family: 'IBM Plex Sans JP';
  src: url('../font/IBMPlexSansJP-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face{
  font-family: 'IBM Plex Sans JP';
  src: url('../font/IBMPlexSansJP-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

/* ======================================== */

:root{
  --headerHeight: 3rem;
  --navHeight: 4rem;
  --footerHeight: 3rem;

  --background1: #ffffff;
  --background2: #f1f1f1;
  --background3: #f9f9f9;
  
  --text: #222222;
  --textBlue: #375b69;
  --textPale: #777777;

  --accent: #7FD9FB;
  --accent2: #C3EDFD;

  --waitHigh: #213E47;
  --waitMiddle: #176D87;
  --waitLow: #8CC0CF;
}

html, body{
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Barlow Semi Condensed", "IBM Plex Sans JP", sans-serif;
  font-size: 10px;
}

html{
  background-color: var(--background2);
  
  touch-action: manipulation;
}

body{
  background-color: var(--background1);
}

.noUserSelect{
  user-select: none;
}

/* ======================================== */

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  
  display: block;

  width: 100%;
  height: calc(var(--headerHeight) + var(--navHeight));

  background-color: var(--header);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

header>a{
  display: block;

  width: 100%;
  height: var(--headerHeight);

  color: var(--text);
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: 1px;

  line-height: var(--headerHeight);
  text-align: center;
  text-decoration: none;
}

/* ======================================== */

nav{
  position: fixed;
  top: var(--headerHeight);
  left: 0;
  z-index: 1;
  
  display: grid;
  grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 0.25fr;

  width: 100%;
  height: var(--navHeight);
}

nav:has(#navNews){
  position: fixed;
  top: var(--headerHeight);
  left: 0;
  z-index: 1;
  
  display: grid;
  grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr 0.25fr;

  width: 100%;
  height: var(--navHeight);
}

nav>span{
  display: block;

  width: 100%;
  height: calc(100% - 1px);

  margin: 0;
  padding: 0;

  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: var(--accent) solid 1px;
}

.navItem{
  display: grid;
  grid-template-rows: 0.5fr 2fr 1fr 0.5fr;

  width: 100%;
  height: calc(100% - 1px);

  margin: 0;
  padding: 0;

  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: var(--accent) solid 1px;
  border-radius: 0.5rem 0.5rem 0 0;

  color: var(--textPale);

  text-decoration: none;
}

.navItem>i{
  display: block;

  width: 100%;
  height: 100%;

  color: var(--text);
  font-size: 1.5rem;

  line-height: calc(var(--navHeight) / 4 * 2);
  text-align: center;
  text-decoration: none;

  transition: all .25s;
}

.navItem>p{
  display: block;

  width: 100%;
  height: 100%;
  font-size: 0.75rem;

  line-height: calc(var(--navHeight) / 4 * 1);
  text-align: center;
  text-decoration: none;
}

.navItem.current{
  width: calc(100% - 2px);

  border-top: var(--accent) solid 1px;
  border-right: var(--accent) solid 1px;
  border-left: var(--accent) solid 1px;
  border-bottom: none;

  background-color: var(--background1);
}

.navItem.current>i{
  color: var(--accent);
}

/* ======================================== */

#topSpan{
  display: block;
  width: 100%;
  height: calc(var(--headerHeight) + var(--navHeight));

  opacity: 0;
}

/* ======================================== */

.section{
  display: none;

  height: auto;

  margin-top: 1rem;
  margin-bottom: 3rem;
}

.section.current{
  display: block;
}

.section>h1{
  display: block;

  width: 100%;
  height: auto;

  margin: 1rem 0;
  padding: 0;

  color: var(--text);
  font-size: 1.5rem;
  font-weight: 400;

  line-height: 3rem;
  text-align: center;
}

/* ======================================== */

#remainTimeDisplay{
  width: calc(70% - 4rem);
  height: 23rem;

  margin: auto;
  padding: 2rem;

  border: none;
  border-radius: 1rem;
  background-color: var(--background1);
}

#remainTimeDisplay>h2{
  display: block;
  width: 100%;
  height: 2rem;
  
  margin: 1rem auto;
  padding: 0;

  color: var(--text);
  font-size: 1.75rem;
  font-weight: 400;
  
  line-height: 2rem;
  text-align: center;
}

#remainDate{
  display: block;
  width: 9rem;
  height: 9rem;

  margin: 1rem auto;
  padding: 0;

  background-color: var(--accent);
  border-radius: 50%;
  
  color: var(--text);
  font-size: 5rem;
  font-weight: 500;
  
  line-height: 9rem;
  text-align: center;
  
  font-variant-numeric: tabular-nums;
}

#remainTime{
  display: block;
  width: 100%;
  height: 5rem;
  
  margin: 1rem auto;
  padding: 0;
  
  color: var(--text);
  font-size: 2.25rem;
  font-weight: 500;
  
  line-height: 5rem;
  text-align: center;
  
  font-variant-numeric: tabular-nums;
}

#remainTimeDisplay>h1>small{
  font-size: 1.25rem;
}

#remainTimeDisplay>#closeRemainTimeDisplay{
  display: block;
  width: 9rem;
  height: 3rem;
  
  margin: auto;
  padding: 0;

  border: none;
  border-radius: 1.5rem;
  background-color: var(--background2);
  
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 400;
  
  line-height: 3rem;
  text-align: center;
}

#remainTimeDisplay:focus, #remainTimeDisplay>#closeRemainTimeDisplay:focus{
  outline: none;
}

/* ======================================== */

blockquote{
  display: block;
  width: 100%;
  height: 5rem;

  margin: 2rem auto;
  padding: 0;

  background-color: var(--accent2);

  color: var(--text);
  font-size: 2.25rem;
  font-weight: 500;

  line-height: 5rem;
  text-align: center;
}

/* ======================================== */

#thumbnail{
  display: block;
  width: 80%;
  height: auto;

  margin: 0 auto;
  padding: 0;

  border-radius: 1.5rem;
  box-shadow:
    -15px 15px 30px var(--background2),
    15px -15px 30px var(--background1);
}

/* ======================================== */

#brief{
  display: block;
  width: calc(80% - 4rem);
  height: auto;

  margin: 2rem auto;
  padding: 2rem;

  background: linear-gradient(225deg, var(--background3), var(--background1));
  border-radius: 1.5rem;
  box-shadow:
    -15px 15px 30px var(--background2),
    15px -15px 30px var(--background1);
}

#brief>h1{
  display: block;
  width: calc(100% - 2rem);
  height: 2.5rem;

  margin: 0;
  padding: 0 1rem;

  color: var(--text);
  font-size: 1.75rem;
  font-weight: 500;

  line-height: 2.5rem;
  text-align: justify;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

#brief>ul{
  display: block;
  width: calc(100% - 2rem);

  margin: 0.5rem auto;
  padding: 1rem;
}

#brief>ul>li:nth-of-type(2n+1){
  color: var(--text);
  font-size: 1.375rem;
  font-weight: 500;
  font-family: "IBM Plex Sans JP", sans-serif;

  line-height: 2.75rem;
  text-align: justify;
}

#brief>ul>li:nth-of-type(2n){
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "IBM Plex Sans JP", sans-serif;

  line-height: 2rem;
  text-align: justify;
}

/* ======================================== */

#brief>p{
  display: block;
  width: calc(100% - 2rem);

  margin: 0.5rem auto;
  padding: 1rem;
  
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 400;
  font-family: "IBM Plex Sans JP", sans-serif;

  line-height: 2rem;
  text-align: justify;
}

/* ======================================== */

footer{
  display: block;

  width: 40%;
  height: auto;

  margin: 0;
  padding: 0.5rem 30%;

  background-color: var(--background2);
}

#copyright{
  display: block;

  width: 100%;

  margin: 1rem 0;

  color: var(--text);
  font-size: 0.875rem;
  font-weight: 400;

  line-height: 1.5rem;
  text-align: center;
}

/* ======================================== */

/* ======================================== */

/* スマホで文字サイズが自動で切り替わってしまうことを防ぐ */
* {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* Safari */
}