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

.hamb{
	display: none;
}

@media screen and (max-width:1135px) {
	/*******hamburger menu *********/
	.hamb {
	  padding:10px;
	  background: #20acbf;
		display: block;
		position: fixed;
		right: 0;
		top: 20px;
		width: 25px;
		height: 25px;
		z-index: 10;
	}

	#nav-drawer {
	  position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
	  display: inline-block;
	  width: 30px;
	  height: 22px;
	  vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #fff;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content {
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 330px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #fff;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

.hamb a{
	text-decoration: none;
	font-weight: bold;
	color: #20acbf;
}
.hamb li{
	margin-top: 5%;
}

.hamb .hamblis{
	padding-left: 3%;
}
.hamb .hamblis a:before{
	font-family: "Font Awesome 5 Free";
content: '\f0a9';
font-weight: 900;
margin-right: 2%;
}

.hamb .hamblisin{
	padding-left: 10%;
}
.hamb .hamblisin a:before{
	font-family: "Font Awesome 5 Free";
content: '\f518';
font-weight: 900;
margin-right: 2%;
}

.hamb a:hover{
	color: #000000;
}

/*******hamburger menu END*********/



img{
	max-width: 100%;
}
/* ---------------------------------------------------------------------
body
--------------------------------------------------------------------- */
body {
}


/* ---------------------------------------------------------------------
header
--------------------------------------------------------------------- */


header {
	min-width:100%;
	height: auto;
}



h1 {
	width:100%;
	height: auto;
	padding-right: 50px;
	box-sizing: border-box;

}

.h1_bg {
	min-width:100%;
	height:auto;
}

header .header_box {
	width:100%;
	height: auto;
}

header .header_box .logo {
	max-width:100%;
	height:auto;
}

header .header_box .mail_contact {
	width: 24%;
	height: auto;
	margin-left:1%;
}

header .header_box .tel_contact {
	width: 29%;
	height:auto;
	margin-left:1%;
}

header .header_box .tab_contact ,header .header_box .smf_menu {
}


/* ---------------------------------------------------------------------
container
--------------------------------------------------------------------- */
.container {
	width:100%;
}

/* ---------------------------------------------------------------------
nav
--------------------------------------------------------------------- */


nav {
	display: none;
}


nav ul {
	width:100%;
}

nav ul li {
	width:19%;
	height:auto;
}

nav ul .gnhome {
	width:10%;
}

nav ul .gncamp {
	width:10%;
}


/* ---------------------------------------------------------------------
contents
--------------------------------------------------------------------- */

.contents {
	width:74%;
	max-width: 800px;
}

.contents h2 {
	width:90%;
	padding:2% 5%;
	background-size: cover;
	height: auto;
	line-height: 1.3;
}
/* ---------------------------------------------------------------------
main
--------------------------------------------------------------------- */

.main {
	width:100%;
	padding:10px 5%;
	box-sizing: border-box;
}

.main p {
}

/* ---------------------------------------------------------------------
aside
--------------------------------------------------------------------- */

aside {
	width:25%;
	max-width: 280px;

}

aside h2 {
	width:89%;
	padding:5%;
	height: auto;
	margin-left:auto;
	margin-right:auto;
	background-size: cover;
}
aside h2 span{
}

aside h2 .h2_large {
}

aside h2 a {
}

aside h2 a:hover {
}

aside ul {
	width:99%;
	margin-left: auto;
	margin-right: auto;
	box-sizing:border-box;
}


aside ul li {
}
aside ul li img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

aside ul li a:hover {
}

aside ul a{
	font-size: 1.5vw;
}

aside .product li {
	height: auto;
}

aside .product li a:hover{
}

aside .side_area {
	width:99%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

aside .side_area h3{
	padding:1%;
}

aside .side_area p{
	padding:1%;
}

/*---------------------------------------------------------------------
footer
--------------------------------------------------------------------- */

footer {
	min-width: 100%;
}

footer .top_link {
	width:90%;
	padding:5%;

}

footer  a{
}


footer a:hover {
}



footer .sitemap {
	width:98%;
}

footer .sitemap ul {
	width:100%;
}

footer .sitemap ul li {
	padding:0px 1%;
}

footer .corp {
	width:90%;
	padding:5%;
}

footer .corp p {
	margin-right:2%;
}

footer .corp .footer_corp {
}


footer .copyright {

}

footer .copyright a {
}


/* ---------------------------------------------------------------------

フォント

---------------------------------------------------------------------  */

.red {
}

.blue {
}

.green {
}



/* ---------------------------------------------------------------------
index
--------------------------------------------------------------------- */

.topbanner_bg {
}

.topbanner {
	width:100%;
}

#index #rank {
	padding:1%;
	width:100%;
}

#index #rank img{
}

