@charset "utf-8";


#main-box01{
	margin: 0px auto ;
	padding: 0px ;
	background: #9fb3b2 ;
	color: #FFF ;
}

#main-box01 .main-box01-inner01{
	position: relative ;
}
#main-box01 .main-box01-inner01 h1{
	width: 800px ;
	margin: 0px auto ;
	padding: 30px 30px 30px 200px ;
	font-size: 30px ;
	line-height: 170% ;
	background: url(../images/logo02.png) left bottom no-repeat ;
	z-index: 10 ;
	position: relative ;
}
#main-box01 .main-box01-inner01 img{
}

#main-box01 .main-box01-inner02{
	background: #FFF ;

}
#main-box01 .main-box01-inner02-2 div{
	width: 1030px ;
	margin: 0px auto 0px auto ;
	padding: 80px 50px 80px 50px ;
	color: #000 ;
	font-size: 14px ;
	line-height: 200% ;
	text-shadow: 0px 0px 1px #FFF,0px 0px 2px #FFF, 0px 0px 1px #FFF,0px 0px 2px #FFF,0px 0px 3px #FFF,0px 0px 4px #FFF,0px 0px 3px #FFF;
	position: relative ;
	z-index: 10 ;
}

#main-box01 .main-box01-inner02-2 .main-box01-pic01{
	width: 400px ;
	position: absolute ;
	right: 20px ;
	top: 30px ;
	z-index: 0 ;
}
#main-box01 .main-box01-inner02-2 .main-box01-pic01 img{
	width: 100% ;
}
#main-box01 .main-box01-inner02-2 .main-box01-pic02{
	width: 550px ;
	position: absolute ;
	right: 0px ;
	top: 360px ;
	z-index: 1 ;
}
#main-box01 .main-box01-inner02-2 .main-box01-pic02 img{
	width: 100% ;
}


#main-box02{
	width: 100% ;
	margin: 0px auto ;
	padding: 0px 0px 0px 0px ;
	background: #9fb3b2 ;
	position: relative ;
}
#main-box02-1{
	max-width: 800px ;
	margin: 0px auto 50px auto ;
	padding: 0px 10px 0px 10px ;
	font-size: 14px ;
	line-height: 170% ;
	position: relative ;
}
#main-box02-1 h1{
	margin: 0px 0px 0px 0px ;
	padding: 50px 0px 30px 0px ;
    font-family: 'Noto Sans Japanese';
    font-weight: 200;
    /*
    thin 100
    light 200
    demi-light 300
    regular 400
    medium 500
    bold 700
    black 900
    */
	font-size: 30px ;
	line-height: 100% ;
	position: relative ;
	z-index: 100 ;
}
#main-logo{
	width: 120px ;
	margin: -8px 0px 0px 0px ;
	padding: 0px ;
	text-align: center ;
	position: absolute ;
	left: -150px ;
	top: 0px ;
}
#chat-flow{
	border: 2px solid #CCCCCC ;
	max-width: 700px ;
	margin: 0px auto 50px auto ;
	padding: 30px 50px 30px 50px ;
	background: #d7e3e2 ;
}
#chat-flow h1{
	margin: 0px 0px 20px 0px ;
}
    /*ベース*/
    section.typeA{
    	display: flex;
    	flex-wrap: wrap;
    }
    section.typeA::after {
    	content: '';
    	width: 100%;
    	height: 6px;
    	order: -1;
    	display: block;
    	background: rgba(0,137,167,.7);
    }
    section.typeA .tabLabel {	/* タブ */
    	margin-right: 10px;
    	padding: 7px 12px 2px 12px ;
    	flex: 1;
    	order: -1;
    	border-radius: 3px 3px 0 0;
    	color: #444;
    	background: rgba(0,137,167,.3);
    	transition: .5s ;
    	cursor: pointer;
    }
    section.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
    section.typeA input {		/* ラジオボタン非表示 */
    	display: none;
    }
    section.typeA .content {	/* 本文 */
    	width: 100%;
    	height: 0;
    	overflow: hidden;
    	opacity: 0;
    }
    /*アクティブ設定*/
    section.typeA input:checked + .tabLabel {
    	color: #fff;
    	background: rgba(0,137,167,.7);
    }
    section.typeA input:checked + .tabLabel + .content {
    	padding: 15px;
    	height: auto;
    	background: #ececec ;
    	overflow: auto;
    	box-shadow: 0 0 5px rgba(0,0,0,.2);
    	transition: .5s opacity;
    	opacity: 1;
    }
	.flow-box-a01,
	.flow-box-b01{
		display: block ;
		padding: 20px 50px ;
		background: #FFF ;
		border-radius: 10px ;
	}
	.flow-box-a01 p{
		margin: 0px 0px 5px -10px ;
		border-bottom: 1px dotted #797979 ;
		font-size: 14px ;
		font-weight: 700 ;
		color: #2A6D8F ;
	}
	.sankaku01{
		display: block ;
		padding: 10px 0px ;
		text-align: center ;
		color: #2A6D8F ;
	}
	.flow-box-b01 p{
		margin: 0px 0px 5px -10px ;
		border-bottom: 1px dotted #797979 ;
		font-size: 14px ;
		font-weight: 700 ;
		color: #908035 ;
	}
	.sankaku02{
		display: block ;
		padding: 10px 0px ;
		text-align: center ;
		color: #908035 ;
	}

