@charset "UTF-8";

/*━━━━━━━━━━━━━━
▼全ページ共通のスタイル
━━━━━━━━━━━━━━━*/
html {
	overflow:auto;
}
html,body {
}

body {
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", monospace;
	min-width: 980px;
	overflow: hidden;
	color: #2f1d04;
}

/*背景パターン*/
#top {
	background: url(../img/bg_town.jpg) no-repeat top center fixed;
	/*background: url(../img/bg_pt.jpg) ;*/
	background-size: cover;
}
#story1 {
	background: url(../img/bg_space.jpg) no-repeat top center fixed;
	/*background: url(../img/bg_pt.jpg) ;*/
	background-size: cover;
}
#story2 {
	background: url(../img/bg_cafe.jpg) no-repeat top center fixed;
	/*background: url(../img/bg_pt.jpg) ;*/
	background-size: cover;
}
#story3 {
	background: url(../img/bg_kawara.jpg) no-repeat top center fixed;
	/*background: url(../img/bg_pt.jpg) ;*/
	background-size: cover;
}
#spec {
	background: url(../img/bg_spec.jpg) no-repeat top center fixed;
	/*background: url(../img/bg_pt.jpg) ;*/
	background-size: cover;
}
#common {
	/*background: url(../img/bg_cafe.jpg) no-repeat top center fixed;*/
	background: url(../img/bg_pt.jpg) ;
	/*background-size: cover;*/
}
#cgList a,#emAdr a,#gCampaign_bag a,.gColum2 a,#spList a,#follow a,#pu a,.spList a {
	transition: opacity 0.5s;
	opacity: 1;
}
#cgList a:hover,#emAdr a:hover,#gCampaign_bag a:hover,.gColum2 a:hover,#spList a:hover,#follow a:hover,#pu a:hover,.spList a:hover {
	opacity: 0.6;
}
.clear {
	clear: both;
}
.new2 {
	width: 27px;
	height: 27px;
	background: url(../img/new2.png) no-repeat;
	position: absolute;
	top: -17px;
	left: -12px;
}
/*━━━━━━━━━━━━━━
▼pagetop
━━━━━━━━━━━━━━━*/
#pagetop a {
	font-size: 20px;
	text-shadow: 0 0 3px rgba(180,218,254,0.75);
	color: #FFF;
	background-color: rgba(4,69,180,0.9);
	border-radius: 5px;
	transition: all 0.3s linear;
}
#pagetop a:hover {
	color: #fff;
	background-color: rgba(18,255,230,0.9);
}

/*━━━━━━━━━━━━━━
▼外字
━━━━━━━━━━━━━━━*/
#footIn span ,.fT2 span,.spM1 span,.stM1 span,.musCase span,.musPrice span,.musCate span{
	font-family: fontawesome;
	margin-right: 5px;
}

/*━━━━━━━━━━━━━━
▼float処理
━━━━━━━━━━━━━━━*/
#language ul:after,#global:after,#fMenu:after {
	content: "";
	clear: both;
	display: block;
}

/*━━━━━━━━━━━━━━
▼ヘッダー
━━━━━━━━━━━━━━━*/
#header {
	width: 100%;
	height: 90px;
	/*background-color: rgba(0,0,0,0.5);*/
	background: transparent linear-gradient(to top, rgba(141,234,255, 1) 0%, rgba(0,202,255,1) 100%) repeat scroll 0% 0%;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	margin-bottom: 15px;
}
#headerIn {
	width: 980px;
	margin: 0 auto;
	padding-top: 10px;
}

#header h1 {
	width: 600px;
	height: 24px;
	margin: 0 0 10px 10px;
	float: left;
	font-size: 12px;
	/*font-weight: bold;*/
	line-height: 24px;
	color: #FFF;
	text-shadow: 0 0 2px rgba(189,186,174,0.75);
	text-indent: 35px;
	background: url(../img/he_title_anchr.png) no-repeat;
}
#header h1 span {
	color: #26FFEB;
}

#language {
	width: 286px;
	height: 18px;
	float: right;
	background: url(../img/he_lang.png) no-repeat;
}

#language ul {
	width: 194px;
	height: 18px;
	margin: 0 0 0 87px;
}

#language ul li {
	width: 92px;
	height: 18px;
	margin-right: 5px;
	background: url(../img/he_lang_menu.png) no-repeat;
	float: left;
	transition: all 0.5s;
}
#language ul #jp {
	background-position: 0 0;
}
#language ul #en {
	background-position: -97px 0;
}

