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

#indexSec{
background: #f5f1ee;
margin-bottom: 0;
padding: 40px 0 60px;
}

.kobitoImg {
text-align: center;
}

.menuList {
width: 90%;
max-width: 1360px;
margin: 0 auto;
}
.menuList ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.menuList ul li {
width: 32%;
max-width: 410px;
position: relative;
margin-right: 2%;
margin-bottom: 100px;
}

.menuList ul li:nth-child(3){
margin-right: 0;
}
.menuList ul li:nth-child(4){
margin-right: 10%;
}
.menuList ul li:last-child{
margin-right: 0;
}
.menuList ul li.li02 {
margin-top: 15%;
}


.menuList ul li .balloon {
position: absolute;
z-index: 2;
}
.menuList ul li.li01 .balloon {
left: 10%;
top: -50px;
}
.menuList ul li.li02 .balloon {
right: 10%;
top: -50px;
}
.menuList ul li.li03 .balloon {
left: 10%;
top: -50px;
}
.menuList ul li.li04 .balloon {
left: 10%;
top: -50px;
}
.menuList ul li.li05 .balloon {
left: 15%;
top: -50px;
}


.menuList ul li .bscBtn01 {
width: 65%;
position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  top: 90%;
  z-index: 99;
}

.menuList ul li .circleImg {
position: relative;
}
.menuList ul li .menuInfo {
width: 100%;
text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  z-index: 2;
}

.menuList ul li .menuInfo .kobito {
width: 80%;
max-width: 250px;
margin: 0 auto;
line-height: 0 !important;
}
.menuList ul li .menuInfo .info {
font-size: 18px;
font-size: 1.8rem;
letter-spacing: 0;
margin-bottom: 10px;
font-weight: 500;
}
.menuList ul li .menuInfo h2 {
font-size: 36px;
font-size: 3.6rem;
letter-spacing: 0;
font-weight: 700;
}

.menuList ul li .menuInfo small {
    font-size: 70%;
}
.menuList ul li .menuInfo h2 span {
color: #8bac61;
font-size: 14px;
font-size: 1.4rem;
font-family: 'Quicksand', sans-serif;
display: block;
font-weight: 600;
padding-top: 10px;
}

.menuList ul li .circleImg .over {
position: absolute;
z-index: 1;
width: 40%;
}

.menuList ul li.li01 .circleImg .over {
top: 0;
right: -10px;
}
.menuList ul li.li02 .circleImg .over {
bottom: 0;
right: -10px;
width: 26%;
}
.menuList ul li.li03 .circleImg .over {
top: 0;
right: -10px;
}
.menuList ul li.li04 .circleImg .over {
top: 60px;
left: -30px;
width: 26%;
}
.menuList ul li.li05 .circleImg .over {
bottom: -20px;
right: -10px;
}

@media only screen and (max-width: 1300px) {
.menuList ul li .menuInfo .kobito {
    width: 56%;
 }
}
@media only screen and (max-width: 1200px) {
.menuList ul li .menuInfo .info {
    font-size: 16px;
    font-size: 1.6rem;
}
.menuList ul li .menuInfo h2 {
    font-size: 30px;
    font-size: 3.0rem;
}
.menuList ul li .menuInfo h2 span {
    font-size: 12px;
    font-size: 1.2rem;
}
.menuList ul li .balloon {
width: 50%;
}
.menuList ul li .balloon img{
width: 100%;
}
}
@media only screen and (max-width: 1024px) {

.menuList ul li.li02 {
    margin-top: 0;
}
.menuList {
padding-top: 100px;
}
.menuList ul li:nth-child(4) {
    margin-right: 2%;
}
.menuList ul li .balloon {
    top: -40px!important;
}
}
@media only screen and (max-width: 900px) {
.kobitoImg {
width: 50%;
margin: 0 auto;
}
.kobitoImg img {
width: 100%;
}
.menuList ul li .menuInfo h2 {
    font-size: 24px;
    font-size: 2.4rem;
}
.menuList ul li .menuInfo .info {
    font-size: 14px;
    font-size: 1.4rem;
}
.menuList ul li .bscBtn01 {
    width: 85%;
}
.menuList ul li .circleImg .over {
display: none;
}
}

@media only screen and (max-width: 480px) {
.kobitoImg {
    width: 90%;
}
.menuList ul li {
width: 100%;
margin-right: 0!important;
background: #fff;
border-radius: 10px;
}



.menuList ul {
justify-content: flex-start;
}
.menuList ul li .menuInfo .kobito {
    width: 74%;
}
.menuList ul li .menuInfo .info {
    margin-bottom: 5px;
}
.menuList ul li .balloon {
  left: 50%!important;
  transform:translateX(-50%)!important;
  -webkit- transform:translateX(-50%)!important;
  width: 50%;
}
.menuList ul li .menuInfo h2 span {
    font-size: 10px;
    font-size: 1.0rem;
}
.menuList {
    padding-top: 60px;
}
#indexSec {
    padding: 40px 0 0;
}
}