@import url(//fonts.googleapis.com/css?family=Anton);
@charset "utf-8";

@import url("/asset/css/kouenkai_sp.css");
/* =========================================================
共通スタイル
========================================================= */
html{
}

body {
	background: #ffffff;
	color: #313131;
	min-width: 900px;
	padding-top: 136px;
}

*{	 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;}

.clear{	clear: both;}

.red{	color: #b80000;}
.gold{	color: #c19941;}
.black{color: #313131;}

.ta-r{	text-align: right;}
.ta-c{	text-align: center !important;}

.f-left{	float: left;}
.f-right{	float: right;}

.pt5{padding-top: 5px;}

a {
	color: #5f53a5;
	text-decoration: none;
}

a:hover {
	color: #5f44cc;
}

a:hover img{
	opacity:0.7;
}

li{	list-style: none;}

/*.contents ul li{
	text-indent: -1em;
	padding-left: 1em;}*/

.contents ul li:before{content: "・";}

.contents ol li{  counter-increment: licount;}

.contents ol li:before{ content: counter(licount) ". "; }

.sp{
	display: none;
}


/* =========================================================
販売開始までの一時的なスタイル
========================================================= */
.date{font-size: 1.5em; margin: -5px 0;}
.date-s{ font-size: 1.1em; margin-bottom: 15px;}

.cartbtn, .btn.cart ,#btn-buy {
	display: none !important;
}

/* =========================================================
base-box
========================================================= */
.contents, .inner{
	width: 900px;
	min-width: 900px;
	margin: 0 auto;
}

#pagetop{
	position: fixed;
	right: 0;
	bottom: 0;
}

#pagetop img{
	padding: 0;
}

/* =========================================================
header
========================================================= */
.global-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 0;
	z-index: 100;
}
.global-header .inner {
	display: table;
}

.global-header h1,
.global-header .clearfix,
.global-header .club-link,
.global-header .sapo-link {
	display: table-cell;
	vertical-align: middle;
}

.global-header h1{
	position: relative;
	width: 460px;
	height: 96px;
	margin-top: -10px;
	padding: 5px 0 0 85px;
	line-height: 1.35;
	font-size: 1.2em;
}

.global-header h1 a {
	color: #191f4a;
}

.global-header h1 a img {
	opacity: 1;
}

.global-header h1 span{
	font-size: 1.3em;
}

.global-header h1 img{
	padding-top: 10px;
	margin-right: 18px;
	position: absolute;
	top: 0;
	left: 0;
}

.club-link,
.sapo-link {
	text-align: right;
	float: right;
}

.club-link a {
	display: inline-block;
	margin-top: -5px;
}

.club-link a img,
.sapo-link a img {
	padding: 0;
	display: inline;
}

.global-header .mail a{
	display: inline-block;
	float: right;
	color: #fff;
	/*padding: 2px 10px 2px 10px;*/
	font-size: .95em;
}

.global-header .mail a{
	color: #fff;
	text-decoration: underline;
}

.global-header .mail a:hover{
	text-decoration: none;
}

.global-header .mail a:before{
	content:url(../img/mail-icon.png);
	margin-right: 4px;
	position: relative;
	top: 2px;
}

/* =========================================================
g-navi
========================================================= */
.g-navi{
	background: #453290;
}

.g-navi .inner{
	overflow: hidden;
}

.g-navi ul{
	display: table;
	table-layout: fixed;
	width: 100%;
	border-right: 1px solid #9b8eb5;
}

.g-navi li{
	display: table-cell;
	border-left: 1px solid #9b8eb5;
	text-align: center;
}

.g-navi li a{
	display: block;
	color: #ffffff;
	padding: 8px 0;
	font-size: 1.05em;
}

.g-navi li a:hover{
	background-color: #5f44cc;
}

.g-navi li.logout a{
	background: #e17155;
}

.g-navi li.logout a:hover{
	background: #ef7455;
}

/* =========================================================
contents
========================================================= */
.contents {
	padding: 45px 0 0;
}

h2{
	border-bottom: 4px solid #e0e0e0;
	color: #191f4a;
	margin-bottom: 40px;
	padding-bottom: 5px;
	font-size: 2em;
	position: relative;
}

h2:before{
	content:"";
	position: absolute;
	bottom: -4px;
	left: 0px;
	width: 290px;
	border-bottom: 4px solid #5f53a5;
}

h2:after{
	content:"";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 50px;
	border-bottom: 4px solid #1a1f49;
}

h3{
	background: #eaeaea;
	padding: 12px 20px;
	padding-left: 10px;
	margin: 40px 0 5px 0;
}

