@charset "UTF-8";

body	{margin: 0;
	height:100%;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

nav{
	position: fixed;  
	width: 100%;
	z-index: 999;
}

/* 凸 */
.text-center{
	text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-size-13{
	font-size: 13px;
}
.text-size-15{
	font-size: 15px;
}
.text-size-18{
	font-size: 18px;
}
.text-size-20{
	font-size: 20px;
}

.text-size-25{
	font-size: 25px;
}
.text-size-35{
	font-size: 35px;
}
.text-size-50{
	font-size: 50px;
}
.left{
	float: left;
}
.right{
	float: right;
}

.width-50{
	width:58%;
}
.color-black{
	color: #555555
}
.color-white{
	color: #fff
}
.color-brown{
	color: #DA8300
}
.color-green{
	color: #1F9D62
}

.color-orange{
	color:#FF7700
}

.com-name{
	float: left;
	padding: 0 50px;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.margin-top-50{
	margin-top: 50px;
}

.margin-botm-80{
	margin-bottom: 80px;
}

.menu{
	float: right;
}
/* ナビゲーション */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li i	{color: #555555;
	margin-right: 10px;
	font-size: 18px}
	
.menu li a	{display: block;
	padding: 10px;
	color: #000000;
	font-size: 15px;
	border-left: solid 1px #ccc;
	text-decoration: none}

.menu li span{
	font-size: 10px;
}

.menu li:last-child{
	border-right: solid 1px #ccc;
}


.menu li a:hover{
	background-color: 	#188E66;
	color: #fff;
	}




.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	text-align: center;
	width: 150px;
		}
header{
		text-align: center;
		background-attachment: scroll;
		background-position: center center;
		background-repeat: none;
		width: 100%;
		height: 560px;
		-webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
	    -o-background-size: cover;
		}

header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

header .intro-text .intro-lead-in {
    margin-bottom: 25px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 22px;
    color: #fff;
    line-height: 22px;
}

header .intro-text .intro-heading {
    margin-bottom: 25px;
    text-transform: uppercase;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 50px;
    color: #3c3c3c;
    line-height: 50px;
}

header .intro-text .intro-lead-in {
        margin-bottom: 25px;
        font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
        font-size: 60px;
        line-height: 60px;
		letter-spacing: 20px;
        text-shadow: 0 0 10px #fff;
    }

header .intro-text .intro-heading {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 50px;
    line-height: 75px;
    text-shadow:
	-1px -1px #fff,
	1px -1px #fff,
	-1px 1px #fff,
	1px 1px #fff;
}

.heading1{
	width: 200px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto
}
.heading1 p{
	margin-top: 0;
	padding-top: 0;
}

.heading3{
	margin-top: 100px;
}


h2 {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
	margin-bottom: 0;
	padding-bottom: 0;
	color: #555555
}

h2:before,
h2:after {
    border-top: 3px solid;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

h2:before {
    margin-right: 0.5em;
}

h2:after {
    margin-left: 0.5em;
}

/* お知らせ */
.news-area{
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 0;
border-top: solid  1px #D5D5D5;
border-bottom: solid  1px #D5D5D5;
float: left;
}
.news-area ul {margin:0;
padding: 0;
list-style: none;
}
.news-area li time{
font-size: 15px;
font-weight: 600;
}
.news-area .text	{float: none;
width: auto;
font-size: 15px;}
.news-area li{
padding: 20px 0;
border-bottom: solid 1px #dddddd;
}

.fb-page{
	width: 50%;
}

/*会社紹介 */

table.company th,
table.company td {
    padding: 10px;
}
 
table.company th {
    background: #1B815E;
    vertical-align: middle;
    text-align: left;
    width: 100px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
}
 
table.company th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #1B815E;
    border-width: 10px;
    margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() {
    table.company th::after {
        float: right;
        padding: 0;
        left: 30px;
        top: 10px;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #295890 10px solid;
        margin-top: -10px;
    }
}
 
table.company td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}

.effort-text{
	margin-top: 0;
	padding:0 15px; 
	float: left;
	width: 60%;
}

.effort img{
	width: auto;
}
.effort img:after{
	clear: both
}
/*業務内容*/
.shop{
margin: 20px 5px;
padding: 0;
}

.shop ul {
margin:10px 0 5px 0;
padding: 0 10px;
list-style: none
}

.shop-list {
display: block;
width: 50%;
margin-bottom: 25px;
background-color: #fff;
text-align: center;
float: left;
}

.shop-list h4 {
margin-top: 0;
}

.shop .shop-list a {
color: #000000;
font-size: 15px;
text-decoration: none;
}
.shop-list img{
max-width: 100%;
margin-bottom: 0px;
border: solid 6px #3c3c3c;
border-radius: 10px;
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}

.shop-list p{
font-size: 15px;
margin: auto ;
}

.shop-list a:hover	{opacity: 0.8}

/*業務内容*/
.works{
margin: 20px 5px;
padding: 0;
}

.works ul {
margin:10px 0 5px 0;
padding: 0 10px;
list-style: none
}

.works-list {
display: block;
width: 32%;
background-color: #fff;
padding: 5px;
text-align: center;
float: left;
}

.works .works-list a {
color: #000000;
font-size: 15px;
text-decoration: none;
}

.works-list img{
max-width: 100%;
max-height: 350px;
margin-bottom: 0px;
border: solid 6px #3c3c3c;
border-radius: 10px;
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}

.works-list p{
font-size: 15px;
margin: auto ;
}

.works-list a:hover	{opacity: 0.8}

.vision-list {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
	font-size: 24px;
}
 
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list8{
	counter-reset:li;
	margin-left:20px !important;
}
 
.list8 li{
	position:relative;
	display: block;
	padding:8px 0px 8px 40px; 
}
 
li.list8-count:after{
	counter-increment: li;
	content: counter(li);
	position: absolute;	
	left: -16px;
	top: 2px;
	color: #fff;
	background: #00A971;
	height: 30px;
	width: 30px;
	line-height: 32px;
	border: 2px solid #D4D4D4;
	text-align: center;
	font-weight: bold;
	border-radius: 30px;
}
 
li.list8-count:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:11px; 
	left:15px; 
	height:0; 
	width:0; 
	border-top: 8px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 13px solid #D4D4D4;
}


.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.btn{
	margin: 15px 0 30px 0;
	padding: 15px 0;
}
.btn1	{
text-decoration: none;
color: #fff;
font-size: 18px;
border: 3px solid #fff;
padding: 20px 50px;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.7);
cursor: pointer}

