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


#mainvisual{
	width: 100%;
	height: 90vh;
	/*background: url(../img/mainvisual-bg.png) no-repeat  top center;
	background-size: cover;*/
	position: relative;
	border: 10px solid #fff;

}


.main-bg{
	position: absolute;
    background: #7ea600;
    width: 100%;
    height: 800px;
    left: 0;
    top: 180px;
    z-index: -1;
}

.mainvisual01{
	border-radius: 20px;
	width: 100%;
	height: 100%;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.main-text{
	font-family: 'myfont', serif;
	position: absolute;	
	bottom: 35%;
    left: 70px;
	font-size: 250%;
	 z-index: 99;
	 color: #fff;
	 padding-left: 5px;
	text-shadow: 2px 1px 2px rgb(0 0 0 / 60%);
}

/*スクロールダウン全体の場所*/
.scrolldown4{
	z-index: 9;
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#fff;
}

.switching {
	border-radius: 20px;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
.switching {
	border-radius: 0px;
}
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
.switching {
	border-radius: 0px;
}


}


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

				news

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

.news{
	z-index: 9;
	width: 100%;
	height: 10vh;
	padding-bottom: 5px;
	
}


div.title {
    margin: 15px 0px 3px 5px
}

#ul_news {
    display: none;
}
div.tick {
    width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    position: relative;
    overflow: hidden;
	border-bottom: 1px solid #ddd;
}

div.tick span.date{
	padding-right: 10px;	
	font-size: 80%;
}

div.tick a {
    position: absolute;
    margin-left: 10px;
    font-size: 1.0em;
    color: gray;
}

div.tick a:hover{
	color: #ffa500;
}
.news-wrap{
	width: 90%;
	max-width: 1100px;
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-evenly;
	height: 10vh;
}

.news-title{
	font-weight: bold;
	font-family:'Lora', serif;
	text-align: center;	
	margin: 10px;
	font-size: 140%;
	line-height: 30px;
}
.news-title span{
	/*font-family:'myfont';*/
	color: #9ebc40;
    font-size: 85%;
    letter-spacing: 1px;
}
.news-btn{
	font-size: 90%;
	background: #9ebc40;
	color: #fff;
	padding: 5px 20px;
	letter-spacing: 1px;
	border-radius: 5px;
	transition: .4s;
	display: inline-block;
	margin-top: 10px;
	box-shadow: 1px 1px 3px #596a24;
}

.news-btn:hover{
	background: #ffa500;		
}


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

				concept

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

.concept{
	width: 100%;
	margin: 0 auto;	
	/*border-top: 1px solid #ddd;	*/
	padding: 40px 2%;
}

.title01{
	font-family: 'Lora', serif;
	text-align: center;
	font-size: 260%;
	line-height: 35px;		
}

.title01 span{
	font-size: 40%;
	color: #9ebc40;	
}

.concept-wrap{
	margin-top: 40px;	
}

.point{
	text-align: center;
	font-size: 190%;
	margin-bottom: 20px;
}

.point span{
	border: 1px solid #dde4e0;
	box-shadow: 2px 2px 0px 0 #dde4e0;
	color: #000;
	padding:  2px 8px;
	margin: 0 5px;	
	white-space: nowrap;
}

.text01{
	text-align: center;	

	font-size: 100%;
	font-weight: bold;
	letter-spacing: 1px;
}


.concept-box{
	max-width: 900px;
    width: 90%;
    display: flex;
    margin: 40px auto;
    justify-content: space-around;	
}

.concept-box img{
	margin: 10px;
	width: 350px;
	height: 350px;
	object-fit: contain;
		
}


.concept-text{
	margin: 20px;
}

.sub-concept{
	font-weight: bold;
	text-align: left;
    font-size: 165%;
    margin: 5px 0;
	line-height: 2;
}

