@charset "shift-jis";

:root {
	--bodyColor:#f3f3f3;				/*bodyの背景色*/
	--mainColor:#f2ecec;				/*メインの背景色*/
	--subColor:#03a706;				/*ヘッダー/フッターなどの背景色*/
	--accentColor:#00763b;				/*アクセントカラー*/

	--btnColor-main:#00763b;			/*ボタンの背景色など*/
	--btnColor-sub:#fff;				/*ボタンの文字など*/

	--btnColor-main-negativ:#e0e0e0;	/*disableボタンの背景色など*/
	--btnColor-sub-negativ:#919191;	/*disableボタンの文字など*/

	--navigationColor-main:#574a05;	/*ナビゲーションの背景色など*/
	--navigationColor-sub:#f0cc00;		/*ナビゲーションの文字など*/

	--textColor-main:#181818;				/*文字色*/
	--textLinkColor-main:#000;			/*テキストリンク*/
	--borderColor-main:#272727;		/*ボーダー*/

	--mailStatusColor-main:#e70e20;	/*未読*/
	--mailStatusColor-sub:#afafaf;		/*既読*/
}

body{
	color: var(--textColor-main);
	background: var(--bodyColor);
	font-family: "Helvetica Neue","Helvetica", "Arial", "Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo", sans-serif;
	font-weight: 500;
}

p{
	font-size: 1.5rem;
	line-height: 1.75;
}

a{
	color: var(--textLinkColor-main);
}

.hide-sp{
	display: none;
}

/*PC用設定*/
@media ( min-width : 980px ){
	.container{
		width: 480px;
	}
	.hide-pc{
		display: none;
	}
	.show-pc{
		display: block;
	}
}
/*----------------------------------------------
ボタン系
-----------------------------------------------*/
.btn{
	width: 72%;
	margin: 32px auto;
	padding: 12px;
	font-size: 1.5rem;
	color:var(--btnColor-sub);
	background: var(--btnColor-main);
	border-radius: 24px;
	position: relative;
}

.btn.cancel,.btn.delete{
	color: var(--btnColor-sub-negativ);
	background: var(--btnColor-main-negativ);
}

/*スライドトグル用*/
.show{
	color: var(--textColor-main);
}

.show::after{
	border-right: 1px solid var(--textColor-main);
	border-bottom: 1px solid var(--textColor-main);
}

/*ページネーション*/
.pagination_item.current{
	background: var(--btnColor-main);
}

#scrollToTop{
	z-index:996;
	bottom:96px;
}

/*-----------------------------------------------
アイコン
-----------------------------------------------*/
.icon{
	display: block;
	width: 24px;
	height: 24px;
	-webkit-mask-size: cover;
	mask-size: cover;
}

.icon-close{
	-webkit-mask-image: url('../img/svg-crossmark.svg');
	mask-image: url('../img/svg-crossmark.svg');
}

.icon-line{
	-webkit-mask-image: url('../img/svg-line.svg');
	mask-image: url('../img/svg-line.svg');
}

.icon-user{
	-webkit-mask-image: url('../img/svg-user.svg');
	mask-image: url('../img/svg-user.svg');
}

.icon-file{
	-webkit-mask-image: url('../img/svg-file.svg');
	mask-image: url('../img/svg-file.svg');
}

.icon-crossmark{
	-webkit-mask-image: url('../img/svg-crossmark.svg');
	mask-image: url('../img/svg-crossmark.svg');
}

.icon-send{
	-webkit-mask-image: url('../img/svg-send.svg');
	mask-image: url('../img/svg-send.svg');
}

/*----------------------------------------------
メール状態
-----------------------------------------------*/
.mailStatus{
	margin: 0 auto;
	width: 40px;
	height: 20px;
	line-height: 20px;
	color: #fff;
	font-size: 1.1rem;
	padding: 0 2px;
	border-radius: 24px;
}

.unread{
	background:var(--mailStatusColor-main);
}

.read{
	background:var(--mailStatusColor-sub);
}

/*未読バッジ*/
.unreadCountBadge{
	position: absolute;
	top: 4px;
	right: -4px;
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	font-size: 1rem;
	color:var(--btnColor-sub);
	background: var(--mailStatusColor-main);
	border-radius: 50%;
}

