@charset "utf-8";

/*ページトップ*/
#toppage{
	position:fixed;
	right:45px;
	bottom:100px;
	display:none;
}

#toppage a{
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all  0.3s ease-out;
}
#toppage a:hover{
	opacity:0.85;
}
#container{
	background-image:url(../img/chara_bg.png);
}

/**選択ページ**/
.story{
	display:block;
	line-height:60px;
	padding:0;
	text-indent:-9999px;
	overflow:hidden;
	width:120px;	/*ロゴの横幅に合わせる*/
	height:60px;
	text-align:center;
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-120px -120px;
}
.down{
	display:block;
	line-height:60px;
	padding:0;
	text-indent:-9999px;
	overflow:hidden;	
	width:120px;	/*ロゴの横幅に合わせる*/
	height:60px;
	text-align:center;
	background-image:url(../img/navationbuttom3.png);
	background-size:840px;
	background-repeat:no-repeat;
	background-position:-720px -120px;
}

/**/
#contents{
	/*画像の高さをしてする。*/
	min-height:6630px;/*にimgの高さしていすると、キレに表示されます。*/
	/*2055+90*/
}

/*ページトップ*/
.page_top{
	position:fixed;
	right:0px;
	bottom:80px;
	display:none;
}
/****共通****/

#contents h2{ 
	height:90px;/*上書き*/
}

/****タイトルリンク*****/
#title_link{
}

#title_link ul{
	font-size:0px;
	padding-left:0px;
}

#title_link li{
	width:auto;
	height:42px;
	margin-right:15px;
	display:inline-block;
	position:relative;
	top:0px;
	box-sizing:border-box;
}

#title_link li > a{
	height:42px;
	display:block;
	font-size:16px;
	font-size:1rem;
	text-align:center;
	padding:0 2em;/*追加*/
	line-height:42px;
	letter-spacing:0.15rem;
	background-color:#FFF;/*73a1ff*/
	border-radius:3px;
	border:1px solid  #cccccc;
	box-sizing:border-box;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

#title_link li > a:hover{
	border:1px solid #FFBC15;
	color:#FFBC15;
}
#title_link li > .arrow:hover::after {
	border-left-color: #FFBC15;
}

#title_link li:active{
	top:3px;
}

/*矢印*/
.arrow::after {
	position: absolute;
	top: 60%;
	left: 0.8rem;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #b3b3b3;
	transform:rotate(90deg);
	transition: all .3s;
}

/***first***/

#first{
	padding-top:30px;
	margin-bottom:25px;
}

#first h3{
	margin:0px 0px 20px 0px;
	width:100%;
	text-align:center;
	color:#FFF;
	height:50px;
	font-size:1.5rem;
	line-height:55px;
	letter-spacing:0.05rem;
	/*グラデーション*/
	background: #7FB1FF; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #adceff 1%, #7fb1ff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #adceff 1%,#7fb1ff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #adceff 1%,#7fb1ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adceff', endColorstr='#7fb1ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border-radius:3px;
}

#first figure{
	height:890px;
	border-radius:3px;
	overflow:hidden;
}


/***shop***/

#shop{
	height:3530px;
	padding-top:30px;
	margin-bottom:25px;
}

#shop:after{
	content:'';
	clear:both;
}

#shop h3{
	margin:0px 0px 20px 0px;
	width:100%;
	text-align:center;
	color:#FFF;
	height:50px;
	font-size:1.5rem;
	line-height:55px;
	letter-spacing:0.05rem;
	/*グラデーション*/
	background: #7fb1ff; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #adceff 1%, #7fb1ff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #adceff 1%,#7fb1ff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #adceff 1%,#7fb1ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adceff', endColorstr='#7fb1ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border-radius:3px;
}

.shopA h4{
	position:absolute;
	top:27px;
	left:36px;
	font-family: Meiryo, "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:30px;
	font-weight:bold;
	color:#000;
	letter-spacing:0.15rem;
	text-shadow: 0px 0px 3px #FFFFFF , 0px 0px 3px #FFFFFF;/*光沢*/
	/*border-bottom:4px solid #000000;*/
}

.shopA h4>span{
	font-size:0.75em;
}

#shop h3{
	letter-spacing:0.25rem;
}

/*ソフマップ・Getch・メディオ*/
 .shopA{
	width:100%;/*960px*/
	height:560px;
	display:block;
	position:relative;
	background-color:#FFF;
	margin-bottom:25px;
	border-radius:3px;
}

