@charset "UTF-8";
/*
	BASE
*******************************/

/*
font-family: 'Noto Sans JP', sans-serif;

*/
* {
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-feature-settings: "palt";
	line-height:1;
}

html {
	font-size:62.5%;
	line-height:1;
	body {
		font-size:1.6rem;
		img {
			-webkit-backface-visibility: hidden;
			vertical-align:bottom;
			line-height:0;
			max-width: 100%;
			height: auto;
		}
		p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6,label {
			color:#333333;
		}
		a {
			color:#333333;
			text-decoration:none;
			outline:none;
			border:none;
			img {
				outline:none;
				border:none;
				-webkit-backface-visibility: hidden;
			}
		}
		area {
			border:none;
			outline:none;
		}
		.clear { clear:both;}
	}
}

:root {
	/* --color_main: #08AF99; */
	--color_main: #005680;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	BASE LAYOUT
******************/

.wrap {
	.contents {
		max-width:1300px;
		width: calc(100% - 60px);
		margin:0 auto;
		p {
			font-size: 1.8rem;
			line-height: 1.75;
		}
	}
}

.btn {
	font-size:1.8rem;
	color:var(--color_main);
	background-color:#FFFFFF;
	font-weight:500;
	width:300px;
	height:70px;
	border:1px solid var(--color_main);
	display:grid;
	margin:0 auto;
	align-items:center;
	justify-content:center;
	position:relative;
	&::after {
		content:'';
		display:block;
		width:3em;
		height:1px;
		background-color:var(--color_main);
		position:absolute;
		right:-1.5em;
		top:50%;
	}
}

@media ( hover:hover) {

	a {
		transition: .3s;
		&:hover {
			text-decoration: none;
			opacity: .75;
		}
	}


	.btn {
		transition: .3s;
		&:hover {
			background-color: var(--color_main);
			color:#FFFFFF;
			opacity: 1;
			&::after {
				transform: translateX(.5em);
			}
		}
		&::after {
			transition: .3s;
		}
	}
	
}


@media screen and (max-width:1024px){

}

@media screen and (max-width:768px){
	
	/*
		BASE LAYOUT
	******************/
	
	.wrap {
		.contents {
			width: calc(100% - 40px);
			p {
				font-size: 1.4rem;
			}
		}
	}

	.btn {
		font-size:1.5rem;
		width:90%;
		max-width:280px;
		height:60px;
	}
	
}


@media screen and (max-width:768px) {
    .pcOnly,.tbOnly {
    	display:none !important;
    }
}
@media screen and (max-width:1024px) {
    .pcOnly2 {
    	display:none !important;
    }
}
@media screen and (min-width:1025px) {
    .sptbOnly,.tbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:769px) {
    .spOnly {
    	display:none !important;
    }
}