/*----------------------------------------------
ヘッダー
-----------------------------------------------*/
header{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 996;
}

/*ログイン前*/
#nonMemberPage  header{
	position: static;
}

.headerInner{
	padding: 0 8px;
	height: 56px;
	background: var(--subColor);
}

.logo-header{
	display: block;
	width: 140px;
}

.btn-header{
	margin: 0;
	padding: 0 .5em;
	width: 100%;
	height: 32px;
	line-height: 32px;
	font-size: 1.2rem;
	color:var(--btnColor-main);
	background:var(--btnColor-sub);
	border: none;
}

.headerInner_right,.headerInner_center,.headerInner_left{
	height: 100%;
	display: grid;
	place-items: center;
}

.pageTitle{
	color: var(--accentColor);
	font-weight: bold;
	font-size: 1.4rem;
}

/*会員情報*/
header .userData{
	width: 100%;
	height: 40px;
	background: #fff;
	border-bottom: 2px solid #94c981;
	user-select: none;
}

header .userPt{
	color: #f00;
}

/*-----------------------------------------------
ナビゲーション
-----------------------------------------------*/
#bottomFixedItem{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 996;
}

.navigationArea{
	width: 100%;
}

.navigation{
	background: var(--subColor);
}

.navigation_item{
	display: block;
	flex: 1;
}

.navigation_item_link{
	display: block;
	padding: 4px;
	width: 100%;
	height: 100%;
	font-weight: bold;
	color:var(--navigationColor-main);
	position:relative;
}

.navigation_item_link .icon{
	margin: 4px auto;
	background-color:var(--navigationColor-main);
}

.navigation_item_link.active{
	color: var(--navigationColor-sub);
}

.navigation_item_link.active .icon{
	background-color: var(--navigationColor-sub);
}

/*-----------------------------------------------
メインコンテンツ
-----------------------------------------------*/
.container-main{
	padding-top: 96px;
	min-height: 100dvh;
	background: linear-gradient(-135deg, #f9f9b0,#9eefb3);
}

/*ログイン前下層*/
#nonMemberPage .container-main{
	padding-top: 0;
	padding-bottom: 0;
	background: #fff;
}

/*----------------------------------------------
ハンバーガーメニュー
-----------------------------------------------*/
#hamburger{
	position: fixed;
	top: 12px;
	height: auto;
}

@media ( min-width : 980px ){
	#hamburger{
		right: calc(50% - 226px);
	}
}

.hamburger-line{
	background: #fff;
}

/*----------------------------------------------
メニュー
-----------------------------------------------*/
#hamburger.is-opened .hamburger-line{
	background: var(--textColor-main);
}

@media ( min-width : 980px ){
	#hamburger.is-opened .hamburger-line{
		background: #fff;
	}
}

#menu{
	width: 300px;
	padding: 0 16px;
	background: #fff;
}

#menu .userData .userName{
	width: calc(100% - 48px);
}

.menuList_item_link{
	padding: 1em 0 1em 8px;
	color: var(--textColor-main);
	font-weight: bold;
	border-bottom: 1px solid var(--borderColor-main);
	position: relative;
}

.menuList_item_link .unreadCountBadge{
	position: absolute;
	top: 4px;
	left: 0;
}

.menuList_item_link .menuIcon{
	display: inline-block;
	margin-right: 16px;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}

.typeDrawerRight::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	border-radius: 8px;
	background: #eeeeee;
}

.typeDrawerRight::-webkit-scrollbar-thumb {
	background: #d1d1d1;
	border-radius: 8px;
}

.typeDrawerLeft,
.typeDrawerRight{
	-ms-overflow-style: unset;    /* IE, Edge 対応 */
	scrollbar-width: auto;       /* Firefox 対応 */
}

.typeDrawerLeft::-webkit-scrollbar,
.typeDrawerRight::-webkit-scrollbar{  /* Chrome, Safari 対応 */
	display:block;
}

@media ( min-width : 980px ){
	.typeDrawerLeft,
	.typeDrawerRight{
		-ms-overflow-style: none;    /* IE, Edge 対応 */
		scrollbar-width: none;       /* Firefox 対応 */
	}

	.typeDrawerLeft::-webkit-scrollbar,
	.typeDrawerRight::-webkit-scrollbar{  /* Chrome, Safari 対応 */
		display:none;
	}
}

