@charset "utf-8";
/* CSS Document */

/*------------------------------------
base
------------------------------------*/
body {
	font-family			: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size			: 14px;
	-webkit-text-size-adjust	: none;
	line-height			: 1.2;
}

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

a{
	cursor				: pointer;
	text-decoration			: none;	
}

a:hover {
	opacity				: 0.925;
}

.anchor{
	height				: 1px;
}

img {
	max-width			: 100%;
	width				: 100%;

}


.h4{
	font-size			: 1.2rem;
	font-weight			: bold;
	line-height			: 2;
}

.d-flex{
	display				: -webkit-box !important;
	display				: -webkit-flex !important;
	display				: -ms-flexbox !important;
	display				: flex !important;
	flex-wrap			: wrap;
	-webkit-flex-wrap		: wrap;
	-ms-flex-wrap			: wrap;
	flex-wrap			: wrap;
}

.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-sm-8,
.col-sm-4,
.col-sm-3,
.col-3,
.col-4,
.col-6,
.col-7,
.col-8{
	position		: relative;
	width			: 100%;
	min-height		: 1px;
}

.col-3 {
	-ms-flex		: 0 0 25%;
	flex			: 0 0 25%;
	max-width		: 25%;
}

.col-4 {
	-ms-flex		: 0 0 33.333333%;
	flex			: 0 0 33.333333%;
	max-width		: 33.333333%;
}

.col-6 {
	-ms-flex		: 0 0 50%;
	flex			: 0 0  50%;
	max-width		: 50%;
}
.col-7 {
	-ms-flex		: 0 0 58.333333%;
	flex			: 0 0 58.333333%;
	max-width		: 58.333333%;
}
.col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

@media (min-width: 576px) {
	.col-sm-3 {
	-ms-flex		: 0 0 25%;
	flex			: 0 0 25%;
	max-width		: 25%;
	}
	.col-sm-8 {
	-ms-flex		: 0 0 66.666667%;
	flex			: 0 0 66.666667%;
	max-width		: 66.666667%;
	}
	.col-sm-4 {
	-ms-flex		: 0 0 33.333333%;
	flex			: 0 0 33.333333%;
	max-width		: 33.333333%;
	}
}

@media (min-width: 768px) {	
	.col-md-9 {
		-ms-flex	: 0 0 75%;
		flex		: 0 0 75%;
		max-width:	 75%;
	}
	
	.col-md-8 {
	-ms-flex		: 0 0 66.666667%;
	flex			: 0 0 66.666667%;
	max-width		: 66.666667%;
	}
	.col-md-7 {
	-ms-flex		: 0 0 58.333333%;
	flex			: 0 0 58.333333%;
	max-width		: 58.333333%;	
	}
	.col-md-5{
	-ms-flex		: 0 0 41.666667%;
	flex			: 0 0 41.666667%;
	max-width		: 41.666667%;	
	}
	
	.col-md-4 {
	-ms-flex		: 0 0 33.333333%;
	flex			: 0 0 33.333333%;
	max-width		: 33.333333%;
	}
	
	.col-md-3 {
	-ms-flex		: 0 0 25%;
	flex			: 0 0 25%;
	max-width		: 25%;
	}
	
	.col-md-6{
	-ms-flex		: 0 0 50%;
	flex			: 0 0  50%;
	max-width		: 50%;
	}
}


.align-items-center {
    -webkit-box-align		: center !important;
    -webkit-align-items		: center !important;
    -ms-flex-align		: center !important;
    align-items			: center !important;
}


body.pc .sp-btn{
	display			: none;
}

body.sp-mb .pc-btn{
	display			: none;
}
/*text
------------------------------------*/
.h6{
	font-size			: 1rem;
	font-weight			: bold;
	line-height			: 1.5;
}


.text-left{
	text-align			: left !important;
}

.text-center{
	text-align			: center !important;
}

.text-right{
	text-align			: right !important;
}

/*color
------------------------------------*/
.text-green{
	color				: #007853;
}

.bg-green{
	background			: #007853;
}

.bg-lightgreen{
	background			: #dfffca;
}

.bg-white{
	background			: #fff;
}

.bg-slightgreen{
	background			: #d5ebe8;
}

.bg-gray{
	background			: #f2f2f2;
}

/*contents-base
------------------------------------*/

.inner {
	width				: 100%;
	max-width			: 1000px;
	margin				: 0px auto;
	padding				: 50px 15px;
}

