f@charset "UTF-8";
/* CSS Document */

img{
	width:100%;
	height:auto;
}


/* ************************************************************
mainvisual
************************************************************ */
#mainvisual{
margin:0 auto;
width:100%;
}

/* ************************************************************
◆ block01 ◆ Concept
************************************************************ */
#concept{
margin:7% auto;
width:100%;
}

.title01{
margin:2% auto;
width:100%;
}

.sentence{
margin:2% auto;
width:100%;
}


/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */

.title01{margin:0 auto 3%;}
 /* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
.title01 img{
margin:2% auto;
width:45%;}

.sentence{padding:2%;}

.pcbr {
	display: none;
}

.sptxtl {
	text-align: left;
}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
.title01 img{
margin:4% auto 2%;
width:55%;}
 /* *************** */
}


/* ************************************************************
◆ block02 ◆ Recruit
************************************************************ */
#recruit{
margin:7% auto;
width:100%;
}

.sentence{
margin:2% auto;
width:100%;
}


/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#recruit{width:80%}

 /* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#recruit{width:75%}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#recruit{width:90%}

 /* *************** */
}





/* ************************************************************
◆ block03 ◆ System
************************************************************ */
#system{
margin:7% auto;
width:100%;
background-color:#fefdd5;
padding:8%;
}

/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
	
#system{padding:8%;}
 /* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#system{padding:8% 3%;}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#system{padding:8% 1%;}


 /* *************** */
}


/* ************************************************************
block05 news
************************************************************ */

#news {
 margin:5% auto 0;
	width:100%;
	max-width:800px;
}

.title03{
margin:2% auto;
width:100%;
}

#feed{
margin:4% auto;
width:90%;
}

#feed li{
	width:100%;
	margin-top:10px;
	margin-bottom:1%;
	padding-top:2%;
	padding-bottom:2%;
	padding-right:5%;
	border-bottom: 1px #4b4b4b solid;
	font-size:14px;
	letter-spacing: 0.05em;
	text-align:left;
	height:auto;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#feed p
{
	display:inline-block;
	margin-left:2%;
	margin-right:3%;
}

/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
  

#news {
margin:4% auto;
padding:5%;}

.title03{margin:0 auto 3%;}

#feed li{
	margin:0 auto;
	width:90%;}
	

 /* *************** */
	}
   
	
/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */


@media screen and (max-width: 768px) {
 /* ************** */
.title03 img{
margin:2% auto;
width:40%;}

#feed{
	margin:0 auto;
	width:95%;}
	
#feed li
{
	width:100%;
	margin:0 auto;
	margin-top:12px;
	margin-bottom:1%;
	font-size:14px;
	height:auto;
}

#feed p
{
	display:block;
	margin-left:0;
	margin-right:2%;
	padding-bottom:1%;
}

 /* *************** */
	}
    


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
	
	#news{width:95%;}

.title03 img{
margin:4% auto 2%;
width:48%;
}

#feed{
	margin:0 auto;
	width:95%;}
	

#feed li{
	font-size:12px;
	height:auto;
}
#feed p
{padding-bottom:2%;}

 /* *************** */
	}




/* ************************************************************
◆ block06 ◆ notice
************************************************************ */
#notice{
margin:10% auto;
width:100%;
max-width:1000px;
}

.staff-btn{
margin:10% auto;
width:100%;
padding:0 4%;
}

#notice dl{
margin:0 0 0 2%;
width:100%;
position:relative
}

#notice dt{
margin:0.8% auto 0;
width:35%;
float:left;
}

#notice dd{
margin:1% auto;
width:60%;
float:left}

#notice ul{
margin:1% auto;
width:70%;
font-size:12px;
text-align:left;
line-height:1.6;
letter-spacing: 0.05em;
}


/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#notice{
margin:7% auto;
padding:2%
}

#notice ul{
width:90%;
}
.staff-btn{
margin:0% auto 15%;
width:100%;
padding:0 4%;
}
 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#notice{
margin:5% auto;}

#notice dl{
margin:0 auto;
width:90%;}

#notice dt{
margin:2% auto 4%;
width:80%;
float:none;
}

#notice dt img{width:50%;}
#notice dd{
margin:0 auto;
width:100%;
float:none
}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */

#notice dl{width:95%}

#notice ul{
margin:3% auto;
width:90%;
line-height:1.7;
text-indent:-1em;
}

 /* *************** */
}



/* ************************************************************
◆ block07 ◆ reserve
************************************************************ */
#reserve{
margin:5% auto;
width:100%;
max-width:800px;
position: relative
}

.r-p1{
margin:0 auto;
width:35%;
float:left;
}

.r-p2{
margin:0 auto;
margin-left:4%;
width:58%;
float:left;
}

/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#reserve{width:90%}
 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */

.r-p1{
margin:10% auto 0;
width:80%;
float:none;
}
.r-p1 img{
width:70%
}

.r-p2{
margin:5% auto;
width:80%;
float:none;
}

.r-p2 + .r-p2 {
	margin-top: -5%;
}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */

.r-p2{
margin:5% auto;
width:90%;
float:none;
}

 /* *************** */
}


/* ************************************************************
◆ block08 ◆ photo
************************************************************ */
#photo{
margin:10% auto;
width:100%;
max-width:1000px;
}

#photo ul{
margin:5% auto;
width:100%;
position:relative;
font-size:0;
}

#photo ul li{
margin:0 auto;
width:25%;
display:inline-block;
padding:0.5%;
border-radius:10px;
}

#photo ul li img{
border-radius:10px;
}


/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */

#photo ul{
margin:15% auto;
width:90%;
}

#photo ul li{
width:50%;
padding:1%;
}

 /* *************** */
}


/* ************************************************************
◆ block09 ◆ information
************************************************************ */
#information{
margin:10% auto;
width:100%;
max-width:550px;
}

#information ul{
margin:5% auto 10%;
width:100%;
}

#information ul li{
margin:0 auto;
margin-left:10%;
width:100%;
color:#000;
font-size:16px;
letter-spacing: 0.05em;
line-height:2;
text-align: left;
text-indent:-1em;
}

#information .info-btn{
margin:2% auto;
text-align: center;
}

#information a{
margin:0;
width:100%;
color:#503e00;
font-size:18px;
letter-spacing: 0.1em;
line-height:2;
text-align: left;
border:1px solid #503e00;
padding:4.5% 20%;
}
#information a:hover{
background-color:#6f5809;
color:#fff;
border:1px solid #6f5809;
transition: 0.3s;
}

/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#information ul li{
font-size:14px;
}
/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
.title04 img{
margin:2% auto;
width:50%;}


#information ul{
width:85%;
}
#information ul li{
margin:0 auto;
margin-left:auto;
font-size:12px;
}

 /* *************** */
}


/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */

.title04 img{
margin:4% auto 2%;
width:55%;
}



 /* *************** */
	}





/* ************************************************************
◆ block10 ◆ ggmap
************************************************************ */


.ggmap {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}


/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */

/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */

 /* *************** */
}


/* ************************************************************
◆ オープン記念諸々 ◆ 
************************************************************ */

.open-service{
margin:5% auto 3%;
width:100%;
}

.open-service + .open-service {
	margin-top: 3%;
}


/* ▼▼▼▼▼▼▼▼MaxWidth1024(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */

/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */

.open-service{
margin:8% auto 3%;
width:90%;
}
.corona{
margin:8% auto 6%;
width:70%;
}
 /* *************** */
}
