@charset "utf-8";

:root{
  --background1: #ffffff;
  --background2: #f1f1f1;

  --text: #222222;

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

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);
}

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

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

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

  width: 100%;
  height: 5rem;

  background-color: #f1f1f188;
  border: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

header>a{
  display: block;

  width: 100%;
  height: 100%;

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

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

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

#topSpan{
  display: block;
  width: 100%;
  height: 5rem;

  margin: 0;
  padding: 0;
  
  visibility: hidden;
}

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

.container{
  display: block;
  width: 70%;
  height: auto;

  margin: 3rem auto;
  padding: 0;
}

.container>h1{
  display: block;
  width: 100%;
  height: 3rem;

  margin: 1rem auto;
  padding: 0;

  border: none;
  border-radius: 1rem;

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

  line-height: 3rem;
  text-align: justify;

  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.5rem;
}

.container>p{
  display: block;
  width: 100%;

  margin: 0 auto;
  padding: 0;

  color: #222222;
  font-size: 1.2rem;
  font-weight: 400;

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

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

.accordion{
  display: block;
  width: 100%;
  height: auto;

  margin: 1.5rem auto;

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

.accordionTitle{
  display: block;
  max-height: 8rem;
  width: calc(100% - 4rem);

  margin: 0;
  padding: 2rem;

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

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

.accordionBody{
  display: grid; 
  grid-template-rows: 0fr;

  width: 100%;
  height: auto;
  
  margin: 0;
  padding: 0;
  
  transition: all .25s;
}

.accordion.active .accordionBody{
  grid-template-rows: 1fr;
  padding: 0 0 2rem 0;
}

.accordionBody>div{
  overflow: hidden;
}

.accordionBody>div>span{
  display: block;
  width: 40%;
  height: 0.5px;

  margin: 0 auto;
  padding: 0;

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

.accordionBody>div>p{
  display: block;
  width: calc(100% - 4rem);
  height: auto;

  margin: 0;
  padding: 2rem 2rem 0 2rem;

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

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

.accordionBody>div>a{
  display: block;
  width: calc(90% - 4rem);
  height: auto;

  margin: 1rem auto 0 auto;
  padding: 1rem;

  background-color: var(--accent2);
  border-radius: calc((1.75rem + 2rem) / 2);

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

  line-height: 1.75rem;
  text-align: center;
  text-decoration: none;
}

.accordionBody>div>a>i{
  display: inline-block;

  margin: 0 1rem 0 0;
  padding: 0;

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

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

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

footer{
  display: block;

  width: 40%;
  height: auto;

  margin: 0;
  padding: 0.5rem 30%;

  background-color: #f1f1f1;
  border: none;
}

#copyright{
  display: block;

  width: 100%;
  height: 1.5rem;

  margin: 1rem 0;

  color: #222222;
  font-size: 0.875rem;
  font-weight: 400;

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

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

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