@charset "UTF-8";

.__red{
	background-color:#C2000E; }

.line {
	border: 1px solid white;
	padding: 0 1%;
}

.pc .line {
	margin: 30px 0;
}

.btn {
	width: 260px;
	margin: 0 auto;
	padding-bottom: 15px;
}

.btn.__point{
	width: 320px;
	padding-top: 25px;
}

.tablet .btn._online {
	position: absolute;
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	.tablet .btn._mypage {
	position: absolute;
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
.__rel {
	position: relative;
}

.dole-about {
	position: absolute;
	top: -5px;
	left: calc(50% - 188px);
	width: 100px;
}

.tablet .dole-about {
	position: absolute;
	top: -32px;
	left: calc(50% - 278px);
	width: 100px;
}

.pc .dole-about {
	position: absolute;
    top: -65px;
    left: calc(50% - 320px);
    width: 130px;
}

.star-box img {
	margin: 0 12px;
}
.star-box img:first-of-type {
	width: 30px;
}
.star-box img:last-of-type {
	width: 25px;
}
.tablet .star-box img:first-of-type {
	width: 36px;
}
.tablet .star-box img:last-of-type {
	width: 28px;
}
.pc .star-box img:first-of-type {
	width: 40px;
}
.pc .star-box img:last-of-type {
	width: 30px;
}

.p-section_wrapper_title span{
	display: inline-block;
	width:1px;
	height:24px;
	background: #FFF;
}
.tablet .p-section_wrapper_title span{
	width:1px;
	height:30px;
}
.pc .p-section_wrapper_title span{
	width:2px;
	height:32px;
}
.p-section_wrapper_title span:first-of-type {
	transform: rotate(-20deg) translateX(-5px) translateY(2px);
}
.p-section_wrapper_title span:last-of-type {
	transform: rotate(20deg) translateX(5px) translateY(2px);
}

.sp .c-linkButton.__small {
	/* height: 66px; */
	padding: 6px;
	/* display: flex; */
}

.tablet .c-linkButton.__small {
	/* height: 66px; */
	padding: 5px;
	/* display: flex; */
}

.sp .c-linkButton.__small.__navi{
	/* height: 66px; */
	padding-top: 16px;
	padding-bottom: 15px;
}

/* .__navi span {
	display: inline-block;
} */

/* ポイントプログラムとは？ */
#about {
	color: #fff;
}
#about .p-box{
	position: relative;
	margin-top: 32px;
	border: 1px solid white;
}
.tablet #about .p-box{
	position: relative;
	margin-top: 60px;
}
#about .p-box p{
	line-height: 1.5;
	margin-top: 10px;
}
.pc #about .p-box p{
	line-height: 1.5;
	margin-top: 20px;
}
#about .p-box:nth-child(1){
	margin-top: 44px;
}

.pc .__first.__point,.pc .__point {
	display: flex;
}

.pc .p-box.__red {
	padding: 40px 100px;
}
.p-box a {
	text-decoration: underline;
}


#about .p-box .__first::after {
	position: absolute;
  	content: 'ポイントプログラム';
	width: 247.5px;
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: #D7000F;/*文字色*/
  	background: #FFFFFF;
    padding: 5px 0;
	font-size: 1.6rem;
	font-weight: bold;
}

.pc #about .p-box .__first::after,.pc #about .p-box .__second::after,.pc #about .p-box .__third::after,.pc #get .p-box .__first::after,.pc #rank .p-box .__first::after,.pc #use .p-box .__first::after,.pc #notice .p-box .__first::after,.pc #question .p-box .__first::after
{
	width: 380px;
}
.__second::after {
	position: absolute;
  	content: 'ポイントプログラム参加対象';
	  width: 247.5px;
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: #D7000F;/*文字色*/
  	background: #FFFFFF;
    padding: 5px 0;
	font-size: 1.6rem;
	font-weight: bold;
}
.__third::after {
	position: absolute;
  	content: 'ランクとポイントの確認方法';
	  width: 247.5px;
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: #D7000F;/*文字色*/
  	background: #FFFFFF;
    padding: 5px 0;
	font-size: 1.6rem;
	font-weight: bold;
}
.__third .btn {
	margin-top: 22px;
}
.tablet .__third .btn {
	margin-top: 23px;
}
.pc .__third .btn {
	margin-top: 24px;
}
#about .__aboutArrow{
	padding: 14px auto 0;
}

