@charset "Shift_JIS";

/* =================================================================================================
　セゾンポイントモール - スペシャルクーポン
　https://www.a-q-f.com/
　Copyright (C) CREDIT SAISON CO.,LTD. All Right Reserved.
================================================================================================= */


/* ----------------------------------------------------------------------------
　フォント
---------------------------------------------------------------------------- */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


body{margin:0;padding:0;}

/* ----------------------------------------------------------------------------
　clearfix
---------------------------------------------------------------------------- */
.clearfix{display: inline-block;}
/* Exclude Mac IE \*/
.clearfix{display: block;}
/**/
.clearfix:after{content:".";display:block;clear:both;height:0;visibility: hidden;}


/* ----------------------------------------------------------------------------
　下マージン
---------------------------------------------------------------------------- */
.sp_btm5{margin-bottom:5px !important;} .sp_btm10{margin-bottom:10px !important;} .sp_btm15{margin-bottom:15px !important;} .sp_btm20{margin-bottom:20px !important;} .sp_btm25{margin-bottom:25px !important;} .sp_btm30{margin-bottom:30px !important;} .sp_btm35{margin-bottom:35px !important;} .sp_btm40{margin-bottom:40px !important;} .sp_btm45{margin-bottom:45px !important;} .sp_btm50{margin-bottom:50px !important;} .sp_btm60{margin-bottom:60px !important;} .sp_btm70{margin-bottom:70px !important;}


/* ----------------------------------------------------------------------------
　ページスタイル
---------------------------------------------------------------------------- */

/* ページ背景色 */
.page{
	background-color:#fff;
}

/* リセット */
#coupon h1,#coupon h2,#coupon h3,#coupon h4,#coupon h5,#coupon ul,#coupon li,#coupon dl,#coupon dt,#coupon dd,#coupon p,#coupon a,#coupon strong,#coupon address{
	margin:0; padding:0; text-align:left;
}
#coupon ul,#coupon li{
	list-style:none; list-style-position:inside; text-indent:0em;
}

#coupon{
	background-color:#fff;
	min-width:950px;
	font-family: "Noto Sans Japanese","游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo ,"ＭＳ Ｐゴシック", Osaka, sans-serif;*/
	color:#000;
	padding-bottom:50px;
}


/* パンくずナビ */
#coupon #breadCrumb{
	width:950px;
	margin:15px auto 15px;
}
#coupon #breadCrumb li{
	display: inline;
	font-size:12px;
}
#coupon #breadCrumb li strong{
	font-size:12px;
}
#coupon #breadCrumb li a{
	color:#3399ff;
}
#coupon #breadCrumb li a:hover{
	text-decoration:underline !important;
}

/* リンク（デフォルトは下線無し） */
#coupon a{
	text-decoration:none;
	cursor:pointer;
}
#coupon a:hover{
	text-decoration:underline;
}


/* リキッド */
.liquid{
	margin:0 auto;
	max-width:1260px;
}


#new_header{
	margin-bottom:0px !important;
}
#wrapper{
	padding-top:0px !important;
}
#container,
#contentWrapper,
#mainContent{
	width:100% !important;
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
}


#coupon a{
	text-decoration:none !important;
}




/* ----------------------------------------------------------------------------
　メインエリア
---------------------------------------------------------------------------- */
#coupon h1{
	text-align:center;
	font-size:36px;
	font-weight:bold;
	color:#10218c;
	margin:50px 0 30px;
}
#coupon h1 span{
	background: url("/resources/common/pc/img/shopping/coupon/h1_icon.png") 0 0 no-repeat;
	display:inline-block;
	padding:10px 0 0 90px;
	height:74px;
	box-sizing:border-box;
}




/* ----------------------------------------------------------------------------
　クーポン一覧
---------------------------------------------------------------------------- */
#list{
	background-color:#edf7ff;
	padding:30px 0 12px;
}

#list .liquid2{
	width:1300px;
	margin:0 auto;
	box-sizing:border-box;
	position:relative;
	left:10px;
}

@media screen and (max-width: 1380px){
#list .liquid2{
	width:95%;
}
}

@media screen and (max-width: 1200px){
#list .liquid2{
	width:98%;
	left:1%;
}
}


#list .liquid_inner{
	display:flex;
	flex-wrap:wrap; /* 折り返す */	
}


