@charset "UTF-8";
* {
  font-family: Helvetica, sans-serif;
  font-family: Lato, 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.7em;
}
a:hover img {
  border: none;
  opacity: 0.9;
}

.wrap {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background: #f5f4ef;
}
.wrap img {
	width: 100%;
}

.card-area {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: calc(970 / 960 * 100%);
 background-size: cover;
 background-image: url(../img/app/card2.png);
 background-repeat: no-repeat;
}

.btn-1 {
	position: absolute;
	width: 40%;
	bottom: 10%;
	left: 8%;
}

.btn-2 {
	position: absolute;
	width: 40%;
	bottom: 10%;
	right: 8%;
}

.btn-1 img,.btn-2 img,.btn-3 img {
 width: 100%;
}

.card-area-2 {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: calc(3186 / 960 * 100%);
 background-size: cover;
 background-image: url(../img/app/card3.png);
 background-repeat: no-repeat;
}

.btn-3 {
	position: absolute;
	width: 54%;
	top: 12.6%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.precautions {
	padding: 0 3% 3%;
}

.date {
	font-size: 1.6rem;
	padding-bottom: 4%;
	text-align: center;
	font-weight: bold;
	color: #0059aa;
}

.subcaution {
	font-size: 1.2rem;
	padding-bottom: 4%;
}
.subcaution li {
	padding-left:1em;
	text-indent:-1em;
}
.ttl {
	padding-bottom: 3%;
}


/* PC */
@media screen and (min-width: 750px) {
 .wrap {
	 display: block;
	 width: 750px;
	 margin: 0 auto;
 }
 .date {
	 font-size: 3rem;
 }
 .subcaution {
	 font-size: 1.8rem;
 }
}