@charset "utf-8";

/*--------------------------------------------------
		viking first common
--------------------------------------------------*/

#pageTit { text-align: center; margin-top: 20px; margin-bottom: 0;}

/* txt */
.contentsBlock .bigtxt,
.contentsBlock .set8txt,
.contentsBlock .set5txt,
.contentsBlock .mintxt,
.contentsBlock .subtxt { font-weight: bold; line-height: 1.3;}

.contentsBlock .set8txt { color: #e60012;}
.contentsBlock .set5txt { color: #1b8f47;}

.boldred { color: #e63e31; font-weight: bold;}
.boldgrn { color: #1b8f47; font-weight: bold;}


/*==============================
	about
==============================*/
#about ul.list {line-height: 1.5;}
#about ul.list li { background: #e5f2ef; border-top: solid 2px #1a884c; box-sizing: border-box;}/* color change */
#about ul.list li .titArea { margin-bottom: 15px; padding-left: 78px; position: relative;}
#about ul.list li .titArea:before { position: absolute; left: 0; top: 0; background: #fff; color: #1a884c; text-align: center; font-size: 44px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; min-width: 66px; display: inline-block;}
#about ul.list li:nth-child(1) .titArea:before { content: "1";}
#about ul.list li:nth-child(2) .titArea:before { content: "2";}
#about ul.list li:nth-child(3) .titArea:before { content: "3";}
#about ul.list li:nth-child(4) .titArea:before { content: "4";}
#about ul.list li:nth-child(5) .titArea:before { content: "4";}
#about ul.list li.no03 .titArea:before { content: "3";}
#about ul.list li .txtArea .btn { display: block;}
#about ul.list li .txtArea .btn a { display: block; margin: 0 auto; text-align: center; color: #1a884c; font-weight: bold; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-decoration: none; border: solid 2px #1a884c; position: relative;}
#about ul.list li .txtArea .btn a:hover { opacity: 0.8;}
#about ul.list li .txtArea .btn a:after {
    content: ""; width: 12px; height: 12px; margin-left: 8px; display: inline-block;
	position: absolute; right: 10px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);
    background: url("/img/campaign/2407/viking/icon_expand.png") 0 0 no-repeat transparent;
    background-size: contain;
}
#about ul.list li .txtArea .btn a .big { font-size: 120%;}
#about ul.list li .txtArea .table { border: 0;}
#about ul.list li .table dl.tit,
#about ul.list li .table dl.txt0,
#about ul.list li .table dl.txt1,
#about ul.list li .table dl.txt2,
#about ul.list li .table dl.txt3,
#about ul.list li .table dl.txt4,
#about ul.list li .table dl.txt5 { display: table; width: 100%;}
#about ul.list li .table dl.tit dd,
#about ul.list li .table dl.txt0 dt,
#about ul.list li .table dl.txt1 dt,
#about ul.list li .table dl.txt2 dt,
#about ul.list li .table dl.txt3 dt,
#about ul.list li .table dl.txt4 dt,
#about ul.list li .table dl.txt5 dt,
#about ul.list li .table dl.tit dt,
#about ul.list li .table dl.txt0 dd,
#about ul.list li .table dl.txt1 dd,
#about ul.list li .table dl.txt2 dd,
#about ul.list li .table dl.txt3 dd,
#about ul.list li .table dl.txt4 dd,
#about ul.list li .table dl.txt5 dd { display: table-cell; text-align: center; border-bottom: solid 2px #fff; vertical-align: middle; font-weight: bold;}
#about ul.list li .table dl.tit dt,
#about ul.list li .table dl.txt0 dd,
#about ul.list li .table dl.txt1 dd,
#about ul.list li .table dl.txt2 dd,
#about ul.list li .table dl.txt3 dd,
#about ul.list li .table dl.txt4 dd,
#about ul.list li .table dl.txt5 dd { border-left: solid 2px #fff; font-weight: bold;}
#about ul.list li .table dl.tit dd { background: #fff;}
#about ul.list li .table dl.tit dt { background: #faf37e; font-weight: bold;}
#about ul.list li .table dl.txt0 dt { color: #e60012; background-image: -moz-linear-gradient( 0deg, rgb(232,189,73) 0%, rgb(255,244,190) 55%, rgb(246,199,73) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(232,189,73) 0%, rgb(255,244,190) 55%, rgb(246,199,73) 100%); background-image: -ms-linear-gradient( 0deg, rgb(232,189,73) 0%, rgb(255,244,190) 55%, rgb(246,199,73) 100%);}
#about ul.list li .table dl.txt0 dd { background: #fff4d1; color: #e60012;}
#about ul.list li .table dl.txt1 dt { background: #e60012;}
#about ul.list li .table dl.txt1 dd { background: #ffeff0; color: #e60012;}
#about ul.list li .table dl.txt2 dt { background: #eb5e00;}
#about ul.list li .table dl.txt2 dd { background: #ffefe4; color: #eb5e00;}
#about ul.list li .table dl.txt3 dt { background: #10893e;}
#about ul.list li .table dl.txt3 dd { background: #eff9f3; color: #10893e;}
#about ul.list li .table dl.txt4 dt { background: #f0008d;}
#about ul.list li .table dl.txt4 dd { background: #ffeef8; color: #f0008d;}
#about ul.list li .table dl.txt5 dt { background: #2f55d4;}
#about ul.list li .table dl.txt5 dd { background: #eaeefb; color: #2f55d4;}
#about ul.list li .table dl dt { color: #fff;}
#about ul.list li .table dl.tit dt { color: #222;}
#about ul.list li .table dl dd.colbk { color: #222;}

/*==============================
	anchor
==============================*/
#anchor {}
#anchor .tit { text-align: center;}

#anchor li {}
#anchor li a { display: block; margin: 0 auto; text-align: center; color: #1a884c; font-weight: bold; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-decoration: none; border: solid 2px #1a884c; position: relative; box-shadow:2px 2px 6px 0px rgba(0,0,0,0.3);}
#anchor li a:hover { opacity: 0.8;}
#anchor li a:after { content: ""; position: absolute; top: 30%; right: 20px; -webkit-transform: rotate(135deg) translateY(-50%); transform: rotate(135deg) translateY(-50%);}
#anchor li a:before { content: ""; position: absolute; top: 50%; left: 20px;}
#anchor li:nth-child(1) a:before { background: url(/img/campaign/2407/viking/first/icon_g_ranking.png)no-repeat center center; background-size: cover;}
#anchor li:nth-child(2) a:before { background: url(/img/campaign/2407/viking/first/icon_g_bargain.png)no-repeat center center; background-size: cover;}

/*==============================
	step
==============================*/
#step .tit { font-weight: bold; background: #e5f2ef; border-top: solid 2px #1a884c; text-align: center; padding: 10px;}
#step .tit .red { color: #e63e31;}
#step .flow {}
#step .flow li {}
#step .flow li.flowbox { border-bottom: solid 1px #1a884c; border-left: solid 1px #1a884c; border-right: solid 1px #1a884c;}
#step .flow li.arr { width: 30px; border-bottom: none; border-left: none; border-right: none;}
#step .flow li .stepnum { text-align: center; background: #1a884c; color: #fff;}
#step .flow li .txt { background: #fff0db; font-weight: bold;}
#step .flow li .subtxt { background: #fff0db; font-weight: bold;}
#step .flow li .img {}
#step .flow li .notes {}

/*==============================
	rankingArea
==============================*/
#rankingArea {}
#rankingArea ul.list {}
#rankingArea ul.list li {}
#rankingArea ul.list li a { display: flex; flex-wrap: wrap; color: #383838; text-decoration: none; position: relative; border: solid 1px #d0d0d0; height: 100%; box-sizing: border-box;}
#rankingArea ul.list li a:after { position: absolute; right: 10px; bottom: 10px; width: 10px; height: 10px; content: ""; background: url(/img/campaign/common/itemarr.png) no-repeat; background-size: 10px auto;}
#rankingArea ul.list li a .img {}
#rankingArea ul.list li a .txtArea {}
#rankingArea ul.list li a .txtArea .tit { font-weight: bold;}
#rankingArea ul.list li:nth-child(1) a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no1.png) no-repeat top left;}
#rankingArea ul.list li:nth-child(2) a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no2.png) no-repeat top left;}
#rankingArea ul.list li:nth-child(3) a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no3.png) no-repeat top left;}
#rankingArea ul.list li:nth-child(4) a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no4.png) no-repeat top left;}
#rankingArea ul.list li:nth-child(5) a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no5.png) no-repeat top left;}

#rankingArea ul.list li.no02 a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no2.png) no-repeat top left;}
#rankingArea ul.list li.no03 a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no3.png) no-repeat top left;}
#rankingArea ul.list li.no04 a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no4.png) no-repeat top left;}
#rankingArea ul.list li.no05 a .txtArea .tit { background: url(/img/campaign/2407/viking/first/icon_no5.png) no-repeat top left;}

#rankingArea ul.list li a .txtArea .priceArea { text-align: right; margin-top: 10px;}
#rankingArea ul.list li a .txtArea .priceArea .price { color: #383838; font-weight: 100;}
#rankingArea ul.list li a .txtArea .priceArea .yen {}
#rankingArea ul.list li a .txtArea .priceArea .tax {}
#rankingArea ul.list li a .txtArea .min { font-size: 70%; font-weight: normal; display: inline-block;}
#rankingArea ul.list li a .txtArea .txtnotes { font-size: 85%; text-align: right; margin-top: 5px;}
#rankingArea ul.list li a .txtArea .sqare { text-align: right; margin-top: 10px;}
#rankingArea ul.list li a .txtArea .sqare span { padding: 0 8px; display: inline-block; text-align: center; color: #fff; margin-left: 5px;}
#rankingArea ul.list li a .txtArea .sqare .pink { background: #f05fa6;}
#rankingArea ul.list li a .txtArea .sqare .kome { font-size: 60%; padding: 0; margin-left: 0; vertical-align: super;}

#rankingArea .subTit { text-align: center; padding: 15px; letter-spacing: -0.01em; margin-bottom: 10px; color: #fff; background: url("/img/campaign/2407/viking/common_bg_dot_green.png") repeat left top / 4px 4px; border-radius: 5px 5px 0 0;}
#rankingArea #popular .subTit span { background:url("/img/campaign/2407/viking/first/icon_w_ranking.png") no-repeat left center;}
#rankingArea #bargain .subTit span { background:url("/img/campaign/2407/viking/first/icon_w_bargain.png") no-repeat left center;}
#rankingArea .subTitNotes { text-align: right; font-size: 85%; margin-bottom: 10px;}



/*==============================
	secFloat
==============================*/
#secFloat { display: block !important; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 99; background: #fff0db;}
#secFloat .secFloatInner { width: 100%; position: relative; bottom: 0; left: 0;}
#secFloat .btnArea { text-align: center;}
#secFloat .btnArea a { position: relative; background: #fff; display: inline-block; color: #1a884c; border: 2px solid #1a884c; border-radius: 5px; text-decoration: none; padding: 5px 14px; font-weight: bold;}
#secFloat .btnArea a:after { content: ""; position: absolute; top: 50%; right: 20px; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%);}
#secFloat .btnArea a:hover { opacity: 0.8;}