@charset "utf-8";

/********************************
					PC
********************************/
@media screen and (max-width: 1020px) {

	#main{
		padding:10px;
	}
	
	.contents,
	#header_container,
	#gnavi,
	#slide ,
	#sitemap .sitemap_in,
	#footer .footer_in{
		width: 100%;
	}

	.bg_yellow p {
		padding-right: 0;
		font-size: 16px;
	}

	.checkphoto img {
		max-width: 200px;
	}
	.checklist ul li {
		font-size: 16px;
	}
}

/********************************
					タブレット
********************************/
@media screen and (max-width: 830px) {
	#gnavi ul li{
		font-size:14px;
	}

	.checkphoto img {
		max-width: 150px;
	}
	.imgdoor img {
		max-width: 80px;
	}
}

@media screen and (max-width: 755px) {
	/********************************
		ヘッダー
	********************************/
	header{
		padding:8px;
	}
	#header_container #header_right{
		display:none;
	}
	#gnavi{
		margin:0;
	}
	#gnavi > ul {
		display: block;
		padding: 20px;
		background-color: #FFFFFF;
	}
	#gnavi ul li{
		width:100%;
		text-align: left;
		border-bottom: dashed 1px #ccc;
	}
	#gnavi ul li a{
		position: relative;
		padding: 20px 10px;
	}
	#gnavi ul li a:after {
		content: url(/images/common/arw_right2.svg);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
	}
	#gnavi > ul > li.drawer-dropdown>a:after {
		content: "";
		display: none;
	}
	#gnavi > ul > li ul > li a:before{
		content: "●" !important;
		color:#005091;
	}
	header.scroll-nav #gnavi ul li a {
		padding: 20px 10px !important;
		transition: 0 !important;
	}
	
	#gnavi > ul li a{
		color:#33a5dd;
	}
	#gnavi > ul li a:hover{
		color:#ffffff;
	}
	
	.drawer-dropdown a:after {
		content: url("/images/common/arw_right2.svg");
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
		background: none;
		border-radius: 0;
		margin: 0;
		width: auto;
		height: auto;
		border: none;
	}
	.sp_contactbox{
		margin-top: 30px;
	}
	.sp_contactbox #sp_header_tel{
		margin-bottom: 30px;
		font-size:24px;
		color:#005091;
	}
	.sp_contactbox #sp_header_tel:before{
		content:url('/images/common/ic_tel.svg');
		margin-right:5px;
		vertical-align: top;
	}
	.sp_contactbox #sp_header_contact{
		margin-top:10px;
	}
	.sp_contactbox #sp_header_contact a{
		background-color:#005091;
		color:#FFFFFF;
		text-align:center;
		padding:10px 20px;
		text-decoration:none;
	}
	.sp_contactbox #sp_header_contact a:hover{
		background-color:#FF8040;
	}
	.sp_contactbox #sp_header_contact a:before{
		content:url('/images/common/ic_mail.svg');
		margin-right:5px;
	}

	.bg_yellow {
		padding: 20px;
		margin-bottom: 10px;
	}
	.checklistbox .checkphoto{
		display:none;
	}
	.checklistflex {
		display: block;
	}
	.imgdoor {
		margin-right: 0px;
		text-align: center;
	}
	.bg_yellow p,
	.checklist ul li,
	.checklist p {
		font-size:14px;
	}

	.newsbox {
		padding: 10px;
	}

	.splink img{
		max-width:130px;
	}
	
	header .linkarrow{
		margin:30px 0 0;
	}
	header .linkarrow a{
		color:#33a5dd;
		position: relative;
		padding-left: 25px;
		margin: 5px 0 0px 0;
	}
	header .linkarrow a:after{
		content: "\f138";
		font-weight: 900;
		font-size: 16px;
		color: #005091;
		font-family: "Font Awesome 5 Free";
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%); /* Safari用 */
	}
	
	/********************************
		スライド
	********************************/
	#slide{
		padding-top:60px;
	}
	
	/********************************
		次階層
	********************************/
	#next_header{
		width:100%;
		margin: 80px auto 0;
	}
	#next_header p#pagetitle {
		font-size: 24px;
	}
	#next_main {
		margin-top: 0;
	}
	.link_section {
		margin-top: -65px;
		padding-top: 65px;
	}
	table.data th{
		display: block;
		width:100%;
		margin: 5px 0 0;
	}
	table.data td{
		display: block;
		width:100%;
		padding: 10px 0px;
	}
	#next_header p#pagetitle{
		font-size: 14px;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
	}

	/*********************************************
		流れ
	*********************************************/
	#flow .telbox,
	#flow .documentbox {
		width: 100%;
		margin-bottom:20px;
	}
	flow .telbox h3, #flow .documentbox h3 {
		font-size: 16px;
	}
	#flow .telbox p.tel,
	#flow .documentbox p.mail {
		font-size: 12px;
	}
	#flow .step-title {
		font-size: 18px;
	}
	.supportmenu {
		display: block;
	}
	.supportmenu div {
		width: 100%;
	}


	/*********************************************
		支援内容
	*********************************************/
	#support .step-title {
		font-size: 18px;
	}
	#support .step h3{
		font-size: 18px;
	}
	#support .step h3,
	#support .step p {
		margin-left: 0;
	}
	#support .step.renkei p {
		margin-left: 0;
	}


	/*********************************************
		ご相談ください
	*********************************************/
	.consultationflex {
		display: block;
	}
	.consultationflex li {
		width: 100%;
	}


	/********************************
		フッター
	********************************/
	#footer_logo img{
		max-width: 130px;
	}
}