#language ul li a {
	width: 92px;
	height: 18px;
	display: block;
	line-height: 18px;
	text-indent: -9999px;
	background: url(../img/he_lang_menu.png) no-repeat;
	overflow: hidden;
	transition: opacity 0.5s;
	opacity: 0;
}
#language ul li a:hover {
	opacity: 1;
}

#language ul #jp a {
	background-position: 0 -18px;
}
#language ul #en a {
	background-position: -97px -18px;
}

#language ul:after,#global:after {
	content: "";
	clear: both;
	display: block;
}


/*━━━━━━━━━━━━━━
▼グローバルメニュー
━━━━━━━━━━━━━━━*/

#global {
	width: 766px;
	height: 37px;
	margin: 0 0 10px 10px;
	clear: both;
	float: left;
}

#global li {
	height: 37px;
	background: url(../img/he_global.png) no-repeat;
	float: left;
	transition: all 0.5s;
	position: relative;
}

#global #glo1 {
	width: 55px;
	background-position: 0 0;
}
#global #glo2 {
	width: 90px;
	background-position: -55px 0;
}
#global #glo3 {
	width: 148px;
	background-position: -145px 0;
}
#global #glo4 {
	width: 115px;
	background-position: -293px 0;
}
#global #glo5 {
	width: 105px;
	background-position: -408px 0;
}
#global #glo6 {
	width: 80px;
	background-position: -513px 0;
}


#global li a {
	height: 37px;
	display: block;
	line-height: 37px;
	text-indent: -9999px;
	background: url(../img/he_global.png) no-repeat;
	overflow: hidden;
	transition: opacity 0.5s;
	opacity: 0;
}
#global li a:hover {
	opacity: 1;
}

#global #glo1 a {
	width: 55px;
	background-position: 0 -37px;
}
#global #glo2 a {
	width: 90px;
	background-position: -55px -37px;
}
#global #glo3 a {
	width: 148px;
	background-position: -145px -37px;
}
#global #glo4 a {
	width: 115px;
	background-position: -293px -37px;
}
#global #glo5 a {
	width: 105px;
	background-position: -408px -37px;
}
#global #glo6 a {
	width: 80px;
	background-position: -513px -37px;
}


/*━━━━━━━━━━━━━━
■メインビジュアル
━━━━━━━━━━━━━━━*/
#mainVisual {
	width: 960px;
	height: 540px;
	margin: 0 auto 30px auto;
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	background: url(../img/vol3_illust.jpg) no-repeat;
	position: relative;
}
#mainVisual h1 {
	width: 328px;
	height: 204px;
	position: absolute;
	top: 340px;
	right: 20px;
}
#mainVisual #yyk {
	width: 314px;
	height: 66px;
	position: absolute;
	top: 225px;
	right: 20px;
}
#mainVisual #sale {
	width: 536px;
	height: 53px;
	position: absolute;
	bottom: 20px;
	right: 20px;
}
#mainVisual #cr2 {
	width: 179px;
	height: 166px;
	position: absolute;
	top: 370px;
	left: 10px;
}
#mainVisual #cr2 a {
	display: block;
	transition: all 0.6s;
}
#mainVisual #cr2 a:hover {
	transform: translate(0, -15px);
	-webkit-transform: translate(0, -15px);
}
#mainVisual #goman {
	width: 675px;
	height: 61px;
	position: absolute;
	top: 2px;
	left: 140px;
}
#mainVisual #gomanil {
	width: 210px;
	height: 74px;
	position: absolute;
	top: 55px;
	right: 10px;
}

/*━━━━━━━━━━━━━━
■大バナー
━━━━━━━━━━━━━━━*/
#mTopics {
	width: 960px;
	margin: 0 auto 40px auto;
}
#mTopics li {
	width: 960px;
	height: 140px;
	border-radius: 5px;
	margin-bottom: 5px;
	position: relative;
}
#mTopics li:last-child {
	margin-bottom: 0;
}
#mTopics a {
	width: 960px;
	height: 140px;
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	display: block;
	text-indent: -9999px;
	transition: all 0.5s;
}
#mTopics a:hover {
	opacity: 0.7;
}
#tp01 a {
	background: url(../img/ba_whats_coroblo.jpg) no-repeat;
}

/*━━━━━━━━━━━━━━
■コンテンツ
━━━━━━━━━━━━━━━*/

#contents {
	width: 980px;
	margin: 0 auto 20px auto;
}