.point-graf {
	width: 60%;
	margin-left: 28%;
}

.pc .point-graf {
	width: 650px;
	margin-left: 0;
	margin-right: 28px;
}

/* .pc .point-graf-text {
	padding-right: 102px;
} */

.pc .j-logo,.pc .club-card {
	width: 300px;
	padding-right: 28px;
}

.pc .club-card-text {
	flex: 1;
}


.sp .rank {
	margin-top: 28px;
}
.pc .rank {
	display: flex;
}
.rank-item {
	max-width: 680px;
	margin:0 auto;
}
.pc .rank-item:first-of-type {
	margin-right: 28px;
}
.sp .rank-item:last-of-type {
	margin-top: 14px;
}
.pc .rank-item:last-of-type {
	margin-top: 0;
}
.rank-image{
	width: 100%;
}
.tablet .point-confirm {
	max-width: 600px;
	margin-left:auto;
	margin-right:auto;
}
.pc .point-confirm {
	width: 300px;
	padding-right: 28px;
	max-width: auto;
	margin-left:0;
	margin-right:0;
}

/* ポイントを貯める */
#get {
	color: #fff;
}

.pc #get h2 {
	padding:0 0 8px 0;
}
.pc #get h2:last-of-type {
	padding:8px 0 16px 0;
}

#get .p-box{
	position: relative;
	margin-top: 45px;
	border: 1px solid white;
	background-color: black;
}
.pc #get .p-box{
	margin-top: 0;
}

#get .p-grid_subtitle {
	color: #333333;
	font-weight: bold;
}

#get .p-grid_item_wrap > img{
	width:100%;
}

#get .p-box .__first::after {
	position: absolute;
  	content: 'ポイント獲得期間';
	width: 247.5px;
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: black;/*文字色*/
  	background: #FFFFFF;
    padding: 5px 0;
	font-size: 1.6rem;
	font-weight: bold;
}

/* ランク及びランク特典 */
#question,#use,#notice,#rank {
	background-color: #F2F2F2;
	color: #fff;
}
#rank.p-section{
	padding: 40px 0 0;
}
.pc #rank.p-section{
	padding: 80px 0 0;
}
#rank.p-section .p-section_wrapper_title,
#use.p-section .p-section_wrapper_title {
	color: black;
}
#rank.p-section .p-table.__rank tbody th {
	color: #fff;
}
#rank.p-section .p-table.__rank tbody th.__red {
	background-color: #FF0000;
}
#rank.p-section .p-table.__rank tbody th.__black {
	background-color: #000;
}
#rank.p-section .p-table.__rank tbody th.__premium {
	background-color: #E3B114;
}

#rank.p-section .p-table.__benefits th.__premium,
#rank.p-section .p-table.__benefits td.__premium {
	background-color: #E3B114;
	width: 15%;
	color: #fff;
}
#rank.p-section .p-table.__benefits th.__black,
#rank.p-section .p-table.__benefits td.__black {
	background-color: #000;
	width: 15%;
	color: #fff;
}
#rank.p-section .p-table.__benefits th.__red,
#rank.p-section .p-table.__benefits td.__red {
	background-color: #FF0000;
	width: 15%;
	color: #fff;
}

.pc #rank.p-section .p-table.__benefits th.__premium,
.pc #rank.p-section .p-table.__benefits td.__premium {
	width: 10%;
}
.pc #rank.p-section .p-table.__benefits th.__black,
.pc #rank.p-section .p-table.__benefits td.__black {
	width: 10%;
}
.pc #rank.p-section .p-table.__benefits th.__red,
.pc #rank.p-section .p-table.__benefits td.__red {
	width: 10%;
}

#rank.p-section .p-table.__benefits tbody th {
	width: 26%;
	text-align: left;
}

