@charset "UTF-8";
/* 見出し設定 */
DIV#contents h1 {
	color: #333;
	font-size: 12px;
	font-weight: bold;
	padding: 7px 10px;
}
DIV#contents #linefriend {
	width: 760px;
	margin: 0 auto;
}

/*--------------------------------------------------------------------------------
.top-area
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .top-area h2 {
	margin: 0 -100px;
}
DIV#contents #linefriend .top-area .line-area.flex-box {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 60px;
	margin-top: 50px;
}
DIV#contents #linefriend .top-area .line-area.flex-box .left-box .subtitle {
	background-color: #111;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1em;
	text-align: center;
	margin-top: 0;
	padding: 3px 0;
}
DIV#contents #linefriend .top-area .line-area.flex-box .left-box h3 {
	color: #06C755;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 36px !important;
	line-height: 1;
	margin-top: 13px;
}
DIV#contents #linefriend .top-area .line-area.flex-box .left-box h3 span {
	font-size: 36px !important;
	margin-top: 8px;
	text-align-last: justify;
}
DIV#contents #linefriend .top-area .line-area.flex-box .left-box p {
	font-size: 12px;
	line-height: 1.5em;
	margin-top: 7px;
}
DIV#contents #linefriend .top-area .read {
	border-top: 1px solid #ccc;
	margin-top: 50px;
	padding-top: 100px;
}
DIV#contents #linefriend .top-area .read p {
	text-align: center;
	font-size: 24px;
	line-height: 1.7;
}

/*--------------------------------------------------------------------------------
.info ~ .campaign 共通設定
--------------------------------------------------------------------------------*/
/*小見出し共通設定*/
DIV#contents #linefriend h3 {
	font-family: "Helvetica", "Arial", "sans-serif";
	font-size: 54px !important;
	font-weight: bold;
	line-height: 1;
}
DIV#contents #linefriend h3 span {
	position: relative;
	display: block;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 24px;
	font-weight: bold;
	margin-top: 6px;	
}
DIV#contents #linefriend h3 span::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	width: -webkit-fill-available;
	height: 2px;
	margin-left: 1em;
}

/* [.info/.benefit]　flex-box関連　共通設定 */
DIV#contents #linefriend .info .flex-box,
DIV#contents #linefriend .benefit .flex-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 10;
	margin-top: -56px;
}
DIV#contents #linefriend .info .flex-box .contents-text,
DIV#contents #linefriend .benefit .flex-box .contents-text {
	width: 380px;
}
DIV#contents #linefriend .info .flex-box .contents-text p,
DIV#contents #linefriend .benefit .flex-box .contents-text p {
	margin: 0;
}
DIV#contents #linefriend .info .flex-box figure,
DIV#contents #linefriend .benefit .flex-box figure {
	width: 350px;
	margin: 0;
}

/*.contents-text*/
DIV#contents #linefriend .contents-text p {
	font-size: 20px;
	line-height: 1.7em;
	margin-top: 30px;
}
DIV#contents #linefriend .info figure,
DIV#contents #linefriend .benefit figure,
DIV#contents #linefriend .receive figure,
DIV#contents #linefriend .campaign figure {
	margin-top: 50px;
}
DIV#contents #linefriend .receive figure,
DIV#contents #linefriend .campaign figure {
	padding: 0 20px;
}
DIV#contents #linefriend .lineup {
	position: relative;
	margin-top: 50px;
	padding: 0 50px 0 90px;
}
DIV#contents #linefriend .lineup::before {
	content: "";
	position: absolute;
	top: 86px;
	left: 48px;
	height: calc(100% - 86px);
	width: 2px;
	background: #333;
}
DIV#contents #linefriend .lineup::after {
	content: "And More……";
	position: absolute;
	bottom: -53px;
	right: 50px;
	font-family: "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: bold;
	color: #333;
}
DIV#contents #linefriend .lineup h4 {
	position: absolute;
	font-family: "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: normal;
	line-height: 1;
	transform: rotate(90deg);
	transform-origin: 0 100%;
	top: -12px;
	left: 40px;
}
DIV#contents #linefriend .lineup ul li {
	margin-top: 24px;
}
DIV#contents #linefriend .lineup ul li:first-of-type {
	margin-top: 0;
}


/*--------------------------------------------------------------------------------
.info
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .info {
	margin-top: 100px;
	padding-bottom: 45px;
}

/* 文字色まとめ */
DIV#contents #linefriend .info h3 span,
DIV#contents #linefriend .info .lineup::after,
DIV#contents #linefriend .info .lineup h4,
DIV#contents #linefriend .info .lineup ul li {
	color: #C706C7;
}

