@charset "utf-8";

body{width:100%;
	min-width:980px;
	margin:0;
	padding:0;
	font-family:
		'Lucida Grande',
		'Hiragino Kaku Gothic ProN',
		 Meiryo, sans-serif;
	background:rgba(174,32,35,1.00);
	overflow-y:scroll;
	-webkit-text-size-adjust: 100%;
}

.pc{display:block;}
.sp{display:none;}

/* sp_menu */
#checked,.menu-btn,.drawer-menu{display:none;}

#container{background:#FFFFFF;}

img{border:none;}

a{text-decoration:none;}

ul{margin:0;
	padding:0;}

li{text-decoration:none;
	list-style:none;}

/* ヘッダー */

#header{width:100%;
	height:70px;
	background:rgba(174,32,35,1.00);
	overflow:hidden;}

.logo_main{width:167px;
	margin:10px;
	float:left;
	background:url(../img/rogo-01-01.png);
	background-position:center bottom;
	color:#FFFFFF;}

.top_store{width:150px;
	height:30px;
	margin:20px 10px;
	float:right;
	line-height:30px;
	text-align:center;
	color:rgba(255,255,255,1.00);
	background:rgba(200,149,0,1.00);
	border:rgba(0,0,0,1.00) solid 1px;}

.top_store a{display:block;
	color:rgba(255,255,255,1.00);}
.top_store a:hover{color:rgba(255,255,255,1.00);}
.top_store:hover{color:rgba(255,255,255,1.00);
	background:rgba(200,149,0,0.50);}
	
#menu{min-width:960px;
	max-width:1200px;
	height:45px;
	margin:20px auto;}

#menu ul li{float:left;
	padding:0 15px;
	text-align:center;}
	
#menu ul li a{color:rgba(0,0,0,1.00);}	

#menu ul li a:hover{color:rgba(255,0,4,1.00);}

#menu ul li ul,#menu ul li ul li{padding:0;}
	
/* レーベルドロップダウン > */

.revel_list{cursor:pointer;}

.revel_list ul li {
	margin:0;
	padding:0;
  width: 150px;/*親メニューの幅*/
  height: 45px;/*親メニューの高さ*/
  /*line-height: 30px;*/
  position: relative;
  text-align:center;
}

.revel_list ul li:hover {
  /*background:;*//*ホバー時の親メニューの背景色*/
  color:rgba(255,0,4,1.00);
}
.revel_list ul li ul {
	position: absolute;
	top:45px;/*親メニューの高さと同じにする*/
	width: 150px;
	z-index: 9999;
}
.revel_list ul li ul li {
  overflow: hidden;
  width: 100%;/*サブメニューの幅*/
  height: 30px;
  font-size:14px;
  line-height:30px;
  color:rgba(0,0,0,1.00);
  border-bottom:rgba(255,0,4,1.00) dotted 1px;
  background:rgba(219,219,219,1.00);/*サブメニューの背景色*/
  z-index: 9998;
}

.revel_list ul li ul li:hover {
  background:rgba(255,114,117,1.00);/*ホバー時のサブメニューの背景色*/
}

/*.revel_list ul li ul li {
  visibility: visible;
  overflow: visible;
  height:30px;/*サブメニューの高さ*/
 /* z-index: 9998;
}*/
.revel_list ul li ul li{
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

/* < レーベルドロップダウン */

.menu_ravellist{display:none;
	height:100px;
	background:rgba(0,0,0,1.00);}

.menu_t01{font-size:20px;
	line-height:20px;
	font-weight:bold;}
	
.menu_t02{font-size:14px;}

.search{float:right;
	padding:0 15px;}
	
.search input{padding:2px;
	margin-right:5px;}

.input_text{width:150px;}
	
#btn_search{width:100px;
	padding:2px 5px;
	cursor:pointer;}

/* メイン */

#main{width:100%;
	clear:both;
	margin:20px 0;}
	
.inner{width:960px;
	margin:10px auto;}

/* エリアタイトル・ラインカラー */

