@charset "utf-8";

/*共通*/
html {
	scroll-behavior: smooth;
}

.outer {
	width: 100%;
	overflow: hidden;
}

.inner {
	width: 100%;
	padding: 10px;
}


/*header*/
header.outer {
	border-bottom: 1px solid #eee;
	height: 70px;
	background-color: #fff;
}

#headerblock .inner {
	position: relative;
}

header h1 {
	line-height: 90px;
	margin-left: 60px;
	font-weight: bold;
	font-size: 26px;
	color: #666;
	background-image: url(../image/goodbikeparking.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left 5% top 18%;
	width: 200px;
	text-indent: 1000px;
}

header h1::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	content: "";
	background-image: url(../image/gmark.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	height: 50px;
	width: 50px;
}

header span {
	position: absolute;
	margin-left: 60px;
	font-weight: bold;
	color: #666;
}

/* .header_mail,
.header_tel{
} */

.header_mail a,
.header_tel a {
	font-size: 16px;
	font-weight: bold;
	margin-left: 10px;
	background-color: #629433;
	color: #fff;
	border-radius: 5px;
	padding: 5px;
margin: 5px;
line-height: 40px;
width: 100%;
width: calc( 100% - 10px);
display: block;
text-align: center;
}


/* footer */

#foot .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#footer01.inner {
	border-top: 2px solid #629433;
	margin-top: 50px;
	padding-top: 50px;
}

#goodlife {
	width: 100%;
	padding: 15px;
	text-align: center;
}

#goodlife img {
	max-width: 200px;
	margin-bottom: 30px;
}

#footernav {
	display: none;
	padding: 15px;
}

#footernav li a {
	line-height: 40px;
	position: relative;
}

#footernav li a::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .4s;
}

#footernav li a:hover::after {
	transform-origin: left top;
	transform: scale(1, 1);
}

#glfootaddress {
	width: 100%;
	text-align: center;
	padding: 15px;
	line-height: 30px;
}

#copy {
	margin: 20px 0px;
}

/***トップへ戻るボタン***/

#page-top {
	position: fixed;
	bottom: 50px;
	right: 20px;
	font-size: 77%;
	z-index: 999;
}

#page-top a {
	background: #666;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}

#page-top a:hover {
	text-decoration: none;
	background: #999;
}




/***トップへ戻るボタンここまで***/

/* hamburgerここから */
/* inputを非表示 */
.input-hidden {
	display: none;
}

/* label */
.hamburger-switch {
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 5px;
	/* ハンバーガーアイコンの位置（上から） */
	z-index: 9999;
	width: 4em;
	/* アイコン（クリック可能領域）の幅 */
	height: 4em;
	/* アイコン（クリック可能領域の）高さ */
	background-color: rgba(255, 255, 255, 0.8);
	position: fixed;
}

/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger:checked~.hamburger-switch {
	position: fixed;
}

/* ハンバーガーアイコン */
.hamburger-switch-line1,
.hamburger-switch-line1:before,
.hamburger-switch-line1:after {
	width: 35px;
	height: 2px;
	background: #333;
	/* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}

.hamburger-switch-line1 {
	transform: translate(-50%, -50%);
}

.hamburger-switch-line1:before {
	transform: translate(-50%, -600%);
}

.hamburger-switch-line1:after {
	transform: translate(-50%, 500%);
}

/* ハンバーガーアイコン･アニメーション */
#hamburger:checked~.hamburger-switch .hamburger-switch-line1 {
	width: 0;
}

#hamburger:checked~.hamburger-switch .hamburger-switch-line1:before {
	transform: rotate(45deg) translate(-20%, 325%);
}

#hamburger:checked~.hamburger-switch .hamburger-switch-line1:after {
	transform: rotate(-45deg) translate(-20%, -325%);
}

/* メニューエリア */
.hamburger-menuwrap {
	position: fixed;
	height: 100%;
	background: #fafafa;
	/* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll;
	/* メニュー内容が多い場合に縦スクロールする */
	top: 0;
	left: 100%;
	width: 70%;
}

/* メニューリスト */
.hamburger-menulist {
	margin-right: 3%;
	padding-left: 5% !important;
	/* !important不要な場合もあり */
	list-style: none;
}

.hamburger-menulist li a {
	text-decoration: none;
	color: #333;
	/* メニューリストの文字色 */
	display: block;
	padding: .5em 0;
	position: relative;
}
.hamburger-menulist li a::before{
	content: "";
	background-image: url(../image/icon/bikepng.png);
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	top: 9px;
	left: -20px;
}
.hamburger-menulist li a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #7bb021;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .4s;
}