.block-title {
	text-align			: center;
	padding-bottom			: 50px;
}

.entry-btn {
	margin				: 40px  0;
}

.block-title img {
	max-width			: 300px;
}

.tab-list ul li {
	cursor				: pointer;
}
.tab-contents {
	display				: none;
}
.tab-contents.show {
	display				: block;
}

.logo{
	max-width			: 120px;
}



/*------------------------------------
#headWrap
------------------------------------*/
#headWrap {
	text-align			: center;
	background			: #007853;
}

#headWrap .inner {
	position			: relative;
	padding-bottom			: 0;
	padding-top			: 0.5rem;
}

#header_btn {
	display				: flex;
}


.tw-block{
	margin-left			: auto;
}

.fa-block{
    margin-left				: auto;
}

/*.top-mene
------------------------------------*/
.top-menu{
	margin-right			: -5px;
	margin-left			: -5px;
}
.top-menu li{
	padding				: 5px;
}

.entry-btn img {
	max-width			: 340px;
	width				: 60%;
}

.entry-time{
	width				: 90%;
}


.sp_menu {
  display: none;
  width: 100%;
}

.cp-title{
	max-width			: 800px;
	width				: 80%;
	margin  			: 0 auto;
	padding				: 1rem 0;
	text-align			: center;
}

.cp-title img{
	max-width			: 661px;
	width				: 80%;
	margin				: 0 auto;
}
.cp-detail{
	border-top			: 2px solid #007853;
	border-bottom			: 2px solid #007853;
	padding				: 1rem;
	max-width			: 800px;
	width				: 95%;
	margin  			: 0 auto;
	font-size			: 1.2rem;
	line-height			: 1.8;
}


.cp-detail h4{
	font-size			: 1.5rem;
	font-weight			: bold;
	margin-bottom			: 0.5rem;
}


.cp-detail .col-md-7 h4{
	display				: none;
}

.cp-detail a img{
	width				: 100%;
	max-width			: 350px;
	margin-top			: 0.5rem;
}


.cp-detail img{
	margin-bottom			: 1rem;
	max-width			: 200px;
}

@media (min-width: 576px) {
	
	.narrow{
		display				: none;
	}
	.cp-detail .col-md-7 h4{
		display				: block;
	}
	.cp-detail img{
		width				: 80%;
		max-width			: auto;
	}
}




#mail-sample h3{
	margin				: 0 auto;
	max-width			: 520px;
	width				: 60%;
	cursor				: pointer;
}
#mail-sample h3 img{
	cursor				: pointer;
}
#mail-sample h3 img:hover{
	opacity				: 0.9;
}

.sample-block{
	height				: 0;
	opacity				: 0;
	transition			: .5s;
	visibility			: hidden;
	width				: 100%;
	max-width			: 800px;
	margin				: 0 auto;
	padding				: 0 0.75rem;
}

.sample-block.active{
	height				: 100%;
	padding				: 0.75rem;
	opacity				: 1;
	visibility			: visible;
}

/* 賞品
================================================== */
#prize {
  text-align: center;
}

#prize .entry-btn {
  position: relative;
}

.entry-time{
	margin-top	: 40px;
}

.prizeContents img{
	margin-bottom: 3rem;
}

#prize .past-btn {
  position: relative;
}

.prize-detail dt{
  background-color: #fff;
  color: #007853;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  margin-bottom	: 1rem;
}

.prize-detail dd{
	font-weight	: bold;
}

.text-green.h4{
	width		: 90%;
	margin-left	: auto;
	margin-right	: auto;
	line-height	: 1.3;
}


.prize-detail dd br{
	display		: none;
}

.prize-detail  dl{
clear: both;
}


.p-info1 {
  max-width: 30%;
  padding: 8px 0 8px;
}


.prize-detail{
	color		: #fff;
	max-width	: 90%;
	width 		: 100%;
	margin		: 0rem  auto;
	
}

