@charset "UTF-8";

/* ===============================
	style
=============================== */
h2 {
	font-size: 3.7rem;
	text-align: center;
	margin-bottom:1em;
}

h2 sup { 
	font-size: 2rem;
	margin-right:0.3em;
	top:-.7em;
}

h2 .line {
  background: linear-gradient(transparent 50%, #fff799 0%);
}

p {
	text-align: center;
}

/*--- article.1 ---*/

ul#campaign {
	width:100%;
	border: solid 1px #a39f90;
	padding:3em;
	margin-top:2em;
}

ul#campaign li:not(:last-child) {
	margin-bottom:2em;
}

ul#campaign h3 {
	color:#FFFFFF;
	font-size: 1.9rem;
	line-height:1.8;
	padding:0.2em 0;
	text-align: center;
	margin-bottom:1em;
	background-color:#383322;
}


ul#campaign ul#passlink {
	justify-content: space-between;
}

ul#campaign ul#passlink li {
	margin-bottom:0;
}

.linkbtn.pass {
	width: 450px;
	height:210px;
	font-size:1.8rem;
	color:#FFFFFF;
	border: solid 1px #a39f90;	
}
 
.linkbtn.pass p .user {
	width:200px;
	margin: 0 auto 0.5em;
	font-size:1.5rem;
	line-height: 2;
	display: block;
}	

.linkbtn.pass p .text {
	font-size: 2.2rem;
	line-height: 1.6;
	border-bottom:solid 1px #FFFFFF; 
	display: block;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}	

.linkbtn.pass p .text .jp {
	font-size: 3.2rem;
}	

.linkbtn.pass:hover {
	opacity: 0.6 ;
}

.linkbtn.pass.blue {
	background: #4483b7; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #a3cff0 0%, #2d71aa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #a3cff0 0%,#2d71aa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #a3cff0 0%,#2d71aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3cff0', endColorstr='#2d71aa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.linkbtn.pass.blue p .user {
	background-color:#0c4778;
}	

.linkbtn.pass.pink {
	background: #c45993; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #f0a3d3 0%, #aa2d6e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #f0a3d3 0%,#aa2d6e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #f0a3d3 0%,#aa2d6e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a3d3', endColorstr='#aa2d6e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.linkbtn.pass.pink p .user {
	background-color:#a7256a;
}

/*--- article.2 ---*/

#difference {
	justify-content:space-between;
}

#difference ul {
	width:1020px;
	border: solid 1px #c6c4bd;
	background-color:#FFFFFF;
	text-align: center;
	line-height:3;
	height:100%;
}

#difference ul li:not(:first-child) {
	border-top: solid 1px #c6c4bd;	
}

#difference ul li:first-child {
	color:#FFFFFF;
	line-height:3.5;
	font-size:1.8rem;
}

#difference ul#general li:first-child {
	background-color:#c6c4bd;
}

#difference ul#kodama li:first-child {
	background-color:#044e2f;
}


/*--- article.3 ---*/

#pointpr .horizon {
	margin-top:3em;
}

ul#point {
	width:720px;
	margin-right:30px;
	border-top: solid 1px #a39f90;
}

ul#point li {
	border-bottom: solid 1px #a39f90;	
	list-style-type: square;
	list-style-position: inside;
	text-indent:-1.5em;
	padding:0.5em 0 0.5em 1.5em;
	font-size:1.7rem;
	line-height: 2;
}

ul#point li .emphasis {
	font-size:2.5rem;
	font-weight: 600;
	color:#068f63;
}

#card {
	width:270px;
}

#card img {
	width:100%;
}

ul.num {
	margin-top:3em;
}


/*--- article.4 ---*/

ol.step{
	counter-reset:list;
	list-style-type:none;
	padding: 0px;
}
  
ol.step li{
	position:relative;
	line-height: 60px;
	margin: 1.5em 0 1.5em 40px;
	padding-left: 40px;
	font-size:1.8rem;
}
  
ol.step li:before{
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: -40px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background: #044e2f;
	font-size:3rem;
	text-align: center;
	color: #fff;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}


/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {	
	
/*--- article.1 ---*/	
	
ul.kome.course {
	text-align: center;
}

/*--- article.2 ---*/

#difference ul#general {
	width:46%;
}

#difference ul#kodama {
	width:52%;
}
	
	
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {

#top-image h1 .ttlfont {
	padding-left:0;
}	
	
h2 {
	font-size: 1.8rem;
	margin-bottom:1em;
}

h2 sup { 
	font-size: 1rem;
	margin-right:0.3em;
}

p {
	text-align: left;
}

/*--- article.1 ---*/

ul#campaign {
	padding:1.5em;
}


ul#campaign h3 {
	font-size: 1rem;
	line-height:1.5;
	padding:0.3em;
	margin-bottom:1em;
}
	
ul#passlink {
	display: block;
}

ul#passlink li:first-child {
	margin-bottom:1em !important;
}

.linkbtn.pass {
	width: 100%;
	height:auto;
	font-size:1rem;
	padding:1em 0;
}
	
 .linkbtn.pass p {
	text-align: center;
}	

.linkbtn.pass p .user {
	width:100%;
	margin: 0 auto 0.5em;
	font-size:1rem;
	line-height: 2;
}	

.linkbtn.pass p .text {
	font-size: 1.2rem;
	line-height: 1.2;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}	

.linkbtn.pass p .text .jp {
	font-size: 1.5rem;
}	

.linkbtn.pass:hover {
	opacity: 0.6 ;
}
	
/* 固定ヘッダーの高さ分、移動位置を調整 */	
#pointpr {
   margin-top:-7em;
  padding-top:7em;
}	
	

/*--- article.2 ---*/

#difference ul {
	width:100%;
	line-height:1.8;
	height:100%;
}
	
#difference ul li {
	padding:0.5em 0;
}
	
#difference ul li:first-child {
	line-height:2;
	font-size:1.3rem;
}
	
#difference ul#general {
	margin-bottom: 2em;
}
	
/*--- article.3 ---*/

#pointpr .horizon {
	margin-top:2em;
}

ul#point {
	width:100%;
	margin-right:0;
}

ul#point li {
	font-size:1rem;
	line-height: 1.8;
}

ul#point li .emphasis {
	font-size:1.5rem;
}

ul.num {
	margin-top:3em;
}


/*--- article.4 ---*/
	  
ol.step li{
	line-height: 1.6;
	margin: 1em 0 1em 40px;
	padding-left: 10px;
	font-size:1rem;
}
  
ol.step li:before{
	counter-increment: list;
	content: counter(list);
	left: -40px;
	width: 40px;
	height: 50px;
	line-height: 50px;
	font-size:2.2rem;
}

	
	
}