.tabLabel{
	font-size: 23px ;
}
#zoom-line {
	margin-bottom: 40px ;
}
#zoom-line .content{
	margin: 0px ;
}











#main-box02 .form-box{
	width: 800px ;
	margin: 0px auto ;
	padding: 60px  ;
	text-align: center ;
	background: #5a7087 ;
	color: #FFF ;
}
#main-box02 .form-box h1{
	text-align: center ;
}
#main-box02 .form-box h1 span{
	display: block ;
	margin: 20px ;
	font-size: 10px ;
	text-align: center ;
	letter-spacing: 0.5em ;
}
#main-box02 .form-box h2{
	width: 320px ;
	margin: 0px auto ;
	padding: 10px ;
	text-align: center ;
	border: 2px solid #FFF ;
}
.h2-text{
	display: block ;
	text-align: center ;
	font-size: 18px ;
	letter-spacing: 0.1em ;
	line-height: 190% ;
}
/* FORM内容部分ここから */
div#mf_wrapper {
	width: 800px;
	margin:0px auto;
	font-family: sans-serif;
}
form#mailform {
	padding: 5px;
}
table.mailform {
	width: 800px;
	border-top: 1px dotted #999999 ;
	
}
table.mailform tr th,
table.mailform tr td {
	text-align: left;
	font-weight: normal;
	font-size: 12px;
	border-bottom: 1px dotted  #999999;
	padding: 7px 5px 7px 5px;
}
table.mailform tr th {
	white-space:nowrap;
}
table.mailform tr th span {
	padding: 0px 0px 0px 3px ;
	font-size: 12px;
	font-weight: bold ;
	color: #CC0000;
}
table.mailform tr th p {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	color: #999999;
}
table.mailform tr td textarea {
	height: 120px;
}
.input-float01 div{
	white-space:nowrap;
	float: left ;
}
.w-10 textarea{width: 10% ;}
.w-20 textarea{width: 20% ;}
.w-30 textarea{width: 30% ;}
.w-40 textarea{width: 40% ;}
.w-50 textarea{width: 50% ;}
.w-60 textarea{width: 60% ;}
.w-70 textarea{width: 70% ;}
.w-80 textarea{width: 80% ;}
.w-90 textarea{width: 90% ;}
.w-100 textarea{width: 100% ;}
.w-10 input{width: 10% ;}
.w-20 input{width: 20% ;}
.w-30 input{width: 30% ;}
.w-40 input{width: 40% ;}
.w-50 input{width: 50% ;}
.w-60 input{width: 60% ;}
.w-70 input{width: 70% ;}
.w-80 input{width: 80% ;}
.w-90 input{width: 90% ;}
.w-100 input{width: 100% ;}



