@charset "utf-8";

@media screen and (max-width: 953px) {
}
@media (min-width : 953px) {
}
/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design. */
@media (min-width : 953px) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 17.1%; }
	.gutters h1 { width: 23.5% !important; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }
}
/**/
/*firefoxスクロールバー対策*/
html {
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;
}
/*base*/
html {
	font-size: 62.5%;
}
body {
	font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	font-size: 1.6em;
}

/*universal*/
.red {
	color: #F00;
}
.orange {
	color: #F29600;
}
.lightgreen {
	color: #8dc21f;
}
.yellow_bg {
	background-color: #FFFCEB;
	padding: 10px 25px 1px;
	margin: 15px 0px;
	border-radius: 15px;
}
.yellow_bg h3 {
	color: #006934;
}
.tx_center {
	text-align: center !important;
}
.tx_left {
	text-align: left !important;
}
.bold {
	font-weight: bold;
}
.s_txt {
	font-size: 1.2rem;
}
.l_txt {
	font-size: 1.7rem;
	font-weight: bolder;
}
.dashed {
	text-align: center;
    position: relative;
    margin: 10px auto 20px;
}
.dashed span {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding: 0 3rem;
    background: #fff;
}
.dashed::before {
	position: absolute;
    top: calc(60% - 1px);
    left: 0;	
    width: 100%;
    height: 0;
    content: '';
    border: 1px dashed #5b5b5b;
}
.btn_box {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}
.btn_box .btn_box_in p {
	text-align: center;
    margin: 15px 0;
}

.img_box {
	display: flex;
	justify-content: center;
	padding: 1rem;
}
.btn01 {
	width: 100%;
	background-color: #F28600;
	color: #FFF;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2rem;
	border-radius: 8px;
	display: inline-block;
    margin: 0 auto;
	padding: 15px 55px;
	text-align: center;
	box-shadow:4px 4px 0px 0px #5b5b5b5a;
}
.btn01 span {
	color: #ffff00;
}
.btn01 small,.btn02 small {
	font-size: 1.6rem;
}
.btn01:hover {
	opacity: .6;
	transition: 0.6s;
}
.btn01_1 {
	width: 100%;
	background-color: #F28600;
	color: #FFF;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 2rem;
	border-radius: 8px;
	display: inline-block;
	margin: 0 1rem;
	padding: 15px 5px;
	text-align: center;
	box-shadow: 4px 4px 0px 0px #5b5b5b5a;
}
.btn01_1 span {
	color: #ffff00;
}
.btn01_1:hover {
	opacity: .6;
	transition: 0.6s;
}
.btn02 {
	width: 100%;
    background-color: #61AA31;
	color: #FFF;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 5rem;
	border-radius: 8px;
	display: inline-block;
    margin: 0 auto;
	padding: 15px 65px;
	text-align: center;
	box-shadow:4px 4px 0px 0px #5b5b5b5a;
}
.btn02 span {
	color: #ffff00;
}
.btn02:hover {
	opacity: .6;
	transition: 0.6s;
}
.btn03 {
	background-color: #FFF;
	color: #6A3056;
	font-weight: bold;
	border-radius: 3px;
	padding: 15px 30px;
	text-align: center;
}
.btn03:hover {
	opacity: .8;
}
.btn04 {
	width: 100%;
	border: 1.5px solid #00a199;
	color: #000;
	background-color: #fff;
	font-size: 1.5rem;
	line-height: 2rem;
	border-radius: 8px;
	display: inline-block;
	margin: 0 1rem;
	padding: 10px 5px;
	text-align: center;
}
.btn04:hover {
	opacity: .6;
	transition: 0.6s;
}
.btn05 {
	width: 200px;
	border: 1.5px solid #00a199;
	color: #00a199;
	background-color: #fff;
	font-size: 1.5rem;
	line-height: 2rem;
	border-radius: 8px;
	display: inline-block;
	padding: 7px 0;
	text-align: center;
	margin-bottom: 2%;
}
.btn05:hover {
	opacity: .6;
	transition: 0.6s;
}
.btn06 {
	width: 100%;
	font-size: 1.5rem;
	line-height: 2rem;
	display: inline-block;
	padding: 7px 0;
}
.green {color: #00a199;}
.green:hover {
	opacity: .6;
	transition: 0.6s;
}
.copy02 {
}

#pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width:100px;
	height: 35px;
}
#pagetop a {
	display: block;
	height:35px;
	line-height: 35px;
	background: #009DE1;
	color: #fff;
	border:1px solid #fff;
	border-radius: 5px;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
}
.flex {
	display: flex;
	margin: 20px 0;
}
.backtopbt{
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 1;
}
/*onlypc*/
@media(min-width: 799px) {
}
/*tablet*/
@media(max-width: 639px) {
	#main .content {
		padding: 10px !important;
	}
}
@media(max-width: 950px) {
}
@media(max-width: 800px) {
	.flex {display: block;}
	.backtopbt{
		position: fixed;
		bottom: 17px;
		right: 17px;
	}
}
/*mobile_phone*/
@media(max-width: 500px) {
	.yellow_bg {padding: 10px 20px 1px;}
}
@media(max-width: 419px) {
	#main #blue_area .img_box img {
		width: 100%;
	}
	.btn01 small {
		font-size: 1.4rem;
	}
	.btn02{
		padding: 15px 45px;
	}
	.btn_box .btn_box_in p {
		text-align: left;
		line-height: 2.5rem;
		margin: 0 0 15px;
	}
}
@media(max-width: 410px) {
	#main .yellow_area .copy02 span {
		font-size: 1.2rem;
	}
}
@media(max-width: 400px) {
	#main .content .img_box img {
		width: 100%;
	}
}