.main{background: url(/club-me/knowledge/saijiki/img/bg-main.jpg) center center/100% auto repeat-y;position: relative;} .main::after{background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 600px;} @media only screen and (max-width: 767px) { .main{background: url(/club-me/knowledge/saijiki/img/bg-main_sp.jpg) center center/100% auto repeat-y;} .main::after{height: 40.6666vw;} } #cmeMain .bg-wave{position: absolute;width: 119.5%;transform: translate(-50%,-50%);} #cmeMain .bg-wave img{width: 100%;} #cmeMain .bg-wave.bg-wave--1{margin-top: -4%;top: 0;left: 22%;} #cmeMain .bg-wave.bg-wave--2{margin-bottom: 2%;bottom: 0;right: -80%;} #cmeMain .bg-pattern{position: absolute;} #cmeMain .bg-pattern img{width: 100%;} #cmeMain .bg-pattern.bg-pattern--1{top: -125px;left: -520px;width: 743px;} #cmeMain .bg-pattern.bg-pattern--2{top: 33.5%;right:-430px;width: 606px;} #cmeMain .bg-pattern.bg-pattern--3{bottom: 8.5%;left: -320px;width: 553px;} @media only screen and (max-width: 767px) { #cmeMain .bg-wave{width: 254.9333vw;} #cmeMain .bg-wave.bg-wave--1{margin-top: -23vw;top: 0;left: -10vw;} #cmeMain .bg-wave.bg-wave--2{margin-bottom: 60vw;bottom: 50%;right: -250vw;} #cmeMain .bg-wave.bg-wave--3{margin-bottom: 163vw;bottom: 0;left: -10vw;} #cmeMain .bg-pattern.bg-pattern--1{top: 21vw;left: -265px;width: 371px;} #cmeMain .bg-pattern.bg-pattern--2{margin-top: -4vw;top: 50%;right: -195px;width: 303px;} #cmeMain .bg-pattern.bg-pattern--3{margin-bottom: 30vw;bottom: 0;left: -165px;width: 276px;} #cmeMain .bg-pattern.bg-pattern--4{top: 28vw;right: -170px;width: 276px;} } @media only print { #cmeMain .bg-wave {display: none !important;} #cmeMain .bg-pattern {display: none !important;} } #cmeMain .mv{position: relative;height: 640px;z-index: 10;} #cmeMain .mv .container{max-width: 1340px;height: 100%;} #cmeMain .mv .mv-column{box-sizing: border-box;display: flex;align-items: center;justify-content: flex-end;position: relative;height: 100%;z-index: +1;} #cmeMain .mv .mv-column::before{background: url(/club-me/knowledge/saijiki/img/mv-img.jpg) right center/cover no-repeat;content: "";position: absolute;top: 0;right: 406px;width: calc(50vw + 264px);height: 100%;z-index: -1;} #cmeMain .mv .mv-heading{display: flex;align-items: center;justify-content: flex-end;margin-right: 18px;padding-bottom: 90px;} #cmeMain .mv .mv-scroll{position: absolute;top: 50%;left: 10px;transform: translateY(-50%);z-index: +2;} @media only screen { #cmeMain .mv .mv-column::before{opacity: 0;transition: opacity 2.5s ease;} #cmeMain .mv.is-in .mv-column::before{opacity: 1;} #cmeMain .mv .mv-heading{opacity: 0;transition: opacity 2.5s 1s ease;} #cmeMain .mv.is-in .mv-heading{opacity: 1;} #cmeMain .mv .mv-scroll{opacity: 0;transition: opacity 2s 2s ease;} #cmeMain .mv.is-in .mv-scroll{opacity: 1;} } @media only screen and (max-width: 767px) { #cmeMain .mv{height: 228px;} #cmeMain .mv::before{background: url(/club-me/knowledge/saijiki/img/mv-img_sp.jpg) right center/cover no-repeat;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;opacity: 0;transition: opacity 4s ease;} #cmeMain .mv .container{max-width: none;height: 100%;} #cmeMain .mv .mv-column{justify-content: center;} #cmeMain .mv .mv-column::before{display: none;} #cmeMain .mv .mv-heading{justify-content: center;margin-right: 0;padding-bottom: 0;} #cmeMain .mv .mv-heading img{width: 183px;} #cmeMain .mv .mv-scroll{position: absolute;top: 65px;left: 20px;transform: translateY(0);} #cmeMain .mv .mv-scroll img{width: 26px;} #cmeMain .mv .mv-scroll::before{background-color: #fff;content: "";position: absolute;top: 113px;left: 13px;width: 1px;height: 50px;animation: scroll-before 3s linear infinite;} #cmeMain .mv .mv-scroll::after{background-color: #424242;content: "";position: absolute;top: 163px;left: 13px;width: 1px;height: 50px;animation: scroll-after 3s linear infinite;} #cmeMain .mv.is-in::before{opacity: 1;} } @keyframes scroll-before{ 0%{height: 0;} 15%{height: 50px;} } @keyframes scroll-after{ 0%{height: 0;} 15%{height: 0;} 30%{height: 50px;} } #cmeMain .lead{position: relative;margin-top: -90px;font-family: 'Noto Serif JP', serif;font-weight: 500;z-index: 5;padding-top: 190px;} #cmeMain .lead::before{background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);content: "";position: absolute;top: 0;right: 0;width: calc(50% + 510px);height: 100%;z-index: -1;} #cmeMain .lead .lead-wrap{display: flex;justify-content: flex-end;position: relative; padding: 0 0 100px 0;font-size: calc((16 / 12) * 100%);line-height: calc(40 / 16);letter-spacing: .35em;} #cmeMain .lead .lead-wrap::before{background-color: #424242;content: "";position: absolute;top: -230px;right: 1.25em;width: 1px;height: 200px;} #cmeMain .lead .lead-text{writing-mode: vertical-rl;} #cmeMain .lead .lead-text p+p{margin-right: 2.4em;} @media only screen { #cmeMain .lead .lead-wrap::before{height: 0px;transition: height .8s ease;} #cmeMain .lead .lead-wrap.is-in::before{height: 200px;} } @media only screen and (min-width: 768px) and (max-width: 980px) { #cmeMain .lead .lead-wrap::before{right: calc((30 / 16) * .5em);} #cmeMain .lead .lead-text{line-height: calc(30 / 16);} #cmeMain .lead .lead-text p+p{margin-right: 2em;} } @media only screen and (max-width: 767px) { #cmeMain .lead{margin-top: 0;padding-top: 75px;} #cmeMain .lead::before{background: linear-gradient(180deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);width: 100%;} #cmeMain .lead .lead-wrap{display: block;padding: 0 0 90px 0;font-size: calc((14 / 10.5) * 100%);line-height: calc(52 / 28);letter-spacing: .1em;} #cmeMain .lead .lead-wrap::before{display: none;} #cmeMain .lead .lead-text{writing-mode: inherit;} #cmeMain .lead .lead-text p+p{margin: 2em 0 0 0;} } #cmeMain .month{position: relative;padding-bottom: 70px;z-index: 10;} #cmeMain .month .container{position: relative;} #cmeMain .month .month-links{display: flex;align-items: flex-start;flex-wrap: wrap;margin: 0 -15px;} #cmeMain .month .month-links a{color: #424242;display: block;position: relative;margin: 0 15px;padding-bottom: calc(((610 / 1204) * 100%) + 22px);width: calc(25% - 30px);} #cmeMain .month .month-links a::after{box-sizing: border-box;border:1px solid #424242;content: "";position: absolute;top: 0;left: 0;width: 100%;height: calc(100% - 22px);opacity: 0;z-index: +1;} #cmeMain .month .month-links a:nth-of-type(4n+2){margin-top: 40px;} #cmeMain .month .month-links a:nth-of-type(4n+3){margin-top: 80px;} #cmeMain .month .month-links a:nth-of-type(4n+4){margin-top: 120px;} #cmeMain .month .month-links__flex{box-sizing: border-box;position: absolute;top: 0;left: 0;padding-bottom: 22px;width: 100%;height: 100%;} #cmeMain .month .month-links__flex-inner{display: flex;flex-direction: column;height: 100%;} #cmeMain .month .month-links__flex-inner img{width: 100%;} #cmeMain .month .month-links__flex-cell{flex:1;display: flex;align-items: center;justify-content: center;position: relative;} #cmeMain .month .month-links__flex-date{font-family: 'Cormorant Garamond', serif;font-weight: 300;line-height: 1;text-align: center;position: absolute;top: -35%;left: calc((30 / 271) * 100%);} #cmeMain .month .month-links__flex-date span{display: block;font-size: calc((92 / 12) * 100%);margin-bottom: 3px;} #cmeMain .month .month-links__flex-date small{display: block;font-size: calc((20 / 12) * 100%);font-weight: 700;letter-spacing: .2em;position: relative;padding-top: 15px;} #cmeMain .month .month-links__flex-date small::before{background-color: #424242;content: "";position: absolute;top: 0;left: calc(50% - 5px);width: 10px;height: 1px;} #cmeMain .month .month-links__flex-view{font-family: 'Cormorant Garamond', serif;font-size: calc((14 / 12) * 100%);font-weight: 500;letter-spacing: .2em; writing-mode: vertical-rl;position: absolute;bottom: -22px;right: calc((15 / 271) * 100%);} #cmeMain .month .month-links__flex-view::before{background-color: #b7b7b7;content: "";position: absolute;bottom: calc(100% + 10px);left: 50%;width: 1px;height: 40px;} #cmeMain .month .month-links__flex-name{display: flex;flex-direction: column;align-items: center;writing-mode: vertical-rl;} #cmeMain .month .month-links__flex-name.name-adjust span{padding-top: 2.2em;} #cmeMain .month .month-links__flex-name span{display: block;font-family: 'Noto Serif JP', serif;font-size: calc((26 / 12) * 100%);font-weight: 300;letter-spacing: .15em;} #cmeMain .month .month-links__flex-name small{display: block;font-size: calc((14 / 12) * 100%);font-weight: 300;letter-spacing: .3em;} #cmeMain .month .month-links__flex-date.no-3{top:calc(-35% - 22px);} #cmeMain .month .month-links__flex-date.no-3 span{font-size: calc((80 / 12) * 100%);margin-bottom: 22px;} #cmeMain .month .month-links__flex-date.no-4{top:calc(-35% - 17px);} #cmeMain .month .month-links__flex-date.no-4 span{font-size: calc((80 / 12) * 100%);margin-bottom: 17px;} #cmeMain .month .month-links__flex-date.no-5{top:calc(-35% - 23px);} #cmeMain .month .month-links__flex-date.no-5 span{font-size: calc((80 / 12) * 100%);margin-bottom: 23px;} #cmeMain .month .month-links__flex-date.no-6 span{font-size: calc((80 / 12) * 100%);} #cmeMain .month .month-links__flex-date.no-7{top:calc(-35% - 25px);} #cmeMain .month .month-links__flex-date.no-7 span{font-size: calc((80 / 12) * 100%);margin-bottom: 25px;padding-left: 0.13em;} #cmeMain .month .month-links__flex-date.no-8{top:calc(-35% - 6px);} #cmeMain .month .month-links__flex-date.no-8 span{font-size: calc((80 / 12) * 100%);margin-bottom: 6px;} #cmeMain .month .month-links__flex-date.no-9{top:calc(-35% - 23px);} #cmeMain .month .month-links__flex-date.no-9 span{font-size: calc((80 / 12) * 100%);margin-bottom: 23px;} @media only screen and (min-width: 768px) { #cmeMain .month .month-links a::after{transition: opacity .5s ease, transform .5s ease;} #cmeMain .month .month-links a:hover::after{opacity: 1;transform: translate(15px, 15px);} #cmeMain .month .month-links a .month-links__flex-inner{transition: background-color .5s ease;} #cmeMain .month .month-links a:hover .month-links__flex-inner{background-color: #fff;} #cmeMain .month .month-links a .month-links__flex-view{transition: bottom .5s ease;} #cmeMain .month .month-links a:hover .month-links__flex-view{bottom: 18px;} } @media only screen and (min-width: 768px) and (max-width: 1200px) { #cmeMain .month .month-links{margin: 0 -1.25vw;} #cmeMain .month .month-links a{margin: 0 1.25vw;padding-bottom: calc(((610 / 1204) * 100%) + 1.8333vw);width: calc(25% - 2.5vw);} #cmeMain .month .month-links a::after{height: calc(100% - 1.8333vw);} #cmeMain .month .month-links a:nth-of-type(4n+2){margin-top: 3.3333vw;} #cmeMain .month .month-links a:nth-of-type(4n+3){margin-top: 6.6666vw;} #cmeMain .month .month-links a:nth-of-type(4n+4){margin-top: 9.9999vw;} #cmeMain .month .month-links__flex{padding-bottom: 1.8333vw;} #cmeMain .month .month-links__flex-date span{font-size: 7.6666vw;margin-bottom: .25vw;} #cmeMain .month .month-links__flex-date small{font-size: 1.6666vw;padding-top: 1.25vw;} #cmeMain .month .month-links__flex-date small::before{left: calc(50% - .4166vw);width: .8333vw;} #cmeMain .month .month-links__flex-view{font-size: 1.1666vw;bottom: -1.8333vw;} #cmeMain .month .month-links__flex-view::before{bottom: calc(100% + .8333vw);height: 3.3333vw;} #cmeMain .month .month-links__flex-name span{font-size: 2.1666vw;} #cmeMain .month .month-links__flex-name small{font-size: 1.1666vw;} #cmeMain .month .month-links__flex-date.no-3{top:calc(-35% - 1.8333vw);} #cmeMain .month .month-links__flex-date.no-3 span{font-size: 6.6666vw;margin-bottom: 1.8333vw;} #cmeMain .month .month-links__flex-date.no-4{top:calc(-35% - 1.4166vw);} #cmeMain .month .month-links__flex-date.no-4 span{font-size: 6.6666vw;margin-bottom: 1.4166vw;} #cmeMain .month .month-links__flex-date.no-5{top:calc(-35% - 1.9166vw);} #cmeMain .month .month-links__flex-date.no-5 span{font-size: 6.6666vw;margin-bottom: 1.9166vw;} #cmeMain .month .month-links__flex-date.no-6 span{font-size: 6.6666vw;} #cmeMain .month .month-links__flex-date.no-7{top:calc(-35% - 2.0833vw);} #cmeMain .month .month-links__flex-date.no-7 span{font-size: 6.6666vw;margin-bottom: 2.0833vw;} #cmeMain .month .month-links__flex-date.no-8{top:calc(-35% - .5vw);} #cmeMain .month .month-links__flex-date.no-8 span{font-size: 6.6666vw;margin-bottom: .5vw;} #cmeMain .month .month-links__flex-date.no-9{top:calc(-35% - 1.9166vw);} #cmeMain .month .month-links__flex-date.no-9 span{font-size: 6.6666vw;margin-bottom: 1.9166vw;} #cmeMain .month .month-links a:hover::after{transform: translate(1.25vw, 1.25vw);} #cmeMain .month .month-links a:hover .month-links__flex-view{bottom: 1.5vw;} } @media only screen and (max-width: 767px) { #cmeMain .month{padding-bottom: 50px;} #cmeMain .month .month-links{margin: 0 -7px;} #cmeMain .month .month-links a{margin: 0 7px;padding-bottom: 86.6666vw;width: calc(50% - 14px);} #cmeMain .month .month-links a:nth-of-type(4n+2){margin-top: 0;} #cmeMain .month .month-links a:nth-of-type(4n+3){margin-top: 0;} #cmeMain .month .month-links a:nth-of-type(4n+4){margin-top: 0;} #cmeMain .month .month-links a:nth-of-type(even){margin-top: 30px;} #cmeMain .month .month-links__flex{padding-bottom: 0;} #cmeMain .month .month-links__flex-inner{background-color: #fff;} #cmeMain .month .month-links__flex-cell{align-items: flex-start; justify-content: flex-start;padding: 0 4vw;} #cmeMain .month .month-links__flex-date{top: -58%;left: 4vw;} #cmeMain .month .month-links__flex-date span{font-size: 14vw;margin-bottom: .4vw;} #cmeMain .month .month-links__flex-date small{font-size: 3.7333vw;padding-top: 1.6vw;} #cmeMain .month .month-links__flex-date small::before{left: calc(50% - .5333vw);width: 1.0666vw;} #cmeMain .month .month-links__flex-view{font-size: 2.6666vw;writing-mode:inherit;bottom: 4.6666vw;right: 4vw;} #cmeMain .month .month-links__flex-view::before{bottom: 50%;left: auto;right: calc(100% + 1.3333vw); width: 5.3333vw;height: 1px;} #cmeMain .month .month-links__flex-name{display: block;writing-mode: inherit;margin-top: 8vw;} #cmeMain .month .month-links__flex-name.name-adjust span{padding-top: 0;margin-top: 0;} #cmeMain .month .month-links__flex-name.name-adjust{margin-top: 6vw;} #cmeMain .month .month-links__flex-name.name-adjust+.month-links__flex-view{bottom: 3.5vw;} #cmeMain .month .month-links__flex-name span{font-size: 4.26666vw;margin-top: 1.3333vw;} #cmeMain .month .month-links__flex-name small{font-size: 2.6666vw;letter-spacing: .2em;} #cmeMain .month .month-links__flex-date.no-3{top:calc(-58% - 2vw);} #cmeMain .month .month-links__flex-date.no-3 span{font-size: 12vw;margin-bottom: 4vw;} #cmeMain .month .month-links__flex-date.no-4{top:calc(-58% - 2vw);} #cmeMain .month .month-links__flex-date.no-4 span{font-size: 14vw;margin-bottom: 2.5vw;} #cmeMain .month .month-links__flex-date.no-5{top:calc(-58% - 2vw);} #cmeMain .month .month-links__flex-date.no-5 span{font-size: 12vw;margin-bottom: 4vw;} #cmeMain .month .month-links__flex-date.no-6{top:calc(-58% + 2vw);} #cmeMain .month .month-links__flex-date.no-6 span{font-size: 12vw;} #cmeMain .month .month-links__flex-date.no-7{top:calc(-58% - 2vw);} #cmeMain .month .month-links__flex-date.no-7 span{font-size: 12vw;margin-bottom: 4vw;} #cmeMain .month .month-links__flex-date.no-8{top:calc(-58% + .5vw);} #cmeMain .month .month-links__flex-date.no-8 span{font-size: 12vw;margin-bottom:1vw;} #cmeMain .month .month-links__flex-date.no-9{top:calc(-58% - 2vw);} #cmeMain .month .month-links__flex-date.no-9 span{font-size: 12vw;margin-bottom: 4vw;} }