@charset "utf-8";
/* CSS Document */
@use "./variables";
html {
	@include variables.responsive-font-size(13px, 16px, 480px, 1024px);
}

img{ backface-visibility: hidden;
    max-width: 100%;
}

.image{
	text-align: center;
}
.svg{
	vertical-align: middle;

	.svgWrap{
		position: relative;
		width: 100%;
		height: 0;

		.svgWrapInner{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			svg{
				vertical-align: baseline;
			}
		}
	}
}


.orange{
    color: #E46401;
}
.kvision_yellow{
    color: #F3C91E;
}
.blue{
    color: #0A02C8;
}
.navyblue{
	color: #202f55;
}
.red{
	color: #DB0003;
}
.green{
	color: #abcd03;
}
.font10{
    font-size:.625rem;
}
.font12{
    font-size:.75rem;
}
.font13{
    font-size:.812rem;
}
.font16{
    font-size:1rem;
}
.font18{
    font-size:1.125rem;
}
.font20{
    font-size:1.25rem;
}
.font22{
    font-size:1.375rem;
}
.font24{
    font-size:1.5rem;
}
.font26{
    font-size:1.625rem;
}
.font28{
    font-size:1.75rem;
}
.font30{
    font-size:1.875rem;
}
.font32{
    font-size:2rem;
}
.font48{
    font-size:3rem;
}
.bold{
    font-weight:bold;
}
.center{
	text-align: center;
}
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
.floatleft{
	float: left;
}
.floatright{
	float: right;
}
@media screen and (min-width:961px) {
body{
    width: 1200px;
    margin: 0 auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";

}
}
@media screen and (max-width:960px) {
body{
    width: auto;
    margin: 5px 10px 15px 10px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";

}
}
@media screen and (max-width:520px) {
    body{
    width: auto;
    margin: 5px 10px 15px 10px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
}
}
@media screen and (min-width:961px) {
    #header{
    width: 1200px;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}
}
@media screen and (max-width:960px) {
    #header{
    width: auto;
    height: auto;
    text-align: center;
    vertical-align: middle;
    margin: 5px 0px 2px 0px;
}
}
@media screen and (max-width:520px) {
    #header{
    width: auto;
    height: auto;
    text-align: center;
    vertical-align: middle;
    margin: 5px 0px 2px 0px;
}
}
@media screen and (min-width:961px) {
#header .logo{
    width: 143px;
    height: auto;
    margin: 15px 0px 10px 15px;
}
}
@media screen and (max-width:960px) {
#header .logo{
	margin: 10px 15px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (max-width:520px) {
#header .logo{
	margin: 10px 15px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (min-width:961px) {
#header .headtext{
    margin: 25px 0px 5px 10px;
	padding: 20px 0px 0px 0px;
    font-size: 16px;
    text-align: left;
}
}
@media screen and (max-width:960px) {
#header .headtext{
    margin: 10px 0px 0px 0px;
	padding: 10px 0px 0px 0px;
    font-size: 14px;
    text-align: left;
}
}
@media screen and (max-width:520px) {
#header .headtext{
    margin: 10px 0px 0px 2px;
	padding: 10px 0px 0px 0px;
    font-size: 14px;
    text-align: left;
}
}
@media screen and (min-width:961px) {
#header .headline{
    margin: 0 auto;
    width: auto;
    height: auto;
    text-align: center;
}
}
@media screen and (max-width:960px) {
    #header .headline{
    width: auto;
    max-width: 960px;
    height: auto;
    margin: 2px 0px 2px 0px;
    text-align: center;
}
}
@media screen and (max-width:520px) {
    #header .headline{
    width: auto;
    height: auto;
    margin: 2px 0px 2px 0px;
    text-align: center;
}
}
@media screen and (min-width:961px) {
#title_area{
    width: 800px;
    margin: 50px 0px 10px 200px;
    text-align: center;
}
}
@media screen and (max-width:960px) {
#title_area{
    width:auto;
    margin: 5px 0px 5px 0px;
}
}
@media screen and (max-width:520px) {
#title_area{
    width:auto;
    margin: 5px 0px 5px 0px;
}
}
@media screen and (min-width:961px) {
#title_area .title01{
    width: 800px;
    margin-top: 15px;
	margin-bottom: 15px;
    text-align: center;
	font-size: 20px;
}
}
@media screen and (max-width:960px) {
#title_area .title01{
    width: auto;
    margin: 10px 0px 4px 0px;
    text-align: center;
    font-size: 16px;
}
}
@media screen and (max-width:520px) {
#title_area .title01{
    width: auto;
    margin: 10px 0px 4px 0px;
    text-align: center;
    font-size: 16px;
}
}
@media screen and (min-width:961px) {
#sentence01{
    width: 800px;
    height: auto;
    margin: 15px 0px 10px 200px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence01{
    width: auto;
    height: auto;
    margin: 5px 0px 5px 0px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence01{
    width: auto;
    height: auto;
    margin: 5px 0px 5px 0px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence01 h2{
	overflow: hidden;
	text-align: center;
}
}
@media screen and (max-width:960px) {
#sentence01 h2{
	overflow: hidden;
	text-align: center;
}
}
@media screen and (max-width:520px) {
#sentence01 h2{
	overflow: hidden;
	text-align: center;
}
}
@media screen and (min-width:961px) {
#sentence01 .container{
	overflow: hidden;
	text-align: left;
}
}
@media screen and (max-width:960px) {
#sentence01 .container{
	overflow: hidden;
	text-align: left;
}
}
@media screen and (max-width:520px) {
#sentence01 .container{
	overflow: hidden;
	text-align: left;
}
}
@media screen and (min-width:961px) {
#sentence01 .container ul{
    margin: 10px 0px 10px 0px;
    width: 800px;
    height: auto;
}
}
@media screen and (max-width:960px) {
#sentence01 .container ul{
    margin: 10px 0px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (max-width:520px) {
#sentence01 .container ul{
    margin: 10px 0px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (min-width:961px) {
#sentence01 .container li{
	margin: 10px 0px 10px 100px;
    width: auto;
    height: auto;
	color: #265C00;
	text-align: left;
}
}
@media screen and (max-width:960px) {
#sentence01 .container li{
    width: auto;
    height: auto;
	color: #265C00;
	text-align: left;
}
}
@media screen and (max-width:520px) {
#sentence01 .container li{
    width: auto;
    height: auto;
	color: #265C00;
	text-align: left;
}
}
@media screen and (min-width:961px) {
#sentence01 .container dd{
	margin: 10px 0px 10px 180px;
    width: auto;
    height: auto;
	text-align: left;
}
}
@media screen and (max-width:960px) {
#sentence01 .container dd{
    width: auto;
    height: auto;
	text-align: left;
}
}
@media screen and (max-width:520px) {
#sentence01 .container dd{
    width: auto;
    height: auto;
	text-align: left;
}
}
@media screen and (min-width:961px) {
#footer{
    margin: 50px 0px 50px 0px;
    width: 1200px;
}
}
@media screen and (max-width:960px) {
#footer{
    margin: 50px 0px 50px 0px;
    width: auto;
}
}
@media screen and (max-width:520px) {
#footer{
    margin: 50px 0px 50px 0px;
    width: auto;
}
}
@media screen and (min-width:961px) {
#footer .footer_line{
    margin: 10px 0px 10px 0px;
    width: 1200px;
}
}
@media screen and (max-width:960px) {
#footer .footer_line{
    margin: 10px 0px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (max-width:520px) {
#footer .footer_line{
    margin: 10px 0px 10px 0px;
    width: auto;
    height: auto;
}
}
@media screen and (min-width:961px) {
#footer .footer_text{
    margin: 10px 0px 10px 0px;
    font-size: 12px;
    text-align: center;
}
}
@media screen and (max-width:960px) {
#footer .footer_text{
    margin: 10px 0px 10px 0px;
    font-size: 12px;
    text-align: center;
}
}
@media screen and (max-width:520px) {
#footer .footer_text{
    margin: 10px 0px 10px 0px;
    font-size: 12px;
    text-align: center;
}
}