@charset "UTF-8";


/*----------------------
		下層共通
-----------------------*/
@media screen and (min-width: 769px) {
#mainImg{
	position: relative;
	height: 160px;
}

#mainImg img{
	position: absolute;
	top:0;
	left:50%;
	width:1600px;
	margin-left:-800px;
}


section#content{
	width: 1000px;
	margin: 50px auto;
}

section#content h1{
	width: 224px;
	margin: 0 auto 40px;
}
}

/*-------- sp --------*/
@media screen and (max-width: 640px) {
section#content h1{
	width: 224px;
	margin: 20px auto 20px;
}

section#content{
	width: 96%;
	margin: 20px auto;
}
}


/*----------------------
		インデックス
-----------------------*/
@media screen and (min-width: 769px) {
#service{
	border: 1px solid #aaa;
	padding: 40px 18px;
}

#subText{
	text-align: center;
	margin-bottom: 30px;
}

#linkArea div{
	position: relative;
	float: left;
	margin: 0 5px;
	width: 230px;
	height: 520px;
}

#linkArea div p{
	width: 210px;
	font-size: 11px;
	background: url(../img/service/dash.jpg);
	line-height: 25px;
	margin: 15px  auto ;
}

#linkArea .btn_detail{
	position: absolute;
	bottom: 0;
}
}

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

#linkArea{
	width: 90%;
	margin: 0 auto;
}
#linkArea {
	text-align: center;
}

#linkArea div p{
	margin: 5px 0;
}

#linkArea div{
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
}


/*----------------------
		リスト
-----------------------*/
@media screen and (min-width: 769px) {
.serviceBox{
	padding: 50px 64px;
	border: 1px solid #aaa;
	margin-bottom: 50px;
}

.serviceBox .subText{
	text-align: center;
}

.serviceBox .subText p{
	margin: 20px 0 30px;
}

.btn_contact{
	width: 500px;
	margin:0 auto;
	clear: both;
}
.btn_contact li{
	float: left;
	margin-left: 20px;
}

.btn_contact02{
	width: 230px;
	margin:0 auto;
	clear: both;
}

.btn_contact03{
	width: 516px;
	margin:0 auto;
	clear: both;
}

.btn_contact03 li{
	float: left;
	margin-left: 20px;
}

/*------ ブーケ -----*/

div.textArea p span{
	display: none;
}

.b_box{
	margin-bottom: 40px;
}

.b_box div.imgArea{
	float: left;
}

.b_box div.textArea{
	float: right;
	width: 590px;
	font-size: 11px;
}

.b_box div.textArea p{
	margin-top: 10px;
}


/*------ 会場装花 -----*/
.ml80 { margin-left: 80px; }
.d_box{
	margin-bottom: 40px;
	float: left;
}

.d_box div.imgArea{
	float: left;
}

.d_box div.textArea{
	float: right;
	width: 230px;
	margin-left: 15px;
	font-size: 11px;
}

.d_box div.textArea p{
	margin-top: 5px;
}


/*------ アクセサリー -----*/

.mrl30{
	margin-right: 30px;
	margin-left: 30px;
}

#service_accesaries ul{
	margin-bottom: 30px;
}

#service_accesaries p{
	text-align: center;
}

#service_accesaries ul li{
	float: left;
}


/*------ レッスン -----*/


.l_box{
	margin-bottom: 40px;
}

.l_box div.imgArea{
	float: left;
}

.l_box div.textArea{
	float: right;
	width: 590px;
	font-size: 11px;
}

.l_box div.textArea p{
	margin-top: 10px;
}

#lessonReport{
	border-top: 1px solid #ccc;
	padding-top: 30px;
}

#lessonReport ul{
	margin-top: 20px;
}

#lessonReport ul li{
	float: left;
	margin-bottom:30px;
}
}


/*-------- リストsp --------*/


@media screen and (max-width: 640px) {
.serviceBox{
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.textArea img{
		display: none;
	}
.subText{
	text-align: center;
	margin-bottom: 1em;
}

.subText img{
	margin-bottom: 1em;
}
div.imgArea{
	float: left;
	width: 30%;
	margin-right: 1em;
}
.b_box,.d_box{
	margin-bottom: 1em;
}

.btn_contact{
	text-align: center;
	margin: 1em 0;
}
.btn_contact li{
	margin: 1em 0;
}

.btn_contact02{
	text-align: center;
	margin: 1em 0;
}

.btn_contact03{
	text-align: center;
	margin: 1em 0;
}

.btn_contact03 li{
	margin: 1em 0;
	float: none;
}

#service_accesaries ul.clear {
	padding: 0 1em;
}

#service_accesaries ul.clear li{
	float: left;
	width: 30%;
	margin: 0 5px;
}

#service_lesson .textArea p{
	width: 65%;
	float: right;
}

#service_lesson ul{
	margin-top: 1em;
	border-top: 1px solid #ccc;
	padding-top: 1em;
}

#service_lesson ul li{
	float: left;
	width: 30%;
	margin: 0 5px;
}

#lessonReport{
	text-align: center;
}

}


				.main3{
					display: flex;
					justify-content: space-between;
					margin-bottom: 35px;
				}
				.main3 li img{
					border: 1px solid #ddd;
				}
@media screen and (max-width: 640px){
	.main3 li{
		width: 30%;
    margin: 0 5px;
	}
}