@charset "UTF-8";
:root {
--color-primary: #B50080;
--color-dark: #1A1A1A;
--color-gray: #F3F4F8;
--color-gray2: #B2B2B2;
--color-rightgray: #666666;
--color-rightgray2: #888888;
--color-rightgray3: #E6E9F1;
--color-blue: #007AAB;
--color-rightblue: #0099CE;
--color-skyblue: #E7F5F9;
--color-skyblue2: #007AAB;
--color-red: #D70606;
}
/*
フォントサイズ
$font-size: フォントサイズ(必須)
$line-height: ラインハイト or 空
$letter-spacing: レタースペーシング or 空
*/
/*
*/
/*
Hタグ
$type: 2(H2サイズ)
*/
/*
共通ボタン 大
default: skyblue2
*/
/*
共通ボタン 小
default: skyblue2
*/
/*
通常
SP 左右のマージン20px
PC 幅900px
*/
/*
角丸border付きレイアウト
*/
/*
グレーの文字の補足系
*/
.p-top__main {
overflow: hidden;
/**
* UI Initiative Carousel Slider
*
* Infinite 3D carousel slider
*
* https://uiinitiative.com
*
* Copyright 2024 UI Initiative
*
* Released under the UI Initiative Regular License
*
* September 12, 2024
*/
}
.p-top__main .swiper-carousel {
position: relative;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
}
.p-top__main .swiper-carousel .swiper-slide,
.p-top__main .swiper-carousel swiper-slide {
position: relative;
}
.p-top__section {
margin-left: 20px;
margin-right: 20px;
padding-top: 48px;
}
@media screen and (min-width: 1120px) {
.p-top__section {
width: 100%;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 769px) {
.p-top__section {
padding-top: 40px;
}
}
.p-top__section.--search {
max-width: 100%;
margin: 0px;
padding: 24px 20px;
background: var(--color-gray);
}
@media screen and (min-width: 769px) {
.p-top__section.--search {
padding: 32px 20px;
}
}
.p-top__section.--movie {
padding-top: 32px;
}
@media screen and (min-width: 769px) {
.p-top__section.--movie {
padding-top: 56px;
}
}
@media screen and (min-width: 769px) {
.p-top__section.--facility {
padding-top: 56px;
}
}
@media screen and (min-width: 769px) {
.p-top__section.--campaign {
padding-top: 56px;
}
}
.p-top__section.--note {
padding-top: 32px;
}
@media screen and (min-width: 769px) {
.p-top__section.--note {
padding-top: 40px;
}
}
.p-top__search {
display: flex;
flex-direction: column;
gap: 24px 0px;
}
@media screen and (min-width: 769px) {
.p-top__search {
max-width: 985px;
margin: 0px auto;
gap: 32px 0px;
}
}
.p-top__searchTitle {
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 0px 8px;
font-size: 1.7rem;
line-height: 1.4705882353;
font-weight: 700;
}
@media screen and (min-width: 769px) {
.p-top__searchTitle {
padding-bottom: 12px;
}
}
.p-top__searchTitle::before {
content: "";
width: 24px;
height: 24px;
display: block;
}
.p-top__searchTitle.--theater::before {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-top__searchTitle.--facility::before {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
}
.p-top__searchBtn {
width: 100%;
height: 48px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 0px 16px;
background-color: var(--color-blue);
border: 1px solid var(--color-blue);
position: relative;
overflow: hidden;
}
@media screen and (min-width: 769px) {
.p-top__searchBtn {
height: 56px;
}
}
.p-top__searchBtn::before {
content: "";
width: 0px;
height: 100%;
position: absolute;
top: 0px;
right: -30px;
border-radius: 100px;
transition: width 0.4s ease;
isolation: isolate;
background-color: #fff;
}
.p-top__searchBtn::after {
content: "";
width: 24px;
height: 24px;
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
order: 1;
isolation: isolate;
transition: background-image 0.4s ease;
}
.p-top__searchBtn span {
font-size: 1.7rem;
line-height: 1.4705882353;
font-weight: 700;
color: #fff;
order: 2;
transition: color 0.4s ease;
isolation: isolate;
}
@media screen and (min-width: 769px) {
.p-top__searchBtn:hover::before {
left: -30px;
right: unset;
width: calc(100% + 60px);
}
.p-top__searchBtn:hover::after {
background: url('data:image/svg+xml;utf8,') center center/contain no-repeat;
transition-delay: 0.1s;
}
.p-top__searchBtn:hover span {
color: var(--color-blue);
}
}
@media screen and (min-width: 769px) {
.p-top__theater {
order: 2;
}
}
@media screen and (min-width: 769px) {
.p-top__facility {
order: 1;
}
}
.p-top__facilitys {
width: calc(100% + 40px);
margin-left: -20px;
}
@media screen and (min-width: 769px) {
.p-top__facilitys {
width: 100%;
margin: 0px;
}
}
.p-top__heading {
padding-bottom: 24px;
font-size: 2.2rem;
line-height: 1.5;
font-weight: 700;
}
.p-top__button {
margin-top: 24px;
display: flex;
justify-content: center;
}
.p-top__button .c-btn {
width: 245px;
margin: 0px auto;
}
@media screen and (min-width: 769px) {
.p-top__button .c-btn {
width: 100%;
}
}
.p-top__button a:not(.c-btn) {
font-size: 1.4rem;
line-height: 1.5;
}
.p-top__buttonInner {
display: flex;
flex-direction: column;
gap: 12px 0px;
justify-content: flex-end;
align-items: flex-end;
}
@media screen and (max-width: 768px) {
.p-top__buttonInner {
width: 100%;
}
}
@media screen and (min-width: 769px) {
.p-top__buttonInner {
width: 295px;
gap: 8px 0px;
}
}
.p-top__service {
display: flex;
flex-wrap: wrap;
gap: 15px 15px;
}
@media screen and (min-width: 769px) {
.p-top__service {
gap: 16px 32px;
}
}
.p-top__service li {
width: calc(50% - 7.5px);
}
@media screen and (min-width: 769px) {
.p-top__service li {
width: calc(25% - 24px);
}
}
.p-top__service a {
display: block;
color: var(--color-dark);
}
@media screen and (min-width: 769px) {
.p-top__service a {
transition: opacity 0.4s ease;
}
.p-top__service a:hover {
opacity: 0.7;
}
}
.p-top__service picture {
border: 1px solid #E6E9F1;
}
.p-top__service h3 {
padding-top: 12px;
font-size: 1.4rem;
line-height: 1.5;
font-weight: 700;
}
@media screen and (min-width: 769px) {
.p-top__service h3 {
padding-top: 16px;
font-size: 1.7rem;
line-height: 1.4705882353;
}
}
.p-top__ticker {
overflow: hidden;
}
.p-top__tickers {
display: flex;
-moz-column-gap: 40px;
column-gap: 40px;
}
@media screen and (max-width: 768px) {
.p-top__tickers {
animation: ticker_sp 40s linear infinite;
}
}
@media screen and (min-width: 769px) {
.p-top__tickers {
animation: ticker_pc 40s linear infinite;
-moz-column-gap: 60px;
column-gap: 60px;
}
}
.p-top__tickers img {
width: 555px;
}
@media screen and (min-width: 769px) {
.p-top__tickers img {
width: 1300px;
}
}
@keyframes ticker_sp {
0% {
transform: translate3d(0px, 0px, 0px);
}
100% {
transform: translate3d(-575px, 0px, 0px);
}
}
@keyframes ticker_pc {
0% {
transform: translate3d(0px, 0px, 0px);
}
100% {
transform: translate3d(-1320px, 0px, 0px);
}
}
/*# sourceMappingURL=../../sourcemaps/assets_2025/css/top.css.map */