/*-----------------------------------------------
フッター
-----------------------------------------------*/
footer{
	width: 100%;
}

#nonMemberPage  footer .container{
	background: #fff;
}

/*-----------------------------------------------
入力フォーム
-----------------------------------------------*/
.formBox{
	padding: 24px;
	background: #fff;
	border-radius: 8px;
}

.formBox_item input,
.formBox_item select,
.formBox_item textarea,
.altRadioBtn{
	color: var(--textColor-main);
}

.formBox_item select{
	width: 32%;
}

.altRadioBtn.carrier{
	margin-bottom: 16px;
}

input[type="radio"]:checked + .altRadioBtn{
	color:#fff;
	background-color: #043cd2;
}

#registrationForm .altRadioBtn.female,
#registrationForm .altRadioBtn.male{
	width: 48%;
}

.altCheckBox {
	width: 290px;
	padding: 0 0 0 32px;
}

#registrationForm-confirm .btn{
	width: 48%;
}

/*-----------------------------------------------
リスト関連
-----------------------------------------------*/
.list_item{
	margin-bottom: 8px;
	background: #fff;
	border: none;
}

.list_item_link{
	color: var(--textColor-main);
}

/*-----------------------------------------------
ログイン前TOP
-----------------------------------------------*/
/* アニメーション */
.anime-reflection{
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.anime-reflection::after{
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	top: -180px;
	left: 40px;
	background-color: #FFF;
	opacity: 0;
	transform: rotate(45deg);
	animation: anime-reflection 2s ease-in-out infinite;
}

@keyframes anime-reflection{
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 0.8; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

.entryArea{
	width: 100%;
	position: relative;
}

.entryBtnWrapper{
	position: absolute;
}

@media ( min-width : 980px ){
	.entryBtn:hover{
		opacity: .85;
	}
}

.entryArea .entryBtnWrapper{
	margin: auto;
	width: 90%;
	bottom: 6%;
	left:0;
	right:0;
}

.mainVisualWrapper{
	position: relative;
}

.mainVisualWrapper .entryBtnWrapper{
	margin: auto;
	width: 55%;
	bottom: 2px;
	right:10px;
}

#modal.forNotification .lineArea .modalwindowContents{
	width: 96%;
	padding: 8px;
	background: #06C755;
}

#modal.forNotification .lineArea .modalwindowContents .icon {
	background-color: #fff;
}

.lineTitle{
	font-size: 1.75rem;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

.lineSubTitle{
	font-size: 1.25rem;
	color: #000;
	text-align: center;
	font-weight: bold;
	padding-bottom: 8px;
}

.lineTextArea{
	background: #fff;
	padding: 8px;
}

.lineBtnArea{
	padding: 24px 0px;
}

/*QRコード-PC用*/
.lineQR{
	display: block;
	width: 50%;
	margin: 0 auto;
	padding: 8px;
	background-color: #06C755;
}

/*ボタン-SP用*/
.lineBtn{
	width: 80%;
	margin: 0px auto;
	padding: 8px 16px;
	font-size: 1.25rem;
	color:#fff;
	background: #06C755;
	border-radius: 32px;
	border: double 4px;
	position: relative;
}

.icon-lineLogin{
	display: inline-block;
	margin-right: 16px;
	width: 32px;
    height: 32px;
	vertical-align: middle;
	background: url(../img/line.png);
	background-size: cover;
}

.lineTextTitle{
	font-size: 1.25rem;
	font-weight: bold;
	padding-top: 5px;
}

.lineText{
	font-size: 1rem;
	padding: 8px;
}

/*-----------------------------------------------
ログイン前 共通
-----------------------------------------------*/
.btn-line .icon{
	display: inline-block;
	width: 25px;
	background-color: #fff;
	vertical-align: middle;
	margin-right: 8px;
}

#nonMemberPage .logo-footer{
	display: block;
	margin: 24px auto;
	width: 108px;
}

#nonMemberPage .footerLinkList{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: nowrap;
	width: 100%;
	text-align: center;
}

#nonMemberPage .footerLinkList .list_item_link{
	padding: .5em;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 128px;
	border: 2px solid #000;
}

