@charset "UTF-8";
/* menu/menu_01.html */


#introSec {
background: #f5f1ee;
padding: 80px 0;
margin-bottom: 0;
}

.isInr {
width: 90%;
max-width: 940px;
margin: 0 auto;
position: relative;
z-index: 1;
}

.isInr .kobito01 {
position: absolute;
width: 45%;
top: -80px;
left: -20%;
z-index: 2;
}

.isInr .kobito02 {
position: absolute;
width: 30%;
top: -30px;
  right: -20%;
  z-index: 2;
}


.isCircle {
width: 100%;
position: relative;
}

.isInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 80%;
}
.isInfo h2 {
text-align: center;
font-size: 48px;
font-size: 4.8rem;
font-weight: 700;
color: #8bac61;
line-height: 1.7;
}

.isInfo h3 {
text-align: center;
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
padding: 40px 0;
}

.isInfo .isTxt {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
letter-spacing: 0;
}


.isInr .over01{
position: absolute;
}

.isInr .over01 {
    top: 120px;
    right: -22%;
    z-index: 1;
}



.imgList {
width: 90%;
max-width: 1600px;
margin: -20px auto 0;
position: relative;
z-index: 2;
}
.imgList ul {
display: flex;
justify-content: space-between;
}
.imgList ul li {
width: 19%;
}
.imgList .over02 {
    position: absolute;
    top: -90px;
    left: 10%;
    z-index: 1;
}

.imgList .over03 {
    position: absolute;
    bottom: -40px;
    right: -3%;
    z-index: 1;
}


#kobitoSec {
background: url("../../lib/cmn_img/gizagiza_02.gif") left top repeat-x;
padding-top: 100px;
margin-bottom: 0;
position: relative;
padding-bottom: 100px;
}

#kobitoSec:before {
content: "KOBITO no MORI";
font-family: 'Quicksand', sans-serif;
font-size: 10vw;
color: #f5f1ee;
text-align: center;
width: 100%;
left: 0;
top: 6%;
position: absolute;
font-weight: bold;
z-index: 0;
}

#kobitoSec .ksInr {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
position: inherit;
z-index: 2;
}

#kobitoSec .ksInr .Img {
width: 46%;
max-width: 550px;
}
#kobitoSec .ksInr .ksInfo {
width: 50%;
}
#kobitoSec .ksInr .ksInfo h2 {
font-size: 36px;
font-size: 3.6rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.7;
}

#kobitoSec .ksInr .ksInfo h2 small {
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
display: block;
}
#kobitoSec .ksInr .ksInfo .ksTxt {
margin-bottom: 30px;
font-weight: 500;
}



#roleSec {
background: url("../../lib/cmn_img/gizagiza.png") left top repeat-x;
padding-top: 10px;
margin-bottom: 0;
position: relative;
}

#roleSec .roleBg {
background: #f5f1ee;
padding-bottom: 100px;
}

#roleSec .kobitoImg {
position: absolute;
top: -5%;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  width: 40%;
  max-width: 632px;
}

#roleSec .rsInr {
width: 90%;
max-width: 1100px;
margin: 0 auto;
padding-top: 20%;
}

#roleSec .rsInr h2 {
font-size: 48px;
font-size: 4.8rem;
color: #8bac61;
font-weight: 700;
text-align: center;
}


#roleSec .rsInr h3 {
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
padding: 30px 0;
text-align: center;
}
#roleSec .rsInr .rsTxt {
width: 100%;
max-width: 720px;
margin: 0 auto;
font-weight: 500;
}
.rsList {
padding-top: 100px;
}
.rsList ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.rsList ul li {
width: 24%;
max-width: 242px;
margin: 0 4.6% 120px;
position: relative;
}

.rsList ul li .overTxt01,
.rsList ul li .overTxt04{
position: absolute;
left: -10px;
top: -70px;
z-index: 2;
}

.rsList ul li .overTxt02,
.rsList ul li .overTxt03,
.rsList ul li .overTxt05{
position: absolute;
right: -10px;
top: -70px;
z-index: 2;
}


.rsList ul li .rsInfo{
position: relative;
z-index: 1;
}
.rsList ul li .rsInfo .Txt{
font-size: 24px;
font-size: 2.4rem;
font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 100%;
  text-align: center;
  line-height: 1.3!important;
}

.rsList ul li .rsInfo .Txt small {
display: none;
}

.rsList ul li .overKobito01,
.rsList ul li .overKobito03,
.rsList ul li .overKobito04,
.rsList ul li .overKobito05{
position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
bottom: -80px;
z-index: 2;
}

.rsList ul li .overKobito02{
position: absolute;
  left: -10%;
bottom: -60px;
z-index: 2;
}

#roleSec .rsInr .bscBtn01 {
width: 340px;
margin:  0 auto;
}


@media only screen and (max-width: 1280px) {
.isInr .kobito01 {
    width: 30%;
    left: -5%;
}
.isInr .kobito02 {
    width: 19%;
    right: 0%;
}
.isInr .over01 {
    top: 60px;
    right: -8%;
}
.imgList .over02 {
    width: 18%;
}
.imgList .over03 {
    width: 9%;
}
}
@media only screen and (max-width: 1024px) {
.isInr .kobito01 {
    left: 0%;
}
.isInr .kobito02 {
    right: 4%;
}
#kobitoSec .ksInr .ksInfo h2 small {
    font-size: 20px;
    font-size: 2.0rem;
}
#kobitoSec .ksInr .ksInfo h2 {
    font-size: 30px;
    font-size: 3.0rem;
}
.imgList .over02 {
    top: -40px;
}
}


