@charset "utf-8";

/* ========== すべて共通 ========== */
html, body {
	font-size: 16px;
	font-family: sans-serif;
	color: #393939;
	background: #f5f4f4;
}
body, div, p, h1, h2, h3, h4, ul, figure {
	margin:0;
	padding: 0;
}
p, td, th, li {
	line-height: 1.8;
}
img {
	width: 100%;
	height: auto;
}

a {
	color: #709a00;
}

a:hover {
	color: #95cd00;
}
a:active {
	color: #4b6700;
}
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}
/* 共通の見出し */
main h1 {
	padding-bottom: 10px;
	color: rgb(29,164,101);
	border-bottom: 1px dashed rgb(29,164,101);
	font-size: 1.6rem;
	margin-top:70px;
}
body{
	border-top:6px solid #1DA465;
}
.container {
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1100px;
}
@media screen and (min-width: 768px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ========== ヘッダー ========== */

header {
	height: 55px;
	align-items: center;
	padding: 0;
	position: relative;
	z-index: 100;
}

@media screen and (min-width: 768px) {
	header {
		height: 75px;
	}
}

@media screen and (min-width:800px){
	header {
		margin-right:50px ;
		margin-left:50px;
		height: 75px;
	}
}
.header-inner {
	/*display: flex;*/
	margin: 0;
	justify-content: space-between;
	align-items:flex-start;
}


.header-logo {
	margin: 0;
	float:left;
	padding:0;
	height: 50px;
	width: 150px;
	
}
.header-logo:hover{
	opacity: 0.7;
}

/*
.menu-btn {
	padding: 0;
	float: right;
	margin-top:15px;
	margin-right: 10px;
	border-radius: 4px;
	width: 40px;
	height: 40px;
	background: url(../img/hamburger.png) no-repeat center center;
	background-size: contain;
}

/*ハンバーガー*/



.menu-btn {
  position: absolute;
	right: 15px;
	top:10px;
  width: 40px;
  height: 35px;
  cursor: pointer;
}
.menu-btn div{
	position: relative;
}
.menu-btn span {
  position: absolute;
  width: 100%;
  border-bottom: solid 3px #999;
  -webkit-transform:.45s ease-in-out;
  -moz-transform:.45s ease-in-out;
  transform:.45s ease-in-out;
  /*background-color: #867683;
  border-radius: 1.5px;*/
}
.menu-btn span:nth-child(1) {
  top: 0;
}
.menu-btn span:nth-child(2) {
  top: 15px;
}
.menu-btn span:nth-child(3) {
  top:30px;
}

.open .menu-btn span:nth-child(1){
  top:15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.open .menu-btn span:nth-child(2),
.open .menu-btn span:nth-child(3){
  top:15px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
}
/*
.menu-btn{
	float:right;
	margin-right: 0px;
}


/*ハンバーガーここまで*/

@media screen and (min-width: 768px) {
	
	.header-logo {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 250px;
	}
	.menu-btn {
		display: none;
	}
	
	
 
}

/* ========== ナビゲーション ========== */

.nav {
	position: relative;
	width: 100%;
	float: right;
	background-color: #1DA465;
	z-index: 11;
	}

.navbar {
	display: none;
	list-style-type: none;	
}

.navbar a {
	text-align: center;
	display: block;
	padding: 1rem 0;
	color:white;
	border-bottom: double 1px #F5F4F4;
	position: relative;
	text-decoration: none;
	
	
	/*
  display: inline-block;
*/
}

.navbar a::after{
  position: absolute;
  bottom: 18px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background:white;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .3s;
}

.navbar a:hover::after {
  transform: scale(1, 1);
}

@media screen and (min-width: 768px) {
	.nav {
	background-color:  #F5F4F4;
		float: right;
		width: auto;
		margin: 0 ;
		padding: 0;
		z-index: 0;
	}
	.navbar{
		margin: 0;
		padding: 0;
		display:block;
		display: flex !important;
		justify-content: space-around;
	}
	.navbar a{
		color: #867683;
		float: right;
		padding: 1.8rem 0;
		bottom:5px;
		margin:0 32px ;
	}
	.navbar a::after{
		background:#1DA465;
}
}

	/* ========== メインエリア基本レイアウト ========== */
main {
	padding-top:5px;
	padding-bottom: 50px;
	background: #F5F4F4;
}

@media screen and (min-width: 768px) {
	main {
		/*padding-left: 30px;
		padding-right: 30px;*/
		padding-top:10px;
		
	}
}

/* ========== フッター ========== */
footer {
	background: rgb(29,164,101);
	font-size: 0.9rem;
	color: #fff;
}
.footer-container {
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer-nav {
	list-style-type: none;
}
.footer-nav li {
	display: inline;
	padding: 0 1rem 0 0;
}
.footer-nav a {
	color: #fff;
	text-decoration: none;
}
.footer-nav a:hover {
	opacity: 0.5;
}
/*==============top-icon=================*/
#pagetop {
    position: fixed;
    bottom: 50px;
    right: 10px;
	width: 50px;
	text-align: center;
}

#pagetop a{
	text-decoration: none ;
	color: #867683;
}
@media screen and (min-width: 768px) {
	#pagetop a:hover{
　 opacity: 0.7;
	}
	#pagetop{
　　 bottom: 80px;
    right: 80px;
	width: 100px;
	}
}

