@charset "UTF-8";

@media screen and (max-width: 767px) {
	/*-------------------------------------------
	Block
	-------------------------------------------*/
	/* clubMvBlock */
	.clubMvBlock01:before {
		top: -135px;
		margin-left: -315px;
		width: 554px;
		height: 666px;
		background: url(/clubpoint/images/club_bg_03_sp.png) no-repeat 0 0;
		background-size: 554px 666px;
	}
	.clubMvBlock01 .columnInner {
		padding: 20px 0;
	}
	.clubMvBlock01 .mvColumn01 {
		display: block;
		margin: 0 auto;
		padding: 0 10px;
		max-width: 375px;
	}
	.clubMvBlock01 .mvContent01,
	.clubMvBlock01 .mvContent02 {
		min-height: 0;
	}
	.clubMvBlock01 .mvContent01 {
		padding: 0;
		width: auto;
	}
	.clubMvBlock01 .mvContent02 {
		margin-top: 20px;
		padding: 0 15px;
		width: auto;
		background-color: transparent;
	}
	.clubMvBlock01 .mvTitleBlock {
		width: auto;
	}
	.clubMvBlock01 .mvTitle {
		font-size: 1em;
		line-height: 1.56;
	}
	.clubMvBlock01 .mvClubBox {
		margin-top: 5px;
		margin-left: 5px;
	}
	.clubMvBlock01 .mvClubColumn .mvClubLogo {
		width: 40px;
	}
	.clubMvBlock01 .mvClubColumn .mvClubLogo:last-child {
		margin-left: 5px;
	}
	.clubMvBlock01 .mvClubBox .clubText {
		margin-top: 5px;
		font-size: 0.625em;
		line-height: 1.2;
	}
	.clubMvBlock01 .mvImage {
		margin-top: 30px;
		max-width: 294px;
	}
	.clubMvBlock01 .mvCvBlock .detailBlock {
		margin-top: 10px;
		padding: 10px;
	}
	.clubMvBlock01 .mvCvBlock a.detailBlock:hover {
		opacity: 1;
	}
	.clubMvBlock01 .mvCvBlock .detailBlock .borderTop {
		padding-top: 10px;
	}
	.clubMvBlock01 .mvCvBlock .cardImg {
		width: 70px;
	}
	.clubMvBlock01 .mvGlyphBeginner01 > span {
		padding: 0 30px;
	}

	/* stepBlock */
	.stepBlock01 {
		background-position: 16px 0;
		background-size: 13px 13px;
		padding-bottom: 30px;
		padding-left: 55px;
	}
	.stepBlock01 .stepInner {
		padding-top: 8px;
	}
	#wrap .stepBlock01 .stepInner[class*="layoutColumn"] > *:first-child {
		margin-top: 0 !important;
	}
	.stepBlock01 .stepTitle {
		margin-bottom: 15px;
		font-size: 1.25em;
		font-weight: bold;
	}
	.stepBlock01 .stepTitle.hasLogo {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
	}
	.stepBlock01 .stepTitle .logoJCB,
	.stepBlock01 .stepTitle .logoVpass {
		margin-left: 10px;
		width: 70px;
		min-width: 70px;
	}
	.stepBlock01 .stepTitle .logoJCB {
		top: -5px;
	}
	.stepBlock01 .stepTitle .logoVpass {
		top: -1px;
	}
	.stepBlock01 .stepTitle .logoClub,
	.stepBlock01 .stepTitle .logoMirai {
		align-self: flex-start;
		margin-left: 10px;
		width: 46px;
	}
	.stepBlock01 .stepTitle .logoMirai {
		margin-left: 5px;
	}
	.stepBlock01 .stepTitle .logoResona {
		margin-left: 10px;
		width: 46px;
		min-width: 46px;
	}
	.stepBlock01 .stepTitle .large {
		font-size: 1.3em;
	}
	.stepBlock01 .stepNum {
		width: 40px;
		height: 40px;
		font-size: 0.9em;
		border: 2px solid #00a788;
	}
	.stepBlock01 .imgMemo01 {
		margin-left: 35px;
	}
	.stepBlock01 .imgMemo02 {
		margin-left: 55px;
	}

	/* clubBorderBlock */
	.clubBorderBlock01 {
		margin-top: 50px;
		padding: 20px 15px;
	}
	.clubBorderBlock01 .iconPlus01 {
		top: -40px;
		margin-left: -14px;
		width: 23px;
		height: 23px;
	}
	.clubBorderBlock01 .iconPlus01:before,
	.clubBorderBlock01 .iconPlus01:after {
		width: 23px;
		height: 5px;
	}
	.clubBorderBlock01 .iconPlus01:before {
		margin-top: -3px;
	}
	.clubBorderBlock01 .iconPlus01:after {
		margin-top: -3px;
	}
	.clubBorderBlock01 .balloon01 {
		left: 5px;
		top: -40px;
		width: 60px;
		height: 60px;
		font-size: 1em;
	}

	/* clubCardBlock */
	.clubCardBlock01 {
		margin-top: 20px;
	}
	.clubCardBlock01 .cardBtn {
		position: static;
		margin-top: 10px;
	}

	/* clubPointBlock */
	.clubPointBlock01 {
		display: block;
		margin-top: 15px;
	}
	.clubPointBlock01 *[class*="colorBox"] {
		padding: 15px;
		width: 100%;
	}
	.clubPointBlock01 .colorBox02 {
		margin-top: 10px;
		margin-left: 0;
	}
	.clubPointBlock01 .pointTitleColumn .img {
		width: 40px;
		min-width: 40px;
	}
	.clubPointBlock01 .pointTitleColumn .title {
		margin-left: 5px;
		text-align: center;
	}
	.clubPointBlock01 .pointText {
		font-size: 1.125em;
	}
	.clubPointBlock01 .pointText .num {
		font-size: 1.444em;
	}
	.clubPointBlock01 .pointImg {
		width: 200px;
	}
	.clubPointBlock01 .resonyaCommentBox {
		display: none !important;
	}
	.resonyaCommentBox {
		display: flex !important;
		align-items: center;
		margin-top: 10px;
	}
	.resonyaCommentBox .img {
		width: 70px;
		min-width: 70px;
	}

	/*-------------------------------------------
	Column
	-------------------------------------------*/
	/* clubCardColumn */
	.clubCardColumn01 .columnItem,
	.clubCardColumn02 .columnItem {
		width: 120px;
	}

	/* clubArrowColumn */
	.clubArrowColumn01 > *:first-child {
		width: 40%;
	}
	.clubArrowColumn01 > *:last-child {
		margin-left: 10%;
		width: 50%;
	}
	.clubArrowColumn01 > *:last-child:before {
		left: -22%;
		font-size: 27px;
	}

	/*-------------------------------------------
	Title
	-------------------------------------------*/
	.fullColumnTitle01 {
		margin: 0 -10px;
		padding: 19px 10px 18px;
		font-size: 1.25em;
		line-height: 1.5;
	}
	.fullColumnTitle01 .titleInner > span {
		font-size: 1.1em;
	}
	.fullColumnTitle01.titleIcon01 > span {
		padding: 0 35px;
	}
	.fullColumnTitle01.titleIcon01 > span:before {
		margin-top: -17px;
		width: 22px;
		height: 33px;
	}
	.headTitle01 {
		font-size: 1.375em;
		line-height: 1.41;
	}
	.headTitle02 {
		font-size: 1.125em;
	}
	.headTitle02 .titleInner > span {
		font-size: 1.111em;
	}
	.headTitle02 .titleInner .num {
		font-size: 1.8em;
	}
	.informationTitle01 {
		margin-bottom: 40px;
	}

	/*-------------------------------------------
	Icon
	-------------------------------------------*/
	.iconModal01 > span:before {
		right: 12px;
	}
	.iconCard01 > span,
	.iconCard02 > span {
		padding-left: 80px;
	}
	.iconCard01 > span:before,
	.iconCard02 > span:before {
		width: 73px;
		height: 43px;
		margin-top: -22px;
	}
	.iconDecoration01 > span {
		padding: 0;
	}
	.iconDecoration01 > span:before,
	.iconDecoration01 > span:after {
		content: none;
	}
	.iconPoint01 > span {
		padding-left: 30px;
	}
	.iconPoint01 > span:before {
		margin-top: -10px;
		width: 24px;
		height: 24px;
	}

	/*-------------------------------------------
	Utility
	-------------------------------------------*/
	.spNegativeMargin10 {
		margin-top: -10px;
	}

	/*-------------------------------------------
	Modal
	-------------------------------------------*/
	.timingList {
		display: block;
		margin-top: 30px;
	}
	.timingList > li {
		margin-top: 10px;
		margin-right: 0;
	}
	.timingPosition {
		position: relative;
		top: auto;
		left: auto;
	}
	.timingHorizon {
		display: flex;
		align-items: center;
		padding-top: 15px;
	}
	.timingHorizon > * {
		width: 50%;
	}
	.timingHorizon > div {
		margin-top: 0;
	}

}