@charset "UTF-8";


/********************/
/* keycolor #363E4C */
/********************/
.key {color:#2C87CA;}
:root {
 --main-color:#2C87CA;
 --text-color:#313538;
 }
 
 
 
/* margin */

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt90 {margin-top:90px;}
.mt100 {margin-top:100px;}

.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb90 {margin-bottom:90px;}
.mb100 {margin-bottom:100px;}


.small {font-size:0.8em;}




/* icon */
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 16px 0 0;
	color: #363E4C;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}


.sample1-2::before{
	right: 3px;
	width: 7px;
	height: 1px;
	background: #363E4C;
}
.sample1-2::after{
	right: 3px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #363E4C;
	border-right: 1px solid #363E4C;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* - Link Button - */
.btnArea {
  clear:both;
  display:block;
}

.btnArea a.btn {
  padding:10px 36px 10px 20px;
  color:#fff!important;
  font-size:20px;
  line-height:1em;
  font-weight:500;
  text-decoration:none;
}

.btnArea a.btn_pink {background:#D5736A;}

.btnArea .arrow::before,
.btnArea .arrow::after {right:20px;}

.btnArea .sample1-2::before{background: #fff;}
.btnArea .sample1-2::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}