.main{background-color: #f4f3ec;}

.mv{background-color: #fff;border-bottom: 3px solid #e9e8e0;position: relative;overflow: hidden;height: 567px;}
.mv-bg{position: absolute;left: 0;width: 100%;}
.mv-bg--back{bottom:236px;width: 100%;height: 100%;}
.mv-bg--back span{display: block;width: 907px;position: absolute;bottom: 0;}
.mv-bg--back span:nth-of-type(1){left: calc(50% - 1035px);}
.mv-bg--back span:nth-of-type(2){left: calc(50% - 130px);}
.mv-bg--back span:nth-of-type(3){left: calc(50% - 1942px);}
.mv-bg--back span:nth-of-type(4){left: calc(50% + 777px);}
.mv-bg--back::before{background-color: #e9e8df;content: "";position: absolute;bottom: -235px;left: 0;width: 100%;height: 237px;}
.mv-bg--front{bottom:-15px;width: 100%;height: 100%;transition: transform .3s ease;}
.mv-bg--front span{display: block;width: 1777px;position: absolute;bottom: 0;}
.mv-bg--front span:nth-of-type(1){left: calc(50% - 1400px);}
.mv-bg--front span:nth-of-type(2){left: calc(50% - 200px);}
.mv-bg--front::after{background-color: #f4f3ec;content: "";position: absolute;bottom: -399px;left: 0;width: 100%;height: 400px;}
.mv-plane{position: absolute;top: 50px;left: calc(50% + 320px);width: 130px;animation: plane 10s linear infinite;}
.mv-heading{display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, auto);gap: 55px 25px;position:absolute;top: 70px;left: calc(50% - 173px);width: 347px;z-index: +1;}
.mv-heading span{text-align: center;width: 68px;animation: title .2s ease-out forwards;transform-origin: right bottom;opacity: 0;}
.mv-heading span:nth-of-type(1){animation-delay: .5s;}
.mv-heading span:nth-of-type(2){animation-delay: .65s;}
.mv-heading span:nth-of-type(3){animation-delay: .8s;}
.mv-heading span:nth-of-type(4){animation-delay: .95s;}
.mv-heading span:nth-of-type(5){animation-delay: 1.05s;}
.mv-heading span:nth-of-type(6){animation-delay: 1.2s;}
.mv-heading span:nth-of-type(7){animation-delay: 1.35s;}
.mv-heading span:nth-of-type(8){animation-delay: 1.5s;}
.mv-heading span:nth-of-type(9){animation-delay: 1.65s;}
.mv-heading span:nth-of-type(10){animation-delay: 1.8s;}
.mv-heading span:nth-of-type(11){animation-delay: 1.95s;}
.mv-heading span:nth-of-type(12){animation-delay: 2.05s;}
@media only screen and (max-width: 767px) {
	.mv{border-bottom: none;height: 280px;}
	.mv-bg--back{bottom:100px;}
	.mv-bg--back span{width: 400px;}
	.mv-bg--back span:nth-of-type(1){left: calc(50% - 400px);}
	.mv-bg--back span:nth-of-type(2){left: calc(50% - 0px);}
	.mv-bg--back span:nth-of-type(3){left: calc(50% - 971px);display: none;}
	.mv-bg--back span:nth-of-type(4){left: calc(50% + 388px);display: none;}
	.mv-bg--back::before{bottom: -99px;height: 100px;}
	.mv-bg--front{bottom:-5px;}
	.mv-bg--front span{display: block;width: 888px;position: absolute;bottom: 0;}
	.mv-bg--front span:nth-of-type(1){left: calc(50% - 870px);}
	.mv-bg--front span:nth-of-type(2){left: calc(50% - 295px);}
	.mv-bg--front::after{bottom: -294px;height: 300px;}
	.mv-plane{top: 35px;left: calc(50% + 108px);width: 60px;animation: plane_sp 10s linear infinite;}
	.mv-heading{gap: 26px 15px;top: 34px;left: calc(50% - 92px);width: 185px;}
	.mv-heading span{width: 35px;animation: title_sp .2s ease-out forwards;}
	.mv-heading span:nth-of-type(1) img{width: 31px;}
	.mv-heading span:nth-of-type(2) img{width: 30px;}
	.mv-heading span:nth-of-type(3) img{width: 31px;}
	.mv-heading span:nth-of-type(4) img{width: 29px;}
	.mv-heading span:nth-of-type(5) img{width: 32px;}
	.mv-heading span:nth-of-type(6) img{width: 33px;}
	.mv-heading span:nth-of-type(7) img{width: 30px;}
	.mv-heading span:nth-of-type(8) img{width: 32px;}
	.mv-heading span:nth-of-type(9) img{width: 35px;}
	.mv-heading span:nth-of-type(10) img{width: 34px;}
	.mv-heading span:nth-of-type(11) img{width: 34px;}
	.mv-heading span:nth-of-type(12) img{width: 35px;}
}
@keyframes title {
	0%{transform: rotate(-10deg) translate(-10px,-10px);opacity: 0;}
	1%{transform: rotate(-10deg) translate(-10px,-10px);opacity: 1;}
	100%{transform: rotate(0deg) translate(0,0);opacity: 1;}
}
@keyframes title_sp {
	0%{transform: rotate(-10deg) translate(-5px,-5px);opacity: 0;}
	1%{transform: rotate(-10deg) translate(-5px,-5px);opacity: 1;}
	100%{transform: rotate(0deg) translate(0,0);opacity: 1;}
}
@keyframes plane {
	0%{transform: translate(400px,200px);}
	50%{transform: translate(-300px,-150px);}
	100%{transform: translate(-300px,-150px);}
}
@keyframes plane_sp {
	0%{transform: translate(200px,100px);}
	50%{transform: translate(-200px,-75px);}
	100%{transform: translate(-200px,-75px);}
}

.people{margin-top: 70px;display: flex;justify-content: center;position: relative;z-index: 10;}
.people img{width: 100%;}
.people-inner{position: relative;width: 100%;max-width: 626px;}
.people-person{position: absolute;bottom: 0;opacity: 0;animation: person .5s cubic-bezier(0,.56,.37,1.4) forwards;}
.people-person--01{left: calc((8/626)*100%);width: calc((113/626)*100%);animation-delay: 2.45s;}
.people-person--02{left: calc((133/626)*100%);width: calc((84/626)*100%);animation-delay: 2.25s;}
.people-person--03{left: calc((186/626)*100%);width: calc((160/626)*100%);animation-delay: 2.05s;}
.people-person--04{left: calc((337/626)*100%);width: calc((101/626)*100%);animation-delay: 2.05s;}
.people-person--05{left: calc((458/626)*100%);width: calc((67/626)*100%);animation-delay: 2.25s;}
.people-person--06{left: calc((531/626)*100%);width: calc((95/626)*100%);animation-delay: 2.45s;}
.people-decoration{position: absolute;bottom: 0;opacity: 0;animation: fade .5s linear forwards;}
.people-decoration--blinking{opacity: 0;animation: decoration 8s linear infinite;}
.people-decoration--01{left: calc((431/626)*100%);margin-bottom: calc((193/626)*100%);width: calc((15/626)*100%);animation-delay: 2.05s;}
.people-decoration--02{left: calc((260/626)*100%);margin-bottom: calc((207/626)*100%);width: calc((23/626)*100%);animation-delay: 2.05s;}
.people-decoration--03{left: calc((367/626)*100%);margin-bottom: calc((213/626)*100%);width: calc((15/626)*100%);animation-delay: 2.05s;}
.people-decoration--04{left: calc((71/626)*100%);margin-bottom: calc((216/626)*100%);width: calc((33/626)*100%);animation-delay: 2.45s;}
.people-decoration--05{left: calc((498/626)*100%);margin-bottom: calc((201/626)*100%);width: calc((17/626)*100%);animation-delay: 2.25s;}
.people-decoration--06{left: calc((597/626)*100%);margin-bottom: calc((204/626)*100%);width: calc((18/626)*100%);animation-delay: 2.45s;}
.people-decoration--07{left: calc((0/626)*100%);margin-bottom: calc((190/626)*100%);width: calc((39/626)*100%);animation-delay: 4s;}
.people-decoration--08{left: calc((522/626)*100%);margin-bottom: calc((172/626)*100%);width: calc((37/626)*100%);animation-delay: 6.5s;}
.people-decoration--09{left: calc((120/626)*100%);margin-bottom: calc((192/626)*100%);width: calc((38/626)*100%);animation-delay: 9s;}
@media only screen and (max-width: 767px) {
	.people{margin-top: 26px;}
	.people-inner{max-width: 296px;}
}
@keyframes person {
	0%{opacity: 0;transform: translateY(30px);}
	50%{opacity: 1;}
	100%{opacity: 1;transform: translateY(0px);}
}
@keyframes fade {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes decoration {
	0%{opacity: 0;}
	1%{opacity: 1;}
	30%{opacity: 1;}
	33%{opacity: 0;}
	100%{opacity: 0;}
}


.article{background: url(/club-me/knowledge/tour/img/bg-pattern.png) center top repeat-y;margin-top: -70px;position: relative;}
.article .container{position: relative;z-index: +3;}
.article-wrap{max-width: 1598px;margin-left: auto;margin-right: auto;position: relative;padding-bottom: 115px;}
.article-wrap::before{background: url(/club-me/knowledge/tour/img/bg-white.svg) center top/100% auto no-repeat;content: "";position: absolute;top: 0;left: 0;padding-bottom: calc((94/1598)*100%); width: 100%;z-index: +2;}
.article-line{position: absolute;top: 0;left: calc(50% - ((280/1598)*50%));width: calc((280/1598)*100%);height: 100%;z-index: +1;}
.article-line span{background-color: #faf9f4;display: block;width: 100%;height: 100%;transform-origin: center top;transform: scaleY(0);transition: transform 1s ease;}
@media only screen and (max-width: 767px) {
	.article{background: url(/club-me/knowledge/tour/img/bg-pattern_sp.png) center top/100% auto repeat-y;margin-top: -26px;}
	.article-wrap{padding-bottom: 50px;}
	.article-line{left: calc(50% - ((140/750)*100vw));width: calc((280/750)*100vw);}
}

.greeting{font-size: calc((20/12)*100%);line-height: calc(50/20);text-align: center;padding-top: 130px;}
@media only screen and (max-width: 767px) {
	.greeting{font-size: calc((14/10)*100%);line-height: calc(57/28);padding-top: 60px;}
}

.section{margin-left: auto;margin-right: auto;max-width: 1174px;margin-top: 110px;}
.section+.section{margin-top: 170px;}
@media only screen and (max-width: 767px) {
	.section{margin-top: 90px;}
	.section+.section{margin-top: 110px;}
}

.visit{display: flex;align-items: flex-start;justify-content: space-between;position: relative;}
.visit-char{position: absolute;z-index: +1;}
.visit-img{border-radius: 10px;position: relative;width: calc((550/1174)*100%);z-index: +1;}
.visit-img::before{border-radius: 10px;content: "";position: absolute;top: -20px;left: -20px;width: 100%;height: 100%;z-index: -1;}
.visit-img img{border-radius: 10px;width: 100%;}
.visit-details{position: relative;padding-top: 30px;width: calc((530/1174)*100%);letter-spacing: .07em;}
.visit-details__no{font-family: "Raleway", sans-serif;font-size: calc((130/12)*100%);font-weight: 400;line-height: 1;position: absolute;bottom: calc(100% - 30px);right: calc((20/530)*-100%);}
.visit-details__heading{font-size: calc((28/12)*100%);font-weight: 700;line-height: calc(46/28);}
.visit-details__text{font-size: calc((16/12)*100%);line-height: calc(36/16);margin-top: 20px;}
.visit-details__link{margin-top: 15px;}
.visit-details__link>a{background-color: #fff;border-radius: 23px;color: #222;display: flex;align-items: center;justify-content: center;font-size: calc((15/12)*100%);font-weight: 700;overflow: hidden;position: relative;padding: 0 20px;width: 220px;height: 46px;box-shadow: 5px 5px 0 0 #e6e5de;}
.visit-details__link>a:hover{text-decoration: none;}
.visit-details__link>a>span{background: url(/club-me/knowledge/tour/img/arw-link_black.svg) right center/22px auto no-repeat;display: block;text-align: center;position: relative;width: 100%;}
.visit.visit--reverse .visit-img{order: 2;}
.visit.visit--reverse .visit-img::before{left: 20px;}
.visit.visit--reverse .visit-details{order: 1;}

/* variation ------------------------------ */
.visit.theme--01 .visit-char{bottom: calc((11/360)*-100%);left: calc((70/550)*-100%);width: calc((56/550)*100%);}
.visit.theme--01 .visit-img::before{background-color: var(--theme-color-01);}
.visit.theme--01 .visit-details__no,
.visit.theme--01 .visit-details__heading{color: var(--theme-color-01);}
.visit.theme--02 .visit-char{bottom: calc((3/360)*-100%);left: calc((97/550)*-100%);width: calc((113/550)*100%);}
.visit.theme--02 .visit-img::before{background-color: var(--theme-color-02);}
.visit.theme--02 .visit-details__no,
.visit.theme--02 .visit-details__heading{color: var(--theme-color-02);}
.visit.theme--03 .visit-char{bottom: calc((11/360)*-100%);left: calc((82/550)*-100%);width: calc((68/550)*100%);}
.visit.theme--03 .visit-img::before{background-color: var(--theme-color-03);}
.visit.theme--03 .visit-details__no,
.visit.theme--03 .visit-details__heading{color: var(--theme-color-03);}
.visit.theme--04 .visit-char{bottom: calc(100% - ((43/360)*100%));left: calc((35/550)*-100%);width: calc((56/550)*100%);}
.visit.theme--04 .visit-img::before{background-color: var(--theme-color-04);}
.visit.theme--04 .visit-details__no,
.visit.theme--04 .visit-details__heading{color: var(--theme-color-04);}
@media (hover: hover) {
	.visit-details__link>a{transition: color .5s ease;}
	.visit-details__link>a:hover{color: #fff;}
	.visit-details__link>a::before{background-color: #222;border-radius: 23px;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: translateX(-101%);transition: transform .5s ease;}
	.visit-details__link>a:hover::before{transform: translateX(0%);}
	.visit-details__link>a>span{transition: background-image .5s ease;}
	.visit-details__link>a:hover>span{background-image: url(/club-me/knowledge/tour/img/arw-link_white.svg);}
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
	.visit.theme--02 .visit-char{left: calc((67/550)*-100%);}
	.visit.theme--04 .visit-char{left: calc((15/550)*-100%);}
}
@media only screen and (max-width: 767px) {
	.visit{display: block;margin-left: 15px;margin-right: 15px;}
	.visit-img{border-radius: 5px;width: auto;margin-left: 11px;}
	.visit-img::before{border-radius: 5px;top: -10px;left: -10px;}
	.visit-img img{border-radius: 5px;}
	.visit-details{position:initial;padding-top: 28px;width: auto;}
	.visit-details__no{font-size: calc((65/10)*100%);bottom: 100%;right: -30px;margin-bottom: 20px;}
	.visit-details__heading{font-size: calc((17/10)*100%);line-height: calc(56/34);}
	.visit-details__text{font-size: calc((13/10)*100%);line-height: calc(48/26);margin-top: 10px;}
	.visit-details__link{margin-top: 15px;}
	.visit-details__link>a{border-radius: 19px;font-size: calc((13/10)*100%);padding: 0 15px;width: 180px;height: 38px;box-shadow: 3px 3px 0 0 #e6e5de;margin: 0 auto;}
	.visit-details__link>a>span{background-size: 18px auto;}
	.visit.visit--reverse .visit-img{margin-left: auto;margin-right: 11px;}
	.visit.visit--reverse .visit-img::before{left: 10px;}
	.visit.visit--reverse .visit-details__no{right: auto;left: -30px;}

	/* variation ------------------------------ */
	.visit.theme--01 .visit-char{bottom: -1px;left: -35px;width: 27px;}
	.visit.theme--02 .visit-char{bottom: -3px;left: -50px;width: 56px;}
	.visit.theme--03 .visit-char{bottom: -6px;left: -36px;width: 33px;}
	.visit.theme--04 .visit-char{bottom: calc(100% - 19px);left: -20px;width: 26px;}
}