@charset "utf-8";
/* CSS Document */

/* ==============================================================
   00.LAYOUT
================================================================= */
.w940 {
	width: 940px;
	margin: 0 auto !important;
}
/* Less than 1069px */
@media screen and (max-width: 1069px) {
	.w940 { width:90%; }
}



/* ==============================================================
   01.BACKGROUND
================================================================= */
main#stripeBg {
	background: url("/img/common/33/bg_stripe.png") repeat center top / 16px auto;
	letter-spacing: 0.05em;
	line-height: 150%;
	color: #1a1a1a;
}
main#stripeBg div#stripeBgInner {
	background: -moz-linear-gradient(-80deg, rgba(255,255,255,0) 350px, rgba(255,255,255,100) 350px);
	background: -webkit-linear-gradient(-80deg, rgba(255,255,255,0) 350px, rgba(255,255,255,100) 350px);
	background: linear-gradient(170deg, rgba(255,255,255,0) 350px, rgba(255,255,255,100) 350px);
}
main#stripeBg .redTxt { color:#e60012; }
main#stripeBg img {
	max-width: 100%;
	height: auto;
}

/* ==============================================================
   02.BREADCRUMB
================================================================= */
div#breadcrumb_container {
	padding: 0.8em 15px 0.2em;
	border-bottom: 2px solid rgba(228,4,21,0.1);
}
div#breadcrumb_container ol {
	margin: 0;
	padding: 0;
	width: 60%;
	display: inline;
	float: left;
}
div#breadcrumb_container ol li {
	display: inline;
}
div#breadcrumb_container ol > li + li:before {
	content: ">\00a0";
	padding: 0 0.2em;
	color: #ccc;
}
div#breadcrumb_container ol {
	font-size: 83% !important;
}
div#breadcrumb_container div.ninja_onebutton {
    width: 40%;
    display: inline;
    float: right;
	clear: none !important;
}
@media screen and (max-width:768px) {
	div#breadcrumb_container { width:100%; }
}


/* ==============================================================
   03.BUTTON
================================================================= */
.linkBtn {
  display: block;
  max-width: 360px;
  margin: 0 auto;
  border: solid 2px #e60012;
  border-radius: 32px;
  background-color: #e60012;
  color: #FFF;
  text-align: center;
  transition: all 0.3s;
}
.linkBtn a {
	display: block;
	color: #fff;
	padding: 8px 16px;
}
.linkBtn:hover, .linkBtn:active, .linkBtn:focus {
  background-color: #FFF;
  outline: none;
}
.linkBtn a:hover, .linkBtn a:active, .linkBtn a:focus {
	color: #e60012 !important;
	text-decoration: none;
}
.linkBtn.reverse {
  background-color: #FFF;
  border-color: #e60012;
  color: #e60012;
}
.linkBtn.reverse:hover, .linkBtn.reverse:active, .linkBtn.reverse:focus {
  background-color: #e60012;
  color: #FFF !important;
}
.linkBtn.reverse:visited {
  background-color: #FFF;
  border-color: #e60012;
  color: #e60012;
}
.linkBtn:visited {
  color: #FFF;
  outline: none;
}

/* ==============================================================
   04.ATTENTION-NOTE
================================================================= */
ul.attentionNote {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 87%;
}
ul.attentionNote li {
	margin-bottom: 0.3em;
	padding-left: 1em !important;
    text-indent: -1em;
	line-height: 160%;
}
ul.attentionNote li:before {
    content: "※";
}

/* ==============================================================
   05.H1
================================================================= */
h1.texteffect,
h1.texteffectWrap {
	margin: 2em 0;
    text-align: center;
    font-weight: 200;
    font-size: 300%;
    letter-spacing: .1em;
}
h1.texteffectWrap span.fontS {
	display: block;
    font-size: 45%;
}
h2.texteffectWrap span.fontS {
	display: block;
    font-size: 55%;
}

/* ==============================================================
   06.SHOP LIST
================================================================= */
main#stripeBg section#shop_list {
	background: rgba(230,0,18,.05);
	padding: 4% 0;
}
	main#stripeBg section#shop_list.bgWrap { background:url("/shop/img/result/bg_town_pk.svg") no-repeat center top; padding:78px 0 0; }
	main#stripeBg section#shop_list.bgWrap div.bgInner { background:rgba(230,0,18,.05); padding:5% 0; }

main#stripeBg section#shop_list div.container {
    padding: 0;
    margin: 0 auto;
}
main#stripeBg section#shop_list div.container div.row {
	font-size: 0;
}
main#stripeBg section#shop_list div.container div.row h2 {
	font-size: 33px;
	font-weight: 200;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0 0 0.5em;
}
main#stripeBg section#shop_list div.linkBtn,
main#stripeBg section#shop_list ul.arealist li {
	display: inline-block;
	width: 31.2%;
	margin: 0.7% 1%;
	font-size: 18px;
}
main#stripeBg section#shop_list div.linkBtn.reverse a,
main#stripeBg section#shop_list ul.arealist li a {
	color: #e60012;
	margin: 0;
	padding: 0.6em 1em;
	background: none !important;
	font-weight: 400;
}
main#stripeBg section#shop_list div.linkBtn.reverse:hover,
main#stripeBg section#shop_list div.linkBtn.reverse:active,
main#stripeBg section#shop_list div.linkBtn.reverse:focus,
main#stripeBg section#shop_list ul.arealist li:hover,
main#stripeBg section#shop_list ul.arealist li:active,
main#stripeBg section#shop_list ul.arealist li:focus {
	background-color: #e60012;
}
main#stripeBg section#shop_list div.linkBtn.reverse:hover,
main#stripeBg section#shop_list div.linkBtn.reverse a:hover,
main#stripeBg section#shop_list ul.arealist li a:hover {
	color: #FFF !important;
	opacity: 1;
}
main#stripeBg section#shop_list h3 {
	font-size: 28px;
	margin: 1em 0 .8em;
	text-align: center;
	font-weight: 600;
}
	main#stripeBg section#shop_list h3::before { content:"［ " }
	main#stripeBg section#shop_list h3::after { content:" ］" }