/* 背景色まとめ */
DIV#contents #linefriend .info h3 span::after,
DIV#contents #linefriend .info .lineup::before {
	background-color: #C70FC7;
}

DIV#contents #linefriend .info h3 {
	color: rgba(199,6,199,.2)
}
DIV#contents #linefriend .info .lineup ul li {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4em;
}

/*--------------------------------------------------------------------------------
.benefit
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .benefit {
	margin-top: 100px;
	padding-bottom: 45px;
}

/* 文字色まとめ */
DIV#contents #linefriend .benefit h3 span,
DIV#contents #linefriend .benefit .lineup::after,
DIV#contents #linefriend .benefit .lineup h4,
DIV#contents #linefriend .benefit .lineup ul li p.subtitle {
	color: #06C7B8;
}
/* 背景色まとめ */
DIV#contents #linefriend .benefit h3 span::after,
DIV#contents #linefriend .benefit .lineup::before {
	background-color: #06C7B8;
}
DIV#contents #linefriend .benefit h3 {
	color: rgba(6,199,184,.2)
}
DIV#contents #linefriend .benefit .lineup ul li p.subtitle {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4em;
}
DIV#contents #linefriend .benefit .lineup ul li p {
	font-size: 18px;
	line-height: 1.7em;
	margin-top: 18px;
}

/*--------------------------------------------------------------------------------
.receive
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .receive {
	margin-top: 100px;
}
/* 小見出し個別設定 */
DIV#contents #linefriend .receive h3 {
	color: rgba(51,6,199,.2)
}
DIV#contents #linefriend .receive h3 span {
	color: #3306C7;
}
DIV#contents #linefriend .receive h3 span::after {
	background-color: #3306C7;
}
DIV#contents #linefriend .receive figure {
	width: 660px;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------------------------
.campaign
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .campaign {
	margin-top: 100px;
}
/* 小見出し個別設定 */
DIV#contents #linefriend .campaign h3 {
	color: rgba(199,177,6,.2)
}
DIV#contents #linefriend .campaign h3 span {
	color: #C7B106;
}
DIV#contents #linefriend .campaign h3 span::after {
	background-color: #C7B106;
}
DIV#contents #linefriend .campaign figure {
	width: 540px;
	margin-left: auto;
	margin-right: auto;
}
DIV#contents #linefriend .campaign .link-text {
	text-align: right;
	margin-top: 50px;
	padding-right: calc(50px + 10px);
}
DIV#contents #linefriend .campaign .link-text a {
	position: relative;
	color: #C7B106;
	font-size: 20px;
	font-weight: bold;
}
DIV#contents #linefriend .campaign .link-text a::after {
	content: "";
	position: absolute;
	right: -60px;
	top: calc(50% - 5.655px);
	height: 11.31px;
	width: 50px;
	background-image: url(/contents/special_contents/linefriend/img/arrow.svg);
}


/*--------------------------------------------------------------------------------
.bottom-area
--------------------------------------------------------------------------------*/
DIV#contents #linefriend .bottom-area {
	background-color: #EEEEEE;
	margin-top: 100px;
	padding: 50px;
}
DIV#contents #linefriend .bottom-area .line-area {
	text-align: center;
}
DIV#contents #linefriend .bottom-area .line-area .subtitle {
	font-size: 20px;
	line-height: 1em;
	margin-top: 0;
}
DIV#contents #linefriend .bottom-area .line-area h3 {
	display: inline-block;
}
DIV#contents #linefriend .bottom-area .line-area h3,
DIV#contents #linefriend .bottom-area .line-area h3 span {
	text-align-last: justify;
	color: #06C755;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 36px!important;
	line-height: 1em;
	margin-top: 18px;
}
DIV#contents #linefriend .bottom-area .line-area figure {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 182px;
	height: 182px;
	margin: 25px auto 0;
}
DIV#contents #linefriend .bottom-area .line-area p {
	font-size: 18px;
	line-height: 1.7em;
	margin-top: 25px;
}
DIV#contents #linefriend .bottom-area .notes-box {
	background-color: #fff;
	margin-top: 25px;
	padding: 20px 50px;
}
DIV#contents #linefriend .bottom-area .notes-box p {
	color: #06C755;
}
DIV#contents #linefriend .bottom-area .notes-box p.subtitle {
	text-align: center;
	font-size: 16px;
	line-height: 1em;
}
DIV#contents #linefriend .bottom-area .notes-box p.notes {
	text-align: left;
	font-size: 12px;
	line-height: 1.6em;
	margin-top: 12px;
}