@charset "utf-8";

/* PC向けおよび大型タブレット向けのレイアウトの指定：～1120px */
@media only screen and (min-width:990px) and (max-width:1120px){
	#page-top {
		bottom: 62px;
	}
	#page-top img {
    	width: 50px;
	}
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：～990px */
@media only screen and (max-width:990px){
	.fot__fix {
		display: none;
	}
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width:1px) and (max-width:960px){
	/*==========================================
 	body
	===========================================*/
	body {
		min-width: 100%;
		text-align: center;
		width: 100%;
	}

	img {
		width: 100%;
		max-width: 100%;
		height: auto;
		width /***/: auto;
	/*IE8のみ適用*/
	; 	text-align: center;
	}

	/*==========================================
	Menu
	===========================================*/    
	nav.NavMenu {
		position: fixed;	/*表示位置を固定*/
		z-index: 100001;	/*重ね順を変更*/
		top: 0;		/*表示位置を指定*/
		left: 0;	/*表示位置を指定*/
		background-color: #FFFFFF;
		color: #000;	/*文字色を黒にする*/
		text-align: center;		/*テキストを中央揃え*/
		width: 100%;	/*全幅表示*/
		transform: translateX(100%);	/*ナビを上に隠す*/
		height: 100vh;
		display: inherit;
		background-image: url(../images/sp_bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: right bottom;
	}

	/*トグルボタンが押されたときに付与するクラス*/
	nav.NavMenu.active{
		transform: translateX(0%);
		transition: all 0.6s;	/*アニメーションの時間を指定*/
	}

	/*トグルを閉じる操作をしたら付与するクラス*/
	nav.NavMenu.off{
		transition: all 0.6s;	/*アニメーションの時間を指定*/
	}
 
	/* 最初のspanをマイナス45度に */
	.Toggle.active span:nth-child(1) {
    	top: 20px;
    	left: 10px;
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	transform: rotate(-45deg);
		border-bottom: solid 3px #FFF;
	}
 
	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
    	top: 20px;
    	-webkit-transform: rotate(45deg);
    	-moz-transform: rotate(45deg);
    	transform: rotate(45deg);
		border-bottom: solid 3px #FFF;
	}

	nav.NavMenu ul {
		margin-left: auto;
		margin-right: auto;
		display: inline-block;
		margin-top: 20%;
	}

	nav.NavMenu ul li a {
		color: #FFFFFF;
		padding-top: 12px;
		padding-right: 12px;
		padding-bottom: 12px;
		padding-left: 12px;
		display: inline-block;
	}

	nav.NavMenu ul li.link a {
		background-image: url(../images/link.png);
		background-position: right center;
		padding-right: 20px;
		background-repeat: no-repeat;
	}

	/*==========================================
	Other
	===========================================*/
	#mainImg {
		height: auto;	
    	background-position-y: 0;
	}

	.tbbr {
		display: inherit;
	}

	#main_p {
		right: 0px;
		width: 60%;
		height: auto;
		bottom: 0;
		top: auto;
	}

	#main_block {
		margin-top: 100px;
		margin-bottom: 125px;
	}

	.kotei_only .btnBlock li {
		font-size: 1.3em;
	}

	.kotei_only .btnBlock li a span {
		padding-left: 60px;
		background-size: 50px auto;
	}

	.kotei_only .btnBlock li a {
		height: 100%;
		border-radius: 10px;
	}

	.kotei_only #service {
		padding-top: 40px;
	}

	.kotei_only #service section .h3 {
		font-size: 2em;
	}

	.kotei_only #service section ul li {
		width: 31%;
		height: 160px;
		font-size: 1.3em;
	}

	.kotei_only .title .inner figure {
    	position: absolute;
    	top: -222px;
		bottom:auto;
    	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
		width: 117px;
	}

	.kotei_only .title .inner2 figure {
    	position: absolute;
    	top: -229px;
		bottom:auto;
    	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
		width: 117px;
	}

	.kotei_only .title .inner figure img,
	.kotei_only .title .inner2 figure img {
		width: 100%;
		max-width: 100%;
		height: auto;
		width /***/: auto;
 		text-align: center;
	}

	#features section h3 {
		font-size: 1.3em;
		height: 150px;
	}

	.kotei_only #serviceInfo {
		margin-top: 45px;
		margin-bottom: 80px;
	}

	.kotei_only #serviceInfo li {
		margin-bottom: 60px;
	}

	.kotei_only .voice {
		width: 48%;
	}

	.kotei_only #voiceArea .slick-list {
		padding-top: 1em !important;	
	}

	#block_container ul li {
		font-size: 1.125em;
		font-weight: bold;
		background-image: url(../images/check.png);
		background-repeat: no-repeat;
		background-position: left 3px;
		padding-left: 33px;
		margin-bottom: 20px;
		background-size: 23px auto;
	}

	.Label figure img,
	.content figure img {
		min-width: 32px!important;
		max-width: 32px!important;
		height: auto;
	}

	#contactForm {
		padding-bottom: 50px;
	}

	.mailForm header h1 img {
		max-width: 108px;
		width: 20%;
	}

	.mailForm #main_p {
		top: auto;
		bottom: 0;
	}

	.mailForm #main_p img.pcImg {
		width: 29%;
		min-width: 130px;
		float: right;
		margin: 0 10px 0;
	}
}