/*そのほかミ　右*/
 .shopB{
	width:48.96%;/*470px*/
	height:520px;
	display:block;
	position:relative;
	float:left;
	background-color:#FFF;
	margin-bottom:25px;
	border-radius:3px;
}

/*そのほかミ　左*/
 .shopC{
	width:48.96%;/*470px*/
	height:520px;
	display:block;
	position:relative;
	float:right;
	background-color:#FFF;
	margin-bottom:25px;
	border-radius:3px;
}

/**ボタンのデザイン***/
/*btn*/
.shop_btn{
	/*width:210px;*/
	width:250px;
	height:42px;
	position:absolute;
	bottom:20px;
	right:41px;
	text-align:center;
}

.shop_btn a, .shopBC_btn a{
	position: relative;
	display:block;
	color:#FFF;
	letter-spacing:0.15rem;
	line-height: 40px;/*上下中央*/
	border-radius: 3px; 
	background: rgb(255,48,25); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	box-sizing:border-box;
	transition:0.1s linear 0.1s;
}

.shop_btn a:hover, .shopBC_btn a:hover {
	background: rgb(207,4,4); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(207,4,4,1) 0%, rgba(255,48,25,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.shopBC_btn{
	/*width:210px;*/
	width:250px;
	height:42px;
	position:absolute;
	bottom:24px;
	right:0px;
	left:0px;
	margin:auto;
	text-align:center;
}

/*CSS矢印*/
.shop_btn a:after{ 
	content: ""; 
	position: absolute;
	top: 41%;
	right:10%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.shopBC_btn a:after{ 
	content: ""; 
	position: absolute;
	top: 41%;
	right:10%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.shopB h4,.shopC h4{
	position:absolute;
	top:0px;
	width:100%;
	padding-top:25px;
	text-align:center;
	font-family: Meiryo, "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#000;
	letter-spacing:0.38rem;
	text-shadow: 0px 0px 3px #FFFFFF , 0px 0px 3px #FFFFFF;/*光沢*/
}

.shopB h4>span, .shopC h4>span{
	font-size:0.75em;
}
#sofmap_shopname{
}
#chu_shopname{
	letter-spacing:0rem;
}
.privilegetag{
	top:-23px;
	left:43px;/*変更*/
	background-image:url(../img/baner.png);
	background-size:360px 20px;
	background-position:0 0;
}

/***オリジナル特典***/
#original{
	height:1870px;
	padding-top:30px;
}
#original h3{
	margin:0px 0px 20px 0px;
	width:100%;
	text-align:center;
	color:#FFF;
	height:50px;
	font-size:1.5rem;
	line-height:55px;
	letter-spacing:0.05rem;
	/*グラデーション*/
	background: #7fb1ff; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #adceff 1%, #7fb1ff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #adceff 1%,#7fb1ff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #adceff 1%,#7fb1ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adceff', endColorstr='#7fb1ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border-radius:3px;
}

.originalA{
	width:306px;
	height:335px;
	position:relative;
	overflow:hidden;
	float: left;
	margin-right:20px;
}

.originalA:nth-child(3n+1) {
	margin-right:0px;
	margin-bottom:24px;
}
#or_fammy{
	position:absolute;
	width:306px;
	margin:0 auto;
	top:15px;
	text-align:center;
	font-size:21px;
	line-height:24px;
	text-shadow: 0px 0px 3px #FFFFFF , 0px 0px 3px #FFFFFF;/*光沢*/
}
.original_title{
	position:absolute;
	width:306px;
	margin:0 auto;
	top:28px;
	text-align:center;
	font-size:21px;
	line-height:24px;
	text-shadow: 0px 0px 3px #FFFFFF , 0px 0px 3px #FFFFFF;/*光沢*/
}
.originalA h4>span, .shopC h4>span{
	font-size:0.75em;
}

.original_btn{
	/*width:210px;*/
	width:250px;
	height:42px;
	position:absolute;
	bottom:18px;
	right:28px;
	text-align:center;
}
.original_btn a{
	position: relative;
	display:block;
	color:#FFF;
	letter-spacing:0.15rem;
	line-height: 40px;/*上下中央*/
	border-radius: 3px; 
	background: rgb(255,48,25); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	box-sizing:border-box;
	transition:0.1s linear 0.1s;
}

.original_btn a:hover {
	background: rgb(207,4,4); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(207,4,4,1) 0%, rgba(255,48,25,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/*CSS矢印*/
.original_btn a:after{ 
	content: ""; 
	position: absolute;
	top: 41%;
	right:10%;
	display: block; 
	width: 7px; 
	height: 7px; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}