/* BOX1件分 */
#list .box{
	background-color:#fff;
	border:1px solid #10218c;
	box-sizing:border-box;
	
	margin-right:1.5%;
	
	margin-bottom:20px;
	position:relative;
	border-radius: 4px;
}
#list .box .inner_link{
	display:block;
	padding:10px 15px 65px;
	text-decoration:none;
	color:#000;
}
#list .box .inner_link:hover{
	opacity:0.8;
}


#list .big_box{
	width:48.5%;
}
#list .small_box{
	width:23.5%;
}



/* BOX大 */
#list .big_box h2{
	font-size:30px;
	color:#0f218b;
	font-weight:bold;
	margin-bottom:10px;
	
	display:flex;
	align-items : center;
}
#list .big_box .box_flex{
	display:flex;
	justify-content : space-between;
	margin-bottom:10px;
}
#list .big_box .box_flex .photo{
	width:45.65217391%;
}
#list .big_box .box_flex .photo img{
	width:100%;
}
#list .big_box .box_flex .copy{
	width:51.5%;
}
#list .big_box .box_flex .copy .logo{
	margin-bottom:15px;
}
#list .big_box .box_flex .copy .box_title{
	font-size:22px;
	color:#0f218b;
	margin-bottom:15px;
}
#list .big_box .box_flex .copy .text{
	font-size:14px;
	line-height:160%;
}
#list .big_box .box_countdown{
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#de0000;
	padding:18px 15px;
	background-color:#fffcd7;
	margin-bottom:5px;
}



/* BOX小 */
#list .small_box h2{
	font-size:20px;
	color:#0f218b;
	font-weight:bold;
	margin-bottom:10px;
	text-align:center;
	
	display:flex;
	justify-content : center;
	align-items : center;
}
#list .small_box .photo{
	margin-bottom:10px;
}
#list .small_box .photo img{
	width:100%;
}
#list .small_box .box_title{
	font-size:14px;
	line-height:140%;
	color:#0f218b;
	margin-bottom:10px;
	text-align:center;
	
	display:flex;
	justify-content : center;
	align-items : center;
}
#list .small_box .small_countdown{
	text-align:center;
	font-size:14px;
	padding:7px 0;
	background-color:#fffcd7;
	margin-bottom:10px;
}


#list .box .btn{
	display:block;
	background: url("/resources/common/pc/img/shopping/coupon/arrow.png") right 10px top 50% no-repeat;
	background-color:#10218c;
	text-align:center;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	padding:13px 0;
	border-radius: 4px;
	position:absolute;
	width : calc(100% - 30px);
	left:15px;
	bottom:15px;
}




/* ----------------------------------------------------------------------------
　モーダル
---------------------------------------------------------------------------- */
#coupon .modal{
	display:none;
	width:700px;
	background-color:#fff;
	box-sizing:border-box;
	
	border-radius: 8px;
	
	position:fixed;
	top:0px;
	left:calc((100% - 700px) / 2);
	z-index:101;
	
	padding:15px;
}
#coupon .modal.active{
	display:block;
	animation: modalAnime 0.5s ease-in-out .0s forwards;
}

@keyframes modalAnime{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}


#coupon .modal .close{
	position:absolute;
	top:-55px;
	right:0px;
}
#coupon .modal .close a:hover{
	opacity:0.8;
}


#coupon .modal h3{
	font-size:30px;
	font-weight:bold;
	color:#0f218b;
	margin-bottom:15px;
}

#coupon .modal .modal_scroll{
	height: 550px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: auto;
	padding:0 10px;
}
#coupon .modal .modal_scroll::-webkit-scrollbar{
	width: 5px;
	background-color: #e0e2e4;
}
#coupon .modal .modal_scroll::-webkit-scrollbar-thumb{
	background-color: #10218c;
}



