[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}[data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}[data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}[data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}[data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}[data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}[data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}[data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}[data-aos^=slide][data-aos^=slide].aos-animate{-webkit-transform:translateZ(0);transform:translateZ(0)}[data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}[data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}[data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}[data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}[data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } @charset "UTF-8"; @-ms-viewport { width: auto; } html { -ms-overflow-style: scrollbar; } html, body { margin: 0; padding: 0; } body { background-color: #fff; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Osaka, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif; font-size: 15px; text-align: justify; line-height: 2; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; font-weight: 400; padding-top: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; zoom: 1; } body.navigation-open, body.modal-open { overflow: hidden; } body.loading { position: fixed; top: 0; left: 0; } h1, h2, h3 { margin: 0; font-weight: 500; } a { text-decoration: none; color: inherit; } a, button { cursor: pointer; } a:focus, button:focus { outline: none; } button { background: none; border: none; padding: 0; margin: 0; } ul, ol { list-style: none; padding: 0; margin: 0; } dl, dt, dd { padding: 0; margin: 0; } img { max-width: 100%; } p { padding: 0; margin: 0; line-height: 1.66; } .full { position: relative; } header { width: 100%; height: 50px; position: fixed; background: #000; z-index: 1000; top: 0; left: 0; } header:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5); } .header-opening { position: absolute; height: auto; top: -50px; } .header-opening:after { display: none; } .header-main-logo { width: 200px; margin: auto; text-align: center; height: 100%; line-height: 46px; } .header-wwd-logo { position: absolute; right: 25px; top: 12px; width: 60px; } .header-opening .header-wwd-logo { right: 20px; top: 20px; } .toggle-side-menu { position: absolute; top: 5px; left: 20px; z-index: 600; text-align: center; } .header-opening .toggle-side-menu { top: 20px; } .toggle-bars { width: 40px; height: 40px; } .toggle-bars .bar { width: 30px; display: block; margin: 5px auto 0; border-bottom: 2px solid #fff; -webkit-transition: opacity 0.4s ease,-webkit-transform 0.4s ease; transition: opacity 0.4s ease,-webkit-transform 0.4s ease; transition: transform 0.4s ease,opacity 0.4s ease; transition: transform 0.4s ease,opacity 0.4s ease,-webkit-transform 0.4s ease; } .navigation-open .toggle-bars .bar { background: #fff !important; width: 32px; } .toggle-side-menu.open .toggle-bars .bar.bar-2 { opacity: 0; } .toggle-side-menu.open .toggle-bars .bar.bar-1 { -webkit-transform: rotate(45deg) translate(9px, 9px); transform: rotate(45deg) translate(9px, 9px); } .toggle-side-menu.open .toggle-bars .bar.bar-3 { -webkit-transform: rotate(-45deg) translate(1px, -1px); transform: rotate(-45deg) translate(1px, -1px); } .toggle-label { color: #fff; font-size: 10px; line-height: 1.8; opacity: 1; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .toggle-side-menu.open .toggle-label { opacity: 0; } .page-guide { position: fixed; margin-top: -65px; left: 0; width: 100%; height: 65px; text-align: center; font-family: "Roboto", sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 400; } .page-guide span { position: absolute; bottom: 42px; width: 100%; text-align: center; display: block; font-size: 10px; color: #fff; } .page-guide a { display: block; } .page-guide:after { content: ""; display: block; height: 42px; width: 1px; background: #fff; margin: auto; -webkit-animation: stretch 1.6s ease-in-out infinite; animation: stretch 1.6s ease-in-out infinite; position: absolute; bottom: 0; left: -100%; right: -100%; } @-webkit-keyframes stretch { 0% { height: 42px; opacity: 0; } 40% { height: 42px; opacity: 1; } 100% { opacity: 1; height: 0; } } @keyframes stretch { 0% { height: 42px; opacity: 0; } 40% { height: 42px; opacity: 1; } 100% { opacity: 1; height: 0; } } .side-menu { width: 100vw; height: 100vh; z-index: 800; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 50px; position: fixed; top: 0; left: 0; pointer-events: none; display: none; } .navigation-open .side-menu { pointer-events: all; } .side-menu-backdrop { position: absolute; background: #000; width: 200%; height: 200%; top: 0; left: 0; z-index: 0; } .side-menu-wrapper { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; color: #fff; overflow-y: scroll; position: relative; z-index: 100; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) and (orientation: portrait) { .side-menu-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 40px 0 60px; } } .side-menu-wrapper .menu-link-index, .side-menu-wrapper h2 { font-family: "Roboto", sans-serif; font-size: 24px; font-weight: 500; letter-spacing: 0.1em; display: block; text-align: center; width: 100%; } .side-menu-wrapper .menu-link-index { padding-bottom: 20px; } .side-menu-wrapper .menu-link-index:after { content: ""; display: block; height: 2px; width: 50px; margin: auto; background: #fff; -webkit-transform: translateY(10px); transform: translateY(10px); } .side-menu-titles { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .side-menu-items nav { width: 1125px; margin: 20px auto; } @media screen and (max-width: 1124px) { .side-menu-items nav { width: 80%; } } .side-menu-items nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -10px; text-align: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .side-menu-items nav ul li { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) and (orientation: portrait) { .side-menu-items nav ul li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media screen and (max-width: 768px) and (orientation: portrait) { .side-menu-items nav ul li.menu5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .side-menu-items nav ul li.menu5 .image { display: block; width: 50%; margin: 0 auto; } } .side-menu-items nav ul li.current-page .image { opacity: 0.3; } .side-menu-items nav ul li.current-page:hover .image { opacity: 0.3; } .side-menu-items nav ul li:hover .image { opacity: 0.6; } .side-menu-items nav ul li .image { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .side-menu-items nav .label { display: inline-block; } @media screen and (max-width: 768px) and (orientation: portrait) { .side-menu-items nav .label { padding: 5px 0; } } .menu-brand-navigation { width: 600px; margin: 20px auto 0; text-align: center; } .menu-brand-navigation p { font-size: 12px; } .menu-share { margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .menu-share h3 { font-weight: 500; font-size: 12px; padding-right: 10px; line-height: 32px; } .menu-share ul li { display: inline-block; padding: 0 10px; } #footer-group { position: relative; overflow: hidden; z-index: 600; } #footer-group:after { content: ""; display: block; position: absolute; width: 100%; height: 80px; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } #footer-group.index-footer { color: #fff; background: #000; } #footer-group .content-pane { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 60px calc(50% - 300px); } @media screen and (max-width: 768px) and (orientation: portrait) { #footer-group .content-pane { padding: 60px 50px; } } #footer-group .footer-about .staff-credit { padding-bottom: 30px; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; } #footer-group .footer-about .staff-credit p { font-size: 12px; } #footer-group .footer-about p { font-size: 14px; text-align: center; } #footer-group .button-link-instagram { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 30px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Roboto", sans-serif; border: 1px solid #000; } #footer-group .button-link-instagram img { margin-left: 26px; } .button-link { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; height: 50px; background: #B83434; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 30px 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Roboto", sans-serif; color: #fff; } .button-link img { margin-left: 26px; } .footer { background: #303030; width: 100%; height: 210px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 44px 0; color: #fff; text-align: center; left: 0; bottom: 0; z-index: 300; } .footer .footer-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; } .footer p { font-size: 10px; line-height: 1.8; } .footer .logo { height: 50px; display: block; margin-right: 68px; } .footer .logo img { height: 100%; } .footer-sns-share { padding: 20px 0 10px; text-align: center; } .footer-sns-share h3 { font-weight: 400; font-size: 12px; margin-bottom: 10px; } .footer-sns-share ul { letter-spacing: -1em; } .footer-sns-share ul li { display: inline-block; letter-spacing: normal; padding: 0 14px; } .footer-sns p { font-size: 12px; } .footer-sns ul li { display: inline-block; padding: 0 10px; } .footer-sns ul li.instagram a img { height: 20px; } #page.agroup { background: #F7F7FB; } @media screen and (min-width: 769px) { .visible-pc { display: block; } } @media screen and (max-width: 768px) and (orientation: portrait) { .visible-pc { display: none; } } @media screen and (min-width: 769px) { .visible-tab { display: none; } } @media screen and (max-width: 768px) and (orientation: portrait) { .visible-tab { display: block; } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #loading { min-height: 100vh; min-width: 100vw; background: #000; z-index: 1000; position: fixed; top: 0; left: 0; } .loading-circle { display: block; width: 100%; text-align: center; line-height: 100vh; } .loading-circle img { -webkit-animation: spin 0.8s cubic-bezier(0, 0, 0.93, 0.45) infinite; animation: spin 0.8s cubic-bezier(0, 0, 0.93, 0.45) infinite; } #opening { margin-top: -50px; } .view-opening { position: relative; max-width: 1366px; min-height: 100vh; overflow: hidden; margin: 0 auto; } .view-opening img { width: 100%; position: absolute; top: 0; margin: auto; } #introduction { padding-bottom: 65px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } #introduction.hidden { pointer-events: none; } #introduction.aos-animate { display: none; } .view-introduction { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100%; padding: 0 calc(50% - 350px); color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } @media screen and (max-width: 768px) and (orientation: portrait) { .view-introduction { padding: 0 50px; } } .view-introduction .catch { font-size: 20px; padding: 64px 0; text-align: center; } .view-introduction .description { font-size: 15px; width: 100%; } #index-movie { padding: 0 calc(50% - 400px) 42px; position: relative; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { #index-movie { padding: 0 50px 42px; height: 100vh; } } #index-movie h1 { text-align: center; } #index-movie .movie { margin: 15px auto 0; position: relative; width: 700px; padding-top: 56.28571%; } @media screen and (max-width: 768px) and (orientation: portrait) { #index-movie .movie { width: 620px; } } #index-movie .movie iframe { width: 100% !important; height: 100% !important; position: absolute; left: 0; top: 0; } @media screen and (max-height: 690px) { #index-movie .movie { width: 70vh; height: 39.4vh; padding-top: 0; } } #index-movie p { line-height: 1.66; text-align: center; width: 800px; } @media screen and (max-width: 768px) and (orientation: portrait) { #index-movie p { width: 100%; } } .section-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 10px; background: #000; position: relative; z-index: 600; } .section-wrapper section { width: 100%; overflow: hidden; } @media screen and (max-width: 1366px) { .section-wrapper section { padding: 0 10px 10px; } } .section-tiles { padding: 0 calc(50% - 650px) 10px; -webkit-box-sizing: border-box; box-sizing: border-box; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-auto-flow: dense; } @media screen and (max-width: 768px) and (orientation: portrait) { .section-tiles { padding: 0 0 10px; grid-template-columns: 1fr 1fr 1fr; } } .box-square { position: relative; } .box-square:before { content: ""; display: block; padding-top: 100%; } .box-square.bgroup { overflow: hidden; cursor: pointer; } .box-square.bgroup .image { position: absolute; width: 100%; height: 100%; } .box-square.bgroup .text { position: absolute; bottom: 0; width: 100%; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 12px 0 2px; text-align: center; z-index: 100; opacity: 0; background: rgba(0, 0, 0, 0.5); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); transition: all 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); } .box-square.bgroup .text span { display: block; width: 100%; } .box-square.bgroup .text .name { line-height: 0; } .box-square.bgroup .text .title { font-family: "Roboto", sans-serif; color: #fff; font-size: 12px; font-weight: 500; line-height: 1; position: absolute; width: 100%; left: 0; bottom: 7px; } @media screen and (max-width: 768px) and (orientation: portrait) { .box-square.bgroup.aos-animate .text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @media screen and (min-width: 769px) { .box-square.bgroup:hover .text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .box-square.item { overflow: hidden; cursor: pointer; } .box-square.item .label { position: absolute; width: 52px; height: 52px; right: 10px; top: 10px; z-index: 100; } .box-square.item .label span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #000; width: 100%; height: 100%; border-radius: 100%; z-index: 100; } .box-square.item .image { position: absolute; width: 100%; height: 100%; } .box-rectangle { position: relative; } .box-rectangle.agroup { cursor: pointer; } .box-rectangle.agroup:before { content: ""; position: absolute; display: block; padding-top: 66.19718%; } .box-rectangle.agroup .content-pane { position: relative; width: 100%; height: 100%; } .box-rectangle.agroup .text { position: absolute; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 100; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); transition: all 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); } .box-rectangle.agroup .text h2 { line-height: 1; } .box-rectangle.agroup .text a { display: block; } .box-rectangle.agroup .more { position: absolute; width: 100%; text-align: center; bottom: 55px; z-index: 100; } .box-rectangle.agroup .more span { display: inline-block; background: #000; padding: 12px 80px; border-radius: 40px; line-height: 1; } .box-rectangle.agroup .image { background: #000; } .box-rectangle.agroup .image img { -webkit-transition: opacity 0.6s cubic-bezier(0.59, 0.01, 0.23, 1); transition: opacity 0.6s cubic-bezier(0.59, 0.01, 0.23, 1); } @media screen and (max-width: 768px) and (orientation: portrait) { .box-rectangle.agroup.aos-animate .text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @media screen and (min-width: 769px) { .box-rectangle.agroup:hover .text { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .box-rectangle.texture { overflow: hidden; cursor: pointer; } .box-rectangle.texture h2 { position: relative; z-index: 10; } .box-rectangle.texture .image { position: absolute; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; } .box-square, .box-rectangle { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .box-square a, .box-rectangle a { display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .box-square .content-pane, .box-rectangle .content-pane { position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } [id="1-1"] { background: #000; color: #fff; } [id="1-1"] .content-pane { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } [id="1-1"] .content-pane h2 { width: 100%; line-height: 0; } [id="1-5"] { grid-column: 3 / span 3; grid-row: 1 / span 2; } [id="1-5"]:before { content: ""; display: block; padding-top: 66.19718%; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-5"] { grid-column: 1 / span 3; grid-row: 1 / span 2; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-6"] { grid-row: 4; grid-column: 2; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-7"] { grid-row: 4; grid-column: 3; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-8"] { grid-row: 5; grid-column: 3; } } [id="1-9"] { color: #fff; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-9"] { grid-row: 5; grid-column: 2; } } [id="1-9"] .content-pane { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } [id="1-9"] .content-pane h2 { width: 100%; line-height: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="1-10"] { grid-column: 1; grid-row: 5; } } [id="2-1"] { grid-column: 1 / span 3; grid-row: 1 / span 2; } [id="2-1"]:before { content: ""; display: block; padding-top: 66.19718%; } [id="2-4"] { grid-row: 2 / span 1; grid-column: 4 / span 2; } [id="2-4"]:before { content: ""; display: block; padding-top: 49.02724%; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="2-4"] { grid-column: 2 / span 2; grid-row: 4; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="2-5"] { grid-column: 2; } [id="2-6"] { grid-column: 3; } [id="2-7"] { grid-column: 1; } [id="2-8"] { grid-column: 1; grid-row: 4; } } [id="2-9"] { grid-column: 3; grid-row: 3; } [id="3-2"] { grid-row: 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="3-2"] { grid-row: 4; grid-column: 3; } } [id="3-3"] { grid-column: 2 / span 3; grid-row: 1 / span 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="3-3"] { grid-column: 1 / span 3; grid-row: 1 / span 2; } [id="3-3"]:before { content: ""; display: block; padding-top: 66.19718%; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="3-1"] { grid-column: 3; grid-row: 3; } [id="3-4"] { grid-column: 1; grid-row: 4; } [id="3-5"] { grid-column: 2; grid-row: 4; } [id="3-6"] { grid-column: 1; grid-row: 5; } [id="3-7"] { grid-column: 2; grid-row: 5; } [id="3-9"] { grid-column: 3; grid-row: 5; } } [id="3-8"] { grid-column: 3 / span 2; grid-row: 3 / span 1; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="3-8"] { grid-column: 1 / span 2; grid-row: 3 / span 1; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="4-3"] { grid-column: 3; } [id="4-4"] { grid-column: 3; grid-row: 3; } } [id="4-5"] { grid-column: 3 / span 3; grid-row: 1 / span 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="4-5"] { grid-column: 1 / span 3; grid-row: 1 / span 2; } [id="4-5"]:before { content: ""; display: block; padding-top: 66.19718%; } } [id="4-6"] { grid-column: 1 / span 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="4-6"] { grid-column: 2 / span 2; grid-row: 5; } } [id="5-1"] { grid-column: 1 / span 3; grid-row: 1 / span 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="5-1"]:before { content: ""; display: block; padding-top: 66.19718%; } } @media screen and (max-width: 768px) and (orientation: portrait) { [id="5-4"] { grid-row: 4; } [id="5-5"] { grid-column: 3; grid-row: 3; } [id="5-8"] { grid-column: 3; } [id="5-9"] { grid-column: 2; } } [id="5-7"] { grid-column: 2 / span 2; } @media screen and (max-width: 768px) and (orientation: portrait) { [id="5-7"] { grid-column: 1 / span 2; grid-row: 4; } } #agroup-mainview { background: #000; } #agroup-mainview .image { height: 492px; width: 100%; overflow: hidden; position: relative; text-align: center; } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-mainview .image { width: 100%; height: 100%; padding-top: 93.33333%; } } #agroup-mainview .image img { position: absolute; height: 100%; width: auto; max-width: none; margin: auto; top: 0; left: -100%; right: -100%; } #agroup-mainview .text { height: 230px; padding-top: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } #agroup-mainview .text .title { font-family: "Roboto", sans-serif; font-size: 40px; line-height: 1.6; letter-spacing: 1px; font-weight: 500; } #agroup-mainview .text .description { width: 700px; margin: 20px auto 20px; } .personal-information { padding: 0 calc(50% - 490px); } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information { padding: 0 50px; } } .personal-information h1 span, .personal-information h2 span { font-family: "Roboto", sans-serif; } .personal-information .introduction { padding: 90px 0 10px; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .introduction { padding-top: 50px; } } .personal-information .introduction h1 { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; text-align: center; font-size: 30px; letter-spacing: 0.05em; padding-bottom: 20px; } @media screen and (min-width: 769px) { .personal-information .introduction h1 br { display: none; } } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .introduction h1 { line-height: 1.2; padding-bottom: 15px; } } .personal-information .introduction h1 span { position: relative; display: inline-block; font-weight: 500; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .introduction h1 span { padding-top: 54px; } } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information#agroup1-person1 .introduction h1 span { padding-top: 74px; } .personal-information#agroup2-person3 .introduction h1 span { padding-top: 64px; } .personal-information#agroup2-person4 .introduction h1 span { padding-top: 62px; } .personal-information#agroup3-person1 .introduction h1 span { padding-top: 62px; } .personal-information#agroup4-person1 .introduction h1 span { padding-top: 68px; } .personal-information#agroup4-person2 .introduction h1 span { padding-top: 62px; } .personal-information#agroup5-person1 .introduction h1 span { padding-top: 38px; } .personal-information#agroup5-person2 .introduction h1 span { padding-top: 72px; } } @media screen and (min-width: 769px) { .personal-information#agroup1-person1 .introduction h1 span { padding-top: 66px; padding-left: 110px; } .personal-information#agroup1-person2 .introduction h1 span { padding-top: 48px; padding-left: 110px; } .personal-information#agroup1-person3 .introduction h1 span { padding-top: 48px; padding-left: 105px; } .personal-information#agroup2-person1 .introduction h1 span { padding-top: 56px; padding-left: 105px; } .personal-information#agroup2-person2 .introduction h1 span { padding-top: 56px; padding-left: 105px; } .personal-information#agroup2-person3 .introduction h1 span { padding-top: 64px; padding-left: 100px; } .personal-information#agroup2-person4 .introduction h1 span { padding-top: 60px; padding-left: 105px; } .personal-information#agroup3-person1 .introduction h1 span { padding-top: 52px; padding-left: 100px; } .personal-information#agroup3-person2 .introduction h1 span { padding-top: 64px; padding-left: 104px; } .personal-information#agroup4-person1 .introduction h1 span, .personal-information#agroup4-person2 .introduction h1 span { padding-top: 52px; padding-left: 104px; } .personal-information#agroup5-person1 .introduction h1 span { padding-top: 52px; padding-left: 104px; } .personal-information#agroup5-person2 .introduction h1 span { padding-top: 84px; padding-left: 104px; } } .personal-information .introduction h1 img { position: absolute; top: 0; left: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .introduction h1 img { left: -100px; } } .personal-information .introduction h2 { text-align: center; font-weight: normal; font-size: 24px; padding-bottom: 10px; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .introduction h2 { line-height: 1.4; } } @media screen and (min-width: 769px) { .personal-information .introduction h2 br { display: none; } } .personal-information .main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 90px; margin-top: -50px; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .main { padding-top: 60px; } } .personal-information .main .image { -webkit-box-flex: 0; -ms-flex: 0 0 500px; flex: 0 0 500px; max-width: 500px; padding-right: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 670px; position: relative; opacity: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .main .image { margin: auto; margin-bottom: 20px; } } .personal-information .main .image.aos-animate { opacity: 1; } .personal-information .main .image.aos-animate .front-image { -webkit-animation: width-late 0.6s cubic-bezier(0.9, 0.01, 0.43, 1); animation: width-late 0.6s cubic-bezier(0.9, 0.01, 0.43, 1); } .personal-information .main .image.aos-animate .back-color { -webkit-animation: width 0.3s cubic-bezier(0.9, 0.01, 0.43, 1); animation: width 0.3s cubic-bezier(0.9, 0.01, 0.43, 1); } @media screen and (min-width: 769px) { .personal-information.right-image-layout .main .image { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-left: auto; } } .personal-information .main .image .front-image { display: block; width: 480px; height: 650px; position: absolute; overflow: hidden; top: 0; z-index: 100; } .personal-information.left-image-layout .main .image .front-image { right: 20px; } .personal-information.right-image-layout .main .image .front-image { left: 20px; } .personal-information .main .image .front-image img { position: absolute; top: 0; width: 480px; height: 650px; z-index: 100; max-width: none; } .personal-information.left-image-layout .main .image .front-image img { right: 0; } .personal-information.right-image-layout .main .image .front-image img { left: 0; } .personal-information .main .image .back-color { content: ""; display: block; width: 480px; height: 650px; position: absolute; z-index: 0; top: 20px; overflow: hidden; } .personal-information.left-image-layout .main .image .back-color { right: 0; } .personal-information.right-image-layout .main .image .back-color { left: 0; } .personal-information .main .image .back-color:after { content: ""; background: #000; width: 100%; height: 100%; position: absolute; top: 0; right: 0; } .personal-information .main .subject { -webkit-box-flex: 0; -ms-flex: 0 0 450px; flex: 0 0 450px; max-width: 450px; } @media screen and (max-width: 768px) and (orientation: portrait) { .personal-information .main .subject { margin: auto; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-top: 20px; } } @media screen and (min-width: 769px) { .personal-information.left-image-layout .main .subject { margin-left: auto; } .personal-information#agroup4-person1 .main .subject, .personal-information#agroup4-person2 .main .subject { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .personal-information .main .subject .item-image { height: 300px; text-align: center; } .personal-information .main .subject .item-image img { height: 100%; width: auto; } .personal-information .main .subject .catalog { position: relative; height: 498px; border-bottom: 2px solid #000; } .personal-information .main .subject .catalog h3 { font-family: "Roboto", sans-serif; font-size: 24px; letter-spacing: 1px; font-weight: 500; height: 48px; } .personal-information .main .subject .catalog .prev, .personal-information .main .subject .catalog .next { position: absolute; top: 175px; cursor: pointer; z-index: 200; } .personal-information .main .subject .catalog .prev { left: 0; } .personal-information .main .subject .catalog .next { right: 0; } .personal-information .main .subject .catalog .item-list { position: relative; border-top: 2px solid #000; height: calc(100% - 48px); } .personal-information .main .subject .catalog .item-list li { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; -webkit-transition: opacity 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); transition: opacity 0.4s cubic-bezier(0.59, 0.01, 0.23, 1); opacity: 0; height: 100%; width: 100%; } .personal-information .main .subject .catalog .item-list li.active { pointer-events: all; opacity: 1; } .personal-information .main .subject .catalog .item-position { text-align: center; letter-spacing: -0.4em; position: absolute; bottom: 15px; width: 100%; line-height: 0; } .personal-information .main .subject .catalog .item-position li { display: inline-block; letter-spacing: normal; padding: 0 6px; background: none; -webkit-transition: background 0.4s ease-in-out; transition: background 0.4s ease-in-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .personal-information .main .subject .catalog .item-position li.active span { background: #000; } .personal-information .main .subject .catalog .item-position li span { display: block; width: 5px; height: 5px; border: 1px solid #000; } .personal-information .main .subject .catalog .item-information dt { text-align: center; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; padding: 0 0 10px; } .personal-information .main .subject .catalog .item-information dd { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .personal-information .main .subject .catalog .item-information dd .description { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; font-size: 12px; } .personal-information .main .subject .catalog .item-information dd .credit { color: #5D5D5D; font-size: 10px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .personal-information .main .subject .catalog .item-information dd .credit.multi-color { height: auto; padding-top: 5px; } .personal-information .main .subject .catalog .item-information dd .credit p { line-height: 1.4; letter-spacing: 0.15em; } .personal-information .main .subject .catalog .item-information dd .credit .product-color { -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; } .personal-information .main .subject .catalog .item-information dd a { margin-left: auto; position: absolute; right: 0; bottom: 40px; } .personal-information .main .subject .profile h2 { font-size: 16px; line-height: 1.6; padding: 20px 0 0; font-weight: normal; } .personal-information .main .subject .profile h2 span { font-size: 20px; display: block; font-weight: 500; letter-spacing: 1px; } .personal-information .main .subject .profile p { font-size: 13px; } #agroup4-profile { padding: 0 calc(50% - 490px); } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup4-profile { padding: 0 50px; } } #agroup4-profile h2 { font-size: 16px; line-height: 1.6; padding: 20px 0 0; font-weight: normal; } #agroup4-profile h2 span { font-size: 20px; display: block; font-weight: 500; letter-spacing: 1px; font-family: "Roboto", sans-serif; } #agroup4-profile p { font-size: 13px; } @-webkit-keyframes width { 0% { width: 0; } 50% { } 100% { width: 480px; } } @keyframes width { 0% { width: 0; } 50% { } 100% { width: 480px; } } @-webkit-keyframes width-late { 0% { width: 0; } 50% { width: 0; } 75% { } 100% { width: 480px; } } @keyframes width-late { 0% { width: 0; } 50% { width: 0; } 75% { } 100% { width: 480px; } } .button-item-detail { background: #000; width: 180px; height: 40px; display: inline-block; text-align: center; line-height: 46px; border-radius: 40px; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; } .button-item-detail:hover { opacity: 0.7; } #agroup-movie { background: #000; margin: 90px 0 30px; padding: 70px calc(50% - 490px); } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-movie { margin-top: 70px; padding: 40px 40px; } } #agroup-movie .content-pane { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #agroup-movie .text { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; padding: 50px 30px 0 0; } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-movie .text { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 0 30px 0; } } #agroup-movie .text h3 { width: 100%; text-align: center; } #agroup-movie .text p { margin: 30px 0 15px; } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-movie .text p { padding: 0 10px; } } #agroup-movie .movies { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-movie .movies { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-right: 10px; } } #agroup-movie .movie { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; padding-left: 5px; } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-movie .movie { padding-left: 10px; } } #agroup-movie .movie span { display: block; position: relative; width: 100%; padding-top: 100%; } #agroup-movie .movie span iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #agroup-other { margin: 60px 0 0; padding: 0 calc(50% - 490px); } @media screen and (max-width: 768px) and (orientation: portrait) { #agroup-other { padding: 0 50px; } } #agroup-other h2 { width: 100%; text-align: center; margin-bottom: 20px; } #agroup-other ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } #agroup-other ul li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 20px; padding-bottom: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } #agroup-other ul li a { display: block; position: relative; border: 1px solid #000; background: #000; } #agroup-other ul li a .image { display: block; line-height: 0; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } #agroup-other ul li a .group-name { display: -webkit-box; display: -ms-flexbox; display: flex; background: #000; text-align: center; height: 42px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #agroup-other ul li a .more { opacity: 0; position: absolute; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; bottom: 76px; left: 0; width: 100%; font-family: "Roboto", sans-serif; color: #fff; font-size: 18px; text-align: center; z-index: 10; } #agroup-other ul li a .more span { display: inline-block; } #agroup-other ul li a .more span:after { content: ''; display: block; background: #fff; width: 100%; height: 1px; -webkit-transform: translateY(-8px); transform: translateY(-8px); } #agroup-other ul li a:hover .image { opacity: 0.6; } #agroup-other ul li a:hover .more { opacity: 1; } #agroup-other .button-index { width: 250px; height: 40px; margin: 40px auto 0; background: #000; border-radius: 40px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 400; font-family: "Roboto", sans-serif; color: #fff; font-size: 18px; } .modal-content { padding: 50px 0 0; position: absolute; z-index: 700; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal-content:after { content: ''; display: block; width: 100vw; height: 100%; left: 0; top: 0; bottom: 0; position: fixed; } .modal-open .modal-content { opacity: 1; position: fixed; } .modal-content ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .modal-content ul li { display: block; } @media screen and (max-width: 768px) and (orientation: portrait) { .modal-content#modal-bgroup { padding: 50px 120px 0; } } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 0; opacity: 1; } .modal-open .modal-backdrop { width: 100vw; height: 100vh; z-index: -1; } #modal-texture .modal-backdrop, #modal-item .modal-backdrop { background-color: rgba(0, 0, 0, 0.9); } #modal-event .modal-backdrop, #modal-bgroup .modal-backdrop { background-color: black; } /*=========================================*/ /* TEXTURE */ /*=========================================*/ #texture-list { width: 800px; margin: auto; color: #414141; text-align: left; } #texture-close { position: fixed; top: 50px; right: calc(50% - 400px); margin: 25px 25px 0 0; text-align: right; z-index: 200; } @media screen and (max-width: 768px) and (orientation: portrait) { #texture-close { margin: 25px 40px 0 0; } } #texture-close a { -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #texture-close a:hover, #texture-close a:active { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } #texture-close img { width: 25px; } #texture-list li.item { background-position: center; background-size: cover; background-repeat: no-repeat; padding: 35px 40px 60px 40px; position: relative; } #texture-list li { position: relative; } #texture-list .name { text-align: center; } #texture-list .read { text-align: center; font-size: 22px; font-weight: 600; } #texture-list .img { padding: 20px 0 0 0; } #texture-list .text { font-size: 13px; line-height: 160%; padding: 20px 10px 0 10px; } #texture-list .data { overflow: hidden; padding: 30px 0 0; } #texture-list .credit { width: 500px; padding: 0 0 10px 0; float: left; min-height: calc(3em + 25px); } #texture-list .credit li { padding: 0; font-size: 10px; line-height: 150%; } #texture-list .btn { float: right; padding: 0 0 5px 0; width: 180px; } #texture-list .btn a { -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #texture-list .btn a:hover, #texture-list .btn a:active { opacity: .7; -webkit-transition: all 0.5s; transition: all 0.5s; } #texture-list .photographs { position: absolute; bottom: 0; right: 0; z-index: 20; font-size: 9px; } #texture-list .scroll { text-align: center; width: 100%; z-index: 100; position: absolute; left: 0; bottom: 10px; border: 0; } #texture-list .scroll a { display: block; width: 39px; margin: auto; text-align: center; -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #texture-list .scroll a:hover, #texture-list .scroll a:active { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 840px) { #texture-list { width: 100%; } #texture-list li.item { padding: 30px 30px 50px 30px; } #texture-list .name img { max-width: 100%; } #texture-list .point { padding: 0 0 0 0; } #texture-list .read { padding: 19px 0 0 0; } #texture-list .read img { max-width: 100%; } #texture-list .img { padding: 18px 0 0 0; } #texture-list .img img { width: 100%; } #texture-list .text { padding: 20px 0 0 0; font-size: 15px; } #texture-list .data { padding: 30px 0 0 0; font-size: 14px; } #texture-list .credit { width: 100%; float: none; } #texture-list .credit li { font-size: 13px; line-height: 120%; } #texture-list .photographs { right: 5px; } } /*=========================================*/ /* TEXTURE */ /*=========================================*/ #item-list { width: 800px; margin: auto; color: #414141; text-align: left; } #item-close { position: fixed; top: 50px; right: calc(50% - 400px); margin: 25px 25px 0 0; text-align: right; z-index: 200; } @media screen and (max-width: 768px) and (orientation: portrait) { #item-close { margin: 25px 40px 0 0; } } #item-close a { -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #item-close a:hover, #item-close a:active { opacity: .5; -webkit-opacity: .5; -moz-opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } #item-close img { width: 25px; } #item-list li.item { background-position: center; background-size: cover; background-repeat: no-repeat; padding: 15px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #item-list .box { /* Safari */ display: -webkit-box; display: -ms-flexbox; display: flex; /* Safari */ -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: #ffffff; padding: 0 0 10px 0; overflow: hidden; } #item-list .img { width: 280px; margin: 0 0 -35px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #item-list .text_area { width: 400px; padding: 28px 0 0 0; margin: 0 90px 0 0; } #item-list .number { font-family: "Roboto", sans-serif; font-size: 14px; color: #000; } #item-list .number span { font-size: 20px; font-style: italic; font-weight: 500; } #item-list .name { padding: 0; font-family: "Roboto", sans-serif; font-size: 20px; color: #414141; font-weight: 500; } #item-list .read { padding: 7px 0 0 0; font-size: 13px; line-height: 160%; color: #414141; } #item-list .text { border-top: solid 1px black; padding: 8px 0 0 0; margin: 12px 0 0 0; font-size: 10px; line-height: 150%; color: #4E4E4E; } #item-list .color { padding: 7px 0 0 0; text-align: center; } #item-list .btn { padding: 10px 0 3px 0; text-align: right; overflow: hidden; z-index: 20; } #item-list .btn a { display: block; width: 76px; float: right; -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #item-list .btn a:hover, #item-list .btn a:active { opacity: .7; -webkit-transition: all 0.5s; transition: all 0.5s; } #item-list .scroll { text-align: center; width: 100%; } #item-list .scroll a { display: block; width: 39px; margin: auto; text-align: center; -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #item-list .scroll a:hover, #item-list .scroll a:active { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } #item-list .img_sp { display: none; } #item-list .color_sp { display: none; } @media screen and (max-width: 840px) { #item-list { width: 100%; } #item-list .text_area { width: 100%; padding: 25px 100px 0 100px; margin: 0 0 0 0; } #item-list .number { padding: 0 22px 0 22px; } #item-list .number span { font-size: 18px; font-weight: bold; } #item-list .name { padding: 2px 22px 0 22px; font-size: 24px; font-weight: bold; text-align: center; } #item-list .read { padding: 15px 22px 0 22px; font-size: 15px; line-height: 150%; } #item-list .text { padding: 8px 0 0 0; margin: 12px 22px 0 22px; font-size: 12px; } #item-list .btn { padding: 10px 22px 15px 22px; } #item-list .btn a { width: 90px; } #item-list .img { display: none; } #item-list .color { display: none; } #item-list .img_sp { display: block; padding: 0; text-align: center; width: 270px; margin: 15px auto 0; } #item-list .img_sp img { max-width: 100%; margin: auto; } #item-list .color_sp { display: block; padding: 0 22px 0 22px; text-align: center; width: 340px; margin: 0 auto; } #item-list .color_sp img { max-width: 100%; margin: auto; } } /*=========================================*/ /* B group */ /*=========================================*/ #b-group_close { position: fixed; top: 50px; right: 25px; margin: 25px 25px 0 0; text-align: right; z-index: 200; } @media screen and (max-width: 768px) and (orientation: portrait) { #b-group_close { margin: 25px 40px 0 0; } } #b-group_close a { -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #b-group_close a:hover, #b-group_close a:active { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } #b-group_close img { width: 25px; } #b-group_title { width: 820px; margin: 50px auto 0; text-align: center; position: relative; } #b-group_title:after { content: ""; position: absolute; height: 1px; background: #fff; top: 16px; left: 0; width: 100%; z-index: 0; } #b-group_title h1 { color: #fff; padding: 0 12px; background: #000; font-family: "Roboto", sans-serif; font-weight: 500; display: inline-block; position: relative; z-index: 100; font-size: 32px; line-height: 1; } #b-group_title span { position: absolute; background-color: #000000; width: 350px; left: 50%; margin: -20px 0 0 -175px; text-align: center; } #b-group_title img { width: 277px; } #b-group_title img.sp { display: none; } #b-group_list { width: 800px; margin: auto; color: #ffffff; text-align: left; position: relative; z-index: 100; } #b-group_list ul { padding: 0 0 0 0; position: relative; } #b-group_list ul:after { display: block; content: ""; width: 100%; height: 3px; background: #000; position: absolute; bottom: 0; z-index: 100; } #b-group_list li.person { /* Safari */ display: -webkit-box; display: -ms-flexbox; display: flex; /* Safari */ -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: solid 1px #939396; padding: 0 0 30px 0; } #b-group_list .name { width: 100%; padding: 30px 0 0 10px; line-height: 0; } #b-group_list .name img { margin-bottom: 12px; } #b-group_list .img { width: 390px; margin: 0 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #b-group_list .text_area { width: 390px; padding: 0 0 40px 0; margin: 0 0 0 20px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #b-group_list .message { width: 390px; padding: 24px 0 10px; text-align: center; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } #b-group_list .message h2 { font-size: 20px; font-weight: normal; line-height: 1.5; width: 314px; margin: auto; } @media screen and (max-width: 768px) and (orientation: portrait) { #b-group_list .message h2 { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; } } #b-group_list .message img { position: absolute; } #b-group_list .message .quotation-left { left: 0; top: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { #b-group_list .message .quotation-left { left: 20px; width: 24px; } } #b-group_list .message .quotation-right { right: 0; bottom: 0; } @media screen and (max-width: 768px) and (orientation: portrait) { #b-group_list .message .quotation-right { right: 20px; width: 24px; } } #b-group_list .message span { background-repeat: no-repeat; padding: 0 30px 0 30px; display: block; } #b-group_list .used { padding: 20px 0 6px; font-family: "Roboto", sans-serif; font-size: 16px; font-weight: bold; line-height: 100%; text-align: left; } #b-group_list .item { padding: 5px 0 0 0; font-size: 16px; line-height: 160%; } #b-group_list .item span { display: block; font-size: 12px; } #b-group_list .job { padding: 45px 0 0 0; font-size: 15px; line-height: 160%; } @media screen and (max-width: 840px) { #b-group_title { width: 100%; } #b-group_title span { width: 300px; margin: -12px 0 0 -150px; } #b-group_title img { width: 250px; } #b-group_title img.pc { display: none; } #b-group_title img.sp { display: block; margin: auto; } #b-group_list { width: 100%; } #b-group_list ul { padding: 0 55px 55px 55px; } #b-group_list .name { width: 100%; padding: 30px 0 15px 0; } #b-group_list .name img { margin-left: 0; margin-bottom: 0; } #b-group_list .img { width: 100%; text-align: center; } #b-group_list ul { padding: 0 30px 30px 30px; } #b-group_list .img img { width: 100%; margin: auto; } #b-group_list .text_area { width: 100%; padding: 15px 0 0 0; margin: 0 0 0 0; } #b-group_list .message { background-size: 25px; width: 100%; padding: 0 0 0 0; } #b-group_list .message span { background-size: 25px; } #b-group_list .message img.pc { display: none; } #b-group_list .message img.sp { display: block; max-width: 350px; width: 100%; } #b-group_list .used { padding: 25px 0 0 0; } #b-group_list .item { padding: 5px 0 0 0; font-size: 16px; } #b-group_list .job { padding: 30px 0 0 0; font-size: 17px; } } /*=========================================*/ /* EVENT */ /*=========================================*/ #modal-event { padding-top: 86px; } #event_close { position: fixed; top: 50px; right: 25px; margin: 25px 25px 0 0; text-align: right; z-index: 200; } @media screen and (max-width: 768px) and (orientation: portrait) { #event_close { margin: 25px 40px 0 0; } } #event_close a { -webkit-transition: opacity 1.0s ease-out; transition: opacity 1.0s ease-out; -webkit-transition: all 1.5s; transition: all 1.5s; } #event_close a:hover, #event_close a:active { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } #event_close img { width: 25px; } #event_title { width: 820px; margin: auto; padding: 70px 0 20px 0; position: relative; } #event_title:after { content: ""; display: block; width: 100%; height: 1px; background: #fff; top: 50%; left: 0; } #event_title span { position: absolute; background-color: #000000; width: 356px; margin: -45px auto 0; text-align: center; left: -100%; right: -100%; } #event_title span img.title01 { width: 355px; } #event_title span img.title02 { width: 320px; margin-top: 5px; } #event_area { width: 800px; margin: auto; color: #ffffff; text-align: left; } #event_area .title { padding: 37px 0 0 0; font-size: 16px; line-height: 170%; text-align: center; } #event_area .title .sp_br { display: none; } #event_area .text { padding: 30px 0 0 0; font-size: 14px; line-height: 190%; } @media screen and (min-width: 769px) { #event_area .img.visible-pc { padding: 30px 0 0 0; } #event_area .img.visible-pc ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: -5px; margin-right: -5px; } #event_area .img.visible-pc li { -webkit-box-flex: 0; -ms-flex: 0 0 0 33.33333%; flex: 0 0 0 33.33333%; max-width: 33.33333%; } #event_area .img.visible-pc li { padding: 0 5px; } #event_area .img.visible-pc li span img { width: 100%; } #event_area .img.visible-pc li span img.sp { display: none; } } @media screen and (max-width: 768px) and (orientation: portrait) { #event_area .img.visible-tab { padding: 30px 0 0 0; } #event_area .img.visible-tab .img-list { overflow: hidden; } #event_area .img.visible-tab .img-list .img-item { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0; } #event_area .img.visible-tab .img-list .img-item.first { width: 100%; padding-bottom: 10px; } #event_area .img.visible-tab .img-list .img-item.second { width: 50%; padding-right: 5px; float: left; } #event_area .img.visible-tab .img-list .img-item.last { width: 50%; padding-left: 5px; float: right; } #event_area .img.visible-tab .img-list .img-item img { width: 100%; } } #event_area .caption { padding: 5px 0 0 0; font-size: 10px; text-align: right; } #event_area .data { padding: 0 0 0 0; position: absolute; font-size: 14px; } #event_area .data .information { font-family: "Roboto", sans-serif; font-size: 15px; font-weight: bold; line-height: 100%; text-align: left; padding: 0 0 5px 0; } #event_area .data li span.btn { position: relative; z-index: 1000; } #event_area .data li span.btn a { border: solid 1px #ffffff; padding: 2px 15px 0 15px; margin-left: 10px; font-size: 12px; line-height: 100%; color: #ffffff; text-decoration: none; } #event_area .data li span.btn a:hover, #event_area .data li span.btn a:active { border: solid 1px #939396; } #event_area .map { padding: 20px 0 20px 0; position: relative; z-index: 1000; display: block; } @media screen and (max-width: 840px) { #event_title { width: 100%; padding: 38px 0 25px 0; } #event_area { width: auto; padding: 0 55px 30px 55px; } #event_area .title { padding: 37px 0 0 0; font-size: 20px; } #event_area .title .sp_br { display: block; } #event_area .img { /* Safari */ display: -webkit-box; display: -ms-flexbox; display: flex; /* Safari */ -ms-flex-wrap: wrap; flex-wrap: wrap; } #event_area .img li { width: 50%; } #event_area .img li.first { width: 100%; } #event_area .img li.center { margin: 0 0; } #event_area .img li span { margin: 0 0 0 5px; display: block; } #event_area .img li.first span { margin: 0 0 10px 0; } #event_area .img li.center span { margin: 0 5px 0 0; } #event_area .img li span img.pc { display: none; } #event_area .img li span img.sp { display: block; } #event_area .data { position: relative; font-size: 15px; } #event_area .data .information { font-size: 18px; } #event_area .map { margin: 35px 0 20px 0; padding: 0 0 0 0; border: solid 1px #ffffff; } } @media screen and (max-width: 640px) { #event_area { padding: 0 30px 30px 30px; } } .content-pane { position: relative; z-index: 100; } #texture-list .content-pane { padding-bottom: 32px; } .texture-background, .item-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; text-align: center; z-index: 50; } .texture-background img, .item-background img { max-width: none; height: 100%; min-width: 100%; width: auto; left: -100%; right: -100%; margin: auto; position: absolute; }