@charset "UTF-8";

/*************************
font_import
*************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/*************************
reset style　＆　CMS unique style
*************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body.noscroll{overflow:hidden}.iframe{width:100%;height:100%}.overlay{position:fixed;top:0;left:0;height:100vh;width:100%}.overlay.hidden{top:-100vh}#header.fixed{top:0;height:48px;position:sticky;box-shadow:0 2px 10px #2121211a}#header,#footer{overflow:hidden}@media screen and (min-width: 768px){#header.fixed{height:64px}}

*, *::before, *::after { box-sizing: border-box; }

#header {
	position: relative;
	z-index: 100;
}

#drawer.overlay,
#search-modal.overlay { z-index: 101; }

#drawer.overlay.hidden,
#search-modal.overlay.hidden {
	opacity: 0;
	z-index: 0;
}

/* 以下へページ固有のスタイル記述していく */

/*************************
custom properties
*************************/

#LP.pointup {
	--lp-color_black: #333;
	--lp-color_white: #fff;
	--lp-color_dark-blue: #0168b7;
	--lp-color_light-blue: #d0f0ff;
}

/*************************
main
SP_layout（980px未満）
*************************/

#LP.pointup.pointup {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 auto;
	width: 100%;
}
#LP.pointup.is_end { pointer-events: none; }

#LP.pointup img {
	user-select: none;
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

#LP.pointup a {
	display: block;
	transition: filter .4s;
}
#LP.pointup a:hover { filter: brightness(.7); }

#LP.pointup time,
#LP.pointup span {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

#LP.pointup .device_sp { display: block; }
#LP.pointup .device_pc { display: none; }

/* キービジュアル */
#LP.pointup .kvArea { background-color: var(--lp-color_dark-blue); }

#LP.pointup .kvArea__inner { padding: 3%; }

#LP.pointup .kvArea,
#LP.pointup .kvArea__text {
	margin: 0 auto;
	width: 100%;
}

/* メインコンテンツ */
#LP.pointup .mainArea { background-color: var(--lp-color_light-blue); }

#LP.pointup .mainArea__inner {
	width: 92%;
	margin: 0 auto;
	padding: 6% 0 10%;
}

#LP.pointup .mainArea__contents .main_header-h1 {
	width: 85%;
	margin: 0 auto 4%;
}

#LP.pointup .mainArea__contents-block#TRANSITION {
	margin: 0 auto;
	padding-bottom: 4%;
	width: 100%;
}

#LP.pointup .btn_flex2col .btn_ecLink {
	margin-bottom: 5%;
}

#LP.pointup .btn_flex2col .btn_ecLink:last-child {
	margin-bottom: 0;
}

#LP.pointup .mainArea__transition-link {
	margin-bottom: 5%;
	width: 100%;
}

#LP.pointup .mainArea__transition-anchor {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	text-align: center;
	width: 100%;
}
#LP.pointup .mainArea__transition-anchor > li {
	cursor: pointer;
	transition: .4s filter;
	width: 46.5%;
}
#LP.pointup .mainArea__transition-anchor > li:hover { filter: brightness(.7); }

#LP.pointup .mainArea__discription > li {
	padding: 4% 2% 6%;
	background-color: var(--lp-color_white);
}

#LP.pointup .mainArea__discription > li:nth-of-type(2) {
	margin-bottom: 6%;
}

#LP.pointup .mainArea__discription-annotation { margin-top: 3%; }

#LP.pointup .mainArea__discription-annotation > li {
	font-size: 2.4vw;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
	padding-left: 1em;
}
#LP.pointup .mainArea__discription-annotation > li::before {
    content: '※';
    display: inline-block;
    text-align: center;
    margin-left: -1em;
    width: 1em;
}
#LP.pointup .mainArea__discription-annotation > li:not(:last-of-type) { margin-bottom: .25em; }

/* おすすめカテゴリー */
#LP.pointup .mainArea__recommend {
	padding: 4% 2% 6%;
	background-color: var(--lp-color_white);
}

#LP.pointup .mainArea__recommend-header { margin-bottom: 4%; }

#LP.pointup .mainArea__recommend-category:first-child { margin-bottom: 10%; }

#LP.pointup .mainArea__recommend-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
#LP.pointup .mainArea__recommend-list a {
    color: var(--lp-color_black);
    text-decoration: none;
}

#LP.pointup .mainArea__recommend-list > li { flex-basis: 40%; }

#LP.pointup .mainArea__recommend-list > li:nth-child(odd) { margin-right: 4%; }

