@charset "UTF-8";
/********************************************************************
	このcssは主に下記のcssがあります。
　　・margin、flexなどの共通指定
　　・wrap（内側サイズ指定/横幅左右の余白を空ける用）
　　・ページ全体の指定（横幅や背景色）
　　・リンク、リスト、画像、spanなどの個別色指定
　　・line-heightのリセットcss
　　
　　・グラデーション+ドット背景画像（topとcontents共通箇所）

	topやcontentsについての個別指定は別のcssとなります。
********************************************************************/

/********************************************************************
	共通
********************************************************************/
/* margin-bottom */
.u-mb--5    { margin-bottom: 5px !important; }
.u-mb--10   { margin-bottom: 10px !important; }
.u-mb--15   { margin-bottom: 15px !important; }
.u-mb--20   { margin-bottom: 20px !important; }
.u-mb--25   { margin-bottom: 25px !important; }
.u-mb--30   { margin-bottom: 30px !important; }
.u-mb--35   { margin-bottom: 35px !important; }
.u-mb--40   { margin-bottom: 40px !important; }
.u-mb--45   { margin-bottom: 45px !important; }
.u-mb--50   { margin-bottom: 50px !important; }
.u-mb--60   { margin-bottom: 60px !important; }
.u-mb--65   { margin-bottom: 65px !important; }
.u-mb--70   { margin-bottom: 70px !important; }
.u-mb--75   { margin-bottom: 75px !important; }
.u-mb--80   { margin-bottom: 80px !important; }
.u-mb--90   { margin-bottom: 90px !important; }
.u-mb--100  { margin-bottom: 100px !important; }
.u-mb--110  { margin-bottom: 110px !important; }
.u-mb--120  { margin-bottom: 120px !important; }
.u-mb--130  { margin-bottom: 130px !important; }
.u-mb--150  { margin-bottom: 150px !important; }
.u-mb--160  { margin-bottom: 160px !important; }
.u-mb--180  { margin-bottom: 180px !important; }
.u-mb--200  { margin-bottom: 200px !important; }
.u-mb--210  { margin-bottom: 210px !important; }
.u-mb--220  { margin-bottom: 220px !important; }

/* margin-bottom マイナス*/
.u-mb--minus10 { margin-bottom: -10px !important; }
.u-mb--minus15 { margin-bottom: -15px !important; }
.u-mb--minus20 { margin-bottom: -20px !important; }
.u-mb--minus25 { margin-bottom: -25px !important; }
.u-mb--minus30 { margin-bottom: -30px !important; }
.u-mb--minus35 { margin-bottom: -35px !important; }
.u-mb--minus40 { margin-bottom: -40px !important; }

/* margin-top */
.u-mt--20   { margin-top: 20px !important; }
.u-mt--25   { margin-top: 25px !important; }
.u-mt--35   { margin-top: 35px !important; }
.u-mt--50   { margin-top: 50px !important; }
.u-mt--80   { margin-top: 80px !important; }

/* margin-right */
.u-mr--5   { margin-right: 5px !important; }
.u-mr--10   { margin-right: 10px !important; }
.u-mr--12   { margin-right: 12px !important; }
.u-mr--15   { margin-right: 15px !important; }
.u-mr--20   { margin-right: 20px !important; }
.u-mr--25   { margin-right: 25px !important; }
.u-mr--30   { margin-right: 30px !important; }

/* margin-left */
.u-ml--10   { margin-left: 10px !important; }
.u-ml--15   { margin-left: 15px !important; }
.u-ml--80   { margin-left: 80px !important; }

/* padding-top */
.u-pt--10   { padding-top: 10px !important; }
.u-pt--20   { padding-top: 20px !important; }
.u-pt--30   { padding-top: 30px !important; }

/* padding-bottom: */
.u-pb--20   { padding-bottom: 20px !important; }
.u-pb--30   { padding-bottom: 30px !important; }