h4{
	color: #46297B;
	font-size: 1.1em;
	border-left: 4px solid;
	margin: 2em 0 .7em;
	padding-left: 12px;
}

table{
	width: 100%;
	margin-bottom: 1em;
}

table th, table td{
	border-bottom: 1px solid #bfbfbf;
	padding: 24px 20px;
	text-align: left;
}

table .header th{
	background: #f9f9f9 ;
	text-align: center;
}

.btn-s{
	text-align: center;
}

.btn-s a{
	background: #626262;
	border-radius: 5px;
	color: #ffffff;
	display: inline-block;
	padding: 3px 7px 2px;
	text-decoration: none;
	position: relative;
}

.btn-s a:hover{
	background: #858585;
}

.btn{
	margin: 30px auto 40px;
	text-align: center;
}

.btn a{
	background-color: #4e4099;
	border-radius: 6px;
	color: #ffffff;
	display: inline-block;
	padding: 10px 20px 7px 20px;
	font-size: 1.6em;
	text-decoration: none;
	position: relative;
}

.btn a:hover{
	background-color: #7463ce;
	}

.soldout span{
	background-color: #b80000;
	border-radius: 6px;
	color: #ffffff;
	display: inline-block;
	padding: 10px 20px 7px 20px;
	margin-top: 40px;
	font-size: 1.4em;
	text-decoration: none;
}

.font-l {
  font-size: 1.5em;
}

.bold{
	font-weight: bold;
	font-size: 1.1em;
	}

.contents_temporary {
	width: 100%;
	/* max-width: 1200px; */
	margin: auto;
}
.flexbox_temporary {
	display: flex;
}
.box1_temporary {
	width: 55%;
	margin: auto;
}
.box2_temporary {
	width: 45%;
	margin: auto .5rem;
}
@media screen and (max-width: 640px) {
	.flexbox_temporary {
		display: block;
	}
	.flexbox_temporary .box1_temporary {
		width: 100%;
		margin: 0 auto;
	}
	.flexbox_temporary .box2_temporary {
		width: 95%;
		margin: 10px auto;
	}
}

/* =========================================================
footer
========================================================= */

.footer-link {
	font-size: 1.5em;
	margin: 50px auto !important;
}

.footer-link li {
	margin-bottom: 15px;
}

.footer-link li:before {
	content: none !important;
}

.club-info {
	width: 900px;
	margin: 30px auto !important;
}

.club-info th,
.club-info td {
	border: none !important;
	background: none !important;
	padding: 0;
}
.club-info th {
	border-right: 2px solid !important;
	text-align: center;
	color: #453290;
	font-size: 1.2em;
}
.club-info td {
	padding-left: 30px;
}
.club-info td strong {
	font-size: 1.5em;
}

.mail-btn {
	display: inline-block;
	border: 1px solid;
	background: #fff url(../img/mail-icon.png) no-repeat 15px center;
	padding: 6px 20px 6px 40px;
	margin: 10px 0;
	color: #453290 ;
}
.global-footer {
	background: #e5daff url(../img/bg-footer.png);
}

.global-footer h3 {
	background: #453290;
	margin: 0 !important;
	padding: 8px ;
	text-align: center;
	color: #FFF;
	font-size: 1.3em;
}

.footer{
	background: #FFF;
	padding: 15px 0;
}

.footer ul{
	border-right: 1px solid;
	text-align: right;
}

.contents .footer li:before{
	content: none;
}

.footer li{
	display: inline;
	padding: 0 15px;
	text-align: center;
	border-left: 1px solid;
}

.footer li a{
	text-decoration: underline;
}

.footer li a:hover{
	color: #7463ce;
	text-decoration: none;
}


/* =========================================================
　index 注意書きページ
========================================================= */

.index h3{
	margin-bottom: 20px;
}

.index .flow{
	margin-top: 20px;
}

.index .flow li:before{
	content: none;
}


/* =========================================================
　商品ページ
========================================================= */

.contents .product-list{
	overflow: hidden;
	width: 920px;
}

.contents .product-list li{
	float: left;
	width: 440px;
	margin: 0 20px 20px 0;
	text-indent: 0;
}

.contents .product-list li img{
	box-shadow: 3px;
}

.contents .product-list li a{
	display: block;
}

.contents .product-list li:before{
	content: none;
}


/* =========================================================
　商品詳細ページ
========================================================= */

h3.product-name{
	background: none;
	border: none;
	color: #191f4a;
	margin: 30px 0 20px;
	padding: 0px;
	font-size: 1.6em;
}

table.product{
	width: 50%;
	float: left;
	margin-bottom: 40px;
}

