@charset 'utf-8';

/*------------------------------------------------------------------------------
 wrapper
 ------------------------------------------------------------------------------*/
#wrapper:after {
	height: 80px; /* footer */
}

/*------------------------------------------------------------------------------
 shopHeader
 ------------------------------------------------------------------------------*/
.shopHeader {
	z-index: 22; /* ※ */
}
.shopHeader nav {
	width: 197px !important;
	text-align: right;
}
.shopHeader li:nth-child(1) a:after {
	background-image: url(/sp/images/btn/shop-menu.png);
}
.shopHeader li:nth-child(2) a:after {
	background-image: url(/sp/images/btn/shop-tel.png);
	background-size: 30px 30px;
}
.shopHeader li:nth-child(3) a:after {
	background-image: url(/sp/images/btn/menu.png);
}

/* 320 */
@media screen and (max-width: 320px) {
	.shopHeader {
		padding: 5px 3px 5px 4px !important;
	}
	.shopHeader nav {
		width: 191px !important;
	}
	.shopHeader li {
		width: 62px !important;
	}
}

/*------------------------------------------------------------------------------
 shopMenu
 ------------------------------------------------------------------------------*/
#shopMenu {
	z-index: 99;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	visibility: hidden;
	opacity: 0;
	transition: .1s linear;
}

/* shopMenu_opened */
body.shopMenu_opened #shopMenu {
	visibility: visible;
	opacity: 1;
}
body.shopMenu_opened {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* shopMenuHeader
 ------------------------------------------------------------------------------*/
.shopMenuHeader {
	z-index: 2;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	background: #333;
	border-bottom: 1px solid #777;
	box-shadow: 0 1px 6px 0 rgba(255, 255, 255, .35);
}
.shopMenuHeader .name {
	min-width: 0;
}
.shopMenuHeader .name a {
	font-size: 17px;
	font-weight: bold;
	color: #56B0F5;
	text-decoration: none;
}

/* telBtn */
.shopMenuHeader .telBtn {
	margin-left: auto;
	display: block;
	width: 38px;
	height: 38px;
	text-decoration: none;
}
.shopMenuHeader .telBtn img {
	height: 100%;
}

/* shopMenuBody
 ------------------------------------------------------------------------------*/
.shopMenuBody {
	z-index: 1;
	position: fixed;
	left: 0;
	top: 54px;
	width: 100%;
	height: calc(100vh - 54px); /* fallback */
	height: calc(calc(var(--vh, 1vh) * 100) - 54px);
	padding: 10px 0 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
}

/* shopMenuFooter
 ------------------------------------------------------------------------------*/
.shopMenuFooter {
	height: 50px;
	padding: 8px 0;
	background: #333;
}
.shopMenuFooter a.close {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 80%;
	margin: 0 auto;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	background: #999;
	border-radius: 3px;
}

/* PC
 ------------------------------------------------------------------------------*/
@media screen and (min-width: 481px) {
	#shopMenu,
	.shopMenuHeader,
	.shopMenuBody,
	.shopMenuFooter {
		left: calc(50% - calc(375px / 2));
		width: 375px;
	}
}

/*------------------------------------------------------------------------------
 shopMenuList
 ------------------------------------------------------------------------------*/
.shopMenuList {
	margin-top: 15px;
}
.shopMenuList .menu {
	margin: 15px 8px;
	color: #FFF;
}
.shopMenuList .menu h3 {
	margin: 0 3px;
	font-size: 13px;
	font-weight: normal;
	border-bottom: 1px solid #999;
}
.shopMenuList .menu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 3px 0 0;
}
.shopMenuList .menu li {
	width: 50%;
	padding: 3px;
}
.shopMenuList .menu li.wide {
	width: 100%;
}
.shopMenuList .menu li .box {
	position: relative;
	text-align: center;
	display: block;
	height: 34px;
	line-height: 34px;
	padding-right: 15px;
	color: #FFF;
	text-shadow: 0 1px 1px #555;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	background: #FFF;
	border-radius: 5px;
}
.shopMenuList .menu li .box:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 7px;
	display: block;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
}
.shopMenuList .menu li .box:active {
	color: yellow;
}
.shopMenuList .menu li .box:active:after {
	border-color: yellow;
}
.shopMenuList .menu:nth-child(1) li .box { background: #00C9ED; }
.shopMenuList .menu:nth-child(2) li .box { background: #F14378; }
.shopMenuList .menu:nth-child(3) li .box { background: #F78D15; }
.shopMenuList .menu:nth-child(4) li .box { background: #1F9D78; }
.shopMenuList .menu li span.box {
	color: #DDD;
	opacity: 0.5;
}
.shopMenuList .menu li span.box:after {
	border-color: #DDD;
}

/* 320 */
@media screen and (max-width: 320px) {
	.shopMenuList .menu li .box._ov {
		padding-right: 5px;
		letter-spacing: -1px;
	}
	.shopMenuList .menu li .box._ov:after {
		right: 4px;
	}
}

/* shopMenuPlans
 ------------------------------------------------------------------------------*/
.shopMenuPlans {
	margin: 15px 8px;
}
.shopMenuPlans img {
	width: 100%;
}

/* shopMenuBtns
 ------------------------------------------------------------------------------*/
.shopMenuBtns {
	display: flex;
	margin: 15px 8px;
}
.shopMenuBtns li {
	width: 50%;
	padding: 0 5px;
}
.shopMenuBtns li img {
	width: 100%;
}
.shopMenuBtns li img.off {
	opacity: 0.4;
}

/*------------------------------------------------------------------------------
 shopHeaderName
 ------------------------------------------------------------------------------*/
.shopHeaderName {
	z-index: 10;
	position: relative;
	width: 100%;
	padding: 7px 5px;
	color: #56B0F5;
	background: #000;
	border-top: 1px solid #333;
}
.shopHeaderName span {
	font-size: 14px;
	color: #FFF;
}
.shopHeaderName span a {
	color: #FFF;
	text-decoration: none;
}
.shopHeaderName > a {
	font-size: 14px;
	color: #56B0F5;
	text-decoration: none;
}

/*------------------------------------------------------------------------------
 shopTextMssg
 ------------------------------------------------------------------------------*/
.shopTextMssg {
	z-index: 10;
	position: relative;
	overflow: hidden;
	width: 100%;
	background: url(/sp/images/shop/shop-mssg-bg.jpg);
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}
#shopTextMssg {
	position: relative;
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
}
#shopTextMssg li {
	position: relative;
	display: inline-block;
	padding-right: 100px;
}
#shopTextMssg li:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	width: 10px;
	height: 10px;
	margin-top: -3px;
	background: crimson;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
}
#shopTextMssg li a {
	display: block;
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: skyblue;
}