#use.p-section .p-table tbody th {
	width: 40%;
}
#use.p-section .p-table tbody td p {
	text-align: left;
}

#use.p-section,#notice.p-section {
	padding: 24px 0 0;	padding: 24px 0 0;
}
.pc #use.p-section,#notice.p-section {
	padding: 48px 0 0;
}
#question.p-section {
	padding: 24px 0 40px;
}
.pc #question.p-section {
	padding: 48px 0 80px;
}


#question p,#use p,#notice p,#rank p {
	color: #333333;
}

.pc #question p,.pc #use p {
	text-align: center;
}

#question .p-box, #use .p-box,#notice .p-box,#rank .p-box{
	position: relative;
	margin-top: 32px;
	border: 1px solid #333333;
	background-color: #F2F2F2;
}
.pc #question .p-box, .pc #use .p-box,.pc #notice .p-box,.pc #rank .p-box {
	padding: 38px 100px;
}

#question .__first::after, #use .__first::after,#notice .__first::after,#rank .p-box .__first::after {
	position: absolute;
	width: 247.5px;
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: #FFF;/*文字色*/
  	background: #333333;
    padding: 5px 0;
	font-size: 1.6rem;
	font-weight: bold;
}

#rank .p-box .__first::after {
	content: 'ランク及びランク特典';
}

#use .p-box .__first::after {
	content: 'ポイントを利用する';
}

#notice .p-box .__first::after {
	content: '注意事項';
}

#question .p-box .__first::after {
	content: 'よくあるご質問';
}

.c-linkButton.__xlarge.__arrow.__primary{
	max-width: none;
}

.pointButtonArea{
	padding: 10px 0;
}

.c-linkButton._point {
	max-width: 160px;
	width: 100%;
	padding: 12px;
	font-size: 1.4rem;
	font-weight: 500;
	color: #000000;
	border:solid 1px #b3b3b3;
	background-color: #fff;
	border-radius: 8px;
	max-width: 320px;
}
.c-linkButton._point::after{
		content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 8px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/images/icon/icon-arrow-gray.svg);
    background-size: cover;
}

.__left{
	text-align: left;
}

.c-linkButton.__xlarge.__white.__arrow {
	position: relative;
    display: inline-block;
    width: 100%;
    font-feature-settings: "palt";
    color: #D7000F;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 20px 0;
    text-align: center;
    text-decoration: none !important;
    line-height: 1;
    font-size: 2rem;
    font-weight: bold;
    transition: all 100ms linear;
    cursor: pointer;
}
.c-linkButton.__xlarge.__white.__arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% + 2px);
    right: 13px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/images/icon/icon-arrow-red.svg);
    background-size: cover;
}
/* ボタンの矢印向き変更 */
.c-linkButton.__lightMode.__arrow:after {
    transform: rotate( 90deg );
}
/* 横並びボタンの幅調整 */
.p-grid .c-linkButton.__lightMode.__small{
	width: calc(50% - 20px);
}
/* box-shadowをオフ */
.c-linkButton.__primary.__noShadow{
	box-shadow: none;
	max-width: 100%
}
.tablet .c-linkButton.__primary.__noShadow{
	max-width: 260px;
}
/* pc 注意事項の高さ調整 */

/* pdfアイコンを追加 */
.c-linkButton.__primary.__noShadow.__arrow:after{
	background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/images/icon/icon_pdf.svg);
	width: 14px;
	height: 18px;
	margin-top: -10px;
}
/* pdfボタンサイズ調整 */
.c-thumbLinkButton {
	width: 100%;
}
.tablet .c-thumbLinkButton {
	width: calc(50% - 112px);
}
/* スラッシュ部分 */
.__slash{
	display: inline-block;
    width: 14px;
    height: 30px;
    background-repeat: no-repeat;
	background-size: cover;
	margin: -4px 4px;
}
/* grid余白 */
.p-grid_item {
	background-color: #000;
	color: black;
	display: flex;
	flex-direction: column;
}
.p-grid_item_wrap {
	background-color: #FFF;
	height: 100%;
	position:relative;
}
/* .p-grid > * {
	padding: 0;
} */
.p-grid_text {
	padding: 0 16px;
}
.p-grid .p-grid_item {
    margin-bottom: 40px;
}
.tablet .p-grid .p-grid_item {
    margin-bottom: 50px
}
.p-grid_subtitle {
	width: 100%;
	background-color: #F2F2F2;
	color: black;
	padding: 10px 0;
}
/* ラベル */
.p-grid_item_label{
	margin-bottom: 8px;
}
/* 特典タイトル */
.p-grid_item_title{
	display: flex;
	align-items: center;
	color: #FFFFFF;
}
.p-grid_item_title p{
	line-height: 1.5;
}
/* 番号 */
.__number {
	height:36px;
	width:36px;
	border-radius:50%;
	line-height:36px;
	text-align:center;
	background:#fff;
	color: black;
	font-size:24px;
	margin-right: 8px;
  }
