html {
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
}

body {
	margin: 0;
	 background-color: #fff;
}

a {
	text-decoration: none;
}

/******共通*****/
/*header*/

.header {
	text-align: center;
	width: 70%;
	margin: 8.5% auto 5.5% auto;	
}

/*footer*/

.footer ul {
	display: flex;
	justify-content: space-between;
	list-style: none;
	width: 80%;
	margin: 0 auto;
	padding: 0 0 6% 0;	
}

.footer ul li {
	width: 50%;
}

.footer ul li:last-child {
	font-size: 0.85rem;
	text-align: right;
}

.footer ul li a {
	color: #727171;
}

/*モーダル*/
/* モーダルを開くボタン */
.modal-open{
	text-decoration: underline;
	color: #727171;
}

/* モーダルと背景の指定 */
.modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,20%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
}

/* モーダルの擬似要素の指定 */
.modal:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
	opacity: 1;
	visibility: visible;
}

/* モーダル内側の指定 */
.modal-container{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 600px;
	width: 90%;
}

.mc{
	line-height: 0;
}


/******トップページ*****/
.index .txt {
	text-align: center;
	margin: 2.5rem 0 2.5rem 0;
}

.index .button {
	width: 70%;
	text-align: center;
	margin: 0 auto 1.8rem auto;
}

.index .button:last-child {
	margin-bottom: 4rem;
}


/******完了ページ*****/
.done .header {
	margin: 8.5% auto 0 auto;	
}

.done .img {
	width: 95%;
	margin: 0 auto;
	line-height: 0;
}

.done .share {
	position: relative;
	background: #ba1b2a;
	padding: 8% 0;
}

.done .share-title {
	width: 63%;
	margin: 0 auto;
	text-align: center;
	
}

.done .sns-icons {
}

.done .share ul {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 6% 0 0 0;
	padding: 0;
}

.done .share ul li {
	width: 16%;
	margin: 0 4%;
	text-align: center;
	font-size: 0.85rem;
}

.done .share ul li a {
	color: white;
	
}

.done .link {
	width: 67%;
	margin: 13% auto 8% auto;
}


/******Coming Soonページ*****/
body.soon {
	background: #ba1b2a;
}

.soon .header-wrap {
	background: white;
}

.soon .header {
	margin: 0 auto 0 auto;
	padding: 8.5% 0 5.5% 0;
}

.coming-soon {
	width: 80%;
	margin: 25% auto;
}

.soon .footer ul li {
    width: 100%;
    text-align: center;
    color: white;
}

/*デバイスが縦向きの場合*/
@media (orientation: portrait){
	.h-modal{
		opacity: 0;
		visibility: hidden;
	 }	
}
/*デバイスが横向きの場合*/
@media (orientation: landscape){
	.h-modal {
		opacity: 1;
		visibility: visible;
 	}
 	.h-modal .modal-content {
	 	background: white;
	 	padding: 50px;
	 	font-size: 1.5rem;
	 	font-weight: bold;
 	}
 	.modal.h-modal {
	 	background: rgba(0,0,0,70%);
 	}
}