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

* {
	line-height: 1.5;
	font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
}

body {
	color: #1d1d1f;
}

.wrap {
	width: 100%;
}
.underbar-gra::after {
    content: '';
    display: block;
    margin: 2.4rem auto 0;
    width: 65px;
    height: 2px;
    background:rgb(100,165,49);
	background:-moz-linear-gradient(left,);
	background:-webkit-linear-gradient();
}

.underbar-orange-top::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    width: 6.5rem;
    height: 4px;
    background:#B3D300;
}

.underbar-orange::after {
    content: '';
    display: block;
    margin: 24px auto 0;
    width: 6.5rem;
    height: 2px;
    background:#B3D300;
}

.underbar-blue-top::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    width: 6.5rem;
    height: 4px;
    background:#B3D300;
}

.sidebar-blu {
	border-left: solid 2px green;
}

.sidebar-ora {
	border-left: solid 2px orange;
}

.fc-orange {
	color: #FCB30B;
}

.fc-blue {
	color: #00BAFF;
}

.header-space {
	height:8.8rem;
}

.bg-gray {
	background-color:rgb(239,239,239);
}

.bg-white {
	background-color: #fff;
}


header {
	width: 100%;
	height: 8.8rem;
	position: fixed;
	top: 0;
	z-index: 100;
  background: rgba(255,255,255,0.8);
}

#nav-drawer {
	display:none;
}

.header-colorbar {
	height: 0.4rem;
	background:green;
	background:-moz-linear-gradient(left,);
	background:-webkit-linear-gradient();
}

.header-container {
	margin: 0 auto;
	width: 92%;
	height: 8.4rem;
	display: flex;
	justify-content:space-between;
	align-items: center;
}

.header-logo {
	width: 152px;
	height: 80px;
	background-image:url("../image/logo.svg");
	background-size: contain;
	bacground-position: center;
	background-repeat: no-repeat;
}

.header-catch {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333333;
		line-height: 1;
}

.header-company {
    font-size: 4.0rem;
    font-weight: 900;
    letter-spacing: 0.2rem;
    color: #333333;
    line-height: 1;
}

.header-tel {
    font-size: 2.4rem;
    font-weight: bold;
    color: rgb(33,109,54);
}

.header-fax {
    font-size: 1.6rem;
    font-weight: bold;
    color: rgb(33,109,54);
		line-height: 1;
}

nav {
	width: 60%;
	max-width: 572px;
}

.gnav {
	display: flex;
	justify-content: space-around;
	height: 8.4rem;
	font-size: 1.6rem;
}

.nav-parent {
	width: 33%;
	line-height: 8.4rem;
}

.nav-menu {
	display:block;
	height: 8.4rem;
	line-height: 8.4rem;
	text-align: center;
}

.nav-menu, .nav-child > li > a {
	color: #333333;
	font-weight: bold;
}

.nav-child li {
	height: 0rem;
	overflow: hidden;
	transition: 0.2s;
}

.nav-child li a {
	display: block;
	height: 4.0rem;
	line-height: 4.0rem;
	background: #fff;
	border-top: 0.5px solid gray;
	font-size: 1.2rem;
}

.nav-parent:hover .nav-child li {
	overflow: visible;
	height: 4.0rem;

}

.content {
	width: 100%;
	padding: 5.6rem 0 10.2rem 0;
}

.heading {
	margin: 0 0 4.8rem 0;
	text-align: center;
	font-size: 2.0rem;
	font-weight: bold;
}

.catch {
	margin: 0 0 3.2rem 0;
	font-size: 4.4rem;
	font-weight: bold;
}

.article {
	margin: 0 0 4.8rem 0;
	font-size: 2.0rem;
	line-height: 1.6;
}

.container {
	width: 90%;
	max-width: 959px;
	margin: 0 auto;
}

.pc-bar {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    background: rgba(80,80,80,0.9);
}

.pc-barcontainer {
    margin: 0 auto;
    font-size: 2.4rem;
		font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 1240px;
}

.pc-barcontainer > a {
		width: 50%;
		text-align: center;
		padding: 2.4rem 0;
		color: rgb(100,165,49);
}

.border-left {
	border-left: 2px solid gray;
}

.form {
	background: gray;
	color: #fff;
}

.form p {
	font-size: 1.6rem;
}

.tel-to {
	display: block;
	width: 70%;
	margin: 0 auto 2.4rem;
	border: solid 1px #fff;
	padding: 8px 8px;
	font-size: 2.4rem;
	color: #fff;
}

.form-icon-container {
	display: flex;
	margin: 3.2rem 0 0 0;
	justify-content: space-around;
	align-items: center;
}

.form-icon-container-btw {
	width: 16%;
}

.mail-icon, .tel-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16%;
	border-radius: 50%;
	color: green;
}

.mail-icon::before, .tel-icon::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.mail-icon {
	background: #fff;
}

.tel-icon {
	background: #fff;
}

.fa-envelope,.fa-phone {
	color: #B3D300;
	font-size: 5.6rem;
}

.snsbtn {
	display: block;
	margin: 0 auto;
	width: 40%;
	height: 3.2rem;
	line-height: 3.2rem;
	border: solid 1px #000;
	border-radius: 1.6rem;
	text-align: center;
	font-size: 1.6rem;
	color: #000;
}

.snsbtn-container {
	display: flex;
	width: 100%;
	padding: 3.2rem 0 0 0;
	justify-content: space-between;
	align-items: center;
}

.sns ul {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	margin: 4.8rem 0;
}
.sns ul li {
	width: 23%;
	border: solid 1px #000;
}

.sns ul li::before {
	content: "";
	display: block;
	padding-top: 100%;
}