.area_title_red{height:24px;
	font-size:18px;
	font-weight:bold;
	background:url(../img/top2_title_mark_red.png);
	background-repeat:no-repeat;
	background-position:center left;
	text-indent:24px;
	overflow:hidden;}

.title_border_red{width:100%;
	height:2px;
	background:rgba(174,32,35,1.00);}
	
.area_title_blue{font-size:18px;
	font-weight:bold;
	background:url(../img/top2_title_mark_blue.png);
	background-repeat:no-repeat;
	background-position:center left;
	text-indent:24px;
	overflow:hidden;}

.title_border_blue{width:100%;
	height:2px;
	background:rgba(0,113,188,1.00);}

/* 商品共通 */
.item_name p{margin:0;
	padding:0;
	line-height:18px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;}

.creator p{padding:0;
	margin:0;
	line-height:20px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow:ellipsis;}
/* フッター */

#footer{width:100%;
	height:200px;
	background:rgba(174,32,35,1.00);
	overflow:hidden;}

.footer_link{text-align:center;
	overflow:hidden;
	margin:15px auto;}

.footer_link ul{display:inline-block;
	margin:0 auto;}

.footer_link ul li{float:left;
	padding:0 10px;
	font-size:14px;}

.footer_link a{color:rgba(255,255,255,1.00);}

.footer_link a:hover{opacity:0.5;}

.logo_footer{width:100%;
	text-align:center;}

.copyright{width:100%;
	text-align:center;
	font-size:12px;
	color:rgba(255,255,255,1.00);
	margin-top:50px;}

/* gotop */
.gotop{width:60px;
	height:60px;
	color:rgba(255,255,255,1.00);
	text-align:center;
	font-size:12px;
	background:rgba(100,100,100,1.00);
	border-radius:30px;
	position:fixed; bottom:10px; right:10px;
	z-index:7;}

.gotop:hover{opacity:0.7;}

.gotop_bar_left{width:21px;
	height:2px;
	position:absolute; top:27px; left:12px;
	-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
	background:rgba(255,255,255,1.00);}
	
.gotop_bar_right{width:21px;
	height:2px;
	position:absolute; top:27px; right:12px;
	-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
	background:rgba(255,255,255,1.00);}

.gotop_text{width:60px;
	position:absolute; top:40px;
	text-align:center;}

/* テキスト用 */

.tc_red{color:rgba(255,0,4,1.00);}

.tc_blue{color:rgba(0,116,255,1.00);}

.tc_gray{color:rgba(90,90,90,1.00);}

.fw_b{font-weight:bold;}

.ts12{font-size:12px;}

.ts14{font-size:14px;}

.ts16{font-size:16px;}

.ts18{font-size:18px;}

.ts20{font-size:20px;}

.ts22{font-size:22px;}

.ts24{font-size:24px;}

/* プレビューサイン */

.preview_mark{position:fixed; top:20px; left:20px;}

@media screen and ( max-width:736px )
{
body{width:100%;
	min-width:320px;
	overflow-x:hidden;}
	
.pc{display:none;}
.sp{display:block;}

#header{opacity:0;}

.header_sp{width:100%;
	height:70px;
	position:fixed; top:0; left:0;
	background:rgba(174,32,35,1.00);
	z-index:7;}

.header_sp img{height:50px;
	margin:10px;}

.search_sp input{padding:2px;
	margin-right:5px;}

.input_text_sp{width:100px;}
	
#btn_search_sp{width:80px;
	padding:2px 5px;
	cursor:pointer;}


#menu{width:0;}
/* メイン */

#main{width:100%;
	clear:both;
	margin:0;}
	
.inner{width:95%;
	min-width:320px;
	max-width:420px;
	margin:0 auto;}

.logo_footer{width:100%;
	padding-top:20px;
	text-align:center;}

/* 商品共通 */
.item_name p{margin:0;
	padding:0;
	line-height:18px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;}

/* gotop */
.gotop:hover{opacity:1.0;}

/* drawer menu */
.drawer-menu{display:block;}