@media (min-width: 768px) {
	.prize-detail{
		font-size	: 1.2rem;
		line-height	: 1.8;
	}
	.prize-detail dt{
		float: left;
		margin-bottom		: 0rem;
		margin-top     	 	: 2%;
		width			: 31%;
		background		: none;
		background-image	: url("../images/prizedetail-bg.png");
		background-repeat	: no-repeat;
		background-size		: contain;
		border-radius		: 0;
		font-size		: 1.9rem;
		letter-spacing		: 0.5rem;
		padding-left		: 0;
		text-align		: center;
		background-position	: center right;
		
	}
	
	.prize-detail dd{
		margin-left		: 33%;
		font-size		: 1.4rem;
	}
	.text-green.h4 br,
	.prize-detail dd br{
		display		: block;
	}
	.prize-detail{
		margin-bottom	: 1rem;
	}
	
	.text-green.h4{
		width		: 80%;
		line-height	: 2;
	}
}


.pb-40 {
	padding-bottom: 40px;
}

/* エントリー手順
================================================== */


.entryContents {
	text-align	: center;
}
.entry-support .block-title{
	text-align	: left;
}
.entry-support .block-title img{
	max-width	: 742px;
	width		: 90%;
}

.entry-support .text-info{
	max-width	: 709px;
	width		: 80%;
	margin		: 1rem auto;
}
.entry-support .club_jra_link img{
	max-width	: 340px;
	width		: 60%;
	margin		: 1rem auto;
}

.entry-support .step,
.entry-step .step {
	padding: 1rem;
}

.entry-step{
	padding-bottom	: 50px;
}
.entry-step .step  .step-title{
	width	: 40%;
	margin  : 1rem auto;
}

.entry-step .step  .step-block{
	padding		:	 1rem 2.5rem;
	text-align		: center;
	background		: url("../images/step-bg.png");
	background-repeat	: no-repeat;
	background-size		: 100% 100%;
	position		: relative;
}

.entry-step .step.step-02 .step-block{
	background	: url("../images/step-bg2.png");
	background-repeat: no-repeat;
	background-size	: 100% 100%;
}

.clubjranet {
  position: relative;
  margin-bottom: 16px;
}

.entry-support ul {
  margin: 0 auto 32px;
  max-width: 95%;
}

.clubjranet img:first-child {
  max-width: 14%;
  position: absolute;
  top: -12%;
  left: 4%;
}

.clubjranet img:last-child {
  max-width: 65%;
}

.step_img {
  max-width: 48px;
}

.entry-step .step .step-block:after{
	content			: "";
	position		: absolute;
	background		: url(../images/arrow-step.png);
	background-size		: 100%;
	background-repeat	: no-repeat;
	width			: 16px;
	height			: 15px;
	top			: 45%;
	right			: -25px;
}

.entry-step .step:last-child .step-block:after{
	display	:none;
}

@media (max-width: 759.98px) {
	.entry-step .step  .step-block{
		padding		: 1rem 1.5rem;
	}
	
	.entry-support .step, .entry-step .step{
		padding		: 0.25rem;
	}
	.entry-step .step .step-block:after{
	right			: -0.75rem;
	width			: 14px;
	height			: 13px;	
	}
	
}

@media (max-width: 429.98px) {
	.entry-step .step  .step-block{
		padding		: 0.75rem;
	}
	
	.entry-step .step .step-block:after{
	right			: -0.6rem;
	width			: 10px;
	height			: 8px;	
	}
}


/* メルマガ受信設定方法
================================================== */
.bg-lightgreen .title-bg{
	background	: #015d50;
}
.jushin .inner{
	border-bottom: 2px solid #007853;
}
.bg-lightgreen .title-bg img{
	max-width	: 335px;
	margin		: 1rem;
	width		: 80%;
}

.jushin .d-flex{
	width		: 100%;
}

.jushin .item{
	padding : 15px;
}

.jushin .item  .item-box:after{
	display	: none;
}

.jushin .item-box{
	position	: relative;
	display		: block;
}

.pc-contents{
	display	:none;
}

@media (min-width: 768px) {

.jushin .item .item-box:after{
	content			: "";
	position		: absolute;
	background		: url(../images/arrow-step.png);
	background-size		: 100%;
	background-repeat	: no-repeat;
	width			: 15px;
	height			: 20px;
	top			: 45%;
	right			: -22px;
	display			: block;
}

.jushin .item:last-child  .item-box:after{
	display	:none;
}

.pc-contents{
	display	:block;
}

.cp-title{
	padding				: 2rem 0;
}
.jushin .pc-contents a img{
	width	: 18%;
	padding-left:1%;
}
.sp-contents{
	display	:none !important;
}
}


#process .processContents {
  position: relative;
}

#process .tab-list {
  margin: 0 auto;
  width: 95%;
}