main#stripeBg section#shop_list h3.areaname {
	pointer-events: none;
}
main#stripeBg section#shop_list ul.arealist {
	list-style: none;
	margin: 0;
	padding: 0;
}
main#stripeBg section#shop_list ul.arealist li {
	border: solid 2px #e60012;
	border-radius: 32px;
	background-color: #FFF;
	text-align: center;
	transition: all 0.3s;
}
main#stripeBg section#shop_list ul.arealist li a {
	display: block;
	color: #e60012;
}
main#stripeBg section#shop_list ul.arealist li:hover, main#stripeBg section#shop_list ul.arealist li:active, main#stripeBg section#shop_list ul.arealist li:focus {
	background-color: #e60012;
	color: #FFF !important;
}
main#stripeBg section#shop_list ul.arealist li:visited {
	background-color: #FFF;
	border-color: #e60012;
	color: #e60012;
}
main#stripeBg section#shop_list div.col-xs-12 {
	float: none;
}

/* ==============================================================
   99.LETTERFX
================================================================= */
.letterfx{display:inline-block;margin:0;padding:0;transition:all 1s;-ms-transition:all 1s;-webkit-transition:all 1s}.letterfx-spin-before{transform:rotate(3600deg);-ms-transform:rotate(3600deg);-webkit-transform:rotate(3600deg)}.letterfx-spin-after{transform:none}.letterfx-fade-before{opacity:0}.letterfx-grow-before{transform:scale(0,0);-ms-transform:scale(0,0);-webkit-transform:scale(0,0)}.letterfx-grow-after{transform:none}.letterfx-smear-before{color:transparent;text-shadow:-1px -1px 25px transparent}.letterfx-smear-after{color:inherit;text-shadow:0 0 #333}.letterfx-fall-before{visibility:hidden;transform:scale(3,3);-ms-transform:scale(3,3);-webkit-transform:scale(3,3)}.letterfx-fall-after{transform:scale(1,1);-ms-transform:scale(1,1);-webkit-transform:scale(1,1);text-shadow:0}.letterfx-swirl-before{visibility:hidden;transform:scale(3,3) rotate(3600deg);-ms-transform:scale(3,3) rotate(3600deg);-webkit-transform:scale(3,3) rotate(3600deg)}.letterfx-swirl-after{transform:none text-shadow:0}.letterfx-wave-container .letterfx{position:relative}.letterfx-wave-before{bottom:0}.letterfx-wave-after{bottom:15px}.letterfx-fly-left-container .letterfx,.letterfx-fly-right-container .letterfx,.letterfx-fly-top-container .letterfx,.letterfx-fly-bottom-container .letterfx{position:relative}.letterfx-fly-left-before{left:-50em}.letterfx-fly-left-after{left:0}.letterfx-fly-right-before{right:-50em}.letterfx-fly-right-after{right:0}.letterfx-fly-top-before{top:-20em}.letterfx-fly-top-after{top:0}.letterfx-fly-bottom-before{bottom:-20em}.letterfx-fly-bottom-after{bottom:0}


/* Less than 799px
----------------------------------------------------------------- */
@media screen and (max-width: 799px) {
	main#stripeBg section#shop_list div.container { width:85%; }
}

/* Less than 720px
----------------------------------------------------------------- */
@media screen and (max-width: 720px) {
	div#breadcrumb_container ol,
	div#breadcrumb_container div.ninja_onebutton { display:block; float:none; width:auto; }
	div#breadcrumb_container ol { margin-bottom:2%; }
	main#stripeBg section#shop_list div.linkBtn { width:47.9%; }
	main#stripeBg section#shop_list.bgWrap div.bgInner { padding:8% 0; }
}

/* Less than SP-LANDSCAPE
----------------------------------------------------------------- */
@media screen and (max-width:568px) {
	h1.texteffect, h1.texteffectWrap { font-size:8vw; margin:3rem 0; font-weight:600; }
	main#stripeBg section#shop_list div.linkBtn { width:auto; display:block; max-width:100% !important; margin:3% 0; }
	main#stripeBg section#shop_list h3.areaname { pointer-events:all !important; text-align:left; margin:0; position:relative;  padding:0.5em 1em; font-weight:600; cursor:pointer; background-color:#e94d59; color:#fff; border-bottom:2px solid #FEF2F3; font-size:6vw; }
		main#stripeBg section#shop_list h3.areaname::before { content:none; }
		main#stripeBg section#shop_list h3.areaname::after { content:'\f0ab'; font-family:FontAwesome; position:absolute; top:25%; right:5%; }
	main#stripeBg section#shop_list ul.arealist { display:none; }
	main#stripeBg section#shop_list ul.arealist li { display:block; width:auto; border-radius:0; margin:0; border-top:2px solid #e94d59; border-right:2px solid #e94d59; border-bottom:none; border-left:2px solid #e94d59; }
		main#stripeBg section#shop_list ul.arealist li:last-child { border-bottom:2px solid #e94d59; margin-bottom:2px; }
		main#stripeBg section#shop_list ul.arealist li:hover { background-color:#e94d59; }
	main#stripeBg section#shop_list ul.arealist li a { text-align:left; padding:0.8em 1em; font-size:4.5vw; }
	main#stripeBg section#shop_list ul.arealist li a::before { content:'\f054'; font-family:FontAwesome; padding-right:0.3em; font-size:81%; }
}