table.product td{
	text-align: left;
}

.right{
	float: right;
	width: 45%;
}

.size-tuiki{
	display: block;
	margin-top: 10px;
}

.price{
	font-size: 1.7em;
	font-weight: bold;
}

input.cart{
	width: 300px;
	padding: 10px 0px 10px 30px !important;
	margin-top: 40px;
	background: #4e4099 url(../img/cart-icon.png) no-repeat 30px center;
}

.koukan{
	margin-top: 20px;
	color: #4E4099;
}

.info{
	overflow: hidden;
	clear: both;
	background: #f9f9f9;
}

.info dt{
	float: left;
	clear: both;
	width: 13em;
	color: #4e4099;
	font-weight: bold;
	padding: 10px;
}

.info dd{
	background: #fff;
	margin-left: 13em;
	padding: 10px;
}

.product-detail .main {
	position: relative;
}

#btn-buy {
	position: absolute;
	left: 100px;
	top: 455px;
	display: block;
	width: 337px;
	height: 65px;
	background: url(../product/img/btn-buy.png) no-repeat;
	text-indent: -9999px;
}

#btn-buy:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

.product-detail h3{
	margin: -25px 0 0px;
	padding: 0;
	background: none;
	border: none;
	font-size: 65px;
	font-family: 'Anton', sans-serif;
	font-weight: normal;
}

.product-detail .name h3{
	color: #fff;
}

.name{
	background: #191F4A;
	padding: 50px;
}

.size{
	background: #f9f9f9;
	padding: 30px;
}

.clearfix:after{
	content:"";
	display: block;
	clear: both;
}

.detail{
	width: 32%;
	float: left;
	margin-right: 2%;
	background: #fff;
	margin-bottom: 0;
}

.detail caption{
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
}

