@charset "utf-8";

@media screen and (max-width: 1345px) {
	.pc-menu { padding-right: 80px;}
}


@media screen and (max-width: 900px) {
	
    .in-menu { display: block}
	
	
	.index-note { font-size: 12px; width: 275px; margin: 0 auto; letter-spacing: -1px; }

    .burger { display: block; }
    .burger:before, .burger:after { background-color: rgba(31, 39, 87, 0.9); transition: all 0.3s ease; } 
    .burger span { background-color: rgba(31, 39, 87, 0.9); margin: 8px 0;}
	
	.col-mid { display: -webkit-block;  display:block; }
    .col-01 {display:block;  }
	.logo { width: 230px;  top: 12px; left: 20px; }
	.wallper { padding:9px 0 0px 0;}
    .wallper02 {padding:90px 0 0px 0;}
	
	.mobile-nav-button { display: block; }
	.mobile-menu { display: block; }
	.in-menu ul li { min-width: 90px; height: 20px;}
	.in-menu ul li:hover a { color: #8E8E8E; top: -20px;}
	.in-menu ul li a { padding: 0; line-height: 20px;}
	.in-menu ul li a span { font-size: 14px; line-height: 20px;}
	.in-menu ul li a span.en { font-size: 12px;}
	.in-menu ul li span.dot {  width: 5px; height: 5px; top: 7px; left: -5px;}

	.cont-box .pro-spe { width: calc(100% - 30px); }
	
	.news ul li {  width: 48%; margin-bottom: 30px; }
	.news ul li > a { padding: 0 15px; }
	.news ul li .pro-note {  background-color: transparent; opacity: 1; position: relative; }
	.news ul li .pro-note>div { width: 100%; padding: 10px 0;}
	.news ul li .pro-note>div h3 { height: 2.4em; overflow: hidden; line-height: 1.2em;}
	
	
	.report ul li { display:block; margin-bottom: 20px;}
	.report ul li .photo { width: 100%; display: block; }
	.report .pro-note {  display: block; padding:10px 0 20px 0; }
	
	.contact {  display: block;}
	.google-map { margin-left: 0px;}

	.contact-info { margin-right: 0; margin-bottom: 20px;}

	/* form */
	.form .form-lis .title { width:90px; padding:0 5px 0 0; line-height: 30px;}
	.form .note { padding:0 0 10px 0;}
	.form .note:before { left: -1em; }
	.member-form .form-lis { display:block; padding:5px 0;}
	.member-form .form-lis .title { background: #c4b4aa; color:#ffffff; width:100%; line-height:25px; text-align:left; border-left:0;}
	.member-form .form-lis .data { width:100%;}
 

    footer .foot-info { width: 100%; text-align: center; }
    footer .foot-info span { width: auto; flex: none; }
	footer .foot-info a { word-break: break-all;  }
}

@media screen and (max-width: 780px) {
	.burger { display: block;}
	.pc-menu { display:none;}
}

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

	.banner-box.pc {   display: none; }
    .banner-box.mb {   display: block; }

	.flex-box { margin: 10px 0; }
	.flex-m-50, .flex-m-1 { width: 100%; flex: none; margin: 15px 0; }

	.project ul { margin: 5px; }
	.project ul li { width: calc(33.3% - 10px); margin: 5px;}
	.project ul li .photo a { background: transparent; }
	.project ul li .pro-note, 
	.project ul li:hover .pro-note { background-color: rgba(255, 255, 255, 0.9); opacity: 1; position: relative; top: auto; left: auto; right: auto; bottom: auto; padding-bottom: 30px; }
	.project ul li .pro-note> div { width: 100%; }
	.project ul li .pro-note h3 { font-size: 16px; font-weight: 300; margin: 10px 0 5px 0; color: #333333; }
	.project ul li .pro-note .time { color: #8E8E8E; }
	.project ul li .pro-note p { font-size: 14px; }

	footer .foot-copyright { width: 100%; flex: none; }

	.pc-banner { display: none; }
	.mobile-banner { display: block; }

	.i-about { width: 100%; max-width: 100%;  margin: 0;}
	.i-about .i-about-cont .about-cont-flex > div { width: 100%; flex: none; }
	.i-about .i-about-cont h2 { font-size: 30px; }
	.i-about .i-about-cont h3 { font-size: 32px; } 
}	

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

	.project .sub-nav a { padding: 30px 10px 15px 10px; }

    .wallper { padding: 70px 0 150px 0; }

    .logo { width: 180px; }
    .burger { width: 40px; height: 35px; top: 25px; right: 15px; }
    .burger span { margin: 8px 0;}
    .burger.active:before { margin-top: 15px; }
    .burger.active:after { margin-top: -24px; }

	.mobile-menu>ul>li {color: #ffffff; font-size: 26px; }
	.mobile-menu ul.sub li { font-size: 18px; width: 30%;}
	.index-text-m { align-content: space-between; padding: 15% 0; width: 40%; min-width: auto;}
	.mobile-menu>ul>li span.ch-text { font-size: 12px; }

	.project ul li { width: calc(50% - 10px); margin: 5px;}

	footer { justify-content: center; }
    footer .foot-info { font-size: 12px; line-height: 1.6em; justify-content: center;}
    footer .foot-copyright {  font-size: 12px; line-height: 1.6em; text-align: center;  }

	.form .form-lis .title { width: 100%; margin-right: 0; }
	.form .form-lis input.data,
	.form .form-lis textarea.data { max-width: 100%; width: 100%; flex: none; }

	.form .form-lis .code input.data { flex: 1; }
    
	.index-info,
	.index-copyright { font-weight: 100; }
	.index-text-m img.index-logo { max-width: 120px; }
	.index-copyright { line-height: 1.2em; }

	.page-title { margin: 20px -10px 5px 0px; }

	.news ul li {  width: 100%; margin: 0 0 10px 0; margin-bottom: 30px; }

	.sub-nav .nav-select-box { width: 100%; max-width: 100%; flex: none; margin-bottom: 2em; }

	.about-logo { width: 40px; }
	.about-abuot-cont { margin-left: 20px; padding-left: 15px; width: calc(100% - 20px); }

	.i-about .i-about-cont h3 {font-size: 22px; }
	.i-about .i-about-cont h4 { font-size: 18px; }
}