@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;
}
.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;
}
.floatleft{
	float: left;
}
@media screen and (min-width:961px) {
body{
    width: 1200px;
    margin: 0 auto;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
	background: #FBF8EA
}
}
@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";
	background: #FBF8EA
}
}
@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";
	background: #FBF8EA
}
}
@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: 163px;
    height: 30px;
    margin: 15px 0px 0px 15px;
}
}
@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: 5px 10px 0px 0px;
	padding-top: 20px;
    font-size: 18px;
    text-align: right;
}
}
@media screen and (max-width:960px) {
#header .headtext{
    margin: 1px 0px 0px 0px;
    font-size: 16px;
    text-align: center;
}
}
@media screen and (max-width:520px) {
#header .headtext{
    margin: 1px 0px 0px 0px;
    font-size: 14px;
    text-align: center;
}
}
@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: 1200px;
    margin: 50px 0px 10px 0px;
    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: 1200px;
    margin-top: 15px;
	margin-bottom: 15px;
    text-align: center;
}
}
@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 .titleimage{
    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: 0px 0px 10px 0px;
	text-align: center;
}
}
@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 .img_price{
    margin: 5px 0px 10px 0px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence01 .img_price{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence01 .img_price{
    margin: 5px 0px 5px 0px;
    width: auto;
    height: auto;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02{
    width: 1000px;
    height: auto;
    margin: 30px 0px 10px 0px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02{
    width: auto;
    height: auto;
    margin: 20px 0px 20px 0px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02{
    width: auto;
    height: auto;
    margin: 20px 0px 20px 0px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02 .yellowbox{
    margin: 20px 0px 20px 200px;
	padding: 10px 0px 20px 0px;
    width: 800px;
    height: auto;
	text-align: center;
	background: #fef9e0;
	-webkit-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	border-radius: 10px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02 .yellowbox{
    margin: 20px 0px 20px 0px;
	padding: 10px 0px 10px 0px;
    width: auto;
    height: auto;
    text-align: center;
	background: #fef9e0;
	-webkit-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	border-radius: 10px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02 .yellowbox{
    margin: 20px 0px 20px 0px;
	padding: 10px 0px 10px 0px;
    width: auto;
    height: auto;
    text-align: center;
	background: #fef9e0;
	-webkit-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 200px #fdd000 inset, 5px 5px 0 #dedede;
	border-radius: 10px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02 .titletext{
    margin: 10px 0px 0px 0px;
	padding: 20px 0px 10px 0px;
    width: auto;
    height: auto;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02 .titletext{
    margin: 0px;
    width: auto;
    height: auto;
    text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02 .titletext{
    margin: 0px;
    width: auto;
    height: auto;
    text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02 .whitebox{
    margin: 20px 20px 15px 50px;
	padding: 0px 0px 15px 0px;
    width: 700px;
    height: auto;
	text-align: center;
	background: #FFFFFF;
	border-radius: 10px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02 .whitebox{
    margin: 10px 20px 10px 20px;;
    width: auto;
    height: auto;
    text-align: center;
	background: #FFFFFF;
	border-radius: 10px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02 .whitebox{
    margin: 10px 20px 10px 20px;;
    width: auto;
    height: auto;
    text-align: center;
	background: #FFFFFF;
	border-radius: 10px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02 .detailtitle{
    margin: 10px 0px 10px 15px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 14px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02 .detailtitle{
    margin: 10px 0px 10px 15px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02 .detailtitle{
    margin: 10px 0px 10px 15px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: left;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence02 .detailtext{
    margin: 10px 10px 10px 15px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence02 .detailtext{
    margin: 10px 10px 20px 15px;
	padding: 0px 0px 10px 0px;
    width: auto;
    height: auto;
    font-size: 10px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence02 .detailtext{
    margin: 10px 10px 20px 15px;
	padding: 0px 0px 10px 0px;
    width: auto;
    height: auto;
    font-size: 10px;
	text-align: left;
    display: block;
}
}

@media screen and (min-width:961px) {
#sentence03{
    width: 1000px;
    height: auto;
    margin: 30px 0px 10px 0px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03{
    width: auto;
    height: auto;
    margin: 20px 0px 20px 0px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03{
    width: auto;
    height: auto;
    margin: 20px 0px 20px 0px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .bluebox{
    margin: 10px 0px 10px 200px;
	padding: 0px 0px 10px 0px;
    width: 800px;
    height: auto;
	text-align: center;
	background: #F0F3FF;
	-webkit-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .bluebox{
    margin: 20px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
    width: auto;
    height: auto;
    text-align: center;
	background: #F0F3FF;
	-webkit-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .bluebox{
    margin: 20px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
    width: auto;
    height: auto;
    text-align: center;
	background: #F0F3FF;
	-webkit-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	-moz-box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
	box-shadow: 0 0 100px #738EFB inset, 5px 5px 0 #dedede;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .detailtitle{
    margin: 10px 0px 10px 10px;
	padding: 20px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 30px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .detailtitle{
    margin: 10px 0px 10px 10px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 18px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .detailtitle{
    margin: 10px 0px 10px 10px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 18px;
	text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .detailtext{
    margin: 10px 0px 15px 10px;
    width: auto;
    height: auto;
    font-size: 18px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .detailtext{
    margin: 0px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .detailtext{
    margin: 0px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .detailcaption{
    margin: 5px 10px 10px 10px;
    width: auto;
    height: auto;
    font-size: 12px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .detailcaption{
    margin: 10px 10px 10px 10px;
	padding: 0px 0px 5px 0px;
    width: auto;
    height: auto;
    font-size: 11px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .detailcaption{
    margin: 10px 10px 10px 10px;
	padding: 0px 0px 5px 0px;
    width: auto;
    height: auto;
    font-size: 11px;
	text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .formbox{
    margin: 10px 20px 10px 50px;
    width: auto;
    height: auto;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .formbox{
    margin: 10px 20px 10px 20px;;
    width: auto;
    height: auto;
    text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .formbox{
    margin: 10px 20px 10px 20px;;
    width: auto;
    height: auto;
    text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence03 .formbox_img{
    margin: 10px 0px 10px 15px;
	padding: 10px 0px 0px 0px;
    width: auto;
    height: auto;
    font-size: 24px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence03 .formbox_img{
    margin: 10px 0px 10px 15px;
    width: auto;
    height: auto;
    font-size: 18px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence03 .formbox_img{
    margin: 10px 0px 10px 15px;
    width: auto;
    height: auto;
    font-size: 18px;
	text-align: center;
    display: block;
}
}

@media screen and (min-width:961px) {
#sentence04{
    width: 1000px;
    height: auto;
    margin: 20px 0px 10px 0px;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence04{
    width: auto;
    height: auto;
    margin: 15px 0px 10px 0px;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence04{
    width: auto;
    height: auto;
    margin: 15px 0px 10px 0px;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence04 .title04{
    margin: 10px 0px 10px 0px;
    padding: 20px 0px 0px 200px;
    font-size: 18px;
	text-align: center;
	display: block;
}
}
@media screen and (max-width:960px) {
#sentence04 .title04{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
	text-align: center;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence04 .title04{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
	text-align: center;
    display: block;
}
}
@media screen and (min-width:961px) {
#sentence04 .text04{
    margin: 10px 0px 10px 200px;
	width: 800px;
    font-size: 12px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:960px) {
#sentence04 .text04{
    margin: 0px;
    font-size: 10px;
	text-align: left;
    display: block;
}
}
@media screen and (max-width:520px) {
#sentence04 .text04{
    margin: 0px;
    font-size: 10px;
	text-align: left;
    display: block;
}
}
@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;
}
}