.copyright{
	font-size: 1rem;
}

/*-----------------------------------------------
的中実績
-----------------------------------------------*/
.slideWrapper{
	overflow: hidden;
	width: 100%;
}

.raceResultWrapper{
	background-image: url(../img/lp/bg-raceResult.jpg);
	background-size: cover;
	background-position: center;
}

.raceResultList{
	display: flex;
	justify-content: space-between;
}

.raceResult_item_inner{
	width: 95%;
	margin: 0 auto 16px;
	position: relative;
}

@media (min-width: 768px) and (max-width: 980px) {
	.raceResult_item_inner{
		width: 80%;
	}
}

.raceResultDetails{
	position: absolute;
	width: 90%;
	top: 24%;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-weight: bold;
	font-size: clamp(1.3rem, 1vw + 1rem, 1.3rem);
}

/*ログイン前用*/
#nonMemberPage .raceResultDetails{
	top: 24%;
}

@media (min-width: 768px) and (max-width: 980px) {
	#nonMemberPage .raceResultDetails{
		top: 33%;
	}
}

.raceResult_item .raceName{
	font-size: clamp(1.8rem, 2vw + 1rem, 1.8rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.raceResult_item .eventDate{
}

.raceResult_item .raceCourse{
	padding-left:4px;
}

.raceResult_item .raceData{
	font-size: clamp(1.6rem, 2vw + 1rem, 1.6rem);
}

.raceResult_item .money{
	width: 100%;
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	color: #c40707;
    background: #fff;
    line-height: 1.25;
}


/*開催日・開催場所・対象レース*/
.raceDataBox{
	width: 25%;
	background: url(../img/resultIcon-siteName.png);
	background-position: center bottom 4%;
	background-size: 90%;
	background-repeat: no-repeat;
}

.raceDataBox p{
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	text-align: left;
	font-size: 1.4rem;
}

.raceResult_details .raceDataBox:after{
	content: "";
	display: block;
	width: 40px;
	height: 100%;
	background: rgba(131, 169, 113,.5);
	position: absolute;
	top: 0;
	left: 12%;
	z-index: -1;
}

/*コース名*/
.courceNameBox{
	width: 15%;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
	border: 2px solid #000;
}

.courceNameBox .umakatsu{
	text-align: center;
	font-size: 40%;
}

@media ( min-width : 980px ){
	.courceNameBox .umakatsu{
		font-size: 1rem;
	}
} 

.courceNameBox .courceNameBoxText{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align: center;
	flex: 2;
	font-size: 2.4rem;
}

.hitBox{
	width: 60%;
	padding: 0 4px;
	background: url(../img/resultIcon-tekicyu.png);
	background-position: left 2% bottom 4%;
	background-size: 60%;
	background-repeat: no-repeat;
}

.hitBox .raceName{
	margin: 16px 0;
	max-width: 60%;
	height: 28px;
	line-height: 28px;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	background: linear-gradient(0deg, #ffffff 0%, #ffe492 49%, #aa5a3d 50%, #facf73 75%, #ffe45d 100%);
	border-radius: 64px;
}

.hitBox .money{
	color: #f00;
	font-weight: bold;
	font-size: 2rem;
}

/*-----------------------------------------------
プラン
-----------------------------------------------*/
.title:nth-child(1){
	margin-top: -8px;
}

.title{
	margin-left: -8px;
	margin-right: -8px;
}

.planList{
	padding: 24px 0 ;
}

.planList .list_item{
	width: 50%;
	padding: 4px;
	background: none;
}

.planList .list_item .courseHeadline{
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.25;
	min-height: calc(1.25em* 1);
	max-height: calc(1.25em* 2);
	letter-spacing: -1.2px;
	text-align:center;
}


.planList .list_item .usePt{
	font-weight: bold;
	padding: 4px 0;
	color: #f00;
	font-size: 1.8rem;
	text-align:center;
}

.planList .list_item .usePt_headline{
	display: block;
	margin-right: 4px;
	padding: 2px 8px;
	font-size: 1rem;
	color: #000;
	background: #fff;
	border-radius: 4px;
	vertical-align: middle;
}

.planList .list_item .preDiscountPt{
	position: relative;
	color:#000;
	font-size: 1.2rem;
}

.planList .list_item .preDiscountPt::before{
	position: absolute;
	content: "";
	display: block;
	transform: rotate(10deg);
	background-color: #000;
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0;
}

.planList .list_item .btn{
	width: 80%;
	margin: 4px auto;
	padding: 8px;
}

#planList-free .list_item:nth-child(1){
	margin: 0 25%;
}

/*-----------------------------------------------
コース
-----------------------------------------------*/
.selectedPlanName{
	margin: -8px;
}

.freeSpace{
	margin: 16px auto;
	padding: 24px;
	background: #fff;
}

.freeSpace a{
	color: var(--textColor-main);
	border-bottom: 1px solid var(--textColor-main);
}

.raceResultList-course{
	width: 100%;
	user-select: none;
}

.raceResultList-course .raceResult_item{
	min-width: 320px;
}

.raceResultList-course .raceResult_item .umakatsu{
	font-size: 40%;
}

.reviewList-course{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
	scrollbar-color: #bdbdbd #c5e1b0;
	scrollbar-width: thin;
	user-select: none;
}

.reviewList-course .list_item{
	min-width: 320px;
	margin: 0 0 16px 8px;
	box-shadow: 0 0 8px #a0a0a0;
}

.courseDetails{
	table-layout: fixed;
	width: 100%;
	margin: 16px auto;
	font-size: 1.3rem;
	background: #fff;
	border: 1px solid #e5e5e5;
}

.courseDetails tbody th{
	width: 30%;
	padding: .5em;
	text-align: left;
	vertical-align: middle;
	background:#e8ffdc;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.courseDetails tbody td{
	padding: .5em;
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
}

.btn.join{
	background: #0445d2;
}

.btn.gettingReady{
	color: #000;
	background: #ffd000;
}

.btn.nowShowing{
	background: #0040c2;
}

.btn.soldOut{
	background: #d10000;
}

.btn.deny{
	background: #424242;
}

/*-----------------------------------------------
レビュー投稿
-----------------------------------------------*/
.rating{
	display: flex;
	flex-direction: row-reverse;
	justify-content: start;
	user-select: none;
}

.rating input[type='radio']{
	display: none;
}

.rating_item{
	padding: 0 8px;
	color: #d0d0d0;
	cursor: pointer;
	font-size: 4rem;
}

.rating input[type='radio']:checked ~ .rating_item{
	color: #feb100;
}

@media ( min-width : 980px ){
	.rating_item:hover,
	.rating_item:hover ~ .rating_item{
		color: #feb100;
	}
}

/*-----------------------------------------------
レビュー一覧
-----------------------------------------------*/
#reviewList .rating_item{
	padding: 0;
	font-size: 1.8rem;
	color: #feb100;
}

/*-----------------------------------------------
お知らせ/チャット一覧関連
-----------------------------------------------*/
#msgList .item_left .icon{
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

#msgList .item_right .mailStatus{
	position: absolute;
	bottom: 8px;
	right: 4px;
}