.hamburger-menulist li a:hover::after {
	transform-origin: left top;
	transform: scale(1, 1);
}


/* メニューエリア･アニメーション */
/* 右から */
#hamburger:checked~.hamburger-menuwrap {
	left: 30%;
}

/* コンテンツカバー */
#hamburger:checked~.hamburger-cover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3, 3, 3, .5);
	display: block;
}

/* mainimage */
#mainimage {
	width: 100% ;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	background-size: auto 100%;
}
#mainimage #pc{
	display: none;
}
#mainimage #mainimg img{
	width: 100%;
}
#leoxgbp{
	text-align: center;
	margin-left: 10px;
}
#leoxgbp span{
	color:#7BB021;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff,
	-1px 1px 0 #fff,
	1px -1px 0 #fff,
	-1px -1px 0 #fff;
	margin: 0px 0px; 
	vertical-align:top;
}
img#gbplogo{
	margin-bottom: 7px;
	width: 200px;
	height: 20px;
}

#leologo{
	width: 120px;
	height: 41px;
}

#mainimage .inner #leoxgbptext{
	color: #7BB021;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff,
	-1px 1px 0 #fff,
	1px -1px 0 #fff,
	-1px -1px 0 #fff;
	margin: 35px 0px; 
	text-align: center;
}
/* content */

#todetail{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	border: 1px solid #ccc;
	padding: 10px;
	margin-top: 10px;
}
#todetail dt{
	width: 100%;
	background-color: #7BB021;
	text-align: center;
	border-radius: 5px;
	color: #fff;
	margin-bottom: 10px;
}
#todetail dd a{
	width: 70px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	color: #fff;
	font-weight: bold;
display: block;
	background-color: #7BB021;
	border-radius: 50%;
}
#todetail dd a:hover{
	background-color: #56810a;
}
/* #tolist{
	border: 1px solid #000;
	width: 100%;
	display: block;
	text-align: center;
	margin-top: 10px;
	padding: 40px;
	font-size: 18px;
}
#tolist::before,
#tolist::after
{
	content: "▼";
}
#tolist:hover,
#tolist:hover::before,
#tolist:hover::after{
	background-color: #629433;
	color: #fff;
} */
#off{
	font-weight: bold;
	font-size: 22px;
	text-align: center;
	line-height: 50px;
	padding-top: 25px;
	color: #fff;
	height: 150px;
	background-color: #000;

}

#content {
	position: relative;
	line-height: 40px;
	z-index: 600;
}

#content h1 {
	background-color: #7BB021;
	color: #fafafa;
	font-weight: bold;
	font-size: 18px;
	line-height: 50px;
	height: 50px;
	margin: 40px 0px;
	margin-top: 100px;
	width: 100%;
	position: relative;
	border-radius: 15px;
	text-align: center;
}

#content section {
	width: 100%;
}

#content article {
	/* background-color: aliceblue; */
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
}

.content_text {
	font-weight: bold;
	font-size: 18px;
	line-height: 35px;
}

#content article img {
	width: 100%;
}

#content h2 {
	margin: 20px 0px;
	background-color: #7bb021be;
	color: #fafafa;
	padding: 10px;
	font-size: 24px;
}

#content h3 {
	font-weight: bold;
	text-align: center;
	color: #2F75C0;
	font-size: 18px;
}

#content img {
	max-width: 100%;
	height: auto;
}





#s-3 article {
	width: 100%;
	display: block;
}

#s-3 #plist {
	display: flex;
	flex-wrap: wrap;
}

#s-3 #plist .boxv {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin: 5px;
	margin-bottom: 40px;
}

.boxv dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.boxv dt.p_name {
	width: 100%;
	height: 80px;
	line-height: 80px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background-color: #7BB021;
	border-bottom: none;
	margin-top: 100px;
	margin-bottom: 10px;
	color: #fff;
	border-radius: 5px;
}

/* .boxv dt.p_name::before{
	content: "";
	background-image: url(../image/icon/bikepng.png);
	background-repeat: no-repeat;
	display: block;
	width: 48px;
	height: 48px;
} */

.boxv .pdetail{
	padding: 30px 5px 10px 5px;
}
.boxv .pdetail dt {
	width: 30%;
	/* width: calc(30% - 0px); */
	text-align: right;
	padding-right: 5px;
	border-bottom: 1px solid #ccc;
}