.btn1:hover	{border: 3px solid #fff;
	color: #fff;
	background-color: #00A971;}

.btn1 i	{color: #3c3c3c;
	margin-right: 15px;
	font-size: 18px}

.btn1 span	{display: inline-block;
	text-indent: -9999px}

.btn2	{
text-decoration: none;
color: #fff;
font-size: 18px;
margin: 50px 0;
border: 3px solid #fff;
padding: 20px 50px;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.7);
cursor: pointer}

.btn2:hover	{border: 3px solid #fff;
	color: #fff;
	background-color: #188E66;}

.btn2 i	{color: #3c3c3c;
	margin-right: 15px;
	font-size: 18px}

.btn2 span	{display: inline-block;
	text-indent: -9999px}

.col-3{
	width: 100%;
	margin:35px 0;
	background-color: #3F3A39;
	}
	
/*ピックアップ*/
.shop-pick{
margin: 10px 5px;
padding: 0;
}

.shop-pick ul {
margin:10px 0 5px 0;
padding: 0 10px;
list-style: none
}

.shop-pick-list {
display: block;
width: 30%;
background-color: #fff;
padding: 5px;
margin: 10px ;
text-align: center;
float: left;
}

.shop-pick .shop-pick-list a {
color: #000000;
font-size: 15px;
text-decoration: none;
}
.shop-pick-list img{
max-width: 100%;
margin-bottom: 0px;
border: solid 6px #3c3c3c;
border-radius: 50%;
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}

.shop-pick-list p{
font-size: 15px;
margin: auto ;
}

.shop-pick-list a:hover	{opacity: 0.8}

footer{
	background-color: #555555;
	background-image: url(../img/footer.png);
	height: 180px;
}
/* コピーライト */
.copyright{
	margin-top: 80px;
	padding: 30px 0 0 0;
	color: #fff;
}
.copyright a {
padding: 5px;
margin: 5px ;
color: #fff;
text-decoration: none
}

.copyright a:hover {
	color:#555555 
}

/* ########### 599px以下 ########### */
@media (max-width: 599px) {
.poster-list {
width: 95%;
}

#menubtn{padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer}

#menubtn:hover	{background-color: #dddddd}

#menubtn:focus	{outline: none}

#menubtn i	{color: #888888;
	font-size: 18px}

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーション */
.menu	{display: none}

/* ナビゲーション */
.menu ul{margin: 0;
padding: 0;
list-style: none}

.menu li a	{display: block;
padding: 13px;
color: #000000;
font-size: 15px;
border-left: solid 1px #ccc;
text-decoration: none}

.menu li span{
font-size: 10px;
}

.menu li:last-child{
border-right: solid 1px #ccc;
}


.menu li a:hover{
background-color: 	#FFBF00;
color: #fff;
}

.menu ul:after	{content: "";
display: block;
clear: both}

.menu li	{float: left;
text-align: center;
width: 100%;
}

.menu2{
	background-color:#fff;
}

}