#index .main h3 {
	padding:18px 0px 0px 3%;
	background: #ffc105;
	height: auto;
}
#index .main h3:before {
	content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#index .main .power_box{
	padding-left:5%;
}

#index .main .power_box p{
}

#index .main .power_box a{
}


/* ---------------------------------------------------------------------
faq
--------------------------------------------------------------------- */

#other .faq p {
}

#other .faq dt{
	width:95%;
	padding-left:5%;
	height: auto;
	background: linear-gradient(#e8e8e8,#cbcbcb);
	border-bottom: solid #333333 2px;
}
#other .faq dt:first-child{
	border-top: solid #333333 2px;
}
#other .faq dt:before{
	font-family: "Font Awesome 5 Free";
content: '\f0a9';
font-weight: 900;
margin-right: 2%;
}

#other .faq dd{
	width:90%;
	padding:5%;
}

#other .faq dd a p{
}

#other .faq dd .toplink {
}


/* ---------------------------------------------------------------------
flow
--------------------------------------------------------------------- */

#flow h3 {
	padding:18px 0px 0px 5%;
	background: #ffc105;
	height: auto;
}
#flow h3:before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;

}


#flow p{
}


#flow .flow_box {
}

#flow .flow_box img {
	width: 21%;
	margin: 2% 2% 2% 0;
}

#flow .flow_box h4{
	width:75%;
}

#flow .flow_box p{
	width:75%;
}


/* ---------------------------------------------------------------------
sitemap
--------------------------------------------------------------------- */

#other .main .sitelist {
	margin-left:5%;
}

#other .main .sitelist li {
}

#other .main .sitelist  a {
}

#other .main .sitelist  a:hover {
}

/* ---------------------------------------------------------------------
company
--------------------------------------------------------------------- */

#other .company table {
	width:98%;
	margin-left: auto;
	margin-right: auto;
}

#other .company th {
	width:23%;
	padding:1%;
}

#other .company td {
	width:73%;
	padding:1%;
}

/* ---------------------------------------------------------------------
privacy
--------------------------------------------------------------------- */

#other .privacy h3 {
}

#other .privacy h4 {
}

#other .privacy p {
}

/* ---------------------------------------------------------------------
contact
--------------------------------------------------------------------- */

#other .contact h3 {
}


/* ---------------------------------------------------------------------
staff
--------------------------------------------------------------------- */

#other .staff h3 {
}


#other .staff .staff_box {
	padding:5% 10%;
}

#other .staff .staff_box img {
	width:25%;
}

#other .staff .staff_box .staff_prof {
	padding:10px 2%;
	width: 71%
}

#other .staff .staff_box .staff_prof p {
}

#other .staff .staff_box .staff_prof .staff_name {
}


/* ---------------------------------------------------------------------
area
--------------------------------------------------------------------- */

#other .area h3 {
	padding:3px 0px 0px 2%;
	background: #ffc105;
	height: auto;
}
#other .area h3:before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#other .area p {
}

#other .area ul {
	width:25%;
	margin:2% 1%;
}

#other .area ul li {
}


/* ---------------------------------------------------------------------
voice
--------------------------------------------------------------------- */

#other .voice p {
}

#other .voice .voice_box {
}

#other .voice .voice_box h3 {
	padding:18px 0px 0px 5%;
	background: #ffc105;
	height: auto;
}
#other .voice .voice_box h3:before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#other .voice .voice_box p {
	padding:0px 5%;
}


/* ---------------------------------------------------------------------
product_x
--------------------------------------------------------------------- */

#product .product_box {
}


#product p {
}

#product .product_box .product_title {
	padding:1%;
	height: auto;
}

#product .product_box .product_title .imgl {
}

#product .product_box .product_title .imgr {
}

#product .product_box .product_title h3 {
	padding:0px 2%;
}

#product .product_box .red {
}


#product .product_box .productlist th {
	padding:3px 1%;
}

#product .product_box .productlist td {
	padding:3px 1%;
}

#product .product_box .productlist .pricered {
}

#product .product_box table caption {
}

#product .product_box .camp_mes {
	padding-top:2%;
}