.drawer-menu {
    box-sizing: border-box;
    position: fixed;
    top: 70px;
    left: 100%;
    width: 250px;
    height: 100vh;
    padding: 10px 0 70px;
    background: rgba(174,32,35,1.00);
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    /*-webkit-transform: perspective(500px) rotateY(90deg);
    transform: perspective(500px) rotateY(90deg);*/
	overflow-y:scroll;
    opacity: 1;
	z-index:8;
}

.drawer-menu li {
    text-align: left;
	padding-left:0;
}

.menu_head{font-size:28px;
	padding-bottom:10px;
	color:rgba(255,255,255,0.50);
	border-bottom:rgba(255,255,255,0.50) solid 1px;}

/*.drawer-menu li a:hover {
    color: #1a1e24;
    background: #fff;
}*/

/* checkbox */
.check {
    display: none;
}

/* menu button - label tag */
.menu-btn {
    position: fixed;
    top: 4px;
    right: 5px;
    display: block;
    width: 40px;
    height: 40px;
	padding:10px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
	background:rgba(174,32,35,1.00);
	border:rgba(255,255,255,1.00) solid 1px;
	border-radius:5px;
    z-index: 9;
}

.bar {
    position: absolute;
    top: 15px;
    left: 15px;
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

.bar.middle {
    top: 26px;
    opacity: 1;
}

.bar.bottom {
    top: 38px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.menu-btn_text {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: block;
    visibility: visible;
    opacity: 1;
}

.menu-btn:hover .bar {
    background:rgba(255,255,255,1.00);
}

.menu-btn:hover .menu-btn__text {
    color:rgba(255,255,255,1.00);
}

.close-menu {
    position: fixed;
    top: 0;
    left: 250px;
    width: 100%;
    height: 100vh;
    /*background: rgba(0,0,0,0);
    cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;*/
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    visibility: hidden;
    opacity: 0;
}

/* checked */
.check:checked ~ .drawer-menu {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    transform:translateX(-250px);
    left: 100%;
	opacity: 1;
    z-index: 9;
}

.check:checked ~ .container {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
}

.check:checked ~ .menu-btn .menu-btn__text {
    visibility: hidden;
    opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
    width: 36px;
	top:14px;
	left:17.5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
    opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
    width: 36px;
    top: 39px;
	left:17.5px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    background: rgba(0,0,0,0);
    visibility: visible;
    opacity: 1;
    z-index: 3;
}

/* サイドメニュー：サブ */
ul.accordion { background:rgba(174,32,35,1.00); width:100%; margin:0 auto; padding:0; font-size:14px;}
ul.accordion a { display:block; padding:0; background-position:97% center; background-repeat:no-repeat; text-decoration:none; color:#FFF;}
ul.accordion span { display:block; padding:0; background-position:97% center; background-repeat:no-repeat; color:#FFF;}
ul.accordion ul { display:none;}
ul.accordion > li { background:rgba(174,32,35,1.00); line-height:50px; text-indent:10px; border-bottom:rgba(255,255,255,1.00) dashed 1px;}
ul.accordion > li span,ul.accordion > li > ul > li span{background-image:url(../img/arrow2.png); background-size:20px 20px;}
ul.accordion > li > p { background:rgba(174,32,35,1.00); cursor:pointer; margin:1px; padding:0; line-height:50px;}
ul.accordion > li > p span { background-image:url(../img/open.gif);}
ul.accordion > li > p span.open { background-image:url(../img/close.gif);}
ul.accordion > li > ul > li { background:rgba(255,81,84,1.00); border-bottom:1px solid #EEE;}
ul.accordion > li > ul > li > p { background:rgba(37,89,167,1.00);}
ul.accordion > li > ul > li > a { background:url(../img/go.png) no-repeat 98% center;}
ul.accordion > li > ul > li > ul > li { background:rgba(37,89,167,1.00); border-bottom:1px dotted #888;}
ul.accordion > li > ul > li > ul > li:last-child { border:none;}

.sp_menu_tw{overflow:hidden;}

.sp_menu_tw_img{width:50px;
	height:50px;
	float:left;}

.sp_menu_tw_img img{width:100%;}
	
.sp_menu_tw_text{line-height:50px;
	float:left;}
	
.preview_mark{position:fixed; top:100px; left:20px;}
}