@charset "UTF-8";
/* 全体文字 */
.pageContents {color:rgb(64,47,47); font-size:20px;}
/* キャンペーンタイトル */
h1.campaignTitleHeader {width:100%; height:160px; margin:0; padding:0; background:url(/images/campaign/20250117janken/title_headerSP.png) 0 0 no-repeat;}
h1.campaignTitleHeader span {display:none;}

/* キャンペーン期間 */
.campaignTermContainer {margin:0 0 20px 0; padding:8px 0; text-align:center; background-color:rgba(255,255,255,0.5); line-height:2; font-size:18px; font-weight:700; white-space:pre;}
/* SP用タブ */
menu.campaignTabContainerSP {display:block; list-style-type: none; margin:0 0 30px 2px; padding:0; font-size: 0; font-weight: 0; line-height:0;}
menu.campaignTabContainerSP li   {display:inline-block; margin:6px; text-align: center; font-size:20px; font-weight:700; text-shadow: 1px 1px 0 rgba(255,255,255,0.4);}
menu.campaignTabContainerSP li a {display:inline-block; width:180px; height:80px; line-height:70px; color:rgb(64,47,47); text-decoration:none; background:rgba(153,129,18,0.3); box-shadow:0px 2px 1px rgba(0,0,0,0.3); border-radius:4px;}
menu.campaignTabContainerSP li a::after {content:"\f0dd"; display:block; position: absolute; margin:-44px 0 0 84px; font-family: FontAwesome;}
/* PC用タブ非表示 */
menu.campaignTabContainerPC {display:none;}
/* テキスト装飾 */
h2.textTitleH2 {font-size:28px; font-weight:700; margin:0 10px 20px 10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); }
h2.textTitleH2::before {content:""; display: block; position: absolute; width:10px; height:28px; background:rgba(64,47,47,1); margin: 8px 0 0 0;}
h3.textTitleH3 {font-size:22px; font-weight:700; margin:0 0 10px 0;}
span.markerColor {color:rgb(236,106,0);}
span.fontB {font-weight:bold;}
span.markerBgColor {background:rgba(236,106,0,0.3);}

/* もくじ＆ストーリー 分割用 */
.campaignSummaryContainer {margin:0 0 50px 0; background-color:rgba(255,255,255,0.5); border-radius:20px;}
.contentsListCover  {flex:1; width:100%;}
.campaignStoryCover {flex:2; width:100%;}
/* もくじ＆ストーリー 装飾用 */
.contentsList {margin:0; padding:30px;}
ol.contentsListBox    {margin: 0 0 0 20px;}
ol.contentsListBox li {padding:4px 0;}
.campaignStory {margin:0; padding:30px; line-height:1.8;}
.questTopics {margin:30px 0 30px 30px;}

/* 注意文リスト */
ul.cautionList li {list-style:none; margin:0 0 12px 28px; line-height:1.3;}
ul.cautionList li:before {content:"※"; margin-left:-28px;}

/* クエストステージ */
.questStageContainer {margin:0 10px 60px 10px;}
.questStageContainer dt {display:inline-block; vertical-align: top; line-height:1.8;}
.questStageContainer dd {display:inline-block; vertical-align: top; width: 88%; line-height:1.8;}
table.dailyMission {width:100%; border-collapse:0; border-spacing:0;}
table.dailyMission th {width:15%; height:40px; background:rgba(230,230,230,1); border:1px solid rgba(205,205,205,1); text-align:center; font-size:90%;}
table.dailyMission td {width:15%; background:rgba(255,255,255,1); border:1px solid rgba(205,205,205,1); padding:4px; text-align:center; font-size:90%;}
table.dailyMission td:nth-child(2) {text-align:left; width:70%;}

/* 新キャラクター */
.newCharacterContainer {margin:0 0 60px 0;}
.newCharacterName {margin:0 10px 20px 10px; line-height:1.8;}
.newCharacterBox {border-bottom:1px dashed rgb(64,47,47); padding-bottom:50px; margin-bottom:50px; text-align: center;}
.newCharacterBox:last-child {border-bottom:0;}
.newCharacterImg {margin:0 10px 20px 10px;}
.tableContainer {flex:2; width:100%; text-align: left;}
.newCharacterContainer table {width:100%; border-collapse:0; border-spacing:0; text-align:left;}
.newCharacterContainer table th {width:20%; height:40px; background:rgba(230,230,230,1); border:1px solid rgba(205,205,205,1); padding:4px 0 4px 20px;}
.newCharacterContainer table td {width:80%; background:rgba(255,255,255,1); border:1px solid rgba(205,205,205,1); padding:4px 20px 4px 20px;}

