@charset "UTF-8";
html {
  font-size: 100%;        /* ブラウザーのデフォルトの文字サイズ */
}
body{
	font-size: 1.3rem;      /* 文字の大きさ */
  line-height: 1.5;       /* 行間 */
  color: #432;          /* 文字の色 */
}
.wrapper {
  max-width: 1100px;      /* 横幅を1100px */
  margin: 0 auto;         /* 中央揃え */
  text-align: center;     /* 文字列を中央揃え */
}
p {
  text-align: center;       /* 文字列を中央揃え */
}
a {
  text-decoration: none;  /* リンク下線を消す */
}
img {
  max-width: 100%;        /* 画像の最大幅100% */
}
li {
  list-style: none;       /* リスト記号を無し */
}

/*-------------------------------------------
header
-------------------------------------------*/
#header {
  align-items: center;            /* 縦方向を中央 */
  margin: 0 auto;                 /* headerを中央揃え */
}
.header-text {
  color: #0033CC;
  font-size: 2.5rem;
  font-weight: normal;
}
.header-subtext {
  text-align: center;
  font-size: 1.1rem;
  color: #000066; /* 文字色 */
}

#header ul {
  display: flex;          /* li要素を横に並べる */
}
#header li {  
  margin-left: 30px;      /* li要素の左余白を30px */
}
#header li a {
  color: #000066; /* 文字色 */
}
#header li a:hover {
  opacity: 0.7;           /* マウスカースルを合わせると文字が半透明 */
}

/*-------------------------------------------
フルスクリーン
-------------------------------------------*/
/* 背景の画像の指定 */
#full {
  background-image: url(images/main-bg1.jpg);
  min-height: 100vh;
}
/* 背景画像を画面一杯 */
.full-bg {
  background-size: cover;
  background-position: center top;
}

/*-------------------------------------------
タイトルと文書
-------------------------------------------*/
.main-title {
  color: #0033CC;
  font-size: 6rem;
  font-weight: normal;
}
.document {
  text-align: center;
  margin-top: 5%;
}



/*-------------------------------------------
文字列アニメーション
-------------------------------------------*/

.container {
  display: flex;                  /* 要素を横に並べます */
  justify-content:center;   /* 要素を中央 */
  gap: 20px;
  text-align: center;     /* 文字列を中央揃え */
}
.content {
  width: 600px;
  height: 130px;
  margin:20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  opacity: 0;
  transform: rotateY(90deg);
  transition: all 3s;
  transition-duration: 2s;
}
.content.is-active {
  transform: rotateY(0);
  opacity: 1;
}

.--1 {
  background-color: #FFCCFF;
  transition-delay: 100ms;
}
.--2 {
  background-color: #FFCC99;
  transition-delay: 800ms;
}
.--3 {
  background-color: #CCFFCC;
  transition-delay: 1200ms;
}
.--4 {
  background-color: #FFFFEE;
  transition-delay: 1800ms;
}


/* -------------------------------------------
モバイル対応
-------------------------------------------*/
@media only screen and (max-width:640px){
  body{
    line-height: 1;       /* 行間 */
    color: #432;          /* 文字の色 */
  }
  .header-text {
    font-size: 1.8rem;
  }
  .header-subtext {
    font-size: 0.8rem;
  }
  .content {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    opacity: 0;
    transform: rotateY(90deg);
    transition: all 3s;
    transition-duration: 2s;
  }

}  /* @media */