.size .detail:nth-of-type(odd) caption{
	color: #3232ad;}

.size .detail:nth-of-type(even) caption{
	color: #b01616;}

.name .detail:nth-of-type(3n){
	margin-right: 0;
}

.size .detail:nth-of-type(odd){
	clear: both;
}

.detail th,.detail td{
	border: 1px solid #bfbfbf;
	padding: 5px 0;
	text-align: center;
}

.detail th:nth-of-type(3){
	background: #fecaff;
}

.yellow td{
	background: #fff726;
}

span.yellow{
	display: inline-block;
	width: 3em;
	height: 1.2em;
	background: #fff726;
}

.pt10{padding-top: 10px;}

/* =========================================================
カートの確認
========================================================= */
.contents .step{
	overflow: hidden;
	width: 920px;
	margin-right: -20px;
	margin-bottom: 45px;
	}

.contents .step li{
	position: relative;
	float: left;
	background: #eeeeee;
	width: 164px;
	padding: 20px 0;
	margin-right: 20px;
	text-align: center;
  	counter-increment: licount;
}

.contents .step li:before{
	content: "STEP"counter(licount) ;
	display: block;
	text-align: center;
	color: #502f8e;
	font-weight: bold;
}

.contents .step li:first-child:after{
	content: none;
}

.contents .step li:after{
  	content: url(../img/arrow-icon.png);
	position: absolute;
	top: center;
	left: -12px;
}

.contents .step li.current{
	background: #dbcdf7;
	font-weight: bold;
	color: #8d0000;
}

.shopping-cart td{
	text-align: center;
	padding: 20px 20px;
}

.shopping-cart td:first-child{
	text-align: left;
}

.shopping-cart .header th{
	padding: 10px 15px;
	background: #f9f9f9 ;
	border-top: 1px solid #bfbfbf;
	text-align: center;
}

.amount th,.amount td{
	font-weight: bold;
	color: #b80000;
}

ul.btn{
	overflow: hidden;
}

ul.btn li:before{
	content: none;
}

ul.btn li.back{
	float: left;
}

.back a:before{
	content: url(../img/back.png);
	padding-right: 10px;
}

ul.btn li.forward{
	float: right;
}

.forward a:after{
	content: url(../img/forward.png);
	padding-left: 10px;
}

.notice li:before{
	content:"・";
	margin-left: -15px;
}

.notice{
	font-size: .85em;
	margin-top: 5px;
}

.notice li{
	padding-left: 15px;
}

label{
	margin-right: 10px;
}
input[type="text"]{
	padding: 2px;
}

input[type="radio"]{
	padding-top: 3px;
	margin-right: 5px;
}

input.tel{
	width: 12em;
}

input.post{
	width: 4em;
}

input.address{
	width: 30em;
}

.normal{
	font-weight: normal;
}

table.charge{
	width: auto;
	margin-top: 20px;
}

.contents table.charge th, .contents table.charge td{
	padding: 5px 10px;
	border: 1px solid #bfbfbf;
	text-align: center;
}

.total{
	float: right;
	width: 45%;
}

.total th, .total td{
	padding: 12px 15px;
}

.total th{
	text-align: left;
}

.total td{
	text-align: right;
}

.total-price{
	font-size: 1.5em;
}

.thanks{
	font-size: 2em;
	color: #8d0000;
	font-weight: bold;
}

.card{
	background: #FFE4E4;
	width: 700px;
	padding: 30px 20px 1px;
	margin: 30px auto 0;
	font-size: 1.2em;
	text-align: center;
}

/* =========================================================
　ログインページ
========================================================= */
.login{
	background: #eeeeee;
	width: 400px;
	padding: 40px;
	margin: 0 auto;
	text-align: center;
}

.login dl{
	text-align: left;
	margin-bottom: -10px;
}

.login dt{
	font-weight: bold;
}

.login dd{
	margin-bottom: .5em;
}

.login input[type="text"]{
	width: 100%;
	margin-bottom: 5px;
}

input.btn,
a.btn{
	background-color: #4e4099;
	border: none;
	border-radius: 6px;
	color: #ffffff;
	display: inline-block;
	padding: 10px 20px;
	margin-bottom: 0;
	font-size: 1.4em;
	font-family: メイリオ;
	text-decoration: none;
	position: relative;
}

a.btn.large-btn{
	margin-bottom: 30px;
	padding: 10px 30px;
	background: #d9534f;
	font-size: 2.5em;
}

a.btn.large-btn:hover{
	background: #ac423f;
}

span.btn.large-btn.cls{
	margin-bottom: 30px;
	padding: 10px 30px;
	background: #7d7d7d;
	font-size: 2.5em;
	color: rgb(255, 255, 255);
    display: inline-block;
	font-family: メイリオ;
    position: relative;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 6px;
	text-decoration: none;
	margin-top: 10px;
	margin: 30px auto 40px;
    text-align: center;
	cursor: default;
}
@media screen and (max-width: 640px) {
	.cls {
		font-size: 1.4em !important;
		padding: 10px !important;
	}
}

input.btn:hover,
a.btn:hover{
	background-color: #7463ce;
	}

/* 注意喚起ボタン追加 */
a.btn-red{
	background-color: #b80000;
	border: none;
	border-radius: 6px;
	color: #ffffff;
	display: inline-block;
	padding: 10px 20px;
	margin-bottom: 0;
	font-size: 1.4em;
	font-family: メイリオ;
	text-decoration: none;
	position: relative;
}

a.btn-red:hover{
	background-color: #b80000;
	}

/* =========================================================
　購入方法・ご注意
========================================================= */

dt{
	font-weight: bold;
}

dd{
	padding-bottom: .5em;
}

.information .contents p, .information .contents h4, .information .contents dl,
.information .contents ul,.information .contents ol,.information .contents table{
	margin: 0 20px 1em;
}

.information #pagetop{
	margin: 0 ;
}

.information h3{
	margin-bottom: 20px;
}

.information table{
	width: auto;
	margin-bottom: 1em;
}

.information table th, .information table td{
	border: 1px solid #bfbfbf;
	padding: 10px 15px;
	text-align: left;
}

.flow li{
	list-style-type: none;
}

.flow li:after{
	content:"↓";
	display: block;
	text-indent: 200px;
}

.flow li:last-child:after{
	content: none;
}

.return{
	background: #f4edff;
	width: 600px;
	padding: 20px 30px;
	margin: 0 auto !important;
}

/* =========================================================
　ワンタッチパス・Jリーグアプリページバナー域
========================================================= */
.LinkBtn{
	width: 100%;
	max-width: 850px;
	margin: 30px auto 70px;
}
.LinkBtn__list{
	display: flex;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.LinkBtn__listitem{
	width: calc(50% - 10px);
	border: 3px solid #eaeaea;
	padding: 30px 35px;
	text-align: center;
}
.LinkBtn__list .LinkBtn__listitem:before{
	content: none;
}

.LinkBtn__listitem p{
	margin-top: 15px;
	text-align: left;
}

/*モーダルを開くボタン*/
.modal-open{
	cursor: pointer;
}
.modal-open02{
	cursor: pointer;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
}
.modal-container02{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.modal-container02:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
.modal-container02.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
.modal-body02{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
.modal-close02{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}
.modal-content02{
	background: #fff;
	text-align: left;
	padding: 30px;
}