/* 武具 */
.newArmorContainer {margin:0 0 60px 0;}
.newArmorName {margin:0 10px 20px 10px; line-height:1.8;}
.newArmorBox {border-bottom:1px dashed rgb(64,47,47); padding-bottom:50px; margin-bottom:50px; text-align: center;}
.newArmorBox:last-child {border-bottom:0;}
.newArmorImg {margin:0 10px 20px 10px;}
.tableContainer {flex:2; width:100%;}
.newArmorContainer table {width:100%; border-collapse:0; border-spacing:0; text-align:left;}
.newArmorContainer table th {width:24%; height:40px; background:rgba(230,230,230,1); border:1px solid rgba(205,205,205,1); padding:4px 0 4px 20px;}
.newArmorContainer table td {width:76%; background:rgba(255,255,255,1); border:1px solid rgba(205,205,205,1); padding:4px 20px 4px 20px;}
.iconTextMiddle {margin:4px 4px 4px 0; vertical-align:middle;}

/* 報酬一覧 */
.itemName100SP {display:inline-block; width:100px; text-align:left;}
.itemName60SP {display:inline-block; width:100%; text-align:left;}

/* クエスト攻略 */
.questCaptureContainer {margin:0 10px 60px 10px;}
.questCaptureNote {margin:10px 10px 20px 10px;}
.rewardTable {border-collapse:collapse; width:100%; margin:0 0 20px 0;}
.rewardTable th {text-align:left; background-color:rgb(225,225,225); border:1px solid rgb(16,0,0); font-weight: normal; background:rgba(240,255,0,0.3); padding:4px; font-size:16px;}
.rewardTable td {text-align:left; background-color:rgb(255,255,255); border:1px solid rgb(16,0,0); padding:4px; font-size:16px;}
.rewardTable td.cond {width:50%;}
.rewardTable td.icon {width:70px; text-align:center; border-right:0;}
.rewardTable td.reward {border-left:0;}
.rewardTable td.termNo {width:70px; text-align:center;}
.rewardTable td.ratings {text-align:center; color:rgb(255,180,0); font-size:24px; width:160px;}
.exchangeTable {border-collapse:collapse; width:100%; margin:0 0 20px 0;}
.exchangeTable th {text-align:center; background:rgba(240,255,0,0.3); border:1px solid rgba(16,0,0,1); padding:4px; font-size:16px;}
.exchangeTable td {text-align:left; background:rgb(255,255,255); border:1px solid rgba(16,0,0,1); padding:10px; font-size:16px;}
.exchangeTable td.changeItem {text-align:center;}
.exchangeTable td.changeItemU {text-align:left; border-bottom:0; width:220px;}
.exchangeTable td.changeItemL {text-align:center; border-top:0; background:rgb(204,204,204);}
.exchangeItemName {display:inline-block; line-height:30px; vertical-align:top;}

/* エレメントチェイン */
.newActionInfo {margin:0 10px;}
.ecRateTable {border-collapse:collapse; width:100%; margin:0 0 20px 0;}
.ecRateTable th {background-color:rgb(225,225,225); border:1px solid rgb(16,0,0); font-weight: normal; background:rgba(240,255,0,0.3); padding:4px; font-size:16px;}
.ecRateTable td {background-color:rgb(255,255,255); border:1px solid rgb(16,0,0); padding:4px; font-size:16px;}
.ecRateTable .taL {text-align:left;}
.ecRateTable .taR {text-align:right;}
.ecRateTable .taC {text-align:center;}

/* GP集計 */
.gpCountBG {background:rgb(255,255,255); border-radius:10px; margin:30px auto; padding:15px; width:500px; font-size:150%; text-align:center;}
.gpCount {display: inline-block; margin: 0 5px; font-size: 200%;}
.gpSummaryCaution {display:block; color:rgb(255,0,0); font-size:50%;}