/* ========== index トップページ ========== */
/*スライドショー*/
.home-keyvisual{
	position: relative;
	z-index: 1;
}

 .sp{
	display: block !important;
}
 .pc{
	display: none !important;
}


.bxslider img{
	border-radius: 5px;
}

/* キャッチコピー */
.home-maincopy {
	text-align: center;
	font-size: 1.8rem;
	font-family: serif;
}

.home-maincopy strong {
	color: #E3007F;
}

@media screen and (min-width: 768px) {
	.home-maincopy {
		font-size: 3rem;
	}
	
	.sp{
		display: none !important;
	}
	.pc{
		display: block !important;
	}
	
}

.home-color1 {
	color: rgb(254,166,32);
}
.home-color2 {
	color: #009EF8;
}
.home-color3 {
	color:#1DA465;
}
.home-color4 {
	color: #E3007F;
}

/* 見出し */
.home-h2 {
	padding-bottom: 10px;
	margin: 30px 0 10px 0;
	color: rgb(93,153,53);
	border-bottom: 1px dashed rgb(93,153,53);
	font-size: 1.6rem;
	margin-top:70px;
}

/* about */
.home-about{
	padding: 30px;
	border-radius: 10px;
	background: #fff;
}
.home-h3{
	padding: 10px 0;
}

/* news*/
.home-news {
	display: flex;
	flex-flow: column;
}
.home-news li {
	flex:  1 1 auto;
	padding:7px;
	margin: 10px;
	border: solid 5px #fff;
	list-style-type: none;
	background: #fff;
}
.news-p{
	padding: 10px 0;
}
/* 画面幅が広い（タブレット・パソコン向け） */
@media screen and (min-width: 768px) {
	.home-news {
		flex-flow: row;
	}
	.home-news li{
		width: 25%;
		margin: 10px 5px;
	}
}

.home-news a {
	color: #393939;
	text-decoration: none;
}
.home-news figure:hover {
	opacity: 0.5;
}
.home-news figcaption {
	padding: 15px 0;
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
}


/* paint*/
.home-paint {
	display: flex;
	flex-flow: column;
	margin-top: 10px;
}
/*
.home-paint li {
	flex:  1 1 auto;
	margin: 5px;
	border: solid 5px #fff;
	list-style-type: none;
	background: #fff;
}
*/
.paint-p{
	padding: 10px 0;
}
/* 画面幅が広い（タブレット・パソコン向け） */
/*
@media screen and (min-width: 768px) {
	.home-paint {
		flex-flow: row;
	}
	.home-paint li{
		width: 30%;
	}
}

.home-paint a {
	color: #393939;
	text-decoration: none;
}

}
*/
.paint-list h3 {
	padding: 10px 0;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}

