/*iphoneのみ*/
.iphone {
  body:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url("../image/background-vertical.jpg") center no-repeat;
    background-size:cover;
  }
}

/*ipadのみ*/
.ipad {
  body:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url("../image/background-vertical.jpg") center no-repeat;
    background-size:cover;
  }
}

body{
  background-image: url("../image/background-vertical.jpg");

  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;

  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;

  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;

  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;

  /* 背景画像が読み込まれる前に表示される背景のカラー */
  /*background-color: #464646;*/
  
  margin-bottom: 200px;
}

/* ヘッダー内容 */
/* thank you for comming部分 */
/*
h1{
  font-size: 60px;
  font-family: "Monotype Corsiva";
  text-align: center;
  color: white;
}*/
h1{
  font-size: 70px;
  font-family: 'Italianno';
  text-align: center;
  color: white;
  margin: 4% 0px;
}


#name{
  text-align: center;
  color: white;/*文字は白に*/
  margin: 0 auto;
}

#day{
  text-align: center;
  color: white;/*文字は白に*/
  margin: 0 auto;
}

/* メインコンテンツ */
h2{
  font-size: 30px;
  /*font-family: "Monotype Corsiva";*/
  font-family: 'Bad Script', cursive;
  text-align: center;
  margin: 3% 0;
  color: white;/*文字は白に*/
}

#contents{
  text-align: center;
  padding: 0.5em 1em;
  /* margin: 2em 0; */
  color: #2c2c2f;
  background: white;/*背景色*/
  /*opacity: 0.5;*/
  background: rgba(255,255,255,0.5);				/* rgba(red, green ,blue, opacity) */
  
  margin-bottom: 5%;		/* テスト用 */
}

/* メインコンテンツ内容（メッセージ文部分） */
#contents > p{
  animation-name: fadeInUp;						/* @keyframesのアニメーションと紐づける */
  /*animation-duration: .5s;*/					/* アニメーション一回分の時間の長さを指定する */
  animation-duration: 1s;							/* アニメーション一回分の時間の長さを指定する */
  animation-fill-mode: both;						/* アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用される */
  font-weight: 400;
  font-family: 'Raleway', sans-serif;
  /* color: rgba(0,0,0,1);*/						/* rgba(red, green ,blue, opacity) */
}


/* オプション機能 */
/* 動的に生成される文章のフェードアップ */
@keyframes fadeInUp {
  from {
    opacity: 0;										/* 要素の透明度を指定する 0.0（完全に透明） */
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;										/* 要素の透明度を指定する 1.0（完全に不透明） */
    -webkit-transform: none;
    transform: none;
  }
}

/* フォントの適用 */
@font-face {
	font-family: 'Bad Script';
	src: url(../BadScript-Regular.ttf);
}

@font-face {
	font-family: 'Italianno';
	src: url(../Italianno-Regular.ttf);
}

/* スマホ対応 */
@media only screen and (max-width: 750px) {
  body{
    background-image: url("../image/background-vertical.jpg");

    /* 画像を常に天地左右の中央に配置 */
    /* background-position: center center; */
    /* background-position: bottom; */
    height: 100vh;

    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;

    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;

    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;

    /* 背景画像が読み込まれる前に表示される背景のカラー */
    /*background-color: #464646;*/
  }

  h1{
    /* font-size: 30px; */
    font-size: 270%;
    font-family: Italianno;
    text-align: center;
    color: white;/*文字は白に*/
  }

  #name{
    text-align: center;
    color: white;/*文字は白に*/
    font-size: 13px;
    margin: 0 auto;
  }

  #day{
    text-align: center;
    color: white;/*文字は白に*/
    font-size: 13px;
    margin: 0 auto;
  }

  /* メインコンテンツ内容（メッセージ文部分） */
  #contents > p{
    font-size: 95%;
  }
}