@charset "utf-8";
/* ===================================================================
CSS information

file name  :common.css
style info  :ベース設定
=================================================================== */
.pc{display:block;}
.sp{display:none;}

/*--------------------------------------------------------------------
基本設定
--------------------------------------------------------------------*/
html,body {
width:100%;
height:100%;
}

html {
height:100%;
overflow-y:scroll;
}

/*--Text------------------------------------------------------------*/
body {
font-size:88%;
font-weight:normal;
line-height:1.5;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
color: #555555;
}

* html body {/*IE6*/
font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

*:first-child + html body {/*IE7*/
font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

h2,h3,h4,h5,h6 {
font-size:100%;
}

/*--Link------------------------------------------------------------*/
a,a:link {color:#333333;}
a:visited {color:#333333;}
a:hover,a:active {color:#777777;}
a:focus {outline:none;}


/*--HTML5-----------------------------------------------------------*/
article,aside,details,footer,header,hgroup,menu,nav,section,summary {
display:block;
}


/*--------------------------------------------------------------------
共通パーツ
--------------------------------------------------------------------*/

h2 {
}

#column1 p {
}

#column2 p {
}

#wrap-btm p {
}

#wrapper {
overflow:hidden;
background: #ffffff;
margin: 0 auto;
}

.btn_base_01{
border: 1px solid #BC2B1C;
background: #ffffff;
border-radius: 100px;        /* CSS3草案 */  
-webkit-border-radius: 100px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 100px;   /* Firefox用 */  
text-align: center;
padding: 5px 10px;
display: inline-block;
font-size: 0.9em;
}

.btn_base_01 a{
color: #BC2B1C;
display: block;
}

.btn_base_01 img{
margin: 0 2px 0 0;
}

/*--------------------------------------------------------------------
header（ヘッダー部分）
--------------------------------------------------------------------*/
header {
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
}

header .logo_area{
padding: 10px 0 0 10px;
overflow: hidden;
display: inline-block;
}

header .logo_area img{
	width: 190px;
}

header .catch{
font-size: 0.8em;
margin: 0 0 5px 0;

}

header .logo_area h1{
	margin: 5px 0 0 0;
}

header .souryou_area{
float: right;
background: #BC2B1C;
color: #ffffff;
margin: 10px 10px 0 0;
padding: 7px 10px;
font-size: 0.7em;
border-radius: 3px;        /* CSS3草案 */  
-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 3px;   /* Firefox用 */  
}

header .menu_area{
margin: 10px 0;
padding: 10px 0;
background: #FDEAE8;
}

header .menu_area ul{
margin: 0 10px;
padding: 10px 0 5px 0;
}

header .menu_area ul li{
margin: 0 0 5px 0;
}


/*--------------------------------------------------------------------
content（コンテンツ部分）
--------------------------------------------------------------------*/
#content {
clear: both;
}

#content #main_column{
max-width: 1000px;
margin: 0 auto;
}

.genre_list{
background: #E3E3E3;
padding: 20px 10px;
clear: both;
margin: 0 0 30px 0;
}

.genre_list h2{
color: #BC2B1C;
font-weight: bold;
font-size: 1.2em;
margin: 0 20px 20px 15px;
text-align: center;
}

.genre_list ul{
max-width: 1000px;
margin: 0 auto;
text-align: center;
}

.genre_list li{
display: inline-table;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
color: #ffffff;
margin: 0 5px 10px 5px;
position: relative;
}

.genre_list li a{
color: #ffffff;
position:absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 40px 0 0 0;
}

.genre_list li.genrebtn_09 a{
padding: 32px 0 0 0;
}

.genre_list li.genrebtn_01{background: url("../images/bg_genre_01.png");}
.genre_list li.genrebtn_02{background: url("../images/bg_genre_02.png");}
.genre_list li.genrebtn_03{background: url("../images/bg_genre_03.png");}
.genre_list li.genrebtn_04{background: url("../images/bg_genre_04.png");}
.genre_list li.genrebtn_05{background: url("../images/bg_genre_05.png");}
.genre_list li.genrebtn_06{background: url("../images/bg_genre_06.png");}
.genre_list li.genrebtn_07{background: url("../images/bg_genre_07.png");}
.genre_list li.genrebtn_08{background: url("../images/bg_genre_08.png");}
.genre_list li.genrebtn_09{background: url("../images/bg_genre_09.png");}
.genre_list li.genrebtn_10{background: url("../images/bg_genre_10.png");}

.genre_list li.genrebtn_01,
.genre_list li.genrebtn_02,
.genre_list li.genrebtn_03,
.genre_list li.genrebtn_04,
.genre_list li.genrebtn_05,
.genre_list li.genrebtn_06,
.genre_list li.genrebtn_07,
.genre_list li.genrebtn_08,
.genre_list li.genrebtn_09,
.genre_list li.genrebtn_10{
background-size: cover;
}