/********************************
					スマートフォン
********************************/
@media screen and (max-width: 640px) {
	.pagelink {
		margin-top: -60px;
		padding-top: 60px;
	}
	/********************************
							共通
	********************************/
	h3 {
		font-size: 20px;
	}
	h4 {
		font-size: 16px;
	}
	
	.pc {
		display: none !important;
	}

	.sp {
		display: inline-block;
	}

	.contents {
		padding: 0;
	}

	.next_contents {
		padding: 0 20px;
	}

	.container {
		margin: 30px 10px;
		text-align: left;
	}

	.greeting_msg {
		width: 100%;
	}
	.greeting_photo {
		width: 100%;
	}

	.newslist dl {
		margin: 10px;
	}

	.newslist dl dt span {
		padding: 2px 5px;
		font-size:12px;
	}
	.newslist dl dt {
		margin-bottom: 5px;
	}

	.linkbutton {
		margin: 10px 0 20px;
	}
	.linkbutton a {
		width: 60%;
		padding: 10px;
	}

	.access_flex{
		display: block;
	}
	.access_map {
		width: 100%;
		padding-top: 60%;
		margin-bottom:20px;
	}
	.access_info {
		width: 100%;
	}

	h2.lbltitle{
		font-size: 16px;
	}

	h2#news:before,
	h2#greeting:before,
	h2#access:before {
		width: 30px;
		height: 30px;
	}

	p#address,
	p#time,
	p#tel {
		margin: 10px 0;
		text-indent: -1.8em;
		padding-left: 2em;
	}

	p#address:before,
	p#time:before,
	p#tel:before {
		width: 25px;
		height: 20px;
	}
	
	.aboutmsg {
		padding: 10px;
	}
	.aboutmsg .lbltitle {
		font-size: 1.2rem;
	}
	.aboutmsg p {
		font-size: 14px;
	}
	.aboutmenu li b{
		font-size: 1.2rem;
	}
	
	.aboutmenu {
		width: 100%;
		margin: 30px auto 60px;
	}
	.aboutmenu li {
		display: block;
		width: 100%;
		margin-bottom: 30px;
	}
	.aboutmenu li p {
		line-height: 1;
	}
	.aboutmenu li p img{
		max-width: 70px;
		width: 100%;
	}

	.bannerflex {
		display: block;
	}
	.bannerflex p {
		width: 80%;
		margin: 0 auto 20px;
	}
	
	p#address,
	p#time,
	p#tel,
	p#fax{
		font-size:14px;
	}

	.access_info .accessbox {
		font-size:14px;
		margin: 0 10px;
	}

	.banner li {
		width: 47%;
		margin: 10px 1%;
	}

	.linkbutton a {
		width: 80%;
		font-size: 14px;
	}

	/********************************
		ヘッダー
	********************************/
	header #header_logo img,
	header.scroll-nav #header_logo img{
		max-width: 350px;
		padding: 10px 70px 10px 10px;
		width: 100%;
	}
	header #header_container #header_logoname,
	header.scroll-nav #header_container #header_logoname{
	
		font-size: 12px;
		margin:3px 0 0 0;
	}

	/********************************
		フッター
	********************************/
	#sitemap{
		display:none;
	}

	#footer .footer_in #fotter_sitename {
		font-size: 14px;
	}
	#footer .footer_in p {
		font-size: 12px;
	}

	#footer .footer_in #copyright{
		font-size: 10px;
	}

}

@media screen and (min-width: 755px) {
	header button {
		display: none !important;
	}
}