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


/**********************
　共通
**********************/
#wrapper {
    width: 100%;
    background-color: #c6e6ec;
    color: #7b7373;
    overflow: hidden;
    padding-bottom: 8%;
    margin-top: 3.5%;
}

#wrapper img {
	width: 100%;
}
	
#wrapper a {
	text-decoration: none; 
	color: #333333;
	display: block;
}
#wrapper .pc {
	display: none;
}	
	
/*横並び*/
#wrapper .menu_box,.link,.bn_box {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;	
	}	
	
	
@media (min-width: 768px) {
#wrapper {
  max-width: 770px;
  margin: 1.5% auto 8%;
}
#wrapper .sp {
    display: none;
}
#wrapper .pc {
    display: block;
}
}
	
/**********************
  main
**********************/	
	
/*topview*/	
#wrapper .topview {
    margin: -5.5% auto 5%;
}
#wrapper .catch {
    text-align: center;
    font-size: 3.8vw;
    line-height: 1.8em;
    font-weight: 400;
    margin-top: 5%;
}
		
@media (min-width: 768px) {
#wrapper .topview {
    margin: -3% auto 8%;
    }
#wrapper .i-ct {
    font-size: 2.5rem;
}
#wrapper .catch {
    font-size: 1.9rem;
    margin-top: 8%;
}
}	

	
/*menu*/	
#wrapper .menu {
	position: relative;
}
#wrapper .menu-tit {
    width: 50%;
    position: absolute;
    top: -0.5%;
    left: 23%;
    border: solid 2px #acc1c5;
    border-radius: 15px;
    background: #ffffff;
}

#wrapper .menu-tit p {
    font-size: 3.5vw;
    text-align: center;
    padding: 4%;
}

#wrapper .menu_box {
    width: 95%;
    border: solid 2px #acc1c5;
    border-radius: 15px;
    padding: 6% 3% 3%;
    margin-top: -2%;
}

#wrapper .me-list {
    width: 48%;
    padding: 2% 0;
}
#wrapper .up {
    margin-top: 3%;
}
#wrapper .up2 {
    margin-top: -2.8%;
}


@media (min-width: 768px) {
#wrapper .menu-tit {
    width: 40%;
    left: 30%;
}
#wrapper .menu-tit p {
    font-size: 1.8rem;
}
#wrapper .menu_box {
    width: 85%;
     margin-top: 0%;
}
#wrapper .me-list {
    width: 45%;
    padding: 2%;
}
}
	
	
/*item-area*/	
#wrapper .item_area {

}
#wrapper .i-box {
    margin-top: 20%;
}	
#wrapper .link {
    width: 95%;
    margin-top: 8%;
	}
#wrapper .l-box {
    width: 48%;
    background-color: #acc1c5;
    border-radius: 25px;
    padding: 3% 0;
}
#wrapper .l-box p {
    color: #ffffff;
    font-size: 3.5vw;
    text-align: center;
}
#wrapper .aroow {
    font-size: 3vw;
    padding-left: 2%;	
}


@media (min-width: 768px) {
#wrapper .link {
    width: 90%;
}
#wrapper .l-box p {
    font-size: 2.5rem;
}
#wrapper .aroow {
    font-size: 2.2rem;
}
}
	
	
/*ohter*/
#wrapper .ohter {
    width: 95%;
    margin: 18% auto 0;
    padding-top: 5%;
}
#wrapper .oh-pic {
    width: 65%;
    margin: 0 auto 5%;
    display: block;
}
#wrapper .list {
    width: 48%;
}