#product .product_boxl {
	width:48%;
	margin: 1%;
	box-sizing: border-box;
}

#product .product_boxr {
	width:48%;
	margin: 1%;
	box-sizing: border-box;
}

#product .plist {
	width:98%;
}

#product .plist img {
	margin:1% 1% 1% 0px;
}

/* ---------------------------------------------------------------------
point
--------------------------------------------------------------------- */

#other .point p {
}

#other .point .point_box {
}

#other .point .point_box img{
	margin:0px 0px 10px 2%;
}

#other .point .point_box p {
	padding-left:2% ;
}

#other .point .point_box h3 {
	padding:18px 0px 0px 5%;
	background: #ffc105;
	height: auto;
}
#other .point .point_box h3:before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#other .point .point_box ul {
	padding:2% 4%;
}

#other .point .point_box ul li {
}

#other .point .redunder {
}

/* ---------------------------------------------------------------------
service
--------------------------------------------------------------------- */

#other .service p {
}

#other .service .service_box {
}


#other .service .service_box img{
}


#other .service .service_box h3 {
	padding:18px 0px 0px 5%;
	background: #ffc105;
	height: auto;
}
#other .service .service_box h3:before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#other .service .service_box p {
	padding-left:2%;
}

#other .service .service_box .shikaku {
}

#other .service .service_box h4 {
	width:60%;
	padding-left:2%;
}





/* ---------------------------------------------------------------------
case
--------------------------------------------------------------------- */

#case .main .casebox {
	width:90%;
}

#case .main p {
}

#case .main h3 {
	padding:18px 0px 0px 5%;
	background: #ffc105;
	height: auto;
}
#case .main h3 {
content: "\f14a";
font-family: "Font Awesome 5 Free";
margin-right: 1%;
}

#case .main .casebox .case_title h4 {
	width:30%;
}

#case .main .casebox .case_title p {
	width:70%;
}

#case .main .casebox .case_pic {
}

#case .main .casebox .case_pic .case_before{
	width: 40%;
}

#case .main .casebox .case_pic .case_after{
	width: 40%;
}

#case .main .casebox .case_comment {
	padding:1% 2%;
}

#case .main .casebox .case_comment .tantou {
}

#case .main .casebox .case_comment p {
}

#case .casenavi {
}

#case .casenavi td {
}

}

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

/*フォームのみの場合*/
	header .header_box .mail_contact, header .header_box .tel_contact {
		width:100%;
		margin-left:0;
		margin-bottom: 5%;
		float: none;
		text-align: center;
	}
	/*フォームのみの場合　ここまで*/


	.contents{
		width:98%;
		float: none;
		margin-left:auto;
		margin-right: auto;
	}

	aside {
		width:80%;
		max-width: 80%;
		float: none;
		margin-left:auto;
		margin-right: auto;

	}
	aside ul a{
		font-size: 20px;
	}

	#index #rank img{
		display: block;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
		float: none;
		margin-bottom: 2%;
	}
	#product .product_box .productlist th,#product .product_box .productlist td{
		font-size: 3vw;
	}
	#product .product_box .productlist .pricered{
		font-size: 3.5vw;
	}

	#other .service .service_box h4 {
		width:90%;
		padding-left:2%;
	}

#case .main .casebox .case_title h4,#case .main .casebox .case_title p{
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	float:none;
}
footer .corp .footer_corp {
	padding-top: 0;
}

}


@media screen and (max-width:480px) {
	.pctab{
		display: none;
	}

header .header_box .tel_contact,header .header_box .mail_contact,header .header_box .logo{
	margin-left: auto;
	margin-right: auto;
	float: none;
	width: 100%;
	text-align: center;
}
#index #rank {
	display: block;
}
#product .product_boxl,#product .product_boxr {
	width:90%;
	margin: 1% auto;
	float: none;
}

#flow .flow_box img{
	float: none;
	width: 209px;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
#flow .flow_box h4,#flow .flow_box p{
	float: none;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
}

#other .staff .staff_box{
	padding: 1%;
}
#other .staff .staff_box img{
	width: 200px;
	max-width: 90%;
	margin: 3% auto;
	display: block;
	float: none;
}
#other .staff .staff_box .staff_prof{
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	float: none;
	padding: 1%;
}

#other .company th,#other .company td{
	width: 95%;
	display: block;
	margin-left:auto;
	margin-right:auto;
}

}
@media screen and (max-width:766px) {
	footer .copyright {
		padding-bottom: 16vw;
	}

}