@charset "utf-8";
/* CSS Document */


/* header
   ========================================================================== */
header{
	position: relative;
}

header .inner{
	padding: 5px 10px;
}

.logo{
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	width: auto;
}

.logo a{
	display: inline-block;
}

.logo span{
	line-height: 130%;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
}

.logo .site_name{
	display: block;
	font-size: 20px;
}

.logo .company_name{
	display: block;
	font-size: 15px;
}

.logo .small{
	font-size: 13px;
}

header h1{
	display: none;
}


/* main_view
   ========================================================================== */
.main_view{
	margin-bottom: 25vw;
	background: url("../images/common/main_view_bg_sp.jpg") no-repeat center center;
	background-size: cover;
}

.main_view .text_box{
	padding: 10vw 3vw 30vw 30vw;
	position: relative;
}

.main_view .text_box *{
	color: #212121;
}

.main_view .pc{
	display: none;
}

.main_view h2{
	font-size: 9vw;
	line-height: 130%;
	font-weight: 900;
}

.main_view h2.sp{
	margin: 3vw 0 0;
	text-shadow:
    #fff 2px 0px,  #fff -2px 0px,
    #fff 0px -2px, #fff 0px 2px,
    #fff 2px 2px , #fff -2px 2px,
    #fff 2px -2px, #fff -2px -2px,
    #fff 1px 2px,  #fff -1px 2px,
    #fff 1px -2px, #fff -1px -2px,
    #fff 2px 1px,  #fff -2px 1px,
    #fff 2px -1px, #fff -2px -1px;
}

.main_view h2 + p{
	margin: 3vw 0 0;
	font-size: 5vw;
	line-height: 150%;
	font-weight: 900;
	text-shadow:
    #fff 1px 0px,  #fff -1px 0px,
    #fff 0px -1px, #fff 0px 1px,
    #fff 1px 1px , #fff -1px 1px,
    #fff 1px -2px, #fff -1px -1px,
    #fff 1px 1px,  #fff -1px 1px,
    #fff 1px -2px, #fff -1px -1px,
    #fff 1px 1px,  #fff -1px 1px,
    #fff 1px -1px, #fff -1px -1px;
}

.main_view .text{
	margin: 3vw 0 0;
	font-size: 3.2vw;
	line-height: 200%;
	font-weight: normal;
}

.main_view .campaign_view{
	margin: 0 0 0;
	padding: 3vw 3vw;
	box-sizing: border-box;
	width: 90%;
	background: rgba(246,246,246,.8);
	position: absolute;
	top: 80%;
	left: 10%;
}

.main_view .campaign_view h3{
	font-size: 8vw;
	line-height: 130%;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	display: inline-block;
	letter-spacing: 0;
}

.main_view .campaign_view h3 + p{
	font-size: 4.7vw;
	line-height: 200%;
	font-weight: 700;
}

.main_view .campaign_view ul{
	margin: 1vw 0 0;
}

.main_view .campaign_view ul li{
	font-size: 3.5vw;
	line-height: 200%;
	font-weight: 900;
}

.main_view .campaign_view ul li .red{
	color: #D80000;
}

.main_view .campaign_view ul li .big{
	font-size: 1.8em;
	color: inherit;
}


/* past_work
   ========================================================================== */
#past_work{
	margin: 5vw 0 6vw;
}

#past_work > .inner{
	padding: 6vw 0 0;
}

#past_work p{
	padding: 6vw 3vw 0;
}

#past_work .photo{
	margin: 6vw 3vw 0;
}

#past_work ul{
	margin: 3vw 3vw 0;
	font-size: 0;
}

#past_work ul li{
	margin: 2vw 0 0;
	line-height: 0;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 32%;
}

#past_work ul li:nth-child(3n+2){
	margin-left: 2%;
	margin-right: 2%;
}

#past_work ul li a{
	display: inline-block;
}


/* service
   ========================================================================== */
#service{
	margin: 5vw 0 6vw;
}

#service > .inner{
	padding: 6vw 0 0;
}

#service .top_box{
	padding: 6vw 3vw 0;
}

#service .top_box p{
	font-weight: 700;
	font-size: 4.5vw;
}

#service .gray_box{
	margin: 6vw 0 -6vw 6vw;
	padding: 6vw 3vw;
	background: #F6F6F6;
	position: relative;
}

#service .photo{
	background-size: cover;
	background-position: center center;
	height: 30vw;
}

#service .photo img{
	display: none;
}


/* convenient
   ========================================= */
.convenient{
	margin: 8vw 0 6vw;
}

