@charset "UTF-8";
/********************************************************************
	このcssはtopの指定用です。
	・top全体
	・キャンペーン期間
	・リード文
********************************************************************/

/********************************************************************
	top全体、キャンペーン文言、キャンペーン期間
********************************************************************/
/*キャンペーン文言（画像）*/
#emojacket #top .top__campaign{
	background: url(/auto/images/fix/feature/251019_emojacket/lp/pcc/common__bg-lattice.png) repeat;
}

/*キャンペーン期間*/
#emojacket #top .top__can-time{
	padding: 10px 10px 10px 10px;
	width: 100%;
	font-size: 1.666rem;
	color: #fff;
	text-align: center;
	line-height: 1.5rem;
	letter-spacing: 0.333rem;
	background: #59608b;
}

/********************************************************************
	リード文-背景
********************************************************************/
/*グラデーションとドット背景はcommon.cssに記載（コンテンツと共通のため）*/

/*上下余白*/
#emojacket #top .top__lead{
	padding: 120px 0 100px 0;
}

/*足跡画像*/
#emojacket #top .top__lead::before {
	content: "";/*疑似要素を生成するために必要*/
	position: absolute;/*親要素の基準位置から開始する*/
	bottom: 0;/*表示位置　下から0px*/
	right: 0;/*表示位置　右から0px*/
	width: 100%;
	aspect-ratio: 688 / 252; /*画像の比率を指定*/
	background-image: url("/auto/images/fix/feature/251019_emojacket/lp/pcc/top__bg-footprints.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: 2;
	pointer-events: none;/*マウス操作を無効*/
}

/********************************************************************
	リード文-白box内
********************************************************************/
/*リード文の白box*/
#emojacket #top .top__lead .top__lead-box{
	max-width: 630px;/*このサイズを超えない*/
	margin: 0 auto;
	padding: 70px 50px 50px 50px;
	background-color: rgba(255, 255, 255, 0.6); /* 白で60%透過 */
	border: 5px solid #fff; /* 白の境界線 */
	box-sizing: border-box;/*白の境界線を含めた横幅にする*/
	position: relative;/*表示位置の指定*/
	z-index: 3;
}

/*見出し*/
#emojacket #top .top__lead .top__lead-box h2{
	position: absolute;
	top: -17%;
	left: 0;
	right: 0;
}