#process .tab-list ul {
  width: 100%;
  position: relative;
}

#process .tab-list li {
  float: left;
  width: 33.33333%;
  padding	: 5px;
}

#process .tab-list li img {
}

#process .tab-list ul::after {
  content: "";
  display: block;
  clear: both;
}

.entryTab ol {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.entryTab-box {
  width: 47%;
  text-align: right;
  padding: 4px;
  margin: 0px 16px 16px 0px;
}

.entryTab-box img {
  padding: 15px 25px;
  padding-bottom: 10px;
}

.entryTab {
  display: none;
  margin: 0 auto;
  width: 95%;
}

.greenbold {
  font-weight: bold;
  font-size: 1.2rem;
}

.kakko {
  padding-left: 80px;
}

.step_text {
  position: relative;
  width: 100%;
  padding-left: 56px;
  text-align: left;
  min-height: 80px;
}

.step_text .step_img {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: none;
}

.entryTab p {
  padding-top: 0.5rem;
  font-size: 14px;
  font-weight: bold;
}

/* Q&A
================================================== */

.qa {
  width: auto;
  max-width: 960px;
  margin: 0 auto;
}

.qa .inner{
	padding-bottom	: 0;
}

#qa .questionContents {
  position: relative;
  margin: 0 auto;
}

.questionContents .open:after {
  transform: scale(0.5, 1);
}


.questionContents dl {
  margin: 0px auto;
  padding: 12px 0;
  max-width: 830px;
  width: 94%;
}

.questionContents dt {
  background	: #007853;
  font-weight	: bold;
  width		: 100%;
  position	: relative;
  height	: 68px;
  color		: #fff;
  cursor	: pointer;
}

.questionContents dt:before {
  content		: "";
  background		: url("../images/q.png");
  background-size	: contain;
  background-repeat	: no-repeat;
  width			: 100%;
  height		: 100%;
  position		: absolute;
  top			: 0;
  left			: 0;
}

.questionContents dt:after {
  left: 93%;
  position: absolute;
  top: 27px;
  right: 26px;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: "";
  transform: rotate(135deg);
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.questionContents dt span {
  font-weight: bold;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 50px 0 70px;
  line-height: 1.25;
  font-size	: 1.1rem;
}

.questionContents dd {
  font-weight: bold;
  padding: 0 15px;
  position: relative;
  margin-top: 8px;
  background: #fff;
  color			: #007853;
}



.questionContents .singleLine:before {
  margin-top: 0;
}

.questionContents dd p {
  margin: 20px 0 20px 0;
  font-weight: bold;
  font-size	:14px;
}

.questionContents dd a {
  color: #934700;
}

/* topBack
================================================== */

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

#footer a{
	color		: inherit;
}

.header-tw{
	max-width	: 308px;
}

#footer .inner{
	padding-bottom		: 1rem;	
	text-align		: center;
}

#footer .inner .text-green{
	width			: 80%;
	margin-left		: auto;
	margin-right		: auto;
}

#footer .logo,
.footer-sns{
	padding-top		: 1rem;
	padding-bottom		: 1rem;
}

#footer .credit{
	padding-top		: 1rem;	
}

/* top-btn
================================================== */
.topBack {
  display			: block;
  position			: fixed;
  bottom			: 16px;
  right				: 16px;
}

