/*---------------------------------------------------
common
---------------------------------------------------*/
a {
	display			: block;
	text-decoration		: none;
	color			: inherit;
}

/*---------------------------------------------------
font
---------------------------------------------------*/
html{
	font-family		: "Noto Sans JP",'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic";
	font-size		: 10px;
}
body{
	color			: #3b4041;
	overflow-x		: hidden;
	font-size		: 1.4rem;
	line-height		: 2rem;
}

h1{
	letter-spacing		: 0.2rem;
	font-size		: 2.4rem;
	line-height		: 3rem;
}

h2{
	letter-spacing		: 0.2rem;
	font-size		: 2.2rem;
	line-height		: 2.8rem;
}

h3{
	letter-spacing		: 0.2rem;
	font-size		: 1.6rem;
	line-height		: 2.4rem;
}


/*---------------------------------------------------
text
---------------------------------------------------*/
.text-center{
	text-align		: center;
}

.small{
	font-size		: 0.9rem;
}

/*---------------------------------------------------
img
---------------------------------------------------*/

img{
	width			: 100% !important;
	vertical-align		: bottom;
}

/*---------------------------------------------------
decorations
---------------------------------------------------*/
.abs-center{
	position		: absolute;
	display			: block;
	top			: 50%;
	left			: 50%;
	transform		: translateY(-50%) translateX(-50%);
}


/*---------------------------------------------------
grid
---------------------------------------------------*/

.row {
	display			: -ms-flexbox;
	display			: flex;
	-ms-flex-wrap		: wrap;
	flex-wrap		: wrap;
	margin-right		: -5px;
	margin-left		: -5px;
}

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


.col-full,
.col-12_7,
.col-12_6,
.col-12_5,
.col-12_3,
.col-md-full,
.col-md-12_9,
.col-md-12_8,
.col-md-12_7,
.col-md-12_6,
.col-md-12_5,
.col-md-12_4,
.col-md-12_3,
.col-md-12_2,
.col-sm-12_9,
.col-sm-12_8,
.col-sm-12_7,
.col-sm-12_6,
.col-md-12_5,
.col-sm-12_4,
.col-sm-12_3,
.col-sm-12_2{
    position			: relative;
    width			: 100%;
    padding-right		: 5px;
    padding-left		: 5px;
}


.col-full {
    -ms-flex			: 0 0 100%;
    flex			: 0 0 100%;
    max-width			: 100%;
}

.col-12_7 {
	-ms-flex	: 0 0 58.333333%;
	flex		: 0 0 58.333333%;
	max-width	: 58.333333%;
}
.col-12_6 {
	-ms-flex	: 0 0 50%;
	flex		: 0 0 50%;
	max-width	: 50%;
}

.col-12_5 {
	-ms-flex	: 0 0 41.666666%;
	flex		: 0 0 41.666666%;
	max-width	: 41.666666%;
}

.col-12_3 {
	-ms-flex	: 0 0 24.999999%;
	flex		: 0 0 24.999999%;
	max-width	: 24.999999%;
}

@media (min-width:768px) {
	.col-sm-12_9 {
		-ms-flex	: 0 0 74.999999%;
		flex		: 0 0 74.999999%;
		max-width	: 74.999999%;
	}
	
	.col-sm-12_8 {
		-ms-flex	: 0 0 66.666666%;
		flex		: 0 0 66.666666%;
		max-width	: 66.666666%;
	}

	.col-sm-12_7 {
		-ms-flex	: 0 0 58.333333%;
		flex		: 0 0 58.333333%;
		max-width	: 58.333333%;
	}
	
	.col-sm-12_6 {
		-ms-flex	: 0 0 50%;
		flex		: 0 0 50%;
		max-width	: 50%;
	}
	.col-sm-12_5 {
		-ms-flex	: 0 0 41.666666%;
		flex		: 0 0 41.666666%;
		max-width	: 41.666666%;
	}
	.col-sm-12_4 {
		-ms-flex	: 0 0 33.333333%;
		flex		: 0 0 33.333333%;
		max-width	: 33.333333%;
	}
	.col-sm-12_3 {
		-ms-flex	: 0 0 24.999999%;
		flex		: 0 0 24.999999%;
		max-width	: 24.999999%;
	}

	.col-sm-12_2 {
		-ms-flex	: 0 0 16.666666%;
		flex		: 0 0 16.666666%;
		max-width	: 16.666666%;
	}
}