#main-box06{
	margin: 0px auto ;
	padding: 60px  ;
	background: url(../images/slide/top-slide-01.jpg) center center no-repeat ;
	color: #FFF ;
}
#main-box06 h1{
    font-family: 'Noto Sans Japanese';
    font-weight: 100;
    /*
    thin 100
    light 200
    demi-light 300
    regular 400
    medium 500
    bold 700
    black 900
    */
	font-size: 24px ;
	text-align: center ;
	line-height: 170% ;
}
#main-box06 th{
	width: 40% ;
	text-align: center ;
	white-space: nowrap ;
	vertical-align: middle ;
}
#main-box06 td{
	width: 40% ;
	padding: 30px ;
	text-align: right ;
	line-height: 190% ;
	vertical-align: middle ;
	font-size: 12px ;
}







	
/*
	参考　
	https://www.seojuku.com/blog/responsive-mediaquery.html
	レスポンシブ：タブレット縦/スマホ横/スマホ縦
	@media screen and (max-width: 1024px) { }
	@media screen and (max-width: 896px) { }
	@media screen and (max-width: 480px) { }
*/

@media screen and (max-width:768px) { 
	#sp-buttom{
		display: block ;
		width: 100vw ;
		z-index: 1 ;
		position: fixed ;
		bottom: 0 ;
	}
	#sp-buttom img{
		width: 100% ;
	}
}



/*　for PC　画面サイズが768pxからはここを読み込む */
@media screen and (min-width:768px) {
	#sp-buttom{
		display: none ;
	}
}



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

#main-pic-box h1 {
    font-size: 7vw;
    position: absolute;
    left: 30px;
    top: 140px;
}
#main-pic-box h1 span {
	width: 69%;
	font-size: 3vw;
}
#main-box01 .main-box01-inner01 h1 {
    width: 100%;
    padding: 30px 30px 30px 160px;
    font-size: 3vw;
}
	#main-box01 .main-box01-inner02-2 div {
	    width: 90%;
	    margin: 0px auto 0px auto ;
	    padding: 50px 30px 75px 0px ;
	    font-size: 2vw;
	}
	#main-box02-1 {
	    width: 100%;
	    margin: 0px auto 50px auto;
	    padding: 0px 10px 0px 30px;
	    font-size: 14px;
	}
	#main-box01 .main-box01-inner02-2 .main-box01-pic02 {
	    width: 100%;
	    position: absolute;
	    right: 0px;
	    top: 305px;
	    z-index: 0;
	}
	.flow-box-a01, .flow-box-b01 {
	    display: block;
	    padding: 20px 20px;
	    background: #FFF;
	    border-radius: 10px;
	}




	#main-box02 .form-box{
	    width: 100%;
	    margin: 0px auto;
	    padding: 60px 5px 0px 0px;
	}
	#main-box03 .main-box03-inner {
	    width: 100%;
	    padding: 50px 0px;
	}
	.h2-text{
		font-size: 6vw ;
	}
	/* FORM内容部分ここから */
	div#mf_wrapper {
		width: 100% ;
	}

	table.mailform {
		width: 100% ;
		
	}
	table.mailform tr th{
		font-size: 2vw;
	}
	table.mailform tr td {
		font-size: 2.5vw;
	}

	table.mailform tr th span {
		font-size: 2vw;
	}
	table.mailform tr th p {
		display: none ;
	}
}
@media screen and (max-width: 480px) {
	#main-box01 {
	    margin: -70px auto 0px auto;
	}

	#main-pic-box h1 span {
		width: 69%;
		font-size: 4vw;
	}
	#main-box01 .main-box01-inner01 h1 {
	    width: 100%;
	    margin: 0px auto;
	    padding: 30px 30px 30px 50px;
	    font-size: 5vw;
	    line-height: 170%;
	    background: none ;
	    z-index: 10;
	    position: relative;
	}

	#main-box01 .main-box01-inner02-2 div {
	    width: 83%;
	    padding: 80px 40px 120px 20px ;
	    font-size: 3.5vw ;
	}
	#main-box01 .main-box01-inner02-2 .main-box01-pic01 {
	    width: 220px;
	    position: absolute;
	    right: 10px;
	    top: 90px;
	    z-index: 0;
	}
	#main-box01 .main-box01-inner02-2 .main-box01-pic02 {
	    width: 550px;
	    position: absolute;
	    right: 0px;
	    top: 505px;
	    z-index: 0;
	}
}