@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;
			}
		}
	}
}


.red{
    color: #D00E32;
}
.orange{
    color: #E46401;
}
.kvision_yellow{
    color: #F3C91E;
}
.blue{
    color: #0A02C8;
}
.green{
	color:#107879;
}
.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;
}
.clearfix {
	display: block;
}
@media screen and (min-width:961px) {
body{
    width: 800px;
    max-width: 1200px;
    margin-left: 330px;
    margin-bottom: 20px;
    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: 40px;
    text-align: center;
    vertical-align: middle;
    margin: 10px 0px 10px 0px;
}
}
@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: 163px;
    height: 30px;
    margin: 10px 0px 0px 5px;
}
}
@media screen and (max-width:960px) {
#header .logo{
    width: auto;
    height: auto;
}
}
@media screen and (max-width:520px) {
#header .logo{
    width: auto;
    height: auto;
}
}
@media screen and (min-width:961px) {
#header .headtext{
    margin: 0px 2px 0px 0px;
    font-size: 18px;
    text-align: right;
}
}
@media screen and (max-width:960px) {
#header .headtext{
    margin: 3px 0px 0px 0px;
    font-size: 16px;
    text-align: center;
}
}
@media screen and (max-width:520px) {
#header .headtext{
    margin: 3px 0px 0px 0px;
    font-size: 14px;
    text-align: center;
}
}
@media screen and (min-width:961px) {
#header .headline{
    margin: 0px 0px 0px 0px;
    width: auto;
    height: auto;
    height: 4px;
    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 30px 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: 15px 0px 15px 0px;
    padding-left: 40px;
    text-align: center;
    font-size: 36px;
}
}
@media screen and (max-width:960px) {
#title_area .title01{
    width: auto;
    margin: 4px 0px 4px 0px;
    text-align: center;
    font-size: 16px;
}
}
@media screen and (max-width:520px) {
#title_area .title01{
    width: auto;
    margin: 4px 0px 4px 0px;
    text-align: center;
    font-size: 16px;
}
}
@media screen and (min-width:961px) {
#title_area .title02{
    width: 800px;
    margin: 20px 0px 10px 0px;
    padding: 0px;
    text-align: left;
    font-size: 20px;
}
}
@media screen and (max-width:960px) {
#title_area .title02{
    width: auto;
    margin: 10px 0px 5px 0px;
    text-align: left;
    font-size: 12px;
}
}
@media screen and (max-width:520px) {
#title_area .title02{
    width: auto;
    margin: 10px 0px 5px 0px;
    text-align: left;
    font-size: 12px;
}
}
@media screen and (min-width:961px) {
#title_area .title03{
    width: 800px;
    margin: 10px 0px 10px 0px;
    padding-left: 30px;
    text-align: center;
    font-size: 32px;
}
}
@media screen and (max-width:960px) {
#title_area .title03{
    width: auto;
    margin: 4px 0px 4px 0px;
    text-align: center;
    font-size: 20px;
}
}
@media screen and (max-width:520px) {
#title_area .title03{
    width: auto;
    margin: 4px 0px 4px 0px;
    text-align: center;
    font-size: 20px;
}
}
@media screen amd (min-width:961px){
#title_area .titleimage{
    max-width: 1200px;
    width: auto;
    height: auto;
    margin: 10px 0px 0px 0px;
    text-align: center;
}
}
@media screen and (max-width:960px) {
#title_area .titleimage{
    width: auto;
    height: auto;
    margin: 10px 0px 0px 0px;
    text-align: center;
}
}
@media screen and (max-width:520px) {
#title_area .titleimage{
    width: auto;
    height: auto;
    margin: 4px 0px 4px 0px;
    text-align: center;
}
}
@media screen and (min-width:961px) {
#sentence01{
    width: 1200px;
    height: auto;
    margin: 10px 0px 10px 0px;
    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 .titlearea{
    margin: 10px 0px 0px 400px;
    width: 1200px;
    height: auto;
}
}
@media screen and (max-width:960px) {
#sentence01 .titlearea{
    margin: 0px 0px 5px 0px;
    width: auto;
    height: auto;
    text-align: center;
}
}
@media screen and (max-width:520px) {
#sentence01 .titlearea{
    margin: 0px 0px 5px 0px;
    width: auto;
    height: auto;
    text-align: center;
}
}
@media screen and (min-width:961px) {
#sentence01 .textarea{
    margin: 5px 0px 30px 0px;
    width: 1010px;
    height: auto;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence01 .textarea{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence01 .textarea{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence01 .textarea_left{
    margin: 0px 0px 5px 255px;
    width: 245px;
    height: auto;
    float: left;
}
}
@media screen and (max-width:960px) {
#sentence01 .textarea_left{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence01 .textarea_left{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence01 .textarea_lefttext{
     margin: 0px;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
}
}
@media screen and (max-width:960px) {
#sentence01 .textarea_lefttext{
    margin: 2px 4px 2px 4px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    width: auto;
}
}
@media screen and (max-width:520px) {
#sentence01 .textarea_lefttext{
    margin: 2px 4px 2px 4px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    width: auto;
}
}
@media screen and (min-width:961px) {
#sentence01 .textarea_right{
    margin: 0px 0px 5px 520px;
    width: 485px;
    height: auto;
}
}
@media screen and (max-width:960px) {
#sentence01 .textarea_right{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence01 .textarea_right{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence01 .textarea_righttext{
    margin: 0px;
    padding: 5px 10px 5px 10px;
    font-size: 14px;
}
}
@media screen and (max-width:960px) {
#sentence01 .textarea_righttext{
    margin: 2px 4px 2px 4px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    width: auto;
}
}
@media screen and (max-width:520px) {
#sentence01 .textarea_righttext{
    margin: 2px 4px 2px 4px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    width: auto;
}
}
@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;
}
}