@media only screen and (max-width:768px){
	/*==========================================
	 Other
	===========================================*/
	.spbr2 {
		display: inherit;
	}

	.Label figure img,
	.content figure img {
		min-width: 25px!important;
		max-width: 25px!important;
		height: auto;
	}

	.kotei_only #service section .h3 {
		font-size: 1.7em;
	}

	.kotei_only .btnBlock li {
		font-size: 1.2em;
	}

	.kotei_only .btnBlock li a span {
		padding-left: 55px;
		background-size: 45px auto;
	}

	p#g_ber span{
		display: block;
		text-align: left;
		padding: 0 3em;
		line-height: 1.5em;
		font-size: 4.1vw;
	}

	p#g_ber span:before {
    	content: '・';
	}

	p#g_ber span:nth-child(even) {
		display: none;   
	}

	#main_block_tit {
		font-size: 1em;
		margin-bottom: 10px;
	}

	#main_block figure {
		margin-left: 45px;
		width: 104px;
	}

	#main_block figure img {
		width: 100%;
		max-width: 100%;
		height: auto;
		width /***/: auto;
 		text-align: center;
	}

	#flowArea {
		flex-wrap:wrap;
	}

	#flowArea section {
		width: 48%;
		margin-bottom: 60px;
	}

	#area2 {
		padding-bottom: 100px;
	}

	#corp h2 {
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

@media only screen and (min-width: 471px) and (max-width: 670px){
	.kotei_only .btnBlock li:first-child a span span {
		display: none;
	}

	.kotei_only #service section .h3 strong {
		font-size: 6.5vw;
	}

	.kotei_only #service section ul li {
        font-size: 0.8em;
        height: 130px;
	}
}

@media only screen and (max-width: 640px){
	.kotei_only #serviceInfo li {
    	width: 49%;
	}

	body {
        padding-bottom: 102px;
    }

	.fixed {
		top: auto;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.fixed .fixTTL {
        writing-mode: initial;
        width: 100%;
        border-radius: 0;
		font-size: 0.9em;
		padding: 6px;
	}

	.fixed .fixTTL span {
		font-size: 1em;
	}

	.fixed .fixPhone {
		font-size: 2em;
		width: 30%;
        height: 60px;
	}

	.fixed .fixLine {
		font-size: 2em;
		width: 34%;
        height: 60px;
	}

	.fixed .fixMail {
        font-size: 2em;
        width: 36%;
        border-radius: 0;
        height: 60px;
	}

	.fixed div a {
		display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
	}

	.fixed div a span {
		display: inherit;
		font-size: 2.5vw;
		line-height: 1;
		color: #fff;
		padding: 0 0 0 8px;
		text-align: left;
	}

	#page-top {
		bottom: 136px;
	}

}