footer {
	padding: 24px 0 0 0;
	background: #F7F7F7;
	padding-bottom: 120px;
}

.footertop {
	padding: 1.6rem 0;
	display:flex;
	justify-content: space-between;
	border-bottom: solid 1px #000;
}

.footertop-btn {
	padding: 4px 16px;
	display: block;
	background: gray;
	color:#fff;
	font-size: 1.6rem;
}

.footertop-pagetop {
	padding: 4px 16px;
	display: block;
	color: gray;
	font-size: 1.2rem;
}

.footermiddle{
	padding: 1.6rem 0;
	margin: 0 0 1.6rem 0;
	display:flex;
	justify-content: space-between;
	font-size: 1.2rem;
}

.footermiddle > ul > li, .footermiddle > ul > li > a{
	color: #000;
}

.footermiddle ul {
	width: 33%;
}

.footermiddle li{
	margin: 0 0 0.8rem 0;
}

.footerbottom {
	margin-bottom: 3.2rem;

}

.footer-sns {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.6rem;
}

.footer-sns li {
	margin: 0 8px;
}

.youtube-icon {color: #ff0000;}
.facebook-icon {color: #4267b2;}
.instagram-icon {color: black;}

.footerlogo {
	display: inline-block;
	margin: 0 1.6rem 0 0;
	width: 114px;
	height: 60px;
	background-image:url("../image/logo.svg");
	background-size: contain;
	bacground-position: center;
	background-repeat: no-repeat;
}

.company-info {
	display: inline-block;
	font-size: 1.2rem;
}

.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 0;
	background: gray;
	color: #fff;
	width: 100%;
}

.sp-display {
		display: none;
	}

.ul-orange {
	background:linear-gradient(transparent 80%, #FFDA84 0%);
	}

.ul-black {
	background:linear-gradient(transparent 85%, #FFDA84 0%);
	}

/*ipad縦以下*/
@media screen and (max-width: 1024px) {

	nav {
		display: none;
	}

	.heading {
		margin: 0 0 2.8rem 0;
	}

	.header-space {
	height: 6.4rem;
}

	header {
	height: 6.4rem;
}

.header-colorbar {
	height: 0.2rem;
}

.header-container {
	width: 100%;
	height: 6.2rem;
}

.header-catch {
    font-size: 1.2rem;
		line-height: 1;
}

.header-company {
    font-size: 2.0rem;
    letter-spacing: 0.2rem;
    line-height: 1;
}

.gnav {
	height: 6.2rem;
}

.nav-parent {
	line-height: 6.2rem;
}

.nav-menu {
	height: 6.2rem;
	line-height: 6.2rem;
}



	/*ハンバーガーアイコン*/
#nav-drawer {
  position: relative;
	display: block;
}

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

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
	position: fixed;
  width: 8.0rem;
  right: -20px;
  vertical-align: middle;
  cursor: pointer;
  float: left;
    background-color: #fff;
    z-index: 10000;
    opacity: 0.9;
}

/*ハンバーガーアイコンをCSSだけで表現*/
.top, .middle, .bottom {
  position: absolute;
  height: 2px;/*線の太さ*/
  width: 48px;/*長さ*/
  border-radius: 3px;
  background: #333333;
  display: inline-block;
  content: '';
    top: calc(50% - (1px / 2));
    transition: .3s;
}

.top {
    transform: translate(0, -11px);
}

.middle {

}
.bottom {
    transform: translate(0, 11px);
}



/*閉じる用の薄黒カバー*/
#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;
  cursor: pointer;
}


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

  /*以下オリジナル*/
	opacity: 0.9;
}

#nav-content ul {
	width: 100%;
	margin-bottom: 4.0rem;
	margin-left: 2.0rem;
	text-align: left;
}

	#nav-content > ul > li {
		font-size: 1.8rem;
		color: #1d1d1f;
	}

	#nav-content > ul > li > a {
		font-size: 1.8rem;
		color: #1d1d1f;
	}

.nav-sns{
	display: flex;
	width: 240px!important;
	margin:0 auto!important;
	justify-content: space-around;
	align-items: center;
	font-size: 3.2rem!important;
}




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

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

#nav-input:checked ~ #nav-open .middle {
        opacity: 0;
    }

#nav-input:checked ~ #nav-open .top {
        transform: rotate(-45deg) translateY(0px);
    }

#nav-input:checked ~ #nav-open .bottom {
        transform: rotate(45deg) translateY(0px);
    }


	.snsbtn-container {
		flex-direction: column;
	}

	.snsbtn {
		width: 60%;
	}

	.tel-to {
		font-size: 2.0rem;
	}

	.facebook {
		margin: 0 0 3.2rem 0;
	}

	.fa-envelope,.fa-phone {
		font-size: 3.2rem;
	}

	.catch {
		font-size: 2.8rem;
	}

	.pc-display {
		display:none;
	}

	.sp-display {
		display: block;
	}

	.pc-barcontainer {
	    font-size: 1.6rem;
	}

	.pc-barcontainer > a {
			padding: 1.6rem 0;
	}

}

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

	.catch {
		font-size:2.4rem;
	}

	.header-logo {
		width: 75px;
		height: 60px;
	}

	.header-tel {
		display: none;
	}

	.header-fax {
		display: none;
	}

	.header-catch {

	}

	#nav-content {
		width: 100%;
	}

	.article {
	    margin: 0 0 4.0rem 0;
	    font-size: 1.6rem;
	    line-height: 1.5;
	}

	.footermiddle{
		flex-direction: column;
	}

	.footermiddle ul{
		width: 100%;
		margin-bottom: 2.4rem;
	}

}