.js-animation {
opacity: 0;
visibility: hidden;
transform: translateY(40px);
transition: all 1s;
}
.js-animation.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}

.all_shoplist{
padding: 30px 0 70px;
text-align: center;
}

.all_shoplist p{
font-weight: bold;
font-size: 1.2em;
padding: 10px 40px;
background: #BC2B1C;
color: #ffffff;
margin: 0 0 20px 0;
}

.all_shoplist a{
color: #ffffff;
}
/*--------------------------------------------------------------------
footer部分
--------------------------------------------------------------------*/
#wrap-btm {
clear:both;
background: #2E2E2E;
color: #ffffff;
}

#wrap-btm footer {
max-width: 1000px;
margin: 0 auto;
}

.footer_logo{
padding: 40px 0 30px 20px;
}

.footer_logo img{
	width: 300px;
}


.footer_link{
padding: 0 0 40px 20px;
overflow: hidden;
}

.footer_link ul{
float: left;
width: 50%;
}

.footer_link li{
margin: 0 0 10px 0;
}

.footer_link a{
color: #ffffff;
}

.copyright{
clear: both;
text-align: center;
padding: 0 0 10px 0;
font-size: 0.8em;
}

/*--------------------------------------------------------------------
センター固定 or リキッドレイアウトの変更
（リキッドレイアウトにする場合はwidthを100%に変更）
--------------------------------------------------------------------*/
header,
#content{
/*max-width:1000px;*/
/*margin: 0 auto;*/
}


/*----------------------------------------------------
リンク画像ロールオーバー設定
----------------------------------------------------*/

a img{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

a:hover img{
opacity: 0.6;
filter: alpha(opacity=40);
}

a:hover img.nonfade{
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity:1;
-webkit-transition: 0s ease-in-out;  
-moz-transition: 0s ease-in-out;  
-o-transition: 0s ease-in-out;  
transition: 0s ease-in-out;
}


/*----------------------------------------------------
ラジオボタン装飾
----------------------------------------------------*/
input[type=checkbox],input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
vertical-align: -0.8rem;
transition:all .15s ease-out 0s;
color: #fff;
cursor: pointer;
display: inline-block;
margin: .4rem;
outline: none;
border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
position: absolute;
content: "";
background: #fff;
transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
left: 2px;
top: 6px;
width: 0;
height: 2px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
input[type=checkbox]:after {
right: 9px;
bottom: 3px;
width: 2px;
height: 0;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transition-delay: .2s;
}
input[type=checkbox]:checked:before {
left: 1px;
top: 10px;
width: 6px;
height: 2px;
}
input[type=checkbox]:checked:after {
right: 5px;
bottom: 1px;
width: 2px;
height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
width: 7px;
height: 2px;
transform: rotate(0);
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
left: 1px;
top: 7px;
}
input[type=checkbox]:indeterminate:after {
right: 1px;
bottom: 7px;
}
/* Radio */
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:checked:before {
transform: scale(1);
}
input[type=radio]:before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 3px;
transform: scale(0);
transition: all ease-out 250ms;
}
/* 色は青色のみ */
input[type=checkbox].red,input[type=radio].red {
border: 2px solid #BC2B1C;
}
input[type=checkbox].red:checked,input[type=checkbox].red:indeterminate,input[type=radio].red:checked:before {
background: #BC2B1C;
}

input.sysNextSubmit {
	font-weight: bold;
	border-radius: 0;
	color: #ffffff;
	background: #BC2B1C;
	padding: 10px 50px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	font-size:1.4em;
	border: 0;
}
input.sysNextSubmit:hover {
opacity: 0.6;
filter: alpha(opacity=40);
}


/*--------------------------------------------------------------------
▼画面サイズ（横幅）が640px以上の場合に適用
--------------------------------------------------------------------*/
@media screen and (min-width: 640px) {
	
header .logo_area img {
width: max-content;
}

header .menu_area{
float: right;
padding: 5px 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

header .souryou_area {
margin: 18px 10px 0 15px;
}

.genre_list li{
width: 155px;
height: 155px;
font-size: 1.2em;
font-weight: bold;
}

.genre_list li a{
padding: 65px 0 0 0;
}

.genre_list li:hover{
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
opacity: 0.6;
filter: alpha(opacity=40);
}

.genre_list li.genrebtn_09 a{
padding: 55px 0 0 0;
}

.footer_logo {
float: left;
padding: 50px 0 30px 20px;
}

.footer_logo img{
width: 350px;
}

.footer_link {
float: right;
margin: 50px 0 0 0;
width: 500px;
}










}