.convenient h3{
	padding-left: 15vw;
	font-size: 5vw;
	font-weight: 700;
	line-height: 150%;
	position: relative;
}

.convenient h3::before{
	content: "";
	background: #ddd;
	width: 10vw;
	height: 1px;
	position: absolute;
	top: 4vw;
	left: 0;
}

.convenient ul{
	margin: 8vw 3vw 8vw;
}

.convenient ul li{
	margin: 8vw 0 0;
}

.convenient ul li h4{
	font-size: 4vw;
	font-weight: 700;
	line-height: 150%;
}

.convenient ul li p{
	margin: 3vw 0 0;
}


/* feature
   ========================================================================== */
#feature{
	margin: 5vw 0 6vw;
}

#feature .top_box{
	padding: 6vw 3vw 0;
}

#feature .top_box p{
	font-weight: 700;
	font-size: 4.5vw;
}

#feature ul{
	margin: 8vw 3vw 0;
}

#feature ul li{
	margin: 8vw 0 0;
	padding-bottom: 1px;
	clear: both;
	overflow: hidden;
	font-size: 0;
	position: relative;
}

#feature ul li .icon{
	margin: 0 0 0;
	display: inline-flex;
	vertical-align: top;
	box-sizing: border-box;
	width: 25vw;
	height: 25vw;
	justify-content: center;
	align-items: center;
	border: 1px solid #ddd;
}

#feature ul li .icon img{
	width: 15vw;
}

#feature ul li .text_box{
	padding: 0 0 0 3vw;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 69vw;
}

#feature ul li h4{
	font-weight: 700;
	font-size: 4.2vw;
}

#feature ul li p{
	margin: 2vw 0 0;
}


/* price
   ========================================================================== */
#price{
	margin: 5vw 0 6vw;
}

#price .top_box{
	padding: 6vw 3vw 0;
}

#price .top_box p{
	font-weight: 700;
	font-size: 4.5vw;
}

#price table{
	margin: 6vw 3vw 0;
}

#price table th,
#price table td{
	padding: 3vw 2vw;
	border: 1px solid #ddd;
	vertical-align: middle;
	font-size: 3.5vw;
	line-height: 200%;
}

#price table th{
	background: #F6F6F6;
	font-weight: 500;
	white-space: nowrap;
	width: 32%;
}

#price table th.col{
	white-space: inherit;
}

#price table .normal{
	font-weight: 400;
}

#price table .red{
	color: #D80000;
}

#price ul{
	margin: 8vw 3vw 0;
}

#price ul li{
	margin: 8vw 0 0;
}

#price ul li h3{
	font-weight: 700;
	font-size: 3.5vw;
}

#price ul li p{
	margin: 0 0 0;
}


/* faq_top
   ========================================================================== */
#faq{
	margin: 5vw 0 6vw;
}

#faq ul{
	margin: 6vw 3vw 0;
}

#faq ul li{
	margin: 4vw 0 0;
	padding: 5vw 3vw;
	border: 1px solid #ddd;
}

#faq ul li:first-child{
	margin-top: 0;
}

#faq ul li h4{
	font-size: 4vw;
	line-height: 170%;
	font-weight: 600;
}

#faq ul li p{
	margin: 3vw 0 0;
	font-weight: 400;
}

#faq ul li h4,
#faq ul li p{
	padding-left: 12vw;
	position: relative;
}

#faq ul li h4::before,
#faq ul li p::before{
	font-size: 8vw;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	position: absolute;
	top: -1vw;
	left: 0;
}

#faq ul li h4::before{
	content: "Q.";
	color: #27AE60;
}

#faq ul li p::before{
	content: "A.";
	color: #0E7AC4;
}


/* proposal
   ========================================================================== */
#proposal{
	margin: 5vw 0 6vw;
}

#proposal ul{
	margin: 6vw 3vw 0;
}

#proposal ul li{
	margin: 5vw 0 0;
	padding: 0 3vw 4vw;
	border-bottom: 1px dashed #ccc;
}

#proposal ul li:first-child{
	margin-top: 0;
}

#proposal ul li h4{
	padding-left: 10vw;
	position: relative;
	font-size: 3.8vw;
	line-height: 200%;
	font-weight: 600;
}

#proposal ul li p{
	margin: 3vw 0 0 1vw;
	font-weight: 400;
}

#proposal ul li h4::before{
	content: "";
	background: url("../images/proposal/building-solid.svg") no-repeat center center;
	background-size: 100%;
	width: 7vw;
	height: 9vw;
	position: absolute;
	top: -1vw;
	left: 0;
}


