@charset "utf-8";
/* CSS Document */
.sub-header-nav01>li a {
	color: #000;
	text-shadow: none;
	font-size: 110%;
}


#mainvisual{
	width: 100%;
	height: 350px;
	/*background: url(../img/mainvisual-bg.png) no-repeat  top center;
	background-size: cover;*/
	position: relative;
}


.main-bg{
	position: absolute;
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 220px;
    left: 0;
    top: 0;
    z-index: 1;
}

.mainvisual01{
	background: url(../img/idea05.jpg) center no-repeat;
	background-size:cover;
	width: 100%;
	height: 220px;
	position: absolute;
	top: 130px;

	/*box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;*/
}


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

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

				service

--------------------------------------------*/
#service{
	padding: 60px 2%;	
}

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin: 40px auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	border-bottom: 2px solid #e7eecf;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 2% 3% ;
    transition: all .5s ease;
	display: flex;
	align-items: center;
	font-size: 115%;
}

.title img{
	width: 50px;
	margin-right: 20px;	
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #9ebc40;
    
}
.title::before{
    top:48%;
    right: 30px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 30px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	margin:0 3% 3% 3%;
    padding: 3%;
	background: #f5f6f4;
	
}
.box p{
	line-height: 1.7;	
}

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

				flow

--------------------------------------------*/
#flow{
	padding: 60px 2%;
	background: #fafcf6;	
}

#flow .title01{
	line-height: 25px;	
}

.flow-list{
	max-width: 900px;
	width: 90%;	
	margin: 10px auto;
}

.flow-list li{
	display: flex;
	justify-content: space-evenly;
	margin: 60px auto;
	position: relative;
	align-items: center;	
}

.flow-list li .flow-title{
	align-items: center;
	width: 320px;	
	display: flex;
}

.flow-list li .flow-title span{
	width:44px;
	height: 44px;
	line-height: 39px;
	border-radius: 50%;
	font-size: 180%;
	background: #9ebc40;
	display: inline-block;
	color: #fff;
	text-align: center;
	
}

.flow-list li .flow-title strong{
	font-size: 120%;
	padding: 0 10px;
}

.flow-list li .flow-title strong a{
	color: #000;
	border-bottom: 1px solid #9ebc40;	
}

.flow-list li .flow-title strong a:hover{
	color: #9ebc40;
}
.flow-list li:after {
    display: block;
    content: "";
    position: absolute;
    left: 14%;
    bottom: -50px;
    width: 30px;
    height: 40px;
	background: url(../img/flow.png) no-repeat ;
	background-size: contain;
}

.flow-list li:last-of-type:after {
	display: none;
}
.flow-list li p{
	width: 60%;	
	line-height: 1.7;
}

.flow-btn{
	text-align: center;	
	margin-bottom: 30px;
}

.flow-btn a{
	font-size: 115%;
	background: #9ebc40;
	color: #fff;
	padding: 3px 20px 5px;
	letter-spacing: 2px;
	border-radius: 25px;
	transition: .4s;
	display: inline-block;
	box-shadow: 1px 1px 3px #596a24;
}

.flow-btn a:hover{
	background: #ffa500;
	 -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
    border-bottom: none;
}


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

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

				works

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

.slick-list li{
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
	background: #fff;
	padding: 10px;
	/*border: 3px solid #9ebc40;*/
	
	/*background: #f7f7f5;*/
	background: url(../img/22063021_s.jpg);
}

.slick-list .work-text01{
	font-weight: bold;
	display: flex;
	width: 90%;
	margin: 0 auto;
	font-size: 140%;
	justify-content: space-between;
	line-height: 2;
    align-items: center;
    flex-direction: column;
	margin-bottom: 10px;

}
.slick-list .work-text01 span{
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 60%;
	background: #d6d9ce;
	padding: 1px 10px 5px;
	
}
.slick-list p.work-text02{
	width: 90%;
	margin: 0 auto 15px;
}

.slider img {
    width:90%;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
	max-height: 65vh;
	margin: 0 auto 10px;
	object-fit: contain;
	display: block;
	transition: 0.5s;
	
}

.slick-slider .slick-track, .slick-slider .slick-list {
    padding: 20px 0;
}

.slider img:hover{
	transform: scale(0.9, 0.9);	
}

.slider .slick-slide {
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    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 {
    display:none;
}

.slick-dots .slick-active button{
}/*---------------------------------------------------------
----------------------------------------------------------*/
@media screen and (max-width: 1200px) {

#mainvisual{
}

.mainvisual01{
}


.main-text {
	left: 39%;
	font-size: 230%;
}

.scrolldown4{
}
.slider img{
	width: 95%;	
}

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

}

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

#mainvisual{
	height: 250px;
}	
.mainvisual01{
	top: 100px;
	height: 150px;
}

.main-bg {
	height: 150px;
}
	
.main-text{
	left: 32%;
	bottom: 34%;
    font-size: 210%
}



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

				flow

--------------------------------------------*/
.flow-list li{
	flex-wrap: wrap;
	justify-content: normal;
}

.flow-list li .flow-title {
    align-items: center;
}
.flow-list li .flow-title span{
	width: 35px;
	height: 35px;
	line-height: 32px;
	border-radius: 50%;
	font-size: 120%;
	background: #9ebc40;
	display: inline-block;
	color: #fff;
	text-align: center;
}

.flow-list li .flow-title strong{
	font-size: 120%;
	padding: 0 0 0 10px;
}

.flow-list li:after {
    display: block;
    content: "";
    position: absolute;
    left: 16%;
    bottom: -51px;
    width: 36px;
    height: 50px;
    background: url(../img/flow.png) no-repeat;
    background-size: contain;
}

.flow-list li:last-of-type:after {
	display: none;
}
.flow-list li p{
	width: 100%;
	line-height: 1.7;
	padding: 10px 21px;
	font-size: 90%;
}


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

				gallery 

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



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

				work

--------------------------------------------*/
.slider img {
    width: 100%;
    max-height: 35vh;
    margin: 0 auto 10px;
}


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

				access

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


}


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

.mainvisual01 {
    top: 80px;
    width: 100%;
    height: 120px;
}

.main-bg {
	height: 120px;
}
 .main-text{
	 font-size: 160%;
	 left: 25%;
	 bottom: 35%;
}



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

				concept

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

}
.title::before{
    right: 20px;
}
.title::after{
    right: 20px;
}


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

				service

--------------------------------------------*/
.title {
    font-size: 90%;
}

.box p {
    font-size: 90%;
}

.title img {
    width: 40px;
    margin-right: 10px;
}

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

				flow

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

.flow-list {
    width: 100%;
    margin: 10px auto;
}
.flow-list li:after {
    display: block;
    content: "";
    position: absolute;
    left: 42%;
    bottom: -54px;
    width: 30px;
    /* height: 40px; */
    background: url(../img/flow.png) no-repeat;
    background-size: contain;
}

.flow-btn a{
	font-size: 100%;
}
/*-------------------------------------------

				works

--------------------------------------------*/
#works{
	padding: 30px 2%;	
}
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin: 0 auto;
}
.slick-list li{
    width: 80vw;
}
.slick-list .work-text01 {
    width: 90%;
    margin: 0px auto 5px;
    font-size: 120%;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.slick-list .work-text01 span {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 60%;
}
.slider img {
    width: 100%;
    max-height: 200px;
    margin: 0 auto 10px;
}

.slick-list p.work-text02{
	width: 100%;
	font-size: 90%;
}


}