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


#about .wrapper_s{
max-width: 1100px;
}
#about img{
border-radius: 30px;
}
@media only screen and (max-width:768px){
#about .wrapper_s{
max-width: 90%;
}
}
@media only screen and (max-width:480px){
#about img{
border-radius: 20px;
}
}
/************************************

#concept

************************************/

#concept article{
margin:0 0 80px;
}
#concept article h3{
font-size:150%;
margin:0 0 50px;
}
#concept article p{
line-height: 2;
text-align: left;
}

#concept .sec1{
}
#concept .sec1 .image{
margin:0 auto 40px;
}
#concept .sec1 p{
text-align: center;
}
#concept article ul{
text-align: left;
line-height: 1.8;
max-width:600px;
margin:0 auto;
}
#concept article ul li{
position: relative;
margin:0 0 15px;
padding-left:40px;
}
#concept article ul li::before{
position: absolute;
background: url(../images/mark_bagle@2x.png) no-repeat left top;
background-size: 30px;
top: 0;
left: 0px;
width:30px;
height:30px;
color: #000;
content: "";
}
#concept .image2{
width:60%;
}
#concept .text{
width:35%;
padding:30px ;
position:relative;
margin-top:40px;
}
#concept .text::before{
position: absolute;
top: 0;
right: 0px;
width:50px;
height:50px;
border-top:1px solid #54BECC;
border-right:1px solid #54BECC;
content: "";
z-index: 2;
box-sizing: border-box;
}
#concept .text::after{
position: absolute;
bottom: 0;
left: 0px;
width:50px;
height:50px;
border-bottom:1px solid #54BECC;
border-left:1px solid #54BECC;
content: "";
z-index: 2;
box-sizing: border-box;
}
#concept .sec3 .image2{
float:left;
}
#concept .sec3 .text{
float:right;
}
#concept .sec4 .image2{
float:right;
}
#concept .sec4 .text{
float:left;
}
@media only screen and (max-width:768px){
#concept article{
margin:0 0 60px;
}
#concept article h3{
font-size:140%;
margin:0 0 30px;
}
#concept .sec1 p{
text-align: left;
}
#concept .image2{
width:100%;
}
#concept .text{
width:100%;
padding:30px ;
position:relative;
margin-top:40px;
}
#concept .sec3 .image2{
float:none;
}
#concept .sec3 .text{
float:none;
}
#concept .sec4 .image2{
float:none;
}
#concept .sec4 .text{
float:none;
}
}
#concept .sec5 p{
line-height: 2;
margin:0 0 50px;
text-align: center;
}
#concept .sec5 h4{
font-size:120%;
margin:0 0 30px;
}
#concept .sec5 dl{
border-bottom:1px dotted #333;
padding:15px ;
text-align: left;
line-height: 1.8;
max-width:800px;
margin:0 auto;
}
#concept .sec5 dl:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
#concept .sec5 dl dt{
float:left;
width:20%;
font-weight: bold;
}
#concept .sec5 dl dd{
float:right;
width:75%;
}
@media only screen and (max-width:768px){
#concept .sec5 p{
text-align: left;
}
}
/************************************

#staff

************************************/
#staff article{
width:42%;
margin:0 4%;
text-align: left;
}
#staff article .image{
padding-bottom: 0px;
background: url(../about/images/maru_yellow@2x.png) no-repeat center ;
background-size: 50%;
text-align: center;
margin-bottom:20px;
}
#staff article .image img{
width:80%;
margin:0 auto ;
}
#staff article h3{
font-size:120%;
margin:0 0 20px;
text-align: center;
}
#staff article h3 span{
font-size:85%;
}
#staff article p{
line-height: 2;
width:80%;
margin:0 auto;
}
@media only screen and (max-width:768px){
#staff article h3 span{
display:block;
}
#staff article p{
width:100%;
font-size:90%;
}

}
@media only screen and (max-width:480px){
#staff article{
width:100%;
margin:0 5% 30px;
}
}
/************************************

#shop

************************************/
#shop article{
width:46%;
margin:0 0 40px 4%;
text-align: left;
}
#shop article h3{
width:80%;
margin:0 auto 25px;
position: relative;
padding-left:40px;
font-size:120%;
}
#shop article h3::before{
position: absolute;
background: url(../images/mark_bagle@2x.png) no-repeat left top;
background-size: 30px;
top: 0;
left: 0px;
width:30px;
height:30px;
color: #000;
content: "";
}
#shop article ul{
width:80%;
margin:0 auto;
}
#shop article li{
margin:0 0 10px;
line-height: 1.7;
}
#shop article li a{
display:inline-block;
position: relative;
}
#shop article li a::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transition:.5s;
}
#shop article li a:hover::after {
background: #54BECC;
}
@media only screen and (max-width:768px){
#shop article h3{
width:100%;
}
#shop article ul{
width:100%;
font-size:90%;
}
#shop p{
text-align: left;
font-size:90%;
line-height: 1.7;
}
}
@media only screen and (max-width:480px){
#shop article{
width:100%;
margin:0 5% 30px;
}
}