@charset "utf-8";

/*********************
 Header用
 window resize 935px
*********************/
@media screen and (max-width: 935px) {

	/*********************
	 header
	*********************/
	header li a{
		font-size:0.8em;
	}
	header img{
		max-height:40px;
	}
}




/*********************
 window resize 774px
*********************/
.sp{display: none;}
@media screen and (max-width: 774px) {
	.pc{display: none;}
	.sp{display: block;}

	/*********************
	 header
	*********************/
	header{
		margin:0 auto;
	}
	header img{
		max-height:45px;
		margin:15px 0 15px 10px;
	}
	.header_img img.catch{
		width:100%;
	}
	/** menu button **/
	header .menu_btn{
		display:inline-block;
		position: fixed;
		background:#287555;
		cursor: pointer;
		width: 75px;
		height:75px;
		top:0;
		right:0;
		z-index:999;
	}
	header .menu_btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		right: 20px;
		height: 2px;
		border-radius: 5px;
		background: #fff;
		width: 45%;
	 }
	header .menu_btn span:nth-of-type(1) { top:23px; }
	header .menu_btn span:nth-of-type(2) { top:29px; }
	header .menu_btn span:nth-of-type(3) { top:35px; }

	header .menu_btn span:nth-of-type(3)::after {
		content:"Menu";
		position: absolute;
		top:1px;
		right:1px;
		color: #fff;
		font-size: 0.6rem;
		text-transform: uppercase;
		letter-spacing:.1em;
	}
	header .menu_btn.active span:nth-of-type(1) {
		top: 24px;
		right: 28px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(2) { opacity: 0; }
	header .menu_btn.active span:nth-of-type(3){
		top: 36px;
		right: 28px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(3)::after {
		content:"Close";
		transform: translateY(0) rotate(-45deg);
		top:2px;
		right:-22px;
	}

	/** menu list **/
	header .menu_list{
		position: fixed;
		background:#fff;
		width:80vw;
		z-index:998;
		border-top:75px solid #287555;
		display:none;
		opacity: 0;
		height: 100vh;
		top:0;
		left:100%;
		color:#004ea2;
	}
	header .menu_list ul{
		display:block;
	}
	header .menu_list.active{
		animation-name:slideinRight;
		animation-duration:0.3s;
		animation-fill-mode:forwards;
		display:inline-block;;
	}
	@keyframes slideinRight {
	  0% {
		transform: translateX(100%);
	  }
	  100% {
		opacity: 1;
		transform: translateX(-100%);
	  }
	}
	header .menu_list li{
		border-bottom:1px solid #ececec;
		display:block !important;
	}
	header .menu_list li a{
		color:#333;
		text-decoration:none;
		font-weight:bold;
		position: relative;
		display: inline-block;
		padding:15px 20px;
		width:100%;
		margin:0 0 0 5px !important;
	}
	header .menu_list li a:hover{
		text-decoration:none;
	}
	header .menu_list li a:before {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px #287555;
		border-right: solid 2px #287555;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 30px;
		bottom: 0;
		margin: auto;
	}
	header .menu_list li a p {
		display:inline-block;
	}
	header .menu_list li a img {
		display:none;
	}

	/*********************
	 event_catch
	*********************/
	.event_catch{
		max-width:1200px;
		margin:80px 15px 0;
		vertical-align: middle;
		padding:60px 30px;
		border: solid 1px #ccc;
	}
	.event_catch .inbox{
		text-align:left;
	}
	.event_catch h2{
		font-size:1.2em;
	}
	.event_catch h3{
		font-size:1.2em;
		display:block;
	}

	/*********************
	 campaign
	*********************/
	.campaign{
		max-width:1200px;
		margin:80px 15px 0;
		vertical-align: middle;
		padding:60px 30px;
		border: solid 1px #ccc;
	}

	/*********************
	 top_catch
	*********************/
	.top_catch{
		padding:80px 15px 0;
	}
	.top_catch h1{
		font-size:2em;
		line-height:1.4em;
		font-weight:bold;
		text-align:center;
		margin-bottom:40px;
	}
	.top_catch h2{
		font-size:1.4em;
	}
	.top_catch h3{
		line-height:1.8em;
		font-weight:normal;
		text-align:center;
	}

	/*********************
	 infobox
	*********************/
	.infobox{
		margin:40px auto 0;
		padding:50px 0 30px;
	}
	.infobox h1 img{
		max-width:80%;
		margin:0 auto;
	}
	.infobox h2{
		max-width:100%;
		margin:30px auto 60px;
		display:block;
		padding:0 15px;
	}
	.infobox h2 img{
		max-width:100%;
		margin-bottom:25px;
	}
	.infobox div{
		margin:0;
	}
	.infobox h3{
		font-size:1.4em;
		margin-bottom:60px;
	}

	/*********************
	 loan
	*********************/
	.loan{
		margin:0 auto 0;
		padding:0 15px;
	}
	.loan section{
		margin:40px 15px 0;
	}
	.loan section img{
		width: 100%;
		margin-bottom: 40px;
	}
	.loan section li:last-child img{
		margin-bottom: 80px;
	}
	.loan div{
		text-align:left;
	}
	.loan h2{
		font-size:2em;
	}
	.loan h3{
		font-size:1.4em;
		margin:0 0 80px;
	}

	/*********************
	 step
	*********************/
	.step{
		margin:0px auto 0;
		padding:0 15px;
	}
	.step h1{
		font-size:1.6em;
	}
	.step ul{
		margin:20px auto 0;
		display:block;
	}
	.step ul li{
		margin:0 auto 20px;
		width:90%;
	}

	/*********************
	 hosho
	*********************/
	.hosho{
		margin:60px auto;
		padding:80px 15px;
	}
	.hosho img{
		margin-top:40px;
	}
	.hosho img.sp{
		display:inline-block;
		margin-top:15px;
	}

	/*********************
	 user
	*********************/
	.user{
		padding-bottom:0px;
	}
	.user .sp{
		max-width:100%;
	}
	.user ul.enquete_box{
		padding:30px 0;
		width:100%;
	}
	.user .sp img{
		display:block;
		width:100%;
	}
	.user .sp img:not(:last-child){
		margin-bottom:20px;
	}

	/*********************
	 qr
	*********************/
	.qr{
		margin:60px auto;
	}
	.qr .detail_box h3{
		padding:10px 40px 10px 15px;
	}
	.qr .detail_box .content{
		padding:15px;
	}

	/*********************
	 access
	*********************/
	.access{
		padding:60px 15px;
	}
	.access h2 p{
		font-size:0.6em;
	}


	/*********************
	 company
	*********************/
	.company{
		padding:20px 0;
		font-size:0.8em;
	}
	.company section div{
		padding:40px 15px;
	}
	.company dl{
		line-height: 1.8em;
	}
	.company dt{
		width:20%;
	}
	.company dd{
		margin-left:10px;
		width:calc(80% - 10px);
	}


	/*********************
	 hoshin
	*********************/
	.hoshin{
		margin:30px 15px 80px;
		padding:30px 20px;
	}
	.hoshin h3{
		font-size:1.2em;
	}

	/*********************
	 form
	*********************/
	.form form{
		max-width:100%;
		margin:0 auto;
		padding:40px 15px;
	}
	.form form .formitem{
		display:block;
		margin-top:30px;
	}
	.form form .formtxt{
		width:100%;
	}
	.form form .need:after,
	.form form .neednot:after {
	    right: 0;
	}
	.form form .formnote{
		margin:0;
	}

	/*********************
	 footer
	*********************/
	footer div.sp-menu{
		position: fixed;
		width: 100%;
		bottom: 0px;
		z-index: 99;
	}
	footer div.sp-menu a{
		display:inline-block;
		width:50%;
		color:#fff;
		padding:25px 0;
		text-align:center;
		text-decoration:none;
		font-weight:bold;
		font-size:16px;
	}
	footer div.sp-menu a:hover {
		opacity: 1;
	}
	footer div.sp-menu a.sp_mailbtn{
		background:#ff8d07;
	}
	footer div.sp-menu a.sp_telbtn{
		background:#3284fe;
	}
	footer div.sp-menu a img{
		height:20px;
		padding-right:5px;
	}
}