*{
  /* border: #303364 1px solid; */

}

html{
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  background-color: #fcfcfc;
  overflow-x: hidden;
  text-align: center;

  @media screen and (max-width: 768px) {
    font-size: 0.875rem;
  }
}

a{
  text-decoration: none;
}

main{
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: rgba(0, 57, 136, 0.1);
  font-size: 20px;
  color: #003988;
  line-height: 1.3;
  border-bottom: solid 3px #003988;
  z-index:-2;
  margin-bottom: 1rem;

  @media screen and (max-width: 768px) {
    margin-left: -10%;
  }
}

h2:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px #fcfcfc;
  z-index: -1;
}

h3 {
  text-align: left;
  margin: 2rem auto 0 auto;
  
}

h3::before{
  content: "";
  display: inline-block;
  background-image: url('../img/apple-touch-icon.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  /* vertical-align: middle; */
  margin-right: 2px;
}

ul{
  text-align: left;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem auto; 
}

.strong{
  color: #F80C62;
}

/*********************************
    メインビジュアル
*********************************/
.main-visual {
  background: url("../img/mainvisual.jpg") no-repeat center center/cover;
  height: 100dvh;
  position: relative;
}

.main-content {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;

  & img{
    width: 100%;
    max-width: 800px;

    @media screen and (max-width: 768px) {
    max-width: 500px;
  }
  }

  @media screen and (max-width: 600px) {
    bottom: 20%;
  }

}

/*********************************
    セクション
*********************************/
.section {
  position: relative;
  margin: 150px 0;
  z-index: 1;
}

.section:first-child{
  margin: 100px 0;
}

.content {
  max-width: 1000px;
  margin: 0 auto;
}

.login{
  padding: 2rem ;
  border: #003988 2px solid;
  border-radius: 10px;
  max-width: max-content;
  margin: 0 auto;
  text-align: center;
  background: rgba(0, 57, 136, 0.1);

  .pass{
    margin: 1rem 0;
    font-weight: 700;
    color: #003988;
  }
}

/*********************************
    左右の画像
*********************************/
.background-img {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  width: 600px;
  height: auto;
  opacity: 0;
  transition: all 1s ease;
  z-index: -1;
  pointer-events: none;

  @media screen and (max-width: 960px) {
    width: 500px;
    top: 10%;
  }
}

.from-left {
  left: -200px;

  @media screen and (max-width: 768px) {
    left: -250px;
  }
}

.from-right {
  right: -200px;

  @media screen and (max-width: 768px) {
    right: -250px;
  }
}

.active-left {
  opacity: 0.3;
  left: -100px;

  @media screen and (max-width: 768px) {
    left: 50%;
    transform: translate(-70%, -50%);  /* 中央基準から少し左に */
  }
}

.active-right {
  opacity: 0.3;
  right: -100px;

  @media screen and (max-width: 768px) {
    right: 50%;
    transform: translate(70%, -50%);  /* 中央基準から少し右に */
  }
}

/*********************************
    リンクボタン
*********************************/
.button {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 2rem;
  background: #303364;
  color: #fcfcfc;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
  font-size: 1.5rem;

  @media screen and (max-width: 768px) {
    font-size: 1.3rem;
  }
}

.button:hover {
  background: rgba(248, 12, 98, 1);
  color: #fcfcfc;
}

.link a{
  color: #003988;
  border-bottom: #003988 2px dotted;
  transition: color 0.3s ease;
}

.link a:hover{
  color: #6e86a8;
}

.logo{
    width: 100px;
    margin: 0 auto;
    transition: transform 0.3s ease;
    border-radius: 50%;
    margin-top: 1rem;
  }

.logo:hover {
    transform: scale(1.2);
  }

  .logo2{
    width: 20px;
    margin: 0 auto;
    transition: transform 0.3s ease;
  }

.logo2:hover {
    transform: scale(1.2);
  }


/*********************************
    フッター
*********************************/
footer {
  display: block;
  background-color: #333;
  color: #ccc;
  width: 100%;
  text-align: center;
  padding: 1rem;

  & p{
    font-size: 0.875rem;
  }
}

.copyright{
  width: 95%;
  margin: 0 auto;
  display:flex;
  flex-flow: column;
  gap: 5px;

  & a{
    border-bottom: none;
  }
}

/*********************************
    404
*********************************/
.container-404{
  height: 100dvh;
  position: relative;
  margin-top: 50px;
}
.mt-50{
  margin-top: 50px;
}

.ball{
  opacity: 0.3;
  position: absolute;
  bottom: 10%;
  right: -5%;
  max-width: 300px;

  @media screen and (max-width: 768px) {
    max-width: 200px;
  }
}