#colum1 {
	width: 320px;
	height: 450px;
	background: url(../img/contents_head_bg.png) no-repeat rgba(255,255,255,0.7);
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	float: left;
	margin: 0 10px 0 10px;
	position: relative;
}
#colum2 {
	width: 350px;
	height: 450px;
	background: url(../img/contents_head_bg.png) no-repeat rgba(255,255,255,0.7);
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	float: left;
	margin: 0 10px 0 0;
	position: relative;
}
#colum3 {
	width: 270px;
	height: 450px;
	background: url(../img/contents_head_bg.png) no-repeat rgba(255,255,255,0.7);
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	float: left;
	margin: 0;
	position: relative;
}

#colum1 #tl {
	width: 300px;
	height: 375px;
	overflow: auto;
	position: absolute;
	top: 65px;
	left: 10px;
}
#colum2 #nl  {
	width: 330px;
	height: 375px;
	overflow: auto;
	position: absolute;
	top: 65px;
	left: 10px;
}
#colum3 #pu  {
	width: 250px;
	height: 375px;
	overflow: auto;
	position: absolute;
	top: 65px;
	left: 20px;
}
#colum1 h5,#colum2 h5,#colum3 h5 {
	position: absolute;
	top: 12px;
	left: 10px;
}

#colum1 #follow {
	width: 162px;
	height: 68px;
	position: absolute;
	top: -19px;
	right: 10px;
}

#nl dl {
	width: 300px;
	margin-bottom: 15px;
}
#nl dl:last-child {
	margin-bottom: 0;
}

#nl dt {
	font-size: 12px;
	width: 100px;
	overflow: hidden;
	color: #fff;
	padding: 2px 15px 1px 15px;
	margin: 0 0 8px 0;
	text-shadow: 0 0 2px rgba(189,186,174,0.75);
	background-color: rgba(41,218,252,0.9);
	border-radius: 10px;
}
#nl dt span {
	font-family: fontAwesome;
	margin-right: 5px;
}
#nl dd {
	font-size: 14px;
	position: relative;
	padding: 0 0 0 15px;
	text-shadow: 0 0 2px rgba(189,186,174,0.75);
	z-index: 0;
	height: 100%;
}

#nl dd a,.indiText a,.server a,#xrated_table a,#spec_table2 a {
	color: #457ada;
	text-decoration: none;
	transition: all 0.5s;
}
#nl dd a:hover,.indiText a:hover,.server a:hover,#xrated_table a:hover,#spec_table2 a:hover {
	color: #b5ff63;
}
.masterupT {
	font-size: 18px;
	font-weight: bold;
	color: #ff30ec;
}
#nl dd:after {
	content: "\f0da";
	font-family: fontAwesome;
	display: block;
	position: absolute;
	left: 5px;
	top: 3px;
}
#pu ul {
	width: 220px;
}
#pu ul li {
	width: 220px;
	height: 60px;
	margin-bottom: 5px;
}




/*━━━━━━━━━━━━━━
■フッター
━━━━━━━━━━━━━━━*/
#footer {
	width: 100%;
	padding: 10px 0;
	background: transparent linear-gradient(to top, rgba(141,234,255, 1) 0%, rgba(0,202,255,1) 100%) repeat scroll 0% 0%;
	/*background-color: #FFF;*/
	box-shadow: 0 0 4px rgba(47,29,4,0.3);
	border-top: solid 1px #dfdfdf;
}
#footIn {
	width: 960px;
	margin: 0 auto;
}

#fMenu {
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 0 2px rgba(189,186,174,0.75);
}
#fMenu li {
	float: left;
	margin: 0 15px 10px 0;
}
#fMenu a {
	color: #FFF;
	text-decoration: none;
	transition: all 0.5s;
}
#fMenu a:hover {
	color: #b5ff63;
}
#footSpec {
	padding: 10px 0;
	background: url(../img/line_foot.gif) repeat-x;
}
#fLogo {
	width: 224px;
	margin-right: 30px;
	float: left;
}
#fSpec {
	/*float: left;*/
}
.fT1 {
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	margin-bottom: 5px;
}
.fT2 {
	font-size: 12px;
	color: #FFF;
	margin-bottom: 10px;
}
#fSpec_foot {
	height: 2px;
	clear: both;
	background: url(../img/line_foot.gif) repeat-x;
	margin-bottom: 15px;
}

#bland {
	width: 960px;
	font-size: 14px;
	line-height: 150%;
	color: #FFF;
	text-align: center;
}