.boxv dt.p_name::after {
	content: "";
}

.boxv dt::after {
	content: " :";
}

.boxv .pdetail dd {
	width: 70%;
	border-bottom: 1px solid #ccc;
}

.boxv dd.pnm{
	width: 100%;
	display: block;
}

.boxv dd.pnm2{
	width: 50%;
	padding: 2px;
}

.boxv dd.pdetail{
	
	width: 100%;
}

/* 詳細 条件 */
.detailbox {
	width: 100%;
}

.detailbox dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.detailbox dt.p_name {
	width: 100%;
	text-align: center;
	background-color: cornsilk;
	border-bottom: none;
}

.detailbox dt {
	width: 30%;
	width: calc(30% - 2px);
	text-align: right;
	padding-right: 5px;
	border-bottom: 1px solid #ccc;
}

.detailbox dt.p_name::after {
	content: "";
}

.detailbox dt::after {
	content: " :";
}

.detailbox dd {
	width: 70%;
	border-bottom: 1px solid #ccc;
}

#plist .detailq a {
	padding: 15px;
	background-color: darkorange;
	border-radius: 5px;
	color: #fff;
	width: 100%;
	display: block;
	text-align: center;
	font-weight: bold;
	position: relative;
}

#plist .detailq a:hover {
	background-color: rgba(255, 140, 0, 0.76);
}
#plist .detailq a::before{
	content: "";
	background-image: url(../image/icon/mailw.png);
	height: 32px;
	width: 32px;
	display: block; 
	position: absolute;
}
/* 会社概要 about */
#about {
	display: flex;
	flex-wrap: wrap;
}

#about dl {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #ddd;
	line-height: 60px;
}

#about dt {
	width: 20%;

}

#about dd {
	width: 80%;
}

#access {
	width: 100%;
}

#access dl {
	border-bottom: none;
}

#access h3 {
	width: 100%;
	text-align: left;
	border-bottom: 2px solid #2f75c0;
	color: #2f75c0;
}

#access dl {
	line-height: 40px;
	margin-top: 30px;
}

#map {
	width: 100%;
	display: flex;
	justify-content: center;
}

#map img {
	max-width: 701px;
	margin: 50px auto;
}

/* detail */
#saiin,
#rakusai,
#rakuhoku,
#nagitsuji,
#takaragaike {
	display: flex;
	flex-wrap: wrap;
}

#saiin img,
#rakusai img,
#rakuhoku img,
#nagitsuji img,
#takaragaike img {
	width: 100%;
}

/* お問合せ */
.formTable{
	
	width: 100%;
}
.formTable tr{
	display: flex;
	flex-wrap: wrap;
}
.formTable th{
	width: 100%;
	text-align: left;
background-color:#7BB021;
padding: 5px;
}
.formTable th.required::after{
	content: "必須";
	color: red;
	margin-left: 10px;
}
.formTable td{
	width: 100%;
	padding: 10px;
	background-color: rgba(191, 253, 205, 0.308);
}

.thankyou .inner{
	display: flex;
	justify-content: center;

}
.thankyou .inner p{
	margin-top: 300px;
	margin-bottom: 200px;
}
textarea{
	width: 100%;
}
@media screen and (min-width: 769px) {
	/*	▼▼▼タブレット(769px以上)▼▼▼ ----------------------------------------------------------------- */

	#s-3 #plist .boxv .pnm,
	#s-3 #plist .boxv .pnm2,
	#s-3 #plist .boxv .pdetail{
		width: 50%;
	}

	/* detail */
	.detailimg {
		width: 50%;
		text-align: center;
	}

	/* mainimage */
	#mainimage {
	
		/* height: 600px; */
	}
	#mainimage #pc{
		display: block;
	}
	#mainimage #sp{
		display: none;
	}
	#mainimage .inner #leoxgbp{
		position: absolute;
		padding: 5px;
		background-color: rgba(253, 248, 219, 0.767);
	}
	/*	▲▲▲タブレット▲▲▲ ----------------------------------------------------------------- */
}