/* ランキング */
.playerNameLink {cursor: pointer; text-decoration: underline; color: rgb(0,0,255);}
tr.myRanking td {background: rgb(255,220,223);}
.btnGetReward {display:block; width:50%; height:80px; margin:40px auto; text-align:center; font-size:28px; font-weight:700; line-height:80px; color:rgb(100,100,100); text-decoration:none; border-radius:10px; background:rgba(255,255,255,0.4); box-shadow:0 3px 1px rgba(0,0,0,0.3);}
.btnGetRewardActive {background:rgb(246,113,113); color:rgb(255,255,255); cursor:pointer;}

/* ガチャ説明 */
.newGachaContainer {margin:0 10px 60px 10px;}
.newGachaBox {padding-bottom:50px; margin-bottom:50px; text-align: left;}
.newGachaBox:last-child {border-bottom:0;}
.newGachaImg {margin:0 0 20px 0; width:504px; height:128px;}

/* ※※※※※※
   ここから 幅768px以上のCSSを記述
   ※※※※※※ */
@media screen and (min-width : 768px){
	/* default.cssの内容をオーバーライド、PC画面では幅広く表示 */

	/* 全体文字 */
	.pageContents {font-size:16px;}
	/* キャンペーンタイトル */
	h1.campaignTitleHeader {width:1000px; margin:10px 10px 0 10px; background:url(/images/campaign/20250117janken/title_header.png) 0 0 no-repeat;}

	/* キャンペーン期間 */
	.campaignTermContainer {margin:0 10px 20px 10px; padding:0; height:60px; line-height:60px; font-size:22px; white-space:nowrap;}
	/* SP用タブ非表示 */
	menu.campaignTabContainerSP {display:none;}
	/* PC用タブ */
	menu.campaignTabContainerPC {display:flex; list-style-type: none; margin:0 10px 30px 10px; padding:0; font-weight: 0; line-height:0;}
	menu.campaignTabContainerPC li {display:inline-block; width: 100%; text-align: center; font-size:22px; font-weight:700;}
	menu.campaignTabContainerPC li a {display:inline-block; width: 100%; height:80px; line-height:80px; color:rgb(64,47,47); text-decoration:none; background:linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%); border:0;}
	menu.campaignTabContainerPC li a:hover  {background:linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 100%);}
	menu.campaignTabContainerPC li a:active {color:rgb(153,129,18);}
	menu.campaignTabContainerPC li a.campaignTabBorder {border-left:2px solid rgb(180,180,180);}
	menu.campaignTabContainerPC li a.tabActive {color:rgb(153,129,18); border-bottom:4px solid rgb(153,129,18);}
	menu.campaignTabContainerPC li a.tabActive::after {content:""; display:block; position:absolute; width: 0; height: 0; margin: 0 0 0 138px; border:30px solid transparent;border-top: 10px solid rgb(153,129,18);}
	/* SP用タブタイトル 非表示 */
	.tabContantsName {display:none;}
	/* もくじ＆ストーリー 分割用 */
	.campaignSummaryContainer {margin:0 10px 50px 10px;}
	/* もくじ＆ストーリー 装飾用 */
	.contentsList {margin:20px; padding:0;}
	.campaignStory {margin:20px 20px 20px 0; padding:0 0 0 20px; border-left:2px solid rgb(180,180,180);}
	/* 注意文リスト */
	ul.cautionList li {margin:0 0 9px 21px;}
	ul.cautionList li:before {margin-left:-21px;}
	/* クエストステージ */
	.questStageContainer dd {display:inline-block; vertical-align: top; width: 90%;}
	/* 新キャラクター */
	.tableContainer {margin:0 10px;}
	.newCharacterImg {margin:0 10px;}
	/* 武具 */
	.newArmorContainer table th {width:20%;}
	.newArmorContainer table td {width:80%;}
	/* 報酬一覧 */
	.itemName100SP {display:inline; width:100%; text-align:center;}
	.itemName60SP {display:inline; width:100%; text-align:center;}
	/* ガチャ説明 */
	.newGachaImg {width:504px; height:128px;}
}