#msgList .item_right .name{
	font-weight: bold;
}

#msgList .item_right .date{
	margin-bottom: 0;
}

.msgTitle{
	display: inline-block;
	width: 85%;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*-----------------------------------------------
お知らせ詳細
-----------------------------------------------*/
.informationDetailsBox{
	padding: 24px;
    background: #fff;
    border-radius: 8px;
}

/*-----------------------------------------------
チャット
-----------------------------------------------*/
#messageList{
	padding-bottom: 82px;
}

.messageList_item{
	margin-bottom: 16px;
	padding: 8px;
}

.messageArea{
	padding-left: calc(100% - 80%);
	width: 100%;
}

.messageArea .balloon{
	color: #000;
}

.messageArea .date{
	text-align: right;
}

.messageList_item .balloon{
	margin: 0 0 8px 8px;
	padding:8px;
	background: #fafafa;
	border-radius: 8px;
	position: relative;
}

.messageList_item .balloon:before{
	display: block;
	content: " ";
	width: 12px;
	height: 12px;
	background: #fafafa;
	transform: rotate(45deg);
	position: absolute;
	top: 16px;
	right: -6px;
}

.messageList_item.fromPartner .tmb{
	width: 64px;
	height: 64px;
}

.messageList_item.fromPartner .balloon:before{
	left: -6px;
}