.paint-cap{
	font-size: 0.9rem;
}

.home-paint1{
	margin-bottom:30px;
	
}

/* ========== about 青年部について ========== */
/* 青年部について*/

.about-img{
	background-image: url(../img/about/about-top.jpg) ; 
	border-radius: 5px;
	clear: both;
	margin-top:10px; 
}
.about-text {
	margin-top:20px;
	text-align: center;
	padding:50px 20px;
	font-weight: 200;
	}
.about-text p{
	font-weight: 500;
}
.about-h2{
	margin-bottom: 10px;
	font-weight: bold;
}
.about-h3{
	margin-bottom: 10px;
}
/*
.about-bucho{
	padding-top: 50px;
}
*/
.about-bucho h2{
	margin-bottom: 10px;
	
}
.about-message{
	display:flex;
	flex-flow:column;
}
@media screen and (min-width:768px){
	.about-message{
	flex-flow:row;
}
	.about-text {
		padding:50px 100px;
	}
}
.message-text{
	flex:1 1 auto;
}
.message-img{
	flex:0 0 300px;
	width: 65%;
	margin: 0 auto;
	margin-top:10px;
}

.bucho-name{
	margin-top:20px;
	font-weight: 600;
}
.about-message h3{
	margin-bottom: 10px;
}


@media screen and (min-width:768px){
	.message-text{
	flex:1 1 auto;
	margin-right:30px;
}

	.about-bucho{
	padding-top: 50px;
}
}



.gaiyou h1{
	margin-bottom: 10px;
}

.gaiyou ul{
  list-style: none;
	margin-top:30px;
}
.gaiyou li{
	border-bottom: 1px dashed black;
	margin-bottom: 5px;
}

/* ========== member ========== */
.member-phot{
	background-image: url(../img/member/member.jpg);
	border-radius: 5px;
	clear: both;
	margin-top:10px;
}
.member-text{
	text-align: center;
	padding:70px;
	}
.member-text h2{
	margin-bottom: 10px;
}
.member-h3{
	margin-bottom: 10px;
}
.btn{
	display: flex;
	flex-flow:column;
	margin-top: 50px;
}
@media screen and (min-width:768px){
	.btn{
	flex-flow:row;
	width: auto;
	}}

.btn-a{
	flex: 0 0 200;
	padding:20px ;
	margin-right: 20px;
	background-color: #1DA465;
	color: white;
	margin-top:10px; 
	text-decoration: none;
}
.btn-a:hover{
	opacity: 0.7;
}
.btn-b{
	flex:0 0 200;
	padding: 20px;
	margin-right: 20px;
	background-color: #1DA465;
	color: white;
	margin-top:10px; 
	text-decoration: none;
}
.btn-b:hover {
	opacity: 0.7;}

.member{
	list-style: none;
	display: flex;
	flex-flow: column;
}
	
@media screen and (min-width:768px){
	.member{
	flex-flow:row;
	}}

.member-list{
	flex:1 1 450;
	padding: 5px;
	margin-top: 20px;
	margin-right: 20px; 
	border: 1px dotted #5C5555;
}

.member-img{
	width: 150px;
	height:150px;
	margin-left:5px; 
}


.member-p{
	float: left;
	width: 280px;
}

/* ========== paint　塗料について ========== */
.paint-img{
   background-image: url(../img/paint/paint-top.jpg);
   border-radius:5px;
	clear: both;
	margin-top: 10px;
}

.toryo-1{
	display: flex;
	flex-flow: column;
	margin-top:30px;
}
	
@media screen and (min-width:768px){
	.toryo-1{
	flex-flow:row;
	}}

.toryo-2{
	display: flex;
	flex-flow: column;
}
	
@media screen and (min-width:768px){
	.toryo-2{
	flex-flow:row;
	}
	.toryo{
		width: 25%;
	}
}

.toryo{
	flex:1 1 250;
	border-radius: 10px;
	padding: 20px;
	margin: 20px;
    background-color:rgb(170,202,222);
}
.toryo h4{
	text-align: center;
}