/* ########### 767px以下 ########### */
@media (max-width: 767px) {
header{
height: 100px;
padding-top: 70px;
}
.news-area{
width: 100%;
}
.fb-del{
display: none;
}
header .intro-text .intro-lead-in {
font-size: 15px;
line-height: 15px;
letter-spacing: 10px;
text-shadow:
-1px -1px #3c3c3c,
1px -1px #3c3c3c,
-1px 1px #3c3c3c,
1px 1px #3c3c3c;
}

header .intro-text .intro-heading {
font-size: 13px;
line-height: 15px;
text-shadow:
-1px -1px #fff,
1px -1px #fff,
-1px 1px #fff,
1px 1px #fff;
}

.heading1{
width: 300px;
margin-top: 60px;
}
.heading2{
width: 300px;
margin-top: 60px;
}

.text-size-25{
	font-size:18px;
}

.natyural1 ul{
	list-style:none;
	padding:0;
}
.natyural1 ul li{
	font-size:15px;
}

.natyural1 ul li img{
	width:100%;
}

.col-3{
	width: 100%;
	margin:0;
	background-color: #3F3A39;
	}
.col-4{
	padding:15px 0;
}	
.text-size-35{
	font-size:20px;
}	
	
.natyural2 ul{
	list-style:none;
	padding:0;
}
.natyural2 ul li{
	font-size:15px;
	color:#fff;
}
.natyural3 ul{
	list-style:none;
	padding:0;
}
.natyural3 ul li{
	font-size:18px;
}
.natyural4-1{
	padding:0;
	border-right: 1px solid #000000;  
}

.natyural4-2{
	padding:0;
	border-left: 1px solid #000000;  
}

.natyural4-1 ul{
	list-style:none;
	padding:0;
}
.natyural4-1 ul li{
	font-size:18px;
}

.natyural4-1 h4{
	display:block;
	background-color:#31A56E;
	padding:15px;
	color:#fff;
}

.natyural4-2 ul{
	list-style:none;
	padding:0;
}
.natyural4-2 ul li{
	font-size:18px;
}

.natyural4-2 h4{
	display:block;
	background-color:#5A5A5A;
	padding:15px;
	color:#fff;
}

.natyural5{
	border: 3px solid #31A56E; 
	border-radius:15px;
	font-size:12px;
}

.circle{
  display: inline-block;
  margin:10px 50px;
  padding:100px 50px;
  border-radius: 50%;
  background: #31A56E;
  color:#fff;
  font-weight:bold;
}
table.company td {
width: auto;
padding: 20px;
}
.btn1	{
text-decoration: none;
color: #fff;
font-size: 15px;
border: 3px solid #fff;
padding: 10px 30px;
border-radius: 13px;
background-color: rgba(0, 0, 0, 0.7);
cursor: pointer}
}
/* ########### 768px以上 ########### */
@media (min-width: 768px) {
nav{
position: fixed;
width: 100%;  
z-index: 999;
}
/* トグルボタン */
#menubtn	{display: none}
.menu2{
float: right;
}
/* ナビゲーション */
.menu ul{margin: 0;
padding: 0;
list-style: none}

.menu li a	{display: block;
padding: 13px;
color: #000000;
font-size: 15px;
border-left: solid 1px #ccc;
text-decoration: none}

.menu li span{
font-size: 10px;
}

.menu li:last-child{
border-right: solid 1px #ccc;
}


.menu li a:hover{
background-color: 	#188E66;
color: #fff;
}

.menu ul:after	{content: "";
display: block;
clear: both}

.menu li	{float: left;
text-align: center;
width: 150px;
}
header{
padding-top: 74px;
}
.heading1{
margin-top: 70px;
}
.heading2{
margin-top: 100px;
}

.wid-70{
	width:70%;
}
.wid-30{
	width:30%;
}
.natyural1 ul{
	list-style:none;
	padding:0;
}
.natyural1 ul li{
	float:left;
	font-size:20px;
}

.natyural1 ul li img{
	width:100%;
}

.natyural2 ul{
	list-style:none;
	padding:0;
}
.natyural2 ul li{
	font-size:30px;
	color:#fff;
}

.natyural3 ul{
	list-style:none;
	padding:0;
}
.natyural3 ul li{
	font-size:30px;
}

.natyural4-1{
	float:left;
	width:49%;
	padding:0 10px 0 0;
	border-right: 1px solid #000000;  
}

.natyural4-2{
	float:left;
	width:49%;
	padding:0 0 0 10px;
	border-left: 1px solid #000000;  
}

.natyural4-1 ul{
	list-style:none;
	padding:0;
}
.natyural4-1 ul li{
	font-size:25px;
}

.natyural4-1 h4{
	display:block;
	background-color:#31A56E;
	padding:15px;
	color:#fff;
}

.natyural4-2 ul{
	list-style:none;
	padding:0;
}
.natyural4-2 ul li{
	font-size:25px;
}

.natyural4-2 h4{
	display:block;
	background-color:#5A5A5A;
	padding:15px;
	color:#fff;
}

.natyural5{
	border: 3px solid #31A56E; 
	border-radius:15px;
}

.circle{
  display: inline-block;
  margin:10px 50px;
  padding:100px 60px;
  border-radius: 50%;
  background: #31A56E;
  color:#fff;
  font-weight:bold;
}

.col-4{
	padding:15px 0;
}

table.company {
width: 700px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 5px;
}
.poster-list {
width: 28%;
}
nav	{

border-top:3px solid #404040 ;
background-color: #fff;
}

}


/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {
table.company {
width: 1100px;
}


.poster-list {
width: 30.5%;
}
.col-1,.col-2,.copyright{
width: 1200px;
margin-left: auto;
margin-right: auto
}

.col-5,.col-6,.col-4,.copyright{
width: 1300px;
margin-left: auto;
margin-right: auto
}
}