/* Width */
.u-width--8   { width: 8% !important; }
.u-width--10  { width: 10% !important; }
.u-width--15  { width: 15% !important; }
.u-width--16  { width: 16% !important; }
.u-width--17  { width: 17% !important; }
.u-width--18  { width: 18% !important; }
.u-width--19  { width: 19% !important; }
.u-width--20  { width: 20% !important; }
.u-width--21  { width: 21% !important; }
.u-width--22  { width: 22% !important; }
.u-width--23  { width: 23% !important; }
.u-width--24  { width: 24% !important; }
.u-width--25  { width: 25% !important; }
.u-width--26  { width: 26% !important; }
.u-width--27  { width: 27% !important; }
.u-width--28  { width: 28% !important; }
.u-width--29  { width: 29% !important; }
.u-width--30  { width: 30% !important; }
.u-width--31  { width: 31% !important; }
.u-width--32  { width: 32% !important; }
.u-width--33  { width: 33% !important; }
.u-width--34  { width: 34% !important; }
.u-width--35  { width: 35% !important; }
.u-width--36  { width: 36% !important; }
.u-width--37  { width: 37% !important; }
.u-width--38  { width: 38% !important; }
.u-width--39  { width: 39% !important; }
.u-width--40  { width: 40% !important; }
.u-width--41  { width: 41% !important; }
.u-width--42  { width: 42% !important; }
.u-width--43  { width: 43% !important; }
.u-width--44  { width: 44% !important; }
.u-width--45  { width: 45% !important; }
.u-width--46  { width: 46% !important; }
.u-width--47  { width: 47% !important; }
.u-width--48  { width: 48% !important; }
.u-width--49  { width: 49% !important; }
.u-width--50  { width: 50% !important; }
.u-width--51  { width: 51% !important; }
.u-width--52  { width: 52% !important; }
.u-width--53  { width: 53% !important; }
.u-width--54  { width: 54% !important; }
.u-width--55  { width: 55% !important; }
.u-width--56  { width: 56% !important; }
.u-width--57  { width: 57% !important; }
.u-width--58  { width: 58% !important; }
.u-width--59  { width: 59% !important; }
.u-width--60  { width: 60% !important; }
.u-width--65  { width: 65% !important; }
.u-width--70  { width: 70% !important; }
.u-width--75  { width: 75% !important; }
.u-width--80  { width: 80% !important; }
.u-width--81  { width: 81% !important; }
.u-width--82  { width: 82% !important; }
.u-width--83  { width: 83% !important; }
.u-width--84  { width: 84% !important; }
.u-width--85  { width: 85% !important; }
.u-width--88  { width: 88% !important; }
.u-width--90  { width: 90% !important; }
.u-width--100 { width: 100% !important; }

/* text-align */
.u-text-align--left   { text-align: left !important; }
.u-text-align--right  { text-align: right !important; }
.u-text-align--center { text-align: center !important; }

/* img　画像位置 */
.u-img-align--right img { margin: 0 0 0 auto !important; }/*右寄せ*/
.u-img-align--left img  { margin: auto 0 0 0 !important; }/*左寄せ*/

/* Position */
.u-position--relative { position: relative; }
.u-position--absolute { position: absolute; }

/* Flex　横並び */
.u-flex { display: flex; }

/* Flex Justify 並べ方*/
.u-flex-justify--space-between { justify-content: space-between; }
.u-flex-justify--space-around  { justify-content: space-around; }
.u-flex-justify--start         { justify-content: flex-start; }
.u-flex-justify--flex-end      { justify-content: flex-end; }
.u-flex-justify--space-evenly  { justify-content: space-evenly; }
.u-flex-justify--center        { justify-content: center; }

/* Flex Align 縦横中央*/
.u-flex-align--center    { align-items: center; }
.u-flex-align--flex-end  { align-items: flex-end; }

