@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/






/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
	
	
	/*--------------------------------------
	 
	 indexページ
	 
	----------------------------------------*/
	main{
		overflow: hidden;
	}

	.bg{
		position: absolute;
		background: url("../../common/img/bg_lineg.png") no-repeat top center / cover;
		height: 100%;
		width: 100vw;
		z-index: 2;
		top: 0;
		left: 0;
	}
	body:before{
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		background: url("../../common/img/bg_b.jpg") no-repeat center / cover;
		z-index: -100;
		top: 0;
		left: 0;
	}
	
	
	.talk .wrap{	
		position: relative;
		z-index: 3;
	}
	
	.sec{
		position: relative;
		padding: 80px 0 120px;
	}
	
	.linkArea {
		position: relative;
		padding: 110px 0 120px;
	}
		.linkArea .wrap > ul > li {
			position: relative;
			height: 460px;
		}
	.linkArea .wrap > ul > li + li{
		margin-top: 160px;
	}
				.linkArea .wrap > ul > li a{
					position: relative;
					height: 100%;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
				}
					.linkArea .wrap > ul > li:nth-of-type(2n) a{
						-webkit-box-pack: end;
						-ms-flex-pack: end;
						justify-content: flex-end;
					}	
					.linkArea .wrap > ul > li a .tit{
						background: url("../../common/img/theme_bg.jpg") no-repeat top center / cover;
						background: -moz-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
						background: -webkit-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
						background: linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff);
						color: #fff;
						font-weight: bold;
						font-feature-settings: "palt";
						font-size: 18px;
						height: 300px;
						width: 300px;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						padding: 40px;
						box-sizing: border-box;
						position: relative;
						z-index: 2;
					}
						
						.linkArea .wrap > ul > li a .tit:after{
							content: "";
							width: 20px;
							height: 5px;
							display: block;
							-webkit-transform: skew(45deg);
							transform: skew(45deg);
							position: absolute;
							left: 0;
							right: 0;
							margin: auto;
							bottom: 40px;
							transition: .4s;
							border-left: none;
							border-bottom: 1px solid #fff;
							border-right:  1px solid #fff;
						}
							.linkArea .wrap > ul > li a:hover .tit:after{
								right: -20px;
							}
								.linkArea .wrap > ul > li a .tit p + p{
									margin-top: 10px;
									line-height: 1.5;
								}
					.linkArea .wrap > ul > li a .img_box{
						position: absolute;
						bottom: 0;
						right: calc(520px - 50vw);
    					width: calc(50vw + 280px);
						height: 460px;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
					}
						.linkArea .wrap > ul > li:nth-of-type(2n) .img_box{
							left: calc( 520px - 50vw);
							right: inherit;
						}
							.linkArea .img_box .img{
								width: 100%;
								height: 100%;
							}
								.linkArea li:nth-of-type(1) .img_box .img{
									background: url("../img/01/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(2) .img_box .img{
									background: url("../img/02/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(3) .img_box .img{
									background: url("../img/03/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(4) .img_box .img{
									background: url("../img/04/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(5) .img_box .img{
									background: url("../img/05/mainimg.jpg") no-repeat center / cover;
								}
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {

	#tag{
		background-color: #67aaf0;
		font-weight: bold;
		font-size: 16px;
		color: #fff;
		position: absolute;
		left: 0;
		top: 40px;
		z-index: 5;
		padding-left: 5%;
		padding-right: 5px;
	}
	
	/*--------------------------------------
	 
	 indexページ
	 
	----------------------------------------*/
	main{
		overflow: hidden;
	}

	.bg{
		position: absolute;
		background: url("../../common/img/bg_lineg.png") no-repeat top center / cover;
		height: 100%;
		width: 100vw;
		z-index: 2;
		top: 0;
		left: 0;
	}
	body:before{
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		background: url("../../common/img/bg_b.jpg") no-repeat center / cover;
		z-index: -100;
		top: 0;
		left: 0;
	}
	
	
	.talk .wrap{	
		position: relative;
		z-index: 3;
	}
	
	.sec{
		position: relative;
		padding: 40px 0 80px;
	}
	
	.linkArea {
		position: relative;
		padding: 0 0 60px;
    	margin-top: 60px;
	}
		.linkArea .wrap > ul > li {
			position: relative;
			
		}
			.linkArea .wrap > ul > li + li{
				margin-top: 60px;
			}
				.linkArea .wrap > ul > li a{
					position: relative;
					padding-top: calc( 44vw - 20px);
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
				}
					.linkArea .wrap > ul > li:nth-of-type(2n) a{
						-webkit-box-pack: end;
						-ms-flex-pack: end;
						justify-content: flex-end;
					}	
					.linkArea .wrap > ul > li a .tit{
						background: url("../../common/img/theme_bg.jpg") no-repeat top center / cover;
						background: -moz-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
						background: -webkit-linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff); 
						background: linear-gradient(top right, #83eb93, #52d0ff 64%, #1baeff);
						color: #fff;
						width: 100%;
						font-weight: bold;
						font-feature-settings: "palt";
						font-size: 16px;
						text-align: center;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						padding: 20px 20px 50px 20px;
						box-sizing: border-box;
						position: relative;
						z-index: 2;
					}
						.linkArea .wrap > ul > li a .tit div{
							width: 100%;
						}
						.linkArea .wrap > ul > li a .tit:after{
							content: "";
							width: 20px;
							height: 5px;
							display: block;
							-webkit-transform: skew(45deg);
							transform: skew(45deg);
							position: absolute;
							left: 0;
							right: 0;
							margin: auto;
							bottom: 25px;
							transition: .4s;
							border-left: none;
							border-bottom: 1px solid #fff;
							border-right:  1px solid #fff;
						}
							.linkArea .wrap > ul > li a:hover .tit:after{
								right: -20px;
							}
								.linkArea .wrap > ul > li a .tit p + p{
									margin-top: 10px;
									line-height: 1.5;
								}
					.linkArea .wrap > ul > li a .img_box{
						position: absolute;
						top: 0;
						width: 100vw;
						height: 44vw;
						left: -5%;
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
					}
							.linkArea .img_box .img{
								width: 100%;
								height: 100%;
							}
								.linkArea li:nth-of-type(1) .img_box .img{
									background: url("../img/01/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(2) .img_box .img{
									background: url("../img/02/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(3) .img_box .img{
									background: url("../img/03/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(4) .img_box .img{
									background: url("../img/04/mainimg.jpg") no-repeat center  / cover;
								}
								.linkArea li:nth-of-type(5) .img_box .img{
									background: url("../img/05/mainimg.jpg") no-repeat center / cover;
								}
	
	
}