@media screen and (min-width: 961px) {
	/*	▼▼▼小PC(961px以上)▼▼▼ ----------------------------------------------------------------- */

	header h1 {
		background-position: left 5% top 25%;
	}

	/*header*/
	header.outer {
		height: 100px;
		position: fixed;
		z-index: 9997;
	}

	header h1 {
		line-height: 100px;
	}

	header h1::before {
		width: 240px;
	}

	header h1::before {
		left: -80px;
		top: 25px;
	}

	header span {
		top: 25px;
	}

	.header_mail,
	.header_tel {
		font-size: 20px;
		position: fixed;
		right: 0px;
		top: 120px;
		z-index: 9997;
		background-color: none;
		padding: 5px 10px;
		border-radius: 5px 0px 0px 5px;
		width: 45px;
		background-color: rgba(153, 153, 153, 0.1);
		transition: 0.3s ease-in-out;
	}

	.header_tel {
		top: 190px;
	}

	.header_mail:hover,
	.header_tel:hover {
		width: 240px;
		background-color: rgba(153, 153, 153, 0.3);
	}

	.header_mail a,
	.header_tel a{
		color: #000;
		font-weight: bold;
		border: 1px solid rgba(255, 255, 255, 0.322);
		background-color: rgb(255, 255, 255);
		border-radius: 3px;
		margin: 5px;
		width: 210px;
		display: block;
		line-height: 40px;
		padding-left: 30px;
		position: relative;
		line-height: 30px;
	}

	#mail::before {
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url(../image/icon/mail_24.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 6px;
		left: 2px;
	}

	#tel::before {
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url(../image/icon/smartphone2_24.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 6px;
		left: 2px;
	}



	/* ハンバーガー */
	.hamburger-menubox label {
		display: none;
	}
	.hamburger-menulist li a::before{
		top: 42px;
		left: -20px;
	}
	/* footer */
	#foot .outer {
		display: flex;
		justify-content: space-around;
		margin-bottom: 50px;
	}

	#foot .inner {
		width: 961px;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	#goodlife {
		width: 33%;
	}

	#footernav {
		display: block;
		width: 33%;
		border-left: 1px solid #ddd;
		padding-left: 50px;
	}

	#glfootaddress {
		width: 33%;
		border-left: 1px solid #ddd;
	}

	#footernav {
		display: block;
	}

	/* メニューエリア･アニメーション */
	/* 右から */
	.hamburger-menuwrap {
		height: 90px;
		width: 70%;
		left: auto;
		right: 0px;
		overflow: visible;
		background-color: #fff;
		padding: 0px;
	}

	/* コンテンツカバー */
	.hamburger-cover {}

	.hamburger-menulist {
		display: flex;
		flex-wrap: wrap;
		justify-content: right;
	}

	.hamburger-menulist li a {
		font-weight: bold;
		line-height: 90px;
		margin: 0px 20px;
	}

	.hamburger-menulist li a::after {
		bottom: 30px;
		height: 5px;
	}


	/* mainimage */
	#mainimage {
		/* height: 800px; */
	border-bottom: 70px solid #7bb021be;;
	padding-top:100px ;
	display: flex;
	justify-content: center;
	overflow: visible;
	/* background-image: url(../image/home/mainimage/gbpmainimage.jpg); */
	background-position: center;
	}

	#mainimage .inner #leoxgbp {
		/* color: #fff;
	text-align: center;
	font-size: 55px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000,
	-1px 1px 0 #000,
	1px -1px 0 #000,
	-1px -1px 0 #000;
	margin: 35px 0px; */
	}

	#mainimage .inner #leoxgbptext {
		/* color: #fff;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000,
	-1px 1px 0 #000,
	1px -1px 0 #000,
	-1px -1px 0 #000; */
	}


	/* content */

	#content {
		padding-top: 60px;

		position: relative;
	}

	#content.outer {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

	}

	#content .inner {
		width: 961px;
	}

	#content .l_area {
		width: 50%;
		width: calc(50% - 5px);
		margin-right: 5px;
	}

	#content .r_area {
		width: calc(50% - 5px);
		margin-left: 5px;
	}


	/* 会社概要 about */
	#about {
		display: flex;
		flex-wrap: wrap;
	}

	#about dl {
		width: 100%;
		display: flex;
		/* flex-wrap: nowrap; */
	}

	#about dt {
		/* width: 100%; */
		text-align: right;
	}

	#about dd {
		/* width: 100%; */
		padding-left: 40px;
	}

	/*	▲▲▲小PC▲▲▲ ----------------------------------------------------------------- */
}

@media screen and (min-width: 1281px) {
	/*	▼▼▼大画面PC(1281px以上)▼▼▼ ----------------------------------------------------------------- */

	/* footer */

	#foot .inner {
		width: 1281px;
	}

	/* content */
	#content .inner {
		width: 1281px;
	}

	/*	▲▲▲大画面PC▲▲▲ ----------------------------------------------------------------- */
}