/* Flex Wrap and Direction */
.u-flex--wrap         { flex-wrap: wrap; }/*折り返す*/
.u-flex--row-reverse  { flex-direction: row-reverse; }/*位置を逆にする*/
.u-flex--column       { flex-direction: column; }/*縦に並べる*/

/* Flex Grow/Shrink */
.u-flex-shrink--0     { flex-shrink: 0; }/*スペースが足りないとき、どれだけ縮むか*/
.u-flex-grow--1       { flex-grow: 1; }/*余ったスペースをどれだけ広がって使うか*/
.u-margin-top--auto   { margin-top: auto; }/*上の余白を自動で広げて、要素を下に寄せる*/

/* aos用　範囲外を非表示にする */
.u-overflow--hidden   { overflow: hidden; }

/********************************************************************
	ページ全体
********************************************************************/
/*line-heightリセット*/
#emojacket p,#emojacket ,#emojacket ul li,#emojacket h1,#emojacket h2,#emojacket h3,#emojacket h4,#emojacket h5,#emojacket h6,#emojacket h7{
	line-height: 1;
}

/*buttonリセット*/
#emojacket button{padding: 0; background: none; border: none;}

/*ページ全体の指定*/
#emojacket{
	margin: 0 auto;/*中央揃え*/
	max-width: 770px;/*最大横幅*/
	width: 100%;
	background: #fff;/*背景色*/
	text-align: center;/*テキスト中央揃え*/
}

/*ページの内側共通*/
#emojacket .wrap{
	margin: 0 auto;/*中央揃え*/
	padding: 30px 0 80px 0;/*要素の上下余白*/
	max-width: 770px;/*最大横幅*/
	width: 630px;
	box-sizing: border-box;
}

/*ページ内の文章指定*/
#emojacket p{
    text-align: center;/*中央揃え*/
    color: #201613;/*文字色*/
	font-size: 0.75rem;
	letter-spacing:  0em;/*文字間*/
	line-height: 1.5;/*行間*/
}

#emojacket img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
	height: auto;
}

#emojacket .img_width100 img{width: 100%;}/*画像の横幅を100%にする*/
#emojacket .img_auto img{width: auto!important;}/*画像の横幅を自動にする*/

/*色*/
#emojacket .orange{color: #f19007!important;}
#emojacket .red{color: #f60e39!important;}
#emojacket .wine-red{color: #c93b66!important;}
#emojacket .blue{color: #0fc3c8!important;}
#emojacket .light-blue{color: #0fc3c8!important;}
#emojacket .green{color: #00a1be!important;}
#emojacket .pink{color: #ee008c!important;}
#emojacket .white{color: #fff!important;}
#emojacket .black{color: #00000a!important;}

/*太字*/
#emojacket .bold{font-weight: bold;}

/*リスト*/
#emojacket ul{
	list-style: none;
}

#emojacket ul li{
	color: #24281f;
	text-align: center;/*中央揃え*/
    font-size: 1.8rem;/*フォントサイズ*/
	letter-spacing:  0em;/*文字間*/
	line-height: 2.8rem;/*行間*/
}

 /********************************************************************
	リンク
********************************************************************/
#emojacket {
	color: #1e1e1e;
}

#emojacket :hover{text-decoration: none;}

 /********************************************************************
	背景画像共通
********************************************************************/
/*グラデーション*/
#emojacket .common__bg{
	position: relative;/*背景画像を入れるため、親要素に基準位置の指定をする*/
	background: linear-gradient(to bottom, #a2d4e5, #e8d99b); /*グラデーション*/
	z-index: 0;
}

/*ドット画像*/
#emojacket .common__bg::after {
	content: "";/*疑似要素を生成するために必要*/
	position: absolute;/*親要素の基準位置から開始する*/
	inset: 0;/*四辺（top, right, bottom, left）をすべて0に設定する*/
	background-image: url("/auto/images/fix/feature/251019_emojacket/lp/pcc/common__bg-dot.png");
	background-repeat: repeat;
	z-index: 1;
	pointer-events: none;/*マウス操作を無効*/
}