.messageList_item.fromPartner .messageArea{
	padding-left: 0;
}

.messageList_item.fromPartner .messageArea .date{
	text-align: left;
	margin-left: 8px;
}

.messageList_item .messageArea .tmb{
	margin-left: calc(100% - 192px);
	width: 192px;
	height: auto;
	border-radius: 0;
}

#messageSendForm{
	width: 100%;
	padding: 8px;
	background: #eadc01;
}

#messageSendForm input[type="file"]{
	display: none;
}

#messageSendForm .altFileBtn{
	display: block;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 50%;
	background: #0dbd00;
	position: relative;
}

.altFileBtn .icon{
	background-color: var(--btnColor-sub);
	-webkit-mask-image: url('../img/svg-plus.svg');
	mask-image: url('../img/svg-plus.svg');
}

.altFileBtn.active .icon{
	-webkit-mask-image: url('../img/svg-clip.svg');
	mask-image: url('../img/svg-clip.svg');
}

#messageSendForm .notes{
	padding: 8px 0 0 48px;
	font-weight: bold;
}

#messageSendForm textarea{
	width: 65%;
	margin: 0 4px;
	line-height: 1;
	height: 3em;
}

#messageSendForm .btn-send{
	margin: 0;
	width: 96px;
	background: #0dbd00;
}

/*Android版LINE内部ブラウザ対応*/
#forAndroid.container-main{
	padding-bottom: 200px;
}

#forAndroid #messageSendForm{
	width: 100%;
	position: static;
}

/*-----------------------------------------------
支払い方法選択
-----------------------------------------------*/
#paymentList{
	margin-top: 16px;
}

#paymentList .list_item{
	margin-bottom: 16px;
	padding: 0;
	width: 100%;
	background: #fff;
	border: none;
	border: 1px solid #ffc516;
	border-radius: 8px;
	overflow: hidden;
}

.paymentName{
	padding: 8px;
	font-weight: bold;
	font-size: 1.4rem;
	background: #ffc516;
}

.paymentDiscription{
	padding: 16px;
	color: #000;
}

/*-----------------------------------------------
Pt購入
-----------------------------------------------*/
.formBox-purchase{
	padding: 0;
	background: none;
}

.purchase_item{
	width: 46%;
	margin-bottom: 16px;
	padding: 8px;
	background: #fff;
	border: 1px solid #d3ab05;
	border-radius: 5px;
}

.purchase_item .icon{
	margin: 0;
	width: 32px;
	height: 32px;
}

.purchase_item_details{
	width: calc(100% - 48px);
}

.pt{
	color: #c99a00;
	font-size: 4rem;
	font-weight: bold;
}

.yen{
	text-align: center;
	color: #777777;
	font-size: 1.6rem;
}

.purchase_item .option{
	font-size: 1.2rem;
	text-align: center;
	color:var(--textColor-main);
}

.purchase_item .btn{
	width: 90%;
	margin: 8px auto;
	color: #000;
	background: #ffc400;
	border: 2px solid #d3ab05;
}

.bankDetails{
	table-layout: fixed;
	width: 100%;
	margin: 16px auto;
	font-size: 1.3rem;
	background: #fff;
	border: 1px solid #e5e5e5;
}

.bankDetails tbody th{
	width: 30%;
	padding: .5em;
	text-align: left;
	vertical-align: middle;
	background:#bce8fa;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.bankDetails tbody td{
	padding: .5em;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
}

/*-----------------------------------------------
マイページ
-----------------------------------------------*/
.myPageBox .contentsTitle{
	padding-bottom: 8px;
	border-bottom: 1px solid #e5e5e5;
}

/*-----------------------------------------------
ヘルプメニュ-
-----------------------------------------------*/
#helpMenuList .list_item_link{
	padding: 8px 0;
}

/*-----------------------------------------------
その他メニュー
-----------------------------------------------*/
#otherMenuList .list_item_link{
	padding: 8px 0;
}

.otherMenuTitle{
	width: 95%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*-----------------------------------------------
お問合せ
-----------------------------------------------*/
.preview{
	background-color: #fafafa;
	background-size: 240px;
	background-repeat: no-repeat;
}