.topBack .circlue {
  position			: relative;
  width				: 96px;
  height			: 96px;
  border-radius			: 50%;
  background			: #007853;
  box-shadow			: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.topBack .circlue img {
  position			: absolute;
  top				: 50%;
  left				: 50%;
  transform			: translateY(-50%) translateX(-50%);
  -webkit-transform		: translateY(-50%) translateX(-50%);
  width				: 40%;
}



@media (max-width: 575.98px) {

  #header_btn {
    width				: 80%;
  }

  .sp_menu {
    display				: block;
    position				: fixed;
    top					: 0px;
    right				: 0px;
  }

  .menu-btn {
    display				: block;
    z-index				: 10;
    position				: fixed;
    top					: 0px;
    right				: 0px;
  }

  .top-menu_sp {
    display				: none;
  }

  .open-menu .top-menu_sp {
    display				: block;
    width				: 100%;
    background-color			: rgba(0, 120, 83, 0.99);
    padding				: 2rem 0.75rem;
    animation-name			: openMenu-fade-in;
    animation-duration			: 0.5s;
    animation-timing-function		: ease-out;
  }

  @keyframes openMenu-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  ul.top-menu_sp li a {
    color				: #fff;
    font-size				: 0.9rem;
    font-weight				: bold;
    padding				: 1rem 0;
    display				: block;
    text-align				: center;
  }

  body.is-fixed #gNav {
    position				: relative;
    top					: auto;
    left				: auto;
    z-index				: auto;
  }

  .menu-trigger,
  .menu-trigger span {
    display				: inline-block;
    transition				: all 0.4s;
    box-sizing				: border-box;
  }
  .menu-trigger {
    position				: relative;
    width				: 40px;
    height				: 44px;
  }

  .menu-trigger span {
    position				: absolute;
    left				: 15%;
    width				: 70%;
    height				: 4px;
    background-color			: #000;
  }
  .menu-trigger span:nth-of-type(1) {
    top					: 8px;
  }
  .menu-trigger span:nth-of-type(2) {
    top					: 20px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom				: 8px;
  }

  .menu-trigger.active {
    -webkit-transform			: rotate(360deg);
    transform				: rotate(360deg);
  }

  .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform			: translateY(12px) rotate(-45deg);
    transform				: translateY(12px) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    -webkit-transform			: translateY(0) rotate(45deg);
    transform				: translateY(0) rotate(45deg);
  }
  .menu-trigger.active span:nth-of-type(3) {
    opacity				: 0;
  }
}


/* @media
================================================== */

@media (max-width: 1199.98px) {
  #process .tab-list li {
    margin-top: 0.5rem;
  }
}

@media (max-width: 909.98px) {

  .questionContents dt span br {
    display: none;
  }
}

@media (max-width: 759.98px) {

	.inner {
		padding		: 30px 5px;
	}
	
	.entry-step{
		padding-bottom	: 30px;
	}
	.entry-btn{
		margin-top	: 20px;
		margin-bottom	: 20px;
	}

	
	.entry-time{
		margin-top	: 20px;
	}	
	.block-title{
		padding-bottom	: 30px;
	}
	
	.cp-detail{
	font-size	: 1rem;
	line-height	: 1.2;
	}

  .entryTab {
    width			: 98%;
    padding			: 48px 16px 16px;
  }

  .topBack .circlue {
    width			: 75px;
    height			: 75px;
  }
  
    .questionContents dt span {
    font-size	: 0.9rem;
    }
    
    .step_text span.greenbold br {
	display: none;
    }

}

@media (max-width: 679.98px) {
	body {
		font-size			: 11px;
	}
  .block-title img {
    max-width: 250px;
  }

  .entryTab {
    padding: 32px 16px 16px; 
  }

  .entry-step ul li img:first-child {
    padding-bottom: 12px;
  }

  .entry-step ul,
  .entry-support ul {
    display: flex;
    margin-bottom: 16px;
  }
  
  .entryTab-box {
    width: 100%;
    text-align: right;
    padding: 4px;
    margin: 0px 16px 12px 0px;
  }
  .entryTab-box img {
    padding: 16px 0px 0px 16px;
  }

  .entry-support ul {
    max-width: 100%;
  }
  .entry-step ul li,
  .entry-support ul li {
    padding: 0 1% 0;
  }
  .step_text {
    padding-left: 44px;
  }
  .step_img {
    max-width: 36px;
  }
  .questionContents dl {
    width: 96%;
  }

  .questionContents dt .greenbold {
    padding: 0 9% 0 14%;
  }
  .questionContents dt span {
    padding: 0 9% 0 14%;
  }
}

@media (max-width: 429.98px) {
	.inner {
		padding		: 20px 5px;
	}
	.entry-step{
		padding-bottom	: 30px;	
	}
	.entry-btn{
		margin-top	: 10px;
		margin-bottom	: 10px;
	}
	
	.prizeContents img{
		margin-bottom	: 25px;
	}

	.entry-time{
		margin-top	: 10px;
	}	
	.block-title{
		padding-bottom	: 20px;
	}
	
  .entryTab-box img {
    padding: 8px 0px 0px 16px;
  }
  .questionContents dt .greenbold {
    padding: 0 10% 0 25%;
  }
  .questionContents dt span {
    padding: 0 10% 0 25%;
  }
  .questionContents dt{
	height	: 78px;
  }
  
  .entry-support .text-info{
	margin	:0.25rem 0;
  }
  .h6{
	font-size	: 0.9rem;
  }
  
}