.sub-concept span{
	border: none;
	box-shadow: none;
	padding: 0;
	background: linear-gradient(transparent 70%, #ffe9bf 58%);
}

.text02{
	padding: 20px 10px;
    line-height: 1.7;
    font-size: 105%;
		
}

.about-btn a{
	background: #fff;
	color: #9ebc40;
	/*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #9ebc40;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .4s;
	border-radius: 25px;	
}
.about-btn a span{
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#9ebc40;
	font-weight: bold;
}

.about-btn a:hover{
	border-color:#9ebc40;
}

.about-btn a:hover span{
	color: #fff;
}

/*== 背景が流れる（左から右） */
.about-btn a:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#9ebc40;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.about-btn a:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.feature{
	padding: 40px 0;
	
}

.feature-title{
	font-family: 'Lora', serif;
	text-align: center;
	font-size: 180%;
    font-weight: bold;
    line-height: 25px;
}
.feature-title span{
	color: #9ebc40;
	font-size: 60%;
}


.feature-wrap{
	width: 96%;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    margin: 35px auto 20px;;
    justify-content: space-around;	
}

.feature01{
	text-align: center;
	font-weight: bold;
	width: 200px;
	padding: 10px;	
}

.feature01 .text03{
	letter-spacing: 1px;
	font-family: 'Lora', serif;
}

.feature01 img{
	width: 100px;
	display: block;
	margin: 5px auto;	
}

.feature01 .text04{
	letter-spacing: 1px;
	font-size: 120%;
	background: linear-gradient(transparent 70%, #fef5b5 70%);
	display: inline-block; 
}



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

				service

--------------------------------------------*/
.service{
	width: 100%;
	margin: 0 auto;
	padding: 60px 2%;
	background: #fafcf6;	
}

.service-list{
	max-width: 900px;
	width: 90%;
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}

.service-list li{
	display: flex;
    align-items: center;
    width: 300px;
	margin: 20px 0;
	padding: 0 5px;
}
.service-list img{
	width: 80px;
	height: 80px;
	padding: 10px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 3px #999;
}
.service-list li p{
	font-weight: bold;
	font-size: 105%;	
	padding: 10px;
}

.service-btn{
	text-align: center	
}

.service-btn{
	text-align: center;
	margin-top: 20px;
}
/*きらっと光る*/

.service-btn a{
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
	display:inline-block;
    background: #9ebc40;
    color: #fff;
	letter-spacing: 1px;
    padding: 5px 20px 8px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
	border-radius:5px;
	box-shadow: 1px 1px 3px #596a24;
	font-size: 110%;
}


/*キラッと光る*/
.service-btn a::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.service-btn a:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

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

				works

--------------------------------------------*/
.works{
	margin: 0 auto;
	padding: 60px 2%;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:60px auto 30px;
}

.slick-list li{
	min-height: 200px;
	/*border: 2px solid #939a7e;*/
	border-radius: 10px;
	background: #fff;
	padding: 10px;	
	text-align: center;
}

.slick-list li .name01{
	padding-top: 16px;
	font-weight: bold;
	font-size: 105%;
}



.slick-list li p.name02{
	padding: 5px;
	letter-spacing: 1px;
	font-size: 80%;
	color: #999;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
	object-fit: contain;
	display: block;
	transition: .3s;
	padding: 5px 0;
}

/*.slider img:hover {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
	object-fit: contain;
	display: block;
	box-shadow: 8px 8px 0 #9ebc40;
	transform: translate(-5px,-5px);
	background:#ddd;
}
*/

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 30%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#9ebc40;/*ドットボタンの色*/
	border: none;
}

.slick-dots .slick-active button{
    background:#a9ae98;/*ドットボタンの現在地表示の色*/
}


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

				blog

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

#blog{
	padding: 40px 0;
	background: #fafaf9;
}

.blog-list{
	max-width: 1100px;
	width: 96%;
	display: flex;	
	justify-content: space-evenly;
	margin: 20px auto;
	flex-wrap: wrap;
}

.blog-list>li{
	width: 280px;
	margin: 10px 10px 20px;
}

.blog-list>li a{
	color:#333;	
}

.blog-list>li a img{
	width: 280px;
	height: 200px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #9ebc40;	
}

.blog-list>li a img:hover{
	opacity: 0.6;
}

.blog-btn{
	text-align: center;	
}

.date{
	font-size: 95%;	
	border-bottom: 1px solid #999;
}

.date,
.texts{
	width: 98%;
	margin: 0 1%;

}

.date:hover,
.texts:hover{
	color: #ffa500;
}

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

				access

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

.access{
	padding: 80px 0;
	background: #fafcf6;	
}

.map{
	display: block;
	width: 90%;
	max-width: 800px;
	margin: 40px auto 10px;	
	filter:grayscale(20%);
	-webkit-filter:grayscale(20%);
}

.access-wrap{
	width: 90%;
	max-width: 800px;
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;	
}

.access-imgs,
.access-contact{
	width: 50%;	
}

.access-img01{
	width: 100%;
    height: 250px;
    object-fit: cover;	
}
.access-img02{
	display: flex;
	justify-content: space-between;	
}

.access-img02 img{
	width: 49%;
    height: 200px;
    object-fit: cover;
}

.access-contact{
	padding: 20px 0 10px 40px;
}


.access-contact .address{
	font-size: 110%;
	padding: 10px 0;	
}

.access-contact .address a{ 
	font-size: 105%;	
	border-bottom: 1px solid #9ebc40;
}


.contact01{
	white-space: nowrap;
	padding: 10px 0;	
}

.contact01 p{
	font-size: 120%;
	font-weight: bold;
}

.contact-tel{
	
}

.contact-tel .tel{
	font-size: 180%;
	padding: 10px 0;	
	line-height: 20px;
}

.contact-tel .tel span{
	font-size: 60%;	

}
.contact-form{
		
}

.contact-form a{ 
	background: #9ebc40;
	font-weight: bold;
	color: #fff;
	display: inline-block;
    padding: 0.5em 2em;
	margin: 10px 0;
	letter-spacing: 1px;
    text-decoration: none;
	box-shadow: 3px 3px 3px #596a24;
    border-radius: 3px;
	transition: 0.4s;
}
.contact-form a:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
  background: #778d30;
}


/*---------------------------------------------------------
----------------------------------------------------------*/
@media screen and (max-width: 1200px) {

#mainvisual{
}