@media (min-width: 992px) {
	.col-md-full {
		-ms-flex	: 0 0 100%;
		flex		: 0 0 100%;
		max-width	: 100%;
	} 
	
	.col-md-12_9 {
		-ms-flex	: 0 0 74.999999%;
		flex		: 0 0 74.999999%;
		max-width	: 74.999999%;
	} 
	
	.col-md-12_8 {
		-ms-flex	: 0 0 66.666666%;
		flex		: 0 0 66.666666%;
		max-width	: 66.666666%;
	}
	
	.col-md-12_7 {
		-ms-flex	: 0 0 58.333333%;
		flex		: 0 0 58.333333%;
		max-width	: 58.333333%;
	}
	
	.col-md-12_6 {
		-ms-flex	: 0 0 50%;
		flex		: 0 0 50%;
		max-width	: 50%;
	}

	.col-md-12_5 {
		-ms-flex	: 0 0 41.666666%;
		flex		: 0 0 41.666666%;
		max-width	: 41.666666%;
	}
	
	.col-md-12_4 {
		-ms-flex	: 0 0 33.333333%;
		flex		: 0 0 33.333333%;
		max-width	: 33.333333%;
	}
	
	.col-md-12_3 {
		-ms-flex	: 0 0 24.999999%;
		flex		: 0 0 24.999999%;
		max-width	: 24.999999%;
	}

	.col-md-12_2 {
		-ms-flex	: 0 0 16.666666%;
		flex		: 0 0 16.666666%;
		max-width	: 16.666666%;
	}
}


.justify-center{
	-ms-flex-pack		: center !important;
	justify-content		: center !important;
}

/*---------------------------------------------------
.container
---------------------------------------------------*/

.container-full,
.container {
    width		: 100%;
    padding-right	: 5px;
    padding-left	: 5px;
    margin-right	: auto;
    margin-left		: auto;
}

.container-full{
    padding-right	: 0px;
    padding-left	: 0px;
}

@media (min-width:576px) {
	.container {
	max-width	: 540px;
	}
	
	.container-full {
	max-width	: 540px;
	}
}


@media (min-width:768px) {
	.container {
	max-width	: 720px;
	}
	
	.container-full {
	max-width	: 720px;
	}
}

@media (min-width: 992px) { 
	.container {
	max-width	: 960px;
	}
	
	.container-full {
	max-width	: 960px;
	}
}

@media (min-width: 1200px) { 
	.container {
	max-width	: 1000px;
	}
	.container-full {
	max-width	: 1000px;
	}
}



/*---------------------------------------------------
.contents-block
---------------------------------------------------*/
.contents-block{
	padding-top	: 1rem;
	padding-bottom	: 1rem;
}

.contents-block .contents-inner{
	padding			: 2rem 1rem;
}

/*---------------------------------------------------
#nav
---------------------------------------------------*/
#nav .container{
	background		: #5fbf5b;
	position		: relative;
}

#logo{
	padding			: 1.5rem 15px;
	text-align		: left;
	ms-flex-positive	: 1 !important;
	flex-grow		: 1 !important;
	color			: #fff;
}

#nav-btn{
	background		: #fbdb31;
	padding-right		: 5px;
	padding-left		: 5px;
	display			: block;
	cursor			: pointer;
	
}

#nav-list{
	height			: 0;
	overflow		: hidden;
	opacity			: 0;
	transition		: 0.8s;
}

#nav-list.active{
	height			: auto;
	opacity			: 1;
	padding-top		: 1rem;
	padding-bottom		: 1rem;
}

.menu-trigger,
.menu-trigger span {
	display			: inline-block;
	transition		: all .4s;
}
.menu-trigger {
	position		: relative;
	width			: 50px;
	height			: 100%;
}

