@charset "utf-8";

/* =================================================================================================
   JALカード／LP
   https://www.jalcard.co.jp/
   Copyright (C) JALCARD INC. ALL RIGHTS RESERVED.
================================================================================================= */

/* -----------------------------------------------------------------------
　リセット
-------------------------------------------------------------------------- */
body{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#mr a{
	text-decoration:underline;
	outline:0;
}
#mr a:hover{
	text-decoration:none;
}
#mr,#mr h1,#mr h2,#mr h3,#mr h4,#mr h5,#mr ul,#mr li,#mr dl,#mr dt,#mr dd,#mr p,#mr strong,#mr address{
	margin:0;
	padding:0;
}
#mr ul,#mr li{
	list-style:none;
}
#mr address{
	font-style:normal;
}
#mr .clearfix {
	display: inline-block;
}
/* Exclude Mac IE \*/
#mr .clearfix {
	display: block;
}
/**/
#mr .clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#mr img{
	border:0;
	-ms-interpolation-mode:bicubic;
}


/* ----------------------------------------------------------------------------
　スクロール禁止
---------------------------------------------------------------------------- */
html{
	overflow-y:hidden;
}


/* ----------------------------------------------------------------------------
　インターフェース調整
---------------------------------------------------------------------------- */
.pageTtl_jmb{
	display: none;
}
.breadCrumbs{
	position: relative;
	z-index: 2;
}
footer{
	position: relative;
	z-index: 2;
}
.c-pagetop{
	position: relative;
	z-index: 3;
}


/* ----------------------------------------------------------------------------
　フォントサイズ
---------------------------------------------------------------------------- */
#mr{
	overflow: hidden;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

/* ----------------------------------------------------------------------------
　フォントファミリー
---------------------------------------------------------------------------- */
#mr{
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ",
Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
}


/* ----------------------------------------------------------------------------
　右ナビ
---------------------------------------------------------------------------- */
#navi{
	position:fixed;
	top:0px;
	right:50px;
	height:100%;

	display:flex;
	align-items : center;
	z-index: 100;
	/*transition: 0.5s ease-in-out;*/
	opacity: 0;
	transform: translateX(100px);
}
#navi.show{
	opacity: 1;
	transform: translateX(0px);
}

#navi ul li{
	display:flex;
	align-items : center;
	justify-content : center;
}
#navi ul li:last-child{
	margin: 0 auto 0;
}
#navi ul li a{
	display:block;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content :center;
	align-items : center;
}
#navi ul li a span{
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 100px;
	background-color:#000;
	text-indent: -9999px;
	transition: 0.2s ease-in-out;
}

#navi ul li a:hover span,
#navi ul li.active a span{
	width:15px;
	height:15px;
	background-color: #e40001;
}


/* ----------------------------------------------------------------------------
　メインエリア
---------------------------------------------------------------------------- */
#main_area{
	background: url("../img/main_area_bg.jpg") center top no-repeat;
	background-size:cover;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
}
#main_area .inner{
	width:950px;
	/*min-height: 500px;*/
	min-height: 630px;
	margin:0 auto;
	position:relative;
	box-sizing:border-box;
}
#main_area .copy{
	position: absolute;
	top:170px;
	left: 0%;
	width: 100%;
	z-index: 2;
}
#main_area .copy .notice{
	border: 1px solid #c00;
	padding: 10px;
	margin: 20px auto 0;
	background: #fff;
	width: 80%;
	
}
#main_area h1{
	text-align:center;
	margin-bottom:5px;
}
#main_area .catch{
	text-align:center;
	font-size:16px;
	line-height: 120%;
	margin-bottom:20px;
}
#main_area .btn_login a{
	display: block;
	width: 300px;
	height: 60px;
	background: url("../img/main_area_btn_down.png") 0 0 no-repeat;
	background-color: #e50000;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 17px;
	list-style: 120%;
	text-decoration: none;
	box-sizing:border-box;
	padding-top: 16px;
	transition: 0.2s ease-in-out;
}
#main_area .btn_login a:hover{
	background-color: #ff1616;
}