/* contact
   ========================================================================== */
#contact{
	margin: 5vw 0 6vw;
}

/* form */
.req{
	color: #E64C3B;
}

#contact table{
	margin: 6vw auto 0;
	width: 95%;
	font-size: 16px;
	box-sizing: border-box;
}

#contact th,
#contact td{
	width: 100%;
	display: block;
	font-weight: normal;
	border-bottom: none;
	box-sizing: border-box;
}

#contact tr{
	background: #eee;
}

#contact tr:nth-child(2n+2){
	background: #F8F8F8;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}

#contact th{
	padding: 10px;
}

#contact td{
	padding: 0 10px;
}

#contact td .border{
	padding: 10px 0;
	border-top: 1px solid #ccc;
}

#contact input,
#contact textarea,
#contact select{
	font-size: 16px;
	line-height: 150%;
	padding: 5px;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ddd;
	vertical-align: middle;
}

#contact .radio .block{
	margin: 0 0 10px;
	display: block;
}

#contact .radio label{
	display: inline-block;
	margin: 0 10px 0 0;
}

#contact .radio label input{
	display: inline-block;
	width: auto;
}

#contact .radio input.etc_inp{
	display: inline-block;
	width: 55vw;
}

.zsk_btn_area{
	margin: auto;
	box-sizing: border-box;
	max-width: 400px;
	text-align: center;
	padding: 40px 30px 0;
	font-size: 0;
}

.zsk_btn_area button{
	padding: 10px 0;
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	border: none;
}

.zsk_btn_area .zsk_btn01{
	background: #275D96;
	width: 100%;
}

.zsk_btn_area .zsk_btn02{
	margin-right: 2%;
	background: #ccc;
	width: 28%;
}

.zsk_btn_area .zsk_btn03{
	background: #275D96;
	width: 70%;
}

.thanks p{
	padding: 6vw 3vw 0;
	font-size: 4vw;
	line-height: 150%;
}

.thanks .go_top_btn{
	margin: 5vw 0 0;
	text-align: center;
}

.thanks .go_top_btn a{
	padding: 3vw 10vw;
	display: inline-block;
	background: #ddd;
	color: #fff;
	font-size: 4vw;
	border-radius: 4px;
}


/* company
   ========================================================================== */
#company{
	margin: 8vw 0 6vw;
	padding: 0 3vw;
}

#company .inner{
	padding: 3vw;
	background: url("../images/company/bg.jpg") repeat;
}

#company .white_box{
	padding: 3vw;
	background: #fff;
}

#company h2{
	margin: 0 0 0;
	line-height: 0;
}

#company h2 span{
	line-height: 130%;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0;
}

#company h2 .site_name{
	display: block;
	font-size: 7vw;
}

#company h2 .company_name{
	margin: 2vw 0 0;
	line-height: 0;
	display: block;
}

#company table{
	margin: 5vw auto 0;
	text-align: center;
	width: 100%;
	border-bottom: 1px dashed #ccc;
}

#company table th,
#company table td{
	padding: 2vw;
	font-size: 4vw;
	line-height: 150%;
	text-align: left;
}

#company table th{
	width: 25%;
}

#company table .link{
	color: #0059B2;
}

#company .chara{
	margin: 3vw auto 0;
	line-height: 0;
	width: 50%;
}

