@charset "UTF-8";
.sp-style {display: none;}
@media screen and (max-width: 768px) {.sp-style {display: block;}}
.pc-style {display: none;}
@media screen and (min-width: 769px) {.pc-style {display: block;}}


@-webkit-keyframes skeleton-animation
{0%{-webkit-transform:translateX(-100%);
	transform:translateX(-100%)}
	100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
	@keyframes skeleton-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
	100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
	.c-wrapper{margin:auto;padding:0 16px}
	.sm .c-wrapper{padding:0 24px}
	.md .c-wrapper{padding:0 36px}
	.lg .c-wrapper{padding:0 56px}
	.xl .c-wrapper{padding:0 76px}
	.xxl .c-wrapper{padding:0 76px}
	@media screen and (min-width: 1536px){.c-wrapper{max-width:1536px}}
	.pc .p-section .__ssmall{max-width:800px}
	.sp .p-section .__ssmall{max-width:100%;}
	.tablet .__ssmall{max-width:100%;}
  .__ssmall {
	  width: 92%;
	  margin: 0 auto;
	}
	.tablet .__ssmall{
		max-width: 800px;
		margin: 0 auto;}
	.pc .__ssmall{
		max-width: 800px;
		margin: 0 auto; }
  .p-section_wrapper_body{margin: 20px 0 20px;}
	.tablet .p-section_wrapper_body{margin: 40px 0 40px;}
  .pc .p-section_wrapper_body{margin: 80px 0 40px;}


/*mainvisual*/
@-webkit-keyframes skeleton-animation
{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
@keyframes skeleton-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
.p-mainvisual{
	position:relative;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;align-items:center;
	-webkit-box-pack:center;-ms-flex-pack:center;
	justify-content:center;
	height:240px;background-position:center;
	background-repeat:no-repeat;background-size:cover;
	background-color:#262626}
.tablet .p-mainvisual{
	height:300px
}
.pc .p-mainvisual{
	height:400px
}
.p-mainvisual.__small{
	height:200px
}
.tablet .p-mainvisual.__small{
	height:220px
}
.pc .p-mainvisual.__small{
	height:240px
}
.p-mainvisual.__brokenGrid{
	padding:30px 0
}
.tablet .p-mainvisual.__brokenGrid{
	padding-bottom:60px
}
.pc .p-mainvisual.__brokenGrid{
	padding-bottom:60px
}
.p-mainvisual:before{
	content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
}
/*background:rgba(0,0,0,0.32)*/
.p-mainvisual_title{
	position:relative;z-index:2;padding:16px;text-align:center;line-height:1.32
}
.p-mainvisual_title_main{
	display:block;font-size:4.8rem;
	font-family: 'Oswald', sans-serif;
	font-size:6.4rem;
	color: #fff;
	font-weight: bold;
}
.tablet .p-mainvisual_title_main{
	font-family: 'Oswald', sans-serif;
	font-size:6.4rem;
	color: #fff;
	font-weight: bold;
}
.pc .p-mainvisual_title_main{
	font-size:8.8rem
}
.p-mainvisual_title_main.__small{
	font-size:3.2rem
}
.tablet .p-mainvisual_title_main.__small{
	font-size:3.6rem
}
.pc .p-mainvisual_title_main.__small{
	font-size:4rem
}
.p-mainvisual_title_main.__small span{
	font-weight:bold
}
.p-mainvisual_title_sub{
	display:block;
	font-size:1.6rem;
	font-weight:bold;
	/*margin-top:8px;*/
	color: #fff;}
.tablet .p-mainvisual_title_sub{
	margin-top:12px;font-size:1.8rem
}
.pc .p-mainvisual_title_sub{
	/*margin-top:16px;*/
	font-size:2rem
}
.p-mainvisual_title_sub.__small{
	font-size:1.4rem;
	/*margin-top:4px*/
}
.tablet .p-mainvisual_title_sub.__small{
	font-size:1.5rem;margin-top:4px
}
.pc .p-mainvisual_title_sub.__small{
	margin-top:4px;font-size:1.6rem
}




@-webkit-keyframes skeleton-animation
{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
@keyframes skeleton-animation
{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}
/*.p-section{position:relative;z-index:1;margin-top:24px}
.tablet .p-section{margin-top:50px}
.pc .p-section{margin-top:50px}*/
.p-section.__brokenGrid .p-mainSection_wrapper{margin-top:-88px}
.tablet .p-section.__brokenGrid .p-mainSection_wrapper{margin-top:-104px}
.pc .p-section.__brokenGrid .p-mainSection_wrapper{margin-top:-120px}
.p-section_wrapper_title{text-align:center;font-size:24px;font-weight:bold;line-height:32px;}
.tablet .p-section_wrapper_title{font-size:32px; line-height: 1.6;}
.pc .p-section_wrapper_title{font-size:32px; line-height: 1.6;}
.p-section_wrapper_title .u-ff-web{font-size:2.9rem;font-weight:400}
.tablet .p-section_wrapper_title .u-ff-web{font-size:3.1rem}
.pc .p-section_wrapper_title .u-ff-web{font-size:3.4rem}
/*.p-section_wrapper_body{margin-top:24px}*/
.tablet .p-section{padding:0;}
/*.tablet .p-section_wrapper_body{margin-top:50px}
.pc .p-section_wrapper_body{margin-top:50px}
*/


.p-section_wrapper_title .font_accent{font-size:36px;}
.tablet .p-section_wrapper_title .font_accent{font-size:38px;}
.pc .p-section_wrapper_title .font_accent{font-size:42px;}





.__red{
  background-color:#C2000E; }
.__red .p-section_wrapper_title {
	color: #fff;
	margin-top: 20px;
}
.__red p{
	text-align: center;
	color: #fff;
}
.__white{
  color: #fff;
}

.p-section.__red{ padding:20px 0;}
.tablet .p-section.__red{ padding:20px 0;}
.pc .p-section.__red{ padding:20px 0;}


 .p-section_wrapper_body.__join{
    margin: 30px 0 30px;
  }
 .pc .p-section_wrapper_body.__join{
    margin: 50px 0 50px;
  }








/* accordion01 */
.contents {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-single-title {
  /*border: 1px solid #333;*/
  padding: 20px;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  margin: 0;
}
.accordion-single-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .3s ease-in-out;
  transition: max-height .3s ease-in-out;
  line-height: 1.5;
}
.accordion-single-content p {
  padding: 0;
}
.accordion-single-item.is-open .accordion-single-content {
  max-height: 2000px;
  border-top: 1px solid #C2000E;
  padding-top: 40px;
  padding-bottom: 40px;
}
.pc .accordion-single-item.is-open .accordion-single-content {
  padding-bottom:0;
}
.accordion-single-item.is-open .accordion-single-title::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
.accordion-single-item{
	margin: 0 0 30px 0;
	background-color: #fff;
}



/* WEB入会の流れ */
.js-acc-single{
  margin: 40px 0 0 0;
}
h2.js-acc-single-trigger{
  text-align: center;
  color: #D7000F;
  font-weight: bold;
  font-size: 18px;
}
h2.js-acc-single-trigger._flex{
  line-height: 1;
}
h2.js-acc-single-trigger span{
  font-size: 15px;
  line-height: 0;
}
.tablet h2.js-acc-single-trigger{font-size: 24px;}
.pc h2.js-acc-single-trigger{font-size: 24px;}

h2.accordion_content_title{
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32px;
}
.p-section.__flow {
	color: #fff;
	background-image: none;
	/*background: #fff;*/
}
.p-section.__flow .p-box{
	position: relative;
	margin-top: 32px;
}
.tablet .p-section.__flow .p-box{
	position: relative;
	margin-top: 60px;
}
.p-section.__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;
}
.p-section.__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;
}
.p-section.__flow .__flowArrow{
	padding: 14px auto 0;
}
.__flowArrow{
  margin: 12px 0 20px;
}
.__red .p-section_wrapper_titl{
	color: #333;
	margin-top: 10px;
}
.accordion-single-content .join-box{
	border: 1px solid #333;
	background-color: #fff;
}
.__red .join-box p{
	color: #333;
}
.__first,.__second,.__third,.__force,.__five{
	position: relative;
  padding: 2em 1em 1em;
}
.pc .__first,.pc .__second,.pc .__third,.pc .__force,.pc.__five{
  position: relative;
  padding: 2em 1em 1em;
}
.join-box{
	margin: 30px 0 0 0;
}
.accordion-single-title::after {
    content: "";
    position: absolute;
    right: 20px;
    top: calc(50% - 5px);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 18px;
    height: 18px;
    border-top: solid 3px #D7000F;
    border-right: solid 3px #D7000F;
    -webkit-transform: translateY(-50%) rotate(135deg);
    transform: translateY(-50%) rotate(135deg);
}
.__pdf a:after {
  content:"";
  width: 12px;
  height: 15.8px;
  display: inline-block;
  background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/images/icon/icon-pdf.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  margin: 0 0 0 0.5em;
}



/* scrol llist */
.ul-scroll_box{
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 1em 2em;
	/* overflow-y: scroll;
  	height: 300px; */
}
.ul-scroll{
	list-style-type: square;
}
.ul-scroll a {
  text-decoration: underline;
}
.ul-scroll a:hover {
  opacity: 0.7;
  text-decoration: none;
}
.__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;
}
.__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;
}

.__third::after {
	position: absolute;
  	content: 'STEP3';
  	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;
}

.__force::after {
	position: absolute;
  	content: 'STEP4';
  	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;
}

.__five::after {
	position: absolute;
  	content: 'STEP5';
  	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;
}


/* accordion02 */
.accordion{
  margin-top: 10px;
}

.accordion__container {
  /*width: 92%;*/
  margin: 0 auto;
}
.tablet .accordion__container{
	max-width: 800px;
}
.pc .accordion__container {
  width: 100%;
  margin: 0 auto;
}
.pc .accordion__container{
	max-width: 800px;
}


.accordion__title {
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
  padding: .6em 3em .6em 4em;
  position: relative;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/join/icon_qa_q.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position:20px center;
  line-height: 1.4;
}

.accordion__title::before, .accordion__title::after {
  content: '';
  display: block;
  background-color: #00516D;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  right: 25px;
}

.accordion__title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}

.accordion__title:hover,
.accordion__title:active,
.accordion__title.is-active {
  background-color: #fff;
}

.accordion__title.is-active::before {
  opacity: 0;
}

.accordion__title.is-active::after {
  transform: rotate(0);
}

.accordion__content {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  padding: 0 1.5em;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
}

.accordion__content.is-open {
  border: 1px solid #333;
  border-top: none;
  padding: .625em 1em .625em 4em;
  line-height: normal; /* numberに書き換える*/
  height: auto;
  opacity: 1;
  background-image: url(/wp-content/themes/consadole-sapporo/resources/images/fanclub/join/icon_qa_a.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position:20px 1em;
}

/* QA */
.accordion__title::before, .accordion__title::after {
  content: '';
  display: block;
  background-color: #00516D;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  right: 25px;
}
.qa *, .qa *:after, .qa *:before {
	font-family: sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.qa {
	margin: 0 0 2em 10px;
	padding: 1em 1em 0.5em 1em;
	background: #e1f5fe;
}
.qa dl {
	margin: 0;
}
.qa dt {
	margin-bottom: 0.5em;
	padding: 0.2em 0.5em 0.5em 2em;
	border-radius: 0.2em;
	background: #ffb74d;
}
.qa dd {
	margin-bottom: 1em;
	margin-left: 0;
	padding: 0.5em 1em 1.5em 3em;
}


/* QAアイコン */
.qa dt::before,.qa dd::before{
	font-size: 1.5em;
	color: #ffffff;
}
.qa dt::before, dt:after {
	content: 'Q';
	color: #00516D;
}

.qa dd::before {
	margin: 0 0.5em 0 -0.5em;
	padding: 0.2em 0.4em;
	content: 'A';
	color: #D7000F;
	}

.qa dd::before {
	margin: 0 0.5em 0 -0.5em;
	padding: 0.2em 0.4em;
	content: 'A';
	color: #D7000F;

}


/*btn*/
.p-section_wrapper_btnArea{
  text-align: center;
}
/*.c-linkButton.__outline {
    color: #656565;
    border: solid 1px #656565;
    background-color: #fff;
}*/
.c-linkButton.__small {
    max-width: 160px;
    padding: 12px;
    margin-top: 30px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
    color: #656565;
    border: solid 1px #656565;
    background-color: #fff;
}
.pc .c-linkButton.__small {
    margin-top: 0;
}
.xl .p-section_wrapper_btnArea.__top {
    right: 76px;
}
.pc .p-section_wrapper_btnArea.__top {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    text-align: right;
    margin-top: 0;
}



/*footer*/
footer{
  margin-top: 80px;
}

/* unizon追加分 */

/* accordionMenuList */
.p-accordionMenuList {
  transition: .5s;
  border: solid 1px #333333;
}
.p-accordionMenuList:nth-of-type(n + 2) {
  margin-top: 20px;
}
.p-accordionMenuList_title {
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: normal;
  padding: 16px 40px;
  position: relative;
  background-position: center right 20px;
  line-height: 1.3;
}
.p-accordionMenuList_title.__isOpened {
  padding: 16px 40px;
  position: relative;
  background-position: center right 20px;
}
.p-accordionMenuList_title_icon {
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem;
  line-height: 21px;
  color: #00516D;
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
}
.p-accordionMenuList_title::before, .p-accordionMenuList_title::after {
  content: '';
  display: block;
  background-color: #00516D;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  right: 25px;
}
.p-accordionMenuList_title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}
.p-accordionMenuList_title.__isOpened::after {
  transform: rotate(0);
}
.p-accordionMenuList_description {
  position: relative;
  transition: 0.5s;
  height: 0;
  overflow:hidden;
}
.p-accordionMenuList_description.__isOpened {
  border-top: solid 1px #333333;
}
.p-accordionMenuList_description_wrap {
  padding: 16px 16px 20px 40px;
  position: relative;
}
.p-accordionMenuList_description_wrap::before {
  content: "A";
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem;
  line-height: 21px;
  color: #D7000F;
  position: absolute;
  left: 14px;
  top: 18px;
}
.p-accordionMenuList_description_wrap_text {
  font-size: 1.4rem;
  line-height: 1.5;
}
.p-accordionMenuList_description_wrap_text a {
  text-decoration: underline;
}
.p-accordionMenuList_description_wrap_text a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.p-accordionMenuList_description_wrap_text_indent {
  padding-left: 1em;
  text-indent: -1em;
}

.u-colorPrimary {
  color: #D7000F;
}