.mainvisual01{
}


.main-text {
	font-size: 200%;
}

.scrolldown4{
}


.news {
   
}

.news-wrap {
}

.main-bg {
}

/*-------------------------------------------
				concept
--------------------------------------------*/

}

@media screen and (max-width: 780px) {
/* 768pxまでの幅の場合に適応される */

#mainvisual{
	height: 500px;
	border: none;
}	
.mainvisual01{
	margin-top: 100px;
	height: 100%;
	box-shadow: none;
	border-radius: none;
}

.main-bg {
}
	
.main-text{
	font-size: 200%;
	left: 0;
	bottom: 40%;
	width: 100%;
	text-align: center;
}

.news{
	height: 20vh;	
	margin: 10px 0;
}

.news-wrap {
	height: 20vh;
	align-items: center;
    flex-direction: column;
}

.news-title {
    font-size: 160%;
}	

div.tick {
    width: 80%;
}
.scrolldown4{
	display: none;	
}

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

				concept

--------------------------------------------*/
.concept {
}

.point{
	font-size: 160%;
	display: flex;
	flex-direction: column;
    width: 50%;
    margin: 20px auto 0;
	letter-spacing: 1px;
	line-height: 2;
	align-items: center;
}

.point span {
    padding: 2px 8px;
    margin: 0 5px 5px;
    width: 180px;
    white-space: nowrap;
}

.text01{
	width: 90%;
	margin: 20px auto;
	font-size: 100%;	
}

.concept-wrap {
    margin-top: 20px;
}
.concept-box {
    width: 90%;
    margin: 20px auto 10px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	
}

.concept-box img {
     width: 70%; 
    height: 350px;
    object-fit: contain;
     border-radius: 0; 
}

.concept-text {
   width: auto;
    margin: 0;
}

.feature {
    padding: 60px 0;
}

.feature01 {
    width: 130px;
	padding: 5px;
}

.feature01 img {
    width: 80px;
}

.feature01 p.text03 {
    font-size: 100%;
}

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

				gallery 

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



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

				work

--------------------------------------------*/
.blog-list{
    flex-wrap: wrap;	
}
.blog-list>li:last-of-type {
	display: none;
}

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

				access

--------------------------------------------*/
.access {
    padding: 40px 0;
}
.access-imgs, 
.access-contact {
    width: 100%;
}

.access-img01 {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.access-contact {
    padding: 20px 0 10px 0;
}

}


@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
#mainvisual {
    height: 250px;
}

.mainvisual01 {
    margin-top: 80px;
    height: 100%;
}

.main-bg {
}
 .main-text{
    font-size: 135%;
    left: 0;
	width: 100%;
	text-align: center;
    bottom: 39%;
}
.news{
	height: 25vh;	
}


.news-wrap {
    height: 25vh;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

.news-title{
    font-size: 130%;
    line-height: 25px;
	margin: 5px;
}
div.tick {
    width: 96%;
	height: 44px;
}

div.tick a{
	width: 90%;
	display: flex;
	flex-direction: column;	
	font-size: 90%;
}

.
/*-------------------------------------------

				concept

--------------------------------------------*/
.concept {
    width: 96%;
    margin: 80px auto 30px;
}

.title01{
    font-size: 200%;
	line-height: 25px;
}

.sub-concept{
    font-size: 120%;
}

.concept-wrap{
	margin-top: 10px;	
}
.point{
	font-size: 120%;
	display: flex;
	flex-direction: column;
    width: 50%;
    margin: 20px auto 0;
	letter-spacing: 1px;
	line-height: 2;
}
.concept-box {
    margin: 20px auto 0;
}



.concept-box img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: 0;

}
.text02 {
    padding: 20px 5px;
    font-size: 93%;
   
}

.text01{
	width: 90%;
	margin: 20px auto;
	font-size: 90%;	
	text-align: justify;
}

.about-btn a {
    font-size: 90%;
    background: #9ebc40;
	padding: 5px 15px;
	border: none;
}

.about-btn a span {
     color: #fff; 
}

.feature {
   padding: 60px 0 20px;
}

.feature01 {
	margin: 10px auto;
    width: 100px;
	padding: 5px;
}

.feature01 .text03{
	font-size: 80% !important;
}

.feature01 img {
    width: 80px;
}

.feature01 p.text04 {
    font-size: 100%;
}


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

				service

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

.service {
    padding: 30px 2%;
}

.service-list {
    margin: 10px auto 30px;
}

.service-list li{
	margin: 10px 0;	
}
.service-list img {
    width: 65px;
    height: 65px;
    padding: 7px;
}
.service-list li p{
    font-size: 110%;
}

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

				works

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


.slider {
    width: 94%;
    margin: 10px auto 30px;
}
/*-------------------------------------------

				concept

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

.contact-tel .tel{
	line-height: 20px;
	font-size: 160%;
}

.access-contact .address {
    font-size: 95%;
}
.contact01 p {
    font-size: 105%;
}

.contact-form a {
    box-shadow: 1px 1px 2px #596a24;
	padding: 4px 20px 7px;
}

}