@media screen and (min-width : 500px){


	/* header
	   ========================================================================== */
	header{
		position: relative;
	}
	
	.logo{
		width: auto;
	}
	
	.logo .site_name{
		font-size: 30px;
	}
	
	.logo .company_name{
		display: block;
		font-size: 18px;
	}
	
	.logo .small{
		font-size: 15px;
	}


	/* past_work
	   ========================================================================== */
	#past_work{
		margin: 5vw 0 0;
	}
	
	#past_work > .inner{
		padding: 20px 0 0;
	}

	#past_work p{
		padding: 20px 20px 0;
	}
	
	#past_work .photo{
		margin: 20px 20px 0;
		max-width: 400px;
	}
	
	#past_work ul{
		margin: 10px 20px 0;
		font-size: 0;
	}
	
	#past_work ul li{
		margin: 10px 1% 0 0;
		width: 19.2%;
	}
	
	#past_work ul li:nth-child(3n+2){
		margin-left: 0;
		margin-right: 1%;
	}
	
	#past_work ul li:nth-child(5n+5){
		margin-right: 0;
	}


	/* service
	   ========================================================================== */
	#service{
		margin: 5vw 0 6vw;
	}
	
	#service > .inner{
		padding: 6vw 0 0;
	}
	
	#service .top_box{
		padding: 20px 20px 0;
	}
	
	#service .top_box p{
		font-size: 20px;
		line-height: 180%;
	}
	
	#service .gray_box{
		margin: 20px 0 -50px 50px;
		padding: 20px 20px;
	}
	
	#service .gray_box p{
		font-size: 15px;
		line-height: 200%;
	}
	
	#service .photo{
		height: 200px;
	}


	/* convenient
	   ========================================= */
	.convenient{
		margin: 8vw 0 6vw;
	}
	
	.convenient h3{
		padding-left: 85px;
		font-size: 20px;
	}
	
	.convenient h3 .sp{
		display: none;
	}
	
	.convenient h3::before{
		width: 50px;
		top: 15px;
		left: 0;
	}
	
	.convenient ul{
		margin: 65px 20px 80px;
	}
	
	.convenient ul li{
		margin: 40px 0 0;
	}
	
	.convenient ul li h4{
		font-size: 18px;
	}
	
	.convenient ul li p{
		margin: 20px 0 0;
		font-size: 15px;
	}


	/* feature
	   ========================================================================== */
	#feature{
		margin: 5vw 0 6vw;
	}
	
	#feature .top_box{
		padding: 20px 20px 0;
	}
	
	#feature .top_box p{
		font-size: 20px;
	}
	
	#feature ul{
		margin: 50px 20px 0;
	}
	
	#feature ul li{
		margin: 20px 0 0;
		font-size: 0;
	}
	
	#feature ul li .icon{
		margin: 0 0 0;
		display: inline-flex;
		vertical-align: top;
		box-sizing: border-box;
		width: 15vw;
		height: 15vw;
	}
	
	#feature ul li .icon img{
		width: 50%;
	}
	
	#feature ul li .text_box{
		padding: 5px 0 0 20px;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 79vw;
	}
	
	#feature ul li h4{
		font-size: 18px;
	}
	
	#feature ul li p{
		margin: 10px 0 0;
		font-size: 15px;
		line-height: 200%;
	}


	/* price
	   ========================================================================== */
	#price{
		margin: 5vw 0 6vw;
	}
	
	#price .top_box{
		padding: 20px 20px 0;
	}
	
	#price .top_box p{
		font-size: 20px;
	}
	
	#price table{
		margin: 20px 20px 0;
	}
	
	#price table th,
	#price table td{
		padding: 15px 20px;
		font-size: 15px;
	}
	
	#price table th{
		width: 32%;
	}
	
	#price ul{
		margin: 35px 20px 0;
	}
	
	#price ul li{
		margin: 25px 0 0;
	}
	
	#price ul li h3{
		font-size: 15px;
	}
	
	#price ul li p{
		margin: 0 0 0;
	}


	/* faq
	   ========================================================================== */
	#faq{
		margin: 5vw 0 6vw;
	}
	
	#faq ul{
		margin: 50px 20px 0;
	}
	
	#faq ul li{
		margin: 30px 0 0;
		padding: 35px 20px;
	}
	
	#faq ul li h4{
		font-size: 18px;
	}
	
	#faq ul li p{
		margin: 25px 0 0;
		font-size: 15px;
	}
	
	#faq ul li h4,
	#faq ul li p{
		padding-left: 65px;
	}
	
	#faq ul li h4::before,
	#faq ul li p::before{
		font-size: 35px;
		top: -6px;
		left: 0;
	}


	/* proposal
	   ========================================================================== */
	#proposal{
		margin: 5vw 0 6vw;
	}
	
	#proposal ul{
		margin: 35px 20px 0;
	}
	
	#proposal ul li{
		margin: 30px 0 0;
		padding: 0 0 20px 20px;
	}
	
	#proposal ul li h4{
		padding-left: 55px;
		font-size: 18px;
	}
	
	#proposal ul li p{
		margin: 20px 0 0 8px;
		font-size: 15px;
	}
	
	#proposal ul li h4::before{
		width: 32px;
		height: 40px;
		top: -5px;
	}


	/* contact
	   ========================================================================== */
	#contact{
		margin: 5vw 0 6vw;
	}

	.thanks p{
		padding: 20px 20px 0;
		font-size: 15px;
		line-height: 200%;
	}
	
	.thanks .go_top_btn{
		margin: 50px 0 0;
		text-align: center;
	}
	
	.thanks .go_top_btn a{
		padding: 15px 30px;
		font-size: 20px;
	}


	/* company
	   ========================================================================== */
	#company{
		margin: 60px 0 0;
		padding: 0 20px;
	}

	#company .inner{
		padding: 10px;
	}
	
	#company .white_box{
		padding: 20px 15px 25px 25%;
		background: url("../images/company/zashikichan.png") no-repeat 20px center, #fff;
		background-size: 20%;
	}
	
	#company h2{
		margin: 0 0 0;
	}

	#company h2 .site_name{
		font-size: 30px;
	}
	
	#company h2 .company_name{
		margin: 10px 0 0;
	}
	
	#company table{
		margin: 30px auto 0;
	}
	
	#company table th,
	#company table td{
		padding: 10px 10px 0;
		font-size: 15px;
	}
	
	#company table th{
		width: 100px;
	}
	
	#company table tr:last-child td{
		padding-bottom: 10px;
	}
	
	#company .chara{
		display: none;
	}
    

}
@media screen and (min-width : 768px){


	/* header
	   ========================================================================== */
	header{
		position: relative;
	}
	
	header .inner{
		padding: 15px 10px;
	}
	
	.logo{
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		width: auto;
	}
	
	header h1{
		padding: 0 0 0 15px;
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		width: auto;
		font-size: 11px;
	}


	/* main_view
	   ========================================================================== */
	.main_view{
		margin-bottom: 0;
		background: url("../images/common/main_view_bg.jpg") no-repeat -315px center;
		background-size: cover;
	}
	
	.main_view .text_box{
		padding: 87px 0 62px 35%;
	}
	
	.main_view .sp{
		display: none;
	}
	
	.main_view .pc{
		display: block;
	}
	
	.main_view h2{
		font-size: 35px;
	}
	
	.main_view h2 + p{
		margin: 5px 0 0;
		font-size: 18px;
		text-shadow: none;
	}
	
	.main_view .text{
		margin: 10px 0 0;
		font-size: 15px;
		max-width: 460px;
	}
	
	.main_view .campaign_view{
		margin: 55px 0 0;
		padding: 45px 30px 20px;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		background: rgba(255,255,255,.8);
	}
	
	.main_view .campaign_view h3{
		position: absolute;
		top: -30px;
		left: 40px;
		font-size: 45px;
	}
	
	.main_view .campaign_view h3 + p{
		font-size: 25px;
	}
	
	.main_view .campaign_view ul{
		margin: 5px 0 0;
	}
	
	.main_view .campaign_view ul li{
		font-size: 18px;
	}
	
	.main_view .campaign_view ul li .big{
		font-size: 1.8em;
	}


	/* past_work
	   ========================================================================== */
	#past_work{
		margin: 65px 0 60px;
	}
	
	#past_work .block_title{
		margin-left: 52%;
		padding-left: 30px;
	}
	
	#past_work .block_title::before {
	    width: 100%;
	}
	
	#past_work > .inner{
		padding: 20px 0 0;
		position: relative;
	}
	
	#past_work > .inner p{
		margin-left: 52%;
		padding-left: 30px;
		padding-right: 10px;
	}
	
	#past_work .photo{
		margin: 0 0 0;
		position: absolute;
		top: 0;
		left: 0;
		max-width: 400px;
	}
	
	#past_work ul{
		margin: 40px 10px 0;
	}
	
	#past_work ul li{
		margin-top: 10px;
	}


	/* service
	   ========================================================================== */
	#service{
		margin: 60px 0 80px;
	}
	
	#service > .inner{
		padding: 0 0 0;
		position: relative;
	}
	
	#service .top_box{
		padding: 20px 20px 0;
	}
	
	#service .top_box p{
		font-size: 16px;
	}
	
	#service .gray_box{
		margin: 0;
		padding: 20px 20px;
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
	}
	
	#service .gray_box p{
		font-size: 14px;
	}
	
	#service .photo{
		margin-top: 90px;
		height: 300px;
	}


	/* convenient
	   ========================================= */
	.convenient{
		margin: 80px 0 60px;
	}
	
	.convenient h3{
		padding-left: 85px;
		font-size: 20px;
	}
	
	.convenient h3 .sp{
		display: none;
	}
	
	.convenient h3::before{
		width: 50px;
		top: 15px;
		left: 0;
	}
	
	.convenient ul{
		margin: 65px 20px 80px;
	}
	
	.convenient ul li{
		margin: 40px 0 0;
	}
	
	.convenient ul li h4{
		font-size: 18px;
	}
	
	.convenient ul li p{
		margin: 20px 0 0;
		font-size: 15px;
	}


	/* feature
	   ========================================================================== */
	#feature{
		margin: 60px 0 115px;
	}
	
	#feature .top_box{
		padding: 40px 20px 0;
	}
	
	#feature .top_box p{
		font-size: 20px;
	}
	
	#feature ul{
		margin: 50px 20px 0;
	}


	/* price
	   ========================================================================== */
	#price{
		margin: 110px 0 80px;
	}


	/* faq
	   ========================================================================== */
	#faq{
		margin: 80px 0 95px;
	}


	/* proposal
	   ========================================================================== */
	#proposal{
		margin: 95px 0 80px;
	}


	/* contact
	   ========================================================================== */
	#contact{
		margin: 80px 0 117px;
	}
	
	/* form */
	#contact table{
		font-size: 16px;
		box-sizing: border-box;
	}
	
	#contact th,
	#contact td{
		width: auto;
		display: table-cell;
		vertical-align: middle;
		box-sizing: border-box;
	}
	
	#contact th{
		padding: 0 30px;
		width: 30%;
	}
	
	#contact .title_top th{
		padding-top: 30px;
		padding-bottom: 30px;
		vertical-align: top;
	}
	
	#contact td{
		padding: 23px 0;
	}

	#contact td .border{
		padding: 0 30px;
		min-height: 24px;
		border-top: none;
		border-left: 1px solid #ccc;
	}
	
	#contact input,
	#contact textarea,
	#contact select{
		font-size: 16px;
		padding: 5px;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #ddd;
	}
	
	#contact select{
		vertical-align: middle;
	}

	#contact .radio .block{
		margin: 0 0 0;
		display: inline-block;
	}

	#contact .radio .check_box{
		margin: 10px 0 0;
	}

	#contact .radio input.etc_inp{
		display: inline-block;
		width: 300px;
	}
	
	.zsk_btn_area{
		text-align: center;
		padding: 63px 0 0;
		margin: 0 auto;
	}
	
	.zsk_btn_area button{
		font-size: 22px;
		height: 70px;
	}
	
	.zsk_btn_area .zsk_btn01{
		width: 400px;
	}

	.thanks p{
		padding: 30px 60px 0;
		font-size: 15px;
		text-align: left;
	}
	
	.thanks .go_top_btn{
		margin: 40px 0 0;
		text-align: center;
	}
	
	.thanks .go_top_btn a{
		padding: 15px 50px;
		display: inline-block;
		background: #ddd;
		color: #fff;
		font-size: 16px;
		border-radius: 4px;
	}


	/* company
	   ========================================================================== */
	#company{
		margin: 117px 0 0;
		padding: 0 20px;
	}
	
	#company .inner{
		padding: 10px;
	}
	
	#company .white_box{
		padding: 20px 35px 25px 30%;
		background: url("../images/company/zashikichan.png") no-repeat 20px center, #fff;
		background-size: 24%;
	}
	
	#company h2{
		margin: 0 0 0;
	}
	
	#company h2 .site_name{
		font-size: 38px;
	}
	
	#company h2 .company_name{
		margin: 10px 0 0;
	}
	
	#company table{
		margin: 30px auto 0;
	}
	
	#company table th,
	#company table td{
		padding: 10px 10px 0;
		font-size: 16px;
	}
	
	#company table th{
		width: 100px;
	}
	
	#company table tr:last-child td{
		padding-bottom: 10px;
	}
	
	#company .chara{
		display: none;
	}
	

}
@media screen and (min-width : 769px){


	/* header
	   ========================================================================== */
	header{
		position: relative;
	}
	
	header .inner{
		padding: 15px 10px;
		height: 95px;
		box-sizing: border-box;
	}
	
	.logo{
		width: auto;
	}
	
	header h1{
		padding: 0 0 0 40px;
		width: auto;
		font-size: 13px;
	}


	/* main_view
	   ========================================================================== */
	.main_view{
		background: url("../images/common/main_view_bg.jpg") no-repeat center center;
		background-size: cover;
	}
	
	.main_view .text_box{
		padding: 87px 0 62px 480px;
		box-sizing: border-box;
		height: 600px;
	}
	
	.main_view h2{
		font-size: 35px;
		letter-spacing: 0.20em;
	}
	
	.main_view h2 + p{
		margin: 10px 0 0;
		font-size: 18px;
		letter-spacing: 0.20em;
	}
	
	.main_view .text{
		margin: 15px 0 0;
		font-size: 15px;
		max-width: 480px;
	}
	
	.main_view .campaign_view{
		margin: 62px 0 0;
		padding: 39px 0 20px 30px;
	}
	
	.main_view .campaign_view::after{
		content: "";
		background: rgba(255,255,255,.8);
		width: 500%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 100%;
	}
	
	.main_view .campaign_view h3{
		position: absolute;
		top: -30px;
		left: 40px;
		font-size: 45px;
	}
	
	.main_view .campaign_view h3 + p{
		font-size: 25px;
		letter-spacing: 0.20em;
	}
	
	.main_view .campaign_view ul{
		margin: 5px 0 0;
	}
	
	.main_view .campaign_view ul li{
		font-size: 18px;
		letter-spacing: 0.20em;
	}
	
	.main_view .campaign_view ul li .big{
		font-size: 35px;
	}


	/* past_work
	   ========================================================================== */
	#past_work{
		margin: 65px 0 60px;
	}
	
	#past_work .block_title{
		margin-left: 0;
		padding-left: 0;
	}
	
	#past_work .block_title .inner{
		margin-left: 60%;
		padding-left: 50px;
		width: auto;
	}
	
	#past_work .block_title::before {
	    width: 100%;
	}
	
	#past_work .block_title .inner::before {
	    width: 100%;
	}	
	
	#past_work .block_title .inner::after{
		right: auto;
		left: 100%;
	}
	
	#past_work > .inner{
		padding: 0 0 0;
		position: relative;
	}
	
	#past_work > .inner p{
		margin-left: 60%;
		padding: 35px 0 0 50px;
		line-height: 200%;
		font-size: 15px;
	}
	
	#past_work .photo{
		margin: 0 0 0;
		position: absolute;
		top: 0;
		left: 0;
		max-width: 600px;
	}
	
	#past_work ul{
		margin: 175px 0 0;
	}
	
	#past_work ul li{
		margin-top: 10px;
	}
	
	#past_work ul li img{
		width: 100% !important;
	}


	/* service
	   ========================================================================== */
	#service{
		margin: 60px 0 60px;
	}
	
	#service > .inner{
		padding: 0 0 0;
		position: relative;
	}
	
	#service .top_box{
		padding: 48px 0 0;
	}
	
	#service .top_box p{
		font-size: 20px;
	}
	
	#service .gray_box{
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		width: 57%;
		box-sizing: border-box;
	}
	
	#service .gray_box .posi{
		padding: 30px 20px 30px 45px;
		position: relative;
	}
	
	#service .gray_box .posi::after{
		content: "";
		background: #F6F6F6;
		width: 500%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 100%;
	}
	
	#service .gray_box p{
		font-size: 15px;
	}
	
	#service .photo{
		margin-top: 90px;
		height: 300px;
	}


	/* convenient
	   ========================================= */
	.convenient{
		margin: 80px 0 60px;
	}
	
	.convenient h3{
		padding-left: 85px;
		font-size: 20px;
		letter-spacing: 0.20em;
	}
	
	.convenient h3::before{
		width: 50px;
		top: 15px;
		left: 0;
	}
	
	.convenient h3::after{
		content: "";
		background: #ddd;
		width: 500%;
		height: 1px;
		position: absolute;
		top: 15px;
		right: 100%;
	}
	
	.convenient ul{
		margin: 65px 30px 80px;
	}
	
	.convenient ul li{
		margin: 40px 0 0;
	}
	
	.convenient ul li h4{
		font-size: 18px;
		letter-spacing: 0.20em;
	}
	
	.convenient ul li p{
		margin: 20px 0 0;
		font-size: 15px;
	}


	/* feature
	   ========================================================================== */
	#feature{
		margin: 60px 0 115px;
	}
	
	#feature .top_box{
		padding: 40px 0 0;
	}
	
	#feature .top_box p{
		font-size: 20px;
	}
	
	#feature ul{
		margin: 50px 0 0;
	}
	
	#feature ul li{
		margin: 20px 0 0;
		font-size: 0;
	}
	
	#feature ul li .icon{
		margin: 0 0 0;
		width: 15%;
		height: 150px;
	}
	
	#feature ul li .icon img{
		width: 60px !important;
	}
	
	#feature ul li .text_box{
		padding: 10px 0 0 30px;
		width: 85%;
	}
	
	#feature ul li h4{
		font-size: 18px;
	}
	
	#feature ul li p{
		margin: 10px 0 0;
		font-size: 15px;
		line-height: 200%;
	}


	/* price
	   ========================================================================== */
	#price{
		margin: 110px 0 80px;
	}
	
	#price .top_box{
		padding: 40px 0 10px;
	}
	
	#price .top_box p{
		font-size: 20px;
	}
	
	#price table{
		margin: 20px auto 0;
		width: 100%;
	}
	
	#price table th,
	#price table td{
		padding: 15px 30px;
		font-size: 15px;
		letter-spacing: 0.20em;
	}
	
	#price table th{
		padding: 15px 35px;
		width: 20%;
		box-sizing: border-box;
	}
	
	#price ul{
		margin: 35px 30px 0;
	}
	
	#price ul li{
		margin: 25px 0 0;
	}
	
	#price ul li h3{
		font-size: 15px;
	}
	
	#price ul li p{
		margin: 0 0 0;
	}


	/* faq
	   ========================================================================== */
	#faq{
		margin: 80px 0 95px;
	}
	
	#faq ul{
		margin: 50px 0 0;
	}
	
	#faq ul li{
		margin: 30px 0 0;
		padding: 35px 30px;
	}
	
	#faq ul li h4{
		font-size: 18px;
	}
	
	#faq ul li p{
		margin: 25px 0 0;
		font-size: 15px;
	}
	
	#faq ul li h4,
	#faq ul li p{
		padding-left: 65px;
	}
	
	#faq ul li h4::before,
	#faq ul li p::before{
		font-size: 35px;
		top: -3px;
		left: 0;
	}


	/* proposal
	   ========================================================================== */
	#proposal{
		margin: 95px 0 80px;
	}
	
	#proposal ul{
		margin: 65px 0 0;
	}
	
	#proposal ul li{
		margin: 30px 0 0;
		padding: 0 0 30px 10px;
	}
	
	#proposal ul li h4{
		padding-left: 55px;
		font-size: 18px;
	}
	
	#proposal ul li p{
		margin: 20px 0 0 15px;
		font-size: 15px;
	}
	
	#proposal ul li h4::before{
		width: 32px;
		height: 40px;
		top: -5px;
	}


	/* contact
	   ========================================================================== */
	#contact{
		margin: 80px 0 117px;
	}
	
	#contact table{
		margin: 50px auto 0;
		width: 100%;
	}
	
	#contact th{
		padding: 0 30px;
		width: 30%;
		font-size: 18px;
	}
	
	#contact td{
		padding: 23px 0;
		font-size: 18px;
	}

	#contact td .border{
		padding: 0 30px;
	}
	
	#contact input,
	#contact textarea,
	#contact select{
		font-size: 18px;
		padding: 10px;
	}

	#contact textarea{
		height: 200px;
		box-sizing: border-box;
	}

	#contact .radio .block{
		margin: 0 40px 0 0;
	}

	#contact .radio .check_box{
		margin: 10px 0 0;
	}

	#contact .radio input.etc_inp{
		display: inline-block;
		width: 540px;
	}
	
	.zsk_btn_area{
		max-width: 571px;
	}
	
	.zsk_btn_area button{
		padding: 18px 0;
		font-size: 22px;
		cursor: pointer;
		transition: .2s;
	}
	
	.zsk_btn_area button:hover{
		opacity: .7;
	}
	
	.zsk_btn_area .zsk_btn01{
		width: 400px;
	}

	.thanks p{
		padding: 30px 100px 0;
		font-size: 15px;
		text-align: left;
	}
	
	.thanks .go_top_btn{
		margin: 40px 0 0;
		text-align: center;
	}
	
	.thanks .go_top_btn a{
		padding: 15px 50px;
		font-size: 16px;
		letter-spacing: 0.20em;
	}


	/* company
	   ========================================================================== */
	#company{
		margin: 60px 0 0;
		padding: 0;
	}
	
	#company .white_box{
		padding: 35px 35px 45px 290px;
		background: url("../images/company/zashikichan.png") no-repeat 40px center, #fff;
		background-size: auto;
	}
	
	#company h2{
		margin: 0 0 0 10px;
		text-align: left;
	}
	
	#company table + table{
		margin-top: 15px;
	}
	
	#company table th,
	#company table td{
		padding: 5px 10px 0;
		font-size: 18px;
		letter-spacing: 0.20em;
	}
	
	#company table th{
		width: 110px;
	}
	
	#company table tr:last-child td{
		padding-bottom: 15px;
	}
	
	#company table .link:hover{
		text-decoration: underline;
	}
    

}
@media screen and (min-width : 1025px){

	
	#service .photo{
		background-attachment: fixed;
	}
	
	
}