@media only screen and (max-width: 585px){
	.kotei_only .voiceArea .slick-initialized .slick-slide {
		margin-left: 0;
		margin-right: 0;
	}

	.kotei_only .mailForm .title_inner h2 strong,
	.kotei_footer .mailForm .title_inner h2 strong  {
		font-size: 5vw;
	}

}

@media only screen and (max-width: 585px){
	#mainImg_inner {
		overflow-x: hidden;
		margin-right: 0;
	}
	#main_block h2 img {
		width: calc(100% - 1em);
		padding: 0 1em 0 0;
	}
}

@media only screen and (min-width: 471px) and (max-width: 500px){
	.kotei_only .title_inner figure,
	.kotei_footer .title_inner figure  {
		margin-right: 0.5em;
	}
}

@media only screen and (max-width: 470px){
	/*==========================================
	 幅470px以下から ヘッダー等微調節
	===========================================*/

	body.mailForm .gomi_lp_next_content h3 {
		width: calc(100% - 3em);
		font-size: 7vw;		
	}

	body.mailForm .gomi_lp_next_content ul li {
		font-size: 0.9em;
	}

	.kotei_only .btnBlock li:last-child a span {
    	padding-top: 0px;
    	padding-bottom: 0px;
	}

	.kotei_only .btnBlock li {
		font-size: 1em;
	}

	.kotei_footer .footer_title {
		padding-bottom: 20px;
	}

	footer.kotei_footer ul {
		display: block;
		border-top: 1px solid #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
		margin-top: 0px;
		padding-top: 25px;
		padding-bottom: 15px;
	}

	footer.kotei_footer ul li {
		border-right: 0px solid #FFFFFF;
		line-height: 1.7;
		margin-bottom: 5px;
		text-align: left;
	}

	footer.kotei_footer ul li a {
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: left!important;
	}

	footer.kotei_footer {
		padding-top: 30px;
		margin-top: 100px;
	}

	#corp dl {
		display: block;
		margin-top: 35px;
	}

	#corp dl dt {
		font-size: 0.875em;
		font-weight: normal;
		border-top: 1px solid #2D47A1;
		padding-top: 20px;
		padding-bottom: 5px;
		padding-left: 12px;
		padding-right: 12px;
		width: 100%;
		margin-right: 0px;
	}

	#corp dl dd {
		font-size: 1em;
		border-top: 0px solid #707070;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 12px;
		padding-right: 12px;
		width: 100%;
	}

	#contactForm form .btn input {
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
		text-align: center;
	}

	#contactForm form label {
		margin-bottom: 15px;
		display: block;
		font-size: 1em;
		margin-right: 0px;
	}

	#contactForm form {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	#contactForm h2 {
		font-size: 1.438em;
	}

	#contactForm {
		padding-bottom: 50px;
		margin-top: 20px;
	}

	#contact {
		padding-top: 50px;
		padding-bottom: 100px;
	}

	.kotei_only .areaBlock h3 {
		padding-left: 15px;
		padding-right: 15px;
	}

	.kotei_only .areaBlock h4 {
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.kotei_only .areaBlock p {
		margin-left: 15px;
		margin-right: 15px;
	}

	.kotei_only #area2 {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.kotei_only .Label figure img,
	.kotei_only .content figure img {
		min-width: 20px!important;
		max-width: 20px!important;
		height: auto;
	}

	.kotei_only .Label figure,
	.kotei_only .content figure {
		padding-left: 15px;
		padding-right: 15px;
		margin-right: 15px;
	}

	.kotei_only .Label {
		font-size: 1.125em;
	}

	.kotei_only .content span p {
		font-size: 1em;
	}

	.kotei_only #qaBlock {
		margin-top: 33px;
	}
	
	.kotei_only #qa {
		margin-top: 70px;
	}

	#block_container {
		margin-top: 22px;
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 50px;
	}

	#block_container figure {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		display: inline-block;
		margin-top: 30px;
		margin-bottom: 35px;
	}

	#block_container h3 {
		margin-right: 0px;
	}

	#block_container ul {
		margin-left: 0px;
	}

	.kotei_only .voice {
		width: 100%;
	}

	#flowArea {
		margin-top: 45px;
		margin-bottom: 80px;
	}

	#flowArea section {
		max-width: 239px;
		width: calc(100% - 2em);
		margin-left: auto;
		margin-right: auto;
	}

	.kotei_only #serviceInfo li {
		width: 100%;
	}

	#features {
		flex-wrap:wrap;
		margin-bottom:80px;
	}

	#features section {
		max-width: 325px;
		width: calc(100% - 2em);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}

	#features section h3 {
		font-size: 1.3em;
		height: 144px;
	}

	.kotei_only .title .inner figure {
    	top: -213px;
	}

	.kotei_only .title .inner2 figure {
    	top: -200px;
	}

	.kotei_only #service section ul {
		flex-wrap:wrap;
	}

	.kotei_only #service section ul li {
		max-width: 325px;
		width: calc(100% - 2em);
		margin-left: auto;
		margin-right: auto;
		height: 194px;
		font-size: 1.2em;
		}

	.spbr {
		display: inherit;
	}

	.kotei_only #service section .h3 {
		font-size: 1.313em;;
	}

	#g_ber {
		display: none;
	}

	#g_ber2 {		
		max-width: 100%;
		width: calc(100% - 2em);
		margin: 40px auto 35px;
		background-color: #726B6B;
		color: #FFFFFF;
		text-align: left;
		padding: 15px;
		font-size: 1em;		
		display: flex;
		justify-content: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.kotei_only #service {
		padding-top: 25px;
		padding-bottom: 40px;
		background-size: auto auto;
		background-repeat: repeat;
	}

	.kotei_only .btnBlock li {
		width: 100%;
	}

	.kotei_only .title {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.kotei_only .title_inner figure,
	.kotei_footer .title_inner figure
	 {
		background-color: #FFFFFF;
		margin-right: 16px;
		align-self: baseline;
		width: 73px;
	}

	.kotei_only .title_inner h2,
	.kotei_footer .title_inner h2 {
		font-size: 0.9em;
		text-align: center;
		line-height: 1.3;
	}

	.kotei_only .title_inner h2 strong,
	.kotei_footer .title_inner h2 strong{
		font-size: 1.5em;
		margin-top: 7px;
	}

	.spImg {
    	display: inherit;
	}

	.pcImg {
    	display: none;
	}

	#main_contact {
		margin-top: -40px;
		margin-bottom: 10px;
	}

	#main_block .h1 {
		padding-top: 14px;
		padding-bottom: 14px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 1.500em;
		margin-bottom: 10px;
	}

	#main_block {
		margin-top: 120px;
		margin-bottom: 80px;
	}

	#mainImg {
		height: auto;
	}

	#main_p {
        right: -68px;
        width: 323px;
		height: auto;
	}

	#main_p img {
		width: 100%;
		max-width: 280px;
		height: auto;
		width /***/: auto;
 		text-align: center;
		float: right;
	}

	.radio,
	.checkbox {
  	transform: scale(1.2);
	}

	.mailForm #main_p {
        right: 0;
    }

	.mailForm #main_p img {
        height: 190px;
        width: auto;
    }

	.fixed div a span {
		font-size: 3.1vw;
		padding: 0 0 0 6px;
	}
}

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

    .Toggle {
        top: 6px;
    }
	#main_block_tit {
        font-size: 0.9em;
    }

	.fixed .fixPhone,
	.fixed .fixLine,
	.fixed .fixMail {
		width: 33.33%;
		height: 50px;
	}
    .fixed div a span {
		display: none;
    }

}