/*Custom Page css*/
body	{ font-size: 16px;}

.row	{display: table;}
.row > .col	{display: table-cell; vertical-align: top;}

.content a	{word-break: break-all;}

/* 購入方法 */
.page-purchase .func-tab .ui-tab	{margin-bottom: 20px;}
.page-purchase .func-tab .ui-tab ul	{font-size: 0; border-top: 1px solid #4a000d; border-right: 1px solid #4a000d; border-left: 1px solid #4a000d;}
.page-purchase .func-tab .ui-tab ul li	{display: inline-block; width: 50%;font-size: 16px;}
.page-purchase .func-tab .ui-tab ul li span	{display: block; color: #ffffff; background-color: #f00; text-align: center; cursor: pointer;}
.page-purchase .func-tab .ui-tab ul li span:hover, .page-purchase .func-tab .ui-tab ul li span:active	{font-weight: bold;}
.page-purchase .func-tab .ui-tab ul li.active span	{color: #f00; background-color: #ffffff; font-weight: bold;}
.page-purchase .func-tab .content-tab	{display: none;}
.page-purchase .func-tab .content-tab.active	{display: block;}
.page-purchase .ui-step > li	{padding-bottom: 20px;list-style:none;}
.page-purchase .ui-step > li .row	{width: 100%; margin-bottom: 20px; font-weight: bold;}
.page-purchase .ui-step > li .row .col	{padding: 20px; color: #ffffff; background-color: #000000;}
.page-purchase .ui-step > li .row .col:first-child	{padding: 20px 0; color: #ffffff; background-color: #f00; text-align: center;}
.page-purchase .figure	{margin: 0 auto 20px; text-align: center;}
.page-purchase .ui-step > li ol li	{position: relative; padding-left: 25px;}
.page-purchase .ui-step > li ol li:before	{display: block; position: absolute; left: 0; top: 2px;  width: 20px; height: 20px; color: #ffffff; background-color: #f00; border-radius: 10px; line-height: 20px; text-align: center;}
.page-purchase .ui-step > li ol li:nth-of-type(1):before	{content: "1";}
.page-purchase .ui-step > li ol li:nth-of-type(2):before	{content: "2";}
.page-purchase .ui-step > li ol li:nth-of-type(3):before	{content: "3";}
.page-purchase .ui-step > li ol li:nth-of-type(4):before	{content: "4";}
.page-purchase .ui-step > li ol li:nth-of-type(5):before	{content: "5";}
.page-purchase .ui-step > li strong	{display: block; margin: 10px 0; padding: 10px; color: #f00; background-color: #fff2f5; border-bottom: 2px solid #f00;}
.page-purchase .ui-step > li p	{margin-bottom: 20px;}
.page-purchase .ui-step li ol li {list-style:none;}
/* 支払・受取方法 */
	
	/*
.page-howto .content table {width: 100%; border-collapse: collapse;}
.page-howto .content table th, .page-howto .content table td {padding: 15px; border: 5px solid #ffffff; vertical-align: middle;}
.page-howto .content thead th {color: #ffffff; background-color: #f00; font-size: 14px;}
.page-howto .content tbody th {color: #ffffff; background-color: #4a000d; text-align: center;}
.page-howto .content tbody tr:nth-of-type(4) th {background-color: #00ab4e;}
.page-howto .content tbody tr:nth-of-type(4) td {background-color: #d9f2e5;}
.page-howto .content tbody tr:nth-of-type(5) th {background-color: #044a28;}
.page-howto .content tbody tr:nth-of-type(5) td {background-color: #d9f2e5;}
.page-howto .content tbody td {background-color: #e7e7e7;}
.page-howto .content tbody td a:hover {color: #333333}
.page-howto .content thead tr th:nth-of-type(3), .page-howto .content thead tr th:nth-of-type(4), .page-howto .content tbody tr td:nth-of-type(2), .page-howto .content tbody tr td:nth-of-type(3) {text-align: center;}
	*/
.item-box	{margin-bottom: 50px; border: 5px solid #4a000d; border-radius: 10px; overflow: hidden;}
.item-box.box-famima	{border: 5px solid #00ab4e;}
.item-box.box-seven	{border: 5px solid #044a28;}
.item-box ul li{list-style:none;}
.content-box	{padding: 20px;}
.heading	{color: #ffffff; background-color: #4a000d;}
.item-box.box-famima .heading	{color: #ffffff; background-color: #00ab4e;}
.item-box.box-seven .heading	{color: #ffffff; background-color: #044a28;}
.heading .row-lg	{width: 100%;}
.heading .row-lg .col .list-deal:first-child	{border-bottom: 2px solid #ffffff;}
.heading .row-lg .col .list-deal span	{display: inline-block; width: 250px; padding: 10px 0; color: #ffffff; background-color: #e70012; font-size: 20px; text-align: center;}
.heading .row-lg .col .list-deal:last-child span	{background-color: #0e6eb8;}
.heading .row-lg .col .list-deal p	{display: inline-block; padding: 10px 20px; font-size: 20px; font-weight: bold;}
.heading .row-lg .col:last-child	{ position: relative; width: 250px; color: #333333; background-color: #fff100; border-left: 2px solid #ffffff; font-size: 20px; text-align: center; vertical-align: middle;}
.heading .row-lg .col:last-child:before	{ content: "手数料"; background-color: #f8b62a;}
.item-box.box-famima .heading .row-lg .col:last-child:after	{ color: #00ab4e;}
.item-box.box-seven .heading .row-lg .col:last-child:after	{ color: #044a28;}
.heading .row-lg .col:last-child p	{ padding-top: 50px;}
.item-box .num-title	{display: block; margin: 10px 0; padding: 10px;  background-color: #e7e7e7;}
.item-box .num-title span	{display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-right: 5px; color: #ffffff; background-color: #f00; border-radius: 15px; font-size: 14px; text-align: center;}

/* FAQ */
.faq-title, .howto-title	{display: block; margin-bottom: 20px; padding-bottom: 20px; color: #f00; border-bottom: 2px solid #f00; font-size: 20px;}
.faq-title { margin-top: 20px;}
.faq-title:nth-of-type(1)	{padding-top: 20px;}
.ui-faq	{padding-bottom: 40px;}
.ui-faq dt	{position: relative; margin-bottom: 20px; padding: 3px 10px 3px 40px; color: #f00; background-color: #e7e7e7; font-weight: bold;}
.ui-faq dt:before	{display: block; content: "Q"; position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; color: #ffffff; background-color: #f00; text-align: center;}
.ui-faq dd	{position: relative; margin-bottom: 20px; padding: 3px 0 0 40px;}
.ui-faq dd:before	{display: block; content: "A"; position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; color: #ffffff; background-color: #a39054; border-radius: 15px; text-align: center;}

	
	/* その他 */
.page-title	{margin-bottom: 20px; padding: 40px 0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f00+0,4a000d+47,f00+100 */
background: rgb(155,0,32); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgb(255 1 0) 0%,rgb(204 16 16) 47%,rgb(255 1 0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgb(255 1 0) 0%,rgb(204 16 16) 47%,rgb(255 1 0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgb(255 1 0) 0%,rgb(204 16 16) 47%,rgb(255 1 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#f00', endColorstr='#f00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;}
.page-title h1	{color: #ffffff; font-size: 20px; text-align: center;}
hr	{border: none; margin: 0; padding: 0; outline: none;}
hr.spacer-15	{height: 15px;}
hr.spacer-30	{height: 30px;}
hr.spacer-45	{height: 45px;}

	
	@media only screen and (min-width: 788px) {
.only-sm	{display: none;}

.container	{width: 980px; margin-right: auto; margin-left: auto;}
.row-lg	{display: table;}
.row-lg > .col	{display: table-cell; vertical-align: top;}

.regular-ticket .list-match li .col:nth-of-type(2):before	{display: inline-block; content: "VS"; margin: 0 10px; font-weight: normal;}
.regular-ticket .list-match li .col:nth-of-type(2) img	{ width: 100px; margin-right: 10px; vertical-align: middle;}
		
.page-top .content	{padding-top: 30px;}
.match-header .container	{ position: relative; padding: 60px 0;}
.match-header .container .info-match	{ position: absolute; top: 60px; left: 200px; width: 580px; font-size: 20px; text-align: center;}
.match-header .container .info-match p	{ margin-top: 10px; font-size: 16px;}
.match-header .row .col .club-name	{ width: 200px;}
.ticket-match	{width: 280px; margin: 0 auto;}
.ticket-match div a	{position: relative;}
.ticket-match div a:before	{display: block; content: ""; position: absolute; top: 0; left: -280px; width: 100%; height: 100%; background-color: #4a000d;}
.ticket-match div a:hover:before	{left: 0; -webkit-transition: all 0.25s;-moz-transition: all 0.25s;-ms-transition: all 0.25s;-o-transition: all 0.25s;transition: all 0.25s; z-index: 0;}
.ticket-match div a b	{display: block; position: relative; z-index: 10;}
.match-header .ticket-match	{position: absolute; bottom: 0; left: 350px; width: 280px;}
.ticket-match div a	{height: 60px; line-height: 60px; margin-bottom: 10px; border-radius: 30px;}
.seat-price .stadium-area	{position: relative; margin-bottom	: 40px; font-size: 0;}
.seat-price .stadium-figure, .seat-price .dynamicpricing	{display: inline-block; width: 47.959%; font-size: 16px;}
.seat-price .stadium-figure	{margin-right: 4.081%;position: -webkit-sticky;  position: sticky; top: 15px;}
.seat-price .dynamicpricing table {max-width: 100%;}
.seat-price .gameinfo-txt	{margin-bottom: 20px; font-size: 16px;}
.page-purchase .func-tab .ui-tab	{padding: 0 40px; border-bottom: 1px solid #f00;}
.page-purchase .func-tab .ui-tab ul li.active	{position: relative; vertical-align: top;}
.page-purchase .func-tab .ui-tab ul li span	{height: 60px; line-height: 60px;}
.page-purchase .func-tab .ui-tab ul li.active span	{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 61px; }
.page-purchase .func-tab .ui-tab ul li span:hover	{-webkit-transition: all 0.25s; -moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.page-purchase .ui-step > li	{position: relative; margin-bottom: 10px; z-index: 1;}
.page-purchase .ui-step > li:before	{display: block; content: ""; position: absolute; top: 0; left: 48px; width: 4px; height: 100%; background-color: #f00; z-index: 0;}
.page-purchase .ui-step > li:after	{display: block; content: "\f107"; position: absolute; bottom: 0; left: 30px; width: 40px; height: 30px; line-height: 1.0; vertical-align: bottom; text-align: center; color: #f00; font-family: fontAwesome; font-size: 50px; z-index: 0;}
.page-purchase .ui-step > li:last-child:before, .page-purchase .ui-step > li:last-child:after	{display: none}
.page-purchase .ui-step > li .row .col:first-child	{position: relative; width: 100px; z-index: 10;}
.page-purchase .ui-step > li .inner	{padding-left: 100px;}
.heading .row-lg .col:last-child:after	{ display: block; content: "\f061"; position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; line-height: 40px; margin-top: -20px; color: #4a000d; background-color: #ffffff; border-radius: 20px; font-family: fontAwesome; font-size: 30px;}
.heading .row-lg .col:last-child:before	{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50px; line-height: 50px;}
}
@media only screen and (max-width: 787px) {
.only-lg	{display: none;}

.match-header .container	{ padding-bottom: 20px;}
.match-header .container .info-match	{ margin-top: 20px;  font-size: 16px; text-align: center;}
.match-header .container .info-match p	{ margin-top: 10px; font-size: 14px;}
.match-header .row	{ position: relative;}
.match-header .row .col	{ width: 50%; text-align: center;}
.match-header .row .col:first-child:before	{ display: block; content: "VS"; position: absolute; top: 50%; left: 50%; width: 100px; height: 40px; line-height: 30px; margin: -20px 0 0 -50px; font-size: 30px;}
.match-header .row .col .club-name	{ width: 50%; margin: 0 10% 0 40%;}
.match-header .row .col:first-child .club-name	{ margin: 0 40% 0 10%;}
.match-header .row .col .club-name img	{ width: 100%;}

.ticket-match div	{width: 200px; margin: 0 auto;}
.ticket-match div a	{height: 60px; line-height: 60px; margin-bottom: 20px; border-radius: 30px;}
.ticket-match div a:active	{color: #ffffff; background-color: #4a000d;}
.seat-price .stadium-figure, .seat-price .dynamicpricing	{padding: 20px;}
.seat-price .dynamicpricing table {max-width: 100%;}
.seat-price .gameinfo-txt	{padding: 0 20px;}
.page-purchase .func-tab .ui-tab	{padding: 10px 10px 0; background-color: #f00; }
.page-purchase .func-tab .ui-tab ul li span	{height: 40px; line-height: 40px; background-color: rgba(255,0,0,0.25); font-size: 14px;}
.page-purchase .figure img	{width: 100%; max-width: 100%;}
.page-purchase .ui-step > li .row .col:first-child	{width: 100px;}
.page-purchase .inner	{padding: 0 20px}
/*
 * .page-howto .content .wrap-table {width: 100%; margin-top: 20px; overflow: scroll;}
.page-howto .content .wrap-table:before {display: block; content: "※表は右にスクロールできます"; padding: 0 0 5px 5px; font-size: 12px;}
.page-howto .content .wrap-table table th, .page-howto .content .wrap-table table td {padding: 10px; white-space: nowrap;}
.page-howto .content .wrap-table + p {padding: 10px 20px 0; font-size: 14px;}*/
.item-box	{border: none !important;}
.heading	{margin: 0 20px;}
.heading .row-lg .col .list-deal span	{display: inline-block; width: 25%; font-size: 14px;}
.heading .row-lg .col .list-deal p	{display: inline-block; width: 75%; font-size: 12px;}
.heading .row-lg .col:last-child	{ width: 100%;  font-size: 0; border-left: none; text-align: center; vertical-align: middle;}
.heading .row-lg .col:last-child:before	{ display: inline-block; width: 25%; padding: 5px 0; vertical-align: top; font-size: 14px;}
.heading .row-lg .col:last-child .fee	{ display: inline-block; width: 75%; padding: 5px 0; vertical-align: top; font-size: 14px;}
.heading .row-lg .col:last-child .fee p	{ display: inline-block; padding-top: 0;}
.faq-title, .howto-title	{padding: 20px;}
.ui-faq	{margin: 0 20px;}
.page-title	{margin-bottom: 0; padding: 20px 0;}
}