#main_area .arrow{
	position: absolute;
	bottom: 30px;
	left: 0px;
	width: 100%;
	text-align: center;
	z-index: 2;
}
#main_area .arrow a{
	transition: 0.2s ease-in-out;
}
#main_area .arrow a:hover{
	opacity: 0.8;
}


#main_area .pc_space{
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 43%;
	width: 100%;
}


/* ----------------------------------------------------------------------------
　各BOX
---------------------------------------------------------------------------- */

/* 背景画像 */
#box1{
	background: url("../img/box1_bg.jpg") center center no-repeat;
	background-size:cover;
	background-attachment: fixed;

	position: relative;
	z-index: 3;
}
#box2{
	background: url("../img/box2_bg.jpg") center center no-repeat;
	background-size:cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}
#box3{
	background: url("../img/box3_bg.jpg") center center no-repeat;
	background-size:cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}
#box4{
	background: url("../img/box4_bg.jpg") center center no-repeat;
	background-size:cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}

.box{
	/*overflow: hidden;*/
}

.box .inner{
	width:950px;
	margin:0 auto;
	position:relative;
	box-sizing:border-box;
}


/* PC */
.box .hand{
	position:absolute;
	right:0px;
	bottom:0px;
	opacity: 0;
	z-index: 300;
	max-width: 720px;
}
.box .hand.active{
	animation: handAnime 0.8s cubic-bezier(.24,.42,0,.93) .0s forwards;
}
@keyframes handAnime{
	0%{
		opacity: 0;
		transform: translateY(100px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}
.box .hand_inner{
	position: relative;
	top: 0px;
}

.box .hand img{
	vertical-align: bottom;
	width: 100%;
}
.box .hand.fixed{
	position:fixed;
}


/* 吹き出し */
.box .balloon{
	width: 20.27027027%;
	position:absolute;
	right:-0.5%;
	top:-5.5%;
	z-index:2;
	opacity:0;
}
.box .balloon img{
	width: 100%;
}
.box .balloon.active{
	animation: balloonAnime 0.8s cubic-bezier(.24,.42,0,.93) .0s forwards;
}
@keyframes balloonAnime{
	0%{
		opacity: 0;
		transform: translateY(-150px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}


/* キャプチャ */
.box .capture{
	position:absolute;
	width: 72.7027027%;
	left:13.5%;
	top:3.8%;
	z-index:2;
	opacity:0;
}
.box .capture img{
	width: 100%;
}
.box .capture.active{
	animation: captureAnime 2s cubic-bezier(.24,.42,0,.93) .0s forwards;
}
@keyframes captureAnime{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


/* タイトルエリア */
.box .copy{
	position:absolute;
	left:0%;
	opacity:0;
	width: 950px;
	height: 250px;
	/*overflow: hidden;*/
}
.box .copy.active{
	animation: copyAnime 2.5s cubic-bezier(.24,.42,0,.93) 0.2s forwards;
}
@keyframes copyAnime{
	0%{
		opacity: 0;
		transform: translateY(30px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}

#mr .box .copy .pict{
	text-align: center;
	margin-bottom: 25px;
}

.box .copy .flex{
	display:flex;
}
.box .copy .no{
	height: 170px;
	position: relative;
	flex:0 0 215px;
}
.box .copy .no img{
	position: absolute;
	top: 0px;
	left: 0px;
}

.box .copy .copy_inner{
	flex:1 1 auto; /* 倍率 */
}

#mr .box .copy h2{
	font-size:40px;
	white-space: nowrap;
	letter-spacing: -1px;
	line-height:115%;
	font-weight: 700;
	margin-bottom:5px;
}
#mr .box .copy .lead{
	font-size:17px;
	letter-spacing: 0.5px;
	line-height:150%;
}


/* #box1個別スタイル */
#mr #box1 .copy h2{
	color: #e70000;
	margin-bottom:10px;
}
#mr #box1 .copy .lead{
	color: #000;
	line-height: 165%;
}

/* #box2個別スタイル */
#mr #box2 .copy h2{
	color: #fff;
	margin-bottom:10px;
}
#mr #box2 .copy .lead{
	color: #fff;
	line-height: 165%;
}