/*------------------------------------------------------------------------------
 shopContent
 ------------------------------------------------------------------------------*/
#shopContent {
	min-height: 100px;
}

/*------------------------------------------------------------------------------
 shopContentHeader
 ------------------------------------------------------------------------------*/
.shopContentHeader {
	z-index: 11; /* ※10+1 for niceSelect */
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	color: #FFF;
	background: linear-gradient(#F2772A, #F2772A 50%, #EB6100 51%, #DC5400);
	border-bottom: 1px solid #999;
}

/* h2 */
.shopContentHeader h2 {
	margin: 0 5px;
}
.shopContentHeader h2,
.shopContentHeader h2 a {
	font-size: 18px;
	text-shadow: 0px -1px 0px #248;
}
.shopContentHeader h2 small {
	padding-left: 5px;
	font-size: 15px;
	font-weight: normal;
}

/* link */
.shopContentHeader .link {
	position: relative;
	display: inline-block;
	margin: 0 5px 0 auto;
	padding: 7px 10px;
	padding-right: 20px;
	color: #36C;
	text-decoration: none;
	background: #FFF;
	border-radius: 9px;
}
.shopContentHeader .link:after {
	position: absolute;
	top: 50%;
	right: 10px;
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-style: solid solid none none;
	border-width: 2px;
	border-color: #36C;
	transform: rotate(45deg);
}

/* links */
.shopContentHeader .links {
	margin: 0 5px 0 auto;
	display: flex;
	align-items: center;
}
.shopContentHeader .links._gap {
	gap: 1px;
}
.shopContentHeader .links a {
	display: inline-block;
	padding: 7px 10px;
	color: #36C;
	background: #FFF;
	border: 1px solid #FFF;
}
.shopContentHeader .links a.on {
	color: #FFF;
	background: deeppink;
	text-decoration: none;
}
.shopContentHeader .links a:nth-child(1) {
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
}
.shopContentHeader .links a:nth-child(2) {
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}

/* rside */
.shopContentHeader .rside {
	margin: 0 5px 0 auto;
}

/*------------------------------------------------------------------------------
 shopContentInfo
 ------------------------------------------------------------------------------*/
.shopContentInfo {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 10px 6px;
	background: #EEE;
	border-bottom: 1px solid #DDD;
}
.shopContentInfo .number {
	font-weight: bold;
	font-family: Arial;
		margin-top: -2px;
	color: #26B;
}
.shopContentInfo .rfix {
	margin-left: auto;
}
.shopContentInfo .rfix .number {
	color: #F60;
}

/*------------------------------------------------------------------------------
 shopContentTab
 ------------------------------------------------------------------------------*/
.shopContentTab {
	text-align: center;
	padding: 10px 0;
	letter-spacing: -0.4em;
		from(#B2BBCA),
		color-stop(0.25, #A7B0C3),
		color-stop(0.50, #909CB3),
		color-stop(0.51, #8593AC),
		color-stop(0.75, #7C8BA5),
		to(#73839F));
	background: linear-gradient(
		#B2BBCA,
		#A7B0C3 25%,
		#909CB3 50%,
		#8593AC 51%,
		#7C8BA5 75%,
		#73839F
	);
}
.shopContentTab li {
	display: inline-block;
	width: 100px;
	letter-spacing: normal;
}
.shopContentTab li a,
.shopContentTab li span {
	position: relative;
	display: block;
	width: 100%;
	line-height: 38px;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
		from(#92A1BF),
		color-stop(0.25, #798AAD),
		color-stop(0.50, #6276A0),
		color-stop(0.51, #556A97),
		color-stop(0.75, #566C98),
		to(#546993)); 
	background: linear-gradient(
		#92A1BF,
		#798AAD 25%,
		#6276A0 50%,
		#556A97 50%,
		#566C98 75%,
		#546993
	);
	border-style: solid;
	border-width: 1px;
	border-color: #484E59 #54617D #4C5C7A #54617D;
}
.shopContentTab li a {
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
.shopContentTab li a.on {
	color: #D92A85 !important;
}
.shopContentTab li span {
	color: #D92A85;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.6);
}
.shopContentTab li span.shiftColor {
	color: #F6925F;
}
.shopContentTab li:first-child a {
	border-left-style: solid;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.shopContentTab li:last-child a {
	border-right-style: solid;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.shopContentTab li a:active {
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), inset 0 -1px 3px rgba(0,0,0,0.5);
}
.shopContentTab li a.off {
	color: #AAA;
}

/*------------------------------------------------------------------------------
 twSwitch
 ------------------------------------------------------------------------------*/
.twSwitch {
	text-align: right;
	height: 34px;
	line-height: 34px;
	padding: 0 5px;
	color: #111;
	border-bottom: 1px solid #CCC;
}
.twSwitch .name {
	font-size: 13px;
}
.twSwitch .part {
	text-align: center;
	display: inline-block;
	width: 40px;
	height: 26px;
	line-height: 26px;
}
.twSwitch .part.on {
	color: #FFF;
	background: deeppink;
	border-radius: 2px;
}

/*------------------------------------------------------------------------------
 shopFooter
 ------------------------------------------------------------------------------*/
.shopFooter li:nth-child(1) a:after {
	background-image: url(/sp/images/btn/menu.png);
}
.shopFooter li:nth-child(2) a:after {
	background-image: url(/sp/images/btn/user.png);
}
.shopFooter li:nth-child(3) a:after {
	background-image: url(/sp/images/btn/shop-home.png);
}
.shopFooter li:nth-child(4) a:after {
	background-image: url(/sp/images/btn/shop-pagetop.png);
}