#coupon .modal .flex{
	display:flex;
	justify-content : space-between;
	margin-bottom:20px;
}
#coupon .modal .flex .photo{
	width:41.86413902%;
}
#coupon .modal .flex .photo img{
	width:100%;
}
#coupon .modal .flex .copy{
	width:56%;
}
#coupon .modal .flex .copy .logo_box{
	display:flex;
	align-items : center;
	margin-bottom:10px;
	color:#0f218b;
}
#coupon .modal .flex .copy .logo_box .logo{
	margin-right:10px;
}
#coupon .modal .flex .copy .logo_box .point_text{
	font-size:16px;
	margin-right:5px;
}
#coupon .modal .flex .copy .logo_box .api_displaypoint{
	font-size:16px;
	font-weight:bold;
	position:relative;
	top:-5px;
}
#coupon .modal .flex .copy .logo_box .api_displaypoint span{
	font-size:28px;
	position:relative;
	top:1px;
}
#coupon .modal .flex .copy .title{
	font-size:22px;
	line-height:130%;
	color:#0f218b;
	margin-bottom:10px;
	text-align:left;
}
#coupon .modal .flex .copy .text{
	font-size:14px;
	line-height:150%;
	margin-bottom:10px;
}
#coupon .modal .flex .copy .countdown{
	text-align:center;
	font-size:14px;
	background-color:#fffcd7;
	padding:15px;
}
#coupon .modal .code_box{
	border:1px solid #10218c;
	margin-bottom:20px;
}
#coupon .modal .code_box dt{
	background-color:#10218c;
	text-align:center;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	padding:5px 0 7px;
}
#coupon .modal .code_box dd{
	padding:10px 20px;
	display:flex;
	align-items : center;
}
#coupon .modal .code_box dd .code{
	font-size:34px;
	font-weight:bold;
	line-height:120%;
	color:#10218c;
	text-align:center;
	flex:1 1 auto; /* 倍率 */
	word-break:break-all;
	margin-right:10px;
}

#coupon .modal .code_box dd .btn_copy{
	font-size:11px;
	color:#fff;
	background-color:#10218c;
	padding:5px 8px;
	border-radius: 4px;
	cursor:pointer;
	white-space:nowrap;
}
#coupon .modal .code_box dd .btn_copy:hover{
	opacity:0.8;
}


#coupon .copy_finish{
	display:none;
	text-align:center;
	color:#cc0000;
	margin-bottom:20px;
}


#coupon .modal .btn_use a{
	display:block;
	width:450px;
	background: url("/resources/common/pc/img/shopping/coupon/arrow.png") right 10px top 50% no-repeat;
	background-color:#e60012;
	color:#fff;
	text-align:center;
	margin:0 auto 8px;
	border-radius: 3px;
	font-size:20px;
	font-weight:bold;
	padding:17px 0;
}
#coupon .modal .btn_use a:hover{
	opacity:0.8;
}

#coupon .modal .shop_attention{
	text-align:center;
	font-size:12px;
	margin-bottom:20px;
}
#coupon .modal .shop_attention a{
	color:#000;
	text-decoration:underline !important;
}
#coupon .modal .shop_attention a:hover{
	text-decoration:none !important;
}


#coupon .modal .coupon_attention{
	background-color:#f2f2f2;
	padding:15px;
}
#coupon .modal .coupon_attention .title{
	font-size:16px;
	text-align:center;
	margin-bottom:10px;
	color:#000;
}
#coupon .modal .coupon_attention .text{
	font-size:10px;
	line-height:180%;
}


#coupon .modal .login_text{
	text-align:center;
	font-size:22px;
	line-height:150%;
	padding:30px 0;
}
#coupon .modal .login_btn a{
	display:block;
	width:450px;
	background: url("/resources/common/pc/img/shopping/coupon/arrow.png") right 10px top 50% no-repeat;
	background-color:#10218c;
	color:#fff;
	text-align:center;
	margin:0 auto 50px;
	border-radius: 3px;
	font-size:20px;
	font-weight:bold;
	padding:17px 0;
}
#coupon .modal .login_btn a:hover{
	opacity:0.8;
}


#coupon .modal .login_show,
#coupon .modal .logout_show{
	display:none;
}





#modal_bg{
	display:none;
	background-color: rgba(0,0,0,0.85);
	position:fixed;
	top:0px;
	left:0px;
	z-index:100;
	width:100%;
	height:100%;
}


.copyTarget{
	position:absolute;
	left:-999999px;
}


/* ----------------------------------------------------------------------------
　お得なクーポンサイト
---------------------------------------------------------------------------- */
.couponSite_title{
	width:950px;
	margin:0 auto 60px;
	font-size:24px;
	color:#333;
	text-align:center;
	position:relative;
}
.couponSite_title:after{
	content:"";
	border-bottom:1px solid #cbcbcb;
	position:absolute;
	top:50%;
	left:0%;
	width:100%;
}
.couponSite_title span{
	background-color:#fff;
	position:relative;
	z-index:2;
	padding:0 20px;
}
.couponSite{
	width:700px;
	margin:0 auto 50px;
}


.navCampaign{
	z-index:1 !important;
}