@media only screen and (max-width: 900px) {
.isCircleImg {
display: none;
}
.isInr .kobito{
position: inherit;
top: inherit;
left: inherit;
transform: none;
margin: 0 auto 30px;
}
.isInfo{
position: inherit;
top: inherit;
left: inherit;
transform: none;
width: 100%;
margin-bottom: 30px;
}

.isInr .over01 {
display: none;
}
.isInr .kobito01 {
    left: -5%;
}
.isInr .kobito02 {
    right:-5%;
}
.isInfo h2 {
    font-size: 38px;
    font-size: 3.8rem;
    line-height: 1.3;
}
.imgList .over02 {
display: none;
}
.imgList .over03 {
display: none;
}

.imgList {
    margin: 0 auto;
    padding-top: 40px;
}

#kobitoSec .ksInr {
    display: block;
}
#kobitoSec .ksInr .Img {
    width: 90%;
    margin: 0 auto 40px;
    padding-top: 5%;
}
#kobitoSec .ksInr .ksInfo {
    width: 100%;
}
#kobitoSec .ksInr .ksInfo h2 {
text-align: center;
}
.rsList ul li {
    width: 30%;
    margin: 0 1.6% 120px;
}
.rsList ul li .rsInfo .Txt {
    font-size: 20px;
    font-size: 2.0rem;
}
.overKobito01 img,
.overKobito02 img,
.overKobito03 img,
.overKobito04 img,
.overKobito05 img {
width: 100%;
}

.rsList ul li .overKobito01, 
.rsList ul li .overKobito02,
.rsList ul li .overKobito03,
.rsList ul li .overKobito04,
.rsList ul li .overKobito05 {
    width: 80%;
}

}




@media only screen and (max-width: 480px) {
.isInr .kobito {
    width: 80%;
}
.isInfo h2 {
    font-size: 36px;
    font-size: 3.6rem;
}
.isInfo h2 span small {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 400;
    bottom: -15px;
}
.isInfo h3 {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.7;
}

#introSec {
padding: 60px 0;
}

.isInr .kobito01 {
position: inherit;
left: inherit;
top: inherit;
width: 49%;
display: inline-block;
}
.isInr .kobito02 {
position: inherit;
right: inherit;
top: inherit;
width: 33%;
display: inline-block;
}
.kobitoBox {
text-align: center;
}
.isInfo h2 {
    font-size: 30px;
    font-size: 3.0rem;
}
.isInfo h3 {
    padding: 20px 0;
}
.isInfo .isTxt {
    margin-bottom: 20px;
    line-height: 2!important;
}

.imgList ul {
    flex-wrap: wrap;
}

.imgList ul li {
    width: calc(100% / 3);
    line-height: 0;
}

.imgList ul li:nth-child(4),
.imgList ul li:nth-child(5) {
width: calc(100% / 2);
}

#kobitoSec {
padding: 60px 0 80px;
}
#kobitoSec:before {
    top: 5.5%;
}
#kobitoSec .ksInr .ksInfo h2 small {
    font-size: 16px;
    font-size: 1.6rem;
}

#kobitoSec .ksInr .ksInfo h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin-top: -30px;
}
#kobitoSec .ksInr .Img {
    margin: 0 auto;
}
#roleSec .kobitoImg {
    top: -9%;
    width: 75%;
}

#roleSec .rsInr h2 {
    font-size: 30px;
    font-size: 3.0rem;
}

#roleSec .rsInr h3 {
    font-size: 18px;
    font-size: 1.8rem;
    padding: 20px 0;
}
.rsList {
    padding-top: 40px;
}
.rsList ul {
    justify-content: flex-start;
}
.rsList ul li {
    width: 48%;
    margin: 0 4% 40px 0;
}
.rsList ul li:nth-child(even) {
margin-right: 0;
}

.overTxt01,
.overTxt02,
.overTxt03,
.overTxt04,
.overTxt05 {
display: none;
}

.rsList ul li .rsInfo .Txt small {
display: block;
font-size: 12px;
font-size: 1.2rem;
padding: 6px 0;
border-radius: 100px;
width: 90%;
margin: -20px auto 10px;
}

.rsList ul li:nth-child(1) .rsInfo .Txt small {
background: #c7e3e4;
}
.rsList ul li:nth-child(2) .rsInfo .Txt small {
background: #dbe6c6;
}
.rsList ul li:nth-child(3) .rsInfo .Txt small {
background: #f9e5e5;
}
.rsList ul li:nth-child(4) .rsInfo .Txt small {
background: #faecce;
}
.rsList ul li:nth-child(5) .rsInfo .Txt small {
background: #c7e3e4;
}


.rsList ul li {
    background: #fff;
    border-radius: 10px;
}
.rsList ul li .overKobito01,
.rsList ul li .overKobito02,
.rsList ul li .overKobito03,
.rsList ul li .overKobito04,
.rsList ul li .overKobito05 {
    position: inherit;
    left: inherit;
    right: inherit;
    transform: none;
    bottom: inherit;
    margin: 0 auto;
}
.rsList ul li .rsInfo .Txt {
    position: inherit;
    left: inherit;
    top: inherit;
    transform: none;
}

.rsList ul li .rsInfo img {
display: none;
}


#roleSec .roleBg {
    padding-bottom: 60px;
}
}

    
.imgList ul li.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.imgList ul li.fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.imgList ul li.fadein:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
.imgList ul li.fadein:nth-of-type(5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}

    
.rsList ul li.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.rsList ul li.fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.rsList ul li.fadein:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
.rsList ul li.fadein:nth-of-type(5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}