/* #box3個別スタイル */
#mr #box3 .copy .pict{
	margin-bottom: 15px;
}
#mr #box3 .copy h2{
	color: #e70000;
	margin-bottom:10px;
}
#mr #box3 .copy .lead{
	line-height: 165%;
	color: #000;
}

/* #box4個別スタイル */
#mr #box4 .copy .pict{
	margin-bottom: 15px;
}
#mr #box4 .copy h2{
	color: #fff;
	position: relative;
	top: -10px;
}
#mr #box4 .copy .lead{
	color: #fff;
	line-height: 140%;
	position: relative;
	top: -8px;
}



/* 便利な機能 */
#box4 .function{
	display:flex;
	justify-content : space-between;
	position:absolute;
	width:872px;
	/*bottom:18%;*/
	left:39px;
}
#box4 .function li{
	width:218px;
	text-align:center;
	position: relative;
}
#box4 .function li .photo{
	margin-bottom:1rem;
}
#box4 .function li .text{
	font-size: 18px;
	font-weight: 700;
	line-height: 130%;
	color:#fff;
}





/* ----------------------------------------------------------------------------
　ログイン
---------------------------------------------------------------------------- */
#login{
	position: relative;
	z-index: 2;
	background-color: #fff;
	padding-top: 50px;
}

#login .inner{
	width:950px;
	/*height: 950px;*/
	height: 400px;
	padding-top: 100px;
	box-sizing:border-box;
	margin:0 auto;
}

#login .title_area{
	text-align: center;
	margin-bottom: 80px;
}
#login .title_area h2{
	color: #e50001;
	font-size: 38px;
	font-weight: 700;
	list-style: 120%;
	margin-bottom: 20px;
}
#login .title_area .text{
	font-size:17px;
	letter-spacing: -1px;
	line-height: 130%;
	margin-bottom:18px;
}
#login .title_area .cap{
	font-size:13px;
	line-height: 130%;
	margin-bottom:10px;
}

#login .btn_login a{
	display: block;
	width: 300px;
	height: 60px;
	background: url("../img/main_area_btn_login.png") 0 0 no-repeat;
	background-color: #e50000;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 17px;
	list-style: 120%;
	text-decoration: none;
	box-sizing:border-box;
	padding-top: 16px;
	transition: 0.2s ease-in-out;
}
#login .btn_login a:hover{
	background-color: #ff1616;
}



#login .flex{
	display:flex;
	justify-content : space-between;
	position:relative;
}

#login .copy{
	width: 300px;
	text-align: center;
}

#login .card_box{
	border: 1px solid #e5e5e5;
	padding: 25px 10px 20px;
}
#login .card_box .card{
	text-align: center;
	margin-bottom: 20px;
}
#login .card_box .card img{
	width: 229px;
}
#login .card_box ul li{
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 15px;
	line-height: 160%;
	margin-bottom: 25px;
}
#login .card_box ul li:last-child{
	margin-bottom: 0px;
}



/* PC */
#login .image{
	width: 639px;
	position: absolute;
	top: 0px;
	right: -40px;
}

/* 1024px以下（ld） */
@media screen and (max-width:1100px){
#login .image{
	width: 550px;
	right: 20px;
}
}

#login .image .pc img{
	width: 100%;
}

#login .image video{
	width: 471px;
	height: 271px;
	position: absolute;
	top: 18px;
	left: 84px;
}
/* 1024px以下（ld） */
@media screen and (max-width:1100px){
#login .image video{
	width: 398px;
	height: 232px;
	top: 18px;
	left: 76px;
}