#LP.pointup .mainArea__recommend-list > li:not(:nth-last-of-type(-n+3)) { margin-bottom: 4%; }

#LP.pointup .mainArea__recommend-caption {
	text-align: center;
	margin-top: 3%;
	font-size: 3.5vw;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .05em;
}

#LP.pointup .mainArea__contents-block:not(:last-of-type) { margin-bottom: 6%; }

#LP.pointup .mainArea__contents-block#ECLINK {
	width: 90%;
	margin: 0 auto;
	padding-top: 2%;
}

#LP.pointup .mainArea__contents-block#ECLINK .btn_regist {
	margin-bottom: 5%;
}

/* 期間終了後表示 */
#LP.pointup .mainArea__campaignEnd {
	background-color: var(--lp-color_white);
	border-radius: 5px;
	color: var(--lp-color_black);
	display: none;
	font-size: 4.3vw;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 6%;
	padding: 3% 0;
	width: 100%;
}
#LP.pointup .mainArea__campaignEnd span { font-size: 70%; font-weight: 500;}

/*************************
main
PC_layout（980px以上）
*************************/

@media screen and (min-width: 980px) {

	#LP.pointup .device_sp { display: none; }
	#LP.pointup .device_pc { display: block; }

	#LP.pointup img {
		margin: 0 auto;
		width: fit-content;
	}

	/* キービジュアル */
	#LP.pointup .kvArea__inner { padding: 0; }

	#LP.pointup .kvArea__text {
		padding: 34px 0;
		width: fit-content;
	}

	/* メインコンテンツ */
	#LP.pointup .mainArea__inner {
		width: 980px;
		padding: 40px 0 80px;
	}

	#LP.pointup .mainArea__contents-block:not(:last-of-type) { margin-bottom: 36px; }

	#LP.pointup .mainArea__contents .main_header-h1 {
		width: fit-content;
		margin: 0 auto 24px;
	}

	#LP.pointup .mainArea__contents-block#TRANSITION {
		padding-bottom: 48px;
	}

	/* PCボタン横並び */
	#LP.pointup .btn_flex2col {
		display: flex;
		justify-content: space-between;
	}

	#LP.pointup .btn_flex2col .btn_ecLink {
		margin-bottom: 0;
	}

	#LP.pointup .mainArea__transition-link {
		width: fit-content;
		margin-bottom: 0;
	}

	#LP.pointup .mainArea__transition-anchor > li { width: fit-content; }

	/* キャンペーン概要 */
	#LP.pointup .mainArea__discription > li {
		padding: 30px 20px;
	}

	#LP.pointup .mainArea__discription-annotation {
		margin: 16px auto 0;
		width: 100%;
	}

	#LP.pointup .mainArea__discription-annotation > li { font-size: 13px; }

	/* PC クレジット機能有り・無し 横並び */
	#LP.pointup .mainArea__discription.flex_2col {
		display: flex;
		justify-content: space-between;
		margin-bottom: 28px;
	}

	#LP.pointup .mainArea__discription.flex_2col li {
		margin-bottom: 0;
		padding: 20px 22px 28px;
	}

	#LP.pointup .mainArea__discription-2col {
		display: flex;
		justify-content: space-between;
	}

	/* おすすめカテゴリー */
	#LP.pointup .mainArea__recommend {
		padding: 25px 20px 50px;
	}

	#LP.pointup .mainArea__recommend-header {
		margin-bottom: 30px;
		width: fit-content;
	}

	#LP.pointup .mainArea__recommend-category:first-child { margin-bottom: 60px; }

	#LP.pointup .mainArea__recommend-list > li {
		flex-basis: 180px;
		margin-right: 30px;
	}

	#LP.pointup .mainArea__recommend-list > li:not(:nth-last-of-type(-n+3)) { margin-bottom: 0; }

	#LP.pointup .mainArea__recommend-list > li:nth-child(odd) {
		margin-right: 30px;
	}

	#LP.pointup .mainArea__recommend-list > li:last-child {
		margin-right: 0;
	}

	#LP.pointup .mainArea__recommend-caption {
		font-size: 18px;
		margin-top: 5px;
	}

	#LP.pointup .mainArea__contents-block#ECLINK {
		width: 980px;
		margin-top: 48px;
		padding-top: 0;
	}

	#LP.pointup .mainArea__contents-block#ECLINK .btn_regist {
		margin-bottom: 28px;
	}

	/* 期間終了後表示 */
	#LP.pointup .mainArea__campaignEnd {
		width: 980px;
		font-size: 32px;
		margin-bottom: 40px;
		padding: 24px 0;
	}
}