.tablet .__number{
	height:40px;
	width:40px;
	line-height:40px;
}
/* 特典画像 */
.p-grid_item img.__special{
	margin: 14px 0;
}
/* 会員の種類 キャッチコピー */
.p-grid_item .c-catchcopy{
	margin-bottom: 14px;
}
.tablet .p-grid_item .c-catchcopy{
	margin-bottom: 40px;
}

/* grid pタグlineHeight */
.p-grid_item p{
	line-height: 1.5;
}

/* spのみ表示 */
.tablet .__sp{
	display: none;
}
/* sp以外で表示 */
.__pc{
	display: none;
}
.tablet .__pc{
	display: block;
}
/* 注意書き */
.__notice{
	font-size: 1.2rem;
	line-height: 1.5;
}
.__notice a {
	text-decoration: underline;
}
/* 特典比較表 */
.p-section.__black {
	color: #fff;
}
/* 価格表 */
.p-table td,
.p-table th{
	padding: 10px;
}
.tablet .p-table td,
.tablet .p-table th{
	padding: 16px;
}
.p-table th{
	background-color: #fff;
	color: #333;
}
.p-table td{
    background-color: #fff;
	color: #333;
}
.p-table td.__back{
	background-color: #1e506b;
	color: #fff;
}
.p-table td.__back-black{
	background-color: #323335;
	color: #fff;
	padding: 16px 15px;
    width: 60px;
}
.p-table td .__vertical{
	writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    letter-spacing: .2em;
}
.p-table td .__vertical span.__vertical-part{
	writing-mode: horizontal-tb;
}
.p-table .__event{
	width: 160px;
}
.tablet .p-table .__event{
	min-width: 300px;
}
.p-table .__category{
	width: 100px;
}
.tablet .p-table .__category{
	min-width: 114px;
}

.p-table .__moreFun{
	background-color: #b80002;
	color: #fff;
	border-bottom: solid 1px #fff;
	border-right: 0;
	border-left: 0;
}
.p-table .__regular{
	background-color:#df333f;
	color: #fff;
	border-bottom: solid 1px #fff;
	border-right: 0;
	border-left: 0;
}
.p-table .__junior{
	background-color:#00516e;
	color: #fff;
	border-bottom: solid 1px #fff;
	border-right: 0;
	border-left: 0;
}
.p-table .__bottomNone{
	border-bottom: 0;
}

/* WEB入会の流れ */
#flow {
	color: #fff;
}
#flow .p-box{
	position: relative;
	margin-top: 32px;
}
.tablet #flow .p-box{
	position: relative;
	margin-top: 60px;
}
#flow .p-box p{
	line-height: 1.5;
	margin-top: 10px;
}
#flow .p-box:nth-child(1){
	margin-top: 44px;
}
#flow .p-box .__first::after {
	position: absolute;
  	content: 'STEP1';
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: white;/*文字色*/
  	background: #333;
    padding: 0 56px;
	font-size: 2rem;
}
#flow .p-box .__second::after {
	position: absolute;
  	content: 'STEP2';
  	top: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  	color: white;/*文字色*/
  	background: #333;
    padding: 0 56px;
    font-size: 2rem;
}
#flow .__flowArrow{
	padding: 14px auto 0;
}