.menu-trigger span {
	position		: absolute;
	left			: 50%;
	width			: 70%;
	height			: 4px;
	background-color	: #fff;
	border-radius		: 2px;	
	
}
.menu-trigger span:nth-of-type(1) {
	top			: 25%;
	-webkit-transform	: translateY(-50%) translateX(-50%);
	transform		: translateY(-50%) translateX(-50%);	
}
.menu-trigger span:nth-of-type(2) {
	top			: 50%;
	-webkit-transform	: translateY(-50%) translateX(-50%);
	transform		: translateY(-50%) translateX(-50%);	
}
.menu-trigger span:nth-of-type(3) {
	top			: 75%;
	-webkit-transform	: translateY(-50%) translateX(-50%);
	transform		: translateY(-50%) translateX(-50%);	
}

.menu-trigger.active {
	-webkit-transform	: rotate(360deg);
	transform		: rotate(360deg);
}
.menu-trigger.active span:nth-of-type(1) {
	top			: 50%;
	-webkit-transform	: translateY(-50%) translateX(-50%) rotate(-45deg);
	transform		: translateY(-50%) translateX(-50%) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	top			: 49%;
	-webkit-transform	: translateY(0) translateX(-50%) rotate(45deg);
	transform		: translateY(0) translateX(-50%) rotate(45deg);
	
}
.menu-trigger.active span:nth-of-type(3) {
	opacity			: 0;
}


.nav-items{
	position		: relative;
	width			: 100%;
	padding-right		: 5px;
	padding-left		: 5px;
	-ms-flex		: 0 0 33.333333%;
	flex			: 0 0 33.333333%;
	max-width		: 33.333333%;
}

.nav-icon{
	position		: relative;
	display			: block;
	width			: 90%;
	height			: 50px;
	margin-bottom		: 5px;
	margin-right		: auto;
	margin-left		: auto;	
	background		: #90d698;
}


.nav-items a{
	position		: relative;
	display			: block;
	text-align		: center;
	font-size		: 1.075rem;
	height			: 100%;
	min-height		: 60px;
	color			: #fff;
	padding			: 0.5rem 0;
}

@media (min-width: 992px) { 
	#nav-sm{
		display			: none;
	}
	
	#nav-list{
		height			: auto;
		opacity			: 1;
		transition		: 0;
		padding-top		: 1rem;
		padding-bottom		: 1rem;	
	}

	.nav-items{
		-ms-flex		: 0 0 13.5%;
		flex			: 0 0 13.5%;
		max-width		: 13.5%;
	}
	
	.nav-items a:after{
		content			: "";
		position		: absolute;
		height			: 100%;
		width			: 3px;
		left			: -5px;
		top			: 0;
		border-radius		: 2px;
		background		: #fff;
	}
	
	.nav-items:last-child a:before{
		content			: "";
		position		: absolute;
		height			: 100%;
		width			: 3px;
		right			: -5px;
		top			: 0;
		border-radius		: 2px;
		background		: #fff;
	}
}



/*----------------------------------------------------------
.top-to
----------------------------------------------------------*/
.top-to{
	width				: 60px;
	height				: 60px;
	position			: fixed;
	bottom				: 4rem;
	right				: 2%;
	display				: none;
	background-color		: #fbdb31;
	border-radius			: 30px;
	color				: #fff;
	text-align			: center;
}

.top-to a i{
	color				: #fff;
	font-size			: 30px;
	line-height			: 58px;
}

/*----------------------------------------------------------
#sns_btn
----------------------------------------------------------*/

#sns_btn{
	padding-top				: 0.5rem;
	padding-right				: 0.5rem;
	text-align				: right;
}

#sns_btn i{
	font-size				: 20px;
	line-height				: 30px;
}

.sns-btn{
	width					: 30px;
	height					: 30px;
	display					: inline-block;
	text-align				: center;
	color					: #fff;
}

.sns_twitter{
	background				: #1DA1F2;
}

.sns_facebook{
	background				: #3C5A99;
}


/*----------------------------------------------------------
.card
----------------------------------------------------------*/
.card{
	background		: #fff;
	border-radius		: 4px;
	color			: #3b4041;
	position		: relative;
}

.grid-item .card .card-body{
	padding			: 1rem;
}

/*----------------------------------------------------------
#footer
----------------------------------------------------------*/
#footer{
	background		: #ed1c24;
	color			: #fff;
	text-align		: center;
}